/* ============================================================================
   elderfacts.css — the ONE shared stylesheet for elderfacts.com
   FAITHFUL, component-for-component port of the founder-approved plan doc
   (EF-GTM-002-FINAL, dark console skin — plan/marketing-plan-final.src.html).

   FOUNDER DIRECTIVE 2026-07-15: the whole site is DARK now. The reference's
   dark graph-paper canvas is the GROUND for every page. There is no more
   light-default architecture and no [data-skin] token inversion — the DARK
   reference :root IS the site default, lifted verbatim. A surface that must be
   light (e.g. the sample-workup inner-document facsimile) scopes its OWN local
   tokens; it does not flip the base.

   Rules that govern this file:
   · Inter leads everywhere. JetBrains Mono lives ONLY in infographics and stat
     readouts — the .stat / .badge / .chip / .stn / .readout / .viz family.
   · Fraunces is available for display accents (.accent-serif, .dropcap).
   · Green = action. CTAs and interactive-affirmative states only.
   · The reference's ambient chassis IS the design: the dark graph-paper ground
     (dot-grain + masked 56px grid + top-right green bloom), the green radial
     glow layers, the layered panel shadows, tick-ruler stat tiles, the station
     dials, and ALL the entrance animations. Ported verbatim — the class NAMES
     are generalized for site use, the STYLE matches the reference's equivalent.
   · Document-only chrome (cover-meta, exhibit tabs, sign-off) was NOT carried
     over; its motion vocabulary (draw/pop/zoom/grow/sweep/arcv/dim/spin/travel/
     thunk) IS, as reusable utilities.
   ========================================================================= */

/* ================= tokens · dark graph-paper base (= DARK reference :root, verbatim) ================= */
:root{
  /* --- reference dark palette (lifted verbatim, marketing-plan-final.src.html) --- */
  --paper:#0C141C; --paper-2:#111B25; --card:#16222E; --card-2:#121D28;
  --navy:#E8ECEF; --navy-2:#C4D1DB;
  /* Apple-crisp prose hierarchy — one near-white tint at descending alpha (see _typography-research.md B3).
     Prose primary/body/secondary/faint ride these; --slate stays a deliberate cool hue for mono console readouts. */
  --text-1:#E8ECEF; --text-2:rgba(232,236,239,.62); --text-3:rgba(232,236,239,.34); --text-4:rgba(232,236,239,.20);
  --hairline:rgba(232,236,239,.12); --fill-1:rgba(232,236,239,.06);
  --ink:rgba(232,236,239,.82); --ink-2:rgba(232,236,239,.60);
  --slate:#93A9BC; --slate-2:#24384A; --slate-3:#1C2C3B; --line3:#31485C; --mut:rgba(232,236,239,.34);
  --green:#2ECC8F; --green-ink:#2ECC8F; --green-soft:rgba(46,204,143,.10); --green-deep:#1E7A55;
  --green-glow:rgba(46,204,143,.13); --green-dark:#0A2B1E;
  --facts:#2ECC8F; --brass:#B49A66; --bone:#EDF2EE;
  --red:#C7503C; --red-ink:#F0917B; --red-soft:rgba(199,80,60,.12);

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --nav-h:56px;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.28);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.42);

  /* spacing scale (doc rhythm) */
  --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:56px; --sp-6:96px;

  /* radii (dark reference) */
  --r-panel:14px; --r-tile:12px; --r-btn:9px;

  /* ---- ambient-chassis tokens (dark reference values) ---- */
  --glow-core:rgba(46,204,143,.20);        /* .dial::before / .glow inner stop */
  --glow-mid:rgba(46,204,143,.07);         /* .dial::before / .glow mid stop   */
  --grid-line:rgba(147,169,188,.055);      /* reference .cover::before graph hairline */
  --grid-strong:var(--slate-3);            /* stronger gantt column rule       */
  --rail-blur:10px;                        /* nav backdrop blur (dark ref)     */
  --stn-i-glow:rgba(46,204,143,.18);       /* station-badge disc halo          */

  --edge:var(--slate-3);                                /* rail/footer hairline */
  --tile-bg:linear-gradient(180deg,#16222E 0%,#131E29 100%);  /* = reference .cf/.stat ground */
  --dot:rgba(147,169,188,.055); --dot-stop:1px; --dot-size:28px;  /* reference body dot-grain */
  --bloom:rgba(46,204,143,.10);                         /* top-right green radial bloom (.cover) */
  --sel-ink:var(--green-dark);                          /* ::selection text */
  --cta-bg:var(--green); --cta-ink:var(--green-dark); --cta-glow:rgba(46,204,143,.28);
  --scroll-thumb:var(--line3); --scroll-thumb-hover:var(--mut);
  --stn-r:6px; --stn-i-r:6px;                           /* station badge shape */
  --stn-i-border:1px solid var(--line3);
  --stn-on-ink:var(--green); --stn-on-line:var(--green-deep); --stn-on-bg:var(--green-glow);
  --stn-on-i-bg:var(--green); --stn-on-i-ink:var(--green-dark);

  color-scheme:dark;
}

/* ================= base · the dark graph-paper ground (every page) =================
   Lifted from the reference: solid dark canvas + the .cover top-right green bloom
   (anchored to the page top) + the body dot-grain, and — promoted to a page-wide
   layer — the reference .cover::before 56px masked graph-grid. Three layers so
   EVERY page ground reads as dark graph paper, exactly as marketing-plan-final.html. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}   /* solid dark canvas, always fills the viewport */
body{color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto;font-feature-settings:"cv11";background-color:transparent;
  /* reference ground: top-right green bloom (.cover) anchored to page top + dot-grain */
  background-image:
    radial-gradient(1100px 520px at 84% -90px,var(--bloom),transparent 60%),
    radial-gradient(var(--dot) 1px,transparent var(--dot-stop));
  background-repeat:no-repeat,repeat;
  background-size:auto,var(--dot-size) var(--dot-size);
  background-position:center top,0 0}
/* the reference .cover::before graph-grid, promoted to a fixed page-wide backdrop:
   sits behind content, masked so it fades like blueprint paper; never scrolls, never
   adds a scrollbar. Verbatim 56px pitch + rgba(147,169,188,.055) hairline. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(132% 108% at 66% -4%,#000 0%,#000 44%,transparent 92%);
  mask-image:radial-gradient(132% 108% at 66% -4%,#000 0%,#000 44%,transparent 92%)}
::selection{background:var(--green);color:var(--sel-ink)}
a{color:var(--green-ink);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;border-radius:2px}
strong{font-weight:600;color:var(--navy)}
img{max-width:100%;height:auto}
svg{display:block}
svg text{font-family:var(--mono)} /* infographic text is mono by rule */
/* Apple tracking curve for headings — tight big, easing toward 0 as size drops (opt-in classes
   like .sec-title set their own; these catch bare/per-page h1/h2 that would otherwise under-track). */
h1,h2,h3,h4{font-family:var(--sans);font-optical-sizing:auto}
h1{letter-spacing:-.024em;line-height:1.04}
h2{letter-spacing:-.018em;line-height:1.10}

/* ================= brand mark · auto-flip the light-variant icon on dark ground =================
   Existing consumer pages ship the LIGHT icon markup inline (navy shield bars, white
   lens glass). On the dark ground those navy bars vanish, so recolor them to the
   reference DARK icon here — scoped to .mark and to pages NOT authored dark-native
   (pro/sample-workup keep data-skin="dark" as a "dark icon already inline" marker, so
   their correct dark marks are left untouched). circle[fill] targeting keeps the knockout
   mask's white rect safe; only the lens-glass circle flips. */
html:not([data-skin="dark"]) .mark [fill="#15315B"]{fill:#DCE7F1}       /* shield bars → bone */
html:not([data-skin="dark"]) .mark [stroke="#15315B"]{stroke:#DCE7F1}   /* lens ring + handle → bone */
html:not([data-skin="dark"]) .mark circle[fill="#FFFFFF"]{fill:#15315B} /* lens glass → navy (mask rect stays white) */
html:not([data-skin="dark"]) .mark [stroke="#A63A2B"]{stroke:#C7503C}   /* lens X → dark-ref red */

/* ================= themed scrollbars — one style, both axes, every scroller ================= */
html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--paper)}
.scroll-x,.viz,.table-wrap{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track{background:color-mix(in srgb,var(--paper-2) 45%,transparent);border-radius:999px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}
::-webkit-scrollbar-corner{background:transparent}

/* ================= the lockup (T-04, tightened per founder correction) =================
   lowercase elder(ink)facts(green), Inter 600 -0.03em, The Reveal mark AFTER "facts".
   Gap spec: ~0.40 cap-height of visible whitespace between the "s" and the mark.
   The mark's viewBox carries ~12.5% left bearing, so the flex gap compensates:
   gap = .28em − .125 × mark-width  →  ≈2px at nav size, ≈22px at hero max. */
.lockup{--mark:22px;display:inline-flex;align-items:center;gap:calc(.28em - .125*var(--mark));
  font:600 17px/1 var(--sans);letter-spacing:-.03em;color:var(--bone);text-decoration:none;white-space:nowrap}
.lockup .mark{flex:0 0 auto;order:2;width:var(--mark);height:var(--mark)}  /* mark AFTER the wordmark */
.lockup .facts{color:var(--facts);text-shadow:0 0 9px rgba(46,204,143,.38)}
.lockup.sm{--mark:20px;font-size:15px}
.lockup.lg{--mark:clamp(42px,6.4vw,84px);font-size:clamp(50px,8.8vw,116px);line-height:.95;letter-spacing:-.03em}
.lockup.lg .mark{filter:drop-shadow(0 2px 16px rgba(46,204,143,.18))}
.lockup.lg .facts{text-shadow:0 0 20px rgba(46,204,143,.30),0 0 48px rgba(46,204,143,.14)}
/* #2 · the brand glow "slightly changes" — a slow breathing of the --green-glow
   text-shadow. Static shadow above is the resting state (reduced-motion keeps it);
   the animation is enabled only in the motion media query below. */
@keyframes factsGlow{0%,100%{text-shadow:0 0 9px rgba(46,204,143,.34)}
  50%{text-shadow:0 0 15px rgba(46,204,143,.60),0 0 30px rgba(46,204,143,.20)}}
@keyframes factsGlowLg{0%,100%{text-shadow:0 0 20px rgba(46,204,143,.28),0 0 48px rgba(46,204,143,.12)}
  50%{text-shadow:0 0 32px rgba(46,204,143,.48),0 0 68px rgba(46,204,143,.22)}}

/* green "gleam" — a bright-green band breathing over green letters, clipped to text;
   ported from a Market-Intelligence gleam, brand-green instead of silver→white.
   Resting (reduced-motion) leaves the band centred. */
@keyframes gleamSweep{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.gleam-green{background-image:linear-gradient(105deg,#2ECC8F 0%,#2ECC8F 30%,#7FE9BE 45%,#DBFFF0 50%,#7FE9BE 55%,#2ECC8F 70%,#2ECC8F 100%);
  background-size:250% 100%;background-position:50% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(46,204,143,.30));animation:gleamSweep 24s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gleam-green{animation:none}}

/* ================= nav bar ================= */
.rail{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(var(--rail-blur));border-bottom:1px solid var(--edge)}
.rail-in{max-width:1200px;margin:0 auto;padding:0 24px;height:var(--nav-h);display:flex;align-items:center;gap:16px;
  overflow-x:auto;scrollbar-width:none}
.rail-in::-webkit-scrollbar{display:none}
.rail-in .lockup{flex:0 0 auto;margin-right:10px}
.rail-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.rail-links a{flex:0 0 auto;font:500 13.5px/1 var(--sans);letter-spacing:-.005em;color:var(--ink-2);text-decoration:none;
  padding:9px 12px;border-radius:8px;transition:color .15s,background .15s}
.rail-links a:hover{color:var(--navy);background:var(--card)}
.rail-links a.on{color:var(--navy);font-weight:600}
.rail-cta{flex:0 0 auto;margin-left:6px}
@media(max-width:720px){
  .rail-in{overflow:visible;gap:10px}
  .rail-links{flex:1 1 auto;min-width:0;margin-left:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail-links::-webkit-scrollbar{display:none}
  .rail-cta{flex:0 0 auto;margin-left:8px}
}

/* ================= #3 · "you are here" station progress rail =================
   Lifted from the reference station-index nav (A–I .stn tabs + travelling .progress
   underline). A reusable, OPT-IN sticky sub-rail a content page includes below the
   main nav, listing its own sections as <a class="stn" data-ex="ID"><i>A</i>Label</a>.
   The shared JS (partials §5) marks the current section .on via IntersectionObserver
   and drives #progress as the reader scrolls. Sits directly under .rail (top:nav-h). */
.srail{position:sticky;top:var(--nav-h);z-index:49;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(var(--rail-blur));border-bottom:1px solid var(--edge)}
.srail-in{position:relative;max-width:1200px;margin:0 auto;padding:0 24px;height:46px;display:flex;align-items:center;gap:14px;
  overflow-x:auto;scrollbar-width:none}
.srail-in::-webkit-scrollbar{display:none}
.srail-label{flex:0 0 auto;font:700 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-right:2px}
.rail-track{display:flex;align-items:center;gap:4px}   /* the A–I station tab strip (reference .rail-track) */
.stn.sign{margin-left:auto}
.stn.sign i{border-color:var(--green-deep);color:var(--green-ink)}
.stn.sign.on i{background:var(--green);color:var(--green-dark)}
/* the travelling progress underline (reference .progress) */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:51;
  background:linear-gradient(90deg,var(--green-deep),var(--green));box-shadow:0 0 10px var(--green-glow)}

/* ================= buttons / CTAs (green = action; carries the reference green-glow) ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:600 14.5px/1 var(--sans);letter-spacing:-.005em;color:var(--cta-ink);
  background:var(--cta-bg);border:1px solid transparent;border-radius:var(--r-btn);padding:13px 22px;
  text-decoration:none;white-space:nowrap;transition:filter .15s,transform .15s,box-shadow .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 6px 20px var(--cta-glow);max-width:100%}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.12),0 10px 30px var(--cta-glow)}
@media(max-width:430px){.btn{white-space:normal;text-align:center}}
.btn:active{transform:none;filter:brightness(.97)}
.btn.sm{font-size:12.5px;padding:9px 14px;border-radius:8px}
.btn.lg{font-size:16px;padding:16px 28px}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line3);box-shadow:none}
.btn.ghost:hover{filter:none;border-color:var(--slate);background:var(--card);box-shadow:none}
/* turnaround promise under a CTA (skin-aware; green highlight + muted footnote) */
.cta-note{margin:14px 0 0;font:600 12.5px/1.5 var(--mono);letter-spacing:.01em;color:var(--ink-2)}
.cta-note .hi{color:var(--green)}
.cta-note sup{color:var(--green);font-size:.66em;top:-.55em}
.cta-note .fn{color:var(--mut);font-weight:400;margin-left:6px}

/* ================= layout primitives ================= */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.hero{position:relative}  /* anchor for .glow / .grid-bg layers a page may drop in */
.sec{padding:var(--sp-6) 0 var(--sp-2);scroll-margin-top:calc(var(--nav-h) + 8px);position:relative;display:flow-root}
.sec-head{padding-bottom:var(--sp-3);margin-bottom:var(--sp-1);position:relative}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--navy) 0 120px,var(--slate-2) 120px)}
.sec-head.dialed{display:flex;align-items:center;gap:22px;flex-wrap:wrap}  /* seats a .dial + heading, like the reference .st-head */
.sec-hgroup{flex:1 1 340px;min-width:0}                                    /* heading group beside a dial (reference .st-hgroup) */
.sec-kicker{font:600 11px/1.7 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink);margin-bottom:10px}
.sec-title{font:600 clamp(28px,4.2vw,44px)/1.08 var(--sans);letter-spacing:-.022em;font-optical-sizing:auto;color:var(--navy)}
.sec-note{margin:18px 0 0;color:var(--ink-2);font-size:15px}
.sec h3{font:600 19px/1.35 var(--sans);letter-spacing:-.01em;color:var(--navy);margin:44px 0 10px;display:flex;align-items:center;gap:10px}
.sec h3::before{content:"";width:9px;height:9px;border-radius:50%;border:2.5px solid var(--green);flex:0 0 auto}
.sec p{margin:11px 0}
.sec ul{margin:12px 0 12px 4px;list-style:none}
.sec li{margin:9px 0;padding-left:22px;position:relative}
.sec li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--card);border:2px solid var(--slate)}
.lede{font:400 clamp(17px,2vw,21px)/1.55 var(--sans);letter-spacing:-.003em;color:var(--ink-2);max-width:56ch}
.lede b,.lede strong{color:var(--navy);font-weight:600}
.pull{margin:44px 0;padding:6px 0 6px 26px;border-left:3px solid var(--green);
  font:500 clamp(20px,2.5vw,26px)/1.45 var(--sans);letter-spacing:-.015em;color:var(--navy);max-width:36ch}
.pull b{color:var(--green-ink);font-weight:600}
.accent-serif{font-family:var(--serif);font-weight:600;letter-spacing:-.01em} /* Fraunces display accent */
/* #7 · drop cap — the reference .dropcap (::first-letter float, Fraunces) for verbose openers */
.dropcap::first-letter{font:600 66px/.78 var(--serif);float:left;padding:7px 12px 0 0;color:var(--navy)}

/* #18 · marginalia rail — the reference .rt side-note (mono, green edge-rule). On wide
   viewports it floats into the right margin beside the prose; narrow, it stacks inline. */
.rt-note{font:400 11.5px/1.62 var(--mono);color:var(--ink-2);margin:16px 0;padding:14px 16px 13px;
  background:var(--card);border:1px solid var(--slate-2);border-radius:10px;position:relative}
.rt-note::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--green)}
.rt-note b{font-weight:700;color:var(--green-ink);letter-spacing:.05em}
@media (min-width:1280px){
  .rt-note{float:right;clear:right;width:256px;margin:6px 0 20px 30px}
  .rt-note.wide{float:none;clear:none;width:auto;margin:18px 0;columns:2;column-gap:46px}
}

/* full-width prose measure: 2 CSS columns where a block spans the page with no right-side card */
.cols2{columns:2;column-gap:46px}
.cols2 li{break-inside:avoid}
/* grid/block primitives — universal rule: at 1440 a section carries right-side blocks or spans the width */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);gap:14px 34px;align-items:start}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.cols2{columns:1}.split,.grid3{grid-template-columns:1fr}.grid3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.scroll-x{overflow-x:auto} /* wide content scrolls inside its own container */

/* ================= ambient backgrounds & glow layers (faithful ports) =================
   Reusable, pointer-events-safe layers a page drops into a position:relative host
   (.hero, .sec, .viz, .panel). Sibling CONTENT that must sit above a placed .glow /
   .grid-bg needs position:relative;z-index:1 (the layers ride at z-index:0). */

/* green radial glow — the reference's radial-gradient(circle,rgba(46,204,143,.20)...) */
.glow{position:absolute;z-index:0;pointer-events:none;width:clamp(280px,42vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--glow-core) 0%,var(--glow-mid) 55%,transparent 72%)}
.glow.tr{top:-14%;right:-8%}
.glow.tl{top:-14%;left:-8%}
.glow.cr{top:50%;right:-10%;transform:translateY(-50%)}
.glow.sm{width:clamp(180px,22vw,320px)}

/* masked graph-grid — the reference's .cover::before blueprint texture */
.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 70% at 60% 30%,#000 0%,transparent 100%);
  mask-image:radial-gradient(75% 70% at 60% 30%,#000 0%,transparent 100%)}

/* gantt-style column grid — the reference's .gantt background */
.gridlines{background-image:linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px);background-size:64px 100%}
/* day-band graph — the reference's .rm-daybg repeating grids (for infographic panels) */
.graph{background-image:
  repeating-linear-gradient(90deg,transparent 0 64px,var(--grid-line) 64px 96px,transparent 96px 112px),
  repeating-linear-gradient(90deg,var(--grid-strong) 0 1px,transparent 1px 16px)}

/* #4 · section-head dial — the reference's .st-dial (96px) with its breathing green glow.
   Concentric drawn rings + dashed spin ring + green arc + numeral + position readout live
   in the SVG (partials §7). The green arc's rotation advances by section index (rotate = 40°
   × index) via an inline transform the dial JS writes — that is what makes the dial change
   A→B→C down the page. The ::before glow breathes (dim, in the motion block). */
.dial{flex:0 0 auto;width:96px;height:96px;position:relative}
.dial svg{width:100%;height:100%;position:relative;z-index:1}
.dial::before{content:"";position:absolute;inset:-9%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--glow-core) 0%,var(--glow-mid) 55%,transparent 72%)}

/* ================= panel cards ================= */
.panel{background:var(--card);border:1px solid var(--slate-2);border-radius:var(--r-panel);box-shadow:var(--shadow)}
.panel.pad{padding:26px 30px}
/* infographic panel (mono titles allowed: infographic context) */
.viz{padding:30px 30px 24px;margin:28px 0;overflow-x:auto;position:relative}
.viz-title{font:700 10.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.viz-sub{font:400 11px/1.6 var(--mono);color:var(--slate);margin-bottom:18px}
.viz svg{width:100%;height:auto;overflow:visible}
.viz > svg{min-width:660px}

/* ================= chips / badges (rounded-rect, mono = readout family) ================= */
.badge{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line3);border-radius:5px;padding:5px 9px 4px;white-space:nowrap}
.badge.go{color:var(--green-ink);border-color:var(--green-deep);background:var(--green-glow)}
.badge.warn{color:var(--red-ink);border-color:var(--red);background:var(--red-soft)}
.chip{cursor:pointer;font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  background:var(--card-2);border:1px solid var(--slate-2);border-radius:999px;padding:6px 10px 5px;
  transition:color .15s,border-color .15s,background .15s}
.chip:hover{color:var(--navy);border-color:var(--slate)}
.chip.on{color:var(--green-ink);border-color:var(--green-deep);background:var(--green-glow)}

/* #10 · amend chip + corner-chip — the reference .amend (AMENDED · RT-OPERATOR) tag, and a
   utility to seat it above the top-right of a card header. Put .corner-chip on the chip and
   position:relative on the card. */
.amend{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line3);border-radius:4px;padding:5px 9px 4px;white-space:nowrap}
.amend.new{color:var(--green);border-color:var(--green-deep);background:var(--green-glow)}
.corner-chip{position:absolute;top:-11px;right:20px;z-index:2}    /* sits above the right of a card */
.corner-chip.left{right:auto;left:20px}

/* ================= station badges (lettered discs + label) ================= */
.stn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink-2);
  font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:var(--stn-r);
  border:1px solid transparent;transition:color .15s,border-color .15s,background .15s}
.stn i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--stn-i-r);
  border:var(--stn-i-border);color:var(--navy);font:700 9.5px/1 var(--mono);background:var(--card);
  transition:.15s;box-shadow:0 0 8px var(--stn-i-glow)}
.stn:hover{color:var(--navy);border-color:var(--slate-2);background:var(--card)}
.stn.on{color:var(--stn-on-ink);border-color:var(--stn-on-line);background:var(--stn-on-bg)}
.stn.on i{background:var(--stn-on-i-bg);color:var(--stn-on-i-ink);border-color:var(--stn-on-i-bg);box-shadow:0 0 10px rgba(46,204,143,.45)}

/* ================= stat tiles (with tick rulers) + readouts ================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.stat{background:var(--tile-bg);border:1px solid var(--slate-2);border-radius:var(--r-tile);padding:18px 22px 32px;
  box-shadow:var(--shadow);position:relative}
.stat::after{content:"";position:absolute;left:22px;right:22px;bottom:11px;height:7px;
  background:repeating-linear-gradient(90deg,var(--slate-2) 0 1px,transparent 1px 11px)} /* tick ruler */
.stat::before{content:"";position:absolute;left:22px;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--slate-2)}
.stat.k::before{background:var(--green)} /* the key stat gets the green notch */
.stat b{display:block;font:700 9.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:9px}
.stat span{font:700 clamp(21px,2.3vw,27px)/1.15 var(--mono);color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .u{display:block;color:var(--slate);font-size:10px;font-weight:400;letter-spacing:.08em;margin-top:6px;text-transform:uppercase}
.readout{font:700 clamp(34px,4vw,46px)/1 var(--mono);letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.readout em{font-style:normal;color:var(--green-ink)}
.readout .cap{display:block;font:700 10px/1.6 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--slate);margin-top:8px}
.readout .lbl,.lbl{font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.ruler{margin-top:16px;height:7px;background:repeating-linear-gradient(90deg,var(--slate-2) 0 1px,transparent 1px 11px)} /* standalone tick ruler */
.good{color:var(--green-ink);font-weight:600}
.bad{color:var(--red-ink);font-weight:600}

/* ================= footer ================= */
.footer{margin-top:110px;border-top:1px solid var(--edge)}
.footer-in{max-width:1200px;margin:0 auto;padding:44px 24px 20px;display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(130px,1fr));gap:36px 32px}
.footer-brand p{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:34ch}
.footer-col h4{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.footer-col ul{list-style:none}
.footer-col li{margin:9px 0}
.footer-col a{font:400 13.5px/1.5 var(--sans);color:var(--ink-2);text-decoration:none}
.footer-col a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.footer-base{max-width:1200px;margin:0 auto;padding:18px 24px 56px;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-end;justify-content:space-between;
  border-top:1px solid var(--slate-3);font:400 12px/1.7 var(--sans);color:var(--mut)}
.footer-charity{margin:0;max-width:72ch;flex:1 1 380px;font-size:12.5px;line-height:1.6;color:var(--mut)}
.footer-charity a{color:var(--slate)}
.footer-legal{display:flex;flex-direction:column;gap:4px;text-align:right;flex:0 0 auto}
.built{color:var(--brass);font:700 9.5px/1.7 var(--mono);letter-spacing:.22em} /* locked brass treatment */
/* here-to-care footer signature (§6 — one of its two homes; serif, never mono) */
.footer-brand .sig,.sig{display:block;margin-top:10px;font:500 17px/1 var(--serif);letter-spacing:.01em;color:var(--ink-2)}
/* footer data-source + charity-disclosure strip (shared block, both skins) */
.footer-data{max-width:1200px;margin:0 auto;padding:0 24px 20px}
.footer-data .lbl{display:block;line-height:1.9;letter-spacing:.12em;white-space:normal;margin-bottom:10px}
.footer-data p{font-size:12.5px;color:var(--mut);margin:0;max-width:88ch}
@media (max-width:820px){.footer-in{grid-template-columns:repeat(2,minmax(130px,1fr))}
  .footer-brand{grid-column:1/-1}}

/* ================= reveal-on-scroll + infographic motion (all gated) =================
   JS contract (partials.html §5): add .js + .anim (motion allowed) on <html>; an
   IntersectionObserver adds .go to each .obs. Reduced-motion users get final states —
   no pre-states exist, so every animated element resolves to its resting look.

   ENTRANCE VOCABULARY (all ported verbatim from both references):
     .dr  draw    · .pp pop      · .zz zoom    · .arcv arc-value · .bar grow
     .needle-g sweep · .thunk stamp-in · .spin spin (infinite) · .pulse travel (path)
     · .dial::before dim (infinite breathe) */
@media (prefers-reduced-motion:no-preference){
  .anim .obs{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .anim .obs.go{opacity:1;transform:none}

  .spin{transform-box:fill-box;transform-origin:center;animation:spin var(--sp,20s) linear infinite}
  .spin.ccw{animation-direction:reverse}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* dial green arc drifts slowly counter-clockwise (keeps its per-section start angle) */
  .d-drift{transform-box:view-box;transform-origin:60px 60px;animation:dialDrift 30s linear infinite}
  @keyframes dialDrift{to{transform:rotate(-360deg)}}

  /* travel — a marker riding an offset-path (page sets offset-path inline on .pulse) */
  .pulse{animation:travel 3.4s cubic-bezier(.4,0,.6,1) 1.4s infinite}
  @keyframes travel{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}

  /* dim — the section-dial glow breathing */
  .dial::before{animation:dim 4.6s ease-in-out infinite}
  @keyframes dim{0%,100%{opacity:1}50%{opacity:.4}}

  /* #2 · the brand-glow breathes (slow, ~5.5s) so it "slightly changes" */
  .lockup .facts{animation:factsGlow 5.5s ease-in-out infinite}
  .lockup.lg .facts{animation:factsGlowLg 5.5s ease-in-out infinite}

  .anim .obs:not(.go) .dr{stroke-dashoffset:1}
  .anim .obs.go .dr{animation:draw .9s cubic-bezier(.4,0,.1,1) both;animation-delay:var(--d,0s)}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  .anim .obs:not(.go) .pp{opacity:0}
  .anim .obs.go .pp{animation:pop .5s ease-out both;animation-delay:var(--d,0s)}
  @keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

  .anim .obs:not(.go) .zz{opacity:0}
  .anim .obs.go .zz{animation:zoom .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:center}
  @keyframes zoom{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

  .anim .obs:not(.go) .arcv{stroke-dasharray:0 100}
  .anim .obs.go .arcv{animation:arcv 1.3s cubic-bezier(.3,.6,.2,1) both;animation-delay:var(--d,0s)}
  @keyframes arcv{from{stroke-dasharray:0 100}to{stroke-dasharray:var(--v) 100}}

  .anim .obs:not(.go) .bar{transform:scaleY(0)}
  .anim .obs.go .bar{animation:grow 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  .anim .obs:not(.go) .needle-g{transform:rotate(0deg)}
  .anim .obs.go .needle-g{animation:sweep 1.6s cubic-bezier(.35,.9,.35,1) both;animation-delay:var(--d,0s)}
  @keyframes sweep{0%{transform:rotate(0deg)}62%{transform:rotate(calc(var(--ang) + 7deg))}80%{transform:rotate(calc(var(--ang) - 3deg))}100%{transform:rotate(var(--ang))}}

  /* thunk — the stamp-in (bound to .thunk, NOT the repurposed .stamp card) */
  .anim .obs:not(.go) .thunk{opacity:0}
  .anim .obs.go .thunk{animation:thunk .4s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,.1s)}
  @keyframes thunk{from{opacity:0;transform:rotate(-13deg) scale(2.2)}70%{opacity:.96;transform:rotate(-6.4deg) scale(.97)}to{opacity:.92;transform:rotate(-7deg) scale(1)}}
}
.needle-g{transform:rotate(var(--ang))}
.bar{transform-box:fill-box;transform-origin:50% 100%}
.pulse{opacity:0} /* resting: the travelling marker is hidden until motion runs */

/* ================= responsive ================= */
@media (max-width:720px){
  .sec{padding-top:72px}
  .panel.pad{padding:22px 18px}
  .viz{padding:20px 16px 16px}
  .rail-links a{padding:9px 9px}
  .dial{width:64px;height:64px}
}