/* ============================================================================
   patternfetch — "Nordic Ledger" design system (Konzept 1n)
   kühl · luftig · präzise — light surfaces, 1px borders, no shadows.
   Fonts: Public Sans (300/400/600) + IBM Plex Mono (400/600), loaded via
   <link> in each page head.
   ============================================================================ */

/* ---------------- reset & base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,video{max-width:100%;display:block}
a{color:inherit}

:root{
  /* surfaces */
  --bg:#f2f4f5;            /* page background */
  --card:#ffffff;          /* card / panel surface */
  --line:#e1e6e9;          /* borders */
  --row:#eceff1;           /* ledger row separators */

  /* ink */
  --ink:#27333a;
  --muted:#5a6a74;
  /* --faint / --faint-2 are darkened past their "pretty" values on purpose: both
     must clear WCAG AA 4.5:1 against BOTH surfaces they are ever painted on,
     --card #ffffff and --bg #f2f4f5. Measured: --faint 5.20:1 / 4.71:1,
     --faint-2 5.03:1 / 4.56:1. The old #6d7d88 (4.25 / 3.85) and #8b98a1
     (2.96 / 2.68) both failed. Because AA on the darker --bg is the binding
     constraint, the two tones necessarily sit close together — the hierarchy
     between them is now weight and size, not lightness. Do not lighten either. */
  --faint:#5f6f7a;
  --faint-2:#62717c;

  /* accents */
  --blue:#46708e;          /* markers, links, secondary CTA */
  --green:#3c7266;         /* positive / regime up */
  --red:#9a4a3f;           /* negative / regime down (muted falu rust) */

  /* derived soft tints (borders/fills for accent contexts) */
  --blue-soft:#edf2f5;
  --green-soft:#edf3f1;
  --red-soft:#f5efed;
  --blue-line:#c8d6e0;
  --green-line:#c6d8d3;
  --red-line:#e0cdc9;

  /* type */
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;

  /* layout */
  --shell:1140px;
  --r:6px;

  /* Both schemes are authored, so tell the UA — this is what makes form controls,
     scrollbars and the caret follow the scheme instead of staying light-on-dark. */
  color-scheme:light dark;
}


body{
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.62 var(--sans);
  letter-spacing:-.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.up{color:var(--green)}
.down{color:var(--red)}
.blue{color:var(--blue)}
::selection{background:#d4e0e8;color:var(--ink)}

/* ---------------- layout & rhythm ---------------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 28px}
.section{padding:92px 0}
.section.tight{padding:64px 0}
.band{border-top:1px solid var(--line)}
.band.white{background:var(--card)}

.lede{max-width:640px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* Grid/flex children default to min-width:auto, so a wide child (SVG with a big
   viewBox, <pre>, a long unbreakable token) forces its track past the viewport and
   the page overflows sideways on mobile. Every grid child must be free to shrink.
   Apply .minw0 to any page-level grid you add — this is not optional. */
.grid-2>*,.grid-3>*,.grid-4>*,.minw0>*{min-width:0}

/* ---------------- typography ---------------- */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.h1{font-size:clamp(2.1rem,4.6vw,3.15rem);line-height:1.12;margin:20px 0 0;max-width:22ch}
.h1.narrow{max-width:16ch}
.head-h{font-size:clamp(1.45rem,2.6vw,1.95rem);line-height:1.18;margin:14px 0 0}
.head-p{color:var(--muted);margin:14px 0 0;font-size:clamp(.99rem,1.25vw,1.06rem);max-width:600px}
.small{font-size:13px;color:var(--faint)}
.thin{font-weight:300}

/* kicker — caps, wide tracking */
.kicker{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.kicker.blue{color:var(--blue)}

/* ---------------- buttons & links ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;
  text-decoration:none;border-radius:var(--r);padding:12px 20px;cursor:pointer;
  border:1px solid transparent;transition:background .16s,border-color .16s,color .16s}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:#1c262d}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--faint-2)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}

/* secondary: plain blue link */
.link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;
  color:var(--blue);text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link .arw{transition:transform .18s}
.link:hover .arw{transform:translateX(3px)}

/* ---------------- pills / badges / tags ---------------- */
.pill{display:inline-flex;align-items:center;flex-wrap:wrap;font:600 12.5px/1 var(--mono);
  color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 8px}
.pill span{padding:2px 11px;position:relative;white-space:nowrap}
.pill span+span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:var(--line)}
/* the divider is drawn per item, so a wrapped line starts with a stray tick — drop
   dividers once the pill is narrow enough to wrap */
@media (max-width:520px){
  .pill span+span::before{display:none}
  .pill span{padding:2px 7px}
}
.pill b{color:var(--ink);font-weight:600}

.tag{display:inline-block;font:600 11px/1 var(--mono);color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:5px 8px}
.badge{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--r);padding:5px 8px;white-space:nowrap;
  color:var(--faint);background:var(--bg);border:1px solid var(--line)}
.badge.edge{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
.badge.noise{color:var(--faint);background:var(--bg);border-color:var(--line)}
.badge.down{color:var(--red);background:var(--red-soft);border-color:var(--red-line)}
.badge.blue{color:var(--blue);background:var(--blue-soft);border-color:var(--blue-line)}

/* ---------------- card ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card-pad{padding:22px 22px}

/* ---------------- ledger ---------------- */
/* Label left (faint), value right (600), 1px row separators. */
.ledger{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ledger-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--row)}
.ledger-head .lh-k{font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ledger-head .lh-v{font:400 12.5px/1.4 var(--mono);color:var(--ink);text-align:right}
.ledger-head .lh-v b{font-weight:600}
.ledger-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 16px;border-bottom:1px solid var(--row)}
.ledger-row:last-child{border-bottom:0}
.ledger-row .lr-l{font-size:13.5px;color:var(--muted)}
.ledger-row .lr-v{font-size:13.5px;font-weight:600;color:var(--ink);text-align:right}
.ledger-row .lr-v.mono,.ledger-row .lr-v .mono{font-family:var(--mono)}
.ledger-row .lr-v .dim{font-weight:400;color:var(--faint)}
.ledger-cell{padding:12px 16px;border-bottom:1px solid var(--row)}
.ledger-cell:last-child{border-bottom:0}
.ledger-foot{padding:11px 16px;border-top:1px solid var(--row);font-size:12px;color:var(--faint);line-height:1.55}

/* ---------------- base-rate scale ---------------- */
/* 30 —— [baseline, --mid] —— 70, dot marker, CI band.
   left offsets are UNCHANGED: (rate-30)/(70-30)*100%.

   The reference line is the measured PATTERN-FREE BASELINE for that market,
   timeframe and horizon — NOT 50%. A drifting universe moves every directional
   rate away from 50% with no pattern involved, so 50% would make the drift look
   like an edge. Set --mid to the baseline's own offset, computed with the same
   formula: --mid:(baseline-30)/40*100%.
   e.g. US stocks 1d bearish baseline 42.0% -> --mid:30%
        US stocks 1d bullish baseline 57.8% -> --mid:69.5%
        crypto ~50% -> --mid:50% (the default; there the baseline IS a coin flip)

   .rate-band is the CLUSTER-ROBUST 95% interval on the LIFT, centred on the hit
   rate: width = 2*ci/40*100%. The visual test is whether the band touches the
   baseline line. If it does, the pattern is indistinguishable from its baseline —
   use .rate-dot.flat (neutral colour), never up/down, which would imply a
   direction the measurement does not support. */
.rate{padding:2px 0 0}
.rate-track{position:relative;height:4px;background:var(--row);border-radius:99px;margin:12px 0 6px}
.rate-mid{position:absolute;left:var(--mid,50%);top:-5px;bottom:-5px;width:1px;background:var(--ink)}
.rate-band{position:absolute;top:-1px;height:6px;border-radius:99px;background:var(--blue);opacity:.28}
.rate-dot{position:absolute;top:50%;width:10px;height:10px;border-radius:99px;background:var(--blue);
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--card)}
.rate-dot.up{background:var(--green)}
.rate-dot.down{background:var(--red)}
/* band overlaps the baseline -> no measurable lift. Muted on purpose. */
.rate-dot.flat{background:var(--faint)}
.rate-axis{display:flex;justify-content:space-between;font:400 10px/1 var(--mono);color:var(--faint-2)}
.rate-axis .mid{color:var(--faint)}
/* baseline caption sits under the line, not at the track's centre */
.rate-axis .mid.at{position:absolute;left:var(--mid,50%);transform:translateX(-50%);white-space:nowrap}
.rate-axis.anchored{position:relative}

/* multi-row signal ledger (rate scale inside ledger rows) */
.sig-row{display:grid;grid-template-columns:190px 1fr 118px 92px;column-gap:20px;align-items:center;
  padding:16px;border-bottom:1px solid var(--row)}
.sig-row:last-of-type{border-bottom:0}
.sig-meta .sym{font:600 14px/1.3 var(--mono);color:var(--ink)}
.sig-meta .tf{font:400 11.5px/1.3 var(--mono);color:var(--faint-2)}
.sig-meta .pat{margin-top:3px;font-size:13px;color:var(--muted)}
.sig-meta .uni{margin-top:2px;font-size:11.5px;color:var(--faint-2)}
.sig-track{position:relative;height:4px;background:var(--row);border-radius:99px}
.sig-track .rate-mid{top:-8px;bottom:-8px}
.sig-val{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sig-val .v{display:block;font-weight:600;font-size:15.5px;color:var(--ink)}
.sig-val .ci{display:block;font-size:11.5px;color:var(--faint);margin-top:1px}
.sig-val .n{display:block;font-size:10.5px;color:var(--faint-2);margin-top:1px}
.sig-row .badge{justify-self:end}
.sig-axis{display:grid;grid-template-columns:190px 1fr 118px 92px;column-gap:20px;padding:10px 16px 14px}
.sig-axis .rate-axis{grid-column:2}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(242,244,245,.88);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--shell);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:9px;font:600 16px/1 var(--sans);
  letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand svg{overflow:visible}
.nav-links{display:flex;gap:22px;margin-left:6px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .16s}
.nav-links a:hover{color:var(--ink)}
.nav-sp{flex:1}
.nav-cta{font-size:13.5px;font-weight:600;color:var(--bg);background:var(--ink);
  padding:9px 16px;border-radius:var(--r);text-decoration:none;transition:background .16s}
.nav-cta:hover{background:#1c262d}
.nav-burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);
  padding:8px 9px;cursor:pointer;color:var(--ink)}
.nav-burger svg{display:block}
.nav-mobile{display:none}
.nav.open .nav-mobile{display:block;border-top:1px solid var(--row);background:var(--bg)}
.nav-mobile a{display:block;padding:13px 28px;color:var(--ink);font-size:15px;
  text-decoration:none;border-bottom:1px solid var(--row)}
.nav-mobile a:last-child{border-bottom:0}

/* ---------------- code block ---------------- */
pre{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;overflow-x:auto}
pre code{font:400 12.8px/1.65 var(--mono);color:var(--ink);white-space:pre}
code{font-family:var(--mono)}
.cmt{color:var(--faint-2)}
.tok-key{color:var(--blue)}
.tok-str{color:var(--green)}
.tok-num{color:var(--red)}
.code-cap{margin:8px 2px 0;font:400 11.5px/1.5 var(--mono);color:var(--faint-2)}

/* inline code chip */
.ic{font:500 .86em/1 var(--mono);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:4px;padding:2px 5px;white-space:nowrap}
.band.white .ic,.card .ic,.ledger .ic{background:var(--bg)}
/* .ic is nowrap by design so short chips (/v1/brief) never break mid-token. Anything
   longer than ~25 chars — a CLI line, a URL, a comma-separated identifier list —
   MUST take .wrap, or it forces the layout viewport open and the page scrolls
   sideways on mobile. Line-height is restored because a wrapped chip has >1 line. */
.ic.wrap{white-space:normal;overflow-wrap:anywhere;line-height:1.5}

/* ---------------- table ---------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.nordic{width:100%;border-collapse:collapse;font-size:13.5px;min-width:460px}
table.nordic th,table.nordic td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--row)}
table.nordic thead th{font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--line)}
table.nordic tbody tr:last-child td{border-bottom:0}
table.nordic tbody tr{transition:background .14s}
table.nordic tbody tr:hover{background:#f7f9fa}
table.nordic td .ep{font:600 12.5px/1.3 var(--mono);color:var(--blue);white-space:nowrap}
table.nordic td .pr{font:600 12.5px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
table.nordic td .pr.free{color:var(--green)}
table.nordic td{color:var(--muted)}
table.nordic td:first-child{color:var(--ink)}

/* mono data grid — 2c "Nordic Mono" loan for dense data blocks */
.data-grid{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.data-grid .dg{display:grid;grid-template-columns:96px 1fr}
.data-grid .dg>div{padding:9px 14px;border-bottom:1px solid var(--row);font:400 12px/1.5 var(--mono)}
.data-grid .dg>div:nth-last-child(-n+2){border-bottom:0}
.data-grid .dg .k{color:var(--faint-2);font-size:11px}
.data-grid .dg .v{font-weight:600;color:var(--ink)}

/* ---------------- FAQ / details ---------------- */
details.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  margin:0 0 10px;overflow:hidden;transition:border-color .16s}
details.faq[open]{border-color:var(--faint-2)}
details.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:600;font-size:14.5px;
  color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .plus{flex:none;width:16px;height:16px;position:relative;transition:transform .2s}
details.faq summary .plus::before,details.faq summary .plus::after{content:"";position:absolute;background:var(--blue)}
details.faq summary .plus::before{left:0;right:0;top:7px;height:2px}
details.faq summary .plus::after{top:0;bottom:0;left:7px;width:2px;transition:opacity .2s}
details.faq[open] summary .plus{transform:rotate(180deg)}
details.faq[open] summary .plus::after{opacity:0}
details.faq .ans{padding:0 18px 16px;font-size:14px;color:var(--muted);line-height:1.6}
details.faq .ans b{color:var(--ink);font-weight:600}

/* ---------------- forms ---------------- */
.field{display:block;margin:0 0 14px}
.field .flab{display:block;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 7px}
.input,.select{width:100%;font:400 14.5px/1.4 var(--sans);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;outline:none;
  transition:border-color .16s}
.input.mono{font-family:var(--mono)}
.input:focus,.select:focus{border-color:var(--blue)}
.input::placeholder{color:var(--faint-2)}

/* ---------------- long-form prose ---------------- */
/* Reference and article pages (docs, methodology, guides) need running body copy
   that the landing pages don't. .prose is the ONE wrapper for it — do not restyle
   p/ul/ol per page. Headings stay outside the system here: they remain .head-h,
   .kicker etc. The measure is set on the children, not the wrapper, so a <pre>,
   a .tbl-wrap or a .ledger dropped into the same block still runs full width. */
.prose>p,.prose>ul,.prose>ol{max-width:74ch}
.prose p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:14px 0 0}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--blue);text-decoration:none;font-weight:600}
.prose a:hover{text-decoration:underline;text-underline-offset:3px}
/* A BUTTON inside a .prose block is not a prose link. `.prose a` scores (0,1,1) and
   outranks `.btn-primary` (0,1,0), so the button went on painting the --ink fill
   while taking link-blue as its LABEL: blue on ink, measured 2.45:1 in light and
   2.44:1 in dark — a real AA failure on the primary call to action of 20 pages,
   and it predates the dark scheme. Restate the button colours where they win.
   Order matters: these three score the same, so the generic .btn must come first. */
.prose a.btn{color:var(--ink)}
.prose a.btn-primary{color:var(--bg)}
.prose a.link{color:var(--blue)}
.prose ul,.prose ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:pf-li}
.prose li{position:relative;padding:6px 0 6px 22px;font-size:14.5px;color:var(--muted);line-height:1.62}
/* ul marks with a gutter dash, ol with a mono numeral — either way the text block
   keeps one left edge with the paragraphs around it */
.prose ul>li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:1px;background:var(--faint-2)}
.prose ol>li{counter-increment:pf-li}
.prose ol>li::before{content:counter(pf-li);position:absolute;left:0;top:6px;
  font:600 11px/1.62 var(--mono);color:var(--faint-2)}

/* ---------------- micro-label ---------------- */
/* The caps label that sits above a block: a code column, a card section, a data
   group. Same face as .field .flab and the styleguide's .sg-lab — deliberately,
   because there is ONE label tone in the system, not one per page. Wave-2 pages
   each reinvented this locally as .io-lab / .lab / .pay-lab before it lived here. */
.lab{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px}

/* ---------------- related-link tag row ---------------- */
/* The "keep reading" row at the foot of an article page. Children are .tag or
   .badge; the anchor never underlines because the chip border is the affordance. */
.a-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.a-tags a{text-decoration:none}

/* ---------------- tool chip row ---------------- */
/* MCP tool chips. Pages override the margin; the flex behaviour is shared. */
.tools{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}

/* ---------------- breadcrumb ---------------- */
/* Visible counterpart to a BreadcrumbList JSON-LD. A page that ships that
   structured data must also show the trail — same rule as FAQPage and .faq. */
.crumb{font:600 12px/1 var(--mono);color:var(--faint-2);margin:0 0 12px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--blue)}

/* ---------------- accent card ---------------- */
/* A .card tinted to carry a positive verdict — the free-tier / "this one is free"
   callout. Distinct from .note, which is the blue aside and stays one per page.
   .free-tier is kept as an alias because wave-2 pages already ship that name. */
.card.accent-green,.free-tier{border-color:var(--green-line);background:var(--green-soft)}
.card.accent-green .kicker,.free-tier .kicker{color:var(--green)}

/* ---------------- notes / callouts ---------------- */
.note{border-left:2px solid var(--blue);background:var(--blue-soft);
  border-radius:0 var(--r) var(--r) 0;padding:14px 16px}
.note p{margin:0;font-size:13.5px;color:var(--ink);line-height:1.6}
.note b{color:var(--blue);font-weight:600}

/* ---------------- footer ---------------- */
footer.nordic-foot{border-top:1px solid var(--line);background:var(--bg)}
.foot-in{max-width:var(--shell);margin:0 auto;padding:56px 28px 40px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px}
.foot-brand p{font-size:13.5px;color:var(--muted);max-width:34ch;margin:12px 0 0}
.foot-col h5{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px}
.foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:14px;padding:5px 0;transition:color .14s}
.foot-col a:hover{color:var(--blue)}
.disc{margin-top:38px;padding-top:22px;border-top:1px solid var(--row);
  font-size:12px;line-height:1.6;color:var(--faint)}
.disc a{color:var(--muted);text-decoration:underline}
.foot-legal{margin-top:16px;font-size:12px;color:var(--faint-2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------------- focus ---------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,
.input:focus-visible,.select:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r)}

/* ---------------- motion hygiene ---------------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .grid-2{grid-template-columns:1fr}
  /* These rules re-place the signal row's children as grid items, so they are only
     ever correct INSIDE .sig-row. Left unscoped they also hit a .sig-track or
     .sig-val used standalone (e.g. a track inside a .ledger-cell or a card),
     turning it into a stray grid item and left-aligning its value stack. */
  .sig-row{grid-template-columns:1fr auto;row-gap:12px;column-gap:12px}
  .sig-row .sig-meta{grid-column:1;grid-row:1}
  .sig-row .badge{grid-column:2;grid-row:1;align-self:start}
  .sig-row .sig-track{grid-column:1/-1;grid-row:2}
  .sig-row .sig-val{grid-column:1/-1;grid-row:3;text-align:left;display:flex;gap:12px;align-items:baseline}
  .sig-row .sig-val .v,.sig-row .sig-val .ci,.sig-row .sig-val .n{display:inline}
  .sig-axis{display:block;padding:8px 16px 14px}
}
@media (max-width:720px){
  .section{padding:64px 0}
  .section.tight{padding:48px 0}
  .shell{padding:0 20px}
  .nav-in{padding:12px 20px;gap:14px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  table.nordic{min-width:420px}
}
@media (max-width:420px){
  .foot-top{grid-template-columns:1fr}
}

/* ============================================================================
   DARK SCHEME
   ============================================================================
   Follows the OS preference; there is no in-page toggle, so nothing here can get
   out of sync with a stored setting.

   HOW THE VALUES WERE PICKED — the same method as the light scheme, not eyeballed.
   Every tone was solved so its contrast against the BINDING surface lands on the
   light scheme's own measured ratio. That keeps the hierarchy (muted > faint >
   faint-2 is a real, ordered difference and not three shades of the same grey) and
   keeps both schemes the same distance above the 4.5:1 AA floor.

   THE BINDING SURFACE FLIPS. In the light scheme --bg #f2f4f5 is DARKER than --card
   #ffffff, so AA on --bg was the binding constraint. Inverted, --card #181f24 is
   LIGHTER than --bg #11171b, so here --card binds. Anything that clears AA on --card
   clears it on --bg automatically — check new tones against --card, not --bg.

   Measured (ink vs --card / vs --bg), light equivalent in brackets:
     --ink     #d0dae0  11.73 / 12.72   [light 11.74 / 12.96]
     --muted   #7e919e   5.10 /  5.53   [light  5.08 /  5.60]
     --faint   #7b8a95   4.69 /  5.09   [light  4.71 /  5.20]
     --faint-2 #798892   4.56 /  4.95   [light  4.56 /  5.03]
     --blue    #5090bd   4.81 /  5.22   [light  4.80 /  5.29]
     --green   #4e9a8a   5.01 /  5.43   [light  5.02 /  5.54]
     --red     #d1806c   5.57 /  6.04   [light  5.56 /  6.13]

   The tinted callout surfaces carry their own accent as TEXT, which is the pairing
   that fails most often, so they were solved too rather than dimmed by eye:
     --blue-soft  #16222b   blue on it 4.67   (.note b, .badge.blue)
     --green-soft #152420   green on it 4.84  (.badge.edge, .card.accent-green)
     --red-soft   #261b18   red on it  5.60   (.badge.down)
   --ink on --blue-soft is 11.39, so .note body copy stays readable.

   --ink is deliberately NOT #fff. Pure white on a dark ground halates and overshoots
   the light scheme's own 11.74; #d0dae0 reproduces it. Do not brighten it.
   ============================================================================ */
@media (prefers-color-scheme: dark){
  :root{
    /* surfaces — --card stays the ELEVATED (lighter) one, as in light mode */
    --bg:#11171b;
    --card:#181f24;
    --line:#2a343b;
    --row:#222c33;

    /* ink */
    --ink:#d0dae0;
    --muted:#7e919e;
    --faint:#7b8a95;
    --faint-2:#798892;

    /* accents — lightened off the brand hues, hue held, luminance re-solved */
    --blue:#5090bd;
    --green:#4e9a8a;
    --red:#d1806c;

    /* derived soft tints: dark tinted surfaces, not washes of the light ones */
    --blue-soft:#16222b;
    --green-soft:#152420;
    --red-soft:#261b18;
    --blue-line:#2d4657;
    --green-line:#274740;
    --red-line:#4d332c;
  }

  /* --- the literals the light scheme hardcodes; each needs its dark twin, or it
         stays a light-mode value sitting on a dark ground --- */

  /* was #d4e0e8 (a light blue wash) — needs to darken, not lighten */
  ::selection{background:#2d4657;color:var(--ink)}

  /* .btn-primary / .nav-cta paint --ink as a FILL and --bg as the label, so the
     inversion is automatic — but the hover literal #1c262d was "ink, darker" and
     in dark mode ink is near-white, so hover has to go LIGHTER instead. */
  .btn-primary:hover,.nav-cta:hover{background:#eaf1f5}

  /* sticky nav scrim: --bg at .88, restated because rgba() cannot read a token */
  .nav{background:rgba(17,23,27,.88)}

  /* was #f7f9fa — "one step off white". Dark twin is one step off --card. */
  table.nordic tbody tr:hover{background:#1d252b}

  /* The CI band is a translucent accent over --row. At .28 the light-mode value it
     is nearly invisible against a dark track, and this band is load-bearing: whether
     it touches the baseline is how a reader tells an edge from noise. */
  .rate-band{opacity:.42}
}