/* ============================================================
   SITE.CSS — shared design system for Aperture subpages
   ------------------------------------------------------------
   Purpose: this file is a faithful, byte-value EXPORT of the
   design tokens and reusable components defined inline in the
   homepage (test-exploding-simple/index.html <style> block).

   SOURCE OF TRUTH: the homepage's inline <style> block remains
   authoritative. This file does not "own" any value — it mirrors
   the homepage. If a token or a shared component (nav, footer,
   reveal idiom) needs to change, change it in index.html FIRST,
   then port the exact same value here. Never edit a value here
   and let it drift from the homepage.

   Scope: subpages only (legal pages, story, governance, and any
   future non-homepage page). The homepage never links this file.

   Documented exceptions: --track-eyebrow is set to .16em (not the
   homepage .eyebrow class's literal .18em), and --text-muted-light
   is darkened to meet WCAG AA for small text on both light surfaces.
   This reconciles two competing homepage values (.eyebrow itself
   uses .18em; every other eyebrow-style label — pillar h3s, nav
   menu items' cousins, section labels — uses .16em). The
   consolidation dossier (§5.1) explicitly directs picking .16em
   for the shared token. This is a spec decision, not a drift.

   Built: 2026-07-06 (site consolidation step 1)
   ============================================================ */

/* ============================================================
   TOKENS — verbatim from homepage :root, plus promoted tracking
   tokens per dossier §5.1
   ============================================================ */
:root{
  --surface-dark:#0b0b0c;
  --surface-dark-2:#101013;
  --surface-light:#f7f5f2;
  --surface-light-2:#f1efeb;
  --surface-panel-dark:rgba(18,18,21,.72);
  --surface-panel-light:rgba(247,245,242,.80);

  --text-primary-dark:#f4f2ee;
  --text-secondary-dark:#d3d0ca;
  --text-muted-dark:#a09d98;
  --text-primary-light:#121214;
  --text-secondary-light:#43434a;
  --text-muted-light:#66666c;

  --border-subtle-dark:rgba(255,255,255,.40);
  --border-subtle-light:rgba(18,18,20,.16);

  --accent-primary:#4a52ff;
  --accent-secondary:#8b7cf6;
  --accent-highlight:#ffffff;

  --focus-ring:#5a63ff;

  --font-display:"Inter Tight", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --nav-h:56px;
  --nav-top:20px;
  --gutter:clamp(20px, 5vw, 72px);
  --ease-settle:cubic-bezier(.22,1,.36,1);
  --track-display:-.012em;

  /* promoted de-facto tokens (dossier §5.1) — hard-coded on the
     homepage in several places; tokenized here so subpages match
     the homepage by contract, not coincidence. */
  --track-eyebrow:.16em;
  --track-menu:.14em;
  --track-wordmark:.30em;

  /* film grain: identical seeded-noise tile to the homepage's
     hero/footer grain layer, for surface continuity. */
  --grain:url("data:image/png;base64,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");
}

/* ============================================================
   BASE / RESET  (homepage lines 67–97)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface-light);
  color:var(--text-primary-light);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
a,button{touch-action:manipulation}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:600}
section{scroll-margin-top:calc(var(--nav-top) + var(--nav-h) + 24px)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.skip-link{
  position:fixed;top:12px;left:16px;z-index:200;
  background:var(--surface-dark);color:var(--text-primary-dark);
  padding:10px 16px;border-radius:6px;text-decoration:none;
  transform:translateY(-64px);
  transition:transform .2s var(--ease-settle);font-size:14px;
}
.skip-link:focus{transform:translateY(0)}
.eyebrow{
  font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
}

/* ============================================================
   FLOATING NAV  (homepage lines 102–170)
   Subpages hard-set theme via a class on <nav> — .nav-light for
   light-surface pages (legal, story), no modifier for dark pages.
   No IntersectionObserver theme-swap here; js/nav.js only
   handles the burger toggle + reveal gate.
   ============================================================ */
.nav{
  position:fixed;top:var(--nav-top);left:50%;transform:translateX(-50%);
  z-index:100;width:250px;max-width:calc(100vw - 32px);
}
.nav-pill{
  height:var(--nav-h);border-radius:6px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px 0 16px;
  background:var(--surface-panel-dark);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-primary-dark);
  transition:background .35s var(--ease-settle), color .35s var(--ease-settle), border-color .35s var(--ease-settle);
}
.nav.nav-light .nav-pill{
  background:var(--surface-panel-light);
  border-color:rgba(18,18,20,.10);
  color:var(--text-primary-light);
}
.nav-mark-link,.nav-word-link{display:flex;align-items:center;text-decoration:none;color:inherit}
.nav-mark{width:20px;height:20px}
.nav-word{
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:var(--track-wordmark);text-indent:var(--track-wordmark);
  user-select:none;
}
.nav-burger{
  appearance:none;background:none;border:0;cursor:pointer;color:inherit;
  width:32px;height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:4px;
}
.nav-burger span{
  display:block;width:18px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease-settle), opacity .25s var(--ease-settle);
}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}

.nav-menu{
  position:absolute;top:calc(var(--nav-h) + 8px);left:0;right:0;
  border-radius:6px;overflow:hidden;
  background:var(--surface-panel-dark);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-primary-dark);
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
  transition:opacity .22s var(--ease-settle), transform .22s var(--ease-settle), visibility 0s .22s;
}
.nav.nav-light .nav-menu{
  background:var(--surface-panel-light);
  border-color:rgba(18,18,20,.10);
  color:var(--text-primary-light);
}
.nav.menu-open .nav-menu{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;transition:opacity .3s var(--ease-settle), transform .3s var(--ease-settle), visibility 0s}
.nav-menu a{
  display:block;padding:13px 18px;text-decoration:none;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:var(--track-menu);text-transform:uppercase;
  transition:opacity .2s ease-out;
}
.nav-menu a + a{border-top:1px solid rgba(128,128,128,.18)}
.js .nav-menu a{opacity:0;transform:translateY(-4px);transition:opacity .28s var(--ease-settle),transform .28s var(--ease-settle)}
.js .nav.menu-open .nav-menu a{opacity:1;transform:none}
.js .nav.menu-open .nav-menu a:nth-child(2){transition-delay:.03s}
.js .nav.menu-open .nav-menu a:nth-child(3){transition-delay:.06s}
.js .nav.menu-open .nav-menu a:nth-child(4){transition-delay:.09s}
.js .nav.menu-open .nav-menu a:nth-child(5){transition-delay:.12s}
.nav-menu a:hover{opacity:.6}
.js .nav.menu-open .nav-menu a:hover{opacity:.6}

/* ============================================================
   FOOTER  (homepage lines 941–998)
   Extended below with .footer-links--site, the six-subpage link
   row variant (dossier §5.2.3). .footer-nav / .footer-trust from
   the OLD site are intentionally not ported.
   ============================================================ */
.footer{position:relative;background:var(--surface-dark);color:var(--text-primary-dark);overflow:hidden}
.footer::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:96px 96px;opacity:.04;
}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:clamp(90px,14vh,140px);background:linear-gradient(180deg,var(--surface-light-2) 0%,rgba(241,239,235,0) 100%);z-index:2;pointer-events:none}
.footer-collage{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:8px;padding:8px;
  opacity:.30;
}
.footer-collage div{
  border-radius:8px;
  animation:collageBreathe 11s ease-in-out infinite;
}
.footer-collage div:nth-child(3n){animation-delay:-4s;animation-duration:13s}
.footer-collage div:nth-child(3n+1){animation-delay:-8s;animation-duration:15s}
@keyframes collageBreathe{0%,100%{opacity:1}50%{opacity:.55}}
.footer-collage div:nth-child(7n+1){background:linear-gradient(140deg,#3742d8,#0e0f3f)}
.footer-collage div:nth-child(7n+2){background:radial-gradient(80% 80% at 30% 30%,#8b7cf6,#1a1140)}
.footer-collage div:nth-child(7n+3){background:linear-gradient(200deg,#1f2a8f,#0b0b0c)}
.footer-collage div:nth-child(7n+4){background:radial-gradient(70% 70% at 70% 70%,#5a8cff,#101030)}
.footer-collage div:nth-child(7n+5){background:linear-gradient(120deg,#23244f,#0b0b0c)}
.footer-collage div:nth-child(7n+6){background:radial-gradient(90% 90% at 50% 10%,#6e63f0,#14143a)}
.footer-collage div:nth-child(7n){background:linear-gradient(160deg,#171a4a,#0b0b0c)}
.footer-scrim{
  position:absolute;inset:0;
  background:radial-gradient(80% 70% at 50% 55%, rgba(11,11,12,.55) 0%, rgba(11,11,12,.92) 100%);
}
.footer-content{
  position:relative;z-index:2;min-height:62vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:48px;padding:110px var(--gutter) calc(56px + env(safe-area-inset-bottom, 0px));
}
.footer-lockup{display:flex;align-items:center;gap:16px;color:#f4efe7}
.footer-lockup .mark{width:34px;height:34px}
.footer-lockup .word{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,4.5vw,44px);letter-spacing:.10em;
}
.footer-line{
  max-width:520px;margin:-18px 0 -10px;text-align:center;
  font-size:15px;line-height:1.65;color:var(--text-secondary-dark);
}
.footer-links{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;
  font-size:13px;color:var(--text-secondary-dark);
}
.footer-links a{text-decoration:none;transition:opacity .2s ease-out}
.footer-links a:hover{opacity:.6}
.footer-links .privacy-preferences-link{color:inherit}

/* Subpage instance of the homepage footer link contract. */
.footer-links--site{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;
  font-size:13px;color:var(--text-secondary-dark);
}
.footer-links--site a,
.privacy-preferences-link{
  color:inherit;text-decoration:none;transition:opacity .2s ease-out;
}
.privacy-preferences-link{
  appearance:none;border:0;padding:0;background:none;
  font:inherit;cursor:pointer;
}
.footer-links--site a:hover,
.privacy-preferences-link:hover{opacity:.6}
.footer-links--site .sep{color:var(--text-muted-dark);opacity:.6}

@media (max-width:640px){
  .footer-collage{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   SCROLL REVEALS  (progressive enhancement; visible by default)
   homepage lines 995–998. .split-reveal and pinned-scene CSS are
   homepage-only and intentionally excluded.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .45s var(--ease-settle),transform .6s var(--ease-settle)}
.js .reveal.in{opacity:1;transform:none}
.footer-content .footer-line.in{transition-delay:.12s}
.footer-content .footer-links.in,
.footer-content .footer-links--site.in{transition-delay:.24s}

/* ============================================================
   PAGE HEADER — new (dossier §5.2.5): static subpage header,
   eyebrow + H1 + subline. No scroll choreography.
   ============================================================ */
.page-header{
  max-width:820px;margin:0 auto;
  padding:calc(var(--nav-top) + var(--nav-h) + 64px) var(--gutter) 56px;
}
.page-header .eyebrow{color:var(--text-muted-light);margin-bottom:14px;display:block}
.page-header h1{
  font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.08;
  letter-spacing:var(--track-display);
  color:var(--text-primary-light);
}
.page-header .subline{
  margin-top:18px;max-width:640px;
  font-size:17px;line-height:1.6;
  color:var(--text-secondary-light);
}
.nav-light ~ main .page-header,
body.theme-dark .page-header{
  /* dark-surface pages get inverted header text if ever needed */
}

/* ============================================================
   PAGE BAND — new (brand-true uplift #1): the full-bleed dark
   surface that opens narrative subpages (governance, story), so
   subpages open on the homepage's own dark->light->dark rhythm
   instead of a flat light page. Contains the fixed nav's start
   state + a .page-header in dark-surface text tokens.

   The bottom radial is the homepage's own "dawn" idiom, mirrored
   BY VALUE from the Old Way scene's .ow-dawn (index.html): same
   gradient stops, same base opacity, but held permanently static
   here (no scroll-driven brightening — narrative subpages settle,
   they don't scrub).

   .page-band--feather softens the foot of the band into the light
   reading surface below it, using the same directional technique
   as the homepage's .os-wrapper::before seam (a soft color-strip
   over the leading edge of a surface change) — direction and
   colors swapped for a dark->light seam instead of light->dark.
   ============================================================ */
.page-band{position:relative;overflow:hidden;background:var(--surface-dark)}
.page-band::before{ /* the dawn idiom, static: mirrors .ow-dawn's exact
                        gradient stops + base opacity from index.html */
  content:"";position:absolute;left:0;right:0;bottom:0;height:52vh;
  pointer-events:none;z-index:0;
  background:radial-gradient(72% 92% at 50% 100%, rgba(58,63,224,.32) 0%, rgba(58,63,224,0) 72%);
  opacity:.28;
}
.page-band--feather::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(90px,14vh,140px);pointer-events:none;z-index:1;
  background:linear-gradient(180deg, rgba(11,11,12,0) 0%, var(--surface-light) 100%);
}
.page-band > *{position:relative;z-index:2}
.page-band .page-header .eyebrow{color:var(--text-muted-dark)}
.page-band .page-header h1{color:var(--text-primary-dark)}
.page-band .page-header .subline{color:var(--text-secondary-dark)}

/* ============================================================
   VEIL-IN — signature one-shot header accent (owner-approved).
   Content resolves through a brief grain/mosaic veil on load,
   plays once, then the element is perfectly still. CSS-only.
   No exit animation. Killed by prefers-reduced-motion.
   ============================================================ */
.veil-in{position:relative;overflow:clip}
.veil-in::before{
  content:"";position:absolute;inset:-8% -4%;z-index:5;pointer-events:none;
  background-image:var(--grain);background-size:64px 64px;
  animation:veilResolve .9s var(--ease-settle) both;
}
@keyframes veilResolve{
  0%{opacity:.9;filter:contrast(2.4) brightness(1.3)}
  40%{opacity:.5;filter:contrast(1.6) brightness(1.1)}
  100%{opacity:0;filter:contrast(1) brightness(1)}
}
.veil-in::before{animation-play-state:running}

/* ============================================================
   GRAIN SURFACE UTILITY — surface continuity with homepage
   ============================================================ */
.grain-surface{position:relative}
.grain-surface::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:96px 96px;opacity:.04;
}

/* ============================================================
   LEGAL SHELL — new (dossier §5.2.5 / §4): class structure
   ported from the old site's legal pages (terms/privacy/dpa/
   security inline <style>), re-tokened onto the new system.
   Light surface, --font-body, --text-*-light, --border-subtle-light.
   ============================================================ */
.legal-shell{
  max-width:min(780px,90vw);
  margin:0 auto;
  padding:calc(var(--nav-top) + var(--nav-h) + 64px) 24px 80px;
}
.legal-title{
  margin:0 0 .5rem;
  color:var(--text-primary-light);
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.1;
  letter-spacing:var(--track-display);
}
.legal-updated{
  display:block;
  margin-bottom:2.8rem;
  color:var(--text-muted-light);
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.legal-section{margin-bottom:2.4rem}
.legal-section h2{
  margin:0 0 .8rem;
  color:var(--text-primary-light);
  font-family:var(--font-display);
  font-size:1.28rem;
  line-height:1.2;
  letter-spacing:-.02em;
}
.legal-section h3{
  margin:1.4rem 0 .6rem;
  color:var(--text-primary-light);
  font-family:var(--font-display);
  font-size:1.04rem;
  line-height:1.3;
}
.legal-section p,
.legal-section li{
  color:var(--text-secondary-light);
  font-family:var(--font-body);
  font-size:.92rem;
  line-height:1.62;
}
.legal-section ul,
.legal-section ol{
  margin:.6rem 0 1rem;
  padding-left:1.6rem;
}
.legal-section li{margin-bottom:.4rem}
.legal-section a{
  color:var(--accent-primary);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color 180ms ease;
}
.legal-section a:hover{color:var(--text-primary-light)}
.legal-divider{
  margin:3rem 0;
  border:none;
  border-top:1px solid var(--border-subtle-light);
}
.legal-contact{
  margin-top:2rem;
  padding:1.4rem 1.6rem;
  border:1px solid var(--border-subtle-light);
  border-radius:12px;
  background:var(--surface-light-2);
}
.legal-contact p{
  margin:0;
  color:var(--text-secondary-light);
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.02em;
}
.legal-contact a,
body .sty-hero-cta a,
body .sty-cta a,
body .sty-close a,
body .gov-cta-line a{
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}

/* ============================================================
   PRIVACY CONSENT
   ============================================================ */
.privacy-banner{
  position:fixed;z-index:180;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));
  width:min(720px,calc(100vw - 32px));transform:translateX(-50%);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:center;
  padding:20px 22px;border:1px solid rgba(255,255,255,.16);border-radius:6px;
  background:rgba(11,11,12,.96);color:var(--text-primary-dark);
  box-shadow:0 18px 54px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.privacy-banner[hidden]{display:none}
.privacy-banner__copy h2{
  margin:0 0 4px;font-size:16px;line-height:1.3;color:var(--text-primary-dark);
}
.privacy-banner__copy p{
  margin:0;max-width:500px;font-size:13px;line-height:1.55;color:var(--text-secondary-dark);
}
.privacy-banner__copy a{color:inherit;text-underline-offset:.18em}
.privacy-banner__actions,
.privacy-dialog__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.privacy-button{
  appearance:none;min-height:40px;padding:9px 14px;border:1px solid rgba(255,255,255,.24);
  border-radius:6px;background:transparent;color:var(--text-primary-dark);
  font:600 13px/1.2 var(--font-body);cursor:pointer;
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
.privacy-button:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.42)}
.privacy-button--primary{background:var(--text-primary-dark);border-color:var(--text-primary-dark);color:var(--surface-dark)}
.privacy-button--primary:hover{background:#fff;border-color:#fff}
.privacy-dialog{
  width:min(560px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 32px));
  padding:0;border:1px solid var(--border-subtle-light);border-radius:6px;
  background:var(--surface-light);color:var(--text-primary-light);
  box-shadow:0 24px 72px rgba(0,0,0,.30);
}
.privacy-dialog::backdrop{background:rgba(11,11,12,.72);backdrop-filter:blur(4px)}
.privacy-dialog__form{margin:0;padding:28px}
.privacy-dialog__header{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.privacy-dialog__header h2{font-size:clamp(24px,5vw,32px);line-height:1.15;color:var(--text-primary-light)}
.privacy-dialog__close{
  position:relative;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--border-subtle-light);
  border-radius:4px;background:transparent;color:var(--text-primary-light);cursor:pointer;
}
.privacy-dialog__close::before,
.privacy-dialog__close::after{
  content:"";position:absolute;left:11px;top:19px;width:18px;height:1px;background:currentColor;
}
.privacy-dialog__close::before{transform:rotate(45deg)}
.privacy-dialog__close::after{transform:rotate(-45deg)}
.privacy-dialog__intro{margin:14px 0 24px;color:var(--text-secondary-light);font-size:14px;line-height:1.6}
.privacy-dialog__intro a{color:inherit;text-underline-offset:.18em}
.privacy-option{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;
  padding:18px 0;border-top:1px solid var(--border-subtle-light);
}
.privacy-option:last-of-type{border-bottom:1px solid var(--border-subtle-light)}
.privacy-option h3{margin:0 0 4px;font-size:16px;line-height:1.3;color:var(--text-primary-light)}
.privacy-option p{margin:0;color:var(--text-secondary-light);font-size:13px;line-height:1.55}
.privacy-option__required{font-size:12px;font-weight:600;color:var(--text-muted-light);text-transform:uppercase;letter-spacing:.08em}
.privacy-option input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent-primary);cursor:pointer}
.privacy-dialog__actions{justify-content:flex-end;margin-top:24px}
.privacy-dialog .privacy-button{border-color:var(--border-subtle-light);color:var(--text-primary-light)}
.privacy-dialog .privacy-button:hover{background:var(--surface-light-2);border-color:rgba(18,18,20,.32)}
.privacy-dialog .privacy-button--primary{background:var(--text-primary-light);border-color:var(--text-primary-light);color:var(--text-primary-dark)}
.privacy-dialog .privacy-button--primary:hover{background:#000;border-color:#000}
@media (max-width:640px){
  .privacy-banner{grid-template-columns:1fr;padding:18px}
  .privacy-banner__actions{justify-content:flex-start}
  .privacy-dialog__form{padding:22px 20px}
  .privacy-dialog__actions{justify-content:flex-start}
}

/* ============================================================
   STAT GRID — new (dossier §5.2.5): Governance stat modules.
   Shape referenced from the old capabilities.css stat-tile grid
   (4 → 2 → 1 responsive columns); values/visual language are new,
   built on this system's tokens.
   ============================================================ */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  max-width:880px;
  margin:0 auto;
}
.stat{
  padding:24px 22px;
  border:1px solid var(--border-subtle-light);
  border-radius:14px;
  background:#fff;
  /* finish mirrors the homepage's .company-card exactly: 1px
     border-subtle-light, 14px radius, #fff surface, no shadow
     (the homepage card carries none either — none invented here). */
}
.stat .stat-value{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:var(--track-display);
  color:var(--accent-primary);
  /* system-blue color law: the quantified figure is what the system
     delivers — same accent-primary token as the homepage's orb core. */
}
.stat .stat-label{
  margin-top:8px;
  font-size:12px;font-weight:600;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-muted-light);
}
.stat .stat-cite{
  margin-top:12px;
  font-size:12px;line-height:1.5;
  color:var(--text-secondary-light);
}
.stat .stat-cite a{color:var(--accent-primary);text-decoration:none}
.stat .stat-cite a:hover{text-decoration:underline}

/* Section kickers share the system-blue accent at reduced opacity. */
.section-kicker{color:var(--accent-primary);opacity:.82}

/* certification-outcome color law: CERTIFY / CERTIFY WITH LIMITATIONS
   are the system delivering — accent-primary. REJECT/ESCALATE stay ink
   (withheld delivery is not an error color; no new hues introduced). */
.cert-pass{color:var(--accent-primary);font-weight:600}

@media (max-width:768px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr}
}

/* ============================================================
   FRAMEWORK TABLE — new (dossier §5.2.5): Governance tables.
   Always wrap the table in a container with this class so wide
   tables scroll horizontally inside themselves, never the body.
   ============================================================ */
.framework-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border-subtle-light);
  border-radius:10px;
  max-width:100%;
}
.framework-table table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-family:var(--font-body);
  font-size:.92rem;
}
.framework-table caption{
  caption-side:top;text-align:left;
  padding:14px 18px 0;
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-muted-light);
}
.framework-table th,
.framework-table td{
  padding:12px 18px;
  text-align:left;
  border-bottom:1px solid var(--border-subtle-light);
  color:var(--text-secondary-light);
  vertical-align:top;
}
.framework-table thead th{
  font-family:var(--font-display);font-weight:600;
  font-size:12px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-primary-light);
  background:var(--surface-light-2);
  border-bottom-width:2px; /* heavier hairline separates the tracked-caps
                              header row from the reference body beneath it */
}
.framework-table tbody tr:last-child td{border-bottom:none}

/* ============================================================
   REF FIGURE — new (brand-true uplift #4): generic layout for a
   small static hairline instrument beside a reference table.
   Reusable by story.html. Desktop: figure left column, table
   right. Mobile: stacked. The figure itself carries no text/
   numbers — the adjacent table/prose is the content; the SVG is
   aria-hidden.
   ============================================================ */
.ref-figure-row{
  display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);align-items:center;
  max-width:880px;margin:0 auto 28px;
}
.ref-figure{width:100%;max-width:300px;margin:0 auto}
.ref-figure svg{display:block;width:100%;height:auto}
/* vector-effect does not inherit from <g> — apply to the stroked elements */
.ref-figure svg rect,.ref-figure svg line{vector-effect:non-scaling-stroke}
@media (max-width:760px){
  .ref-figure-row{grid-template-columns:1fr}
  .ref-figure{max-width:220px;margin:0 auto 8px}
}

/* ============================================================
   CASCADE — new (brand-true uplift #5): when a .reveal.cascade
   gains .in, its direct children stagger in on top of the
   section's own reveal. CSS-only, capped at 8 children, total
   stagger budget .42s (well under the .5s cap) so the whole
   cascade still reads as one settle, not a slow trickle.
   ============================================================ */
.js .reveal.cascade > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .4s var(--ease-settle), transform .5s var(--ease-settle);
}
.js .reveal.cascade.in > *{opacity:1;transform:none}
.reveal.cascade > *:nth-child(1){transition-delay:0s}
.reveal.cascade > *:nth-child(2){transition-delay:.06s}
.reveal.cascade > *:nth-child(3){transition-delay:.12s}
.reveal.cascade > *:nth-child(4){transition-delay:.18s}
.reveal.cascade > *:nth-child(5){transition-delay:.24s}
.reveal.cascade > *:nth-child(6){transition-delay:.30s}
.reveal.cascade > *:nth-child(7){transition-delay:.36s}
.reveal.cascade > *:nth-child(8){transition-delay:.42s}

/* ============================================================
   STAT LEDGER — new (governance v3): full-width hairline-ruled
   row recast of .stat-grid's tiles (.stat-grid itself is UNCHANGED
   and stays available for preview/story use). Built on the SAME
   .reveal.cascade mechanic above: the ledger carries
   class="reveal cascade" and its .stat-row children get the
   cascade's own opacity/translateY stagger for free. The only new
   behavior here is the hairline draw, which borrows its row's own
   computed transition-delay via `transition-delay:inherit` so the
   rule and the row content settle on the same beat.
   ============================================================ */
.stat-ledger{max-width:880px;margin:0 auto;display:flex;flex-direction:column}
.stat-row{
  position:relative;
  display:grid;grid-template-columns:minmax(110px,220px) 1fr minmax(160px,260px);
  align-items:baseline;column-gap:28px;row-gap:6px;
  padding:22px 0;
}
.stat-row-rule{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--border-subtle-light);transform-origin:left center;
}
.js .stat-row-rule{transform:scaleX(0);transition:transform .5s var(--ease-settle);transition-delay:inherit}
.js .reveal.cascade.in .stat-row-rule{transform:scaleX(1)}
.stat-row-value{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,4vw,52px);line-height:1;
  letter-spacing:var(--track-display);color:var(--accent-primary);
}
.stat-row-label{
  font-size:15px;line-height:1.5;color:var(--text-secondary-light);
  text-transform:uppercase; /* rendered-text parity with .stat-grid's .stat-label
    (VISIBLE TEXT FROZEN — text-transform changes what innerText reports, so
    it must match the tile it replaces byte-for-byte in rendered form) */
}
.stat-row-cite{
  font-size:11.5px;line-height:1.5;letter-spacing:.02em;
  color:var(--text-muted-light);text-align:right;
}
.stat-row-cite a{color:var(--accent-primary);text-decoration:none}
.stat-row-cite a:hover{text-decoration:underline}
@media (max-width:700px){
  .stat-row{grid-template-columns:1fr;row-gap:8px;padding:20px 0}
  .stat-row-cite{text-align:left}
}

/* ============================================================
   RULED TABLE — new (governance v3): restyles a semantic <table>
   with no cell borders/boxes — hairline row rules only, a heavier
   header hairline, tracked-caps label column. Rows ink in
   staggered (opacity only — no transform, so table layout is
   never disturbed) when the wrapper's own .reveal gains .in.
   Table markup/semantics unchanged (.framework-table stays
   available, byte-for-byte, for preview/story use).
   ============================================================ */
.ruled-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ruled-table table{
  width:100%;min-width:640px;border-collapse:collapse;
  font-family:var(--font-body);font-size:.94rem;
}
.ruled-table caption{
  caption-side:top;text-align:left;padding:0 0 16px;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-muted-light);
}
.ruled-table th,
.ruled-table td{
  padding:16px 20px 16px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border-subtle-light);
  color:var(--text-secondary-light);
}
.ruled-table th:first-child,
.ruled-table td:first-child{
  font-family:var(--font-display);font-weight:600;
  font-size:13px;letter-spacing:.02em;
  color:var(--text-primary-light);width:1%;white-space:nowrap;
}
.ruled-table th:first-child{
  /* header cell only: matches every other <th>'s tracked-caps treatment.
     td:first-child stays mixed-case — VISIBLE TEXT FROZEN, text-transform
     changes what innerText reports, and the body-row labels ("Decision
     Logs", "Risk Management (Art. 9)"...) must render exactly as authored. */
  font-size:12px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
}
.ruled-table thead th{
  font-family:var(--font-display);font-weight:600;
  font-size:12px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-primary-light);
  border-bottom:2px solid var(--border-subtle-light); /* heavier hairline: tracked-caps header vs. reference body */
}
.ruled-table thead th:first-child{color:var(--text-primary-light)}
.ruled-table tbody tr:last-child td{border-bottom:none}
.js .ruled-table tbody tr{opacity:0;transition:opacity .5s var(--ease-settle)}
.js .ruled-table.in tbody tr{opacity:1}
.ruled-table tbody tr:nth-child(1){transition-delay:.06s}
.ruled-table tbody tr:nth-child(2){transition-delay:.14s}
.ruled-table tbody tr:nth-child(3){transition-delay:.22s}
.ruled-table tbody tr:nth-child(4){transition-delay:.30s}
.ruled-table tbody tr:nth-child(5){transition-delay:.38s}
.ruled-table tbody tr:nth-child(6){transition-delay:.46s}
@media (max-width:640px){
  .ruled-table td,.ruled-table th{padding:14px 14px 14px 0}
}

/* ============================================================
   BOARD — new (governance v3): the run-board grammar applied to
   the certification thresholds. Threshold label (tracked caps) ·
   hairline rule · outcome state landing after. One-shot, staggered
   ~.12s per row, opacity-only (no transform on table parts).
   CERTIFY states keep system-blue (.cert-pass, unchanged);
   REJECT states stay ink — no new hues.
   ============================================================ */
.board{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.board table{
  width:100%;min-width:520px;border-collapse:collapse;
  font-family:var(--font-body);font-size:.96rem;
}
.board caption{
  caption-side:top;text-align:left;padding:0 0 16px;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-muted-light);
}
.board th,.board td{
  padding:18px 20px 18px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border-subtle-light);
  color:var(--text-secondary-light);
}
.board th:first-child,.board td:first-child{
  font-family:var(--font-display);font-weight:600;
  font-size:12px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-primary-light);width:1%;white-space:nowrap;
}
.board thead th{
  font-family:var(--font-display);font-weight:600;
  font-size:12px;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-primary-light);
  border-bottom:2px solid var(--border-subtle-light);
}
.board tbody tr:last-child td{border-bottom:none}
.js .board tbody tr{opacity:0;transition:opacity .4s var(--ease-settle)}
.js .board.in tbody tr{opacity:1}
.js .board tbody tr td:last-child{opacity:0;transition:opacity .35s var(--ease-settle)}
.js .board.in tbody tr td:last-child{opacity:1}
.board tbody tr:nth-child(1){transition-delay:.05s}
.board tbody tr:nth-child(1) td:last-child{transition-delay:.17s}
.board tbody tr:nth-child(2){transition-delay:.17s}
.board tbody tr:nth-child(2) td:last-child{transition-delay:.29s}
.board tbody tr:nth-child(3){transition-delay:.29s}
.board tbody tr:nth-child(3) td:last-child{transition-delay:.41s}
.board tbody tr:nth-child(4){transition-delay:.41s}
.board tbody tr:nth-child(4) td:last-child{transition-delay:.53s}
@media (max-width:640px){
  .board td,.board th{padding:16px 14px 16px 0}
}

/* ============================================================
   GOVERNANCE HERO SCENE — new (governance v3): the page's one
   pinned scrub scene, engineered as a page-scoped replica of the
   homepage's Old Way scene (index.html: .oldway-wrap/.oldway,
   damped rAF channel, seg/easeOut/scrubIn/setPathDraw helpers,
   an *_REST hold pattern, .dynamic toggle + cleanup). Static
   default (no .dynamic): every element sits at its FINISHED
   state — identity-at-completion, markup ships the final scene.
   .dynamic (JS decides: !reduced-motion && >900px) is the ONLY
   state that hides pre-scrub elements, with transition:none so
   the per-frame inline styles the scene writes are never fighting
   a CSS transition — same idiom as .oldway-wrap.dynamic.
   ============================================================ */
.gov-hero-wrap{position:relative;background:var(--surface-dark)}
.gov-hero{position:relative;overflow:hidden;color:var(--text-primary-dark);padding:clamp(96px,14vh,170px) var(--gutter)}
/* GOV-07: homepage grain tile — every large dark/blue field in the
   system (.hero-stage::before, .shift::after, .footer::after) carries
   this exact static layer to break gradient banding; the hero band's
   dawn radial was the only one missing it. Static, zero per-frame cost. */
.gov-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:96px 96px;opacity:.05;
}
.gov-hero-inner{
  /* GOV-R3: brought onto the page's one spine (880px, matching GOV-05's
     unified rail for every other scene) — the hero previously rode the
     homepage's 1180px rail alone, producing a 150px reader-edge jump at
     the hero->ledger seam. Every left edge on the page now sits at
     (vw-880)/2, hero included. */
  position:relative;z-index:2;max-width:880px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,36%);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.gov-hero-text{max-width:640px}
.gov-hero-eyebrow{color:var(--text-muted-dark);margin:0 0 20px;display:block}
.gov-hero-title{
  /* GOV-R3: cap stepped one notch down (56px->48px) so "Infrastructure
     proves" breaks cleanly on the narrower ~500px column produced by the
     880px rail; the .ght-w word spans already wrap per word. */
  font-size:clamp(28px,4.2vw,48px);line-height:1.14;
  letter-spacing:var(--track-display);color:var(--text-primary-dark);margin:0;
}
.ght-w{display:inline-block}
.gov-hero-subline{
  margin-top:clamp(20px,3vh,28px);max-width:520px;
  font-size:17px;line-height:1.6;color:var(--text-secondary-dark);
}
.gov-hero-figure{position:relative;width:100%;max-width:clamp(280px,24vw,340px);margin:0 auto} /* GOV-R3: scaled down with the narrower 880px rail's figure column */
.gov-hero-figure svg{display:block;width:100%;height:auto}
/* vector-effect does not inherit from <g> — applied to the stroked elements.
   .ghi-thread is deliberately excluded: it is the one dash-drawn stroke
   (dashoffset animated to its real getTotalLength()), and non-scaling-stroke
   on a dash-animated line does not compute the dash pattern in the same
   coordinate space here — it must stay a plain scaling stroke. */
.gov-hero-figure svg rect,.gov-hero-figure svg .ghi-cline,.gov-hero-figure svg .ghi-pline{vector-effect:non-scaling-stroke}
.ghi-plate{stroke:rgba(255,255,255,.48);stroke-width:1;fill:none;transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
/* GOV-R4: the plates' two interior content hairlines — the ow-sat idiom
   (index.html:1557-1560, every satellite document carries two content
   lines), furnishing each plate as a document instead of an empty
   outline. Same transform-box/origin idiom as the sibling .ghi-cline
   hairlines below, so scrubIn's translateY reads identically. */
.ghi-pline{stroke:rgba(255,255,255,.32);stroke-width:1;transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.ghi-thread{stroke:rgba(255,255,255,.42);stroke-width:1}
.ghi-record{stroke:rgba(255,255,255,.66);stroke-width:1;fill:rgba(90,99,255,.08);transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.ghi-cline{stroke:var(--accent-primary);stroke-width:1.5;transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.gov-dawn{ /* the same dawn idiom, static base — mirrors .ow-dawn/.page-band::before by value */
  position:absolute;left:0;right:0;bottom:0;height:52vh;pointer-events:none;
  background:radial-gradient(72% 92% at 50% 100%, rgba(58,63,224,.32), rgba(58,63,224,0) 72%);
  opacity:.28;
}
@media (max-width:900px){
  .gov-hero-inner{grid-template-columns:1fr;min-height:280px;overflow:hidden}
  .gov-hero-text{position:relative;z-index:2}
  .gov-hero-figure{
    display:block;position:absolute;right:calc(-1 * var(--gutter));bottom:-44px;
    width:clamp(170px,58vw,260px);opacity:.32;pointer-events:none;
  }
}
/* pinned scrub scene (wide + motion + js): the stage pins and the
   scene writes itself under scroll control */
.js .gov-hero-wrap.dynamic .gov-hero{
  position:sticky;top:0;z-index:4;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  padding-top:calc(var(--nav-top) + var(--nav-h) + 28px);padding-bottom:40px;
}
.js .gov-hero-wrap.dynamic .gov-hero-inner{width:100%}
.js .gov-hero-wrap.dynamic .gov-hero-eyebrow,
.js .gov-hero-wrap.dynamic .ght-w,
.js .gov-hero-wrap.dynamic .gov-hero-subline{opacity:0;will-change:opacity,transform;transition:none}
.js .gov-hero-wrap.dynamic .ghi-plate,
.js .gov-hero-wrap.dynamic .ghi-record,
.js .gov-hero-wrap.dynamic .ghi-cline,
.js .gov-hero-wrap.dynamic .ghi-pline{opacity:0;transition:none}
/* dasharray/dashoffset for .ghi-thread are set entirely by the page
   script (real getTotalLength() units — see the closing <script>'s
   setPathDraw comment); no CSS default needed since layout() runs
   synchronously before first paint, same as the homepage's own
   JS-only docLines/osFigure dasharray setup. */
.js .gov-hero-wrap.dynamic .ghi-thread{will-change:stroke-dashoffset;transition:none}
.js .gov-hero-wrap.dynamic .gov-dawn{opacity:0;will-change:opacity}

/* ============================================================
   SUBPAGE BODY SCRUBS — governance/story proof beats
   Desktop only, JS-gated. Static/mobile/reduced-motion markup remains
   ordinary flow and fully readable. The stage pauses briefly under native
   scroll while rows resolve from a pixel-grid veil into typed proof copy.
   ============================================================ */
.scroll-stage{
  position:relative;
  --scrub-pix:0;
}
.scroll-stage::before{
  content:"";position:absolute;inset:-18px;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg, rgba(25,27,143,.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(25,27,143,.12) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:0;transform:scale(1.01);
}
.scroll-stage > *{position:relative;z-index:1}
.js .scroll-scrub.dynamic-scrub{
  max-width:none;
  padding:0;
}
.js .scroll-scrub.dynamic-scrub .scroll-stage{
  position:sticky;top:0;min-height:100vh;min-height:100svh;width:100%;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  padding-top:calc(var(--nav-top) + var(--nav-h) + 28px);
  padding-bottom:44px;
}
.js .gov-proof.scroll-scrub.dynamic-scrub .scroll-stage,
.js .sty-proof.scroll-scrub.dynamic-scrub .scroll-stage,
.js .sty-belief.scroll-scrub.dynamic-scrub .scroll-stage{
  max-width:calc(880px + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
}
.js .gov-dark-band.scroll-scrub.dynamic-scrub .scroll-stage{
  max-width:calc(880px + 2*var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
}
.js .scroll-scrub.dynamic-scrub .scroll-stage::before{
  opacity:calc(var(--scrub-pix) * .16);
  transform:scale(calc(1 + var(--scrub-pix) * .018));
}
.js .scroll-scrub.dynamic-scrub .reveal,
.js .scroll-scrub.dynamic-scrub .reveal.cascade > *{
  transition:none;
}
.js .scroll-scrub.dynamic-scrub .gov-proof-rail,
.js .scroll-scrub.dynamic-scrub .sty-proof-rail{
  opacity:1;transform:none;
}
.js .scroll-scrub.dynamic-scrub .gov-proof-row,
.js .scroll-scrub.dynamic-scrub .sty-proof-row{
  position:relative;border-top-color:transparent;border-bottom-color:transparent;
}
.js .scroll-scrub.dynamic-scrub .gov-proof-row::before,
.js .scroll-scrub.dynamic-scrub .sty-proof-row::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--border-subtle-light);transform:scaleX(var(--row-rule,0));
  transform-origin:left center;
}
.js .scroll-scrub.dynamic-scrub .gov-proof-row:last-child::after,
.js .scroll-scrub.dynamic-scrub .sty-proof-row:last-child::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--border-subtle-light);transform:scaleX(var(--row-rule,0));
  transform-origin:left center;
}
.js .scroll-scrub.dynamic-scrub .gov-proof-row strong,
.js .scroll-scrub.dynamic-scrub .gov-proof-row span,
.js .scroll-scrub.dynamic-scrub .sty-proof-row strong,
.js .scroll-scrub.dynamic-scrub .sty-proof-row span,
.js .scroll-scrub.dynamic-scrub .gov-cert-strip span{
  will-change:opacity,transform,filter,clip-path;
}
.js .scroll-scrub.dynamic-scrub .gov-cert-strip span{
  opacity:0;transform:translateY(10px);filter:blur(5px);
}
.gov-mosaic{
  --trace-cut:100%;
  --trace-opacity:0;
  --scan-x:-22%;
  --scan-opacity:0;
  position:relative;isolation:isolate;overflow:visible;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:clamp(76px,9.2vh,106px);grid-auto-flow:dense;
  gap:clamp(10px,1.2vw,14px);max-width:880px;margin-top:clamp(42px,7vh,78px);
  padding:clamp(8px,1vw,12px);
  border-radius:10px;
  background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(25,27,143,.04));
}
.gov-mosaic::before{
  content:"";position:absolute;inset:clamp(16px,1.6vw,22px);z-index:0;pointer-events:none;
  opacity:var(--trace-opacity);clip-path:inset(0 var(--trace-cut) 0 0);
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(25,27,143,.24) 4% 64%, transparent 64% 100%) 0 18%/100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 20%, rgba(25,27,143,.18) 20% 96%, transparent 96% 100%) 0 52%/100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(25,27,143,.16) 7% 88%, transparent 88% 100%) 0 82%/100% 1px no-repeat,
    linear-gradient(180deg, transparent 0 6%, rgba(25,27,143,.14) 6% 84%, transparent 84% 100%) 50% 0/1px 100% no-repeat;
}
.gov-mosaic::after{
  content:"";position:absolute;top:-7%;bottom:-7%;left:0;width:28%;z-index:0;pointer-events:none;
  opacity:var(--scan-opacity);transform:translateX(var(--scan-x));
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.52) 48%, transparent 100%);
  filter:blur(12px);
}
.gov-mosaic-tile{
  --tone-fill:0;
  --tile-wash:0;
  --tile-y:0px;
  --tile-float:0px;
  --tile-scale:1;
  --tile-shadow:.072;
  --tile-scan-x:-36px;
  --proof-line:0;
  --proof-seal:0;
  --tone-rgb:25,27,143;
  position:relative;z-index:1;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  padding:clamp(16px,2vw,24px);
  border:1px solid rgba(255,255,255,.64);border-radius:8px;
  background:
    radial-gradient(110% 90% at 18% 0%, rgba(255,255,255,.90), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(25,27,143,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 18px 46px rgba(10,12,28,var(--tile-shadow));
  backdrop-filter:blur(20px) saturate(1.12);-webkit-backdrop-filter:blur(20px) saturate(1.12);
  transform:translate3d(0, calc(var(--tile-y) + var(--tile-float)), 0) scale(var(--tile-scale));
}
.gov-mosaic-tile--proof{grid-column:span 3;grid-row:span 2}
.gov-mosaic-tile--medium{grid-column:span 2;grid-row:span 2}
.gov-mosaic-tile--wide{grid-column:span 2}
.gov-mosaic-tile--tall{grid-row:span 2}
.gov-mosaic-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.48) 46%, transparent 72%),
    linear-gradient(116deg, transparent 0 25%, rgba(255,255,255,.48) 38%, transparent 54% 100%),
    linear-gradient(90deg, rgba(25,27,143,.085) 1px, transparent 1px),
    linear-gradient(0deg, rgba(25,27,143,.06) 1px, transparent 1px);
  background-size:42% 100%,auto,32px 32px,32px 32px;
  opacity:calc(.18 + var(--tile-wash) * .12);
  transform:translateX(calc(var(--scrub-pix) * 14px - 10px + var(--tile-scan-x)));
}
.gov-mosaic-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(180deg, rgba(var(--tone-rgb), calc(var(--tone-fill) * .13)), rgba(var(--tone-rgb), calc(var(--tone-fill) * .035))),
    radial-gradient(90% 90% at 20% 0%, rgba(255,255,255,calc(var(--tile-wash) * .36)), rgba(255,255,255,0) 58%);
}
.gov-mosaic-tile[data-tone="blue"]{--tone-rgb:25,27,143}
.gov-mosaic-tile[data-tone="ink"]{--tone-rgb:17,20,40}
.gov-mosaic-tile[data-tone="mist"]{--tone-rgb:90,99,255}
.gov-mosaic-tile[data-tone="glass"]{--tone-rgb:255,255,255}
.gov-mosaic-tile--blank{opacity:.86}
.gov-mosaic-tile--blank::before{opacity:.18}
.gov-mosaic-tile--blank::after{
  background:
    linear-gradient(180deg, rgba(var(--tone-rgb), calc(var(--tone-fill) * .18)), rgba(var(--tone-rgb), calc(var(--tone-fill) * .05))),
    linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,0) 42% 100%);
}
.gov-mosaic-tile strong,
.gov-mosaic-tile span,
.gov-mosaic-tile i{position:relative;z-index:1}
.gov-mosaic-tile strong{
  font-family:var(--font-display);font-size:clamp(22px,3vw,36px);line-height:1.04;
  letter-spacing:var(--track-display);color:var(--text-primary-light);
}
.gov-mosaic-tile span{max-width:310px;color:var(--text-secondary-light);font-size:15px;line-height:1.48}
.gov-mosaic-tile i{
  position:relative;align-self:flex-start;font-style:normal;color:var(--accent-primary);
  font-size:11px;text-transform:uppercase;letter-spacing:.15em;
  padding-top:11px;
}
.gov-mosaic-tile i::before{
  content:"";position:absolute;left:0;top:0;width:min(118px,100%);height:1px;
  background:rgba(25,27,143,.30);transform:scaleX(var(--proof-line));transform-origin:left center;
}
.gov-mosaic-tile i::after{
  content:"";display:inline-block;width:8px;height:8px;margin-left:10px;vertical-align:.02em;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  opacity:var(--proof-seal);transform:rotate(45deg) scale(var(--proof-seal));
}
.js .scroll-scrub.dynamic-scrub .gov-mosaic{opacity:1;transform:none;transition:none}
.js .scroll-scrub.dynamic-scrub .gov-mosaic-tile{will-change:opacity,transform,filter}
.js .scroll-scrub--tiles.dynamic-scrub .gov-mosaic-tile strong,
.js .scroll-scrub--tiles.dynamic-scrub .gov-mosaic-tile span,
.js .scroll-scrub--tiles.dynamic-scrub .gov-mosaic-tile i{opacity:0;will-change:opacity,transform,filter,clip-path}
@media (max-width:700px){
  .gov-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:86px}
  .gov-mosaic-tile{padding:16px;gap:12px}
  .gov-mosaic-tile--proof,
  .gov-mosaic-tile--medium{grid-column:1 / -1;grid-row:span 2}
  .gov-mosaic-tile--wide{grid-column:span 2}
  .gov-mosaic-tile strong{font-size:22px}
  .gov-mosaic-tile span{font-size:13px;line-height:1.45}
  .gov-mosaic-tile i{font-size:10px}
}
@media (prefers-reduced-motion: reduce){
  .scroll-stage::before{display:none}
  .js .scroll-scrub.dynamic-scrub{height:auto !important;max-width:inherit;padding:inherit}
  .js .scroll-scrub.dynamic-scrub .scroll-stage{position:relative;min-height:0;display:block;padding:inherit;overflow:visible}
}

/* ============================================================
   GOVERNANCE LEDGER SCENE — new (governance v4): the page's
   second pinned scrub scene, a LIGHT-stage sibling of the header
   scene above (same wrapper/sticky/damped-rAF-channel engineering,
   REST hold, .dynamic toggle + cleanup — see the closing <script>).
   Static default (no .dynamic): the kicker/heading and every
   .stat-row sit at rest — identity-at-completion; .stat-ledger
   keeps its existing bare .reveal.cascade fallback for <=900px /
   reduced-motion / no-JS (unchanged — preview.html's bare
   .stat-ledger demo is untouched, this block only ever matches
   inside .gov-ledger-wrap).
   ============================================================ */
.gov-ledger-wrap{position:relative;background:var(--surface-light)}
.gov-ledger{position:relative;padding:clamp(96px,14vh,170px) var(--gutter)}
.gov-ledger-inner{position:relative;max-width:880px;margin:0 auto;width:100%}
.gov-ledger-inner h2{
  font-size:clamp(28px,4.2vw,44px);line-height:1.16;
  letter-spacing:var(--track-display);color:var(--text-primary-light);
  margin:0 0 32px;max-width:720px;
}
.js .gov-ledger-wrap.dynamic .gov-ledger{
  position:sticky;top:0;z-index:3;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  padding-top:calc(var(--nav-top) + var(--nav-h) + 28px);padding-bottom:40px;
}
.js .gov-ledger-wrap.dynamic .gov-ledger-inner{width:100%}
.js .gov-ledger-wrap.dynamic .gov-ledger-inner > .eyebrow,
.js .gov-ledger-wrap.dynamic .gov-ledger-inner > h2{opacity:0;will-change:opacity,transform;transition:none}
.js .gov-ledger-wrap.dynamic .stat-row-rule{transform:scaleX(0);will-change:transform;transition:none}
.js .gov-ledger-wrap.dynamic .stat-row-value,
.js .gov-ledger-wrap.dynamic .stat-row-label,
.js .gov-ledger-wrap.dynamic .stat-row-cite{opacity:0;will-change:opacity,transform;transition:none}
/* the pinned stage is overflow-clipped at exactly 100vh, and seven rows
   plus a heading do not fit a common ~900px-tall laptop viewport at the
   normal-flow reading rhythm those components use elsewhere on the page
   — so the PINNED CONTEXT gets its own compact rhythm by default (not
   only as a short-viewport fallback): tighter row padding + a smaller
   heading/value scale, verified to fit at 1440x900. */
.js .gov-ledger-wrap.dynamic .gov-ledger{
  padding-top:calc(var(--nav-top) + var(--nav-h) + 16px);padding-bottom:24px;
}
.js .gov-ledger-wrap.dynamic .gov-ledger-inner > .eyebrow{margin-bottom:8px}
.js .gov-ledger-wrap.dynamic .gov-ledger-inner h2{margin-bottom:16px;font-size:clamp(22px,3.4vw,34px)}
.js .gov-ledger-wrap.dynamic .stat-row{
  padding:11px 0;
  grid-template-columns:minmax(84px,140px) 1fr minmax(120px,180px);column-gap:18px;
}
.js .gov-ledger-wrap.dynamic .stat-row-value{font-size:clamp(22px,2.6vw,34px)}
.js .gov-ledger-wrap.dynamic .stat-row-label{font-size:13px;line-height:1.42}
.js .gov-ledger-wrap.dynamic .stat-row-cite{font-size:10.5px;line-height:1.4}
/* even shorter viewports: compact further */
@media (min-width:901px) and (max-height:760px){
  .js .gov-ledger-wrap.dynamic .gov-ledger{
    padding-top:calc(var(--nav-top) + var(--nav-h) + 10px);padding-bottom:14px;
  }
  .js .gov-ledger-wrap.dynamic .gov-ledger-inner h2{margin-bottom:12px;font-size:clamp(20px,3.2vw,28px)}
  .js .gov-ledger-wrap.dynamic .stat-row{padding:9px 0}
  .js .gov-ledger-wrap.dynamic .stat-row-value{font-size:clamp(20px,2.4vw,30px)}
}

/* ============================================================
   RULED TABLE — v4 upgrade: per-row scroll-triggered draw (FLOW
   A, no pin — the reader keeps scrolling, the row draws as it
   passes). Opt-in modifier .rt-live + .rt-armed (armed by the
   page script only when !reduced-motion && IntersectionObserver
   exists — see the closing <script>'s armRuledTable): each row's
   hairline is a CSS-custom-property-free scaleX transition on
   both cells' own ::after (the two segments meet exactly as the
   static border-bottom already does under border-collapse), and
   the cells themselves translateX(-14->0) + fade in, staggered
   .12s per row via nth-child transition-delay + `inherit` on the
   children (same trick .stat-row-rule already uses above).
   Bare .ruled-table (no .rt-live, e.g. preview.html's demo) is
   completely unaffected — none of this matches without the class.
   If .rt-armed is never added (no JS, reduced motion, no IO
   support), the table shows fully at rest — identity-at-completion,
   no fallback JS path required.
   ============================================================ */
/* neutralize the bare .ruled-table tr-level opacity-0 default (driven by
   the generic .reveal/.in mechanic, which .rt-live tables no longer use —
   these divs carry no .reveal class) so ONLY the td-level opacity below
   controls visibility; without this the tr's own opacity:0 would multiply
   through and the row would never actually paint even once its tds reach
   opacity:1. */
.js .ruled-table.rt-live tbody tr{opacity:1}
.ruled-table.rt-live.rt-armed tbody td{position:relative;border-bottom-color:transparent}
.js .ruled-table.rt-live.rt-armed tbody td{
  opacity:0;transform:translateX(-14px);
  /* GOV-R8: shortened from .5s/.5s so a row inks within ~.5s of crossing
     the IO trigger line, matching the system's own settle budget. */
  transition:opacity .4s var(--ease-settle),transform .5s var(--ease-settle);
  transition-delay:inherit;will-change:opacity,transform;
}
.js .ruled-table.rt-live.rt-armed tbody tr.rt-in td{opacity:1;transform:none}
.js .ruled-table.rt-live.rt-armed tbody td::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--border-subtle-light);transform:scaleX(0);transform-origin:left;
  /* GOV-R8: rule draw shortened .7s->.5s to finish inside the same
     ~.5s settle window as the td opacity/transform above. */
  transition:transform .5s var(--ease-settle);transition-delay:inherit;will-change:transform;
}
.js .ruled-table.rt-live.rt-armed tbody tr.rt-in td::after{transform:scaleX(1)}
/* GOV-R8: retimed to the page system's own cascade law (site.css:584-591 —
   .06s steps, total stagger budget well under the .5s cap). Each row already
   self-sequences via its own IntersectionObserver trigger, so the long
   .12s-step/.60s ladder was redundant and, at continuous scroll speed, made
   later rows finish inking after they had scrolled past the viewport top.
   The shorter ladder now only orders rows that enter together (anchor jumps). */
.ruled-table.rt-live tbody tr:nth-child(1){transition-delay:0s}
.ruled-table.rt-live tbody tr:nth-child(2){transition-delay:.06s}
.ruled-table.rt-live tbody tr:nth-child(3){transition-delay:.12s}
.ruled-table.rt-live tbody tr:nth-child(4){transition-delay:.18s}
.ruled-table.rt-live tbody tr:nth-child(5){transition-delay:.24s}
.ruled-table.rt-live tbody tr:nth-child(6){transition-delay:.30s}

/* ============================================================
   THE BOARD SCENE — new (governance v4): the page's third pinned
   scrub scene, combining the certification thresholds and the
   capability figures on one light stage (same wrapper/sticky/
   damped-rAF-channel engineering as scenes 1–2). Board rows use
   the homepage's run-board grammar — label inks, then the rule
   draws (a CSS custom property read by both cells' ::after, set
   per frame from JS — the only way to drive a pseudo-element's
   transform from script), then the outcome lands. Static default:
   everything at rest; .board/.stat-ledger keep their existing
   bare reveal/cascade fallback for <=900px / reduced-motion /
   no-JS (unchanged, bare instances in preview.html untouched).
   ============================================================ */
.gov-board-wrap{position:relative;background:var(--surface-light)}
.gov-board-stage{position:relative;padding:clamp(88px,12vh,150px) var(--gutter)}
.gov-board-inner{
  position:relative;max-width:880px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;gap:clamp(30px,4.6vh,54px);
}
.gov-board-inner h2{
  /* GOV-R6: matches the page's flowing-section H2 clamp exactly
     (governance.html sections 01/02/03/06/07 + .gov-ledger-inner h2 above)
     so the static/<=900px/no-JS/print fallback never shows a 4px near-miss
     next to every other H2 on the page. The pinned-stage compact overrides
     below (including GOV-10's tier-two step-down) are untouched and still
     govern the >900px dynamic composition. */
  font-size:clamp(28px,4.2vw,44px);line-height:1.16;
  letter-spacing:var(--track-display);color:var(--text-primary-light);
  margin:0 0 24px;max-width:720px;
}
.gov-board-caps .stat-row{grid-template-columns:minmax(160px,260px) 1fr}
.gov-board-caps .stat-row-value{font-size:clamp(28px,3.4vw,44px)}
@media (max-width:700px){
  .gov-board-caps .stat-row{grid-template-columns:1fr}
}
.js .gov-board-wrap.dynamic .gov-board-stage{
  position:sticky;top:0;z-index:2;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  padding-top:calc(var(--nav-top) + var(--nav-h) + 22px);padding-bottom:30px;
}
.js .gov-board-wrap.dynamic .gov-board-inner{width:100%}
.js .gov-board-wrap.dynamic .gov-board-inner > div > .eyebrow,
.js .gov-board-wrap.dynamic .gov-board-inner > div > h2{opacity:0;will-change:opacity,transform;transition:none}
/* GOV-04: the pinned stage (.gov-board-stage) is already overflow:hidden
   and owns all clipping; at >900px the 520px min-width table can never
   overflow the 880px inner, so bare .board's overflow-x:auto is both
   unreachable and, worse, computes overflow-y:auto here — at the pinned
   compact rhythm the table's scrollHeight can exceed the stage's
   clientHeight, drawing a live vertical scrollbar thumb + clipping row 4.
   Release it inside the pinned context only; static/mobile/print keep
   the bare .board overflow-x:auto fallback untouched. */
.js .gov-board-wrap.dynamic .board{overflow:visible}
.js .gov-board-wrap.dynamic .board tbody td{
  position:relative;border-bottom-color:transparent;opacity:0;transition:none;will-change:opacity,transform;
}
.js .gov-board-wrap.dynamic .board tbody td::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--border-subtle-light);transform-origin:left;
  transform:scaleX(var(--bd-rule,0));
}
.js .gov-board-wrap.dynamic .stat-row-rule{transform:scaleX(0);will-change:transform;transition:none}
.js .gov-board-wrap.dynamic .gov-board-caps .stat-row-value,
.js .gov-board-wrap.dynamic .gov-board-caps .stat-row-label{opacity:0;transition:none}
/* the pinned stage is overflow-clipped at exactly 100vh, and the
   certification board + capability rows together do not fit a common
   ~900px-tall laptop viewport at the normal-flow reading rhythm those
   components use elsewhere on the page — so the PINNED CONTEXT gets its
   own compact rhythm by default (verified to fit at 1440x900). */
.js .gov-board-wrap.dynamic .gov-board-stage{
  padding-top:calc(var(--nav-top) + var(--nav-h) + 14px);padding-bottom:18px;
}
.js .gov-board-wrap.dynamic .gov-board-inner{gap:clamp(20px,3vh,32px)}
.js .gov-board-wrap.dynamic .gov-board-inner > div > .eyebrow{margin-bottom:8px}
.js .gov-board-wrap.dynamic .gov-board-inner h2{margin-bottom:14px;font-size:clamp(22px,3.2vw,32px)}
/* GOV-10: on the shared pinned stage, section 04 (cert board) and 05
   (caps) rendered at identical h2 size, giving one stage two equal
   centers of gravity. The homepage's stacked two-tier pin steps its
   second tier's title down a full size class (.companies-head vs
   .news-title, index.html:1065/1071) — mirror that here, scoped to the
   pinned context only; static/mobile/print keep the shared
   .gov-board-inner h2 sizing untouched. */
.js .gov-board-wrap.dynamic .gov-board-caps h2{font-size:clamp(18px,2.4vw,26px)}
.js .gov-board-wrap.dynamic .board td,.js .gov-board-wrap.dynamic .board th{padding:11px 16px 11px 0}
.js .gov-board-wrap.dynamic .gov-board-caps .stat-row{
  padding:9px 0;grid-template-columns:minmax(140px,210px) 1fr;column-gap:16px;
}
.js .gov-board-wrap.dynamic .gov-board-caps .stat-row-value{font-size:clamp(18px,2vw,24px)}
.js .gov-board-wrap.dynamic .gov-board-caps .stat-row-label{font-size:13px;line-height:1.4}
@media (min-width:901px) and (max-height:760px){
  .js .gov-board-wrap.dynamic .gov-board-stage{
    padding-top:calc(var(--nav-top) + var(--nav-h) + 8px);padding-bottom:12px;
  }
  .js .gov-board-wrap.dynamic .gov-board-inner{gap:clamp(14px,2vh,22px)}
  .js .gov-board-wrap.dynamic .gov-board-inner h2{margin-bottom:10px;font-size:clamp(18px,2.8vw,24px)}
  .js .gov-board-wrap.dynamic .gov-board-caps h2{font-size:clamp(16px,2.2vw,22px)}
  .js .gov-board-wrap.dynamic .board td,.js .gov-board-wrap.dynamic .board th{padding:8px 14px 8px 0}
  .js .gov-board-wrap.dynamic .gov-board-caps .stat-row{padding:6px 0;grid-template-columns:minmax(128px,190px) 1fr}
  .js .gov-board-wrap.dynamic .gov-board-caps .stat-row-value{font-size:clamp(16px,1.8vw,22px)}
}

/* ============================================================
   REDUCED MOTION  (homepage-equivalent neutralizer)
   ============================================================ */
/* Print: diligence readers print reference pages — reveals must not
   depend on scroll, and the veil must not overlay content */
@media print{
  .js .reveal{opacity:1 !important;transform:none !important}
  .js .reveal.cascade > *{opacity:1 !important;transform:none !important;transition:none !important}
  .veil-in::before{display:none}
  .page-band::before{display:none} /* dawn radial is decorative; keep print plain */

  /* Ledger/ruled-table/board: force every one-shot ink-in to its
     completed state — diligence readers print reference pages and
     must get the full record with no scroll dependency. */
  .js .stat-row-rule{transform:scaleX(1) !important}
  .js .ruled-table tbody tr,
  .js .board tbody tr,
  .js .board tbody tr td:last-child{opacity:1 !important;transition:none !important}

  /* Governance hero scene: never print pinned/clipped or mid-scrub —
     release the sticky stage and show every element at its finished
     state, figure included (the 900px cutoff hides it on screen only). */
  .js .gov-hero-wrap.dynamic .gov-hero{position:static !important;height:auto !important;overflow:visible !important}
  .gov-hero-figure{display:block !important}
  .js .gov-hero-wrap.dynamic .gov-hero-eyebrow,
  .js .gov-hero-wrap.dynamic .ght-w,
  .js .gov-hero-wrap.dynamic .gov-hero-subline,
  .js .gov-hero-wrap.dynamic .ghi-plate,
  .js .gov-hero-wrap.dynamic .ghi-record,
  .js .gov-hero-wrap.dynamic .ghi-cline,
  .js .gov-hero-wrap.dynamic .ghi-pline{opacity:1 !important;transform:none !important}
  .js .gov-hero-wrap.dynamic .ghi-thread{stroke-dashoffset:0 !important}
  .js .gov-hero-wrap.dynamic .gov-dawn{opacity:.28 !important}

  /* Ledger + Board scenes: same release — static, complete, unpinned. */
  .js .gov-ledger-wrap.dynamic .gov-ledger,
  .js .gov-board-wrap.dynamic .gov-board-stage{position:static !important;height:auto !important;overflow:visible !important}
  .js .gov-ledger-wrap.dynamic .gov-ledger-inner > .eyebrow,
  .js .gov-ledger-wrap.dynamic .gov-ledger-inner > h2,
  .js .gov-board-wrap.dynamic .gov-board-inner > div > .eyebrow,
  .js .gov-board-wrap.dynamic .gov-board-inner > div > h2{opacity:1 !important;transform:none !important}
  .js .gov-ledger-wrap.dynamic .stat-row-value,
  .js .gov-ledger-wrap.dynamic .stat-row-label,
  .js .gov-ledger-wrap.dynamic .stat-row-cite{opacity:1 !important;transform:none !important}
  .js .gov-board-wrap.dynamic .board tbody td{opacity:1 !important;transform:none !important}
  .js .gov-board-wrap.dynamic .board tbody td::after{transform:scaleX(1) !important}
  .js .gov-board-wrap.dynamic .gov-board-caps .stat-row-value,
  .js .gov-board-wrap.dynamic .gov-board-caps .stat-row-label{opacity:1 !important}

  /* Flow-A ruled tables: force the per-row draw complete regardless of
     whether the reader's scroll ever armed/triggered each row. */
  .ruled-table.rt-live.rt-armed tbody td{opacity:1 !important;transform:none !important}
  .ruled-table.rt-live.rt-armed tbody td::after{transform:scaleX(1) !important}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .js .reveal.cascade > *{opacity:1;transform:none} /* transition-delay isn't
    zeroed by the universal duration kill above, so cascade children need
    their own unconditional visible state — same fix .reveal already gets. */
  .veil-in::before{display:none}
  .js .stat-row-rule{transform:scaleX(1)}
  .js .ruled-table tbody tr,
  .js .board tbody tr,
  .js .board tbody tr td:last-child{opacity:1}
  /* Governance hero scene: reduceMotion means the page-scoped scene
     script never adds .dynamic, so the static CSS above already shows
     the complete figure/text — nothing extra required here, matching
     how the homepage's own pinned scenes rely on the JS gate alone. */
}

/* ============ STORY (story.html) — .sty-* scoped, appended; mirrors gov-scene engineering ============ */

/* ---------------- Scene 1: THE APERTURE (header) — static/finished
   state, mirrors .gov-hero-wrap/.gov-hero/.gov-hero-inner by value. ---------------- */
.sty-hero-wrap{position:relative;background:var(--surface-dark)}
.sty-hero{position:relative;overflow:hidden;color:var(--text-primary-dark);padding:clamp(96px,14vh,170px) var(--gutter)}
.sty-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:96px 96px;opacity:.05;
}
.sty-hero-inner{
  position:relative;z-index:2;max-width:880px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,38%);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.sty-hero-text{max-width:640px}
.sty-hero-eyebrow{color:var(--text-muted-dark);margin:0 0 20px;display:block}
.sty-hero-title{
  font-size:clamp(28px,4.2vw,56px);line-height:1.14;
  letter-spacing:var(--track-display);color:var(--text-primary-dark);margin:0;
}
.sty-w{display:inline-block}
.sty-hero-figure{position:relative;width:100%;max-width:clamp(320px,32vw,440px);margin:0 auto}
.sty-hero-figure svg{display:block;width:100%;height:auto}
/* the aperture instrument: ring + eight blades are the sanctioned dash-drawn
   hairline family (Chromium dash exception — vector-effect omitted, see
   .gov-hero-figure's .ghi-thread comment above); the hub is the only
   non-dash stroked element and carries non-scaling-stroke. */
.sty-ring{stroke:rgba(255,255,255,.52);stroke-width:1;fill:none}
.sty-blade{stroke:rgba(255,255,255,.44);stroke-width:1;fill:none}
.sty-hub{stroke:rgba(255,255,255,.70);stroke-width:1;fill:rgba(90,99,255,.08);vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.sty-dawn{ /* the dawn idiom, static base — mirrors .gov-dawn/.page-band::before by value */
  position:absolute;left:0;right:0;bottom:0;height:52vh;pointer-events:none;
  background:radial-gradient(72% 92% at 50% 100%, rgba(58,63,224,.32), rgba(58,63,224,0) 72%);
  opacity:.28;
}
@media (max-width:900px){
  .sty-hero-inner{grid-template-columns:1fr;min-height:280px;overflow:hidden}
  .sty-hero-text{position:relative;z-index:2}
  .sty-hero-figure{
    display:block;position:absolute;right:calc(-1 * var(--gutter));bottom:-52px;
    width:clamp(190px,62vw,290px);opacity:.34;pointer-events:none;
  }
}
/* pinned scrub scene (wide + motion + js): the stage pins and the
   scene writes itself under scroll control */
.js .sty-hero-wrap.dynamic .sty-hero{
  position:sticky;top:0;z-index:4;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  padding-top:calc(var(--nav-top) + var(--nav-h) + 28px);padding-bottom:40px;
}
.js .sty-hero-wrap.dynamic .sty-hero-inner{width:100%}
.js .sty-hero-wrap.dynamic .sty-hero-eyebrow,
.js .sty-hero-wrap.dynamic .sty-w{opacity:0;will-change:opacity,transform;transition:none}
/* dasharray/dashoffset for .sty-ring/.sty-blade are set entirely by the
   page script (real getTotalLength() units), same idiom as .ghi-thread. */
.js .sty-hero-wrap.dynamic .sty-ring,
.js .sty-hero-wrap.dynamic .sty-blade{will-change:stroke-dashoffset;transition:none}
.js .sty-hero-wrap.dynamic .sty-hub{opacity:0;transition:none}
.js .sty-hero-wrap.dynamic .sty-dawn{opacity:0;will-change:opacity}

/* ---------------- Scene 2: THE FOUNDER LEDGER — static/finished state,
   mirrors .gov-ledger-wrap/.gov-ledger/.gov-ledger-inner by value; the
   one spine (880px inner rail, identical to .gov-ledger-inner/.stat-ledger). ---------------- */
.sty-founder-wrap{position:relative;background:var(--surface-light)}
.sty-founder{position:relative;padding:clamp(96px,14vh,170px) var(--gutter)}
.sty-founder-inner{position:relative;max-width:880px;margin:0 auto;width:100%}
.sty-founder-intro{max-width:640px;margin:0 0 40px;font-size:17px;line-height:1.6;color:var(--text-secondary-light)}
/* founder rows carry no cite column (two cells: value, label) */
.sty-ledger .stat-row{grid-template-columns:minmax(160px,340px) 1fr}
.sty-ledger .stat-row-label{text-transform:none} /* verbatim sentence-case rendering — story has no rendered-text-parity constraint */
.sty-ledger .stat-row-value{font-size:clamp(30px,3.6vw,48px)} /* fits "Edwin Gordon"; stays --accent-primary from the base component */
.sty-ledger-close{display:block;height:1px;background:var(--border-subtle-light);transform-origin:left center}
.js .sty-founder-wrap.dynamic .sty-founder{
  position:sticky;top:0;z-index:3;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  padding-top:calc(var(--nav-top) + var(--nav-h) + 16px);padding-bottom:24px;
}
.js .sty-founder-wrap.dynamic .sty-founder-inner{width:100%}
.js .sty-founder-wrap.dynamic .sty-kicker{opacity:0;will-change:opacity,transform;transition:none;margin-bottom:8px}
.js .sty-founder-wrap.dynamic .sty-founder-intro{opacity:0;will-change:opacity,transform;transition:none;margin-bottom:20px;font-size:14px}
.js .sty-founder-wrap.dynamic .stat-row-value,
.js .sty-founder-wrap.dynamic .stat-row-label{opacity:0;will-change:opacity,transform;transition:none}
.js .sty-founder-wrap.dynamic .stat-row-rule,
.js .sty-founder-wrap.dynamic .sty-ledger-close{transform:scaleX(0);will-change:transform;transition:none}
/* the pinned stage is overflow-clipped at exactly 100vh — compact rhythm
   for the pinned context only, mirroring .gov-ledger-wrap.dynamic's own
   compact .stat-row override (site.css 875–889). */
.js .sty-founder-wrap.dynamic .stat-row{padding:11px 0}
.js .sty-founder-wrap.dynamic .stat-row-value{font-size:clamp(22px,2.6vw,34px)}
.js .sty-founder-wrap.dynamic .stat-row-label{font-size:13px;line-height:1.42}
@media (min-width:901px) and (max-height:760px){
  .js .sty-founder-wrap.dynamic .sty-founder{
    padding-top:calc(var(--nav-top) + var(--nav-h) + 10px);padding-bottom:14px;
  }
  .js .sty-founder-wrap.dynamic .stat-row{padding:9px 0}
  .js .sty-founder-wrap.dynamic .stat-row-value{font-size:clamp(20px,2.4vw,30px)}
}

/* ---------------- Fallback forcing: print + reduced-motion, story
   selectors only (new blocks; the shared print/reduced-motion blocks
   above are never touched). ---------------- */
@media print{
  .js .sty-hero-wrap.dynamic .sty-hero,
  .js .sty-founder-wrap.dynamic .sty-founder{position:static !important;height:auto !important;overflow:visible !important}
  .sty-hero-figure{display:block !important}
  .js .sty-hero-wrap.dynamic .sty-hero-eyebrow,
  .js .sty-hero-wrap.dynamic .sty-w,
  .js .sty-hero-wrap.dynamic .sty-hub{opacity:1 !important;transform:none !important}
  .sty-ring,.sty-blade{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .sty-dawn{display:none} /* decorative; keep print plain, matches .page-band::before */
  .js .sty-founder-wrap.dynamic .sty-kicker,
  .js .sty-founder-wrap.dynamic .sty-founder-intro,
  .js .sty-founder-wrap.dynamic .stat-row-value,
  .js .sty-founder-wrap.dynamic .stat-row-label{opacity:1 !important;transform:none !important}
  .js .sty-founder-wrap.dynamic .stat-row-rule,
  .js .sty-founder-wrap.dynamic .sty-ledger-close{transform:scaleX(1) !important}
  .js .sty-rule{transform:none !important}
}

@media (prefers-reduced-motion: reduce){
  .js .sty-rule{transform:none}
  .js .sty-ledger-close{transform:none}
}