/* =====================================================================
   BANGLACHAIN — SHARED STYLESHEET
   Apple-HIG-style structure with light/dark theming. Default/"light"
   values live on :root, built on the brand primary green #374434; dark
   values are redefined under both a prefers-color-scheme media query
   (system default) and [data-theme] (explicit user choice, wins in both
   directions). Layout semantics (active/current states, hierarchy) are
   still signalled primarily by fill vs. outline or by weight, not color,
   so swapping the palette doesn't change how the UI reads.
   ===================================================================== */

/* ============ TOKENS (green = default) ============
   Default/"light" branch is now a deep-green canvas built from the brand
   primary #374434, with a paper/paper-2 staircase stepping up in
   lightness at the same hue/saturation. Because the canvas is dark here,
   text and "solid fill" tokens invert the same way the navy dark theme
   already does (white text; a warm cream #FFEED5 max-contrast fill in
   place of dark theme's white) — this theme reads as a second dark-toned
   theme, just green instead of navy. The dark theme below is untouched. */
:root{
  --ink:#374434;          /* canvas — brand primary green */
  --paper:#465643;        /* secondary surface: cards, alternating bands */
  --paper-2:#546850;       /* elevated surface variant (hover states) */
  --text-hi:#FFEED5;      /* primary text on canvas */
  --text-mid:#FFEED5;     /* secondary text — sage-grey, tuned for contrast on green */
  --text-ink:#FFEED5;     /* primary text on surface (flips with --paper) */
  --text-ink-mid:#FFEED5; /* secondary text on surface */
  --line:rgba(255,238,213,.12); /* hairline border */
  --line-light:rgba(255,238,213,.12);
  --solid-bg:#FFEED5;     /* context-independent max-contrast fill — warm cream */
  --solid-fg:#374434;
  --fg-rgb:255,238,213;   /* foreground tint triplet, for rgba() washes */
  --bg-rgb:55,68,52;      /* canvas tint triplet (inverse direction) */
  --radius-sm:8px;        /* buttons, badges */
  --radius:14px;          /* cards, inputs */
  --radius-lg:22px;       /* large framed panels */
  --display:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --motion:.3s ease-out;
  --ease-lift:cubic-bezier(.16,1,.3,1);
  --motion-lift:.45s var(--ease-lift);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#15202B;
    --paper:#1C1C1E;
    --paper-2:#242426;
    --text-hi:#FFEED5;
    --text-mid:#FFEED5;
    --text-ink:#FFEED5;
    --text-ink-mid:#FFEED5;
    --line:#2C2C2E;
    --line-light:#2C2C2E;
    --solid-bg:#FFEED5;
    --solid-fg:#000000;
    --fg-rgb:255,238,213;
    --bg-rgb:21,32,43;
  }
}
:root[data-theme="dark"]{
  --ink:#15202B;
  --paper:#1C1C1E;
  --paper-2:#242426;
  --text-hi:#FFEED5;
  --text-mid:#FFEED5;
  --text-ink:#FFEED5;
  --text-ink-mid:#FFEED5;
  --line:#2C2C2E;
  --line-light:#2C2C2E;
  --solid-bg:#FFEED5;
  --solid-fg:#000000;
  --fg-rgb:255,238,213;
  --bg-rgb:21,32,43;
}

/* ============ GRAIN / PAPER TEXTURE (reusable) ============
   .grain-bg pairs a theme-aware surface colour with a transparent SVG
   noise tile laid over the top via ::after, so any page (or panel) that
   wears the class gets the same "grainy paper" look. The noise itself is
   a single desaturated fractalNoise tile — colour-neutral — kept faint
   with a low --grain-opacity and mix-blend-mode so it reads as texture,
   not static; pointer-events:none keeps it from ever intercepting clicks.
   Surface colour comes from --ink, which already swaps between the green
   (default) and navy/"blue" (dark) themes above — the class only adds a
   couple of grain-specific variables so the *strength* of the texture can
   also be tuned per theme, without duplicating any colour logic here. */
:root{
  --grain-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  --grain-size:220px;
  --grain-opacity:.16;
  --grain-blend:soft-light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --grain-opacity:.2; }
}
:root[data-theme="dark"]{ --grain-opacity:.2; }

.grain-bg{ position:relative; background-color:var(--ink); }
.grain-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background-image:var(--grain-svg);
  background-repeat:repeat;
  background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-opacity);
  mix-blend-mode:var(--grain-blend);
}

/* accent card fill — related/why/dev/comm cards + paper-band panels + diagram
   frames + accordion layers + callouts + eco hub/tooltip. In dark mode these
   stay pinned to the exact green-on-navy look they always had. In the green
   theme, the canvas itself is now that same deep green, so the accent here
   inverts to a light surface (dark-green text) — otherwise the cards would
   vanish into the canvas. Each container also pins the theme tokens its
   descendants read (text/line/solid-*) accordingly. */
:root .related-card,
:root .why-card,
:root .dev-card,
:root .comm-card,
:root .band-paper > .wrap,
:root .stack-diagram,
:root .found-visual,
:root .callout,
:root .stack-layer,
:root .eco-tooltip,
:root .eco-tooltip::after,
:root .eco-center,
:root .fact-item{
  --text-hi:#374434;
  --text-ink:#374434;
  --text-mid:#374434;
  --text-ink-mid:#374434;
  --fg-rgb:55,68,52;
  --line:rgba(55,68,52,.25);
  --solid-bg:#374434;
  --solid-fg:#FFEED5;
  --card-bg:#FFEED5;
  background:#FFEED5;
  color:#374434;
}
:root .eco-center{
  --fg-rgb:255,238,213;
  background-image:url('moon.png');
  background-size:cover;
  background-position:center;
}
:root .found-emblem-node{
  fill:#FFEED5;
}
:root .research-card{
  border-top-color:rgba(255,238,213,.25);
}
:root .callout,
:root .callout .callout-head,
:root .callout .callout-icon{
  border-color:rgba(55,68,52,.25);
}
:root .callout .callout-body p.callout-sub{
  border-top-color:rgba(55,68,52,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .related-card,
  :root:not([data-theme="light"]) .why-card,
  :root:not([data-theme="light"]) .dev-card,
  :root:not([data-theme="light"]) .comm-card,
  :root:not([data-theme="light"]) .band-paper > .wrap,
  :root:not([data-theme="light"]) .stack-diagram,
  :root:not([data-theme="light"]) .found-visual,
  :root:not([data-theme="light"]) .callout,
  :root:not([data-theme="light"]) .stack-layer,
  :root:not([data-theme="light"]) .eco-tooltip,
  :root:not([data-theme="light"]) .eco-tooltip::after,
  :root:not([data-theme="light"]) .eco-center,
  :root:not([data-theme="light"]) .fact-item{
    --text-hi:#FFEED5;
    --text-ink:#FFEED5;
    --text-mid:#FFEED5;
    --text-ink-mid:#FFEED5;
    --fg-rgb:255,238,213;
    --line:rgba(255,238,213,.25);
    --solid-bg:#FFEED5;
    --solid-fg:#000000;
    --card-bg:#0F2D40;
    background:#0F2D40;
    color:#FFEED5;
  }
  :root:not([data-theme="light"]) .eco-center{
    background-image:url('moon.png');
    background-size:cover;
    background-position:center;
  }
  :root:not([data-theme="light"]) .found-emblem-node{
    fill:#344532;
  }
  :root:not([data-theme="light"]) .callout,
  :root:not([data-theme="light"]) .callout .callout-head,
  :root:not([data-theme="light"]) .callout .callout-icon{
    border-color:rgba(255,238,213,.25);
  }
  :root:not([data-theme="light"]) .callout .callout-body p.callout-sub{
    border-top-color:rgba(255,238,213,.25);
  }
}
:root[data-theme="dark"] .related-card,
:root[data-theme="dark"] .why-card,
:root[data-theme="dark"] .dev-card,
:root[data-theme="dark"] .comm-card,
:root[data-theme="dark"] .band-paper > .wrap,
:root[data-theme="dark"] .stack-diagram,
:root[data-theme="dark"] .found-visual,
:root[data-theme="dark"] .callout,
:root[data-theme="dark"] .stack-layer,
:root[data-theme="dark"] .eco-tooltip,
:root[data-theme="dark"] .eco-tooltip::after,
:root[data-theme="dark"] .eco-center,
:root[data-theme="dark"] .fact-item{
  --text-hi:#FFEED5;
  --text-ink:#FFEED5;
  --text-mid:#FFEED5;
  --text-ink-mid:#FFEED5;
  --fg-rgb:255,238,213;
  --line:rgba(255,238,213,.25);
  --solid-bg:#FFEED5;
  --solid-fg:#000000;
  --card-bg:#0F2D40;
  background:#0F2D40;
  color:#FFEED5;
}
:root[data-theme="dark"] .eco-center{
  background-image:url('moon.png');
  background-size:cover;
  background-position:center;
}
:root[data-theme="dark"] .found-emblem-node{
  fill:#344532;
}
:root[data-theme="dark"] .callout,
:root[data-theme="dark"] .callout .callout-head,
:root[data-theme="dark"] .callout .callout-icon{
  border-color:rgba(255,238,213,.25);
}
:root[data-theme="dark"] .callout .callout-body p.callout-sub{
  border-top-color:rgba(255,238,213,.25);
}
/* card hover — green theme recedes to the canvas green with white text;
   dark mode keeps the navy canvas with white text, exactly as before. */
:root .related-card:hover,
:root .related-card:focus-visible,
:root .why-card:hover,
:root .dev-card:hover,
:root .comm-card:hover,
:root .stack-layer:hover,
:root .fact-item:hover{
  --text-hi:#FFEED5;
  --text-ink:#FFEED5;
  --text-mid:#FFEED5;
  --text-ink-mid:#FFEED5;
  --fg-rgb:255,238,213;
  --line:rgba(255,238,213,.25);
  --solid-bg:#FFEED5;
  --solid-fg:#374434;
  background:#374434;
  color:#FFEED5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .related-card:hover,
  :root:not([data-theme="light"]) .related-card:focus-visible,
  :root:not([data-theme="light"]) .why-card:hover,
  :root:not([data-theme="light"]) .dev-card:hover,
  :root:not([data-theme="light"]) .comm-card:hover,
  :root:not([data-theme="light"]) .stack-layer:hover,
  :root:not([data-theme="light"]) .fact-item:hover{
    --text-hi:#FFEED5;
    --text-ink:#FFEED5;
    --text-mid:#FFEED5;
    --text-ink-mid:#FFEED5;
    --fg-rgb:255,238,213;
    --line:rgba(255,238,213,.25);
    --solid-bg:#FFEED5;
    --solid-fg:#000000;
    background:#2F495A;
    color:#FFEED5;
  }
}
:root[data-theme="dark"] .related-card:hover,
:root[data-theme="dark"] .related-card:focus-visible,
:root[data-theme="dark"] .why-card:hover,
:root[data-theme="dark"] .dev-card:hover,
:root[data-theme="dark"] .comm-card:hover,
:root[data-theme="dark"] .stack-layer:hover,
:root[data-theme="dark"] .fact-item:hover{
  --text-hi:#FFEED5;
  --text-ink:#FFEED5;
  --text-mid:#FFEED5;
  --text-ink-mid:#FFEED5;
  --fg-rgb:255,238,213;
  --line:rgba(255,238,213,.25);
  --solid-bg:#FFEED5;
  --solid-fg:#000000;
  background:#2F495A;
  color:#FFEED5;
}
/* .active competes with :hover at equal specificity — without the explicit
   :hover/:focus-visible variants here, an open (active) layer that's also
   hovered would win the background tug-of-war but lose the text-color one
   (last declared wins per-property), pairing the wrong two together and
   making the text unreadable. Repeating the active look under :hover keeps
   an already-open layer visually stable instead of flashing to the "recede
   to canvas" hover treatment meant for closed layers. */
:root .stack-layer.active,
:root .stack-layer.active:hover,
:root .stack-layer.active:focus-visible{
  --text-hi:#374434;
  --text-ink:#374434;
  --text-mid:#374434;
  --text-ink-mid:#374434;
  --fg-rgb:55,68,52;
  --line:rgba(55,68,52,.25);
  --solid-bg:#374434;
  --solid-fg:#FFEED5;
  background:#E9DBC3;
  color:#374434;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .stack-layer.active,
  :root:not([data-theme="light"]) .stack-layer.active:hover,
  :root:not([data-theme="light"]) .stack-layer.active:focus-visible{
    --text-hi:#FFEED5;
    --text-ink:#FFEED5;
    --text-mid:#FFEED5;
    --text-ink-mid:#FFEED5;
    --fg-rgb:255,238,213;
    --line:rgba(255,238,213,.25);
    --solid-bg:#FFEED5;
    --solid-fg:#000000;
    background:#2F495A;
    color:#FFEED5;
  }
}
:root[data-theme="dark"] .stack-layer.active,
:root[data-theme="dark"] .stack-layer.active:hover,
:root[data-theme="dark"] .stack-layer.active:focus-visible{
  --text-hi:#FFEED5;
  --text-ink:#FFEED5;
  --text-mid:#FFEED5;
  --text-ink-mid:#FFEED5;
  --fg-rgb:255,238,213;
  --line:rgba(255,238,213,.25);
  --solid-bg:#FFEED5;
  --solid-fg:#000000;
  background:#2F495A;
  color:#FFEED5;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:100px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  position:relative;
  font-family:var(--body);
  background:var(--ink);
  color:var(--text-hi);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}

/* ============ HERO PARTICLE BACKGROUND (scoped to .hero / .page-hero only) ============ */
.hero-particle-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
header.nav{ z-index:100; }
.hero, .page-hero{ pointer-events:none; }
.hero a, .hero button, .page-hero a, .page-hero button{ pointer-events:auto; }
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
h1,h2{font-family:var(--display); font-weight:800; line-height:1.05; letter-spacing:-0.02em;}
h3,h4{font-family:var(--display); font-weight:600; line-height:1.15; letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mid); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--text-mid); display:block;}
.eyebrow.on-paper{color:var(--text-ink-mid);}
.eyebrow.on-paper::before{background:var(--text-ink-mid);}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
@media (max-width:768px){ .wrap{padding:0 24px;} }

:focus-visible{outline:2px solid var(--text-hi); outline-offset:3px; border-radius:4px;}

/* section rhythm — dark & forest bands are now identical (pure transparent
   canvas, no accent tint); paper band is the secondary surface, painted as
   an inset card (see .band-paper > .wrap below) rather than a full-bleed band. */
section{position:relative;}
.band-dark, .band-forest{background:transparent; color:var(--text-hi);}
.band-paper{background:transparent; color:var(--text-ink);}
.band-paper > .wrap{
  background:var(--paper); border-radius:var(--radius-lg);
  padding:72px 64px;
}
.pad-xl{padding:225px 0;}
.pad-lg{padding:180px 0;}
.pad-md{padding:135px 0;}
@media (max-width:768px){
  .pad-xl{padding:132px 0;} .pad-lg{padding:114px 0;} .pad-md{padding:90px 0;}
  .band-paper > .wrap{padding:44px 26px; border-radius:var(--radius);}
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:15px;
  padding:15px 26px; border-radius:var(--radius-sm); white-space:nowrap;
  min-height:44px;
  transition:transform var(--motion), background var(--motion), color var(--motion), box-shadow var(--motion), border-color var(--motion);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:rgba(var(--bg-rgb),.1);
  transition:left .4s ease;
  z-index:0;
}
.btn:hover::before{left:100%;}
.btn-primary,.btn-dark{
  background:#76B900; color:#FFEED5;
  box-shadow:0 4px 15px rgba(var(--fg-rgb),.12);
}
.btn-primary:hover,.btn-dark:hover{
  transform:translateY(-2px) scale(1.01);
}
.btn-outline{
  border:1px solid #76B900;
  color:#76B900;
  background:transparent;
}
.btn-outline:hover{
  border-color:#76B900;
  background:rgba(118,185,0,.1);
  transform:translateY(-2px) scale(1.01);
}
.btn-ghost-dark{
  border:1px solid #76B900; color:#76B900;
  background:transparent;
}
.btn-ghost-dark:hover{
  background:rgba(118,185,0,.1);
  border-color:#76B900;
  transform:translateY(-2px) scale(1.01);
}
.btn svg{
  width:16px; height:16px;
  transition:transform var(--motion);
  position:relative;
  z-index:1;
}
.btn:hover svg{transform:translateX(3px);}
.btn:active{transform:translateY(0) scale(1);}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.23s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.30s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.37s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.44s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.51s;}
.reveal-stagger.in > *:nth-child(9){transition-delay:.58s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ============ NAV — always-on frosted glass ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0;
  background:rgba(var(--bg-rgb),.7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav.scrolled{
  background:rgba(var(--bg-rgb),.85);
  box-shadow:0 1px 0 rgba(var(--fg-rgb),.04);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--text-hi);}
.logo-mark{height:30px; width:164px; flex-shrink:0; transition:transform .5s var(--ease);}
.logo:hover .logo-mark, .logo:focus-visible .logo-mark{transform:scale(1.04);}
.nav-links{display:flex; align-items:center; gap:36px; font-size:14px; font-weight:500; color:var(--text-mid);}
.nav-links a{position:relative; padding:14px 0; transition:color var(--motion);}
.nav-links a::after{content:""; position:absolute; left:0; bottom:10px; width:0; height:1px; background:var(--text-hi); transition:width var(--motion);}
.nav-links a:hover{color:var(--text-hi);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--text-hi);}
.nav-links a.active::after{width:100%; height:2px; bottom:9px;}
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-cta .btn{padding:12px 22px; font-size:13.5px; min-height:44px;}
.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm); flex-shrink:0;
  transition:background var(--motion);
}
.theme-toggle:hover{background:rgba(var(--fg-rgb),.06);}
.theme-toggle svg{width:19px; height:19px; color:var(--text-hi); transition:transform .4s var(--ease);}
.theme-toggle:hover svg{transform:rotate(20deg) scale(1.12);}
.theme-toggle:active svg{transform:rotate(-8deg) scale(.88); transition-duration:.15s;}
.theme-toggle .icon-moon{display:block;}
.theme-toggle .icon-sun{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none;}
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block;}
}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
/* ---- language switch ---- */
.lang-switch{position:relative;}
.lang-toggle{
  display:flex; align-items:center; gap:6px;
  height:44px; padding:0 11px; border-radius:var(--radius-sm); flex-shrink:0;
  transition:background var(--motion);
}
.lang-toggle:hover{background:rgba(var(--fg-rgb),.06);}
.lang-toggle svg{width:18px; height:18px; color:var(--text-hi); flex-shrink:0;}
.lang-toggle svg:not(.lang-chev){transition:transform .5s var(--ease);}
.lang-toggle:hover svg:not(.lang-chev){transform:rotate(180deg);}
.lang-toggle .lang-label-text{font-size:15px; font-weight:600; color:var(--text-hi);}
.lang-toggle .lang-code{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--text-mid);}
.lang-toggle .lang-chev{width:10px; height:10px; color:var(--text-mid); transition:transform var(--motion); margin-left:1px;}
.lang-switch.open .lang-chev{transform:rotate(180deg);}
.nav-cta .lang-label-text{display:none;}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:200;
  width:272px; max-height:min(400px,70vh);
  display:flex; flex-direction:column; gap:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 16px 40px rgba(var(--fg-rgb),.16);
  padding:10px;
}
.lang-menu[hidden]{display:none;}
.lang-search{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--ink); color:var(--text-hi); font-size:13.5px; font-family:var(--body);
  flex-shrink:0;
}
.lang-search:focus{outline:none; border-color:var(--text-mid);}
.lang-list{list-style:none; overflow-y:auto; display:flex; flex-direction:column; gap:1px;}
.lang-option{
  display:flex; align-items:baseline; gap:8px; padding:9px 10px; border-radius:7px;
  font-size:14px; color:var(--text-ink); cursor:pointer; transition:background var(--motion);
}
.lang-option .lang-en{color:var(--text-ink-mid); font-size:11.5px;}
.lang-option:hover{background:rgba(var(--fg-rgb),.07);}
.lang-option[aria-selected="true"]{background:rgba(var(--fg-rgb),.09); font-weight:600;}
.lang-option.is-filtered{display:none;}
.lang-empty{display:none; padding:16px 10px; font-size:13px; color:var(--text-mid); text-align:center;}
.lang-empty.show{display:block;}
@media (max-width:900px){
  .nav-cta .lang-toggle{width:44px; padding:0; justify-content:center;}
  .nav-cta .lang-toggle .lang-code,.nav-cta .lang-toggle .lang-chev{display:none;}
  .nav-cta .lang-menu{max-width:calc(100vw - 48px);}
}

/* Neutralise Google Website Translator's own chrome — the custom
   .lang-switch dropdown drives it, so none of its default UI should
   ever be visible. */
body{top:0 !important;}
.goog-te-banner-frame.skiptranslate{display:none !important;}
.goog-tooltip, .goog-tooltip:hover{display:none !important;}
.goog-text-highlight{background:none !important; box-shadow:none !important;}
#google_translate_element{display:none !important;}

.hamburger{display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-shrink:0; transition:transform var(--motion);}
.hamburger:hover{transform:scale(1.08);}
.hamburger span{display:block; width:20px; height:1.5px; background:var(--text-hi); position:relative; transition:background .2s ease;}
.hamburger span::before,.hamburger span::after{content:""; position:absolute; width:20px; height:1.5px; background:var(--text-hi); left:0; transition:transform .3s var(--ease), opacity .3s ease;}
.hamburger span::before{top:-6px;}
.hamburger span::after{top:6px;}
.hamburger.open span{background:transparent;}
.hamburger.open span::before{transform:translateY(6px) rotate(45deg);}
.hamburger.open span::after{transform:translateY(-6px) rotate(-45deg);}

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-start; padding:110px 32px 32px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
  pointer-events:none;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0); pointer-events:auto;}
.mobile-menu a{font-family:var(--display); font-size:22px; font-weight:700; padding:11px 0; border-bottom:1px solid var(--line); color:var(--text-hi);}
.mobile-menu > a:last-of-type{border-bottom:none;}
.mobile-menu .mm-cta{margin-top:22px; display:flex; flex-direction:column; gap:12px;}
.mobile-menu .mm-cta .btn{justify-content:center; width:100%; border-bottom:none;}
.mobile-menu .mm-cta .btn-primary,.mobile-menu .mm-cta .btn-dark{color:#FFEED5;}
.mobile-menu .mm-cta .btn-outline{color:#76B900; border:1px solid #76B900;}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-cta .btn-outline{display:none;}
  .hamburger{display:flex;}
}

/* ============ HERO (homepage) ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:140px; padding-bottom:80px;
  background:var(--ink);
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle 400px at var(--mouse-x, 50%) var(--mouse-y, 20%), rgba(var(--fg-rgb),0.05) 0%, rgba(var(--fg-rgb),0) 80%);
  pointer-events:none;
  transition:background 0.3s ease;
  will-change:background;
}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; width:100%;}
.hero-copy h1{
  font-size:clamp(40px, 5.6vw, 80px);
  font-weight:800; letter-spacing:-0.02em;
  color:var(--text-hi);
  max-width:720px;
  position:relative;
  z-index:3;
}
.hero-copy h1 .accent{color:var(--text-hi); position:relative; display:inline-block;}
.hero-sub{
  margin-top:39px; font-size:19px; line-height:1.6; font-weight:400;
  color:var(--text-mid); max-width:65ch;
  position:relative; z-index:3;
}
.hero-ctas{margin-top:57px; display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:3;}
.hero-trust{
  margin-top:45px; font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; color:var(--text-mid); display:flex;
  align-items:center; gap:10px; flex-wrap:wrap;
  position:relative; z-index:3;
}
.hero-trust .dot{width:4px; height:4px; border-radius:50%; background:var(--text-mid);}
.hero-visual-label{
  position:absolute; bottom:26px; right:0;
  font-family:var(--mono); font-size:11px;
  color:var(--text-mid); letter-spacing:.08em;
  text-align:right; z-index:2;
  opacity:0.7;
  transition:opacity 0.3s ease;
}
.hero:hover .hero-visual-label{opacity:1;}
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;}
  .hero{min-height:auto; padding-bottom:90px;}
}
@media (max-width:640px){
  .hero-trust{flex-direction:column; align-items:flex-start; gap:6px;}
  .hero-trust .dot{display:none;}
}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{
  position:relative; padding-top:180px; padding-bottom:96px; overflow:hidden;
  background:var(--ink);
}
.page-hero-inner{position:relative; z-index:2;}
.breadcrumb{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--text-mid);
  display:flex; align-items:center; gap:8px; margin-bottom:42px; flex-wrap:wrap;
}
.breadcrumb a{color:var(--text-mid); transition:color var(--motion); padding:6px 0; display:inline-block;}
.breadcrumb a:hover{color:var(--text-hi);}
.breadcrumb .sep{color:var(--text-mid); opacity:.5;}
.breadcrumb .current{color:var(--text-hi);}
.page-hero h1{font-size:clamp(34px,4.6vw,60px); font-weight:800; letter-spacing:-0.02em; color:var(--text-hi); max-width:760px;}
.page-hero-sub{margin-top:33px; font-size:17px; line-height:1.65; color:var(--text-mid); max-width:65ch;}
.page-hero-meta{margin-top:51px; display:flex; gap:10px; flex-wrap:wrap;}
.status-chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:transparent; color:var(--text-mid);
}
.status-chip.on{background:var(--solid-bg); color:var(--solid-fg); border-color:var(--solid-bg);}
@media (max-width:768px){ .page-hero{padding-top:148px; padding-bottom:70px;} }

/* ============ CALLOUT / GENERIC-CONTEXT NOTE ============ */
.callout{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(var(--fg-rgb),.025); overflow:hidden;
}
.callout .callout-head{
  display:flex; align-items:center; gap:12px;
  padding:20px 32px; border-bottom:1px solid var(--line);
  background:rgba(var(--fg-rgb),.025);
}
.callout .callout-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line); color:var(--text-mid);
  transition:transform var(--motion), border-color var(--motion), color var(--motion);
}
.callout .callout-icon svg{width:14px; height:14px;}
.callout:hover .callout-icon{transform:scale(1.12) rotate(8deg); border-color:var(--text-hi); color:var(--text-hi);}
.callout .callout-label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-mid); font-weight:500;
}
.callout .callout-body{padding:34px 32px 38px;}
.callout .callout-body p{font-size:16px; line-height:1.8; color:var(--text-hi); font-weight:400; letter-spacing:0; max-width:66ch;}
.callout .callout-body p.callout-sub{
  margin-top:22px; padding-top:22px; border-top:1px dashed var(--line);
  font-size:14px; line-height:1.7; color:var(--text-mid); max-width:64ch;
}
.callout-paper .callout-head{background:rgba(var(--fg-rgb),.02);}
.callout-paper .callout-icon{color:var(--text-ink-mid);}
.callout-paper:hover .callout-icon{color:var(--text-ink); border-color:var(--text-ink);}
.callout-paper .callout-label{color:var(--text-ink-mid);}
.callout-paper .callout-body p{color:var(--text-ink);}
.callout-paper .callout-body p.callout-sub{color:var(--text-ink-mid);}
@media (max-width:640px){
  .callout .callout-head{padding:18px 22px;}
  .callout .callout-body{padding:26px 22px 30px;}
  .callout .callout-label{font-size:10.5px;}
  .callout .callout-body p{font-size:15px;}
}

/* ============ FACT GRID ============ */
.fact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:42px;}
.fact-item{
  padding:48px 42px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(var(--fg-rgb),.03);
  box-shadow:0 8px 24px rgba(var(--fg-rgb),0);
  transition:transform var(--motion-lift), border-color var(--motion), background var(--motion), box-shadow var(--motion-lift), color var(--motion);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.fact-item::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, rgba(var(--fg-rgb),0) 0%, var(--text-hi) 50%, rgba(var(--fg-rgb),0) 100%);
  opacity:0; transition:opacity var(--motion);
}
.fact-label{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--text-mid); text-transform:uppercase; font-weight:600; transition:color var(--motion);}
.fact-val{font-family:var(--display); font-size:32px; font-weight:800; margin-top:12px; color:var(--text-hi); letter-spacing:-0.01em; transition:color var(--motion);}
.band-paper .fact-item{background:rgba(var(--fg-rgb),.03);}
/* Cards below are plain, non-interactive divs — the lift/tint on hover is
   a mouse-only affordance. Gated to real hover devices so touch doesn't
   fall into the browser's "sticky hover" approximation (tap once, the
   effect can linger or fail to clear until an unrelated tap elsewhere —
   reads as "hover is slow" or "sometimes doesn't animate"). */
@media (hover:hover) and (pointer:fine){
  .fact-item:hover{
    border-color:var(--text-mid);
    background:rgba(var(--fg-rgb),.06);
    box-shadow:0 8px 24px rgba(var(--fg-rgb),.1);
    transform:translateY(-6px) scale(1.01);
  }
  .fact-item:hover::before{opacity:1;}
  .band-paper .fact-item:hover{background:rgba(var(--fg-rgb),.06);}
}
.band-paper .fact-val{color:var(--text-ink);}
.band-paper .fact-label{color:var(--text-ink-mid);}
@media (max-width:700px){ .fact-grid{grid-template-columns:1fr 1fr; gap:22px;} .fact-item{padding:28px 24px;} }

/* ============ DATA TABLE ============ */
.data-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);}
.data-table{width:100%; border-collapse:collapse; min-width:560px;}
.data-table th, .data-table td{text-align:left; padding:18px 22px; font-size:14.5px; line-height:1.5;}
.data-table thead th{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-mid); border-bottom:1px solid var(--line); font-weight:500;
}
.data-table tbody tr{border-bottom:1px solid var(--line); transition:background var(--motion);}
.data-table tbody tr:hover{background:rgba(var(--fg-rgb),.03);}
.data-table tbody tr:last-child{border-bottom:none;}
.data-table td{color:var(--text-mid);}
.data-table td.strong{color:var(--text-hi); font-weight:600; font-family:var(--display);}
.band-paper .data-table thead th{color:var(--text-ink-mid);}
.band-paper .data-table td{color:var(--text-ink-mid);}
.band-paper .data-table td.strong{color:var(--text-ink);}
@media (max-width:700px){ .data-table th, .data-table td{padding:14px 16px; font-size:13.5px;} }

/* ============ RELATED / CONTINUE EXPLORING ============ */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.related-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:42px 36px;
  transition:transform var(--motion-lift), border-color var(--motion), background var(--motion), box-shadow var(--motion-lift), color var(--motion);
  background:rgba(var(--fg-rgb),.02); box-shadow:0 10px 28px rgba(var(--fg-rgb),0); display:block;
}
.related-card:focus-visible{transform:translateY(-6px) scale(1.01); border-color:var(--text-mid); background:rgba(var(--fg-rgb),.05); box-shadow:0 10px 28px rgba(var(--fg-rgb),.1);}
.related-card .rc-label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-mid); text-transform:uppercase; margin-bottom:10px; transition:color var(--motion);}
.related-card h3{font-size:19px; margin-bottom:8px; color:var(--text-ink); transition:color var(--motion);}
.band-dark .related-card h3{color:var(--text-hi);}
.related-card p{font-size:14px; line-height:1.55; color:var(--text-ink-mid); transition:color var(--motion);}
.band-dark .related-card p{color:var(--text-mid);}
.related-card .rc-arrow{margin-top:16px; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-ink); transition:color var(--motion);}
.band-dark .related-card .rc-arrow{color:var(--text-hi);}
.related-card .rc-arrow svg{width:14px; height:14px; transition:transform var(--motion);}
.related-card:focus-visible .rc-arrow svg{transform:translateX(3px);}
@media (hover:hover) and (pointer:fine){
  .related-card:hover{transform:translateY(-6px) scale(1.01); border-color:var(--text-mid); background:rgba(var(--fg-rgb),.05); box-shadow:0 10px 28px rgba(var(--fg-rgb),.1);}
  .related-card:hover .rc-arrow svg{transform:translateX(3px);}
}
@media (max-width:800px){ .related-grid{grid-template-columns:1fr;} }

/* ============ WHY / CARDS GRID ============ */
.section-head{max-width:65ch; margin-bottom:96px;}
.section-head h2{font-size:clamp(30px,3.6vw,48px); font-weight:800; letter-spacing:-0.02em;}
.section-head p{margin-top:18px; font-size:17px; line-height:1.65; color:var(--text-mid);}
.band-paper .section-head p{color:var(--text-ink-mid);}

.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.why-card{background:var(--paper); padding:57px 45px; transition:background var(--motion), transform var(--motion-lift), color var(--motion); position:relative; min-height:230px; display:flex; flex-direction:column; justify-content:space-between;}
.why-card .wc-icon{width:34px; height:34px; color:var(--text-ink); margin-bottom:20px; transition:transform .45s var(--ease), color var(--motion);}
.why-card h3{font-size:19px; margin-bottom:10px; color:var(--text-ink); transition:color var(--motion);}
.why-card p{font-size:14.5px; line-height:1.55; color:var(--text-ink-mid); transition:color var(--motion);}
.why-card .wc-num{position:absolute; top:34px; right:30px; font-family:var(--mono); font-size:12px; color:var(--text-ink-mid); opacity:.6; transition:color var(--motion);}
@media (hover:hover) and (pointer:fine){
  .why-card:hover{background:var(--paper-2); transform:translateY(-4px) scale(1.01);}
  .why-card:hover .wc-icon{transform:scale(1.15) rotate(-8deg);}
}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* ============ LAYER 1 STACK ============ */
.stack-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:96px; align-items:start;}
.stack{display:flex; flex-direction:column; gap:2px;}
.stack-layer{
  background:rgba(var(--fg-rgb),.03); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 26px; cursor:pointer;
  transition:background var(--motion), border-color var(--motion), color var(--motion);
}
.stack-layer.active{background:rgba(var(--fg-rgb),.06); border-color:var(--text-hi);}
@media (hover:hover) and (pointer:fine){
  .stack-layer:hover{background:rgba(var(--fg-rgb),.05); border-color:var(--text-mid);}
}
.stack-top{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.stack-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text-mid); transition:color var(--motion);}
.stack-title{font-family:var(--display); font-weight:700; font-size:19px; margin-top:6px; color:var(--text-hi); transition:color var(--motion);}
.stack-chev{width:16px; height:16px; color:var(--text-mid); transition:transform var(--motion), color var(--motion);}
.stack-layer.active .stack-chev{transform:rotate(180deg); color:var(--text-hi);}
.stack-body{max-height:0; overflow:hidden; transition:max-height .22s var(--ease), margin-top .22s var(--ease); margin-top:0;}
.stack-layer.active .stack-body{max-height:240px; margin-top:14px;}
.stack-body p{font-size:14.5px; line-height:1.6; color:var(--text-mid); max-width:460px;}
.stack-connector{width:1px; height:14px; background:linear-gradient(var(--text-mid), transparent); margin-left:26px;}
.stack-diagram{
  position:relative; aspect-ratio:1/1; max-width:460px; margin:0 auto; width:100%;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); padding:24px;
}
.stack-cta{margin-top:51px;}
@media (max-width:900px){ .stack-wrap{grid-template-columns:1fr;} .stack-diagram{order:-1; max-width:340px;} }

/* ---- stack diagram visual: validator mesh → L1 core → contracts → apps ---- */
.stack-diagram-svg{ width:100%; height:100%; display:block; overflow:visible; }
.stack-band-shape{
  fill:rgba(var(--fg-rgb),.03); stroke:var(--line); stroke-width:1;
  transition:fill var(--motion), stroke var(--motion), stroke-width var(--motion);
}
.stack-band.is-active .stack-band-shape{
  fill:rgba(var(--fg-rgb),.07); stroke:var(--text-hi); stroke-width:1.6;
}
.stack-band-icon{ color:var(--text-mid); transition:color var(--motion), transform var(--motion); transform-box:fill-box; transform-origin:center; }
.stack-band.is-active .stack-band-icon{ color:var(--text-hi); transform:scale(1.1); }
.stack-band-mark{
  fill:#74B00B; opacity:.5;
  transition:opacity var(--motion), filter var(--motion);
}
.stack-band.is-active .stack-band-mark{
  opacity:1; filter:drop-shadow(0 0 14px rgba(116,176,11,.5));
}
.stack-connector-line{ stroke:var(--line); stroke-width:1; }
.stack-pulse{
  fill:#74B00B;
  animation:stack-flow 2.4s linear infinite;
}
@keyframes stack-flow{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(-58px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .stack-pulse{ animation:none; opacity:.7; }
}

/* ============ PRINCIPLES ============ */
.principles-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.principle{
  display:grid; grid-template-columns:90px 1fr 40px; align-items:center; gap:24px;
  padding:51px 6px; border-bottom:1px solid var(--line);
  transition:background var(--motion), padding-left var(--motion);
  cursor:default;
}
.principle-num{font-family:var(--mono); font-size:14px; color:var(--text-mid);}
.principle-body h3{font-size:22px; color:var(--text-ink); margin-bottom:8px; font-weight:700;}
.principle-body p{font-size:15px; line-height:1.6; color:var(--text-ink-mid); max-width:65ch;}
.principle-icon{width:30px; height:30px; color:var(--text-ink-mid); opacity:.55; transition:opacity var(--motion), transform var(--motion), color var(--motion);}
.principles-list.on-dark{border-top-color:var(--line);}
.principles-list.on-dark .principle{border-bottom-color:var(--line);}
.principles-list.on-dark .principle-body h3{color:var(--text-hi);}
.principles-list.on-dark .principle-body p{color:var(--text-mid);}
.principles-list.on-dark .principle-icon{color:var(--text-mid);}
@media (hover:hover) and (pointer:fine){
  .principle:hover{background:rgba(var(--fg-rgb),.04); padding-left:16px;}
  .principle:hover .principle-icon{opacity:1; transform:rotate(8deg) scale(1.15); color:var(--text-ink);}
  .principles-list.on-dark .principle:hover{background:rgba(var(--fg-rgb),.04);}
  .principles-list.on-dark .principle:hover .principle-icon{color:var(--text-hi);}
}
@media (max-width:700px){
  .principle{grid-template-columns:44px 1fr; grid-template-rows:auto auto;}
  .principle-icon{display:none;}
}

/* ============ BANGLADESH MAP ============ */
.map-section{position:relative;}
.map-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.map-copy{order:1;}
.map-canvas-wrap{order:2; position:relative; aspect-ratio:520/580; max-width:460px; margin:0 auto; width:100%;}
.map-copy p{font-size:17px; line-height:1.7; color:var(--text-mid); max-width:65ch; margin-bottom:20px;}
.map-note{font-family:var(--mono); font-size:12px; color:var(--text-mid); margin-top:24px; line-height:1.6;}
@media (max-width:900px){
  .map-grid{grid-template-columns:1fr; gap:48px;}
  .map-canvas-wrap{order:-1; max-width:320px;}
}

/* Bangladesh globe — a stylised, conceptual "network globe": a slowly
   spinning wireframe ring around a simplified BD silhouette, with each
   city pulsing like a live node, not a literal map. */
.bd-map{ width:100%; height:100%; overflow:visible; }
.bd-map-lat{ fill:none; stroke:var(--line); stroke-width:1; opacity:.32; }
.bd-map-ring{ fill:none; stroke:var(--line); stroke-width:1; opacity:.6; }
.bd-map-orbit{
  fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:1.5 7; opacity:.5;
  transform-box:fill-box; transform-origin:center;
  animation:bd-orbit-spin 70s linear infinite;
}
.bd-map-country{
  fill:rgba(var(--fg-rgb),.04); stroke:var(--line); stroke-width:1.25;
  stroke-linejoin:round; stroke-linecap:round;
}
.bd-city-ping{
  fill:none; stroke:var(--text-ink); stroke-width:1.3; opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:bd-ping 3.4s ease-out infinite;
}
.bd-city-dot{
  fill:var(--text-ink); transition:transform var(--motion);
  transform-box:fill-box; transform-origin:center;
}
.bd-city-label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  fill:var(--text-mid); transition:fill var(--motion);
}
.bd-city:hover .bd-city-dot{ transform:scale(1.7); }
.bd-city:hover .bd-city-label{ fill:var(--text-ink); }
.map-canvas-wrap:hover .bd-map-orbit{ animation-duration:18s; }
@keyframes bd-orbit-spin{ to{ transform:rotate(360deg); } }
@keyframes bd-ping{
  0%{ transform:scale(.5); opacity:.55; }
  75%{ opacity:0; }
  100%{ transform:scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .bd-map-orbit, .bd-city-ping{ animation:none; }
  .bd-city-ping{ opacity:0; }
}

/* ============ DEVELOPER SECTION ============ */
.dev-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px;}
.dev-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:48px 39px;
  transition:transform var(--motion-lift), border-color var(--motion), background var(--motion), box-shadow var(--motion-lift), color var(--motion);
  background:rgba(var(--fg-rgb),.02); box-shadow:0 10px 28px rgba(var(--fg-rgb),0);
}
.dev-icon{width:32px; height:32px; color:var(--text-hi); margin-bottom:22px; transition:transform .45s var(--ease), color var(--motion);}
.dev-card h3{font-size:18px; margin-bottom:10px; transition:color var(--motion);}
.dev-card p{font-size:14px; line-height:1.55; color:var(--text-mid); margin-bottom:16px; transition:color var(--motion);}
.dev-tag{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text-mid); border:1px dashed var(--line); padding:6px 10px; border-radius:var(--radius-sm); display:inline-block; transition:color var(--motion), border-color var(--motion);}
.dev-cta-row{margin-top:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
@media (hover:hover) and (pointer:fine){
  .dev-card:hover{transform:translateY(-6px) scale(1.01); border-color:var(--text-mid); background:rgba(var(--fg-rgb),.05); box-shadow:0 10px 28px rgba(var(--fg-rgb),.1);}
  .dev-card:hover .dev-icon{transform:scale(1.15) translateY(-3px);}
}
@media (max-width:900px){ .dev-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .dev-grid{grid-template-columns:1fr;} }

/* ============ ECOSYSTEM ============
   Visual language: an armillary "Ferris wheel" of orbiting categories —
   two softly offset rings, spokes that taper like polished rods, and
   node "plates" with real resting shadow. Each plate carries its own
   info card, which opens instantly beside it on hover/focus — there is
   no shared panel elsewhere on the page to keep in sync. */
.eco-wrap{
  position:relative; max-width:760px; margin:0 auto; aspect-ratio:1/1;
  background:transparent;
}
/* A bottom-placed tooltip opens well past the node it belongs to (see
   .eco-tooltip--bottom above) — for nodes already in the lower half of the
   wheel, that can land 70-110px below the wheel's own bounding box. Any
   content placed right after .eco-wrap needs at least that much clearance
   or an open tooltip visually collides with it. Mobile only ever opens
   top/bottom (see initWheel in site.js), so more nodes can trigger this,
   and the narrower tooltip wraps to more lines — it needs the larger gap. */
.eco-cta-row{ margin-top:150px; }
@media (max-width:700px){ .eco-cta-row{ margin-top:170px; } }
.eco-line{
  position:absolute; left:50%; top:50%; height:1px;
  background:linear-gradient(90deg, rgba(var(--fg-rgb),.32), var(--line));
  transform-origin:0 50%;
  transition:background var(--motion), height var(--motion);
  pointer-events:none;
}
.eco-line.active{ background:linear-gradient(90deg, var(--text-hi), rgba(var(--fg-rgb),.55)); height:1.5px; }
.eco-node{
  position:absolute; transform:translate(-50%,-50%) scale(1); text-align:center; cursor:pointer;
  padding:10px 14px; border-radius:var(--radius-sm);
  transition:transform var(--motion), background var(--motion);
}
.eco-node:focus-visible, .eco-node.active{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(var(--fg-rgb),.05);
  z-index:5;
}
.eco-node .eco-dot{
  display:block; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--line);
  margin:0 auto 10px; transition:all var(--motion); position:relative;
  box-shadow:0 3px 8px rgba(var(--fg-rgb),.1);
}
.eco-node .eco-dot::before{
  content:''; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%);
}
.eco-node .eco-dot::after{
  content:''; position:absolute; top:50%; left:50%; width:14px; height:14px;
  border-radius:50%; border:1.5px solid var(--text-hi);
  transform:translate(-50%,-50%) scale(1); opacity:0; pointer-events:none;
}
.eco-node:focus-visible .eco-dot, .eco-node.active .eco-dot{
  background:var(--solid-bg); border-color:var(--solid-bg);
  box-shadow:0 0 0 6px rgba(var(--fg-rgb),.07), 0 6px 16px rgba(var(--fg-rgb),.24);
}
.eco-node:focus-visible .eco-dot::after, .eco-node.active .eco-dot::after{
  animation:eco-ring-pulse 1.5s var(--ease) infinite;
}
@keyframes eco-ring-pulse{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.55; }
  100%{ transform:translate(-50%,-50%) scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .eco-node .eco-dot::after{ animation:none !important; opacity:0 !important; } }
.eco-label{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--text-ink-mid); white-space:nowrap; transition:color var(--motion);}
.eco-node:focus-visible .eco-label, .eco-node.active .eco-label{color:var(--text-ink); font-weight:500;}

/* ---- per-node tooltip card: pops beside the plate that owns it ---- */
.eco-tooltip{
  position:absolute; z-index:10; width:max-content; max-width:250px;
  text-align:left; pointer-events:none;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:16px 18px;
  opacity:0; transition:opacity .18s ease-out, transform .18s ease-out;
}
.eco-node:focus-visible .eco-tooltip, .eco-node.active .eco-tooltip{
  opacity:1;
}
.eco-tooltip-name{
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.01em;
  color:var(--text-ink); margin-bottom:5px;
}
.eco-tooltip-text{ font-size:13px; line-height:1.55; color:var(--text-mid); }
.eco-tooltip::after{
  content:''; position:absolute; width:9px; height:9px; background:var(--paper);
  transform:rotate(45deg);
}
.eco-tooltip--right{ left:100%; top:50%; transform:translate(16px,-50%) scale(.94); }
.eco-node:focus-visible .eco-tooltip--right, .eco-node.active .eco-tooltip--right{ transform:translate(16px,-50%) scale(1); }
.eco-tooltip--right::after{ left:-5px; top:50%; margin-top:-5px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); }
.eco-tooltip--left{ right:100%; top:50%; transform:translate(-16px,-50%) scale(.94); }
.eco-node:focus-visible .eco-tooltip--left, .eco-node.active .eco-tooltip--left{ transform:translate(-16px,-50%) scale(1); }
.eco-tooltip--left::after{ right:-5px; top:50%; margin-top:-5px; border-top:1px solid var(--line); border-right:1px solid var(--line); }
.eco-tooltip--bottom{ top:100%; left:50%; transform:translate(calc(-50% + var(--tt-nudge, 0px)),16px) scale(.94); }
.eco-node:focus-visible .eco-tooltip--bottom, .eco-node.active .eco-tooltip--bottom{ transform:translate(calc(-50% + var(--tt-nudge, 0px)),16px) scale(1); }
.eco-tooltip--bottom::after{ top:-5px; left:calc(50% - var(--tt-nudge, 0px)); margin-left:-5px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.eco-tooltip--top{ bottom:100%; left:50%; transform:translate(calc(-50% + var(--tt-nudge, 0px)),-16px) scale(.94); }
.eco-node:focus-visible .eco-tooltip--top, .eco-node.active .eco-tooltip--top{ transform:translate(calc(-50% + var(--tt-nudge, 0px)),-16px) scale(1); }
.eco-tooltip--top::after{ bottom:-5px; left:calc(50% - var(--tt-nudge, 0px)); margin-left:-5px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
@media (prefers-reduced-motion: reduce){ .eco-tooltip{ transition:opacity .12s linear; } }

/* Hover triggers are opt-in for genuine mouse/trackpad input only. Coarse
   (touch) pointers don't get a real :hover exit event on tap — many mobile
   browsers leave :hover "stuck" on whatever was last tapped, which used to
   let two tooltips (one stuck via :hover, one opened via the .active class
   below) show at once. Touch already has its own correct open/close logic
   via the .active class (see initWheel's pointerup handler in site.js), so
   :hover only needs to exist here for devices that can actually hover. */
@media (hover:hover) and (pointer:fine){
  .eco-node:hover{
    transform:translate(-50%,-50%) scale(1.08);
    background:rgba(var(--fg-rgb),.05);
    z-index:5;
  }
  .eco-node:hover .eco-dot{
    background:var(--solid-bg); border-color:var(--solid-bg);
    box-shadow:0 0 0 6px rgba(var(--fg-rgb),.07), 0 6px 16px rgba(var(--fg-rgb),.24);
  }
  .eco-node:hover .eco-dot::after{
    animation:eco-ring-pulse 1.5s var(--ease) infinite;
  }
  .eco-node:hover .eco-label{color:var(--text-ink); font-weight:500;}
  .eco-node:hover .eco-tooltip{ opacity:1; }
  .eco-node:hover .eco-tooltip--right{ transform:translate(16px,-50%) scale(1); }
  .eco-node:hover .eco-tooltip--left{ transform:translate(-16px,-50%) scale(1); }
  .eco-node:hover .eco-tooltip--bottom{ transform:translate(calc(-50% + var(--tt-nudge, 0px)),16px) scale(1); }
  .eco-node:hover .eco-tooltip--top{ transform:translate(calc(-50% + var(--tt-nudge, 0px)),-16px) scale(1); }
}

.eco-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:130px; height:130px; border-radius:50%;
  background:var(--solid-bg);
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 12px 28px rgba(var(--fg-rgb),.18), 0 0 50px rgba(var(--fg-rgb),.2), inset 0 0 28px rgba(0,0,0,.4);
  padding:10px; overflow:hidden;
  animation:eco-pulse 3.5s ease-in-out infinite;
}
.eco-center-mark{
  width:88px; height:auto; display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(0,0,0,.35));
}
@keyframes eco-pulse{
  0%,100%{ box-shadow:0 12px 28px rgba(var(--fg-rgb),.18), 0 0 50px rgba(var(--fg-rgb),.2), inset 0 0 28px rgba(0,0,0,.4); }
  50%{ box-shadow:0 12px 28px rgba(var(--fg-rgb),.18), 0 0 70px rgba(var(--fg-rgb),.32), inset 0 0 28px rgba(0,0,0,.4); }
}
@media (prefers-reduced-motion: reduce){ .eco-center{ animation:none; } }
@media (max-width:700px){
  .eco-center{ width:80px; height:80px; }
  .eco-center-mark{ width:54px; }
  .eco-node{ padding:5px 6px; }
  .eco-label{font-size:9.5px; white-space:normal; overflow-wrap:break-word; max-width:92px; display:inline-block; line-height:1.25;}
  .eco-tooltip{ max-width:min(220px, 62vw); padding:13px 15px; }
  .eco-tooltip-name{ font-size:14px; }
  .eco-tooltip-text{ font-size:12.5px; }
}

/* ============ FOUNDATION SPLIT ============ */
.found-grid{display:grid; grid-template-columns:1fr 1fr; gap:105px; align-items:center;}
.found-copy p{font-size:17px; line-height:1.75; color:var(--text-mid); margin-bottom:30px; max-width:65ch;}
.found-facts{display:grid; grid-template-columns:1fr 1fr; gap:33px; margin-top:54px; max-width:440px;}
.found-fact-label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-mid); text-transform:uppercase;}
.found-fact-val{font-family:var(--display); font-size:22px; font-weight:700; margin-top:6px; color:var(--text-hi);}
.found-visual{
  position:relative; aspect-ratio:1/1; max-width:440px; margin:0 auto; width:100%;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:900px){ .found-grid{grid-template-columns:1fr;} .found-visual{order:-1;} }

/* Foundation emblem — the brand mark at the centre of the Foundation's
   three programs (network, research & policy, academy), slowly orbiting
   it. Pure SVG so it stays crisp and follows the theme tokens with no JS. */
.found-emblem{ width:72%; height:72%; overflow:visible; }
.found-emblem-ring{ fill:none; stroke:var(--line); stroke-width:1; }
.found-emblem-spoke{ stroke:var(--line); stroke-width:1; }
.found-emblem-node{ fill:var(--paper); stroke:var(--text-ink); stroke-width:2; }
.found-emblem-mark{ fill:var(--solid-fg); }
.found-emblem-orbit{
  transform-origin:100px 100px;
  animation:found-orbit 48s linear infinite;
}
.found-emblem-hub{
  fill:var(--solid-bg);
  transform-origin:100px 100px;
  animation:found-pulse 4s ease-in-out infinite;
}
@keyframes found-orbit{ to{ transform:rotate(360deg); } }
@keyframes found-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce){
  .found-emblem-orbit, .found-emblem-hub{ animation:none; }
}

/* Foundation contact card — a stylised office-locator map in the same
   line-art language as .bd-map, plus real coordinates and a directions
   link so the "exact location" claim stays genuinely checkable rather
   than purely decorative. */
.found-visual.office-map-card{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  overflow:hidden; padding:0;
}
.office-map-wrap{ flex:1; min-height:0; }
.office-map{ width:100%; height:100%; display:block; }
.office-grid line{ stroke:var(--line); stroke-width:1; opacity:.5; }
.office-road{ stroke:var(--line); stroke-width:1.5; opacity:.9; }
.office-road--minor{ opacity:.45; }
.office-road-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  fill:var(--text-mid);
}
.office-watermark{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  fill:var(--text-mid); opacity:.4;
}
.office-plot{ fill:rgba(var(--fg-rgb),.07); stroke:var(--line); stroke-width:1.25; }
/* Ground-level pulse — painted before .office-plot in the markup so the
   building silhouette occludes it, reading as a beacon rising from behind
   the plot rather than a stray ring fighting the rect for the same space. */
.office-ping{
  fill:none; stroke:var(--solid-bg); stroke-width:1.3; opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:office-ping 3s ease-out infinite;
}
.office-ping--delay{ animation-delay:1.5s; }
.office-pin{ fill:var(--solid-bg); }
.office-pin-hole{ fill:var(--card-bg, var(--paper)); }
.office-pin-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  fill:var(--text-hi);
}
.office-compass path{ fill:var(--line); }
.office-compass text{ font-family:var(--mono); font-size:10px; fill:var(--text-mid); }
@keyframes office-ping{
  0%{ transform:scale(.5); opacity:.5; }
  70%{ opacity:0; }
  100%{ transform:scale(2.4); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .office-ping{ animation:none; } }
.office-caption{
  display:flex; align-items:center; justify-content:center;
  padding:18px 22px; border-top:1px solid var(--line);
}
.office-caption .btn{ width:100%; justify-content:center; }

/* ============ RESEARCH CARDS ============ */
.research-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.research-card{border-top:2px solid var(--line); padding-top:36px;}
.research-card h3{font-size:20px; margin-bottom:12px; color:var(--text-ink);}
.research-card p{font-size:15px; line-height:1.65; color:var(--text-ink-mid);}
.research-card.on-dark{border-top-color:var(--text-hi);}
.research-card.on-dark h3{color:var(--text-hi);}
.research-card.on-dark p{color:var(--text-mid);}
@media (max-width:800px){ .research-grid{grid-template-columns:1fr;} }

/* ============ ROADMAP ============ */
.roadmap-track{position:relative; padding-left:2px;}
.roadmap-line{position:absolute; left:11px; top:8px; bottom:8px; width:1px; background:var(--line);}
.rm-item{position:relative; padding:0 0 69px 46px;}
.rm-item:last-child{padding-bottom:0;}
.rm-dot{position:absolute; left:0; top:2px; width:23px; height:23px; border-radius:50%; border:1.5px solid var(--line); background:var(--ink); display:flex; align-items:center; justify-content:center;}
.rm-dot::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--text-mid);}
.rm-item.underway .rm-dot{border-color:var(--solid-bg);}
.rm-item.underway .rm-dot::after{background:var(--solid-bg); box-shadow:0 0 8px rgba(var(--fg-rgb),.5);}
.rm-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.rm-title{font-family:var(--display); font-weight:700; font-size:20px; color:var(--text-hi);}
.rm-status{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent; color:var(--text-mid);}
.rm-item.underway .rm-status{background:var(--solid-bg); color:var(--solid-fg); border-color:var(--solid-bg);}
.rm-desc{margin-top:8px; font-size:14.5px; color:var(--text-mid); max-width:65ch; line-height:1.55;}

/* ============ COMMUNITY ============ */
.comm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.comm-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:42px 36px;
  transition:transform var(--motion-lift), border-color var(--motion), background var(--motion), box-shadow var(--motion-lift), color var(--motion);
  background:var(--paper); box-shadow:0 8px 22px rgba(var(--fg-rgb),0);
}
.comm-card h3{font-size:17px; margin-bottom:8px; color:var(--text-ink); transition:color var(--motion);}
.comm-card p{font-size:13.5px; color:var(--text-ink-mid); line-height:1.5; transition:color var(--motion);}
@media (hover:hover) and (pointer:fine){
  .comm-card:hover{transform:translateY(-4px) scale(1.01); border-color:var(--text-mid); background:var(--paper-2); box-shadow:0 8px 22px rgba(var(--fg-rgb),.08);}
}
.comm-cta-wrap{text-align:center; margin-top:84px;}
@media (max-width:800px){ .comm-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .comm-grid{grid-template-columns:1fr;} }

/* ============ FINAL CTA ============ */
.final-cta{position:relative; text-align:center; padding:255px 0; overflow:hidden;}
.final-inner{position:relative; z-index:2;}
.final-cta h2{font-size:clamp(34px,5vw,60px); font-weight:800; letter-spacing:-0.02em; max-width:760px; margin:0 auto;}
.final-cta p{margin-top:22px; font-size:17px; color:var(--text-mid); max-width:65ch; margin-left:auto; margin-right:auto;}
.final-btns{margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
@media (max-width:768px){ .final-cta{padding:165px 0;} }

/* ============ FOOTER ============ */
footer{background:transparent; padding:135px 0 34px; border-top:1px solid var(--line);}
.footer-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:60px; padding-bottom:96px; border-bottom:1px solid var(--line);}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{font-size:14px; color:var(--text-mid); max-width:280px; line-height:1.6;}
.footer-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid); margin-bottom:18px;}
.footer-col a, .footer-col span.soon{display:block; font-size:14.5px; color:var(--text-mid); padding:10px 0; transition:color var(--motion); min-height:44px; display:flex; align-items:center;}
.footer-col a:hover{color:var(--text-hi);}
.footer-col span.soon{color:var(--text-mid); opacity:.5; cursor:default;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:30px; flex-wrap:wrap; gap:14px;}
.footer-bottom p{font-size:13px; color:var(--text-mid);}
.footer-legal{display:flex; gap:24px; font-size:13px; color:var(--text-mid);}
.footer-legal a{padding:10px 0; display:inline-block;}
.footer-legal a:hover{color:var(--text-hi);}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1/-1; margin-bottom:10px;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr 1fr; gap:38px;} }

/* magnetic btn helper */
.magnetic{will-change:transform; transition:background var(--motion), color var(--motion), box-shadow var(--motion), border-color var(--motion);}

/* skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--solid-bg); color:var(--solid-fg); padding:12px 18px; z-index:200; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* generic two-column copy layout used on several subpages */
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:105px; align-items:start;}
@media (max-width:900px){ .split-grid{grid-template-columns:1fr; gap:48px;} }
.copy-block p{font-size:16px; line-height:1.75; color:var(--text-mid); margin-bottom:27px; max-width:65ch;}
.band-paper .copy-block p{color:var(--text-ink-mid);}
.copy-block h3{font-size:20px; margin:42px 0 18px; color:var(--text-hi);}
.band-paper .copy-block h3{color:var(--text-ink);}

/* numbered mini-list used for objectives / values */
.mini-list{display:flex; flex-direction:column; gap:33px;}
.mini-list li{display:grid; grid-template-columns:34px 1fr; gap:16px;}
.mini-list .mn-num{font-family:var(--mono); font-size:13px; color:var(--text-mid); padding-top:3px;}
.mini-list h4{font-size:16.5px; font-weight:700; color:var(--text-hi); margin-bottom:6px;}
.band-paper .mini-list h4{color:var(--text-ink);}
.mini-list p{font-size:14.5px; line-height:1.6; color:var(--text-mid);}

.band-paper .mini-list p{color:var(--text-ink-mid);}

/* ============ LEGAL CONTENT (Privacy / Terms / Accessibility) ============ */
/* Table of contents — reuses the .callout shell so it inherits its themed
   card colours automatically; only the link list inside is new. */
.toc-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:2px 32px;}
.toc-list a{display:block; padding:9px 2px; font-size:14px; line-height:1.4; color:var(--text-hi); border-bottom:1px dashed var(--line); transition:color var(--motion), padding-left var(--motion);}
.toc-list a:hover, .toc-list a:focus-visible{color:var(--text-mid); padding-left:6px;}
@media (max-width:700px){ .toc-list{grid-template-columns:1fr;} }

/* Bulleted / numbered clause lists — dash or numeral in the mono type-
   family, matching the eyebrow/status-chip label treatment elsewhere. */
.legal-list{display:flex; flex-direction:column; gap:14px; margin:20px 0;}
.legal-list li{position:relative; padding-left:28px; font-size:16px; line-height:1.7; color:var(--text-mid); max-width:66ch;}
.legal-list li::before{content:"—"; position:absolute; left:0; top:0; color:var(--text-hi); opacity:.5; font-family:var(--mono); font-size:14px;}
.legal-list.numbered{counter-reset:legal-counter;}
.legal-list.numbered li{counter-increment:legal-counter;}
.legal-list.numbered li::before{content:counter(legal-counter) "."; opacity:.7;}
.legal-list strong{color:var(--text-hi); font-weight:600;}
.band-paper .legal-list li{color:var(--text-ink-mid);}
.band-paper .legal-list li::before{color:var(--text-ink);}
.band-paper .legal-list strong{color:var(--text-ink);}

/* Section numbering + anchor targets: clause headings carry their own
   number in the copy so the TOC links and in-page heading text match
   exactly; scroll-margin keeps the fixed nav from covering a jumped-to
   heading (html already sets scroll-padding-top, this is the per-element
   equivalent for browsers/paths that rely on it instead). */
.legal-section h2{scroll-margin-top:110px;}
.legal-section .eyebrow{scroll-margin-top:110px;}