/* ============================================================================
   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;
}

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}
.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}
}