/* 0dteclose — design system, ported from tapexray's Robinhood system
   (D:\repos\prediction_market, worktree robinhood-ds @ 1505f66, site/src/app/globals.css;
   spec docs/superpowers/specs/2026-09-27-layout-rebuild-design.md). Dark only.
   One near-black canvas, white/grey ink tiers, one electric green rationed to the primary action,
   warm red for loss, amber for caution. Numbers in Geist Mono, prose in Geist Sans. 8 px scale, radius
   roles 8/10/12/16/20/pill, no borders on cards (lightness is the elevation), no shadows.
   Contrast is asserted in tests/test_css_contrast.py: keep every colour in :root as 6-digit hex. */
:root {
  --surface-0: #0E0E0E;   /* canvas */
  --surface-1: #1B1B1B;   /* cards, sheet, inputs */
  --surface-2: #2C2C2C;   /* neutral fills, badges, the (i) panel */
  --ink: #FFFFFF;
  --ink-2: #A8A8A8;       /* 8.1:1 on the canvas, 7.2:1 on a card */
  --ink-3: #8C8C8C;       /* captions: 5.8:1 / 5.1:1 */
  --placeholder: #A8A8A8;
  --line: #2C2C2C;        /* dividers, hairlines (decorative, exempt from 3:1) */
  --line-ui: #6B6B6B;     /* input and control borders: 3.2:1 on a card, 3.7:1 on the canvas */
  --accent: #00C805;      /* the one green */
  --accent-hover: #00B004;
  --accent-pressed: #00A004;
  --on-accent: #0E0E0E;   /* dark ink on green, never white */
  --gain: #00C805;
  --loss: #FF5000;
  --caution: #FFB000;
  --focus: #00C805;
  --accent-tint: rgba(0, 200, 5, 0.12);
  --loss-tint: rgba(255, 80, 0, 0.12);
  --caution-tint: rgba(255, 176, 0, 0.14);
  --focus-ring: rgba(0, 200, 5, 0.15);
  --scrim: rgba(0, 0, 0, 0.6);
  --header-glass: rgba(14, 14, 14, 0.85);
  --tabbar-glass: rgba(14, 14, 14, 0.92);
  /* aliases so the path-chart SVG fallbacks and any straggler selector resolve */
  --bg: #0E0E0E;
  --surface: #1B1B1B;
  --text: #FFFFFF;
  --text-2: #A8A8A8;
  --muted: #8C8C8C;
  --warn: #FFB000;
  --line-panel: #2C2C2C;
  --sans: "Geist Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-24: 1.5rem; --fs-26: 1.625rem; --fs-30: 1.875rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-56: 3.5rem;
  --lh-tight: 1.07; --lh-display: 1.15; --lh-snug: 1.3; --lh-body: 1.5;
  --r-badge: 8px; --r-input: 10px; --r-product: 12px; --r-card: 16px; --r-sheet: 20px; --r-pill: 9999px;
  --tap: 44px; --control: 48px; --band-h: 56px;
  --shell: 84rem; --gutter: 16px; --col-gap: 24px; --flow: 40px; --measure: 40rem;
  --motion-fast: 150ms; --motion-standard: 250ms; --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1);
}

@font-face { font-family: "Geist Sans"; src: url("../fonts/geist-sans-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--surface-0); color: var(--ink); font-family: var(--sans); font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
p { margin: 0 0 12px; }
ul, ol { padding-left: 20px; }
b, strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.9em; }
img { max-width: 100%; height: auto; }
:where(a, button, select, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num, .stat-card strong, .row-value, .metric .v, .hn-value, .hn-side .num, td.num, .cite-box, input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* table cells hold prose too: sans, but figures still align */
.small { font-size: var(--fs-14); }
.caption, .verified-stamp, .field-hint, .footer-disclaimer { font-size: var(--fs-12); color: var(--ink-3); line-height: 1.4; }
/* Captions read at about 80 characters' measure (80ch ≈ 636 px at 12 px: the long-read text column's width); in a
   narrower column they simply take the column. Table captions too: a full-width table's caption no longer runs 150+
   characters on one line. Wrapped, their lines are balanced: no runt last line ("CBOE quote.", "QQQ."), the system's
   rule of no one-word last line (.stat-sub) and then some. The landing's as-of caption keeps pretty: balanced at 390 it
   would open a line on the "/" of "call / put". */
.caption, figcaption, caption { max-width: 80ch; text-wrap: balance; }
.live-card > .caption { text-wrap: pretty; }
.dim { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.mut { color: var(--ink-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Layout: ONE shell, ONE 12-column board ───────────────────────────────
   Header inner, main and footer .wrap share one box (--shell content + --gutter each side), so the brand, the page and
   the footer start and end on the same x on every page. main is the board: one column below 1024 px, twelve from
   1024 px. Every direct child spans the full row unless it carries a span primitive (.span-5 … .span-8); adjacent
   spans that sum to 12 sit side by side. Bands that compose inside (.home-hero, the market hero, .board-layout,
   .read, the email capture) use grid-template-columns: subgrid, so every column line on a page is the board's.
   Reading measures come from capping children (--measure, ch caps), never from narrowing main.
   Breakpoints: <640 phone · 640 tablet (wider gutter) · 1024 board on · 1280 market heroes split · 1440 gutter 40. */
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --flow: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 40px; --col-gap: 32px; } }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.site-header-inner, main, .site-footer .wrap { width: 100%; max-width: calc(var(--shell) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
main { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; row-gap: var(--flow); padding-top: 0; padding-bottom: 96px; }
main > * { min-width: 0; margin-top: 0; }
main > p { margin-bottom: 0; }
main.page-home { --flow: 48px; }
@media (min-width: 640px) { main.page-home { --flow: 64px; } }
@media (min-width: 1024px) {
  main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  main > * { grid-column: 1 / -1; }
  main.page-home { --flow: 96px; }
  /* span primitives: auto-placed left to right, so .span-7 + .span-5 (or 5+7, 6+6) share one row; a long read's .span-8
     hero shares its row with the "run it" card (see Long reads) */
  main > .span-5 { grid-column: span 5; } main > .span-6 { grid-column: span 6; }
  main > .span-7 { grid-column: span 7; } main > .span-8 { grid-column: span 8; }
  /* a span whose partner is missing (an empty data state, a page built without one of the pair) takes the whole row
     instead of leaving 12 − N columns dead; partners are adjacent siblings: 7 | 5, 5 | 7, 6 | 6, the /alerts/ hero
     with its rules card, a long read's hero with its "run it" card */
  main > .span-5:not(.span-7 + *):not(:has(+ .span-7)),
  main > .span-6:not(.span-6 + *):not(:has(+ .span-6)),
  main > .span-7:not(.span-5 + *):not(:has(+ .span-5)):not(:has(+ .card > #rules-list)),
  main > .span-8:not(:has(+ .cta)) { grid-column: 1 / -1; }
  /* a band composes its own children on the board's columns */
  .band { display: grid; grid-template-columns: subgrid; align-items: start; }
  .band > * { grid-column: 1 / -1; min-width: 0; }
}
section > h2:first-child, section > h3:first-child { margin-top: 0; }
[id] { scroll-margin-top: calc(var(--band-h) + 16px); }

/* ── Header: 56 px, sticky, translucent, one hairline ─────────────────── */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--band-h); background: var(--header-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; gap: 24px; height: calc(var(--band-h) - 1px); }
@media (min-width: 1024px) { .site-header-inner { gap: 32px; } }
.brand { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.site-nav { display: flex; align-items: center; align-self: stretch; gap: 24px; }
.site-nav a { display: flex; align-items: center; align-self: stretch; color: var(--ink-2); font-size: var(--fs-14); font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.btn-alerts { margin-left: auto; }

/* ── Bottom tab bar: phone chrome, shown under 640 px ─────────────────── */
.tab-bar { display: none; }

/* ── Type roles (spec §4) ─────────────────────────────────────────────── */
h1 { font-size: var(--fs-40); line-height: var(--lh-display); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: var(--fs-24); line-height: 1.33; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 16px; text-wrap: balance; }
main.page-home h2:not(.rail-heading) { font-size: var(--fs-30); line-height: 1.27; font-weight: 700; }
h3 { font-size: var(--fs-18); line-height: 1.44; font-weight: 600; margin: 24px 0 8px; }
/* Market h1s carry an ISO date near their start: greedy wrapping (not balance) keeps "2026-09-25" whole on line one
   whenever the line holds ~31 characters, which every column from a 390 px phone up does. */
.hero-market h1 { font-size: var(--fs-24); line-height: 1.33; font-weight: 600; letter-spacing: -0.01em; max-width: 44ch; margin: 0 0 24px; text-wrap: wrap; }
/* A market h1 with no date (outcomes, pin rate, simulator) is balanced: never a one-word last line, never "n = 1" / "session". */
.hero-market:not(:has(> .stat-grid)) h1 { text-wrap: balance; }
.eyebrow { margin: 0 0 8px; font-size: var(--fs-14); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.lede, .subhead { font-size: var(--fs-18); line-height: 1.56; color: var(--ink-2); max-width: 44ch; margin: 0 0 24px; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 500; color: var(--ink-2); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 0; margin-bottom: 0; }
.hero > :last-child { margin-bottom: 0; }
.hero:not(.hero-market) h1 { max-width: 20ch; }
.hero-market { padding: 32px 0 0; }
@media (min-width: 1024px) { .lede { max-width: 56ch; } .hero:not(.hero-market):not(.home-hero) h1 { max-width: 24ch; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
/* The hero number: 40/700 mono, an optional 24 px companion on the same baseline, a 12 px caption. */
.hero-number { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; margin: 0 0 8px; }
.hn-value { font-size: var(--fs-40); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.hn-side { font-size: var(--fs-24); color: var(--ink-3); }
.hn-side .num { font-weight: 500; }
.hn-side-caption { font-family: var(--sans); font-size: var(--fs-14); color: var(--ink-3); }
.hn-caption { flex-basis: 100%; font-size: var(--fs-12); color: var(--ink-3); }
/* The simulator's spot shows only once a quote has landed (simulator.js sets data-live, and keeps it through a later failed
   poll). Until then (static preview, API down, collector behind) there is no "—" placeholder: the countdown is the hero
   number, at the hero size and still the countdown red, with its "to the close" caption. */
#q-spot:not([data-live]) { display: none; }
/* The simulator's caption is two lines: the quote's as-of (or "quote unavailable") under the spot, then the close the
   countdown runs to. The " · " between them in the markup is not drawn (font-size 0), so no line ends on a dangling
   separator; each line balances when it has to wrap (a visitor outside ET gets "… your time" in the close line). */
.hn-caption:has(> #cd-label) { display: flex; flex-direction: column; row-gap: 1px; font-size: 0; line-height: 0; }
.hn-caption:has(> #cd-label) > span { font-size: var(--fs-12); line-height: var(--lh-body); text-wrap: balance; }
.hero-number:has(> #q-spot:not([data-live])) #cd-timer { font-size: var(--fs-40); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.answer-line { font-size: var(--fs-16); color: var(--ink-2); max-width: 60ch; margin: 8px 0 0; }
.caption-amber { color: var(--caution); font-size: var(--fs-12); margin: 0 0 8px; }
/* Landing: below 1024 px the copy, the countdown and the live card stack; from 1024 px see "the instrument panel" below. */
.home-hero { padding: 64px 0 0; }
.home-hero h1 { font-size: var(--fs-56); line-height: var(--lh-tight); }
.home-hero .subhead { max-width: 44ch; }
/* The countdown to the close (clock.js): the one big number on the landing, under the h1. Mono tabular, so seconds never shift width. */
.home-countdown { margin: 0 0 24px; }
.hc-value { display: block; font-size: var(--fs-56); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
/* Every countdown is the one red (--loss): deliberate urgency, owner's call 2026-09-27. 5.9:1 on the canvas (test_css_contrast). */
[data-countdown] { color: var(--loss); }
.hc-caption { display: block; margin-top: 8px; font-size: var(--fs-14); color: var(--ink-3); }
@media (max-width: 1023px) { .home-hero .live-card { margin-top: 32px; } }
/* ≥1024: the hero is one band on the board's columns. Row 1: the h1 across 1–8, the subhead over "Run your strike" in
   9–12, both bottom-aligned to it. Under it the instrument panel: a full-bleed --surface-1 band whose content keeps to
   the 12 columns — the countdown in 1–3, one cell per underlying in 4–6 / 7–9 / 10–12 (auto-placed after the
   countdown, so no per-child rule), "Last published levels" above the cells and the as-of caption below them. The copy,
   countdown, card and rows wrappers step aside (display: contents), so the DOM stays the phone's; each cell is a row
   subgrid (name / value / sub) and every big number sits on one baseline. The band's paint is an absolutely placed
   ::before on the panel's grid rows, widened by a clipped box-shadow: no 100vw box, no horizontal scroll. */
@media (min-width: 1024px) {
  .home-hero {
    display: grid; grid-template-columns: subgrid; position: relative; isolation: isolate; padding-top: 80px;
    grid-template-rows: [eyebrow] auto [title] minmax(0, 1fr) [action] auto 72px [panel-start] 40px [head] auto
      [cell] auto [cell-value] auto [cell-sub] auto [note] auto 40px [panel-end];
  }
  .home-hero::before { content: ""; position: absolute; z-index: -1; grid-column: 1 / -1; grid-row: panel-start / panel-end; inset: 0; background: var(--surface-1); box-shadow: 0 0 0 100vmax var(--surface-1); clip-path: inset(0 -100vmax); }
  .home-hero-copy, .home-countdown, .home-hero .live-card, .home-hero .live-card > .rows { display: contents; }
  .home-hero .eyebrow { grid-column: 1 / -1; grid-row: eyebrow; margin: 0 0 16px; }
  .hero.home-hero h1 { grid-column: 1 / span 8; grid-row: title / span 2; align-self: end; max-width: none; margin: 0; font-size: clamp(3rem, 4.4vw, 4.5rem); }
  .home-hero .subhead { grid-column: 9 / -1; grid-row: title; align-self: end; margin: 0 0 24px; font-size: var(--fs-16); line-height: 1.5; }
  .home-hero .hero-actions { grid-column: 9 / -1; grid-row: action; align-self: end; }
  .home-hero .rail-heading { grid-column: 4 / -1; grid-row: head; margin: 0 0 20px; font-size: var(--fs-14); color: var(--ink-2); }
  .hc-value { grid-column: 1 / span 3; grid-row: cell-value; align-self: last baseline; font-size: var(--fs-40); }
  .hc-caption { grid-column: 1 / span 3; grid-row: cell-sub; margin: 0; padding-top: 10px; font-size: var(--fs-13); line-height: 1.4; }
  .home-hero .live-card .row { grid-column: span 3; grid-row: cell / span 3; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-template-areas: "name" "value" "sub"; align-items: start; min-height: 0; padding: 0; border: 0; }
  .home-hero .live-card .row::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--col-gap) / -2); width: 1px; background: var(--line); }
  .home-hero .live-card .row-name { font-size: var(--fs-14); color: var(--ink-2); margin-bottom: 12px; }
  .home-hero .live-card .row-value { align-self: last baseline; text-align: left; font-size: var(--fs-32); line-height: 1; }
  .home-hero .live-card .row-sub { margin: 0; padding-top: 10px; font-size: var(--fs-13); line-height: 1.4; }
  .home-hero .live-card > .caption { grid-column: 4 / -1; grid-row: note; margin: 24px 0 0; }
}
@media (min-width: 1280px) {
  .home-hero .subhead { font-size: var(--fs-18); line-height: 1.56; }
  .hc-value { font-size: var(--fs-56); }
  .home-hero .live-card .row-value { font-size: var(--fs-40); }
  /* from 1280 the as-of caption is the panel's one-line footnote under the three cells (~148 characters): a single
     line has no return sweep, so the captions' 80ch reading cap is lifted; below 1280 it wraps and keeps the cap */
  .home-hero .live-card > .caption { max-width: none; }
}
.capsule { font-size: var(--fs-16); line-height: 1.5; color: var(--ink-2); max-width: 44ch; margin: 12px 0 0; }
/* Landing bands under the hero: "Into the close" (7) beside "After the close" (5), the right-hand column reading top to
   bottom as the data column (closes, then the archive links); the guides run in three hairline columns, underlined like
   every other link; the email capture is a band on the same 7|5 split. */
main.page-home > section > h2:first-child { margin-bottom: 20px; }
.home-guides .link-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.home-guides .link-list li { padding: 14px 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .home-guides .link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); } }
@media (min-width: 1024px) { .home-guides .link-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { main.page-home .pill-row { margin: 8px 0 12px; } main.page-home .pill-row .btn { min-height: 52px; min-width: 104px; padding: 0 28px; font-size: var(--fs-16); } }

/* ── Cards: a lighter surface and nothing else ────────────────────────── */
.card, .panel, .rail-card, .live-card, .email-capture { background: var(--surface-1); border: 0; border-radius: var(--r-card); padding: 20px; }
.card > :first-child, .panel > :first-child { margin-top: 0; }
.card > :last-child, .panel > :last-child { margin-bottom: 0; }
.card-featured { background: var(--surface-1); border-radius: var(--r-sheet); padding: 28px; }
/* The simulator's ticket (an order ticket, top of the rail beside the form; after the ladder on a phone): heading, the one
   sentence, the page's one green button full width over the share link, the free-cap line, then the honesty capsule. The
   rail is 248–371 px inside the card from 1024 px, so the buttons stack and the primary wraps to two balanced lines when
   it must (1024–1224). */
.card-featured > p { margin: 0; }
.card-featured > .capsule { margin-top: 20px; }
.cite-box, .flag-banner { background: var(--surface-1); border: 0; border-radius: var(--r-product); padding: 16px 20px; }
.cite-box { font-family: var(--mono); font-size: var(--fs-13); overflow-x: auto; white-space: pre-wrap; color: var(--ink-2); }
.flag-banner { background: var(--caution-tint); color: var(--caution); font-size: var(--fs-14); margin: 16px 0; }
.flag-banner a { color: var(--caution); }
.rail-heading { font-size: var(--fs-18); font-weight: 600; margin: 0 0 12px; text-wrap: balance; display: flex; align-items: center; gap: 4px; }
.rail-card p { margin: 0 0 8px; }
.rail-card p:last-child { margin-bottom: 0; }
.rail-card .row-value { font-size: var(--fs-18); }
.rail-card .rows { margin-bottom: 8px; }
/* The simulator's levels card waits for a quote (simulator.js marks #q-maxpain data-live): without one it is two dashes. */
.rail-card:has(#q-maxpain:not([data-live])) { display: none; }

/* ── Stat tiles ───────────────────────────────────────────────────────── */
/* Sized by count (1–9 tiles), so no row is ever partial. Phones: 2 across, an odd last tile takes the whole row. From
   640 px: 1–4 tiles in one row; 6 and 9 as 3 × n; 5 on a 6-track grid (3 + 2) and 7 on a 12-track grid (4 + 3).
   8 tiles are the session block, whose tiles 5–8 hold compound values ("7,700 → 7,700", "±24.65 / 58.99"): a 4-track
   bento where tiles 5–8 take two tracks, rows 4 · 2+2 · 2+2, room for 14 characters at 24 px (on phones 2 · 2 · 1 × 4). */
.stat-grid { --stat-cols: 2; display: grid; grid-template-columns: repeat(var(--stat-cols), minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; }
.stat-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat-grid:has(> :nth-child(8):last-child) > :nth-child(n+5) { grid-column: auto / span 2; }
@media (min-width: 640px) {
  .stat-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .stat-grid:has(> :only-child) { --stat-cols: 1; }
  .stat-grid:has(> :nth-child(3):last-child), .stat-grid:has(> :nth-child(6):last-child), .stat-grid:has(> :nth-child(9):last-child) { --stat-cols: 3; }
  .stat-grid:has(> :nth-child(4):last-child), .stat-grid:has(> :nth-child(8):last-child) { --stat-cols: 4; }
  .stat-grid:has(> :nth-child(5):last-child) { --stat-cols: 6; }
  .stat-grid:has(> :nth-child(5):last-child) > :nth-child(-n+3) { grid-column: auto / span 2; }
  .stat-grid:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: auto / span 3; }
  .stat-grid:has(> :nth-child(7):last-child) { --stat-cols: 12; }
  .stat-grid:has(> :nth-child(7):last-child) > :nth-child(-n+4) { grid-column: auto / span 3; }
  .stat-grid:has(> :nth-child(7):last-child) > :nth-child(n+5) { grid-column: auto / span 4; }
}
.stat-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface-1); border-radius: var(--r-card); padding: 16px 20px; color: var(--ink); text-decoration: none; min-width: 0; }
a.stat-card:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-ui); }
.stat-label { font-size: var(--fs-14); color: var(--ink-3); display: flex; align-items: center; gap: 4px; text-wrap: balance; } /* "Spot at" / "8:49am ET" */
.stat-card strong { font-size: var(--fs-24); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.stat-sub { font-size: var(--fs-12); color: var(--ink-3); text-wrap: pretty; } /* no one-word last line ("spot", "open") */

/* ── List rows: name left, number right, ≥ 56 px, one hairline ────────── */
.rows { display: block; margin: 0; }
.row, .metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "sub value"; align-items: center; column-gap: 16px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row:last-child, .metric:last-child { border-bottom: 0; }
.row-name, .metric .k { grid-area: name; font-size: var(--fs-16); color: var(--ink); text-decoration: none; }
a.row-name { text-decoration: underline; text-decoration-color: var(--line-ui); }
a.row-name:hover { color: var(--accent); }
.row-sub, .metric .sub { grid-area: sub; font-size: var(--fs-12); color: var(--ink-3); margin-top: 2px; }
.row-value { grid-area: value; text-align: right; font-size: var(--fs-24); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }
.metric .v-wrap { grid-area: value; text-align: right; font-size: var(--fs-24); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
.metric .v { font-size: var(--fs-24); font-weight: 700; }
.metric .v.ok { color: var(--gain); }
.metric .v.warn { color: var(--caution); }
.metric .v.danger { color: var(--loss); }
#rules-list .metric .v { font-family: var(--sans); font-size: var(--fs-14); font-weight: 600; }
/* An alert rule's value is a phrase ("waiting for email confirmation"), not a number: stack the row instead of right-aligning it. */
#rules-list .metric { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "value" "sub"; }
#rules-list .metric .v-wrap { text-align: left; }
.results p { margin: 0; padding: 12px 0; }
.verdict-line { font-size: var(--fs-14); color: var(--ink-3); padding: 12px 0 0; margin: 0; }
/* Before a position is entered the readout, its verdict line and the "Seven closes" card are empty (simulator.js leaves
   them with no nodes at all) and are not drawn: the hero's answer line is the one instruction. A position with no quote
   draws the readout and the verdict ("scenarios need the delayed price"), still not the empty ladder. */
#calc-results:empty, #verdict-line:empty, .readout:has(> #calc-results:empty):has(> #verdict-line:empty), .card:has(> .ladder-box > #scenario-ladder:empty) { display: none; }
.verdict-line.warn { color: var(--caution); }
.verdict-line.danger { color: var(--loss); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px 32px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .row-value, .metric .v-wrap, .metric .v { font-size: var(--fs-18); } }

/* ── Market heroes on the board ───────────────────────────────────────
   Dated data pages (a hero with a stat block): title + hero number in columns 1–5, the stat block in 6–12, from
   1280 px (below that the block runs full width under the number). The page's action (levels, outcomes, pin rate,
   event days: the simulator link, moved out of Next) is a green button with its caption under it, in one place on
   every page: in flow, left-aligned, at the foot of the hero's left column — directly under the hero number where
   one follows it (levels: a phone's first screen; beside the stat block from 1280), else after the hero's last line.
   The simulator: title + answer line in 1–8, the live number in 9–12, directly over the rail it heads. */
.hero-action { margin: 24px 0 0; }
.hero-action .caption { margin: 8px 0 0; }
.hero-number + .hero-action { margin-top: 16px; }
/* The levels h1 ("SPX 0DTE levels for 2026-09-25: max pain 7,700 · call wall 7,750 · put wall 7,650", 37.6 em; SPY/QQQ
   ~35 em) sits in .hero-title, a size container: sized by its own column (cqi), never by 100vw (which counts a classic
   scrollbar), and at 24 px from 640 — never below the page's h2s. Three shapes, measured on all three underlyings:
   · ≥1024 one line (902 px at 24 px; the column is ≥ 943 px even beside a classic scrollbar). From 1280 the tag row
     and the title run across all 12 columns and the 5 | 7 split starts under them: in 5 columns it could not be one
     line, and no measure breaks it cleanly there at 24 px.
   · 640–1023 two lines at a 23.9 em measure: "… for 2026-09-25: max pain 7,700 ·" / "call wall 7,750 · put wall 7,650"
     (line one is 23.3 em on SPX, 22.5–23 em on SPY/QQQ; adding " call" would take 24.5–25.2 em).
   · <640 a 16 em measure at the column's 16th: the date line / "max pain … call wall … ·" / "put wall …" on SPX. On
     SPY/QQQ no measure can do that ("max pain 766 · call wall 775 · put", 15.0 em, is shorter than the date line,
     15.6 em), so the break before "wall 760" stays until the pinned h1 text may carry a no-break space. */
.hero-title { container-type: inline-size; }
.hero-market .hero-title > h1 { max-width: 16em; }
@media (min-width: 640px) { .hero-market .hero-title > h1 { max-width: 23.9em; } }
@media (min-width: 1024px) { .hero-market:has(> .stat-grid) > h1, .hero-market .hero-title > h1 { max-width: none; } }
@media (min-width: 1280px) {
  .hero-market:has(> .stat-grid) { display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; align-items: start; }
  .hero-market:has(> .stat-grid) > * { grid-column: 1 / span 5; }
  .hero-market > .stat-grid { grid-column: 6 / -1; grid-row: 1 / -1; align-self: start; margin: 0; }
  .hero-market:has(> .stat-grid) .hero-number { margin-bottom: 0; }
  .hero-market:has(> .hero-title) > :is(.tag-row, .hero-title) { grid-column: 1 / -1; }
  .hero-market:has(> .hero-title) > .stat-grid { grid-row: 3 / -1; }
}
@media (min-width: 1024px) {
  main.page-board .hero-market { display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; align-items: start; }
  main.page-board .hero-market > * { grid-column: 1 / span 8; }
  main.page-board .hero-market > .hero-number { grid-column: 9 / -1; grid-row: 1 / -1; align-self: end; margin: 0; }
  main.page-board .hero-market h1 { margin-bottom: 12px; }
}

/* ── Board layout (simulator): main in columns 1–8, the rail in 9–12, sticky when the screen is tall enough ──
   #settles closes the board. Below 1024 px it follows the rail at the page's flow distance (main, ticket, levels, settles).
   From 1024 px it sits under main in columns 1–8 and the rail spans both rows: before a position is entered main is only
   the form, and the settlement mechanics fill the space beside the rail instead of a 400 px hole. Row 1 is main's own
   height; row 2 (1fr) takes whatever the rail needs beyond that, so settles stays tight under main. */
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.board-main { min-width: 0; }
.board-main > section + section { margin-top: 32px; }
.board-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.board-layout > #settles { min-width: 0; margin-top: calc(var(--flow) - 32px); }
@media (min-width: 1024px) {
  .board-layout { grid-template-columns: subgrid; grid-template-rows: auto 1fr; align-items: start; }
  .board-main { grid-column: 1 / span 8; grid-row: 1; }
  .board-layout > #settles { grid-column: 1 / span 8; grid-row: 2; }
  .board-rail { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: start; }
}
/* The rail (the ticket, then the levels card once a quote has landed) sticks only where all of it fits under the header:
   it is 714 px tall at 1024 px, 653 px at 1279–1280 px and 629 px from 1440 px (the same on SPX / SPY / QQQ), below an
   80 px offset. Shorter screens scroll it with the page. */
@media (min-width: 1024px) and (min-height: 880px), (min-width: 1280px) and (min-height: 800px) { .board-rail { position: sticky; top: calc(var(--band-h) + 24px); } }

/* ── Buttons: .btn is the primary (one green per view), .btn-ghost the outline secondary ── */
.btn, .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control); padding: 0 28px; border: 1.5px solid var(--accent); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-size: var(--fs-16); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.btn:hover, .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: scale(0.98); background: var(--accent-pressed); border-color: var(--accent-pressed); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--placeholder); border-color: var(--placeholder); color: var(--ink); cursor: not-allowed; transform: none; }
.btn-ghost, .btn.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-ui); }
.btn-ghost:hover, .btn.btn-ghost:hover { background: var(--surface-1); border-color: var(--placeholder); color: var(--ink); }
.btn-amber { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-sm { min-height: var(--tap); padding: 0 20px; font-size: var(--fs-14); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: var(--fs-16); }
/* .actions: the simulator ticket's buttons (see .card-featured). In the rail (from 1024 px) and on a phone the primary is
   full width over the ghost share link, both one height (the primary wraps to two lines at 1024–1224 px); where the
   ticket spans a tablet's full width (640–1023 px) they sit side by side, the primary taking the room. */
.actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; margin-top: 20px; }
.actions .btn { width: 100%; min-height: 52px; padding: 12px; white-space: normal; text-align: center; text-wrap: balance; }
@media (min-width: 640px) and (max-width: 1023px) { .actions { grid-template-columns: minmax(0, 1fr) auto; } .actions .btn-ghost { padding: 12px 28px; } }
.actions + .field-hint { margin-top: 12px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.pill-row .btn { min-height: var(--tap); padding: 0 20px; font-size: var(--fs-14); }

/* ── Segmented control: a track, the active item lifted (green text, no fill) ── */
.seg { display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-1); position: relative; }
.seg label { display: inline-flex; align-items: center; margin: 0; padding: 0 14px; min-height: 36px; border-radius: var(--r-pill); color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; }
.seg label:has(input:checked) { background: var(--surface-0); color: var(--accent); }
.seg input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Badges: gain / loss / caution / neutral, radius 8 ────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-badge); font-family: var(--mono); font-size: var(--fs-12); font-weight: 600; line-height: 1.33; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; vertical-align: middle; border: 0; letter-spacing: 0; text-transform: none; }
.badge.warn { background: var(--caution-tint); color: var(--caution); }
.badge.danger { background: var(--loss-tint); color: var(--loss); }
.verified-stamp { display: block; margin: 24px 0 0; border: 0; padding: 0; font-family: var(--sans); }
/* a stamp whose date is test-pinned plain text keeps it whole through balanced lines (one with .nowrap dates is already safe) */
.verified-stamp:not(:has(.nowrap)) { text-wrap: balance; }

/* ── Forms ────────────────────────────────────────────────────────────── */
label { display: block; font-size: var(--fs-14); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field { margin-bottom: 16px; }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], select { width: 100%; height: var(--control); padding: 0 16px; border: 1.5px solid var(--line-ui); border-radius: var(--r-input); font-family: var(--sans); font-size: var(--fs-16); color: var(--ink); background: var(--surface-1); transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
input::placeholder { color: var(--placeholder); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.field-hint { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Underline amount entry: big tabular digits on a rule, no box. */
.amount label { font-size: var(--fs-14); color: var(--ink-3); margin-bottom: 0; }
.amount input[type="number"] { height: auto; padding: 8px 0; border: 0; border-bottom: 2px solid var(--line-ui); border-radius: 0; background: transparent; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-32); font-weight: 700; line-height: 1.1; color: var(--ink); }
.amount input[type="number"]::placeholder { color: var(--line-ui); }
.amount input[type="number"]:focus { box-shadow: none; border-bottom-color: var(--accent); }
.amount-small input[type="number"] { max-width: 8ch; font-size: var(--fs-24); }
.position .field { margin-bottom: 24px; }
.position .grid-2 { gap: 16px 48px; }
/* ≥640 the amounts are one row: Strike under Side, then Price per contract and a narrower Contracts under Type, all three
   digits at one size so their rules line up. A phone keeps one field per row. */
@media (min-width: 640px) {
  .amount-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem); column-gap: 24px; align-items: start; }
  .amount-pair .amount-small input[type="number"] { font-size: var(--fs-32); }
}
.radio-row { display: flex; gap: 12px 16px; flex-wrap: wrap; font-size: var(--fs-14); color: var(--ink-2); }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: inherit; min-height: 32px; font-weight: 400; }
.radio-row input[type="number"] { width: 5.5em; height: 36px; font-size: var(--fs-14); padding: 0 8px; }
.channel-row { display: grid; gap: 8px; grid-template-columns: 1fr; margin: 8px 0; }
@media (min-width: 460px) { .channel-row { grid-template-columns: repeat(3, 1fr); } }
.channel-btn { min-height: var(--control); background: transparent; border: 1.5px solid var(--line-ui); border-radius: var(--r-pill); color: var(--ink); cursor: pointer; font-family: var(--sans); font-size: var(--fs-14); font-weight: 600; padding: 0 12px; }
.channel-btn:hover { border-color: var(--placeholder); }
.channel-btn.active { border-color: var(--accent); color: var(--accent); }
.email-capture h2 { margin-top: 0; font-size: var(--fs-18); }
.email-capture p { color: var(--ink-2); font-size: var(--fs-14); }
/* A full-width email capture is a band on the board: the words in columns 1–7, the form in 8–12. */
@media (min-width: 1024px) {
  main > .email-capture:not([class*="span-"]) { display: grid; grid-template-columns: subgrid; column-gap: var(--col-gap); align-items: center; }
  main > .email-capture:not([class*="span-"]) > * { grid-column: 1 / span 7; }
  main > .email-capture:not([class*="span-"]) > form { grid-column: 8 / -1; grid-row: 1 / span 2; }
  main > .email-capture:not([class*="span-"]) > :is(h2, p) { margin-bottom: 4px; }
}
.email-row { display: flex; gap: 8px; flex-direction: column; align-items: stretch; }
.email-row input[type="email"] { min-height: var(--control); }
.email-row .btn { min-height: var(--control); padding: 0 24px; }
@media (min-width: 520px) { .email-row { flex-direction: row; } .email-row input { flex: 1; } .email-row .btn { width: auto; } }
.form-success { color: var(--gain); font-size: var(--fs-16); }

/* ── Tables: horizontal rules only ────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { border-collapse: collapse; width: 100%; margin: 12px 0 24px; font-size: var(--fs-14); }
th, td { border: 0; border-bottom: 1px solid var(--line); padding: 14px 12px; text-align: left; vertical-align: top; }
thead th { color: var(--ink-3); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--sans); }
th[scope="row"] { font-family: var(--sans); font-weight: 500; color: var(--ink); text-wrap: balance; }
caption { caption-side: top; text-align: left; font-size: var(--fs-12); color: var(--ink-3); padding: 0 0 8px; }
/* A table wider than its wrapper scrolls sideways (phones); its caption, part of the table, keeps to the wrapper's visible
   width so it is never cut at the screen edge (100cqi = the .table-wrap's width). */
.table-wrap { container-type: inline-size; }
caption { max-width: min(80ch, 100cqi); }
/* A leading date or name column never breaks ("2026-10-28" on one line); nor does a session row's date header or the
   date beside a hero number. */
.rules-table td:first-child, tr[data-session] > th[scope="row"], .hn-side .num { white-space: nowrap; }
/* A date that ends test-pinned text — a source cell's "verified 2026-09-25" (external link, <br>, stamp), an event
   day's archive promise, "(checked 2026-09-25)" — stays whole through balanced lines: the break lands between words
   ("verified" / "2026-09-25"), never at the date's hyphen, and unlike nowrap the column gets no wider. */
.balance, td > a[rel~="noopener"] + br + .small.dim { text-wrap: balance; }
span.balance, td > a[rel~="noopener"] + br + .small.dim { display: inline-block; }
@media (max-width: 480px) { th, td { padding: 10px 8px; font-size: var(--fs-13); } }
/* Wide tables (7+ columns: the outcomes rows) sit at their minimum width below 1280: tighter cell sides keep the scroll
   short under 1024 and give the source cell room for "session page ·" on one line at 1024. */
@media (max-width: 1279px) { .rules-table:has(thead th:nth-child(7)) :is(th, td) { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 480px) { .rules-table:has(thead th:nth-child(7)) :is(th, td) { padding-left: 6px; padding-right: 6px; } }

/* ── Link lists and the guides list ───────────────────────────────────── */
.link-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.link-list li { max-width: none; }
.link-list a { font-weight: 500; }
.link-sub { color: var(--ink-3); font-size: var(--fs-14); }
/* In a side column a link list reads down, one link per line. */
@media (min-width: 1024px) { .span-5 > .link-list { flex-direction: column; } }
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list li { padding: 14px 0; border-bottom: 1px solid var(--line); min-height: 56px; max-width: none; }
.guide-list li:last-child { border-bottom: 0; }
.guide-list a { font-weight: 600; text-decoration: none; }
.guide-list a:hover { text-decoration: underline; }
/* a guide's sub wraps balanced: no one-word runt ("credit", "ours"), no formula opened on its "−" */
.guide-meta { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--fs-14); text-wrap: balance; }
/* From 640 px the guides are a grid of cards (2 · 3 from 1024 · 4 from 1440 columns: 12 guides, no partial row); the
   title link covers the whole card, and the sub sits directly under the title (8 px), whatever the title's line count. */
@media (min-width: 640px) {
  .guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--col-gap); }
  .guide-list li, .guide-list li:last-child { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 128px; padding: 20px; border: 0; border-radius: var(--r-card); background: var(--surface-1); }
  .guide-list li:hover { box-shadow: inset 0 0 0 1.5px var(--line-ui); }
  .guide-list a { font-size: var(--fs-18); line-height: var(--lh-snug); }
  .guide-list a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .guide-list a:hover { text-decoration: none; }
  .guide-meta { margin-top: 0; }
}
@media (min-width: 1024px) { .guide-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .guide-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Quick answers: bold question, plain answer, no click ─────────────── */
.qa { margin: 0; }
.qa-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.qa-item:last-child { border-bottom: 0; }
.qa-item h3 { font-size: var(--fs-16); margin: 0 0 4px; }
.qa-item p { margin: 0; color: var(--ink-2); max-width: 66ch; }
.qa-item p a { color: var(--ink-2); }
/* Full-width quick answers run in two balanced columns; each column opens on a hairline. In a span they stay one column. */
@media (min-width: 1024px) {
  main > section:not([class*="span-"]) > .qa { columns: 2; column-gap: var(--col-gap); }
  main > section:not([class*="span-"]) > .qa > .qa-item { break-inside: avoid; border-bottom: 0; border-top: 1px solid var(--line); padding: 14px 0; }
  .qa-item p { max-width: 62ch; }
}

/* ── Settlement block (dl) ────────────────────────────────────────────── */
.settlement { margin: 0 0 16px; }
.settlement dt { font-weight: 600; margin-top: 12px; }
.settlement dd { margin: 4px 0 0; color: var(--ink-2); max-width: 66ch; }
.settlement dd ul { margin: 4px 0 0; }
/* On the board the definition pairs stand side by side: one column per term (column-major flow over two rows). */
@media (min-width: 1024px) {
  .settlement { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: minmax(0, 1fr); column-gap: var(--col-gap); margin-bottom: 24px; }
  .settlement dt { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .settlement dd { max-width: none; }
  /* In the simulator's board #settles sits in columns 1–8 beside the rail (630–885 px), where three side-by-side terms
     would be 195–290 px columns and SPY's caveats a 17-line strip: each term is a row instead, the term in a 9rem column,
     its text beside it, a hairline over both. The heading fills lines greedily (balance would split "PM-settled" at the
     hyphen at 1024–1279 px). */
  .board-layout > #settles > h2 { text-wrap: pretty; }
  .board-layout > #settles .settlement { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 9rem minmax(0, 1fr); }
  .board-layout > #settles .settlement dd { margin: 0; padding: 14px 0 16px; border-top: 1px solid var(--line); }
  .board-layout > #settles .settlement dd ul { margin-top: 0; }
}

/* ── Long reads: the hero beside the "run it" card, then the text column (1–7, capped at --measure) beside a sticky
   "On this page" in the card's columns; the tables around it are full board width. ── */
/* The "run it" card sits beside the hero from 1024 px (its test-pinned class list stays card cta): 7 | 5 up to 1279 px,
   where four columns (264 px inside the card) cannot hold the button on one line, then 8 | 4. Its top is the hero's
   first line (the eyebrow, below the hero's 64 px top padding), so the page's one action stands beside the question.
   "On this page" starts on the card's column line (8 to 1279, 9 from 1280): one right-hand rail down the page. */
@media (min-width: 1024px) {
  main > .hero.span-8:has(+ .cta) { grid-column: span 7; }
  main > .hero.span-8 + .cta { grid-column: span 5; align-self: start; margin-top: 64px; }
  main > .hero.span-8 + .cta .btn { padding: 0 16px; }
}
@media (min-width: 1280px) {
  main > .hero.span-8:has(+ .cta) { grid-column: span 8; }
  main > .hero.span-8 + .cta { grid-column: span 4; }
}
/* Its button ("See what 4:00 does to your SPX strike", 325–333 px on the three underlyings with 16 px sides) never
   leaves the card: where the card is narrower it wraps, balanced — on phones across the card's full width. */
.cta .btn { max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; }
@media (max-width: 639px) { .cta .btn { display: flex; width: 100%; padding: 12px 20px; } }
.toc { display: none; }
.read-body > section + section { margin-top: var(--flow); }
.read-body p, main.page-prose > section:not(.card):not(.panel):not(.email-capture) > :is(p, ol, ul:not(.guide-list):not(.link-list)) { max-width: var(--measure); }
.read-body p { line-height: 1.65; }
@media (min-width: 1024px) {
  .read-body { grid-column: 1 / span 7; grid-row: 1; min-width: 0; }
  /* sticky under the header, never taller than the screen below it (88 px offset + 16 px): a long list scrolls inside */
  .toc { display: block; grid-column: 8 / -1; grid-row: 1; position: sticky; top: calc(var(--band-h) + 32px); padding-top: 4px;
    max-height: calc(100vh - var(--band-h) - 48px); max-height: calc(100dvh - var(--band-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .toc-title { margin: 0 0 12px; font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
  .toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
  .toc li { margin: 0; }
  .toc a { display: block; padding: 6px 0 6px 16px; color: var(--ink-2); font-size: var(--fs-14); line-height: var(--lh-snug); text-decoration: none; }
  .toc a:hover { color: var(--ink); }
  .toc a:focus-visible { outline-offset: -2px; } /* inside the scroll box, so the ring is never clipped */
}
@media (min-width: 1280px) { .toc { grid-column: 9 / -1; } }

/* ── The (i): a <details>, never green ────────────────────────────────── */
.info-dot { display: inline-block; position: relative; margin-left: 4px; vertical-align: -0.2em; }
.info-dot > summary { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--ink-3); cursor: pointer; list-style: none; border-radius: var(--r-pill); }
.info-dot > summary::-webkit-details-marker { display: none; }
.info-dot > summary::before { content: ""; position: absolute; inset: calc((16px - var(--tap)) / 2); }
.info-dot > summary svg { width: 100%; height: 100%; display: block; }
.info-dot > summary:hover, .info-dot[open] > summary { color: var(--ink); }
.info-dot > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.info-pop { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-product); font-family: var(--sans); font-size: var(--fs-14); font-weight: 400; line-height: var(--lh-body); letter-spacing: normal; text-transform: none; color: var(--ink-2); white-space: normal; text-align: left; }
@media (max-width: 639px) { .info-pop { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--band-h)); z-index: 60; } }
@media (min-width: 640px) { .info-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: max-content; max-width: min(22rem, calc(100vw - 40px)); } .info-dot-end .info-pop { left: auto; right: 0; } }

/* ── Price ladder (the seven closes): loss bars left, gain bars right, the current close in a pill ──
   One grid for the seven rows (each row a subgrid of it): the centre column is as wide as the widest close + caption, the
   caption wraps inside a cap instead of running into the bars, every bar starts on one line, and no side column is ever
   narrower than its P&L chip. Every chip is --pnl-ch digits wide (simulator.js sets the ladder's longest), so each bar
   gets the same room (the side column minus a chip) and its length is --w of that room at every width (--w is
   0.10 + 0.90 × |P&L| / the largest: affine, so the smallest P&L still draws). A row pads 4 px top and bottom, so a
   caption that wraps to three lines (SPY's "assigned → … to take delivery") keeps its distance from the next close. Where the card is under 720 px inside (phones, tablets, the 8-column main at 1024–1230) a chip beside its bar
   would leave the bar 6–85 px, so the chip sits under its bar and the bar takes the whole side column; under 480 px (a
   phone) the caption's cap and the type step down too. */
.ladder-box { container: ladder / inline-size; }
.ladder { --pnl-pad: 8px; --pnl-gap: 8px; display: grid; grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); column-gap: 16px; row-gap: 2px; margin: 8px 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lrow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 56px; padding: 4px 0; }
.lneg, .lpos { display: flex; align-items: center; gap: var(--pnl-gap); min-width: 0; font-size: var(--fs-13); }
.lneg { justify-content: flex-end; }
.lpos { justify-content: flex-start; }
.lbar { display: block; flex: none; height: 32px; width: calc((100% - var(--pnl-ch, 10) * 1ch - 2 * var(--pnl-pad) - var(--pnl-gap)) * var(--w, 0)); border-radius: 4px; }
.lneg .lbar { background: var(--loss-tint); border: 1px solid var(--loss); }
.lpos .lbar { background: var(--accent-tint); border: 1px solid var(--gain); }
.lpnl { flex: none; min-width: calc(var(--pnl-ch, 10) * 1ch + 2 * var(--pnl-pad)); padding: 3px var(--pnl-pad); border-radius: var(--r-badge); font-weight: 600; text-align: center; white-space: nowrap; }
.lneg .lpnl { color: var(--loss); background: var(--loss-tint); }
.lpos .lpnl { color: var(--gain); background: var(--accent-tint); }
.lpnl.mut { min-width: 0; background: transparent; color: var(--ink-3); }
.lprice { text-align: center; }
.lprice .p { font-size: var(--fs-16); font-weight: 500; display: inline-block; padding: 2px 12px; border-radius: var(--r-pill); }
.lrow.now .lprice .p { background: var(--surface-2); color: var(--ink); }
.lmove { display: block; max-width: 16rem; margin: 2px auto 0; font-family: var(--sans); font-size: var(--fs-12); color: var(--ink-3); line-height: 1.3; text-wrap: balance; }
@container ladder (max-width: 719px) {
  .lrow { min-height: 60px; }
  .lneg, .lpos { flex-direction: column; justify-content: center; gap: 4px; }
  .lneg { align-items: flex-end; }
  .lpos { align-items: flex-start; }
  .lneg .lpnl { order: 1; }
  .lbar { width: calc(100% * var(--w, 0)); height: 20px; }
}
@container ladder (max-width: 479px) {
  .ladder { --pnl-pad: 6px; column-gap: 8px; }
  .lneg, .lpos { font-size: var(--fs-12); }
  .lprice .p { font-size: var(--fs-14); padding: 2px 8px; }
  .lmove { max-width: 9rem; }
}

/* ── Gate sheet ───────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: var(--scrim); display: none; align-items: flex-end; justify-content: center; z-index: 50; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface-1); border: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 20px 20px 32px; }
.modal::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-ui); margin: 0 auto 16px; }
@media (min-width: 560px) { .modal-backdrop { align-items: center; } .modal { border-radius: var(--r-sheet); padding: 28px; } .modal::before { display: none; } }
.modal h3 { margin-top: 0; font-size: var(--fs-18); }
.modal-close { background: none; border: none; color: var(--ink-2); font-size: var(--fs-24); cursor: pointer; float: right; line-height: 1; min-width: var(--tap); min-height: var(--tap); }
.steps { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0 0 20px; }
.steps li { counter-increment: step; display: inline-flex; align-items: center; height: 40px; padding: 0 10px; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: var(--fs-14); font-weight: 600; max-width: none; }
.steps li::before { content: counter(step) " "; margin-right: 4px; color: var(--ink-3); }
.steps li.on { color: var(--ink); border-bottom-color: var(--accent); }
.steps li.done { color: var(--ink-2); }
.step-nav { display: flex; gap: 8px; margin-top: 16px; }
.step-nav .btn-ghost { flex: 0 0 auto; }
.step-nav .btn:not(.btn-ghost) { flex: 1; }
.step > .btn { margin-top: 16px; width: 100%; }
.paywall-note { font-size: var(--fs-14); color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--ink-2); font-size: var(--fs-14); }
.site-footer .wrap { display: grid; gap: 12px; }
.site-footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-2); }
.footer-disclaimer { max-width: 66ch; margin: 0; }
/* The footer runs on the board's columns (same shell, same gap): disclaimer 1–7, links right-aligned in 8–12. */
@media (min-width: 1024px) {
  .site-footer .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 16px; }
  .site-footer nav { grid-column: 8 / -1; grid-row: 1; justify-content: flex-end; }
  .footer-disclaimer { grid-column: 1 / span 7; grid-row: 1; }
  .site-footer .wrap > .caption { grid-column: 1 / -1; margin: 0; }
}

/* ── Path chart (session page) and the card images ────────────────────── */
.path-chart { margin: 0; }
.path-chart figcaption { margin-top: 8px; }
main > section > img { display: block; border-radius: var(--r-product); }
@media (min-width: 1024px) {
  main > [class*="span-"] > img { width: 100%; }
  main > .verified-stamp { margin: 0; }
  /* /alerts/: the rules card sits beside the page's heading */
  main > .card:has(> #rules-list) { grid-column: span 5; align-self: center; }
}

/* ── Motion ───────────────────────────────────────────────────────────── */
@keyframes tick-up { from { color: var(--gain); } to { color: inherit; } }
@keyframes tick-down { from { color: var(--loss); } to { color: inherit; } }
.tick-up { animation: tick-up 900ms ease-out; }
.tick-down { animation: tick-down 900ms ease-out; }
@media (prefers-reduced-motion: reduce) { .tick-up, .tick-down { animation: none; } * { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .site-nav { display: none; }
  .tab-bar { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--tabbar-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .tab-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--band-h); color: var(--ink-3); font-size: var(--fs-11); font-weight: 500; text-decoration: none; }
  .tab-bar a svg { width: 22px; height: 22px; }
  .tab-bar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .site-footer { padding-bottom: calc(var(--band-h) + 24px + env(safe-area-inset-bottom)); }
  main { padding-bottom: 64px; }
  .hero { padding: 32px 0 24px; }
  .hero h1, h1 { font-size: var(--fs-32); }
  .home-hero h1, .hc-value { font-size: var(--fs-40); }
  /* fluid to the column: a 16 em line holds "SPX 0DTE levels for 2026-09-25:" (15.7 em). The levels h1 reads its
     container (100cqi, scrollbar-proof); the other market h1s keep 100vw (the session date line is 14.9 em, measured whole
     beside a classic scrollbar from 320 px) and it is also the fallback where container units are unsupported. */
  .hero-market h1 { font-size: min(var(--fs-24), calc((100vw - 32px) / 16)); }
  .hero-market .hero-title > h1 { font-size: min(var(--fs-24), calc(100cqi / 16)); }
  main.page-home h2:not(.rail-heading) { font-size: var(--fs-26); }
  .hn-value, .hero-number:has(> #q-spot:not([data-live])) #cd-timer { font-size: var(--fs-32); }
  .card-featured { padding: 20px; }
  .amount input[type="number"] { font-size: var(--fs-26); }
}