/* Aeroz brand kit: the flow layer (19 Oct 2026).
   Loaded last on every page (tools/warm_chrome.py writes the link), so it
   settles the whole site in one place instead of page by page:

   1. Tone flow. A page reads as one continuous story: the dark Lead stage at
      the top, a fog ramp that dissolves into the light Frost reading body, and
      a second fog ramp that gathers back into the dark closing stage (the last
      call to action) and the footer. No dark band ever meets a light one on a
      hard horizontal edge.
   2. One card system: three radii, soft hairlines, gentle layered shadows,
      frosted glass on light, charcoal glass on dark, no box inside a box.
   3. One fluid type scale and one spacing scale, used by every template.

   It never edits a brand token (warm.css :root). The new names below are
   derived values only. Every selector is written for the generated markup, so
   the next generator run keeps it. */

:root{
  /* tone ramp: Lead -> Wolf smoke -> lavender haze -> Frost */
  --feather:clamp(132px,11vw + 50px,280px);
  --cap:clamp(64px,4vw + 48px,112px);
  --soft:clamp(56px,4vw + 32px,104px);
  --ramp-down:linear-gradient(180deg,#292929 0%,#2a2a2a 7%,#303030 14%,#39393a 21%,#474848 29%,#595a5a 36%,#6f7070 43%,#868888 50%,#9fa1a2 57%,#bebfc3 64%,#d7d7e0 71%,#e0e0e8 79%,#eaecf0 86%,#f3f5f8 93%,#f8fbfc 100%);
  --ramp-up:linear-gradient(0deg,#292929 0%,#2a2a2a 7%,#303030 14%,#39393a 21%,#474848 29%,#595a5a 36%,#6f7070 43%,#868888 50%,#9fa1a2 57%,#bebfc3 64%,#d7d7e0 71%,#e0e0e8 79%,#eaecf0 86%,#f3f5f8 93%,#f8fbfc 100%);
  --fog-rise:url(/assets/img/kit/fog-rise.webp);
  --fog-fall:url(/assets/img/kit/fog-fall.webp);
  --stage-glow:radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.035),rgba(255,255,255,0) 70%);
  --haze-glow:radial-gradient(70% 120% at 12% 100%,rgba(214,210,240,.38),rgba(214,210,240,0) 70%);

  /* surfaces */
  --r-sm:12px;--r-card:16px;--r-panel:20px;--r-btn:10px;
  --hairline:rgba(41,41,41,.07);
  --lift:0 1px 1px rgba(20,20,30,.03),0 8px 22px -14px rgba(20,20,30,.16);
  --lift-hover:0 1px 1px rgba(20,20,30,.03),0 16px 34px -18px rgba(20,20,30,.24);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.85);
  --haze-panel:radial-gradient(110% 120% at 0% 100%,rgba(214,210,240,.5),rgba(214,210,240,0) 62%),linear-gradient(180deg,#f3f5fa 0%,#ebeaf5 100%);
  --wolf-glass:linear-gradient(180deg,rgba(74,74,74,.72),rgba(60,60,59,.6));

  /* type: one fluid scale (390 -> 1440 -> 1920) */
  --fs-display:clamp(40px,2.4vw + 28px,64px);
  --fs-h1:clamp(36px,2vw + 26px,56px);
  --fs-h2:clamp(28px,1.15vw + 22px,42px);
  --fs-h3:clamp(21px,.45vw + 17.5px,26px);
  --fs-h4:clamp(19px,.2vw + 17.2px,21px);
  --fs-lead:clamp(18px,.28vw + 16px,21px);
  /* space: one section rhythm */
  --sec-y:clamp(52px,3.2vw + 36px,88px);
  --sec-y-sm:clamp(40px,2vw + 30px,64px);
  --stage-top:clamp(40px,3.4vw + 26px,88px);
  --stage-end:clamp(32px,2.4vw + 22px,56px);
}

/* The page never scrolls sideways; the full-bleed stage layers below are
   clipped to the page, not the viewport scrollbar. */
.wh>main{overflow-x:clip}

/* =====================================================================
   1. TONE FLOW
   ===================================================================== */

/* ---- Opening stage: every hero band. Lead + fog, then a feathered ramp
   that dissolves into Frost. The layers sit on a full-bleed ::before, so the
   ramp runs edge to edge at any width. */
.wh>main>:is(.hero.hero-img,.hero,.page-intro,.page-hero),
.wh>main>section:has(> .tech-hero){
  position:relative;isolation:isolate;background:none!important;box-shadow:none;clip-path:none;
  padding-bottom:calc(var(--stage-end) + var(--feather))!important}
.wh>main>:is(.hero.hero-img,.hero,.page-intro,.page-hero)::before,
.wh>main>section:has(> .tech-hero)::before{
  content:"";position:absolute;z-index:-2;inset-block:-2px 0;inset-inline:calc(50% - 50vw);pointer-events:none;
  background:
    var(--fog-rise) center bottom/auto var(--feather) repeat-x,
    var(--ramp-down) center bottom/100% var(--feather) no-repeat,
    linear-gradient(#292929,#292929) center top/100% calc(100% - var(--feather) + 2px) no-repeat}
/* the v7 hero is full width already; its photo stops above the ramp and
   melts into the Lead instead of ending on a straight line */
.wh>main>.hero.hero-img{overflow:visible}
/* the copy sits higher on the photo now, so the scrim behind it is a touch deeper */
@media (min-width:641px){.wh>main>.hero.hero-img .hero-bg::after{background:linear-gradient(90deg,rgba(37,37,37,.94) 0,rgba(37,37,37,.8) 48%,rgba(37,37,37,.42) 100%),linear-gradient(180deg,rgba(37,37,37,.3),rgba(37,37,37,0) 40%,rgba(37,37,37,.6))}}
.wh>main>.hero .hero-bg{bottom:var(--feather);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 72px,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 72px,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%)}
.wh>main>:is(.hero.hero-img,.hero){padding-top:var(--stage-top)!important}
/* the stage that holds a rounded photo (Technology, UAE): the photo gets the
   same soft fade at its foot */
.wh>main>section:has(> .tech-hero){padding-bottom:calc(var(--stage-end) + var(--feather))!important}
.wh>main>section:has(> .tech-hero){padding-top:12px}
.wh>main>section:has(> .tech-hero) .tech-hero{margin-top:0;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.6)}
/* the breadcrumb above a stage is part of the stage */
.wh>main>.crumbs:has(+ :is(.hero,.page-intro,.page-hero)),.wh>main>.crumbs:has(+ section > .tech-hero){background:#292929}
/* content after the ramp starts on Frost with the normal rhythm */
.wh>main>:is(.hero,.page-intro,.page-hero,section:has(> .tech-hero)) + section.wrap:not(.sec):not(.sec-md){padding-top:var(--sec-y-sm)}
.wh>main>:is(.hero,.page-intro,.page-hero,section:has(> .tech-hero)) + :is(.rule-top,section){border-top:0}

/* ---- Pages without a hero band (checklists, legal, glossary, 404 ...):
   a short fog cap under the nav, so the dark chrome dissolves into the page
   the same way instead of stopping on a line. */
.wh>main:not(:has(> :is(.hero,.page-intro,.page-hero))):not(:has(> section > .tech-hero))::before{
  content:"";display:block;height:var(--cap);
  background:var(--fog-rise) center bottom/auto var(--cap) repeat-x,var(--ramp-down) center bottom/100% 100% no-repeat}

/* ---- Nav: the seven labels name the pages they open ("Global compliance"),
   so the bar collapses to the menu a little earlier, before it can crowd. */
@media (max-width:1260px){
  .nav-links,.nav-ask,.nav-bar > .nav-cta{display:none}
  .nav-icon,.nav-audit{display:inline-flex}
  .nav-bar{padding:18px 32px;min-height:80px;gap:10px}
}
/* ---- Sticky nav: a soft fall-off instead of a ruled edge while scrolling. */
.nav{border-bottom-color:transparent}
.nav::after{content:"";position:absolute;inset-inline:0;top:100%;height:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(41,41,41,.14),rgba(41,41,41,.05) 45%,rgba(41,41,41,0))}
.nav:has(.menu.open)::after{display:none}

/* ---- Reading body: tinted sections step in and out softly.
   .band-warm (brand pages) and the v7 sections tinted with --bg-2 fade from
   Frost to the haze surface over --soft, and two tinted sections in a row
   join without dipping back to Frost. */
.wh>main>:is(.band-warm,section[style*="--bg-2"]){
  --ft:var(--soft);--fb:var(--soft);
  background:
    var(--haze-glow),
    linear-gradient(180deg,rgba(242,242,244,0) 0,#f2f2f4 var(--ft),#f2f2f4 calc(100% - var(--fb)),rgba(242,242,244,0) 100%)!important}
.wh>main>:is(.band-warm,section[style*="--bg-2"]) + :is(.band-warm,section[style*="--bg-2"]){--ft:0px}
.wh>main>:is(.band-warm,section[style*="--bg-2"]):has(+ :is(.band-warm,section[style*="--bg-2"])){--fb:0px}
/* ruled tops between sections go; whitespace separates them */
.rule-top{border-top:0}

/* ---- Closing stage: when a page ends on its call to action (the audit
   panel, the key facts, the free-tool band), that last section becomes the
   start of the dark close. A fog ramp gathers Frost into Lead above it, the
   panel loses its box and sits on the stage, and the footer continues it. */
.wh>main:is(:has(> section:last-of-type > .wrap > .cta-panel),:has(> section:last-of-type > .facts),:has(> section:last-of-type > .wrap > .cta-band))>section:last-of-type{
  /* dark tokens: brand-kit names and the v7 names */
  --ink:var(--on-dark);--text:var(--on-dark);--body:var(--on-dark-body);--muted:var(--on-dark-mute);--text-2:var(--on-dark-body);
  --accent:var(--powder-blue);--hair:rgba(255,255,255,.1);--border:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.3);--card:rgba(255,255,255,.04);
  --accent-mono:#86c6ec;--card-glass:rgba(255,255,255,.04);--card-line:rgba(255,255,255,.12);--card-shadow:none;
  --ink-soft:#c4c4c4;--ink-mute:#a8a8a8;--ink-dim:#a8a8a8;--dim:#a8a8a8;
  --powder:#86c6ec;--powder-soft:#86c6ec;--powder-dim:#86c6ec;
  --line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.18);
  position:relative;isolation:isolate;color:var(--on-dark);background:none;
  padding-top:calc(var(--feather) + var(--sec-y-sm))!important;padding-bottom:var(--sec-y-sm)!important;margin-top:0}
.wh>main:is(:has(> section:last-of-type > .wrap > .cta-panel),:has(> section:last-of-type > .facts),:has(> section:last-of-type > .wrap > .cta-band))>section:last-of-type::before{
  content:"";position:absolute;z-index:-1;inset-block:0 -1px;inset-inline:calc(50% - 50vw);pointer-events:none;
  background:
    var(--fog-fall) center top/auto var(--feather) repeat-x,
    var(--ramp-up) center top/100% var(--feather) no-repeat,
    linear-gradient(#292929,#292929) center bottom/100% calc(100% - var(--feather) + 2px) no-repeat}
.wh>main:is(:has(> section:last-of-type > .wrap > .cta-panel),:has(> section:last-of-type > .facts),:has(> section:last-of-type > .wrap > .cta-band)) + .foot{margin-top:0}
.wh>main:is(:has(> section:last-of-type > .wrap > .cta-panel),:has(> section:last-of-type > .facts),:has(> section:last-of-type > .wrap > .cta-band)) + .foot .foot-grid{border-top:1px solid rgba(255,255,255,.07);padding-top:48px}
/* the panel itself: no box on the stage; its inner list is the one charcoal glass card */
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts){background:none;border:0;box-shadow:none;border-radius:0;padding-inline:0;padding-block:0;overflow:visible}
.wh>main>section:last-of-type>.wrap>.cta-panel .cta-includes,
.wh>main>section:last-of-type>.wrap>.cta-band .inc{
  background:var(--wolf-glass);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);padding:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -36px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@media (max-width:860px){.wh>main>section:last-of-type>.wrap>.cta-band .inc{border-top:1px solid rgba(255,255,255,.1)}}
.wh>main>section:last-of-type > .facts.facts{padding-block:8px}
.wh>main:is(:has(> section:last-of-type > .wrap > .cta-panel),:has(> section:last-of-type > .facts),:has(> section:last-of-type > .wrap > .cta-band))>section:last-of-type > .wrap > .pills a.pill{color:var(--powder-blue);border-color:rgba(255,255,255,.2)}

/* ---- Footer: when the page does not end on its own dark close, the footer
   brings the ramp with it. */
.wh>main:not(:has(> section:last-of-type > .wrap > .cta-panel)):not(:has(> section:last-of-type > .facts)):not(:has(> section:last-of-type > .wrap > .cta-band)) + .foot{
  margin-top:0;padding-top:var(--feather);
  background:
    var(--fog-fall) center top/auto var(--feather) repeat-x,
    var(--ramp-up) center top/100% var(--feather) no-repeat,
    url(/assets/img/kit/fog-band.webp) center bottom/min(100vw,2400px) auto no-repeat,
    linear-gradient(#292929,#292929) center bottom/100% calc(100% - var(--feather) + 2px) no-repeat}

/* =====================================================================
   2. PANELS IN THE READING BODY
   A call to action or key-facts panel in the middle of a page is no longer a
   dark slab dropped onto Frost: it is a lavender-haze glass panel (the kit's
   sign-in card), with the Deep Blue main action. Photo panels stay
   photographs. Dark only lives at the top and the close.
   ===================================================================== */
.v7 .cta-panel,.cta-dark:not(.cta-photo),.facts,.cta-band,.offer.dark,.card-dark,.v7 .audit-band{
  --ink:#292929;--text:#292929;--body:#3c3c3b;--muted:#5b5e66;--text-2:#5b5e66;--accent:#191270;
  --hair:rgba(41,41,41,.08);--border:rgba(41,41,41,.12);--line-strong:rgba(41,41,41,.26);--card:rgba(255,255,255,.6);
  --accent-mono:#5b5e66;--card-glass:rgba(255,255,255,.55);--card-line:rgba(255,255,255,.9);--card-shadow:var(--lift);
  --ink-soft:#3c3c3b;--ink-mute:#5b5e66;--ink-dim:#5b5e66;--dim:#5b5e66;
  --powder:#191270;--powder-soft:#191270;--powder-dim:#191270;--powder-deep:#fff;
  --green:var(--ok);--amber:var(--warn);--red:var(--bad);
  --line:rgba(41,41,41,.1);--line-2:rgba(41,41,41,.16);--bg-2:rgba(255,255,255,.5);
  --on-dark:#292929;--on-dark-body:#3c3c3b;--on-dark-mute:#5b5e66;--accent-dark:#5b5e66;
  background:var(--haze-panel);color:#292929;border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--glass-hi),0 1px 2px rgba(20,20,40,.04),0 28px 56px -36px rgba(25,18,112,.28)}
.v7 .cta-panel,.cta-dark:not(.cta-photo),.cta-band,.v7 .audit-band{border-radius:var(--r-panel)}
.facts{border-radius:var(--r-panel)}
.offer.dark,.card-dark{border-radius:var(--r-card)}
:is(.v7 .cta-panel,.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark,.v7 .audit-band) :is(h2,h3,.h2,.h3){color:#292929}
:is(.v7 .cta-panel,.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark,.v7 .audit-band) .eyebrow.eyebrow{color:#5b5e66}
:is(.v7 .cta-panel,.cta-band,.cta-dark:not(.cta-photo),.facts,.v7 .audit-band) :is(.em,.accent-ink).accent-ink,
:is(.v7 .cta-panel,.cta-band,.cta-dark:not(.cta-photo),.facts,.v7 .audit-band) .em.em{color:#5b5e66}
:is(.v7 .cta-panel,.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark,.v7 .audit-band) :where(p) a{color:var(--deep);text-decoration-color:rgba(25,18,112,.45)}
:is(.v7 .cta-panel,.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark,.v7 .audit-band) :focus-visible{outline-color:var(--deep)}
/* main action: Deep Blue on the haze panel; secondary: a line button */
.v7 :is(.cta-panel,.audit-band) .btn-primary.btn-primary,
:is(.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark) :is(.btn-dark,.btn-light).btn{
  background:var(--deep-btn);color:#fff;border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(25,18,112,.55)}
.v7 :is(.cta-panel,.audit-band) .btn-primary.btn-primary:hover,
:is(.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark) :is(.btn-dark,.btn-light).btn:hover{background:linear-gradient(180deg,#524693 0%,#1f1785 100%)}
.v7 :is(.cta-panel,.audit-band) .btn-ghost.btn-ghost,
:is(.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark) .btn-ghost-dark.btn{background:rgba(255,255,255,.6);color:#292929;border-color:rgba(41,41,41,.26)}
.v7 :is(.cta-panel,.audit-band) .btn-ghost.btn-ghost:hover,
:is(.cta-band,.cta-dark:not(.cta-photo),.facts,.offer.dark,.card-dark) .btn-ghost-dark.btn:hover{background:#fff;border-color:#292929}
.v7 :is(.cta-panel,.audit-band) :is(.btn-text,.card .more).btn-text,.v7 .cta-panel a.pill.pill{color:var(--deep)}
.v7 .cta-panel .trust-row svg{color:var(--ok)}
/* inner list: a column beside the copy, separated by a hairline, not a box in a box */
.v7 .cta-panel .cta-includes{background:none;border:0;border-inline-start:1px solid rgba(41,41,41,.12);border-radius:0;padding:4px 0 4px 32px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[dir=rtl] .v7 .cta-panel .cta-includes{padding:4px 32px 4px 0}
.v7 .cta-panel .cta-includes h4{color:#5b5e66}
.v7 .cta-panel .cta-includes li{color:#3c3c3b}
.v7 .cta-panel .cta-includes li strong,.v7 .cta-panel .after-book strong{color:#292929}
.v7 .cta-panel .cta-includes li svg{color:var(--ok)}
.v7 .cta-panel .after-book{border-top-color:rgba(41,41,41,.12)}
.v7 .cta-panel .after-book ol{color:#3c3c3b}
.cta-band .inc{border-inline-start-color:rgba(41,41,41,.12)}
.cta-band .inc li::before,.cta-band .ticks li::before{color:var(--ok)}
.cta-band a.text-link{color:var(--deep)}
.facts dl{border-top-color:rgba(41,41,41,.12)}
.facts dl div{border-bottom-color:rgba(41,41,41,.1)}
.facts dt{color:#292929}
.facts dd{color:#5b5e66}
.facts .intro .eyebrow{color:#5b5e66}
.who p{color:#3c3c3b}
.offer.dark .k,.offer.dark .when,.offer.dark .meta{color:#5b5e66}
.offer.dark p{color:#3c3c3b}
.offer.dark .foot-row{border-top-color:rgba(41,41,41,.1)}
@media (max-width:1024px){.v7 .cta-panel .cta-includes{border-inline-start:0;border-top:1px solid rgba(41,41,41,.12);padding:24px 0 0}}
/* ...and on the closing stage the same panels flip back to the dark kit */
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts){
  --ink:#f5f5f5;--text:#f5f5f5;--body:#c4c4c4;--muted:#a8a8a8;--text-2:#c4c4c4;--accent:#86c6ec;
  --hair:rgba(255,255,255,.1);--border:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.3);--card:rgba(255,255,255,.04);
  --accent-mono:#86c6ec;--card-glass:rgba(255,255,255,.04);--card-line:rgba(255,255,255,.12);--card-shadow:none;
  --ink-soft:#c4c4c4;--ink-mute:#a8a8a8;--ink-dim:#a8a8a8;--dim:#a8a8a8;--powder:#86c6ec;--powder-soft:#86c6ec;--powder-dim:#86c6ec;--powder-deep:#292929;
  --green:var(--ok);--amber:var(--warn);--red:var(--bad);--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.18);--bg-2:rgba(255,255,255,.04);
  --on-dark:#f5f5f5;--on-dark-body:#c4c4c4;--on-dark-mute:#a8a8a8;--accent-dark:#86c6ec;color:#f5f5f5}
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts) :is(h2,h3,.h2,.h3).h2,
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts) :is(h2,h3){color:#f5f5f5}
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts) .eyebrow.eyebrow.eyebrow{color:#86c6ec}
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts) :is(.em,.accent-ink).accent-ink.accent-ink,
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts) .em.em.em{color:#86c6ec}
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts) :where(p) a{color:var(--powder-blue);text-decoration-color:rgba(134,198,236,.5)}
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts) :focus-visible{outline-color:var(--powder-blue)}
.v7>section:last-of-type > .wrap > .cta-panel .btn-primary.btn-primary.btn-primary,
.wh>main>section:last-of-type>.wrap>.cta-band .btn:is(.btn-dark,.btn-light).btn{background:var(--frost);color:var(--lead);box-shadow:none;border-color:transparent}
.v7>section:last-of-type > .wrap > .cta-panel .btn-primary.btn-primary.btn-primary:hover,
.wh>main>section:last-of-type>.wrap>.cta-band .btn:is(.btn-dark,.btn-light).btn:hover{background:#fff}
.wh>main>section:last-of-type>.wrap>.cta-band .btn.btn-ghost-dark.btn{background:rgba(255,255,255,.04);color:var(--on-dark);border-color:rgba(255,255,255,.32)}
.wh>main>section:last-of-type>.wrap>.cta-band .btn.btn-ghost-dark.btn:hover{background:rgba(255,255,255,.1);border-color:#f5f5f5}
.v7>section:last-of-type > .wrap > .cta-panel .btn-ghost.btn-ghost.btn-ghost{background:rgba(255,255,255,.04);color:var(--on-dark);border-color:rgba(255,255,255,.32)}
.v7>section:last-of-type > .wrap > .cta-panel :is(.btn-text,.card .more).btn-text.btn-text{color:var(--powder-blue)}
.v7>section:last-of-type > .wrap > .cta-panel .trust-row svg{color:#86c6ec}
.v7>section:last-of-type > .wrap > .cta-panel .cta-includes.cta-includes{border-inline-start:1px solid rgba(255,255,255,.1);padding:28px}
.v7>section:last-of-type > .wrap > .cta-panel .cta-includes h4{color:#86c6ec}
.v7>section:last-of-type > .wrap > .cta-panel .cta-includes li{color:#c4c4c4}
.v7>section:last-of-type > .wrap > .cta-panel :is(.cta-includes li,.after-book) strong{color:#f5f5f5}
.v7>section:last-of-type > .wrap > .cta-panel .cta-includes li svg{color:#86c6ec}
.v7>section:last-of-type > .wrap > .cta-panel .after-book{border-top-color:rgba(255,255,255,.14)}
.v7>section:last-of-type > .wrap > .cta-panel .after-book ol{color:#c4c4c4}
.wh>main>section:last-of-type>.wrap>.cta-band .inc li::before,.wh>main>section:last-of-type>.wrap>.cta-band .ticks li::before{color:#86c6ec}
.wh>main>section:last-of-type>.wrap>.cta-band a.text-link{color:#c4c4c4}
.wh>main>section:last-of-type > .facts dl{border-top-color:rgba(255,255,255,.14)}
.wh>main>section:last-of-type > .facts dl div{border-bottom-color:rgba(255,255,255,.1)}
.wh>main>section:last-of-type > .facts dt{color:#ebebeb}
.wh>main>section:last-of-type > .facts dd{color:#a8a8a8}
.wh>main>section:last-of-type > .facts .intro .eyebrow{color:#86c6ec}

/* =====================================================================
   3. ONE CARD SYSTEM
   Three radii (12 small tiles, 16 cards, 20 panels and photos), a hairline
   at 7% Lead, one gentle two-step shadow, frosted glass on light. Cards
   that are not links do not move on hover.
   ===================================================================== */
.card,.record-list li,.offer:not(.dark),.mandate,.tile,.form-card,.tool,.layer-silos > li,.prose .kv > div,.tl-rule,
.v7 :is(.card,.stat,.blog-item,.land-cat){
  border-radius:var(--r-card);border:1px solid var(--hairline);box-shadow:var(--glass-hi),var(--lift)}
.v7 .card,.v7 .stat,.v7 .blog-item,.v7 .land-cat,.card,.record-list li,.offer:not(.dark),.tile,.form-card,.tl-rule{background:var(--glass-light)}
.mandate{border-radius:var(--r-sm)}
.gap-panel,.evidence,.compare,.v7 .cmp,.v7 .blog-feat,.v7 .browser,.console,.tl-tool,.note-band,.bench,.result,.range{
  border-radius:var(--r-panel);border-color:var(--hairline);box-shadow:var(--glass-hi),var(--lift)}
.proof,.explainer,.chain,.photo-card,.photo-band,.tech-hero,.audit-band,.cta-dark.cta-photo,.v7 .photo,.v7 .chap-viz,.v7 .viz,.v7 .viz2,
.v7 .hero-img .hero-bg,.post-figure,.photo-fig img,.photo-grid .photo-fig,.module-photo,.v7 .band{border-radius:var(--r-panel)}
.chain{border-radius:var(--r-card)}
.wh>main>.hero.hero-img .hero-bg{border-radius:0}
/* on the dark stages the same cards are charcoal glass */
:is(.wh>main>.hero,.wh>main>.page-intro,.kit-stage) .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
/* only links lift */
.v7 .card:not(a):hover,.v7 .blog-item:not(a):hover{transform:none;box-shadow:var(--glass-hi),var(--lift);border-color:var(--hairline)}
.v7 a.card:hover,a.card:hover,.link-card:hover,.v7 a.blog-item:hover{transform:translateY(-2px);box-shadow:var(--glass-hi),var(--lift-hover);border-color:rgba(41,41,41,.12)}
/* tables inside a panel: header row on the haze surface, no double frame */
.evidence th,.compare th,.v7 .cmp thead th{background:rgba(242,242,244,.85)}
/* a tool frame that only groups result cards loses its own box */
.tl-tool:has(> .tl-rules){background:none;border:0;box-shadow:none;padding:0}
/* the haze bands carry glass cards; tinted sub-panels inside them become glass too */
.wh>main>:is(.band-warm,section[style*="--bg-2"]) :is(.note-band,.bench){background:var(--glass-light)}
/* equal rows: cards in one grid row share a height and keep their foot at the bottom */
.v7 .cards,.v7 .bento,.offers,.links3,.gets,.record-list,.chain-grid{align-items:stretch}
.v7 .cards > .card,.offers > .offer{display:flex;flex-direction:column}
.v7 .cards > .card > .more:last-child{margin-top:auto;padding-top:16px}

/* no orphan card: a single card left alone on the last row of a grid takes the
   whole row instead of sitting under one column */
@media (min-width:561px){.v7 .cards-2 > :last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:561px) and (max-width:860px){.v7 .cards-3 > :last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:861px){.v7 .cards-3 > :last-child:nth-child(3n+1){grid-column:1 / -1}}
@media (min-width:1025px){.v7 .cards-4 > :last-child:nth-child(4n+1){grid-column:1 / -1}}
@media (min-width:961px){:is(.links3:not(.links4),.offers) > :last-child:nth-child(3n+1){grid-column:1 / -1}}

/* =====================================================================
   4. TYPE AND SPACE
   One fluid scale for every template. Levels: display (home), h1 (every page
   title), h2 (section), h3 (feature or card group), h4 (card title).
   ===================================================================== */
.h-hero{font-size:var(--fs-display);line-height:1.02}
.h-page,.v7 .h1,.v7 .hero h1,.tech-hero h1,.page-hero h1,.post-head h1,.wh>main>.page-intro h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.022em}
.h-sec,.h-sec-sm,.h-mid,.v7 .h2,.sec-head h2,.cta-dark h2,.bench h2,.audit-band h2,.v7 .audit-band h3,.cta-band h2,.v7 .end .big,.v7 .chap-copy h3,.tl-h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.018em}
.h-card,.v7 .h3,.chapter h3,.module h3,.offer h3,.get h3,.link-card h3,.photo-card p,.stack-card p,.post-feature h3,.prose h2,.photo-band strong,.explainer-title{font-size:var(--fs-h3);line-height:1.16;letter-spacing:-.012em}
.v7 .card h3,.v7 h3:not(.h3):not([class]),.tile h3,.v7 .blog-feat-body h3,.v7 .blog-item h4,.tl-rule h3,.prose h3,.faq-list summary{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.006em}
.prose h2{font-size:var(--fs-h3)}
.lead,.v7 .lead,.v7 .hero-sub,.page-intro .lead,.page-hero .lead,.post-head .lead{font-size:var(--fs-lead);line-height:1.5}
.v7 .lead,.page-intro .lead,.page-hero .lead,.v7 .hero-sub,.hero-copy .lead{max-width:62ch}
.body-lg{font-size:clamp(17px,.15vw + 16.4px,19px)}
/* reading measure: 60-72 characters */
.prose,.v7 .medium-body{max-width:68ch}
.v7 .card p,.tile p,.offer p{max-width:62ch}
.faq-list details p{max-width:66ch}
/* one section rhythm */
.sec,.v7 .sec{padding-block:var(--sec-y)}
.sec-md,.v7 .sec-sm,.v7 .sec-tight{padding-block:var(--sec-y-sm)}
.v7 .end{padding-block:var(--sec-y)}
.chains{padding-bottom:var(--sec-y)}
.mandates{padding-block:var(--sec-y-sm)}
/* buttons: one shape, two sizes, never under 44px */
.btn,.v7 .btn{min-height:48px;padding:0 22px;font:500 17px/1 var(--sans);border-radius:var(--r-btn)}
.btn-lg,.v7 .btn-lg{min-height:52px;padding:0 26px;font-size:17px}
.btn-sm,.v7 .btn-sm{min-height:44px;padding:0 16px;font-size:16px}
.v7 .btn-text{min-height:44px;padding:0;border-radius:0}
.nav-cta{height:44px;border-radius:var(--r-btn)}
.explainer-play{border-radius:var(--r-btn)}
@media (max-width:640px){.btn,.v7 .btn{min-height:48px}}
/* media keep their shape while they load */
.v7 .photo:not([style*="aspect-ratio"]){aspect-ratio:4/3}
.v7 .photo img,.photo-card img,.chain img{height:100%}
.v7 .blog-feat-img{aspect-ratio:16/9}

/* =====================================================================
   5. PHONES
   ===================================================================== */
@media (max-width:640px){
  .wh>main>.crumbs{padding-top:4px}
  .v7 .cta-panel,.cta-band,.cta-dark:not(.cta-photo),.facts{border-radius:var(--r-card)}
  .wh>main>section:last-of-type > .wrap > .pills{gap:8px}
}
@media print{
  .wh>main>:is(.hero,.page-intro,.page-hero)::before,.wh>main>section:last-of-type::before,.nav::after,.wh>main::before{display:none}
}
/* the three free-tool cards on Home stay one row from tablet up */
@media (min-width:600px){.tl-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phone safety for two-column splits (23 Oct): a single column must never be sized by its widest child.
   A long no-wrap button made /eu-battery#copy 455px wide on a 375px phone and clipped the paragraph and button. */
@media (max-width:1024px){.v7 .split,.v7 .split.rev{grid-template-columns:minmax(0,1fr)}.v7 .split>*{min-width:0}}
@media (max-width:640px){main .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:12px;max-width:100%}}

/* Regulation hubs (/eudr, /fsma-204): source line under each status row, three-card rows on desktop */
.hub-status dd .src{display:block;margin-top:6px;font:13px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
@media (min-width:1025px){.gets.gets-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =====================================================================
   6. SWITZER ONLY AND OFFICIAL STATUS COLOURS (Dre, 19 Oct 2026)
   Codes, IDs, keys, figures and table cells are Switzer; figures that must
   line up use tabular figures. Status is only ever the official dark green,
   dark amber or dark red (--ok --warn --bad). On a dark ground a status is a
   chip filled with the official colour and white text (>= 4.5:1), or white
   text with an official-colour dot; never coloured text on dark.
   ===================================================================== */
:where(.wh) :is(code,kbd,samp,tt,var){font-family:var(--sans);font-variant-numeric:tabular-nums;font-style:normal}
:where(.wh) :is(table,dd,.v,.pct,.when,.meta,.n,.k,time){font-variant-numeric:tabular-nums}
.foot-id{font-size:14px;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.proof-log .verdict:not(.issued){background:var(--ok);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.result .ok{background:var(--ok);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.rail .join{background:var(--warn);color:#fff}
.tl-pill.st-phasingin,.tl-pill.st-adoptednotyetapplying{background:var(--warn);color:#fff}
.tl-pill.c1{background:var(--bad);color:#fff}
.form-ok{border-inline-start-color:var(--ok)}
/* status words on a dark ground: white text, official-colour dot with a light ring */
:is(.on-dark,.dark-surface,.v7 .hero,.v7 .band,.card-dark) :is(.yes,.no,.mid){color:#f5f5f5}
:is(.on-dark,.dark-surface,.v7 .hero,.v7 .band,.card-dark) :is(.yes,.no,.mid)::before{
  content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-inline-end:.45em;vertical-align:.06em;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75)}
:is(.on-dark,.dark-surface,.v7 .hero,.v7 .band,.card-dark) .yes::before{background:var(--ok)}
:is(.on-dark,.dark-surface,.v7 .hero,.v7 .band,.card-dark) .mid::before{background:var(--warn)}
:is(.on-dark,.dark-surface,.v7 .hero,.v7 .band,.card-dark) .no::before{background:var(--bad)}

/* Drawn diagrams in blog posts (they were ASCII art in a code font): a glass
   card, boxes for the parts, arrows between them; it reflows on a phone. */
.dgm{margin:32px 0;padding:clamp(16px,1.6vw + 10px,26px);display:grid;gap:12px;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(246,247,251,.7));border:1px solid var(--hairline);
  box-shadow:var(--glass-hi),var(--lift);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.dgm figcaption{font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#5b5e66;text-align:start;margin:0 0 4px}
.dgm-box{background:rgba(255,255,255,.78);border:1px solid rgba(41,41,41,.1);border-radius:var(--r-sm);padding:14px 16px;min-width:0}
.dgm-box b{display:block;font-weight:600;color:#292929;font-size:16.5px;line-height:1.35}
.dgm-box ul{list-style:none;margin:8px 0 0!important;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.dgm-box li{margin:0!important;font-size:15px;line-height:1.45;color:#3c3c3b}
.dgm-box li::before{content:"·";margin-inline-end:6px;color:#5b5e66}
.dgm-box.is-root{background:rgba(230,228,242,.6)}
.dgm-box.is-ok{border-color:rgba(31,107,71,.35);box-shadow:inset 3px 0 0 var(--ok)}
.dgm-box.is-bad{border-color:rgba(179,50,63,.35);box-shadow:inset 3px 0 0 var(--bad)}
.dgm-arrow{margin:0!important;text-align:center;font-size:15px!important;line-height:1.4;color:#5b5e66}
.dgm-arrow span{display:inline-block;font-size:18px;margin-inline-end:6px;color:#292929}
.dgm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;align-items:stretch}
.dgm-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.dgm-pair .dgm-side{align-self:center;font-size:20px!important;color:#292929}
.dgm-chain{list-style:none;margin:0!important;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dgm-chain li{margin:0!important;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid rgba(41,41,41,.12);font-size:15px;line-height:1.3;color:#292929}
.dgm-chain li+li::before{content:"→";margin-inline-end:8px;color:#5b5e66}
.dgm-chain li+li{padding-inline-start:12px}
.dgm-map{margin:0;display:grid;gap:8px}
.dgm-map>div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);gap:10px;align-items:center;
  background:rgba(255,255,255,.78);border:1px solid rgba(41,41,41,.1);border-radius:var(--r-sm);padding:12px 14px}
.dgm-map>div::after{content:"→";grid-column:2;grid-row:1;color:#5b5e66}
.dgm-map dt{grid-column:1;grid-row:1;font-weight:600;color:#292929;font-size:15.5px;line-height:1.35}
.dgm-map dd{grid-column:3;grid-row:1;margin:0;color:#3c3c3b;font-size:15px;line-height:1.45}
@media (max-width:640px){
  .dgm-pair{grid-template-columns:minmax(0,1fr)}
  .dgm-pair .dgm-side{transform:rotate(90deg);justify-self:center}
  .dgm-map>div{grid-template-columns:minmax(0,1fr)}
  .dgm-map>div::after{content:none}
  .dgm-map dt,.dgm-map dd{grid-column:1;grid-row:auto}
}
/* tables inside blog posts: glass, hairlines, scroll sideways on a phone */
.table-scroll{overflow-x:auto;margin:28px 0;border-radius:var(--r-card);border:1px solid var(--hairline);box-shadow:var(--glass-hi),var(--lift);background:rgba(255,255,255,.82)}
.post-table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;min-width:520px}
.post-table th,.post-table td{padding:12px 14px;text-align:start;vertical-align:top;border-bottom:1px solid rgba(41,41,41,.08);color:#3c3c3b}
.post-table thead th{font:600 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#5b5e66;background:rgba(242,242,244,.7)}
.post-table tbody th{font-weight:600;color:#292929}
.post-table tr:last-child>*{border-bottom:0}

/* Further reading (tools/warm_chrome.py + tools/reading_map.py): related posts
   on guide, pillar and sector pages, a glass panel with a plain link list */
.reading{padding-block:clamp(24px,2vw + 12px,40px)}
.reading-in{border-radius:var(--r-panel);padding:clamp(22px,2vw + 14px,36px);
  background:linear-gradient(126deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 38%),linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,247,251,.72));
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-hi),0 0 0 1px rgba(41,41,41,.05),var(--lift);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.reading-in .h-sec-sm{margin:10px 0 18px}
.reading-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.reading-list li{margin:0;border-top:1px solid rgba(41,41,41,.08);padding-top:12px}
.reading-list a{color:#292929;font-weight:500;line-height:1.4;text-decoration:none}
.reading-list a:hover{color:var(--deep);text-decoration:underline;text-underline-offset:3px}
.reading-more{margin:18px 0 0;font-size:15.5px;color:#5b5e66}
.reading-more a{color:var(--deep);text-decoration:underline;text-decoration-color:rgba(25,18,112,.4);text-underline-offset:3px}
@media (max-width:760px){.reading-list{grid-template-columns:minmax(0,1fr)}}

/* Footer: brand + five link columns (Guides added 24 Oct 2026) on one row
   from laptop width; three columns on tablets, two on phones */
@media (min-width:1101px){.foot-grid{grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:24px 28px}}
@media (min-width:641px) and (max-width:1100px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}.foot-brand{grid-column:1 / -1}}

/* =====================================================================
   7. Guides: the definition under the H1 and the key-facts block (GEO, 24 Oct 2026).
   One sentence that answers "what is it", then three dated, sourced facts
   on one light glass panel, so a reader or an answer engine can lift them whole.
   ===================================================================== */
.hero-def{font-size:clamp(18px,1.6vw,21px);line-height:1.45;max-width:62ch;margin-top:18px;font-weight:500;color:inherit}
.hero .hero-def + .hero-sub{margin-top:14px}
.kf-sec{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px)}
.kf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,3vw,44px);align-items:start;
  padding:clamp(22px,3vw,36px);border-radius:var(--r-panel);border:1px solid var(--hairline);
  background:var(--glass-light);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:var(--glass-hi),var(--lift)}
.kf-head .h3{margin-top:10px;font-size:clamp(21px,2vw,26px);line-height:1.25}
.kf-anchor{margin-top:12px;font-size:15px;line-height:1.5;color:var(--text-2)}
.kf-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.kf-list li{padding:14px 0;border-top:1px solid var(--hairline)}
.kf-list li:first-child{border-top:0;padding-top:0}
.kf-list li:last-child{padding-bottom:0}
.kf-list p{margin:0;font-size:16.5px;line-height:1.5}
.kf-list .src{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--text-2)}
.kf-list .src a{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
@media (max-width:860px){.kf{grid-template-columns:minmax(0,1fr)}}
/* the comparison diagram's top layer is a haze glass panel, not a charcoal slab (fix list 4, 24 Oct 2026) */
.v7 .land-layer{background:var(--haze-panel);border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-hi),var(--lift)}
.v7 .land-layer .t b{color:#292929}
.v7 .land-layer .t span.t,.v7 .land-layer .t span{color:#5b5e66}
/* equal columns: a grid column is never sized by its widest child (fix list 4) */
.record-list,.offers{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.offers,.record-list{grid-template-columns:minmax(0,1fr)}}
.record-list .v.mono-v{white-space:normal;overflow-wrap:anywhere}
/* /blog: the featured post and the list beside it share the row equally, one card radius */
.v7 .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.v7 .blog-feat{border-radius:var(--r-card)}
@media (max-width:860px){.v7 .blog-grid{grid-template-columns:minmax(0,1fr)}}
/* layout QA, 24 Oct 2026 */
.sec-head{display:flex;flex-direction:column;gap:14px}
.gets{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.gets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gets{grid-template-columns:minmax(0,1fr)}}
/* long example URLs break inside their card instead of running out of it */
.card code,.kf code,.faq code,.prose code{overflow-wrap:anywhere;word-break:break-word}
.card p{min-width:0;overflow-wrap:break-word}
/* deadline timeline: one column per node, read across from 1200px, down below */
.v7 .rtl-node > span{display:block}
@media (min-width:1200px){.v7 .rtl-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
@media (min-width:901px) and (max-width:1199px){
  .v7 .rtl-track{grid-template-columns:minmax(0,1fr)}
  .v7 .rtl-track::before{left:20px;right:auto;top:2%;bottom:2%;width:2px;height:auto;background:linear-gradient(180deg,var(--accent),rgba(25,18,112,.15))}
  .v7 .rtl-node{padding:0 0 28px 52px}
  .v7 .rtl-node::before{top:2px}
}
/* blog archive: date and topic tags stay on one line; two columns until the cards are wide enough */
#all-posts-grid .tag{white-space:nowrap}
@media (min-width:861px) and (max-width:1100px){#all-posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #all-posts-grid > :last-child:nth-child(3n+1){grid-column:auto}#all-posts-grid > :last-child:nth-child(odd){grid-column:1 / -1}}
.nav-ask{white-space:nowrap}

/* =====================================================================
   8. Glass on light surfaces (24 Oct 2026). Cards and panels on Frost are
   frosted glass: a translucent fill with a light sheen at the top left,
   backdrop blur + saturate, a 1px inner top highlight, a hairline, and a
   soft three-layer shadow. Radii stay 12 / 16 / 20. Text stays on an
   almost-white fill, so contrast does not change.
   ===================================================================== */
:root{
  --glass-card:linear-gradient(126deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 36%),linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(250,251,253,.72) 100%);
  --glass-blur:blur(20px) saturate(1.5);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(255,255,255,.32);
  --lift:0 0 0 1px rgba(41,41,41,.02),0 1px 2px rgba(20,20,30,.04),0 10px 24px -14px rgba(20,20,30,.16);
}
.v7 .card,.v7 .stat,.v7 .blog-item,.v7 .land-cat,.card,.record-list li,.offer:not(.dark),.tile,.form-card,.tl-rule,
.tl-card,.link-card:not(.card-dark),.v7 .blog-feat,.kf{background:var(--glass-card);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.tl-card,.link-card:not(.card-dark){border:1px solid var(--hairline);box-shadow:var(--glass-hi),var(--lift);border-radius:var(--r-card)}
.gap-panel,.evidence,.compare,.v7 .cmp{background:var(--glass-card)}
/* the haze panels mid-page are glass too: the lavender shows through */
.v7 .cta-panel,.cta-dark:not(.cta-photo),.facts,.cta-band,.offer.dark,.card-dark,.v7 .audit-band,.v7 .land-layer{
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi),0 0 0 1px rgba(41,41,41,.05),0 2px 6px -3px rgba(20,20,40,.06),0 30px 60px -38px rgba(25,18,112,.3)}
/* on the dark stages, cards keep charcoal glass with a top highlight */
:is(.wh>main>.hero,.wh>main>.page-intro,.kit-stage) .card{background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px -30px rgba(0,0,0,.6)}
/* the closing stage keeps its dark panels */
:is(.wh>main>section:last-of-type>.wrap>.cta-panel,.wh>main>section:last-of-type>.wrap>.cta-band,.wh>main>section:last-of-type>.facts){-webkit-backdrop-filter:none;backdrop-filter:none}
/* a section head and what follows it keep the kit rhythm on every page */
.flow > .sec-head + *{margin-top:32px}
.flow > .tl-cards + p{margin-top:22px}
/* contrast QA, 24 Oct 2026 */
/* on a phone the rail's "?" sits on the light card with no chip: it is the official amber as text (5.6:1) */
@media (max-width:640px){.rail .join{color:var(--warn)}.rail.bonded .join{color:var(--accent)}}
/* the comparison diagram's top layer is light now: its label is grey, not powder blue */
.v7 .land .land-layer .t span{color:#5b5e66}
/* Arabic strokes are thinner at 14px: the legal row uses the primary on-dark text colour there */
:lang(ar) .foot-base a{color:#f5f5f5}

/* =====================================================================
   Alternating section bands (24 Oct 2026, ported from the site patrol, PR #22).
   Sections tinted with --bg-2 used to start and stop on a hard horizontal
   line. The tint now fades in and out over the first and last 96px, so the
   reading body flows from Frost into haze and back with no visible seam.
   ===================================================================== */
.v7 section.sec[style*="var(--bg-2)"]{
  background:linear-gradient(180deg,transparent 0,var(--bg-2) 96px,var(--bg-2) calc(100% - 96px),transparent 100%)!important}
.mandate-a{display:flex;flex-direction:column;gap:10px;height:100%;color:inherit;text-decoration:none}.mandate:has(.mandate-a:hover),.mandate:has(.mandate-a:focus-visible){border-color:var(--ink)}.mandate-a .n::after{content:" \2192";color:var(--muted);font-weight:400}
/* Nav on pages with a language menu (EN/AR/…): between 1261 and 1380px the bar ran 30px past the viewport. Tighten it there only. */
@media (min-width:1261px) and (max-width:1380px){.nav-bar:has(.nav-lang){padding-inline:28px}.nav-bar:has(.nav-lang) .nav-ask{min-width:0;flex-shrink:0}.nav-bar:has(.nav-lang) .nav-ask kbd{display:none}.nav-bar:has(.nav-lang) .nav-links{column-gap:12px}}