/* ============================================================================
   DEVETRUST v6 — measured-skeleton chrome + home acts. Loaded AFTER site.css.
   STRUCTURE: measured 16-act skeleton (containers 1312/1400/1440 · 64px rails ·
   zero inter-section gaps · breakpoints 600/960/1280/1920).
   SKIN: post-C&R constitution (10-style type vocabulary via tokens · crimson
   single accent · DAY page with ONE night passage on the walker · one shadow
   recipe · 0.3s color-only hovers per C&R C6 #4 · radius set {4,6,8,12,999,50%}).
   Token dictatorship: hex only in :root blocks / custom-prop definitions.
   Logical properties only (RTL-first, one sheet for both directions).
   ============================================================================ */

:root{
  /* v6 additions to the live token sheet (site.css defines the core cast) */
  --fs-btn:1rem;                /* 16px — buttons + nav items (C1e style #9)  */
  --fs-idx:.875rem;             /* 14px — idx apparatus (C1e style #10)       */
  --v6-maxw:1440px;             /* general container                          */
  --v6-maxw-walker:1312px;      /* feature-walker container                   */
  --v6-maxw-carousel:1400px;    /* carousel sections                          */
  --v6-rail:64px;               /* measured side rails                        */
  --v6-ut-h:45px;               /* utility bar                                */
  --v6-hd-h:80px;               /* main nav                                   */
  --v6-sn-h:64px;               /* anchor sub-nav                             */
  --v6-footer-ink:#335882;      /* steel — official secondary background (founder 2026-07-27) */
  --v6-night:#335882;           /* walker section ground → steel (founder: "change it here!") */
  --v6-night-veil:#26456a;      /* steel-tint card fill (was navy #1a2450)     */
  --v6-shadow:0 24px 48px -24px rgba(16,25,58,.25);  /* THE day shadow recipe */
  --v6-hairline:var(--navy-line);
  --v6-scrim:rgba(16,25,58,.8); /* photo-card bottom-up overlay ink           */
  --v6-steel:#335882;           /* reg-band credibility strip (de-darked navy) */
  /* ---- HERO coded scene (CHANGE 1): inverted for light — saturated strokes,
     no white-glow-on-dark; navy map/skyline, indigo globe/route/network, one
     crimson-free scene so the filled CTA stays the single accent. ---------- */
  --hero-map-fill:rgba(16,25,58,.045);  /* barely-there navy wash in the outline */
  --hero-map-line:#10193A;              /* map border + skyline strokes (navy)    */
  --hero-globe:#6353c1;                 /* globe meridians (indigo) — faint       */
  --hero-node:#2a3766;                  /* network node dots (soft navy)          */
  --hero-node-hi:#6353c1;               /* accent nodes (indigo)                  */
  --hero-link:#6353c1;                  /* network links + traveling pulses       */
  --hero-path:#6353c1;                  /* truck route (indigo)                   */
  --hero-truck-body:#ffffff;            /* truck body (white)                     */
  --hero-truck-ink:#10193A;             /* truck outline + wheels (navy)          */
  --hero-truck-acc:#6353c1;             /* cab + headlight accent (indigo)        */
}
/* night passage + dark chrome surfaces: remap ink tokens (C&R-sanctioned
   theme-flip — same cast, night values) */
.v6-night,#v6-utility,.reg-band,#v6-footer,.nc-slide,.faq-cta{
  --ink:#ffffff; --ink-body:#c9cfe6; --ink-soft:#c9cfe6; --ink-faint:#d3dcef;
  --lavender-glow:#d9ccff;                    /* AA-lift on steel (4.91:1) */
  --v6-hairline:#4a6c92; --navy-line:#4a6c92; /* steel-tint hairlines      */
}
/* Arabic body line-height ≥1.7 (Constitution Art.1 Law 4 — site.css ships 1.65) */
:root[data-locale="ar"]{--lh-body:1.7}

/* ---- global v6 frame ------------------------------------------------------ */
/* site.css sets html,body{height:100%} + body{overflow-x:hidden} — both kill
   position:sticky for the v6 chrome (sticky only works inside the parent box,
   and body's box was one viewport tall). Restore normal document flow; clip
   keeps the horizontal-overflow protection without creating a scroll container. */
html,body{height:auto}
body{min-height:100svh;overflow-x:clip}
/* the legacy chip prefix ("قريباً") doubles our explicit placeholder copy */
.founder-ph::before{content:none}
:root[data-locale="en"] .founder-ph::before{content:none}
.v6-wrap{max-width:var(--v6-maxw);margin-inline:auto;padding-inline:var(--v6-rail)}
.v6-wrap-walker{max-width:var(--v6-maxw-walker);margin-inline:auto;padding-inline:var(--v6-rail)}
.v6-wrap-carousel{max-width:var(--v6-maxw-carousel);margin-inline:auto;padding-inline:var(--v6-rail)}
.v6-act{margin:0;padding-block:var(--sect-pad);background:var(--paper)}
.v6-act.v6-tint{background:var(--paper-deep)}
.v6-act.v6-night{background:var(--v6-night)}
main#main{display:block}
body.v6-home{background:var(--paper)}
body.v6-home #ambient,body.v6-home #glow,body.v6-home #vignette{display:none}

/* chapter anatomy — identical stack in every act (the geometric signature) */
.act-head{margin-block-end:var(--head-gap)}
.act-head.center{text-align:center;max-width:820px;margin-inline:auto}
/* eyebrow ink = crimson-deep: the lighter crimson misses AA at 13px on paper
   (3.86:1 / 3.56:1 on tint); deep clears 5.6:1 and stays in the crimson cast */
.eyebrow{font-family:var(--fs-body),sans-serif;font-weight:700;font-size:var(--fs-eyebrow);
  color:var(--crimson-deep);margin-block-end:16px;letter-spacing:0}
:root[data-locale="en"] .eyebrow{text-transform:uppercase;letter-spacing:.08em}
.v6-act h2{font-size:var(--fs-h2);color:var(--ink);margin-block-end:12px}
.v6-act .lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.55;max-width:56ch}
.act-head.center .lead{margin-inline:auto}

/* RISE — the single entrance verb (0.6s, once) */
.v6-r{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.v6-r.in{opacity:1;transform:none}
html:not(.js) .v6-r{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v6-r{opacity:1;transform:none;transition:none}}

/* ---- a11y: skip link + one visible focus ring sitewide -------------------- */
/* --focus-ring: crimson-deep on DAY (6.4:1 on white); night surfaces remap it
   to lavender-glow (6.9:1 on the night ground) via the token-flip block. */
:root{--focus-ring:var(--crimson-deep)}
.v6-night,#v6-utility,.reg-band,#v6-footer,.nc-slide,.faq-cta{--focus-ring:var(--lavender-glow)}
.skip-link{position:absolute;inset-inline-start:16px;inset-block-start:-64px;z-index:200;
  background:var(--navy-deep);color:var(--card);font-weight:700;font-size:var(--fs-btn);
  padding:10px 20px;border-radius:6px;text-decoration:none;transition:inset-block-start .2s var(--ease)}
.skip-link:focus-visible{inset-block-start:12px}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- buttons — radius 6, 0.3s color-only hovers (spec §4.3) --------------- */
.v6-btn,.v6-btn-o,.btn-nav-primary,.btn-nav-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fs-display),serif;font-weight:600;font-size:var(--fs-btn);
  border-radius:6px;text-decoration:none;cursor:pointer;line-height:1.2;
  transition:background-color .3s,border-color .3s,color .3s}
.v6-btn{background:var(--crimson);color:var(--card);border:1px solid var(--crimson);padding:12px 28px}
.v6-btn:hover{background:var(--crimson-deep);border-color:var(--crimson-deep)}
.v6-btn-o{background:var(--card);color:var(--crimson);border:1px solid var(--crimson);padding:12px 28px}
.v6-btn-o:hover{background:var(--paper-veil);color:var(--crimson-deep);border-color:var(--crimson-deep)}
.btn-nav-primary{background:var(--crimson);color:var(--card);border:1px solid var(--crimson);padding:10px 20px}
.btn-nav-primary:hover{background:var(--crimson-deep);border-color:var(--crimson-deep)}
.btn-nav-outline{background:var(--card);color:var(--navy);border:1px solid var(--navy);padding:10px 20px}
.btn-nav-outline:hover{color:var(--crimson);border-color:var(--crimson)}
.cta-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-block-start:var(--head-gap)}
.cta-row.start{justify-content:flex-start;margin-block-start:0}
/* link-arrow ink = crimson-deep for AA (crimson = 4.4:1 at 16px on white) */
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-btn);
  color:var(--crimson-deep);text-decoration:none;transition:color .3s}
.link-arrow:hover{color:var(--crimson)}
.link-arrow .arw{transition:transform .3s var(--ease)}
.link-arrow:hover .arw{transform:translateX(4px)}
:root[dir="rtl"] .link-arrow .arw{transform:scaleX(-1)}
:root[dir="rtl"] .link-arrow:hover .arw{transform:scaleX(-1) translateX(4px)}
.link-arrow.onphoto{color:var(--card)}
.link-arrow.onphoto:hover{color:var(--lavender-glow)}

/* round carousel arrows — 36px, 50% (spec §4.5) */
.cr-arrow{width:36px;height:36px;border-radius:50%;background:var(--card);color:var(--ink);
  border:1px solid var(--v6-hairline);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.cr-arrow:hover{color:var(--crimson);border-color:var(--crimson)}
:root[dir="rtl"] .cr-arrow svg{transform:scaleX(-1)}

/* ============================================================================
   NAV BAR 1 — utility/announcement (45px, deep navy, scrolls away)
   ============================================================================ */
#v6-utility{background:var(--v6-footer-ink);height:var(--v6-ut-h);display:flex;align-items:center;position:relative;z-index:60}
#v6-utility .ub-wrap{max-width:var(--v6-maxw);margin-inline:auto;padding-inline:var(--v6-rail);
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ub-announce{color:var(--ink);font-size:var(--fs-caption);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.ub-announce:hover{color:var(--lavender-glow)}
.ub-links{display:flex;align-items:center;gap:18px;flex-shrink:0}
.ub-links>a{color:var(--ink-body);font-size:var(--fs-caption);text-decoration:none;display:inline-flex;
  align-items:center;gap:5px;transition:color .3s;white-space:nowrap}
.ub-links>a:hover{color:var(--ink)}
.ub-login{border:1px solid var(--ink-faint);border-radius:999px;padding:4px 14px;color:var(--ink)!important}
.ub-login:hover{border-color:var(--ink)}
.ub-locale{gap:6px!important}
.ext{opacity:.7;flex-shrink:0}

/* ============================================================================
   NAV BAR 2 — main nav (80px, white, sticky, megamenus)
   ============================================================================ */
#v6-header{position:sticky;inset-block-start:0;z-index:50;background:var(--card);
  box-shadow:0 1px 0 var(--v6-hairline);height:var(--v6-hd-h);display:flex;align-items:center}
#v6-header .hd-wrap{max-width:var(--v6-maxw);margin-inline:auto;padding-inline:var(--v6-rail);
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
#v6-header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
#v6-header .brand .bmark{height:32px;width:auto}
#v6-header .brand .wm{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-h3);color:var(--ink);white-space:nowrap}
#v6-header .brand .wm b{color:var(--crimson)}
.v6-nav{display:flex;align-items:center;gap:4px}
.v6-nav-item>a,.v6-nav-item>button{font-family:var(--fs-body),sans-serif;font-weight:600;font-size:var(--fs-btn);
  color:var(--ink-soft);background:none;border:0;cursor:pointer;text-decoration:none;
  padding:0 12px;height:var(--v6-hd-h);display:inline-flex;align-items:center;gap:6px;
  position:relative;transition:color .3s}
.v6-nav-item>a:hover,.v6-nav-item>button:hover,.v6-nav-item.open>button{color:var(--ink)}
/* active/hover affordance: 3px accent underline at the bar's bottom edge */
.v6-nav-item>a::after,.v6-nav-item>button::after{content:"";position:absolute;inset-inline:12px;
  inset-block-end:0;height:3px;background:var(--crimson);opacity:0;transition:opacity .3s}
.v6-nav-item:hover>a::after,.v6-nav-item.open>button::after{opacity:1}
.v6-nav-item .caret{opacity:.6;transition:transform .3s}
.v6-nav-item.open .caret{transform:rotate(180deg)}
.hd-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* megamenu sheet: full-width white panel docked under the bar */
.v6-nav-item.has-mega{position:static}
.v6-mega{position:absolute;inset-inline:0;inset-block-start:100%;background:var(--card);
  border-block-start:1px solid var(--v6-hairline);box-shadow:var(--v6-shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
/* on OPEN, visibility snaps instantly (keyboard focus can enter the panel the
   same tick); the .2s visibility transition only delays hiding on close */
.v6-nav-item.open .v6-mega,.v6-nav-item.has-mega:focus-within .v6-mega{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.mm-grid{max-width:var(--v6-maxw);margin-inline:auto;padding:var(--v6-rail);display:grid;gap:40px}
.mm-a{grid-template-columns:2fr 1fr 1fr}
.mm-b{grid-template-columns:1.1fr 1fr 1fr;align-items:start}
.mm-richwrap>h5,.mm-list>h5{font-family:var(--fs-body),sans-serif;font-weight:400;font-size:var(--fs-caption);
  color:var(--ink-faint);margin-block-end:14px}
.mm-richcols{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.mm-item{display:block;padding:10px 12px;border-radius:6px;text-decoration:none;transition:background-color .3s}
.mm-item:hover{background:var(--paper-veil)}
.mm-t{display:flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-btn);color:var(--ink)}
.mm-d{display:block;font-size:var(--fs-caption);color:var(--ink-faint);margin-block-start:3px;line-height:1.45}
.mm-list a{display:block;font-size:var(--fs-caption);color:var(--ink-soft);text-decoration:none;
  padding-block:6px;transition:color .3s}
.mm-list a:hover{color:var(--crimson)}
.mm-pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper-veil);color:var(--crimson-deep);
  font-weight:700;font-size:var(--fs-caption);border-radius:6px;padding:9px 16px;text-decoration:none;
  margin-block-start:16px;transition:background-color .3s,color .3s}
.mm-pill:hover{background:var(--paper-deep)}
.mm-pill-b{grid-column:1/-1;justify-self:start}
.mm-promo{display:block;background:var(--paper-veil);border-radius:8px;overflow:hidden;
  text-decoration:none;transition:background-color .3s}
.mm-promo:hover{background:var(--paper-deep)}
.mm-promo-img{display:block;aspect-ratio:16/9;overflow:hidden}
.mm-promo-img img{width:100%;height:100%;object-fit:cover}
.mm-promo-t{display:block;font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-h3);
  color:var(--ink);padding:14px 18px 0}
.mm-promo-d{display:block;font-size:var(--fs-caption);color:var(--ink-soft);line-height:1.5;padding:6px 18px 0}
.mm-promo-cta{display:inline-flex;align-items:center;gap:6px;color:var(--crimson-deep);font-weight:700;
  font-size:var(--fs-caption);padding:10px 18px 16px}

/* burger + mobile sheet */
.v6-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.v6-burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.v6-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.v6-burger.open span:nth-child(2){opacity:0}
.v6-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.v6-mobile{display:none;position:fixed;inset-block-start:0;inset-inline:0;inset-block-end:0;
  z-index:45;background:var(--card);padding:calc(var(--v6-hd-h) + 24px) 24px 40px;overflow-y:auto}
.v6-mobile.open{display:block}
.v6-mobile .ms-top,.v6-mobile .ms-group a{display:block;color:var(--ink);text-decoration:none;
  padding-block:10px;font-weight:600;font-size:var(--fs-btn);border-block-end:1px solid var(--v6-hairline)}
.v6-mobile .ms-h{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-h3);
  color:var(--ink);margin-block:18px 6px}
.v6-mobile .ms-actions{display:grid;gap:12px;margin-block-start:24px}
body.v6-nav-open{overflow:hidden}

/* ============================================================================
   ACT 1 · HERO — DAY split + regulator band (Saudi slot 1)
   ============================================================================ */
#home-hero{position:relative;padding-block:0;overflow:hidden}
/* HERO stage — founder 2026-07-28 (approach 1): landscape still + coded motion.
   Aspect matches the artwork (2560x1200 = 2.133) so cover-crop stays minimal.
   AR: scene left / copy RIGHT (natural RTL). EN: mirrored frame (map pasted
   back unmirrored) / copy LEFT. The paper melt is BAKED into the artwork, so
   the plate is only a light safety veil for text contrast. */
.hero-stage{position:relative;width:100%;height:min(42.9vw,88svh);min-height:520px;
  display:flex;align-items:center;overflow:hidden;background:var(--paper)}
.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;display:block;will-change:transform;transform:scale(1.028)}
.hero-fx{position:absolute;inset:0;pointer-events:none;display:block}
.hero-plate{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(-90deg,rgba(238,240,247,.62) 0%,rgba(238,240,247,.22) 24%,rgba(238,240,247,0) 46%)}
:root[dir="ltr"] .hero-plate{background:linear-gradient(90deg,rgba(238,240,247,.62) 0%,rgba(238,240,247,.22) 24%,rgba(238,240,247,0) 46%)}
.hero-overlay{position:relative;z-index:1;width:100%;padding-block:clamp(48px,6vh,88px)}
/* AR: copy sits on the physical RIGHT (RTL reading start) · EN: on the LEFT */
.hero-overlay .hero-copy{max-width:600px;margin-left:auto;margin-right:0}
:root[dir="ltr"] .hero-overlay .hero-copy{margin-right:auto;margin-left:0}
.hero-copy h1{font-size:var(--fs-h1);color:var(--ink);margin-block-end:24px;text-wrap:balance}
.hl-line{display:block}
:root[data-locale="en"] .hl-line{display:inline}
.hero-checks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.hero-checks li{display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:var(--fs-lead);
  color:var(--ink);line-height:1.4}
.ckc{color:var(--navy);flex-shrink:0;margin-block-start:2px}
@media (prefers-reduced-motion:reduce){.hero-still{transform:none}}
/* regulator credibility band (deep navy strip). position:relative lifts the
   band above the hero's absolutely-positioned .hero-motif art (P0 paint-order:
   the motif spans the full act and washed out the band's inline-end 62%). */
/* CHANGE 2 — de-darked from flat navy #10193a to steel #335882 (the one ordered
   recolor: lifts the whole upper fold + kills the light-hero/dark-band/light-subnav
   patchwork). AA-lift tokens for the lighter ground: --ink-faint #d3dcef (5.34:1),
   --lavender-glow #d9ccff (4.91:1); title stays #fff (7.35:1). Redefining
   --lavender-glow once recolors hex icon + status pill + focus-ring in one lever. */
.reg-band{position:relative;background:var(--v6-steel);padding-block:28px;
  border-block-start:1px solid rgba(255,255,255,.08);
  --ink-faint:#d3dcef;--lavender-glow:#d9ccff}
.reg-label{text-align:center;font-size:var(--fs-caption);color:var(--ink-faint);margin-block-end:18px}
.reg-chips{display:flex;justify-content:center;gap:clamp(16px,2.5vw,36px);flex-wrap:wrap;
  max-width:1100px;margin-inline:auto} /* break 3+2, never a 4+1 orphan */
.reg-chip{display:flex;align-items:center;gap:10px;max-width:250px}
.rc-hex{color:var(--lavender-glow);flex-shrink:0}
.rc-copy{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.rc-copy b{color:var(--ink);font-size:var(--fs-caption);line-height:1.3}
.rc-copy i{color:var(--ink-faint);font-style:normal;font-size:var(--fs-eyebrow);line-height:1.4}
/* status = a small outlined pill (elegance upgrade; words are frozen/honest —
   colour only). Uniform across states so no chip over-claims another. */
.rc-status{font-style:normal;font-size:var(--fs-eyebrow);font-weight:700;color:var(--lavender-glow);
  border:1px solid rgba(217,204,255,.55);border-radius:999px;padding:2px 11px;margin-block-start:3px}

/* ============================================================================
   ACT 2 · STICKY ANCHOR SUB-NAV (64px, 7 stops, docks under main nav)
   ============================================================================ */
#subnav{position:sticky;inset-block-start:var(--v6-hd-h);z-index:40;background:var(--card);
  height:var(--v6-sn-h);display:flex;align-items:center;box-shadow:0 1px 0 var(--v6-hairline);margin:0}
.sn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  overflow-x:auto;scrollbar-width:none}
.sn-row::-webkit-scrollbar{display:none}
.sn-row a{font-weight:700;font-size:var(--fs-btn);color:var(--crimson-deep);text-decoration:none;
  white-space:nowrap;padding:8px 4px;position:relative;transition:color .3s}
.sn-row a:hover{color:var(--crimson)}
.sn-row a::after{content:"";position:absolute;inset-inline:4px;inset-block-end:0;height:2px;
  background:var(--crimson);opacity:0;transition:opacity .3s}
.sn-row a.on::after{opacity:1}

/* ============================================================================
   ACT 3 · PINNED FEATURE WALKER — THE night passage (7 steps + sticky card)
   ============================================================================ */
#walker{padding-block:clamp(64px,7vh,96px) 0}
#walker .act-head h2{color:var(--ink)}
/* night ground: crimson 13px fails AA (≈3.3:1); lavender INK clears 7:1 */
#walker .act-head .eyebrow{color:var(--lavender-glow)}
.wk-grid{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr) 28px;
  gap:48px;align-items:start;padding-block-end:var(--sect-pad)}
.wk-steps{display:flex;flex-direction:column}
.wk-step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding-block:40px;will-change:transform,opacity}
.wk-step h3{font-size:var(--fs-h3);color:var(--ink)}
.wk-step p{font-size:var(--fs-body-sz);color:var(--ink-body);line-height:var(--lh-body);max-width:44ch}
.wk-ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-start:8px}
.wk-step .link-arrow{color:var(--lavender-glow)}
.wk-step .link-arrow:hover{color:var(--ink)}
.wk-step-media{display:none;margin:16px 0 0}
.wk-media{position:sticky;inset-block-start:calc(var(--v6-hd-h) + var(--v6-sn-h) + 32px);min-width:0}
.wk-card{background:var(--card);border-radius:12px;
  border:1px solid var(--v6-hairline);box-shadow:none}
.wk-card .ui-bar{background:var(--paper-veil)}
.wk-shots{position:relative;aspect-ratio:16/10;background:var(--v6-night-veil)}
.wk-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  opacity:0;transition:opacity .6s var(--ease)}
.wk-shot.on{opacity:1}
.wk-cap{padding:12px 16px;font-size:var(--fs-caption);color:var(--ink-faint);
  border-block-start:1px solid var(--v6-hairline);
  --ink-faint:#4a5175} /* caption sits on the WHITE card: day ink */
.wk-shots .wk-chip{position:absolute;inset-block-end:12px;display:flex;flex-direction:column;gap:2px;padding:8px 12px;max-width:46%;background:var(--card);border:1px solid var(--v6-hairline);border-radius:8px;box-shadow:var(--v6-shadow);z-index:2;--ink-faint:#4a5175}
.wk-chip-s{inset-inline-start:12px}
.wk-chip-e{inset-inline-end:12px}
.wk-chip b{font-size:var(--fs-idx);font-weight:700;line-height:1.1;color:var(--crimson-deep)}
.wk-chip i{font-size:var(--fs-micro);font-style:normal;line-height:1.2;color:var(--ink-faint)}
.wk-rail{position:sticky;inset-block-start:calc(var(--v6-hd-h) + var(--v6-sn-h) + 32px);
  display:flex;flex-direction:column;align-items:center;gap:12px;padding-block-start:120px}
.wk-rail button{width:10px;height:10px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink-faint);opacity:.55;transition:background-color .3s,opacity .3s}
.wk-rail button.on{background:var(--crimson);opacity:1}

/* ============================================================================
   ACT 4 · OUTCOMES — results bento (two-row wall, hairline cards)
   ============================================================================ */
.bento-row1{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.bento-row2{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);
  margin-block-start:var(--grid-gap);padding-inline:clamp(0px,4vw,72px)}
.bento-card{background:var(--card);border:1px solid var(--v6-hairline);border-radius:8px;
  padding:28px;display:flex;flex-direction:column;gap:8px;box-shadow:none}
.bn-n{font-family:var(--fs-display),serif;font-weight:600;font-size:var(--fs-stat);
  line-height:1.1;color:var(--ink);padding-block:2px}
.bn-n.sm{font-size:var(--fs-h3)}
.bn-cap{font-size:var(--fs-eyebrow);font-weight:700;color:var(--ink-faint)}
:root[data-locale="en"] .bn-cap{text-transform:uppercase;letter-spacing:.08em}
.bento-card p{font-size:var(--fs-caption);color:var(--ink-soft);line-height:1.55;flex-grow:1}
.bento-card .link-arrow{font-size:var(--fs-caption)}

/* ============================================================================
   ACT 5 · COMPLIANCE (3-column funnel dialect — Saudi slot 2)
   ============================================================================ */
.cp-cols,.pt-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,48px)}
.cp-col h3,.pt-col h3{font-size:var(--fs-h3);color:var(--ink);margin-block-end:10px}
.cp-col>p,.pt-col>p{font-size:var(--fs-body-sz);color:var(--ink-body);line-height:var(--lh-body);
  margin-block-end:16px}
.cp-checks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.cp-checks li{display:flex;align-items:flex-start;gap:9px;font-size:var(--fs-body-sz);
  color:var(--ink);line-height:1.5}
.cp-checks .ckc{color:var(--navy);flex-shrink:0;margin-block-start:2px;width:18px;height:18px}
.cp-pill{font-size:var(--fs-eyebrow);font-weight:700;color:var(--ink-faint);
  background:var(--paper-veil);border:1px solid var(--v6-hairline);border-radius:6px;
  padding:8px 12px;margin-block-end:16px;line-height:1.5}

/* G2 · security-architecture trust triad — hairline sub-band under the 3-col
   funnel (reuses home.security.benefits + hero.security_line; NOT a 4th cp-col) */
.cp-triad{margin-block-start:clamp(28px,3vw,48px);padding-block-start:clamp(24px,2.5vw,36px);
  border-block-start:1px solid var(--v6-hairline)}
.cp-triad-lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.55;
  max-width:56ch;margin-block-end:16px}
.cp-triad-checks{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);margin:0}
@media (max-width:960px){.cp-triad-checks{grid-template-columns:1fr}}

/* ============================================================================
   ACT 6 · AUTHORITY — split copy + comparison artifact
   ============================================================================ */
.au-grid{display:grid;grid-template-columns:45fr 55fr;gap:clamp(32px,4vw,64px);align-items:center}
/* grid items must shrink below the table's min-content (EN nowrap cells pushed
   docW to 448 at a 390 viewport — .cmp-scroll can only scroll if this shrinks) */
.au-grid>div{min-width:0}
.au-copy .cta-row{margin-block-start:24px}
.cmp-card{background:var(--card);border:1px solid var(--v6-hairline);border-radius:8px;padding:28px}
.cmp-card h3{font-size:var(--fs-h3);color:var(--ink);margin-block-end:14px}
.cmp-scroll{overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:var(--fs-caption)}
.cmp-table th{text-align:start;font-weight:700;color:var(--ink);padding:10px 12px;
  border-block-end:1px solid var(--v6-hairline)}
.cmp-table td{padding:10px 12px;border-block-end:1px solid var(--v6-hairline);
  color:var(--ink-soft);line-height:1.5;vertical-align:top}
.cmp-table tr:last-child td{border-block-end:0}
.cmp-table .cf{font-weight:700;color:var(--ink);white-space:nowrap}
.cmp-table .ca{color:var(--ink)}

/* ============================================================================
   ACT 7 · NEWS DUO — 2 dark promo mini-carousels (dark via CARDS)
   ============================================================================ */
.news-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.news-card{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:59/34;
  background:var(--v6-night)}
.nc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.nc-slide.on{opacity:1;visibility:visible}
.nc-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nc-scrim{position:absolute;inset:0;background:linear-gradient(0deg,var(--v6-scrim) 0%,rgba(16,25,58,.15) 55%,rgba(16,25,58,0) 100%)}
.nc-copy{position:absolute;inset-inline:28px;inset-block-end:56px}
.nc-copy h3{font-family:var(--fs-display),serif;color:var(--ink);margin-block-end:6px;
  font-size:var(--fs-h3)}
.nc-copy p{color:var(--ink-body);font-size:var(--fs-body-sz);line-height:1.5;max-width:46ch;margin-block-end:8px}
.nc-nav{position:absolute;inset-inline:16px;inset-block-end:12px;display:flex;align-items:center;
  justify-content:space-between;z-index:3}
.nc-dots{display:flex;gap:8px}
.nc-dots button{width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;background:var(--ink-faint);
  transition:background-color .3s}
.nc-dots button.on{background:var(--ink)}

/* ============================================================================
   ACT 8 · SOLUTIONS TEASER — 3×2 pure-typographic grid
   ============================================================================ */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px) clamp(28px,3vw,48px)}
.sol-item .sol-t{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-h3);
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--crimson);
  text-decoration-thickness:2px;text-underline-offset:5px;transition:color .3s}
.sol-item .sol-t:hover{color:var(--crimson)}
.sol-item p{font-size:var(--fs-body-sz);color:var(--ink-body);line-height:var(--lh-body);margin-block-start:8px}
.sol-item .sol-ev{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.sol-item .sol-ev li{position:relative;padding-inline-start:14px;font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--ink-faint)}
.sol-item .sol-ev li::before{content:"\2013";position:absolute;inset-inline-start:0;color:var(--crimson-deep)}

/* ============================================================================
   ACT 9 · INDUSTRIES — 8 photo cards, bottom-up navy overlay
   ============================================================================ */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.ind-card{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:307/400;display:block;
  text-decoration:none;background:var(--v6-night)}
.ind-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .3s}
.ind-scrim{position:absolute;inset:0;background:linear-gradient(0deg,var(--v6-scrim) 0%,rgba(16,25,58,.35) 45%,rgba(16,25,58,0) 75%)}
.ind-copy{position:absolute;inset-inline:20px;inset-block-end:22px;display:flex;flex-direction:column;gap:8px}
.ind-copy b{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-h3);
  color:var(--card);line-height:1.3}
.ind-copy .link-arrow{font-size:var(--fs-caption)}

/* ============================================================================
   ACT 11 · INTEGRATIONS — tinted tray carousel
   ============================================================================ */
.ig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-block-end:var(--head-gap);flex-wrap:wrap}
.ig-head .lead{margin-block-start:6px}
.ig-tray{position:relative;background:var(--paper-deep);border-radius:12px;padding:var(--grid-gap)}
.v6-act.v6-tint .ig-tray{background:var(--paper)}
.ig-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-behavior:smooth}
.ig-scroll::-webkit-scrollbar{display:none}
.ig-card{flex:0 0 274px;scroll-snap-align:start;background:var(--card);border:1px solid var(--v6-hairline);
  border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:6px;text-decoration:none;
  box-shadow:0 2px 4px rgba(16,25,58,.05);transition:border-color .3s}
.ig-t{font-weight:700;font-size:var(--fs-btn);color:var(--ink)}
.ig-v{font-weight:700;font-size:var(--fs-caption);color:var(--ink-faint)}
.ig-card p{font-size:var(--fs-caption);color:var(--ink-soft);line-height:1.5;flex-grow:1}
.ig-status{font-size:var(--fs-eyebrow);font-weight:700;color:var(--lavender);align-self:flex-start;
  border:1px solid var(--v6-hairline);border-radius:999px;padding:3px 10px}
.tray-arrow{position:absolute;inset-block-start:50%;transform:translateY(-50%);z-index:2}
.tray-arrow.prev{inset-inline-start:-14px}
.tray-arrow.next{inset-inline-end:-14px}


/* ---- CARD LIFT (founder 2026-07-29: "make the cards effect as this on hover",
   pointing at the replica's bento tiles). Deliberate, founder-ordered deviation
   from C&R C6 #4 (colour-only hovers): every card family now rises 4px, its
   hairline warms to the lavender accent, THE day shadow deepens under it and the
   surface lightens to --card. Durations stay on the sanctioned {0.3,0.6}s scale.
   Photo cards additionally push their image in (the replica's 1.05 scale).
   Pointer-only (@media hover) so touch never sticks in a hover state. ------- */
@media (hover:hover){
  .bento-card,.cmp-card,.ig-card,.cp-col,.pt-col{
    transition:transform .3s var(--ease),box-shadow .3s var(--ease),
               border-color .3s,background-color .3s}
  .bento-card:hover,.cmp-card:hover,.ig-card:hover{
    transform:translateY(-4px);border-color:var(--lavender-dim);
    box-shadow:var(--v6-shadow);background:var(--card)}
  .ind-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .ind-card:hover{transform:translateY(-4px);box-shadow:var(--v6-shadow)}
  .ind-card img{transition:transform .6s var(--ease),opacity .3s}
  .ind-card:hover img{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .bento-card:hover,.cmp-card:hover,.ig-card:hover,.ind-card:hover{transform:none}
  .ind-card:hover img{transform:none}
}

/* ============================================================================
   ACT 12 · SUPPORT — driver-portrait photo card + our promise
   ============================================================================ */
.su-grid{display:grid;grid-template-columns:55fr 45fr;gap:clamp(32px,4vw,64px);align-items:center}
/* founder 2026-07-29 ("شكل الشخص الواقف مع تطبيق السائق على جواره رائع"):
   the driver portrait carries the phone at its block-end inline-end corner,
   overlapping outward — the composition he approved. The visual reserves the
   overhang so the device can never bleed into a neighbouring act again. */
.su-visual{position:relative;padding-inline-end:clamp(28px,7%,84px);padding-block-end:clamp(24px,6%,60px)}
.su-photo{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:54/40;display:block;
position:relative;border-radius:8px;overflow:hidden;aspect-ratio:54/40;display:block;
  text-decoration:none;background:var(--v6-night)}
.su-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.su-copy{position:absolute;inset-inline-start:28px;inset-inline-end:34%;inset-block-end:24px;display:flex;flex-direction:column;gap:8px}
.su-copy b{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-h2);
  color:var(--card);line-height:1.25}
.su-copy>span{color:var(--paper);font-size:var(--fs-body-sz);line-height:1.5;max-width:48ch}
.su-phone{position:absolute;inset-block-end:0;inset-inline-end:0;width:27%;min-width:124px;max-width:194px;
  margin:0;background:var(--navy-deep);border-radius:26px;padding:8px;box-shadow:var(--v6-shadow);z-index:2}
.su-phone img{width:100%;height:auto;border-radius:19px;display:block}
.su-quote{font-size:var(--fs-lead);color:var(--ink);line-height:1.6;margin:0 0 14px;border:0;padding:0}
.su-attr{font-size:var(--fs-body-sz);color:var(--ink-soft);margin-block-end:20px}
.su-attr b{color:var(--ink)}

/* product-UI card chrome (restored 2026-07-29 — the hero swap had removed it;
   its absence let the close-act screenshot render at its intrinsic 876px). */
.ui-card{margin:0;background:var(--card);border-radius:12px;box-shadow:var(--v6-shadow);overflow:hidden}
.ui-bar{display:flex;gap:6px;padding:10px 14px;background:var(--paper-veil);
  border-block-end:1px solid var(--v6-hairline)}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:var(--navy-line)}
.ui-card img{width:100%;height:auto;display:block}

/* ============================================================================
   ACT 13 · DEMO CLOSE — copy + layered collage
   ============================================================================ */
.cl-grid{display:grid;grid-template-columns:45fr 55fr;gap:clamp(32px,4vw,64px);align-items:center}
.cl-collage{position:relative}
.cl-desktop{width:100%}
/* device-mock (C6 #5 exemption: aspect-true bezel radii) */
.cl-phone{position:absolute;inset-inline-end:0;inset-block-end:-24px;width:27%;min-width:130px;
  margin:0;background:var(--navy-deep);border-radius:26px;padding:8px;box-shadow:var(--v6-shadow)}
.cl-phone img{width:100%;height:auto;border-radius:19px;display:block}

/* ============================================================================
   ACT 14 · FAQ — 12 hairline accordions, plus glyph
   ============================================================================ */
#faq .faq-h2{font-size:var(--fs-h2);color:var(--ink);margin-block-end:var(--head-gap)}
.faq-list details{border-block-end:1px solid var(--v6-hairline)}
.faq-list details:first-child{border-block-start:1px solid var(--v6-hairline)}
/* compact rows (founder 2026-07-29: the 28px block padding read bulky — 56px per
   row x 12 rows). Now 16px (32px per row, on the 8px hand): the act loses ~290px
   of dead height while every row keeps a comfortable 48px+ touch target. The
   circled +/- affordance is the compact dialect the founder built earlier. */
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;list-style:none;padding-block:16px;
  font-weight:700;font-size:var(--fs-body-sz);color:var(--ink);transition:color .3s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--crimson)}
.faq-list .pm{color:var(--ink-faint);flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--v6-hairline);display:grid;place-items:center;
  transition:transform .3s var(--ease),color .3s,border-color .3s}
.faq-list summary:hover .pm{color:var(--crimson);border-color:var(--crimson)}
.faq-list details[open] .pm{transform:rotate(45deg)}
.faq-list .ans{padding-block:0 20px;font-size:var(--fs-caption);color:var(--ink-body);
  line-height:var(--lh-body);max-width:72ch}

/* ============================================================================
   ACT 15 · FOOTER — deep grouped directory on the ink ladder
   ============================================================================ */
#v6-footer{background:var(--v6-footer-ink);padding-block:var(--sect-pad) 32px;margin:0}
.ft-wrap{max-width:var(--v6-maxw);margin-inline:auto;padding-inline:var(--v6-rail)}
.ft-brandrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-end:40px}
.ft-brandrow .wm{display:flex;align-items:center;gap:10px;font-family:var(--fs-display),serif;
  font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.ft-brandrow .wm b{color:var(--crimson)}
.ft-brandrow .bmark{height:30px;width:auto}
.ft-blurb{color:var(--ink-faint);font-size:var(--fs-caption);max-width:52ch}
.ft-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;margin-block-end:40px}
.ft-grid .fcol h4{color:var(--ink);font-size:var(--fs-btn);font-weight:700;margin-block-end:14px;
  font-family:var(--fs-body),sans-serif}
.ft-grid .fcol a{display:flex;align-items:center;gap:5px;color:var(--ink-faint);text-decoration:none;
  font-size:var(--fs-caption);padding-block:5px;transition:color .3s}
.ft-grid .fcol a:hover{color:var(--ink)}
.ft-langrow{display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding-block-end:20px;border-block-end:1px solid var(--v6-hairline);margin-block-end:20px}
.ft-lang-label{display:inline-flex;align-items:center;gap:6px;color:var(--ink-faint);font-size:var(--fs-caption)}
.ft-langrow a{color:var(--ink-faint);text-decoration:none;font-size:var(--fs-caption);transition:color .3s}
.ft-langrow a:hover,.ft-langrow a.on{color:var(--ink)}
.ft-meta{display:flex;gap:24px;flex-wrap:wrap;margin-block-end:16px}
.fmeta-item{color:var(--ink-faint);font-size:var(--fs-caption)}
/* the chip is a NIGHT surface wherever it appears (footer, contact/about
   cards) — carry its own night ink so day-context pages don't render
   dark-on-dark (round-3 QA catch: 1.4:1 on the contact side card) */
.founder-ph{--ink-faint:#98a1c6;--v6-hairline:#2c3a68;
  display:inline-block;background:var(--v6-night-veil);border:1px dashed var(--v6-hairline);
  border-radius:4px;padding:1px 10px;color:var(--ink-faint);font-size:var(--fs-eyebrow)}
#v6-footer .disclaimer{color:var(--ink-faint);font-size:var(--fs-eyebrow);line-height:1.6;
  max-width:100ch;margin-block-end:8px}
#v6-footer .cookieless{color:var(--ink-faint);font-size:var(--fs-eyebrow);margin-block-end:24px}
.ft-legalbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block-start:20px;border-block-start:1px solid var(--v6-hairline)}
.ft-legalbar .legal-links{display:flex;gap:8px;flex-wrap:wrap}
.ft-legalbar .legal-links a{color:var(--ink-faint);text-decoration:none;font-size:var(--fs-eyebrow);
  transition:color .3s}
.ft-legalbar .legal-links a:hover{color:var(--ink)}
.ft-legalbar .legal-links a + a::before{content:"|";margin-inline-end:8px;color:var(--ink-faint);opacity:.4}
.ft-legalbar .cr-line{color:var(--ink-faint);font-size:var(--fs-eyebrow)}
#v6-footer .powered-by{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-block-start:28px;color:var(--ink-faint);font-size:var(--fs-eyebrow)}
#v6-footer .powered-by .pb-crest{width:28px;height:28px;display:inline-flex;margin-inline-end:2px}
#v6-footer .powered-by .pb-crest svg{width:100%;height:100%}

/* ============================================================================
   RESPONSIVE — 1280 / 960 / 600 (spec §5)
   ============================================================================ */
/* ≤1470: compress the main-nav bar so the wider EN labels fit without
   horizontal overflow at 1280 (P0: EN docW was 1466 at a 1280 viewport,
   pushing the outlined nav CTA fully off-canvas). AR compresses too (shorter
   labels — no regression, just more air). */
@media (max-width:1470px){
  #v6-header .hd-wrap{gap:12px}
  .v6-nav{gap:0}
  .v6-nav-item>a,.v6-nav-item>button{padding:0 8px;font-size:var(--fs-caption)}
  .v6-nav-item>a::after,.v6-nav-item>button::after{inset-inline:8px}
  .btn-nav-primary,.btn-nav-outline{padding:10px 14px;font-size:var(--fs-caption)}
}
@media (max-width:1280px){
  :root{--v6-rail:32px}
  .mm-grid{padding:32px}
  .wk-grid{grid-template-columns:minmax(300px,380px) minmax(0,1fr) 24px;gap:32px}
  .ig-card{flex:0 0 250px} /* 4 cards + a visible peek of card 5 at 1280 */
}
@media (max-width:960px){
  .v6-nav{display:none}
  .btn-nav-outline{display:none}
  .v6-burger{display:flex}
  .hero-stage{min-height:72svh}
  .hero-plate,:root[dir="ltr"] .hero-plate{background:linear-gradient(90deg,rgba(238,240,247,.95) 0%,rgba(238,240,247,.82) 60%,rgba(238,240,247,.55) 100%)}
  .sn-row{justify-content:flex-start;gap:24px}
  /* walker degrades to stacked step blocks (spec: sticky media is desktop-only) */
  .wk-grid{grid-template-columns:1fr;gap:0}
  .wk-media,.wk-rail{display:none}
  .wk-step{min-height:0;padding-block:32px}
  .wk-step-media{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--v6-hairline)}
  .wk-step-media img{width:100%;height:auto;display:block}
  .bento-row1{grid-template-columns:1fr 1fr}
  .bento-row2{grid-template-columns:1fr 1fr;padding-inline:0}
  .cp-cols,.pt-cols{grid-template-columns:1fr;gap:36px}
  .au-grid,.su-grid,.cl-grid{grid-template-columns:1fr;gap:32px}
  .news-duo{grid-template-columns:1fr}
  .sol-grid{grid-template-columns:1fr 1fr}
  .ind-grid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  :root{--v6-rail:20px}
  #v6-header .hd-wrap{gap:10px}
  .hd-actions{gap:8px}
  #v6-header .brand .wm{font-size:var(--fs-btn)}
  .btn-nav-primary{padding:8px 14px;font-size:var(--fs-caption)}
  .v6-btn,.v6-btn-o{width:100%;text-align:center}
  .cta-row,.cta-row.start{flex-direction:column;align-items:stretch}
  .wk-ctas{flex-direction:column;align-items:flex-start}
  .wk-ctas .v6-btn{width:100%}
  .bento-row1,.bento-row2,.sol-grid,.ind-grid{grid-template-columns:1fr}
  .reg-chips{flex-direction:column;align-items:flex-start;gap:14px}
  .reg-chip{max-width:none}
  .ub-announce{display:none}
  #v6-utility .ub-wrap{justify-content:flex-end}
  .ub-links>a:not(.ub-login):not(.ub-locale){display:none}
  .news-card{aspect-ratio:4/5}
  .nc-copy{inset-block-end:60px}
  .ft-grid{grid-template-columns:1fr 1fr}
  .cl-collage{min-height:0;display:grid;gap:16px}
  .cl-desktop{position:static;width:100%}
  .cl-phone{position:static;width:44%;margin-inline:auto}
  .nc-copy{inset-inline:18px;inset-block-end:52px}
}
@media (min-width:1920px){
  /* protect compositions at ultrawide: containers cap, hero scene stays fluid */
  }

/* reduced motion: kill transitions, keep everything visible.
   The walker's sticky-pin is MOTION — under reduced-motion the act degrades to
   the spec's own mobile transform: a static stacked step list, media inline
   per step, no sticky card, no scrub, no step rail. */
@media (prefers-reduced-motion:reduce){
  .wk-shot,.nc-slide,.v6-mega,.skip-link{transition:none}
  .wk-grid{grid-template-columns:1fr;gap:0}
  .wk-media,.wk-rail{display:none}
  .wk-step{min-height:0;padding-block:32px}
  .wk-step-media{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--v6-hairline)}
  .wk-step-media img{width:100%;height:auto;display:block}
}

/* ---- ACT 14 closing action (founder 2026-07-29: "أفضل من v6" — the FAQ act was
   the ONLY act with no call to action, which the deep review flagged as breaking
   the skeleton's own rule). The questions keep their hairline column; a contained
   steel card carries the ask, so the page never ends on an unanswered question.
   Steel is the official secondary background — a CARD, not a second dark act.
   The card is enrolled in the steel token-remap above, so NO hex lives here. */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,392px);
  gap:clamp(32px,4vw,64px);align-items:start}
.faq-col{min-width:0}
.faq-cta{position:sticky;inset-block-start:calc(var(--v6-hd-h) + 32px);
  background:var(--v6-steel);border-radius:12px;padding:clamp(26px,3vw,38px);
  box-shadow:var(--v6-shadow)}
.faq-cta .eyebrow{color:var(--lavender-glow)}
.faq-cta h3{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-h3);
  color:var(--ink);line-height:1.3;margin-block-end:12px}
.faq-cta .fc-lead{font-size:var(--fs-body-sz);color:var(--ink-faint);
  line-height:var(--lh-body);margin-block-end:22px}
.faq-cta .cta-row{flex-wrap:wrap;gap:12px}
.faq-cta .v6-btn-o.fc-alt{background:transparent;color:var(--ink);border-color:var(--v6-hairline)}
.faq-cta .v6-btn-o.fc-alt:hover{background:var(--v6-night-veil);color:var(--ink);
  border-color:var(--lavender-glow)}
.fc-reassure{display:flex;align-items:flex-start;gap:8px;margin-block-start:20px;
  font-size:var(--fs-caption);color:var(--ink-faint);line-height:1.5}
.fc-reassure svg{width:16px;height:16px;flex-shrink:0;color:var(--lavender-glow);
  margin-block-start:2px}
@media (max-width:960px){
  .faq-grid{grid-template-columns:1fr;gap:32px}
  .faq-cta{position:static;order:-1}
}