/* Preview base: the shared language every section is written in. All colour, type, radius and motion come
   from the identity variables set by app/tokens.js. Sizes assume a 1440 px design width; --vh is the design
   viewport height (900 px in previews, the real window in the prototype). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font:var(--t-w) 16px/1.55 var(--f-t);overflow-x:hidden;--vh:900px}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:var(--onacc)}

/* layout */
.wrap{padding-inline:var(--mar);position:relative}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gut)}
.grid>*,.sec>*{min-width:0}
.sec{position:relative;overflow:hidden}
.sec.alt{background:var(--alt-bg);color:var(--alt-ink);--ink:var(--alt-ink);--ink2:var(--alt-ink2);--line:var(--alt-line);--bg:var(--alt-bg);--acc:var(--alt-acc)}
.rule{height:1px;background:var(--line)}
.vrule{width:1px;background:var(--line)}

/* type roles */
.d{font-family:var(--f-d);font-weight:var(--d-w);letter-spacing:var(--d-track);line-height:var(--d-lh);font-variation-settings:var(--d-vs);text-transform:var(--d-case);word-spacing:max(0em, calc(var(--d-track) * -2.2))}
/* tight display tracking also shrinks the space between words (Clash Display's space is narrow): the word gap gets back what the tracking takes */
/* the same for display-font text that sections set without .d (found by scanning every page) */
.cs-brief .doc,[data-sid="pf-colophon"] .v,[data-sid="pf-colophon"] .tv,.pf-faq .q,[data-sid="legal.document"] h2,[data-sid="legal.document"] h2 span,[data-sid="legal.document"] h3{word-spacing:max(0em, calc(var(--d-track) * -2.2))}
/* the FAQ's group chips wrap on a phone instead of running off the edge */
@media (max-width:760px){.sec.pf-faq .side .ix{flex-wrap:wrap;overflow:visible;max-width:100%}}
.d em,.d .em{font-style:normal}
.em-italic .d em{font-family:var(--f-em);font-style:var(--em-style);font-weight:400;letter-spacing:-0.01em;text-transform:none}
body:not(.em-italic) .d em{font-family:inherit}
.em-accent .d em{color:var(--acc)}
.em-outline .d em{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.em-tone .d em{color:color-mix(in srgb,var(--ink) 52%,var(--bg))}
/* a link to the page it sits on (render.js hideSelf) */
.is-here{display:none!important}
/* what he erased in the studio (render.js hideApply); faded and dashed while the eraser is on, so a click restores it */
body:not(.x-erase) .x-hidden{display:none!important}
body.x-erase .x-hidden{opacity:.22!important;outline:1px dashed currentColor;outline-offset:3px}
body.x-erase .x-hov{outline:2px solid #ff8b5c!important;outline-offset:3px;cursor:pointer!important}
body.x-erase .x-hov.x-hidden{opacity:.6!important}
.d-xxl{font-size:calc(clamp(88px,13.2vw,212px) * var(--d-scale,1))}
.d-xl{font-size:calc(clamp(68px,9vw,148px) * var(--d-scale,1))}
.d-l{font-size:calc(clamp(48px,6vw,96px) * var(--d-scale,1))}
.d-m{font-size:calc(clamp(34px,3.9vw,62px) * var(--d-scale,1))}
.d-s{font-size:calc(clamp(26px,2.5vw,40px) * var(--d-scale,1))}
.k{font-family:var(--f-m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);line-height:1.4}
.k b{color:var(--ink);font-weight:500}
.lead{font-size:clamp(18px,1.45vw,23px);line-height:1.45;color:var(--ink);max-width:34em}
.p{font-size:15.5px;line-height:1.6;color:var(--ink2);max-width:36em}
.mono{font-family:var(--f-m)}
.num{font-family:var(--f-m);font-size:11.5px;color:var(--ink2);letter-spacing:.06em}

/* actions */
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-radius:var(--r);background:var(--acc);color:var(--onacc);font:500 14.5px var(--f-t);letter-spacing:.005em;white-space:nowrap;transition:transform var(--dur) var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn .ar{display:inline-block;transition:transform var(--dur) var(--ease)}.btn:hover .ar{transform:translateX(4px)}
.link{display:inline-flex;gap:10px;align-items:center;font:500 14px var(--f-t);border-bottom:1px solid currentColor;padding-bottom:3px}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:500 12px var(--f-m);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc)}

/* visuals */
[data-vis]{position:relative}
.vis-c{position:absolute;inset:0;width:100%;height:100%}
.gmark{width:100%;height:100%;color:var(--ink)}
/* the drawn logotype in the chrome (client mark): height follows the header, the G takes --mark */
.lg.lg-dl{display:inline-flex;align-items:center;line-height:0}.lg.lg-dl svg{height:var(--lg-h,26px);width:auto;display:block}
@media (max-width:640px){.lg.lg-dl svg{height:var(--lg-h-m,21px)}}
/* (2026-11-10) live site only: no Arabic edition yet, so no ع button (site.js sets .no-ar from PLAN.AR_READY) */
.no-ar [data-lang="ar"],.no-ar .lgs:not(.lg-strip .lgs){display:none!important}.no-ar .ut [data-lang="ar"]+.u::before{display:none}
a[data-nolink]{cursor:default}
.lc-lg{display:inline-block;line-height:0}.lc-lg svg{height:15px;width:auto;display:block}
.vis-planes{perspective:900px}
.vis-planes .pl-wrap{position:absolute;inset:16%;transform-style:preserve-3d;transition:transform .2s linear}
.vis-planes .pl{position:absolute;inset:0;transform:translateZ(calc(var(--i) * 40px - 80px));border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:color-mix(in srgb,var(--bg) 55%,transparent);border-radius:var(--r-card);display:grid;place-items:center;box-shadow:0 30px 60px -40px color-mix(in srgb,var(--ink) 40%,transparent)}
.vis-planes .pl .gmark{width:54%;height:54%;opacity:calc(.12 + var(--i) * .1)}
.vis-planes .pl:last-child .gmark{color:var(--acc);opacity:1}
.vis-type{display:grid;place-items:center}
.vis-type .ty{position:relative;font-family:var(--f-d);font-weight:var(--d-w);font-variation-settings:var(--d-vs);line-height:.8;font-size:min(62vh,38vw);height:100%;display:grid;place-items:center}
.vis-type .ty span{grid-area:1/1;transition:transform .3s linear}
.vis-type .ty .o{color:transparent;-webkit-text-stroke:1px var(--ink);opacity:.4}
.vis-type .ty .o2{-webkit-text-stroke-color:var(--acc);opacity:.9}
.vis-orbit .orb{width:100%;height:100%;overflow:visible}
.vis-orbit ellipse{fill:none;stroke:var(--ink);stroke-opacity:.28;stroke-width:.6}
.vis-orbit .node circle{fill:var(--acc)}
.vis-orbit text{font:6px var(--f-m);fill:var(--ink2);letter-spacing:.06em;text-transform:uppercase}
.vis-orbit .core{color:var(--ink)}
.vis-render{overflow:hidden}.vis-render img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s linear}
.cover{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--bg3)}

/* the grid made visible (identity option) */
.gs-rules .gridshow,.gs-marks .gridshow,.gs-index .gridshow{position:absolute;inset:0;pointer-events:none;z-index:1;padding-inline:var(--mar)}
.gridshow .grid{height:100%}
.gs-rules .gridshow .grid>i{border-inline:1px solid var(--line);opacity:.55}
.gs-marks .gridshow .grid>i{background:linear-gradient(var(--ink),var(--ink)) left 28px/9px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 4px 24px/1px 9px no-repeat;opacity:.35}
.gs-index .gridshow .grid>i{border-inline-start:1px solid var(--line);opacity:.7}
.gs-index .gridshow .grid>i::before{content:attr(data-n);position:absolute;margin:10px 0 0 6px;font:9.5px var(--f-m);color:var(--ink2)}
body:not(.gs-rules):not(.gs-marks):not(.gs-index) .gridshow{display:none}

/* textures */
.tx-grain::after,.tx-paper::after,.tx-scan::after{content:'';position:fixed;inset:-50%;pointer-events:none;z-index:9000;opacity:.07}
.tx-grain::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tx-paper::after{opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .3' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tx-scan::after{inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 1px,transparent 1px 3px);opacity:.06}

/* reveal on enter, timed by the identity motion */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.mo-step .rv{transform:none}
.rv-line{display:block;overflow:hidden}.rv-line>span{display:block;transform:translateY(105%);transition:transform var(--dur) var(--ease)}.in .rv-line>span,.rv-line.in>span{transform:none}
.static .rv,.static .rv-line>span{opacity:1!important;transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.rv,.rv-line>span{opacity:1!important;transform:none!important;transition:none!important}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* prototype mode: the header stays on screen */
.m-site [data-sid^="nv-"]{position:fixed!important}

/* gallery mode label (QA and the section library) */
.lbl{position:absolute;top:10px;inset-inline-end:10px;z-index:50;font:500 11px var(--f-m);background:var(--acc);color:var(--onacc);padding:4px 9px;border-radius:4px;pointer-events:none}
.pick{outline:3px solid var(--acc);outline-offset:-3px}

/* studio preview: parts are pickable */
body.pickable [data-sid]{cursor:pointer}body.pickable [data-sid]:hover{outline:2px dashed var(--acc);outline-offset:-2px}