/* ============================================================================
   THE BRINK LABS — DESIGN SYSTEM v6 · layer 1: tokens
   Quantum Dark is the default and the identity. Quantum Light is the same hue
   family solved for a graphite-grey ground. Every text token clears WCAG AA
   (4.5:1) on ground, plates and tinted wells — see §3.5 for the measurements.
   Tokens live ONLY here. Page <style> blocks may define --pg-* tokens, never these.
   ========================================================================== */
@property --ang { syntax:'<angle>'; inherits:false; initial-value:100deg; }
@property --mx  { syntax:'<length-percentage>'; inherits:false; initial-value:50%; }
@property --my  { syntax:'<length-percentage>'; inherits:false; initial-value:0%; }

:root{
  color-scheme:dark;
  /* ground & surfaces */
  --void:#04060B; --plate:#0A0F1A; --plate-2:#0E1524; --raise:#121A2C;
  --line:#1B2436; --line-hi:#2A3550;
  /* ink */
  --ink:#E8EDF7; --ink-2:#A8B4C8; --ink-3:#96A2B8;
  /* brand — text-safe */
  --brand:#22D3EE; --brand-2:#E879F9; --brand-3:#A78BFA; --brand-deep:#0E7490;
  --brand-glow:#22D3EE;            /* decoration only: rims, bars, focus, ambient */
  --on-brand:#04060B;              /* label on a brand-filled button */
  /* semantic */
  --pos:var(--brand); --alarm:#FF4D6D; --amber:#FBBF24; --sel-fg:#04060B;
  /* aura: rim · bloom · ambient — nothing else glows */
  --rim-a:color-mix(in oklab,var(--brand-glow) 55%,transparent);
  --rim-b:color-mix(in oklab,var(--brand-2) 40%,transparent);
  --bloom-1:color-mix(in oklab,var(--brand-glow) 10%,transparent);
  --bloom-2:color-mix(in oklab,var(--brand-2) 9%,transparent);
  --ambient:0 18px 44px -22px color-mix(in oklab,var(--brand-glow) 22%,transparent);
  --ambient-hi:0 26px 60px -26px color-mix(in oklab,var(--brand-glow) 34%,transparent);
  --spot:color-mix(in oklab,var(--brand-glow) 13%,transparent);
  --dawn:linear-gradient(transparent,transparent);
  /* surfaces */
  --sheen:inset 0 1px 0 rgba(255,255,255,.05); --sheen-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --well:rgba(255,255,255,.024); --th-bg:rgba(255,255,255,.02);
  --track:#141C2E; --dot:rgba(190,220,255,.11); --dot-o:.5;
  --shadow:0 22px 50px -20px rgba(0,0,0,.8);
  --ink-glass:color-mix(in oklab,#FFF 4%,transparent);
  --glass:color-mix(in oklab,var(--void) 62%,transparent);
  --amb-a:14%; --amb-b:11%; --amb-c:8%;
  --focus:0 0 0 2px var(--void),0 0 0 4px var(--brand-glow);
  /* derived tints (resolve per theme automatically) */
  --brand-6:color-mix(in oklab,var(--brand) 6%,transparent);
  --brand-12:color-mix(in oklab,var(--brand) 12%,transparent);
  --brand-24:color-mix(in oklab,var(--brand) 26%,transparent);
  --alarm-12:color-mix(in oklab,var(--alarm) 12%,transparent);
  --alarm-24:color-mix(in oklab,var(--alarm) 26%,transparent);
  --grad:linear-gradient(var(--ang),var(--brand) 0%,var(--brand) 26%,var(--brand-3) 68%,var(--brand-2) 100%);
  /* data series — calculators read these; never hard-code a series colour */
  --c1:#22D3EE; --c2:#A78BFA; --c3:#E879F9; --c4:#7DD3FC; --c5:#FBBF24; --c6:#8B97AD;
  /* elevation */
  --e1:var(--sheen),0 1px 2px rgba(0,0,0,.35);
  --e2:var(--sheen),var(--ambient);
  --e3:var(--sheen-hi),var(--ambient-hi);

  /* type */
  --sans:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(2.5rem,1.55rem + 3.9vw,4.5rem);   /* 40 → 72  home H1 display    */
  --fs-h1:clamp(2.125rem,1.45rem + 2.8vw,3.5rem);      /* 34 → 56  page H1 display    */
  --fs-h2:clamp(1.75rem,1.3rem + 1.85vw,2.75rem);      /* 28 → 44                     */
  --fs-h3:clamp(1.25rem,1.12rem + .55vw,1.5rem);       /* 20 → 24                     */
  --fs-kicker:clamp(.95rem,.9rem + .25vw,1.0625rem);   /* 15 → 17  H1 keyword line    */
  --fs-lede:clamp(1.0625rem,.99rem + .35vw,1.25rem);   /* 17 → 20  answer / lede      */
  --fs-fig:clamp(2.75rem,1.9rem + 3.6vw,4.75rem);      /* 44 → 76  result figure      */
  --fs-body:1.0625rem; --fs-small:.9375rem; --fs-tiny:.8125rem; --fs-label:.75rem;  /* 17 · 15 · 13 · 12 */
  --lh-tight:1.04; --lh-snug:1.2; --lh-body:1.65;
  --tr-display:-.032em; --tr-head:-.022em; --tr-label:.16em;
  --w-body:400; --w-ui:600; --w-head:700; --w-display:800;
  --measure:68ch;
  /* space — 4 px grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --band:clamp(64px,9vw,128px); --band-tight:clamp(40px,5.5vw,72px);
  /* shape & layout */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --max:1180px; --pad:clamp(16px,5vw,40px);
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1); --t:.22s var(--ease); --t-slow:.48s var(--ease);
}
@supports (color:oklch(1 0 0)){
  :root{ --brand:oklch(.796 .137 205); --brand-glow:oklch(.796 .137 205);
         --brand-2:oklch(.741 .231 322); --brand-3:oklch(.714 .154 288); }
}

/* ── QUANTUM LIGHT ────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  color-scheme:light;
  --void:#E6E9EE; --plate:#F8FAFC; --plate-2:#FFFFFF; --raise:#FFFFFF;
  --line:#D5DBE3; --line-hi:#BCC5D1;
  --ink:#0B1220; --ink-2:#334155; --ink-3:#4A5568;
  --brand:#0B6579; --brand-2:#A21CAF; --brand-3:#6D28D9; --brand-deep:#083F4C;
  --brand-glow:#0891B2; --on-brand:#FFFFFF;
  --alarm:#B42318; --amber:#8A4B00; --sel-fg:#FFFFFF;
  --rim-a:color-mix(in oklab,var(--brand-glow) 46%,transparent);
  --rim-b:color-mix(in oklab,var(--brand-2) 30%,transparent);
  --bloom-1:color-mix(in oklab,var(--brand-glow) 6%,transparent);
  --bloom-2:color-mix(in oklab,var(--brand-2) 4%,transparent);
  --ambient:0 1px 2px rgba(11,18,32,.06),0 12px 30px -14px color-mix(in oklab,var(--brand-glow) 30%,transparent);
  --ambient-hi:0 2px 4px rgba(11,18,32,.07),0 24px 48px -20px color-mix(in oklab,var(--brand-glow) 38%,transparent);
  --spot:color-mix(in oklab,var(--brand-glow) 9%,transparent);
  --dawn:linear-gradient(180deg,rgba(255,255,255,.55),transparent 45%);
  --sheen:inset 0 1px 0 rgba(255,255,255,.9); --sheen-hi:inset 0 1px 0 #FFFFFF;
  --well:rgba(11,18,32,.03); --th-bg:rgba(11,18,32,.04);
  --track:#D9DEE6; --dot:rgba(11,18,32,.10); --dot-o:.36;
  --shadow:0 22px 50px -24px rgba(11,18,32,.30);
  --ink-glass:color-mix(in oklab,#0B1220 4.5%,transparent);
  --glass:color-mix(in oklab,#E6E9EE 78%,transparent);
  --amb-a:11%; --amb-b:7%; --amb-c:6%;
  --focus:0 0 0 2px var(--plate-2),0 0 0 4px var(--brand);
  --c1:#0B6579; --c2:#A21CAF; --c3:#6D28D9; --c4:#1D4ED8; --c5:#92400E; --c6:#475569;
  --e1:var(--sheen),0 1px 2px rgba(11,18,32,.08),0 1px 0 rgba(11,18,32,.04);
}

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("Arial"),local("Liberation Sans");
  size-adjust:106.05%;ascent-override:97.88%;descent-override:20.93%;line-gap-override:0%}

body{font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--w-body);
  font-kerning:normal;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;background:var(--void);color:var(--ink)}
h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance}
.h1__k{display:block;font-size:var(--fs-kicker);font-weight:var(--w-head);letter-spacing:.005em;line-height:1.3;
  color:var(--brand);margin-bottom:var(--s3)}
.h1__d,.d1{display:block;font-size:var(--fs-h1);font-weight:var(--w-display);line-height:var(--lh-tight);letter-spacing:var(--tr-display)}
.home .h1__d{font-size:var(--fs-display)}
.d2{font-size:var(--fs-h2);font-weight:var(--w-display);line-height:1.08;letter-spacing:var(--tr-head)}
.d3{font-size:var(--fs-h3);font-weight:var(--w-head);line-height:var(--lh-snug);letter-spacing:-.012em}
.lede,.answer{font-size:var(--fs-lede);line-height:1.6;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.prose p,.prose li,.ans p{max-width:var(--measure);text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.6}
.tiny{font-size:var(--fs-tiny);line-height:1.55;color:var(--ink-3)}
.label,.eyebrow{font-size:var(--fs-label);font-weight:800;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.num,.fig,td,input{font-variant-numeric:tabular-nums}
.fig{font-size:var(--fs-fig);font-weight:var(--w-display);line-height:1;letter-spacing:-.035em}

/* ============================================================================
   layer 3 — base: chrome, surfaces and furniture shared by every page
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; font-synthesis-weight:none; overflow-x:hidden }
/* ── the ambient field: two blooms and a lattice, both fixed, both free ─── */
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--dot-o); background-image:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0); background-size:34px 34px; -webkit-mask-image:radial-gradient(126% 84% at 50% 0%, #000 0%, transparent 72%); mask-image:radial-gradient(126% 84% at 50% 0%, #000 0%, transparent 72%) }
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
p{ margin:0 0 1.05em; text-wrap:pretty }
strong,b{ font-weight:700; color:var(--ink) }
::selection{ background:var(--brand); color:var(--sel-fg) }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.sr-only,.skip{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip:focus{ position:fixed; inset:12px auto auto 12px; width:auto; height:auto; margin:0; clip-path:none; background:var(--raise); border:1px solid var(--line-hi); padding:12px 18px; border-radius:12px; z-index:200 }
/* ============================================================================
   AURA — rim, bloom, ambient. Three primitives, no fourth.
   ========================================================================== */
/* RIM: a real gradient hairline. Two backgrounds, two clips, no extra element
   and no offscreen pass. */
.rim{ position:relative; border:1px solid transparent; border-radius:var(--r-lg); background:linear-gradient(180deg, var(--plate-2), var(--plate)) padding-box, linear-gradient(var(--ang), var(--rim-a), var(--rim-b)) border-box; box-shadow:var(--sheen), var(--ambient); transition:box-shadow var(--t), transform var(--t), --ang .6s var(--ease) }
.rim--flat{ background:linear-gradient(180deg, var(--plate-2), var(--plate)) padding-box, linear-gradient(var(--ang), var(--line-hi), var(--line)) border-box; box-shadow:var(--sheen) }
.rim--flat:hover{ background:linear-gradient(180deg, var(--plate-2), var(--plate)) padding-box, linear-gradient(var(--ang), var(--rim-a), var(--rim-b)) border-box; box-shadow:var(--sheen), var(--ambient) }
/* BLOOM: two stacked radials inside the surface; the bloom tokens set how strongly they show. */
.bloom{ position:relative; isolation:isolate }
.bloom::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:radial-gradient(38rem 22rem at 0% 0%, var(--bloom-1), transparent 70%), radial-gradient(34rem 20rem at 100% 100%, var(--bloom-2), transparent 70%) }
/* SPOTLIGHT: pointer-tracked highlight. One custom-property write per frame,
   no layout, no paint outside the card. */
.lift{ transition:transform var(--t), box-shadow var(--t) }
.lift::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(16rem 16rem at var(--mx) var(--my), var(--spot), transparent 68%); opacity:0; transition:opacity .3s var(--ease) }
.lift:hover{ transform:translateY(-3px); box-shadow:var(--sheen), var(--ambient-hi) }
.lift:hover::after{ opacity:1 }
/* the animated hairline that runs the length of a hero rim */
@keyframes sweep{ to{ --ang:460deg } }
@media (prefers-reduced-motion: no-preference){
  .rim--live{ animation:sweep 14s linear infinite }
}
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.narrow{ max-width:70ch }
main{ container-type:inline-size; container-name:page }
section{ position:relative }
[id]{ scroll-margin-top:96px }
.band{ padding-block:var(--band) }
.band--tight{ padding-block:var(--band-tight) }
.label{ margin:0 0 18px; display:flex; align-items:center; gap:12px }
.label::after{ content:""; height:1px; flex:1; max-width:110px; background:linear-gradient(90deg,var(--rim-a),transparent) }
.label--solo{ display:block }
.label--solo::after{ display:none }
.h4{ font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.3 }
.lede{ font-weight:500 }
.small{ color:var(--ink-2) }
.muted{ color:var(--ink-3) }
.num{ letter-spacing:-.01em }
.on{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.rule{ height:1px; margin-bottom:clamp(26px,3.5vw,44px); background:linear-gradient(90deg,var(--line-hi),var(--line) 32%,transparent); position:relative }
.rule::before{ content:""; position:absolute; inset:0 auto 0 0; width:56px; height:1px; background:var(--brand); box-shadow:0 0 12px var(--brand-24) }
.grid{ display:grid; gap:14px }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@container page (max-width:1000px){ .g4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@container page (max-width:820px){ .g3,.g2{ grid-template-columns:1fr } }
@container page (max-width:560px){ .g4{ grid-template-columns:1fr } }
.card{ overflow:hidden }
.card--hover{ transition:transform var(--t), box-shadow var(--t), background var(--t) }
.card--hover:hover{ transform:translateY(-3px); box-shadow:var(--sheen), var(--ambient); background:linear-gradient(180deg,var(--plate-2),var(--plate)) padding-box, linear-gradient(var(--ang), var(--rim-a), var(--rim-b)) border-box }
.card > .i{ width:26px; height:26px; color:var(--brand); margin-bottom:16px }
.card h3{ margin:0 0 8px }
.card p{ margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.6 }
.idx{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--tr-label); color:var(--ink-3); margin-bottom:14px }
.chips{ display:flex; flex-wrap:wrap; gap:9px; align-items:center }
.chip{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-2); border:1px solid var(--line); background:var(--ink-glass); border-radius:999px; padding:7px 14px; white-space:nowrap }
.chip b{ color:var(--brand); font-weight:800 }
.pip{ width:6px; height:6px; border-radius:50%; background:var(--brand); flex:0 0 auto; box-shadow:0 0 0 3px var(--brand-12), 0 0 10px var(--brand) }
.tag{ display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-label); font-weight:800; letter-spacing:var(--tr-label); text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1px solid var(--line-hi); color:var(--ink-3) }
.tag--live{ color:var(--brand); border-color:var(--brand-24); background:var(--brand-6) }
.row{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4.6vw,68px); align-items:center }
.row + .row{ margin-top:clamp(48px,6vw,92px) }
@container page (max-width:900px){ .row{ grid-template-columns:1fr; gap:30px } .row__v{ order:2 } }
.flist{ list-style:none; margin:22px 0 0; padding:0 }
.flist li{ position:relative; padding:13px 0 13px 26px; border-top:1px solid var(--line); color:var(--ink-2); font-size:15.5px; line-height:1.58 }
.flist li::before{ content:""; position:absolute; left:2px; top:21px; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px var(--brand-24) }
.flist li b{ color:var(--ink) }
.tablewrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid transparent; background:linear-gradient(180deg,var(--plate-2),var(--plate)) padding-box, linear-gradient(var(--ang), var(--line-hi), var(--line)) border-box; box-shadow:var(--sheen) }
table{ width:100%; border-collapse:collapse; min-width:620px; font-size:15px }
th,td{ text-align:left; padding:15px 20px; border-bottom:1px solid var(--line) }
thead th{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-3); background:var(--th-bg) }
tbody tr:last-child td,tbody tr:last-child th{ border-bottom:0 }
td.k,th.k{ color:var(--ink); font-weight:700 }
.faq summary:hover{ color:var(--brand) }
.faq .ans p:last-child{ margin-bottom:0 }
.pull{ border-left:2px solid var(--brand); padding-left:clamp(20px,3vw,32px); margin:clamp(26px,4vw,44px) 0; box-shadow:-6px 0 24px -18px var(--brand) }
.pull p{ font-size:clamp(21px,2.7vw,32px); font-weight:800; letter-spacing:-.035em; line-height:1.24; color:var(--ink); margin:0 }
/* panel: the small data readout used in bridges and hub cards */
.panel{ border-radius:var(--r-lg); padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; gap:12px; min-width:0; border:1px solid transparent; background:linear-gradient(165deg,var(--raise),var(--plate)) padding-box, linear-gradient(var(--ang), var(--rim-a), var(--rim-b)) border-box; box-shadow:var(--sheen), var(--ambient) }
.panel__h{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:var(--fs-label); font-weight:700; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-3) }
.krow{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:14px; color:var(--ink-2) }
.krow b{ color:var(--ink); font-weight:700; text-align:right }
.bar{ height:7px; border-radius:99px; background:var(--track); overflow:hidden }
.bar i{ display:block; height:100%; border-radius:99px; background:var(--grad) }
.fig{ overflow-wrap:anywhere }
/* The reveal moves, it does not fade. An opacity ramp means every element is
   genuinely low-contrast while it animates — a real readability cost for a
   fraction of a second, and one that automated auditing correctly flags.
   Transform alone reads as the same gesture and is never unreadable. */
@keyframes rise{ from{ transform:translateY(20px) } to{ transform:none } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{ animation:rise .01s linear both; animation-timeline:view(); animation-range:entry 4% cover 18% }
  }
}
@supports not (animation-timeline: view()){
  .js .rv{ transform:translateY(20px) }
  .js .rv.in{ transform:none; transition:transform .6s var(--ease) }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .rv{ animation:none !important; transform:none !important }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}
@view-transition{ navigation:auto }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vt-out .18s var(--ease) both }
  ::view-transition-new(root){ animation:vt-in .28s var(--ease) both }
}
@keyframes vt-out{ to{ opacity:0 } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px) } }
.prog{ position:fixed; inset:0 0 auto 0; height:2px; z-index:100; transform-origin:0 50%; background:var(--grad); transform:scaleX(0); pointer-events:none; box-shadow:0 0 14px var(--brand-24) }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .prog{ animation:prog linear both; animation-timeline:scroll(root block) }
  }
}
@keyframes prog{ to{ transform:scaleX(1) } }
/* ============================================================================
   CHROME — one masthead, one footer, on every page. The old site had ten
   different navs across ten pages; this is the fix for that class of drift.
   ========================================================================== */
.nav{ position:sticky; top:0; z-index:90; border-bottom:1px solid var(--line); background:var(--glass) }
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav{ -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%) }
}
.nav::after{ content:""; position:absolute; inset:auto 0 -1px 0; height:1px; background:linear-gradient(90deg, transparent, var(--rim-a) 22%, var(--rim-b) 78%, transparent); opacity:.75 }
.nav__in{ max-width:var(--max); margin-inline:auto; padding:11px var(--pad); display:flex; align-items:center; gap:clamp(14px,2.4vw,30px) }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; min-width:0 }
.brand__mk{ width:30px; height:30px; flex:0 0 auto; view-transition-name:brandmark; color:var(--brand); filter:drop-shadow(0 0 10px var(--brand-24)); transition:color var(--t), filter var(--t) }
.brand:hover .brand__mk{ filter:drop-shadow(0 0 16px var(--brand)) }
.brand__tx{ display:flex; min-width:0 }
.brand__n{ font-weight:800; font-size:15.5px; letter-spacing:-.02em; white-space:nowrap; color:var(--ink) }
/* ── the menu bar ─────────────────────────────────────────────────────── */
.menu{ display:flex; align-items:center; gap:2px }
.menu__i{ position:relative }
.menu__b{ font:inherit; font-size:14px; font-weight:600; color:var(--ink-2); background:none; border:0; padding:9px 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:color var(--t), background var(--t) }
.menu__b svg{ width:11px; height:11px; opacity:.75; transition:transform var(--t) }
.menu__b:hover,.menu__i:focus-within > .menu__b{ color:var(--ink); background:var(--ink-glass) }
.menu__b[aria-expanded="true"]{ color:var(--brand); background:var(--brand-6) }
.menu__b[aria-expanded="true"] svg{ transform:rotate(180deg) }
.menu__b[aria-current="true"]{ color:var(--ink) }
.menu__b[aria-current="true"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:2px; height:1.5px; border-radius:2px; background:var(--brand); box-shadow:0 0 8px var(--brand) }
.menu__p{ position:absolute; top:calc(100% + 9px); left:-6px; min-width:270px; padding:8px; border-radius:var(--r); border:1px solid transparent; z-index:95; background:linear-gradient(180deg,var(--raise),var(--plate)) padding-box, linear-gradient(150deg, var(--rim-a), var(--rim-b)) border-box; box-shadow:var(--shadow), var(--ambient); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.985); transform-origin:top left; transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s }
.menu__p--r{ left:auto; right:-6px; transform-origin:top right }
.menu__i:hover > .menu__p,
.menu__i:focus-within > .menu__p,
.menu__b[aria-expanded="true"] + .menu__p{ opacity:1; visibility:visible; transform:none }
@media (hover:none){ .menu__i:hover > .menu__p{ opacity:0; visibility:hidden } 
  .menu__b[aria-expanded="true"] + .menu__p{ opacity:1; visibility:visible } }
.menu__p a{ display:flex; gap:11px; align-items:flex-start; padding:9px 11px; border-radius:10px; transition:background var(--t), color var(--t) }
.menu__p a:hover,.menu__p a:focus-visible{ background:var(--ink-glass) }
.menu__p a[aria-current="page"]{ background:var(--brand-6) }
.menu__p a[aria-current="page"] .mi__n{ color:var(--brand) }
.mi__x{ flex:0 0 auto; width:22px; font-size:var(--fs-label); font-weight:800; letter-spacing:var(--tr-label); color:var(--ink-3); padding-top:3px; font-variant-numeric:tabular-nums }
.mi__n{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.35; display:block }
.mi__d{ font-size:12px; color:var(--ink-3); line-height:1.45; display:block; margin-top:2px }
.menu__sep{ height:1px; margin:7px 9px; background:var(--line) }
.menu__all{ display:block; padding:9px 11px; border-radius:10px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--brand); transition:background var(--t) }
.menu__all:hover{ background:var(--brand-6) }
/* ── theme switch ─────────────────────────────────────────────────────── */
.tsw{ flex:0 0 auto; display:inline-grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line-hi); border-radius:11px; background:var(--ink-glass); color:var(--ink-2); cursor:pointer; font:inherit; transition:color var(--t), border-color var(--t), background var(--t) }
.tsw:hover{ color:var(--brand); border-color:var(--brand-24); background:var(--brand-6); box-shadow:0 0 18px -6px var(--brand) }
.tsw svg{ width:17px; height:17px; grid-area:1/1 }
.tsw .i-l{ display:none }
:root[data-theme="light"] .tsw .i-l{ display:block }
:root[data-theme="light"] .tsw .i-d{ display:none }
html:not(.js) .tsw{ display:none }
/* ── the Play call, present but never shouting ────────────────────────── */
.play{ display:inline-block; transition:transform var(--t), filter var(--t) }
.play svg{ height:54px; width:auto }
.play:hover{ transform:translateY(-2px); filter:drop-shadow(0 10px 24px var(--brand-24)) }
.play--sm svg{ height:40px }
.go{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px; color:var(--brand); transition:gap var(--t) }
.go svg{ width:16px; height:16px }
.go:hover{ gap:13px }
.go--ink{ color:var(--ink) }
/* ── mobile ───────────────────────────────────────────────────────────── */
.burger{ display:none; flex:0 0 auto; width:36px; height:36px; padding:0; border-radius:11px; cursor:pointer; border:1px solid var(--line-hi); background:var(--ink-glass); color:var(--ink-2); font:inherit; place-items:center }
.burger svg{ width:17px; height:17px }
@media (max-width:940px){
  .menu{ display:none }
  .burger{ display:grid }
  .nav__in{ gap:10px }
  .play--sm{ display:none }
  .sheet[data-open="1"]{ display:block }
}
.sheet{ display:none; position:fixed; inset:var(--navh,58px) 0 0 0; z-index:89; overflow-y:auto; background:var(--void); border-top:1px solid var(--line); padding:18px var(--pad) 40px }
.sheet__g + .sheet__g{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line) }
.sheet__t{ font-size:var(--fs-label); font-weight:800; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--brand); margin:0 0 12px }
.sheet a{ display:flex; gap:11px; align-items:flex-start; padding:11px 10px; border-radius:12px; transition:background var(--t) }
.sheet a:hover{ background:var(--ink-glass) }
.sheet a[aria-current="page"]{ background:var(--brand-6) }
.sheet a[aria-current="page"] .mi__n{ color:var(--brand) }
.sheet .play{ margin-top:24px }
html.lock,body.lock{ overflow:hidden }
/* ── footer ───────────────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding-block:clamp(44px,5vw,64px) 30px; margin-top:clamp(48px,7vw,96px); container-type:inline-size; container-name:page; position:relative }
.foot::before{ content:""; position:absolute; inset:-1px 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, var(--rim-a) 30%, var(--rim-b) 70%, transparent); opacity:.6 }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px }
@container page (max-width:860px){ .foot__grid{ grid-template-columns:1fr 1fr } }
@container page (max-width:520px){ .foot__grid{ grid-template-columns:1fr } }
.foot .fh{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-3); margin:0 0 15px }
.foot ul{ list-style:none; margin:0; padding:0 }
.foot li{ margin:0 0 11px }
.foot li a{ font-size:14.5px; color:var(--ink-2); transition:color var(--t) }
.foot li a:hover{ color:var(--brand) }
.foot__base{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:clamp(32px,4vw,48px); padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-3) }
.foot__base a{ color:var(--ink-3); transition:color var(--t) }
.foot__base a:hover{ color:var(--brand) }
.foot__mk{ display:flex; align-items:center; gap:11px; margin-bottom:18px }
.foot__mk svg{ width:34px; height:34px; color:var(--ink) }
.foot__mk span{ font-weight:800; font-size:16px; letter-spacing:-.02em }
.toast{ position:fixed; inset:auto 0 26px 0; margin-inline:auto; width:max-content; max-width:calc(100% - 40px); background:var(--raise); border:1px solid var(--brand-24); color:var(--ink); font-size:14px; font-weight:600; padding:12px 20px; border-radius:999px; box-shadow:var(--shadow); z-index:120; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease) }
.toast.on{ opacity:1; transform:none }
/* ── shared page rules: used identically on two or more pages, and the instrument-form kit ── */
.bul li b{ color:var(--ink) }
.inst > div:first-child{ container-type:inline-size; container-name:ledger }
@container page (max-width:960px){ .inst{ grid-template-columns:1fr } }
.pane{ border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--plate-2),var(--plate)); box-shadow:var(--sheen);
  padding:clamp(18px,2.2vw,26px) }
.pane__t{ font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3) }
.f-a{ position:relative }
.verdict{ position:sticky; top:84px }
@container page (max-width:960px){ .verdict{ position:static } }
.vsub{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px }
.mini .l{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:4px }
.mini .n.good{ color:var(--brand) }
.dial label{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px }
.chart .gl{ stroke:var(--line); stroke-width:1 }
.chart .ax{ fill:var(--ink-3); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.legend span{ display:inline-flex; align-items:center; gap:8px }
.legend i{ width:14px; height:3px; border-radius:99px; display:block }
.inp:focus-within{ border-color:var(--brand-24); background:var(--brand-6) }
.inp select option{ background:var(--plate-2); color:var(--ink) }
.verdictline b{ color:var(--ink) }
@media print{ body::before,body::after,.nav,.foot,.addrow,.btn{ display:none!important } }
.colhead span:not(:first-child){ text-align:right }
.aff{ position:relative }
.hero{ padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px) }
.inst{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(16px,2vw,26px); align-items:start }
.pane__h{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px }
.fld{ margin-bottom:16px }
.fld > label{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px }
.inp{ display:flex; align-items:center; gap:10px; border:1px solid var(--line-hi); border-radius:14px;
  padding:11px 15px; background:var(--well); transition:border-color var(--t), background var(--t) }
.inp .c{ font-size:19px; font-weight:800; color:var(--ink-3); line-height:1 }
.inp input{ font:inherit; font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.03em;
  color:var(--ink); background:transparent; border:0; outline:none; width:100%; min-width:0;
  font-variant-numeric:tabular-nums; padding:0 }
.inp select{ font:inherit; font-size:11px; font-weight:800; letter-spacing:.14em; background:transparent;
  border:1px solid var(--line); border-radius:8px; color:var(--ink-2); padding:5px 8px; cursor:pointer; flex:0 0 auto }
.hint{ font-size:12px; color:var(--ink-3); margin:7px 0 0; line-height:1.55 }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:20px }
.mini{ border:1px solid var(--line); border-radius:14px; padding:13px 15px; background:var(--well) }
.mini .n{ font-size:20px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.note{ font-size:12px; color:var(--ink-3); line-height:1.6; margin-top:16px; border-left:2px solid var(--line-hi); padding-left:12px }
.addrow{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap }

/* ambient field — replaces the base-layer body::before background stack */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(70rem 42rem at 6% -14%,color-mix(in oklab,var(--brand-glow) var(--amb-a),transparent),transparent 62%),
  radial-gradient(58rem 38rem at 98% 4%,color-mix(in oklab,var(--brand-2) var(--amb-b),transparent),transparent 58%),
  radial-gradient(52rem 42rem at 48% 106%,color-mix(in oklab,var(--brand-3) var(--amb-c),transparent),transparent 60%),
  var(--dawn)}

/* Card — the one surface: rim (gradient hairline) + plate + sheen + ambient */
.card{position:relative;border-radius:var(--r-lg);padding:clamp(20px,2.4vw,32px);border:1px solid transparent;
  background:linear-gradient(180deg,var(--plate-2),var(--plate)) padding-box,
             linear-gradient(var(--ang),var(--line-hi),var(--line)) border-box;
  box-shadow:var(--e1);transition:box-shadow var(--t),transform var(--t)}
a.card:hover,.card.lift:hover{transform:translateY(-2px);box-shadow:var(--e3);
  background:linear-gradient(180deg,var(--plate-2),var(--plate)) padding-box,
             linear-gradient(var(--ang),var(--rim-a),var(--rim-b)) border-box}
/* Result panel — the only surface allowed a bloom */
.panel--result{background:
  radial-gradient(40rem 18rem at 0% 0%,var(--bloom-1),transparent 60%) padding-box,
  radial-gradient(34rem 16rem at 100% 100%,var(--bloom-2),transparent 60%) padding-box,
  linear-gradient(180deg,var(--plate-2),var(--plate)) padding-box,
  linear-gradient(var(--ang),var(--rim-a),var(--rim-b)) border-box;box-shadow:var(--e2)}

/* Hero furniture */
.crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:var(--fs-tiny);color:var(--ink-3);margin:0 0 var(--s4)}
.crumbs a{color:var(--ink-2);text-decoration:none}.crumbs a:hover{color:var(--brand)}
.crumbs [aria-current]{color:var(--ink)}
.answer{margin:var(--s5) 0 0;padding-left:var(--s4);border-left:2px solid transparent;
  border-image:linear-gradient(180deg,var(--brand-glow),var(--brand-2)) 1}
.trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin:var(--s4) 0 0;font-size:var(--fs-tiny);color:var(--ink-3)}
.trust>*+*::before{content:"·";margin-right:14px;color:var(--line-hi)}

/* Model block */
.model{border-radius:var(--r);background:var(--well);border:1px solid var(--line);padding:var(--s5)}
.model code{display:block;font-family:var(--sans);font-weight:600;font-size:var(--fs-small);line-height:1.8;
  color:var(--ink);white-space:pre-wrap;font-variant-numeric:tabular-nums}

/* Questions */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s4);padding:18px 0;
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);font-weight:var(--w-head);line-height:1.35;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-top:.5em;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform var(--t),border-color var(--t)}
.faq details[open]>summary::after{transform:rotate(-135deg);border-color:var(--brand)}
.faq .ans{padding:0 0 20px;color:var(--ink-2)}
.faq .ans a,.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Buttons & focus */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);
  font:700 var(--fs-small)/1 var(--sans);background:var(--brand);color:var(--on-brand);cursor:pointer;
  transition:transform var(--t),box-shadow var(--t)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--ambient-hi)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:none;box-shadow:var(--focus)}

/* Continuity bridge — §4.0.6 */
.bridge{margin-top:var(--s4);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4) var(--s6);align-items:center}
@container page (max-width:760px){.bridge{grid-template-columns:1fr}}
.bridge__k{display:flex;align-items:center;gap:8px;margin:0 0 var(--s2);font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--brand)}
.bridge__mk{width:18px;height:18px;color:var(--ink)}
.bridge__h{font-size:var(--fs-h3);font-weight:var(--w-head);line-height:var(--lh-snug);min-height:calc(2 * 1.2em)}
.bridge__b{margin:var(--s2) 0 0;font-size:var(--fs-small);color:var(--ink-2);max-width:60ch}
.bridge__act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.bridge__t{grid-column:1/-1;margin:0;font-size:var(--fs-tiny);color:var(--ink-3)}
.bridge__qr,.bridge__ios,.bridge__mini{display:none}
:root[data-platform="desktop"] .bridge__qr{display:flex;align-items:center;gap:var(--s3)}
:root[data-platform="ios"] .bridge__cta,:root[data-platform="ios"] .bridge__qr{display:none}
:root[data-platform="ios"] .bridge__ios{display:block}
.qr{width:104px;height:104px;padding:8px;border-radius:12px;background:#FFFFFF;box-shadow:0 0 0 1px var(--line)}
.bridge__x{background:none;border:0;padding:6px 0;font:600 var(--fs-tiny)/1 var(--sans);color:var(--ink-3);cursor:pointer}
.bridge__x:hover{color:var(--ink)}
.bridge[data-collapsed]{display:block;padding-block:14px}
.bridge[data-collapsed]>:not(.bridge__mini){display:none}
.bridge[data-collapsed] .bridge__mini{display:block;font-size:var(--fs-small);color:var(--ink-2)}
.bridge.is-live{animation:bl-rim 1.1s var(--ease) 1}
@keyframes bl-rim{0%{box-shadow:var(--e2),0 0 0 0 var(--brand-24)}45%{box-shadow:var(--e3),0 0 0 6px transparent}100%{box-shadow:var(--e2)}}

/* Result tools row: Copy summary · Share · Print */
.rtools{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* Related instruments & hub chapters */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@container page (max-width:860px){.related{grid-template-columns:1fr}}
.chapter{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s8) 0 var(--s4)}
.chapter__n{font-size:var(--fs-label);font-weight:800;letter-spacing:var(--tr-label);color:var(--brand)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.bridge,.related,.rtools,.nav,.sheet,.foot{display:none!important}}

/* ============================================================================
   layer 5 — extensions: pieces the v6 pages need that layers 1–4 do not define.
   Nothing here restates a token or overrides a type rule.
   ========================================================================== */
/* buttons: ghost hover keeps its ring; small and disabled states */
.btn--ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--brand-24),var(--ambient-hi)}
.btn--sm{min-height:36px;padding:0 14px;font-size:var(--fs-tiny)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:inset 0 0 0 1px var(--line)}
.btn svg{width:16px;height:16px}

/* panel figures stay panel-sized; --fs-fig is for an instrument's own result */
.panel .fig{font-size:clamp(30px,4vw,42px);letter-spacing:-.04em}

/* hero */
.eyebrow{margin:0 0 var(--s3)}
.hero .h1__d{max-width:18ch}
.hero .answer{margin-top:var(--s5)}
.crumbs__s{color:var(--line-hi)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s6)}

/* bridge: the headline cell holds the static and the live line in one grid
   area, so the box is always as tall as the longer of the two and swapping
   the visible one can never move anything below it (G14) */
.bridge__h{display:grid}
.bridge__h>span{grid-area:1/1}
.bridge__hz{visibility:hidden}
.bridge__qr .tiny{margin:0}
.bridge__ios{max-width:30ch;margin:0}
.bridge__cta svg{height:48px}
.rtools__ta{display:block;width:100%;min-height:9.5em;margin-top:var(--s3);padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-hi);background:var(--well);color:var(--ink);font:500 var(--fs-tiny)/1.55 var(--sans);resize:vertical}

/* product blocks outside the bridge: the QR appears on desktop only */
.qrbox{display:none;align-items:center;gap:var(--s3)}
:root[data-platform="desktop"] .qrbox{display:flex}
.qrbox .tiny{margin:0}
.getit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6)}

/* section heads used by every instrument page */
.sh{margin:0 0 var(--s5);max-width:var(--measure)}
.sh .d2,.sh .d3{margin:0}
.sh p{margin:var(--s3) 0 0;color:var(--ink-2)}

/* reading your result */
.rd{margin:0;border-top:1px solid var(--line)}
.rd>div{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--s1) var(--s6);padding:15px 0;border-bottom:1px solid var(--line)}
@container page (max-width:640px){.rd>div{grid-template-columns:1fr}}
.rd dt{font-weight:var(--w-head);color:var(--ink)}
.rd dd{margin:0;color:var(--ink-2)}

/* the model: formula, worked example, assumptions */
.worked{margin:var(--s4) 0 0;color:var(--ink-2);max-width:var(--measure)}
.worked b{color:var(--ink)}
.edge{margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--well)}
.edge>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:16px 20px;font-weight:var(--w-head);color:var(--ink)}
.edge>summary::-webkit-details-marker{display:none}
.edge>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform var(--t),border-color var(--t)}
.edge[open]>summary::after{transform:rotate(-135deg);border-color:var(--brand)}
.edge__b{padding:0 20px 20px}
.edge__b ul{margin:0 0 var(--s4);padding-left:1.1em;color:var(--ink-2)}
.edge__b li{margin:0 0 6px}
.edge table{min-width:0;font-size:var(--fs-small)}
.edge th,.edge td{padding:12px 16px}
.edge .tablewrap{box-shadow:none}

/* related instruments and the next link */
.related .card{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none}
.related .card h3{margin:0}
.related .card p{margin:0;font-size:var(--fs-small)}
.rel__n{font-size:var(--fs-label);font-weight:800;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.nextline{margin:var(--s5) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
.disclaimer{margin:var(--s6) 0 0;max-width:74ch}

/* segmented control (mode switches) */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{font:700 var(--fs-tiny)/1 var(--sans);min-height:34px;padding:0 14px;border:0;border-radius:var(--r-pill);
  background:none;color:var(--ink-2);cursor:pointer;transition:background var(--t),color var(--t)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}

/* nav: the Instruments panel is two columns of chapters on desktop */
.menu__p--wide{width:min(640px,calc(100vw - 32px));display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.menu__ch{grid-column:auto;margin:6px 11px 2px;font-size:var(--fs-label);font-weight:800;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--brand)}
.menu__col{display:flex;flex-direction:column;gap:1px}
.menu__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.sheet__c{margin:14px 10px 4px;font-size:var(--fs-label);font-weight:800;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.sheet__c:first-of-type{margin-top:4px}

/* footer carries every instrument */
.foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}
@container page (max-width:1000px){.foot__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container page (max-width:680px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container page (max-width:420px){.foot__grid{grid-template-columns:1fr}}
.foot__blurb{max-width:34ch;margin:0}
.foot__sign{color:var(--ink-2)}

/* the hidden attribute must win over component display rules (Share, optional rows) */
[hidden]{display:none!important}
/* a result pane shows the gradient rim of .panel--result, so its own hairline steps aside */
.pane.panel--result{border-color:transparent}

/* The instrument stacks under 960px. The shared base layer declares this collapse before its .inst grid,
   and six pages redeclare .inst locally, so it is restated here, last and with main's weight. */
main .inst > *{ min-width:0 }
@container page (max-width:960px){ main .inst{ grid-template-columns:minmax(0,1fr) } main .verdict{ position:static } }