/* FedRAG marketing site: "Highlighter, after hours" (docs/research/redesign-v3/SPEC.md).
   Navy and sky on a white field, Graphite buttons, one Chalk band. Light only.
   Every color is a token in the :root blocks below; nothing else holds a color literal.
   Motion uses the duration and easing tokens, and every token drops to 0ms under
   reduced motion, where each scene shows its final, complete frame. */

:root {
  color-scheme: light;
  /* field */
  --paper: #FFFFFF;
  --field: #F6F8FB;
  --band: #EEF3F9;
  --hl: #E2EAF4;
  --line: #D6DFEA;
  --line-soft: #E8EDF3;
  --line-strong: #B9C6D6;
  --desk: #EFF3F8;
  /* ink */
  --ink: #111827;
  --ink-hover: #1F2937;
  --text: #1E293B;
  --muted: #475569;
  --faint: #56637A;
  --on-ink: #FFFFFF;
  /* navy and sky */
  --navy: #14325C;
  --sky: #1F5FAF;
  --sky-hover: #174C8F;
  --wash: #D9E9FF;
  --wash-hover: #CBE0FF;
  --wash-edge: #A9CBF7;
  --wash-soft: #EDF4FF;
  --ruler: rgba(31, 95, 175, 0.07);
  --ruler-edge: rgba(31, 95, 175, 0.5);
  /* status (same meanings as the app) */
  --source: #0B6460;
  --source-bg: #E1F2F0;
  --source-line: #9DCFCA;
  --ok: #0E6B4B;
  --ok-bg: #E3F4EC;
  --ok-line: #9ED3BC;
  --confirm: #475569;
  --confirm-line: #7D8A9E;
  --gap: #C22B2B;
  --gap-bg: #FCECEC;
  /* the one Chalk band */
  --night: #0B2545;
  --night-2: #12305A;
  --night-3: #1A3C6B;
  --chalk: #F3F6FB;
  --chalk-muted: #A9B6C8;
  --ice: #8CC8FF;
  --ice-line: rgba(140, 200, 255, 0.28);
  --ice-soft: rgba(140, 200, 255, 0.12);
  --ice-wash: rgba(140, 200, 255, 0.1);
  --ice-key: rgba(140, 200, 255, 0.09);
  --axis: rgba(169, 182, 200, 0.32);
  /* the re-typeset solicitation page */
  --doc: #FFFFFF;
  --doc-ink: #1A1F29;
  --doc-rule: #2A3140;
  --doc-key: #3A4252;
  --doc-dim: #555E6E;
  --doc-greek: #E3E7ED;
  /* depth: one shadow, neutral graphite */
  --shadow-float: 0 1px 2px rgba(17, 24, 39, 0.07), 0 10px 28px -8px rgba(17, 24, 39, 0.18);
  /* the demo film: the dialog's backdrop and the caption box */
  --overlay: rgba(9, 20, 36, 0.72);
  --cue-bg: rgba(11, 37, 69, 0.9);

  /* type */
  --font: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --docfont: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* layout */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --rail-h: 60px;
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;

  /* motion tokens (docs/build/motion.md names; scene steps 300 to 600 ms) */
  --dur-state: 150ms;
  --dur-indicator: 200ms;
  --dur-enter: 250ms;
  --dur-exit: 150ms;
  --dur-dialog-enter: 250ms;
  --dur-dialog-exit: 150ms;
  --dur-sheet-enter: 250ms;
  --dur-sheet-exit: 150ms;
  --dur-pop-enter: 200ms;
  --dur-pop-exit: 150ms;
  --dur-tooltip-in: 150ms;
  --dur-tooltip-out: 100ms;
  --dur-progress: 300ms;
  --dur-located-fade: 600ms;
  --dur-scene: 450ms;
  --dur-rise: 600ms;
  --dur-ruler: 600ms;
  --dur-draw: 1600ms;
  --dur-wash: 1200ms;
  --dur-none: 0ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-state: 0ms; --dur-indicator: 0ms; --dur-enter: 0ms; --dur-exit: 0ms;
    --dur-dialog-enter: 0ms; --dur-dialog-exit: 0ms; --dur-sheet-enter: 0ms; --dur-sheet-exit: 0ms;
    --dur-pop-enter: 0ms; --dur-pop-exit: 0ms; --dur-tooltip-in: 0ms; --dur-tooltip-out: 0ms;
    --dur-progress: 0ms; --dur-located-fade: 0ms; --dur-scene: 0ms; --dur-rise: 0ms;
    --dur-ruler: 0ms; --dur-draw: 0ms; --dur-wash: 0ms;
  }
}
/* ?still=1 (captures) behaves like reduced motion */
:root.rm {
  --dur-state: 0ms; --dur-indicator: 0ms; --dur-enter: 0ms; --dur-exit: 0ms;
  --dur-pop-enter: 0ms; --dur-pop-exit: 0ms; --dur-tooltip-in: 0ms; --dur-tooltip-out: 0ms;
  --dur-progress: 0ms; --dur-located-fade: 0ms; --dur-scene: 0ms; --dur-rise: 0ms;
  --dur-ruler: 0ms; --dur-draw: 0ms; --dur-wash: 0ms;
}

/* ---------- fonts (self-hosted, OFL; assets/fonts/LICENSES.md) ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/SchibstedGrotesk-Variable-Latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular-Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Medium-Latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks: widths measured against Schibsted Grotesk (800 for the
   headline, 400 for body), so the swap barely moves the hero H1. */
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial");
  font-weight: 400 550;
  size-adjust: 104.1%;
  ascent-override: 94.1%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 551 900;
  size-adjust: 102.7%;
  ascent-override: 95.4%;
  descent-override: 25.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Courier New");
  size-adjust: 99.98%;
  ascent-override: 102.52%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Anchors: the scroll padding is the sticky header; each target adds its own
   margin, so its first line lands just below the header (and the stage rail,
   where it is). Smooth scrolling is for same-page clicks only: main.js adds
   html.smooth after it has jumped to the address's hash, so a link from
   another page lands at once. Never under reduced motion. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
[id] { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  html.smooth:not(.rm) { scroll-behavior: smooth; }
}
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font); font-size: 18px; line-height: 1.61; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sky-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 2px; }
.chalk :focus-visible { outline-color: var(--ice); }
h1, h2, h3, h4 { color: var(--navy); margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: var(--on-ink); }
[hidden] { display: none !important; }

/* ---------- shared atoms ---------- */
.label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--sky); }
.label::before { content: ""; width: 18px; height: 8px; border-radius: 2px; background: var(--wash); border-bottom: 2px solid var(--wash-edge); }
.chalk .label { color: var(--ice); }
.chalk .label::before { background: var(--ice); border-bottom-color: var(--ice); }
.h2 { font-size: 48px; line-height: 52px; letter-spacing: -0.025em; }
.lede { font-size: 20px; line-height: 31px; color: var(--muted); max-width: 40em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: var(--r);
  font: 600 16px/1.2 var(--font); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-hover); color: var(--on-ink); text-decoration: none; }
.btn-primary .arrow { transition: transform var(--dur-indicator) var(--ease-out); }
.btn-primary:hover .arrow { transform: translateX(3px); }
.btn-secondary { background: var(--paper); color: var(--navy); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--field); border-color: var(--navy); color: var(--navy); text-decoration: none; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* the page chip: the site's signature atom */
.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 500 12.5px/1 var(--mono); color: var(--sky);
  background: var(--wash); border: 1px solid var(--wash-edge); border-radius: var(--r-sm);
  padding: 4px 6px 3px; text-decoration: none;
}
a.chip:hover, button.chip:hover { color: var(--sky-hover); background: var(--wash-hover); text-decoration: none; }
button.chip { cursor: help; min-height: 24px; }
.chip svg { width: 11px; height: 11px; flex: none; }
.chalk .chip { background: var(--ice-wash); color: var(--ice); border-color: var(--ice-line); }

/* page chip with its quote (hover, keyboard focus; Escape closes) */
.pc { position: relative; display: inline-flex; }
.tip {
  position: absolute; z-index: 30; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(320px, 78vw);
  padding: 10px 12px; border-radius: var(--r); background: var(--ink); color: var(--on-ink);
  font: 400 13.5px/1.45 var(--font); text-align: left; white-space: normal; box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--dur-tooltip-in) var(--ease-out), transform var(--dur-tooltip-in) var(--ease-out), visibility var(--dur-none) linear var(--dur-tooltip-in);
}
.tip q { quotes: "\201C" "\201D"; }
.tip .src { display: block; margin-top: 6px; font: 400 12px/1.4 var(--mono); color: var(--hl); }
.pc:hover .tip, .pc:focus-within .tip { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: var(--dur-none); }
.pc.dismissed .tip { opacity: 0; visibility: hidden; }
.pc.left .tip { right: auto; left: 0; }
.req-row:hover .pc:not(.dismissed) .tip { opacity: 1; visibility: visible; transform: none; transition-delay: var(--dur-none); }

.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 600 12.5px/1 var(--font); border-radius: 999px; padding: 5px 9px 5px 7px; border: 1px solid transparent; }
.status svg { width: 12px; height: 12px; flex: none; }
.st-source { color: var(--source); background: var(--source-bg); border-color: var(--source-line); }
.st-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.st-confirm { color: var(--confirm); background: transparent; border: 1px dashed var(--confirm-line); }
.st-gap { color: var(--gap); background: var(--gap-bg); }

/* the highlighter: each word gets the sky wash, left to right */
.hl-line { position: relative; z-index: 0; }
.hl-line:not(.wrapped) { background: var(--wash); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-line .w { position: relative; }
.hl-line .w::before { content: ""; position: absolute; z-index: -1; left: -1px; right: -1px; top: 6%; bottom: 0; background: var(--wash); border-radius: 1px; transform-origin: left center; transform: scaleX(var(--f, 1)); }
.hl-line .w.off::before { --f: 0; }

/* glosses at first use (N-09) */
.gl-term { color: var(--sky); text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.gl-term:hover { text-decoration-style: solid; }
.gloss { color: var(--muted); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-indicator) var(--ease-standard); }
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { position: relative; display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 800; font-size: 23px; letter-spacing: -0.035em; line-height: 1; min-height: 44px; }
.brand:hover { color: var(--navy); text-decoration: none; }
.brand-mark { width: 24px; height: 28px; flex: none; overflow: visible; }
.lg-page { fill: var(--paper); stroke: var(--navy); stroke-width: 2; }
.lg-fold { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.lg-wash { fill: var(--wash); }
.lg-lines { fill: none; stroke: var(--navy); stroke-width: 1.9; stroke-linecap: round; }
.nav-links { display: flex; gap: 2px; margin-left: 8px; list-style: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r); color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.nav-links a:hover { background: var(--field); color: var(--navy); }
.nav-links a[aria-current] { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--wash-edge); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.nav-cta { margin-left: auto; }
.mmenu { display: none; margin-left: auto; }
.mmenu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 600 15px var(--font); color: var(--navy); cursor: pointer; }
.mmenu > summary::-webkit-details-marker { display: none; }
.mmenu > summary svg { width: 16px; height: 16px; }
.mmenu .ic-close { display: none; }
.mmenu[open] .ic-close { display: block; }
.mmenu[open] .ic-menu { display: none; }
.mmenu-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 0 var(--gutter); background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-float); }
.mmenu-panel ul { list-style: none; padding: 6px 0; }
.mmenu-panel li a { display: flex; align-items: center; min-height: 48px; color: var(--navy); text-decoration: none; font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--line-soft); }
.mmenu-panel .btns { display: grid; gap: 10px; padding: 14px 0 18px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 44px 0 0; background: var(--paper); overflow-x: clip; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.18fr); gap: 48px; align-items: center; }
.eyebrow { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); border: 3px solid var(--wash); box-sizing: content-box; }
.hero h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 0.977; letter-spacing: -0.035em; font-weight: 800; }
.hero-trade { margin-top: 22px; font-size: 21px; line-height: 30px; font-weight: 600; color: var(--navy); max-width: 30em; letter-spacing: -0.01em; }
.hero-trade .mark { background: var(--wash); border-bottom: 2px solid var(--wash-edge); padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .sub { margin-top: 18px; font-size: 19px; line-height: 30px; color: var(--text); max-width: 33em; }
.hero .sub strong { color: var(--navy); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* the hero's "Watch the N-second demo" (opens the #vm dialog; without script, a link to #watch) */
.watch-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; font-weight: 600; font-size: 16px; line-height: 22px; color: var(--navy); text-decoration: none; }
.watch-link:hover { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wl-glyph { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: var(--on-ink); transition: background-color var(--dur-state) var(--ease-standard); }
.watch-link:hover .wl-glyph { background: var(--ink-hover); }
.wl-glyph svg { width: 12px; height: 12px; margin-left: 2px; }
.honest { margin-top: 18px; font-size: 15px; line-height: 22px; color: var(--muted); max-width: 36em; display: flex; gap: 10px; }
.honest svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--sky); }

/* reading pane */
.hv-fig { margin: 0; }
.hv { position: relative; padding-bottom: 28px; }
.pane { position: relative; width: calc(100% - 300px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; }
.pane-bar { display: flex; align-items: center; gap: 10px; padding: 10px 30px 10px 14px; border-bottom: 1px solid var(--line); background: var(--field); font-size: 13px; line-height: 18px; color: var(--muted); }
.pane-bar .file { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; min-width: 0; }
.pane-bar .file svg { width: 15px; height: 15px; color: var(--sky); flex: none; }
.pane-bar .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-bar .pg { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pane-body { position: relative; overflow: hidden; background: var(--desk); padding: 18px 18px 0; }
.pane-body .doc { padding-bottom: 14px; }
.sf.late { display: none; }
.sf.c-e { border-bottom: 1.2px solid var(--doc-rule); }
.sf-cont { margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--doc-greek); font-size: 8.6px; line-height: 1.3; text-transform: uppercase; color: var(--doc-dim); text-align: center; }
.sf-cont .sm { display: none; }
.pane-foot { display: flex; align-items: center; gap: 12px; padding: 9px 30px 9px 14px; border-top: 1px solid var(--line); background: var(--paper); font-size: 12.5px; color: var(--muted); }
.pagebar { flex: 1; display: grid; grid-template-columns: repeat(23, 1fr); gap: 2px; min-width: 0; }
.pagebar i { height: 6px; border-radius: 1.5px; background: var(--sky); transition: background-color var(--dur-indicator) var(--ease-standard); }
.pagebar i:first-child { background: var(--navy); }
.pagebar.reading i { background: var(--hl); }
.pagebar.reading i.read { background: var(--sky); }
.pane-foot .count { font-family: var(--mono); white-space: nowrap; }

/* the re-typeset solicitation page */
.doc { position: relative; background: var(--doc); color: var(--doc-ink); font-family: var(--docfont); border: 1px solid var(--line); padding: 18px 16px 40px; font-size: 10.5px; line-height: 1.35; }
.doc-stack { position: relative; }
.doc-stack::before, .doc-stack::after { content: ""; position: absolute; inset: 0; background: var(--doc); border: 1px solid var(--line); }
.doc-stack::before { transform: translate(6px, 6px); }
.doc-stack::after { transform: translate(3px, 3px); }
.doc-stack .doc { z-index: 1; }
.sf-title { text-align: center; font-weight: 700; font-size: 11.5px; border: 1.2px solid var(--doc-rule); border-bottom: 0; padding: 7px 6px; }
.sf { display: grid; border: 1.2px solid var(--doc-rule); border-bottom: 0; }
.sf:last-child { border-bottom: 1.2px solid var(--doc-rule); }
.sf > div { padding: 4px 6px 6px; border-right: 1px solid var(--doc-rule); min-height: 30px; }
.sf > div:last-child { border-right: 0; }
.sf.c-a { grid-template-columns: 1.6fr 1fr 0.7fr; }
.sf.c-b { grid-template-columns: 0.8fr 1.3fr 1fr; }
.sf.c-c { grid-template-columns: 0.8fr 1fr 1.25fr; }
.sf.c-d { grid-template-columns: 0.72fr 1.5fr 1.05fr; }
.sf.c-e { grid-template-columns: 1fr 1fr 1.3fr; }
.sf.c-2 { grid-template-columns: 1fr 1fr; }
.sf.c-f { grid-template-columns: 0.7fr 2fr 0.8fr 0.9fr; }
.sf .tall { min-height: 64px; }
.sf .k { display: block; font-size: 8.6px; text-transform: uppercase; color: var(--doc-key); line-height: 1.25; }
.sf .v { display: block; font-size: 11px; margin-top: 2px; }
.sf .v.sm { font-size: 9px; line-height: 1.35; margin-top: 5px; }
.sf .v.xs { font-size: 9.5px; }
.sf .v.gap { margin-top: 8px; }
.sf .cb { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--doc-rule); vertical-align: -1px; margin-right: 3px; position: relative; }
.sf .cb.x::before, .sf .cb.x::after { content: ""; position: absolute; left: -1px; top: 3px; width: 8px; height: 1px; background: var(--doc-ink); transform: rotate(45deg); }
.sf .cb.x::after { transform: rotate(-45deg); }
.sf .opt { display: block; font-size: 8.6px; text-transform: uppercase; margin-top: 4px; color: var(--doc-key); }
.greek { display: block; height: 5px; background: var(--doc-greek); border-radius: 2px; margin-top: 5px; width: 80%; }
.greek.s { width: 60%; }

/* reading ruler: a held ruler under the line being read */
.ruler { position: absolute; left: 0; right: 0; top: 0; height: 26px; pointer-events: none; z-index: 3; opacity: 0; background: var(--ruler); border-bottom: 1.5px solid var(--ruler-edge); transition: transform var(--dur-ruler) var(--ease-out), opacity var(--dur-scene) var(--ease-standard); }
.ruler.on { opacity: 1; }

/* bid card: complete in the HTML; the read only takes each row from unread to read */
.bidcard { position: absolute; right: 0; bottom: 0; width: 316px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); z-index: 5; }
.bc-head { padding: 15px 18px 12px; border-bottom: 1px solid var(--line); }
.bc-head .q { font-size: 19px; line-height: 24px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; }
.bc-head .meta { margin-top: 4px; font-size: 12.5px; line-height: 17px; color: var(--muted); }
.bc-rows { list-style: none; padding: 2px 0; }
.bc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 16px; font-size: 14px; }
.bc-row .k { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; line-height: 16px; }
.bc-row + .bc-row { border-top: 1px solid var(--line-soft); }
.bc-row .v { color: var(--ink); font-weight: 600; line-height: 1.3; }
.bc-row .v small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.bc-row .v, .bc-row .v small, .bc-verdict .in > *, .bc-verdict .in b { transition: color var(--dur-scene) var(--ease-out); }
.bc-row .pc, .bc-row .status { transition: opacity var(--dur-scene) var(--ease-out), transform var(--dur-scene) var(--ease-out); }
.bc-verdict { background: var(--wash-soft); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.bc-verdict .in { padding: 13px 16px 15px; }
.verdict-line { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ok); font-size: 17px; line-height: 22px; }
.verdict-line svg { width: 22px; height: 22px; flex: none; }
.v-disc { fill: var(--ok-bg); }
.v-tick { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-scene) var(--ease-out); }
.verdict-sub { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--text); }
.verdict-sub b { color: var(--navy); }
.verdict-note { margin-top: 6px; font-size: 12.5px; line-height: 17px; color: var(--muted); }
/* armed (the read is about to run): every row keeps its words, shown unread */
.bc-row > .k, .bc-row > .v { transition: color var(--dur-scene) var(--ease-out), opacity var(--dur-scene) var(--ease-out); }
.bc-verdict .in { transition: opacity var(--dur-rise) var(--ease-out); }
html.js:not(.rm) .hero .bc-row:not(.in) .v, html.js:not(.rm) .hero .bc-row:not(.in) .v small { color: var(--faint); font-weight: 400; }
html.js:not(.rm) .hero .bc-row:not(.in) > .k, html.js:not(.rm) .hero .bc-row:not(.in) > .v { opacity: 0.32; }
html.js:not(.rm) .hero:not(.verdict) .bc-verdict .in { opacity: 0.16; }
html.js:not(.rm) .hero .bc-row:not(.in) .pc, html.js:not(.rm) .hero .bc-row:not(.in) .status { opacity: 0; transform: scale(0.85); }
html.js:not(.rm) .hero:not(.verdict) .bc-verdict .in > * { color: var(--faint); }
html.js:not(.rm) .hero:not(.verdict) .bc-verdict .in b { color: var(--faint); }
html.js:not(.rm) .hero:not(.verdict) .v-tick { stroke-dashoffset: 30; }
html.js:not(.rm) .hero .hl-line:not(.wrapped) { background: transparent; }

.lift { position: absolute; z-index: 8; pointer-events: none; left: 0; top: 0; display: flex; align-items: center; gap: 8px; background: var(--wash); color: var(--navy); border: 1px solid var(--wash-edge); border-radius: var(--r); padding: 6px 8px 6px 10px; font: 600 13px/1.3 var(--font); white-space: nowrap; box-shadow: var(--shadow-float); will-change: transform, opacity; opacity: 0; }
.lift .chip { background: var(--paper); }
.lift.wide .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.replay { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; background: none; border: 0; padding: 0 2px; color: var(--sky); font: 600 14px var(--font); cursor: pointer; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity var(--dur-scene) var(--ease-standard); }
.replay svg { width: 16px; height: 16px; }
.hero.verdict .replay { opacity: 1; pointer-events: auto; }
.replay:hover { color: var(--sky-hover); text-decoration: underline; }
html:not(.js) .replay, html.rm .replay { display: none; }
.hv-foot { display: flex; align-items: flex-start; gap: 18px; margin-top: 4px; }
.hv-caption { font-size: 13px; line-height: 19px; color: var(--muted); max-width: 46em; }

/* trades (N-03) */
.trades { position: relative; margin-top: 48px; border-top: 1px solid var(--line); padding: 20px 0 24px; display: flex; gap: 8px 18px; align-items: baseline; flex-wrap: wrap; }
.trades .t-lead { font-weight: 600; color: var(--navy); white-space: nowrap; font-size: 15px; }
.trades ul { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; font-size: 15.5px; line-height: 24px; flex: 1 1 420px; min-width: 0; }
.trades li { white-space: nowrap; }
.trades li a { color: var(--text); text-decoration: none; }
.trades li a:hover { color: var(--sky); text-decoration: underline; }
.trades li:not(:last-child)::after { content: "\00B7"; margin: 0 9px; color: var(--line-strong); }
.trades .t-link { font-size: 15px; font-weight: 600; white-space: nowrap; }

/* ---------- section scaffolding ---------- */
section { position: relative; }
.sec { padding: 120px 0; scroll-margin-top: -100px; }
.sec-head { display: grid; gap: 18px; max-width: 780px; align-content: start; }
.faq-grid > .sec-head { position: sticky; top: 120px; align-self: start; }
.sec-head .lede a { font-weight: 500; }
html.fx [data-reveal] { transition: opacity var(--dur-rise) var(--ease-out), transform var(--dur-rise) var(--ease-out); }
html.fx [data-reveal]:not(.seen) { opacity: 0; transform: translateY(12px); }
html.rm [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- three ways a small bid dies (N-05) ---------- */
.losses { scroll-margin-top: -84px; padding: 104px 0 112px; background: var(--field); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.losses .lede { color: var(--text); }
.loss-list { list-style: none; margin-top: 40px; border-top: 2px solid var(--navy); }
.loss-list > li { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 440px); gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.loss-n { font: 500 15px/1 var(--mono); color: var(--navy); width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--navy); display: grid; place-items: center; }
.loss-list h3 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.loss-list p { margin-top: 6px; color: var(--text); max-width: 38em; font-size: 17px; line-height: 27px; }
.proof-atom { justify-self: end; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-float); }
.req-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.req-row .rq { font-size: 14.5px; line-height: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-row .rq q { quotes: none; }
.req-row .meta { display: flex; gap: 6px; align-items: center; }
.req-row .ob { font-size: 12px; color: var(--muted); font-weight: 600; }
.ledger-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14.5px; }
.ledger-row .k { color: var(--muted); }
.ledger-row .v { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.ledger-row .v span { white-space: nowrap; }
.answers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.answer { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); background: var(--field); border: 1px solid var(--line); }
.answer.is-marked { color: var(--navy); background: var(--paper); border: 2px solid var(--navy); }
.answers-cap { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.loss-list > li[data-reveal]:nth-child(2) { transition-delay: var(--dur-state); }
.loss-list > li[data-reveal]:nth-child(3) { transition-delay: calc(var(--dur-state) * 2); }

/* ---------- reads: "Show me where it says that." ---------- */
.reads { background: var(--paper); scroll-margin-top: -100px; }
.reads-intro { padding-top: 120px; }
.scrub-track { position: relative; }
.scrub-stage { position: relative; padding: 40px 0 120px; }
.scrub-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; width: 100%; align-items: center; }
.rpane { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--desk); box-shadow: var(--shadow-float); overflow: hidden; }
.rpane .pane-bar { background: var(--paper); }
.rpane-view { position: relative; overflow: hidden; }
.rstrip { position: relative; padding: 18px 18px 2px; will-change: transform; }
.rstrip .doc { font-size: 12.5px; line-height: 1.55; padding: 24px 26px 30px; margin-bottom: 16px; }
.rstrip .doc .dh { display: flex; justify-content: flex-end; font-size: 10.5px; color: var(--doc-key); text-align: right; line-height: 1.3; margin-bottom: 10px; }
.rstrip .doc h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--doc-ink); letter-spacing: 0; line-height: 1.35; font-family: var(--docfont); }
.rstrip .doc p { margin: 0 0 8px; color: var(--doc-ink); }
.rstrip .doc .dim { color: var(--doc-dim); }
.rpane .ruler { top: 0; height: 30px; }
.rtable { position: relative; }
.rt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rt-head h3 { font-size: 19px; line-height: 25px; letter-spacing: -0.01em; font-weight: 600; }
.rt-head .n { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.rt { list-style: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-float); }
.rt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 14px; border-top: 1px solid var(--line-soft); min-height: 64px; align-content: center; transition: background-color var(--dur-state) var(--ease-standard); }
.rt li:first-child { border-top: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.rt li:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.rt li:hover { background: var(--wash-soft); }
.rt .rq { font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.rt .rq q { quotes: none; }
.rt .meta { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.rt .ob { font-size: 12px; color: var(--muted); font-weight: 600; }
.rt li .rq, .rt li .ob { transition: color var(--dur-scene) var(--ease-out); }
.rt li .pc, .rt li .status { transition: opacity var(--dur-scene) var(--ease-out), transform var(--dur-scene) var(--ease-out); }
html.fx .reads.armed .rt li:not(.in) .rq, html.fx .reads.armed .rt li:not(.in) .ob { color: var(--faint); }
html.fx .reads.armed .rt li:not(.in) .status, html.fx .reads.armed .rt li:not(.in) .pc { opacity: 0; transform: scale(0.85); }
html.fx .reads.armed .rt li:not(.in) .pc:focus-within, html.fx .reads.armed .rt li:not(.in):focus-within .status { opacity: 1; transform: none; }
.rt-foot { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--muted); }
.scrub-head { display: none; }
/* 641 px and wider, with motion: the scroll-scrubbed reading, pinned under the
   header. main.js sizes the page view so the whole stage (its label row, the
   page and the table) fits between the header and the bottom of the screen,
   and adds .nopin, the plain stacked layout used on phones, when it can't. */
@media (min-width: 641px) {
  html.fx:not(.rm) .reads:not(.nopin) .scrub-track { height: 380vh; }
  html.fx:not(.rm) .reads:not(.nopin) .scrub-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; align-items: center; padding: 0; }
  html.fx:not(.rm) .reads:not(.nopin) .rpane-view { height: min(58vh, 520px); }
  html.fx:not(.rm) .reads:not(.nopin) .rstrip { position: absolute; left: 18px; right: 18px; top: 0; padding: 0; }
  html.fx:not(.rm) .reads:not(.nopin) .scrub-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
  .scrub-label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--navy); }
  .scrub-cue { display: flex; font-size: 13px; line-height: 22px; color: var(--muted); gap: 8px; align-items: center; white-space: nowrap; transition: opacity var(--dur-scene) var(--ease-standard); }
  .scrub-cue svg { width: 14px; height: 14px; }
}
/* short screens: a tighter table (in both layouts, so the fit check in main.js
   measures the same table), so the pinned stage fits at 1280 x 720 */
@media (min-width: 641px) and (max-height: 820px) {
  html.fx:not(.rm) .reads .rt li { min-height: 56px; padding-top: 9px; padding-bottom: 9px; }
  html.fx:not(.rm) .reads .rt-head { margin-bottom: 8px; }
  html.fx:not(.rm) .reads .rt-foot { margin-top: 8px; }
}
html:not(.fx) .rpane .ruler, html.rm .rpane .ruler { display: none; }

/* ---------- how it works: the page fan, then six stages ---------- */
.how { background: var(--field); border-top: 1px solid var(--line); scroll-margin-top: 0; }
.fan-track { position: relative; }
.fan-stage { display: grid; grid-template-rows: auto minmax(380px, 1fr) auto; padding: 96px 0 40px; gap: 24px; overflow: hidden; }
html.fx:not(.rm) .fan-track { height: 220vh; }
html.fx:not(.rm) .fan-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); min-height: 600px; padding: 56px 0 32px; }
.fan-copy { text-align: center; display: grid; gap: 14px; justify-items: center; }
.fan-copy .h2 { max-width: 16em; }
.fan-count { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.fan-count b { color: var(--navy); font-weight: 500; }
.fan { position: relative; --q: 1; --l: 1; --R: 640; --A: 36; --n: 23; --b: 150; }
.sheet {
  --i: 0; --jr: 0; --lift: 0;
  position: absolute; left: 50%; bottom: calc(var(--b) * 1px); width: 104px; aspect-ratio: 240 / 311; margin-left: -52px; transform-origin: 50% 100%; will-change: transform;
  transform: translateY(calc(var(--R) * 1px)) rotate(calc((var(--A) * -1 + 2 * var(--A) * var(--i) / (var(--n) - 1)) * var(--q) * 1deg + var(--jr) * (1 - var(--q)) * 1deg)) translateY(calc(var(--R) * -1px - var(--lift) * var(--l) * 1px));
}
.sheet.cited { --lift: 30; z-index: 40; }
.sheet .pg { position: absolute; inset: 0; background: var(--doc); border-radius: 3px; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-float); transition: opacity var(--dur-scene) var(--ease-standard); }
.sheet img { width: 100%; height: 100%; object-fit: cover; }
.sheet .n { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); opacity: 0; transition: opacity var(--dur-scene) var(--ease-standard); }
.sheet.cited .pg { border: 2px solid var(--sky); outline: 4px solid var(--wash); }
.fan.lit .sheet:not(.cited) .pg { opacity: 0.55; }
.fan.lit .sheet.cited .n { opacity: 1; }
.sheet.i0 { --i: 0; --jr: -1.8; } .sheet.i1 { --i: 1; --jr: 0.9; } .sheet.i2 { --i: 2; --jr: -0.4; } .sheet.i3 { --i: 3; --jr: 1.4; }
.sheet.i4 { --i: 4; --jr: -1.3; } .sheet.i5 { --i: 5; --jr: 0.4; } .sheet.i6 { --i: 6; --jr: 1.8; } .sheet.i7 { --i: 7; --jr: -0.9; }
.sheet.i8 { --i: 8; --jr: 0.9; } .sheet.i9 { --i: 9; --jr: -1.8; } .sheet.i10 { --i: 10; --jr: 0; } .sheet.i11 { --i: 11; --jr: 1.3; }
.sheet.i12 { --i: 12; --jr: -0.4; } .sheet.i13 { --i: 13; --jr: 1.8; } .sheet.i14 { --i: 14; --jr: -1.3; } .sheet.i15 { --i: 15; --jr: 0.4; }
.sheet.i16 { --i: 16; --jr: -0.9; } .sheet.i17 { --i: 17; --jr: 1.4; } .sheet.i18 { --i: 18; --jr: -0.4; } .sheet.i19 { --i: 19; --jr: 0.9; }
.sheet.i20 { --i: 20; --jr: -1.8; } .sheet.i21 { --i: 21; --jr: 1.3; } .sheet.i22 { --i: 22; --jr: 0; }
.sheet[data-p="22"] .n { top: -54px; }
.fan-legend { text-align: center; font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; transition: opacity var(--dur-scene) var(--ease-standard); }
.fan-legend .chip { font-size: 12px; }

.rail { position: sticky; top: var(--header-h); z-index: 20; background: var(--field); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.rail ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; }
.rail li a { display: flex; align-items: center; gap: 10px; padding: 12px 4px 11px; color: var(--muted); text-decoration: none; position: relative; }
.rail li a::after { content: ""; position: absolute; left: 0; right: 8px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-indicator) var(--ease-out); }
.rail .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); font: 500 12px/1 var(--mono); color: var(--muted); flex: none; transition: background-color var(--dur-indicator) var(--ease-standard), border-color var(--dur-indicator) var(--ease-standard), color var(--dur-indicator) var(--ease-standard); }
.rail .lbl { display: grid; font-size: 15px; line-height: 19px; font-weight: 600; }
.rail .day { font: 400 12px/16px var(--mono); color: var(--muted); }
.rail li.done .num { background: var(--navy); border-color: var(--navy); color: var(--on-ink); }
.rail li.done a, .rail li.now a { color: var(--navy); }
.rail li.now a::after { transform: scaleX(1); }
.rail li.now .num { border-color: var(--navy); color: var(--navy); background: var(--wash); }
.week-note { padding-top: 18px; font-size: 14px; line-height: 20px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.week-note svg { width: 16px; height: 16px; color: var(--sky); flex: none; }

.stages { padding-bottom: 120px; }
.stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; padding: 96px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--rail-h) + 16px - 96px); }
.stage:first-of-type { border-top: 0; padding-top: 64px; scroll-margin-top: calc(var(--rail-h) + 16px - 64px); }
.stage .st-copy { display: grid; gap: 16px; }
.st-num { font: 500 13px/18px var(--mono); color: var(--sky); }
.stage h3 { font-size: 40px; line-height: 44px; letter-spacing: -0.025em; }
.stage .st-copy p { color: var(--text); font-size: 18px; line-height: 29px; max-width: 32em; }
.stage .st-copy p.kicker { font-weight: 600; color: var(--navy); }
.stage .st-copy p.gl { color: var(--muted); font-size: 15px; line-height: 22px; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.card-h b { color: var(--navy); font-size: 15px; }
.card-b { padding: 14px 18px; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.kv:first-child { border-top: 0; }
.kv .k { color: var(--text); }
.kv .k small { display: block; color: var(--muted); font-size: 13px; }
.kv .r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kv .big { font: 500 14px var(--mono); color: var(--navy); }
.bar3 { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 4px 0 8px; }
.bar3 span { flex: 1; transform-origin: left; transition: transform var(--dur-rise) var(--ease-out); }
.bar3 .c, .legend3 .c { background: var(--ok); }
.bar3 .p, .legend3 .p { background: var(--ok-line); }
.bar3 .g, .legend3 .g { background: var(--gap); }
html.fx .stage:not(.seen) .bar3 span { transform: scaleX(0); }
.legend3 { display: flex; gap: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; list-style: none; }
.legend3 i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.verdict-mini { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; background: var(--wash-soft); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.verdict-mini svg { width: 22px; height: 22px; flex: none; }
.vm-disc { fill: var(--wash); }
.vm-tick { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.verdict-mini .vm-t { font-weight: 700; color: var(--navy); }
.verdict-mini p { font-size: 14px; line-height: 20px; color: var(--text); }


.ws { width: 100%; border-collapse: collapse; font-size: 14px; }
.ws th, .ws td { text-align: left; padding: 9px 8px; border-top: 1px solid var(--line-soft); }
.ws th { font-weight: 600; color: var(--muted); font-size: 12.5px; border-top: 0; }
.ws .n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ws td.n .status { font-family: var(--font); }
/* one header style: every column head is sans, numbers stay mono in the cells (critic round 2, item 13) */
.ws thead th, .ws thead th.n { font-family: var(--font); }
.ws tfoot td { border-top: 1.5px solid var(--navy); font-weight: 700; color: var(--navy); }
.rate-src { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--muted); }


.checks { list-style: none; }
.checks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.checks li:first-child { border-top: 0; }
.checks .rule { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.checks .rule small { display: block; width: 100%; font-size: 13px; color: var(--muted); }

/* stage layouts: Decide and Review run copy then view; Team and Submit flip it;
   Price runs full width; Write is a drafted page with its footnote pulled off the line */
.stage.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.stage.flip > .st-copy { order: 2; }
.stage.st-wide { display: block; }
.st-copy-wide { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px 72px; align-items: end; margin-bottom: 36px; }
.st-copy-wide .st-num { display: block; margin-bottom: 16px; }
.st-copy-cols { display: grid; gap: 12px; }
.stage.st-page { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 56px; }

/* Team: gaps, the partner, the workshare against the limit */
.tv-k { font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--muted); margin: 2px 0 8px; }
.tv-k + .tv-share, .tv-partner + .tv-k { margin-top: 18px; }
.tv-gaps { list-style: none; }
.tv-gaps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.tv-gaps li:first-child { border-top: 0; }
.tv-gap { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; }
.tv-gap svg { width: 16px; height: 16px; }
.tv-gap.is-gap { background: var(--gap-bg); color: var(--gap); }
.tv-gap.is-part { background: var(--ok-bg); color: var(--ok); }
.tv-gaps b, .tv-pn b { display: block; color: var(--ink); font-size: 15px; line-height: 21px; }
.tv-gaps small, .tv-pn small { display: block; color: var(--muted); font-size: 13.5px; line-height: 19px; }
.tv-partner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); }
.tv-av { width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; background: var(--navy); color: var(--on-ink); font-weight: 700; font-size: 15px; }
.tv-share { position: relative; display: flex; gap: 2px; height: 14px; }
.tv-share span:not(.tv-limit) { transform-origin: left; transition: transform var(--dur-rise) var(--ease-out); }
.tv-you { flex: 64; background: var(--navy); border-radius: 3px 0 0 3px; }
.tv-sub { flex: 36; background: var(--wash-edge); border-radius: 0 3px 3px 0; transition-delay: var(--dur-state); }
.tv-limit { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: var(--ink); }
html.fx .stage:not(.seen) .tv-share span:not(.tv-limit) { transform: scaleX(0); }
.tv-legend { list-style: none; display: grid; gap: 6px; margin-top: 14px; font-size: 13.5px; line-height: 19px; color: var(--text); }
.tv-legend li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tv-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.tv-legend i.you { background: var(--navy); }
.tv-legend i.sub { background: var(--wash-edge); }
.tv-legend i.lim { width: 2px; height: 14px; border-radius: 0; background: var(--ink); margin: 0 4px; }
.tv-legend b { margin-left: auto; font: 500 13.5px var(--mono); color: var(--navy); }
.tv-legend .chip { font-size: 11.5px; }
.tv-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 19px; color: var(--muted); }
.tv-note .status { flex: none; }

/* Price: the full-width worksheet */
.ws-h-r { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* the firm's own inputs get a neutral chip; the sky chip stays for document pages (N-37) */
.ws-src { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; color: var(--muted); }
.chip-own { font-family: var(--font); color: var(--text); background: var(--field); border-color: var(--line-strong); }
.ws-rates { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ws-rates li { display: grid; gap: 3px; padding: 14px 18px; border-left: 1px solid var(--line-soft); }
.ws-rates li:first-child { border-left: 0; }
.ws-rates .lc { font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--muted); }
.ws-rates .rt-f { font-size: 15px; line-height: 22px; color: var(--text); }
.ws-rates .rt-f b { color: var(--navy); font-weight: 500; }
.ws-rates .hrs { font-size: 12.5px; line-height: 17px; color: var(--muted); }
.ws-formula { padding: 11px 18px; background: var(--field); border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 20px; color: var(--muted); }
.ws-wide { font-size: 15px; }
.ws-wide th, .ws-wide td { padding: 11px 18px; }
.ws-wide thead th { padding-top: 12px; }
.ws-wide tbody th { font-weight: 600; color: var(--ink); font-size: 15px; }
.ws-wide tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; line-height: 16px; }
.ws-wide td.c-clin { font-family: var(--mono); font-size: 13.5px; color: var(--muted); }
.ws-wide tfoot th { text-align: left; border-top: 1.5px solid var(--navy); color: var(--navy); font-weight: 700; padding: 13px 18px; }
.ws-wide tfoot td { padding: 13px 18px; }
.ws-wide tfoot td.n:last-child { font-size: 17px; }
.ws-wide tbody tr { transition: opacity var(--dur-rise) var(--ease-out); }
.ws-wide tbody tr:nth-child(2) { transition-delay: calc(var(--dur-state) * 1); }
.ws-wide tbody tr:nth-child(3) { transition-delay: calc(var(--dur-state) * 2); }
.ws-wide tbody tr:nth-child(4) { transition-delay: calc(var(--dur-state) * 3); }
.ws-wide tbody tr:nth-child(5) { transition-delay: calc(var(--dur-state) * 4); }
.ws-wide tbody tr:nth-child(6) { transition-delay: calc(var(--dur-state) * 5); }
html.fx .stage:not(.seen) .ws-wide tbody tr { opacity: 0.3; }
.ws-bar { display: inline-block; height: 6px; margin-right: 14px; vertical-align: 2px; border-radius: 2px; background: var(--wash-edge); transform-origin: left; transition: transform var(--dur-rise) var(--ease-out); }
.ws-bar.b0 { width: 107px; } .ws-bar.b1 { width: 110px; } .ws-bar.b2 { width: 113px; } .ws-bar.b3 { width: 116px; } .ws-bar.b4 { width: 120px; }
html.fx .stage:not(.seen) .ws-bar { transform: scaleX(0); }
.ws-view .rate-src { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); }

/* Write: a drafted page, its footnote pulled off the line */
.wpage { background: var(--desk); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; }
.wp-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--muted); flex-wrap: wrap; }
.wp-bar .file { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.wp-bar .file svg { width: 15px; height: 15px; color: var(--sky); }
.wp-bar .tag { display: inline-flex; align-items: center; font: 600 12px var(--font); color: var(--navy); border: 1px dashed var(--sky); border-radius: 999px; padding: 3px 9px; }
.wp-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 18px; padding: 18px 40px 18px 18px; }
.wp-outline { list-style: none; font-size: 12.5px; line-height: 17px; color: var(--muted); align-self: start; }
.wp-outline li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.wp-outline li:first-child { border-top: 0; padding-top: 2px; }
.wp-outline li.sub { padding-left: 10px; }
.wp-outline li.now > span:first-child { color: var(--navy); font-weight: 600; }
.wp-outline .chip { font-size: 11px; padding: 3px 5px 2px; }
.wp-sheet { position: relative; background: var(--doc); border: 1px solid var(--line); padding: 26px 26px 20px; font-family: var(--docfont); color: var(--doc-ink); }
.wp-h { font-size: 13px; line-height: 1.35; font-weight: 700; margin-bottom: 10px; }
.wp-p { font-size: 14px; line-height: 1.62; }
.wp-frame { color: var(--doc-dim); }
.wp-claim { background: var(--wash); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wp-mark { font: 500 11px/1 var(--mono); color: var(--sky); background: var(--wash); border: 1px solid var(--wash-edge); border-radius: 3px; padding: 2px 4px 1px; margin-left: 3px; vertical-align: 5px; }
.wp-sheet .greek { margin-top: 11px; width: 92%; }
.wp-sheet .greek.s { width: 70%; }
.wp-fn { position: relative; margin-top: 26px; padding-top: 12px; }
.wp-fn::before { content: ""; position: absolute; left: 0; top: 0; width: 34%; height: 1px; background: var(--doc-rule); }
.wp-fn-t { position: relative; margin-right: -54px; padding: 10px 12px; border: 1px solid var(--wash-edge); border-radius: var(--r); background: var(--wash-soft); box-shadow: var(--shadow-float); font-size: 12.5px; line-height: 1.5; color: var(--doc-ink); transition: transform var(--dur-rise) var(--ease-out), opacity var(--dur-rise) var(--ease-out); transition-delay: var(--dur-state); }
.wp-fn-t sup { font: 500 11px/1 var(--mono); color: var(--sky); }
.wp-fn-t b { color: var(--navy); }
html.fx .stage:not(.seen) .wp-fn-t { opacity: 0; transform: translate(-18px, -84px) scale(0.96); }
.wp-check { grid-column: 1 / -1; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px; line-height: 19px; margin-right: -22px; }
.wp-check li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line-soft); color: var(--text); }
.wp-check li:first-child { border-top: 0; }

/* Submit: the checklist as a record */
.sv-rows { list-style: none; padding: 4px 18px 10px; }
.sv-rows li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line-soft); transition: opacity var(--dur-rise) var(--ease-out), transform var(--dur-rise) var(--ease-out); }
.sv-rows li:first-child { border-top: 0; }
.sv-rows li::before { content: ""; grid-column: 1; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ok); border: 2px solid var(--ok); box-sizing: border-box; }
.sv-rows li.you::before { background: var(--paper); border: 2px dashed var(--confirm-line); }
.sv-rows li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 29px; bottom: -6px; width: 2px; background: var(--line); }
.sv-rows li.done:not(:last-child)::after { background: var(--ok-line); }
.sv-k { font-size: 15px; line-height: 21px; color: var(--ink); font-weight: 600; }
.sv-k small { display: block; font-size: 13.5px; line-height: 19px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.sv-rows .status, .sv-rows .chip { margin-top: 1px; }
.sv-rows li:nth-child(2) { transition-delay: var(--dur-state); }
.sv-rows li:nth-child(3) { transition-delay: calc(var(--dur-state) * 2); }
.sv-rows li:nth-child(4) { transition-delay: calc(var(--dur-state) * 3); }
.sv-rows li:nth-child(5) { transition-delay: calc(var(--dur-state) * 4); }
html.fx .stage:not(.seen) .sv-rows li { opacity: 0.3; transform: translateY(6px); }

/* ---------- the one Chalk band ---------- */
.chalk { background: var(--night); color: var(--chalk); }
.chalk h2, .chalk h3 { color: var(--chalk); }
.chalk .grid2 { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.chalk .copy { display: grid; gap: 20px; position: sticky; top: 120px; }
.chalk .h2 { font-size: 44px; line-height: 48px; }
.chalk .copy p { color: var(--chalk-muted); font-size: 18px; line-height: 29px; }
.chalk .copy p strong { color: var(--chalk); font-weight: 600; }
.chalk .gl-term { color: var(--ice); }
.chalk .gloss { color: var(--chalk-muted); }
.chalk .copy p.never-line { border-left: 3px solid var(--ice); padding: 4px 0 4px 16px; color: var(--chalk); font-weight: 600; }
.ledger { border: 1px solid var(--ice-line); border-radius: var(--r-lg); background: var(--night-2); }
.ledger-h { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--ice-line); flex-wrap: wrap; }
.ledger-h b { font-size: 16px; color: var(--chalk); }
.ledger-h .tz { font-family: var(--mono); font-size: 12.5px; color: var(--ice); }
.tl-cap { margin: 16px 20px 0; font-size: 12.5px; color: var(--chalk-muted); }
.timeline { position: relative; height: 92px; margin: 10px 20px 8px; }
.tl-axis { position: absolute; left: 0; right: 0; top: 54px; height: 2px; background: var(--axis); }
.tl-fill { position: absolute; left: 0; right: 10%; top: 54px; height: 2px; background: var(--ice); transform-origin: left; transition: transform var(--dur-draw) var(--ease-out); }
.tl-mark { position: absolute; top: 46px; width: 2px; height: 18px; background: var(--chalk-muted); transform: translateX(-1px); }
.tl-mark.due { background: var(--chalk); width: 3px; height: 26px; top: 42px; }
.tl-mark.int { background: var(--ice); height: 22px; top: 44px; }
.tl-lab { position: absolute; font-size: 12px; line-height: 1.25; color: var(--chalk-muted); white-space: nowrap; transform: translateX(-50%); }
.tl-lab.t1 { top: 0; } .tl-lab.t2 { top: 21px; }
.tl-lab b { color: var(--chalk); font-weight: 600; margin-right: 5px; }
.tl-lab.end { transform: translateX(-100%); text-align: right; }
.tl-day { position: absolute; top: 72px; transform: translateX(-50%); font: 500 11px var(--mono); color: var(--chalk-muted); }
.at-10 { left: 10%; } .at-30 { left: 30%; } .at-50 { left: 50%; } .at-54 { left: 54.2%; } .at-70 { left: 70%; } .at-74 { left: 74.2%; } .at-90 { left: 90%; } .at-92 { left: 92%; }
.tl-mark, .tl-lab { transition: opacity var(--dur-scene) var(--ease-standard); }
html.fx .chalk:not(.seen) .tl-fill { transform: scaleX(0); }
html.fx .chalk:not(.seen) .tl-mark, html.fx .chalk:not(.seen) .tl-lab { opacity: 0; }
.chalk.seen .tl-mark.dry, .chalk.seen .tl-lab.dry { transition-delay: calc(var(--dur-draw) * 0.55); }
.chalk.seen .tl-mark.int, .chalk.seen .tl-lab.int { transition-delay: calc(var(--dur-draw) * 0.75); }
.chalk.seen .tl-mark.due, .chalk.seen .tl-lab.due { transition-delay: calc(var(--dur-draw) * 0.95); }
.lrows { list-style: none; padding: 4px 0 8px; }
.lrow { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--ice-soft); transition: opacity var(--dur-rise) var(--ease-out), transform var(--dur-rise) var(--ease-out); }
.lrow:first-child { border-top: 0; }
.lrow:nth-child(2) { transition-delay: calc(var(--dur-state) * 2); }
.lrow:nth-child(3) { transition-delay: calc(var(--dur-state) * 4); }
.lrow:nth-child(4) { transition-delay: calc(var(--dur-state) * 6); }
.lrow .k { color: var(--chalk-muted); font-size: 14px; }
.lrow .v { font-family: var(--mono); font-size: 14px; color: var(--chalk); font-variant-numeric: tabular-nums; }
.lrow .v small { display: block; font-family: var(--font); font-variant-numeric: normal; font-size: 12.5px; color: var(--chalk-muted); margin-top: 3px; }
.lrow.key { background: var(--ice-key); border-left: 3px solid var(--ice); padding-left: 17px; }
html.fx .chalk:not(.seen) .lrow { opacity: 0; transform: translateX(-8px); }
.subcheck { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.subcheck div { border: 1px solid var(--ice-line); border-radius: var(--r-lg); padding: 14px 16px; font-size: 14.5px; line-height: 21px; color: var(--chalk-muted); }
.subcheck b { display: block; color: var(--chalk); font-size: 15px; margin-bottom: 4px; }
.chalk-cap { margin-top: 14px; font-size: 13px; color: var(--chalk-muted); }

/* ---------- stated limits ---------- */
.honesty { background: var(--paper); }
.kick { font-size: 15px; font-weight: 600; color: var(--navy); }
.hon-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 48px; align-items: start; }
.who { width: 100%; border-collapse: collapse; }
.who caption { text-align: left; font-size: 19px; line-height: 25px; font-weight: 600; color: var(--navy); padding-bottom: 12px; }
.who th, .who td { text-align: left; padding: 15px 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 17px; line-height: 24px; }
.who thead th { font-size: 13px; line-height: 18px; color: var(--muted); font-weight: 600; padding: 10px 0; border-top: 2px solid var(--navy); }
.who tbody th { font-weight: 600; color: var(--ink); padding-right: 16px; }
.who td, .who thead th:last-child { text-align: right; }
.you-do { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--navy); color: var(--on-ink); font-size: 13.5px; line-height: 18px; font-weight: 600; text-align: left; }
.who-foot { margin-top: 16px; color: var(--text); font-weight: 600; }
.proof { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: var(--field); }
.proof .big { font-size: 80px; font-weight: 800; color: var(--navy); letter-spacing: -0.04em; line-height: 1; }
.proof .pl { margin-top: 10px; font-size: 18px; line-height: 27px; color: var(--ink); font-weight: 500; }
.dots10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 20px 0 8px; max-width: 360px; }
.dots10 i { aspect-ratio: 1; border-radius: 6px; background: var(--navy); transition: background-color var(--dur-scene) var(--ease-standard); }
.dots10 i.m { background: transparent; border: 1.5px dashed var(--confirm-line); }
html.fx .proof:not(.seen) .dots10 i.y { background: var(--hl); }
.dots-cap { display: flex; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.dots-cap i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dots-cap .k-said { background: var(--navy); }
.dots-cap .k-miss { border: 1.5px dashed var(--confirm-line); }
.dots-cap .k-ans { background: var(--line-strong); }
.ticks90 { display: grid; grid-template-columns: repeat(45, 1fr); gap: 2px; margin: 18px 0 8px; }
.ticks90 i { height: 14px; border-radius: 1.5px; background: var(--line-strong); transition: background-color var(--dur-scene) var(--ease-standard), border-color var(--dur-scene) var(--ease-standard); }
.ticks90 i.d { background: transparent; border: 1.5px dashed var(--confirm-line); }
html.fx .proof:not(.seen) .ticks90 i.d { border-color: transparent; background: var(--line-strong); }
.method { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; color: var(--muted); }
.no-logos { margin-top: 14px; font-size: 15px; line-height: 22px; color: var(--text); font-weight: 600; }
.limits { margin-top: 64px; }
.limits h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.limits summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; cursor: pointer; }
.limits summary::-webkit-details-marker { display: none; }
.limits ul { margin-top: 16px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.limits li { padding: 12px 0 12px 26px; border-top: 1px solid var(--line); position: relative; font-size: 15.5px; line-height: 23px; }
.limits li::before { content: ""; position: absolute; left: 3px; top: 20px; width: 7px; height: 7px; border-radius: 1px; background: var(--wash); border: 1px solid var(--wash-edge); }

/* ---------- pricing ---------- */
.pricing { background: var(--field); border-top: 1px solid var(--line); }
.price-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
.price-top { padding: 28px 28px 22px; border-bottom: 1px solid var(--line); }
.price-tag { display: inline-flex; font: 600 13px var(--font); color: var(--navy); background: var(--wash); padding: 5px 10px; border-radius: 999px; }
.price-num { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; color: var(--navy); flex-wrap: wrap; }
.price-num b { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price-num span { font-size: 18px; color: var(--muted); }
.price-alt { margin-top: 8px; color: var(--muted); font-size: 15px; }
.price-list { list-style: none; padding: 8px 28px; }
.price-list li { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 15.5px; line-height: 23px; }
.price-list li:first-child { border-top: 0; }
.price-list b { color: var(--navy); font-weight: 600; }
.price-foot { padding: 18px 28px 26px; display: grid; gap: 14px; border-top: 1px solid var(--line); }
.price-foot .cta-row { margin-top: 0; }
.price-foot small { font-size: 13.5px; line-height: 20px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 18px 2px; min-height: 64px; font-size: 18.5px; line-height: 26px; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm, .limits summary .pm { width: 28px; height: 28px; flex: none; border-radius: var(--r); border: 1px solid var(--line-strong); position: relative; transition: background-color var(--dur-state) var(--ease-standard); }
.faq summary .pm::before, .faq summary .pm::after, .limits summary .pm::before, .limits summary .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 12.5px; height: 1.5px; background: var(--navy); transition: transform var(--dur-state) var(--ease-out); }
.faq summary .pm::after, .limits summary .pm::after { transform: rotate(90deg); }
/* open = minus (collapse): the vertical bar folds flat onto the horizontal one */
.faq details[open] summary .pm::after, .limits[open] summary .pm::after { transform: rotate(0deg); }
.faq summary:hover .pm, .limits summary:hover .pm { background: var(--field); }
.faq .ans { padding: 0 2px 22px; color: var(--text); max-width: 42em; font-size: 17px; line-height: 27px; }

/* ---------- the demo ---------- */
.closing { background: var(--paper); border-top: 1px solid var(--line); }
.close-card { border-radius: var(--r-lg); background: var(--band); padding: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.close-card h2 { margin-top: 14px; }
.close-card .body { margin-top: 16px; font-size: 18px; line-height: 29px; color: var(--text); max-width: 34em; }
.close-list { list-style: none; display: grid; margin-top: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.close-list li { padding: 14px 18px; font-size: 15.5px; line-height: 23px; border-top: 1px solid var(--line-soft); }
.close-list li:first-child { border-top: 0; }
.close-list b { display: block; color: var(--navy); }
.bidcheck-note { margin-top: 20px; display: grid; gap: 12px; justify-items: start; }
.bidcheck-note .honest { margin-top: 0; }
.demo-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-float); }
.demo-panel h3 { font-size: 22px; line-height: 28px; margin-bottom: 18px; }
.demo-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--muted); }
.field .help { font-size: 13.5px; line-height: 19px; color: var(--muted); }
.slot-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.slot-field legend { padding: 0; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.slot-times { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-times[hidden] { display: none; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); font: 600 15px/1 var(--font); cursor: pointer; transition: border-color var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard); }
.slot label:hover { border-color: var(--muted); }
.slot input:focus-visible + label { outline: 2px solid var(--sky); outline-offset: 1px; }
.slot input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.slot input:disabled + label { cursor: not-allowed; color: var(--muted); background: var(--line-soft); border-color: var(--line); text-decoration: line-through; opacity: 0.7; }
.input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--confirm-line); border-radius: 6px; background: var(--paper); color: var(--ink); font: 400 16px/1.3 var(--font); transition: border-color var(--dur-state) var(--ease-standard); }
.input:hover { border-color: var(--muted); }
.input:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
.input[aria-invalid="true"] { border-color: var(--gap); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select.is-empty { color: var(--muted); }
.error { font-size: 13.5px; line-height: 19px; color: var(--gap); font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: grid; gap: 12px; }
.form-actions .btn { width: 100%; }
.form-status:empty { display: none; }
.form-status { font-size: 14.5px; line-height: 21px; padding: 10px 12px; border-radius: var(--r); background: var(--field); color: var(--text); border: 1px solid var(--line); }
.form-status.is-error { background: var(--gap-bg); color: var(--gap); border-color: var(--gap); }
.form-status.is-error a { color: var(--gap); }
.form-status ul { margin: 6px 0 0 18px; }
.privacy-line { font-size: 13px; line-height: 19px; color: var(--muted); }
.config-banner { margin-bottom: 14px; padding: 10px 12px; border: 1px dashed var(--confirm-line); border-radius: var(--r); color: var(--muted); font-size: 14px; }
.success { display: grid; gap: 12px; justify-items: start; }
.success-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.success-mark svg { width: 18px; height: 18px; }

/* ---------- footer ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14.5px; line-height: 22px; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h2 { font-size: 14px; line-height: 20px; color: var(--navy); margin-bottom: 8px; letter-spacing: 0; font-weight: 700; }
.foot-grid ul { list-style: none; display: grid; gap: 2px; }
.foot-grid li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text); text-decoration: none; }
.foot-grid li a:hover { color: var(--sky); text-decoration: underline; }
.foot-grid li a[aria-current] { color: var(--navy); font-weight: 600; }
.foot-line { margin-top: 12px; max-width: 26em; color: var(--text); }
.foot-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px; line-height: 20px; }

/* ---------- guides (one shared template) ---------- */
.guide-hero { background: var(--field); border-bottom: 1px solid var(--line); padding: 28px 0 48px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; line-height: 20px; }
.crumbs li { color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--muted); }
.crumbs a { color: var(--sky); }
.crumbs a[aria-current] { color: var(--muted); text-decoration: none; }
.guide-hero h1 { margin-top: 28px; font-size: 52px; line-height: 56px; letter-spacing: -0.03em; font-weight: 700; max-width: 18em; }
.guide-hero .g-lede { margin-top: 18px; font-size: 20px; line-height: 31px; color: var(--muted); max-width: 40em; }
.guide-hero .g-more { margin-top: 14px; font-size: 16px; line-height: 25px; color: var(--muted); max-width: 46em; }
.guide-hero .g-updated { margin-top: 18px; font: 400 13px/18px var(--mono); color: var(--muted); }
.guide-hero .g-tools { margin-top: 20px; }
.g-layout { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 8px; padding-bottom: 96px; }
.g-toc { display: none; }
.g-content { max-width: 72ch; min-width: 0; }
.g-content > section, .g-content > aside, .g-content > nav { margin-top: 64px; }
.g-content h2 { font-size: 32px; line-height: 38px; letter-spacing: -0.02em; }
.g-content h3 { font-size: 21px; line-height: 27px; font-weight: 600; margin-top: 36px; }
.g-content p, .g-content li, .g-content dd { font-size: 18px; line-height: 30px; }
.g-content p { margin-top: 16px; }
.g-content ul, .g-content ol { margin-top: 16px; padding-left: 24px; }
.g-content li + li { margin-top: 8px; }
.g-content a[href^="/glossary/"], .g-content a[href^="#"] { text-decoration-style: dotted; }
.g-content a[href^="/glossary/"]:hover { text-decoration-style: solid; }
.g-content code { font: 400 14px/1.5 var(--mono); background: var(--field); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 5px; overflow-wrap: anywhere; }
.g-content dl { margin-top: 18px; }
.g-content dt { font-size: 20px; line-height: 27px; font-weight: 600; color: var(--navy); margin-top: 28px; padding: 4px 8px; margin-left: -8px; border-radius: var(--r-sm); }
.g-content dd { margin: 6px 0 0; color: var(--text); }
.g-content dd > p:first-child { margin-top: 0; }
.g-content dd > p + p { margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--muted); }
.g-note { background: var(--field); border: 1px solid var(--line); border-left: 3px solid var(--sky); border-radius: var(--r); padding: 4px 22px 22px; }
.g-note h2 { font-size: 21px; line-height: 27px; margin-top: 18px; }
.g-content figure { margin: 28px 0 0; }
.g-content figure img { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-float); background: var(--field); }
.factgrid { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-float); font-size: 14.5px; line-height: 20px; }
.fg-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.fg-head b { color: var(--navy); font-size: 15px; }
.g-content .fg-group { margin: 0; padding: 8px 16px 6px; background: var(--field); border-bottom: 1px solid var(--line-soft); font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--muted); }
.fg-row { display: grid; grid-template-columns: 10em minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); }
.fg-row:last-child { border-bottom: 0; }
.fg-row .k { color: var(--muted); }
.fg-row .v { color: var(--ink); font-weight: 600; }
.fg-row .r { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
@media (max-width: 640px) { .fg-row { grid-template-columns: minmax(0, 1fr) auto; } .fg-row .v { grid-column: 1; grid-row: 2; } .fg-row .r { grid-row: 1 / 3; grid-column: 2; flex-direction: column; align-items: flex-end; } }
.shot-missing { margin: 0; padding: 18px; border: 1px dashed var(--confirm-line); border-radius: var(--r-lg); color: var(--muted); font-size: 15px; line-height: 23px; }
.g-content figcaption { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--muted); }
.table-box { position: relative; margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.scroll-hint { display: none; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.scroll-hint svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--sky); }
.scroll-hint + .table-box { margin-top: 8px; }
.g-content table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 23px; }
.g-content caption { caption-side: top; text-align: left; padding: 14px 16px 12px; font-size: 14px; line-height: 21px; color: var(--muted); border-bottom: 1px solid var(--line); }
.g-content th, .g-content td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.g-content thead th { font-size: 13.5px; line-height: 19px; color: var(--muted); font-weight: 600; border-top: 0; background: var(--paper); }
.g-content tbody tr:nth-child(even) { background: var(--field); }
.g-content tbody th { font-weight: 600; color: var(--ink); }
.g-content td.num { font-family: var(--mono); font-size: 14.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-content th.num { text-align: right; }
.g-content td.code { font-family: var(--mono); font-size: 14.5px; white-space: nowrap; }
.g-content td.pg { white-space: nowrap; }
.table-box.wide table { min-width: 900px; }
.table-box.wide td:last-child a { white-space: nowrap; }
.g-content tr:target, .g-content dt:target { animation: fr-wash var(--dur-wash) var(--ease-standard) both; }
html.rm .g-content tr:target, html.rm .g-content dt:target { animation: none; background: var(--wash); }
@keyframes fr-wash { 0%, 70% { background-color: var(--wash); } 100% { background-color: transparent; } }
.g-cta { margin-top: 72px !important; background: var(--band); border-radius: var(--r-lg); padding: 36px 36px 32px; }
.g-cta h2 { font-size: 30px; line-height: 36px; }
.g-cta .btn { margin-top: 22px; }
.g-cta .honest { margin-top: 16px; font-size: 15px; line-height: 22px; }
.g-cta p.honest { margin-top: 16px; }
.g-related { border-top: 1px solid var(--line); padding-top: 28px; }
.g-related h2 { font-size: 20px; line-height: 26px; }
.g-related ul { list-style: none; padding: 0; display: grid; gap: 4px; margin-top: 10px; }
.g-content .g-related li { margin: 0; }
.g-related a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; }
.g-related svg { width: 15px; height: 15px; flex: none; }
.print-btn svg { width: 16px; height: 16px; }
.g-toc h2 { font-size: 13px; line-height: 18px; color: var(--muted); font-weight: 600; letter-spacing: 0; margin: 0 0 10px; }
.g-toc h3 { font-size: 13px; line-height: 18px; color: var(--navy); font-weight: 600; margin: 16px 0 4px; }
.g-toc ol, .g-toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.g-toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--text); text-decoration: none; }
.g-toc li a:hover { color: var(--sky); border-left-color: var(--wash-edge); }
.g-index { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 20px 20px; background: var(--paper); }
.g-index h2 { font-size: 20px; line-height: 26px; margin-top: 18px; }
.g-index h3 { font-size: 15px; line-height: 21px; margin-top: 16px; color: var(--navy); }
.g-content .g-index ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.g-content .g-index li { margin: 0; }
.g-index li a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); font-size: 14.5px; line-height: 1; text-decoration: none; color: var(--navy); }
.g-index li a:hover { border-color: var(--sky); color: var(--sky); }
@media (min-width: 1100px) {
  .g-layout { grid-template-columns: 220px minmax(0, 72ch); gap: 72px; justify-content: start; }
  .g-toc { display: block; position: sticky; top: 104px; align-self: start; margin-top: 64px; max-height: calc(100vh - 128px); overflow-y: auto; padding-bottom: 12px; }
  .g-content > .g-index, .g-content > .g-ontoc { display: none; }
  /* the trade table runs from the content column to the grid's right edge (the nav button's edge), never past it */
  .g-layout { container-type: inline-size; }
  .g-content .table-box.wide { width: calc(100cqw - 292px); }
}

/* ---------- plain document pages (privacy, 404) ---------- */
.doc-page { padding: 56px 0 96px; }
.doc-page .doc-body { max-width: 72ch; }
.doc-page h1 { font-size: 52px; line-height: 56px; letter-spacing: -0.03em; }
.doc-page h2 { font-size: 26px; line-height: 32px; margin-top: 44px; }
.doc-page p, .doc-page li { font-size: 18px; line-height: 30px; }
.doc-page p { margin-top: 14px; }
.doc-page ul { margin-top: 12px; padding-left: 24px; }
.doc-page .doc-meta { margin-top: 16px; font: 400 14px/20px var(--mono); color: var(--muted); }
.placeholder { font-family: var(--mono); font-size: 0.9em; color: var(--muted); border: 1px dashed var(--confirm-line); border-radius: var(--r-sm); padding: 0 4px; }
.doc-page .table-box table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 23px; }
.doc-page .table-box th, .doc-page .table-box td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.doc-page .table-box thead th { border-top: 0; font-size: 13.5px; color: var(--muted); }
.doc-page .table-box tbody tr:nth-child(even) { background: var(--field); }
.notfound .num404 { font: 500 14px/20px var(--mono); color: var(--sky); }
.notfound h1 { margin-top: 12px; }
.notfound .lede { margin-top: 16px; }
.notfound .cta-row { margin-top: 28px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 16px; }
  .nav-links a { padding: 0 9px; font-size: 15px; }
}
/* ---------- the demo film: the #watch section and the #vm dialog ----------
   Each player is complete in the HTML: the poster sits behind a transparent
   <video controls> with its captions track on by default. main.js adds the
   Play button, the muted preview loop (wide screens, motion allowed, in view)
   and the dialog. The frame's aspect ratio is fixed, so nothing shifts. */
.watch { background: var(--paper); padding: 112px 0 120px; border-bottom: 1px solid var(--line); scroll-margin-top: -84px; }
.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "wt" "cta"; gap: 40px; }
.watch-head { grid-area: head; }
.watch-cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.watch-note { font-size: 15px; line-height: 22px; color: var(--muted); max-width: 30em; }
.watch-fig { grid-area: fig; margin: 0; }
.vp { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-float); }
.vp-poster, .vp-poster img, .vp-loop, .vp-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.vp-poster img { object-fit: cover; }
.vp-loop, .vp-video { object-fit: contain; background: transparent; }
.vp-loop { opacity: 0; transition: opacity var(--dur-enter) var(--ease-standard); }
.vp.is-loop .vp-loop { opacity: 1; }
.vp.is-armed:not(.is-on) { cursor: pointer; }
.vp.is-armed:not(.is-on) .vp-video { visibility: hidden; }
.vp.is-on .vp-poster, .vp.is-on .vp-loop { visibility: hidden; }
.vp-video::cue { font-family: var(--font); font-weight: 500; color: var(--on-ink); background-color: var(--cue-bg); }
.vp-play { position: absolute; z-index: 3; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px 0 8px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 17px/1.2 var(--font); cursor: pointer; box-shadow: var(--shadow-float); transition: background-color var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard); }
.vp-play:hover { background: var(--ink-hover); }
.vp-play:active { transform: translateY(1px); }
.vp-play:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 999px; }
.vp-glyph { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--paper); color: var(--ink); }
.vp-glyph svg { width: 16px; height: 16px; margin-left: 2px; }
.vp-len { font: 500 14px/1 var(--mono); color: var(--chalk-muted); }
.vp-toggle { position: absolute; z-index: 3; right: 16px; bottom: 20px; gap: 8px; }
.vp-toggle svg { width: 14px; height: 14px; }
/* the short demo: Play and the preview toggle side by side, bottom right, clear of the film's lines (bottom left).
   The row spans the player (a fixed box) and Play stays rightmost (row-reverse), so the toggle appearing moves nothing;
   the row itself takes no clicks, so the native controls under it stay usable once the film plays. */
.vp-ctrls { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; pointer-events: none; }
.vp-ctrls .vp-play, .vp-ctrls .vp-toggle { position: static; pointer-events: auto; }
/* 601 to 1080 px, where the preview runs on a narrower player: Play shows its glyph and length only (its name stays for screen readers), so the pair stays clear of the film's lines */
@media (min-width: 601px) and (max-width: 1080px) {
  .watch-fig .vp-pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .watch-fig .vp-play { padding-right: 18px; }
}
.vp-disc { margin-top: 14px; font-size: 13px; line-height: 19px; color: var(--muted); }
.vp-disc b { color: var(--text); font-weight: 600; }
@media (min-width: 1081px) {
  .watch-fig .vp-disc, .vm .vp-disc { columns: 2; column-gap: 40px; }
}

.vm { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 32px var(--gutter); border: 0; background: transparent; color: var(--text); overflow-y: auto; overscroll-behavior: contain; }
.vm[open] { display: grid; place-items: center; }
.vm::backdrop { background: var(--overlay); }
.vm-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title cta close" "vp vp vp" "disc disc disc"; gap: 14px 12px; align-items: center; width: min(1080px, 100%, calc((100vh - 270px) * 16 / 9 + 48px)); min-width: min(560px, 100%); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: 16px 24px 22px; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-dialog-enter) var(--ease-out), transform var(--dur-dialog-enter) var(--ease-out); }
.vm.in .vm-card { opacity: 1; transform: none; }
html.rm .vm-card { opacity: 1; transform: none; }
.vm-title { grid-area: title; font-size: 20px; line-height: 26px; font-weight: 700; }
.vm-close { grid-area: close; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper); color: var(--navy); cursor: pointer; transition: background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard); }
.vm-close:hover { background: var(--field); border-color: var(--navy); }
.vm-close svg { width: 16px; height: 16px; }
.vm .vp { grid-area: vp; box-shadow: none; }
.vm .vp-disc { grid-area: disc; margin-top: 0; }
.vm-cta { grid-area: cta; }
.vm-cta .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
html.vm-open { overflow: hidden; scrollbar-gutter: stable; }

/* ---------- the full walkthrough (2:24): a panel under the short demo, and the #walkthrough dialog ----------
   The short demo stays the first thing to watch. Under it, one quiet panel
   offers the whole workflow: its poster, one line, a secondary button and
   the chapter list (built from the film's chapters by
   copy-walkthrough-video.sh). Every link opens the #walkthrough dialog, at
   its chapter. Phones show the button alone (the 20,000 px page budget,
   SPEC 9); the dialog carries the chapters there. The poster has fixed
   dimensions, so nothing shifts. Without script the links show the dialog
   in place (:target), with native controls and its captions on. */
.wt { grid-area: wt; display: grid; grid-template-columns: minmax(200px, 272px) minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "thumb body ch"; gap: 32px; align-items: start; padding: 24px; background: var(--field); border: 1px solid var(--line); border-radius: var(--r-lg); }
.wt-thumb { grid-area: thumb; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.wt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wt-thumb-play { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-float); transition: background-color var(--dur-state) var(--ease-standard); }
.wt-thumb:hover .wt-thumb-play { background: var(--ink-hover); }
.wt-thumb-play svg { width: 14px; height: 14px; margin-left: 2px; }
.wt-body { grid-area: body; display: grid; gap: 10px; justify-items: start; align-content: start; }
.wt-kicker { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sky); }
.wt-h { font-size: 24px; line-height: 30px; }
.wt-line { font-size: 16px; line-height: 25px; color: var(--muted); max-width: 34em; }
.wt-open { margin-top: 8px; }
.wt-open svg { width: 13px; height: 13px; }
.wt-len { font: 500 14px/1 var(--mono); color: var(--muted); }
.vp-play .wt-len { color: var(--chalk-muted); }
.wt-ch { grid-area: ch; min-width: 0; }
.wt-ch-h { margin-bottom: 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.wt-ch ol { list-style: none; margin: 0 -8px; columns: 2; column-gap: 8px; }
.wt-ch li { break-inside: avoid; }
.wt-ch a { display: flex; align-items: baseline; gap: 10px; min-height: 32px; padding: 5px 8px; border-radius: var(--r-sm); color: var(--navy); font-size: 15px; line-height: 22px; text-decoration: none; transition: background-color var(--dur-state) var(--ease-standard); }
.wt-ch a:hover { background: var(--wash-soft); color: var(--navy); }
.wt-at { flex: none; min-width: 2.6em; font: 500 13px/22px var(--mono); color: var(--muted); }
.wt-ch a[aria-current] { background: var(--wash); font-weight: 600; }
.wt-ch a[aria-current] .wt-at { color: var(--sky); }

/* the dialog: the chapters sit beside the player, the note under it */
.vm-wt .vm-card { grid-template-areas: "title cta close" "vp ch ch" "disc ch ch"; align-items: start; width: min(1240px, 100%, calc((100vh - 340px) * 16 / 9 + 328px)); }
.vm-wt .vm-title, .vm-wt .vm-cta, .vm-wt .vm-close { align-self: center; }
.vm-wt .wt-ch { width: 256px; padding-left: 12px; }
.vm-wt .wt-ch ol { columns: 1; }

/* no script: a #walkthrough link shows the dialog in place, as a section */
html:not(.js) .vm:target { position: static; display: block; width: auto; height: auto; padding: 48px var(--gutter); overflow: visible; background: var(--field); border-top: 1px solid var(--line); }
html:not(.js) .vm:target .vm-card { margin: 0 auto; opacity: 1; transform: none; }
html:not(.js) .vm-close { display: none; }
@media (max-width: 1080px) {
  .wt { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); grid-template-areas: "thumb body" "ch ch"; gap: 24px 28px; }
  .wt-ch ol { columns: 3; }
  .vm-wt .vm-card { grid-template-areas: "title cta close" "vp vp vp" "disc disc disc" "ch ch ch"; width: min(1080px, 100%, calc((100vh - 270px) * 16 / 9 + 48px)); }
  .vm-wt .wt-ch { width: auto; padding-left: 0; }
  .vm-wt .wt-ch ol { columns: 3; margin: 0 -8px; }
}
@media (max-width: 640px) {
  .wt { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
  .wt-thumb, .wt-kicker, .wt-h, .wt-line, .wt-ch-page { display: none; }
  .wt-open { width: 100%; margin-top: 0; }
  .vm-wt .vm-card { grid-template-areas: "title close" "vp vp" "disc disc" "ch ch" "cta cta"; width: 100%; }
  .vm-wt .wt-ch ol { columns: 2; }
}

@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .mmenu { display: block; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero .sub { max-width: 40em; }
  .pane { width: calc(100% - 300px); }
  .scrub-grid, .stage, .stage.flip, .stage.st-page, .st-copy-wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stage.flip > .st-copy { order: 0; }
  .st-copy-wide { gap: 16px; margin-bottom: 28px; }
  .loss-list > li { grid-template-columns: 48px minmax(0, 1fr); }
  .loss-list > li .proof-atom { grid-column: 2; justify-self: stretch; max-width: 520px; }
  .chalk .grid2, .hon-grid, .price-grid, .faq-grid, .close-card { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .chalk .copy, .faq-grid > .sec-head { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .close-card { padding: 40px; }
  .watch { padding: 96px 0; }
  .watch-grid { gap: 28px; }
}
@media (max-width: 1279px) {
  /* below 1280 the trade table scrolls inside its box, so say so */
  .scroll-hint { display: block; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; --rail-h: 50px; }
  body { font-size: 17px; line-height: 27px; }
  .h2 { font-size: 30px; line-height: 34px; }
  .lede { font-size: 17px; line-height: 27px; }
  .sec { padding: 72px 0; }
  .sec-head { gap: 14px; }
  .hero { padding-top: 28px; }
  .hero h1 { font-size: 44px; line-height: 44px; }
  .eyebrow { margin-bottom: 16px; }
  .hero .sub { font-size: 17px; line-height: 27px; margin-top: 18px; }
  .cta-row { margin-top: 24px; }
  .cta-row .btn { flex: 1 1 100%; }
  .hv { padding-bottom: 0; }
  .pane { width: 100%; }
  .pane-body { padding: 12px 12px 0; }
  .pane-bar .file span { max-width: 15em; }
  .pane-bar, .pane-foot { padding-right: 14px; }
  .doc { padding: 14px 12px 30px; font-size: 9.5px; }
  .sf .k, .sf .opt { font-size: 7.4px; }
  .sf .v { font-size: 10px; }
  .sf-title { font-size: 9.5px; }
  .sf > div { padding: 3px 4px 5px; }
  .bidcard { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 16px; }
  .hv-foot { display: block; }
  .hv-caption { margin-top: 12px; }
  .trades { margin-top: 28px; padding: 16px 0 18px; display: block; }
  .trades .t-lead { display: inline; margin-right: 6px; }
  .trades ul { display: inline; }
  .trades li { display: inline; }
  .trades ul { font-size: 15px; }
  .trades .t-link { display: inline-block; margin-top: 8px; }
  .losses { padding: 64px 0 72px; }
  .loss-list { margin-top: 20px; }
  .loss-list > li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .loss-list > li .proof-atom { grid-column: 1; max-width: none; }
  .loss-n { width: 32px; height: 32px; font-size: 14px; }
  .loss-list h3 { font-size: 19px; line-height: 25px; }
  .loss-list p { font-size: 16px; line-height: 25px; }
  .req-row .rq { white-space: normal; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-row .k { grid-column: 1 / -1; }
  .reads-intro { padding-top: 72px; }
  .scrub-stage { padding: 24px 0 72px; }
  .scrub-grid { gap: 20px; }
  .rstrip { padding: 12px 12px 0; }
  .rstrip .doc { font-size: 11px; padding: 14px 14px 18px; margin-bottom: 12px; }
  .rstrip .doc .ph-hide { display: none; }
  .rt li { grid-template-columns: minmax(0, 1fr); padding: 11px 12px; min-height: 0; gap: 8px; }
  .rt .rq { font-size: 14px; }
  .rt .meta { justify-content: flex-start; }
  .rt-head h3 { font-size: 17px; }
  html.fx:not(.rm) .fan-track { height: 115vh; }
  html.fx:not(.rm) .fan-stage { min-height: 0; padding: 28px 0 20px; gap: 12px; }
  .fan-stage { padding: 64px 0 24px; grid-template-rows: auto minmax(220px, 1fr) auto; gap: 16px; }
  .fan { --A: 40; --R: 230; --n: 9; --b: 70; }
  .sheet { width: 54px; margin-left: -27px; }
  .sheet .n { display: none; }
  .sheet:not(.ph) { display: none; }
  .sheet.p0 { --i: 0; } .sheet.p1 { --i: 1; } .sheet.p2 { --i: 2; } .sheet.p3 { --i: 3; }
  .sheet.p4 { --i: 4; } .sheet.p5 { --i: 5; } .sheet.p6 { --i: 6; } .sheet.p7 { --i: 7; } .sheet.p8 { --i: 8; }
  .fan-legend { font-size: 14px; gap: 6px; }
  .rail ol { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .rail ol::-webkit-scrollbar { display: none; }
  .rail li { flex: 0 0 auto; }
  .rail li a { padding: 0 6px; min-height: 48px; gap: 6px; }
  .rail .lbl { display: none; }
  .rail li.now .lbl { display: grid; }
  .rail .day { display: none; }
  .week-note { padding-top: 14px; font-size: 13.5px; align-items: flex-start; }
  .week-note svg { margin-top: 2px; }
  .stages { padding-bottom: 56px; }
  .stage { padding: 44px 0; gap: 20px; }
  .stage:first-of-type { padding-top: 32px; }
  .stage h3 { font-size: 28px; line-height: 32px; }
  .stage .st-copy { gap: 12px; }
  .stage .st-copy p { font-size: 17px; line-height: 27px; }
  .card-b { padding: 12px 14px; }
  .card-h { padding: 12px 14px; }
  .chalk .h2 { font-size: 30px; line-height: 34px; }
  .chalk .grid2 { gap: 24px; }
  .chalk .copy p { font-size: 17px; line-height: 27px; }
  .lrow { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 16px; }
  .lrow.key { padding-left: 13px; }
  .lrow .r { justify-self: start; }
  .tl-lab { font-size: 11px; }
  .tl-lab b { margin-right: 0; }
  .tl-lab .d { display: none; }
  .timeline, .tl-cap { margin-left: 16px; margin-right: 16px; }
  .subcheck { grid-template-columns: minmax(0, 1fr); }
  .hon-grid { margin-top: 24px; gap: 28px; }
  .who th, .who td { font-size: 16px; line-height: 22px; padding: 12px 0; }
  .proof { padding: 20px; }
  .proof .big { font-size: 60px; }
  .ticks90 { grid-template-columns: repeat(30, 1fr); }
  .limits { margin-top: 32px; }
  .limits ul { grid-template-columns: minmax(0, 1fr); }
  .limits li { font-size: 15px; line-height: 22px; padding: 10px 0 10px 24px; }
  .limits li::before { top: 20px; }
  .price-grid { gap: 20px; }
  .price-top, .price-list, .price-foot { padding-left: 18px; padding-right: 18px; }
  .price-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .price-num b { font-size: 54px; }
  .faq-grid { gap: 20px; }
  .faq summary { font-size: 17px; line-height: 24px; padding: 12px 2px; min-height: 56px; }
  .faq .ans { font-size: 16px; line-height: 25px; }
  .close-card { padding: 24px 16px; gap: 24px; margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .close-card .body { font-size: 17px; line-height: 27px; }
  .bidcheck-note .btn { width: 100%; }
  .demo-panel { padding: 20px 16px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .site-footer { padding: 32px 0 28px; }
  .guide-hero { padding: 20px 0 32px; }
  .guide-hero h1 { font-size: 34px; line-height: 38px; margin-top: 20px; }
  .guide-hero .g-lede { font-size: 17px; line-height: 27px; }
  .guide-hero .g-more { font-size: 15px; line-height: 23px; }
  .g-content > section, .g-content > aside, .g-content > nav { margin-top: 48px; }
  .g-content h2 { font-size: 26px; line-height: 31px; }
  .g-content h3 { font-size: 19px; line-height: 25px; }
  .g-content p, .g-content li, .g-content dd { font-size: 17px; line-height: 28px; }
  .g-content dt { font-size: 18px; line-height: 25px; }
  .g-content > .g-ontoc { display: none; }
  .g-cta { padding: 24px 18px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; }
  .g-cta .btn { width: 100%; }
  .g-content table { font-size: 15px; line-height: 22px; }
  .table-box.stack { overflow: visible; }
  .table-box.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-box.stack tr, .table-box.stack td, .table-box.stack tbody th { display: block; }
  .table-box.stack tbody tr { padding: 12px 14px; border-top: 1px solid var(--line); }
  .table-box.stack tbody tr:nth-child(even) { background: var(--paper); }
  .table-box.stack tbody th, .table-box.stack td { padding: 0; border: 0; }
  .table-box.stack tbody th { font-size: 16.5px; line-height: 23px; color: var(--navy); }
  .table-box.stack td { margin-top: 8px; }
  .table-box.stack td::before { content: attr(data-label); display: block; font-size: 12.5px; line-height: 17px; font-weight: 600; color: var(--muted); font-family: var(--font); }
  .table-box.stack td.pg::before { display: inline; margin-right: 8px; }
  .table-box.wide.stack table { min-width: 0; }
  .scroll-hint.stack-hint { display: none; }
  .scroll-hint.stack-hint + .table-box { margin-top: 20px; }
  .table-box.stack td.num, .table-box.stack td.code { text-align: left; white-space: normal; }
  .table-box.wide.stack td:last-child::before { display: none; }
  .table-box.wide.stack td:last-child a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
  .g-content th, .g-content td { padding: 10px 12px; }
  .doc-page h1 { font-size: 36px; line-height: 40px; }
  .doc-page p, .doc-page li { font-size: 17px; line-height: 28px; }
  /* phone page budget (SPEC 9: at most 20,000 px at 390; tightened by 8 px a section when the demo film went in) */
  .sec { padding: 44px 0; scroll-margin-top: -24px; }
  .rstrip .doc h4 { display: none; }
  .loss-list > li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px 12px; padding: 18px 0; align-items: start; }
  .loss-list > li .proof-atom { grid-column: 1 / -1; }
  .loss-n { margin-top: -3px; }
  .losses { padding: 48px 0 48px; scroll-margin-top: -28px; }
  .reads { scroll-margin-top: -36px; }
  .bc-row { padding: 7px 14px; }
  .reads-intro { padding-top: 48px; }
  .scrub-stage { padding-bottom: 48px; }
  html.fx:not(.rm) .fan-track { height: auto; }
  html.fx:not(.rm) .fan-stage { position: relative; top: 0; height: auto; }
  .stage, .stage:first-of-type { padding: 24px 0; gap: 16px; scroll-margin-top: calc(var(--rail-h) + 16px - 24px); }
  .lrow { padding: 10px 16px; }
  .price-list li { display: block; padding: 9px 0; }
  .price-list li b { margin-right: 6px; }
  .price-top { padding-top: 22px; padding-bottom: 18px; }
  .faq summary { min-height: 52px; }
  .demo-form { gap: 14px; }
  .close-list { margin-top: 20px; gap: 8px; }
  .close-list li { padding: 12px 14px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 16px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot-grid li a { min-height: 30px; font-size: 14px; line-height: 19px; padding: 5px 0; }
  .foot-legal { margin-top: 22px; padding-top: 18px; font-size: 13px; line-height: 19px; }
  .lrow { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .lrow .k { grid-column: 1; grid-row: 1; }
  .lrow .r { grid-column: 2; grid-row: 1; justify-self: end; }
  .lrow .v { grid-column: 1 / -1; grid-row: 2; }
  .you-do { border-radius: var(--r); padding: 4px 9px; }
  .fan { --A: 34; --R: 200; --b: 56; }
  .fan-copy .label::before { display: none; }
  .subcheck div { padding: 12px 14px; }
  .subcheck div:first-child { display: none; }
  .hero-trade { font-size: 17px; line-height: 25px; margin-top: 14px; }
  .sf.late-sm { display: none; }
  .sf.c-d { border-bottom: 1.2px solid var(--doc-rule); }
  .sf-cont { font-size: 7.4px; margin-top: 7px; padding-top: 5px; }
  .sf-cont .lg { display: none; }
  .sf-cont .sm { display: inline; }
  .stage .st-more, .tv-gaps small { display: none; }
  .st-copy-wide { margin-bottom: 16px; }
  .st-copy-wide .st-num { margin-bottom: 12px; }
  .ws-rates { grid-template-columns: minmax(0, 1fr); }
  .ws-rates li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline; padding: 8px 14px; border-left: 0; border-top: 1px solid var(--line-soft); }
  .ws-rates li:first-child { border-top: 0; }
  .ws-rates .rt-f { font-size: 14px; white-space: nowrap; }
  .ws-wide tbody th { white-space: nowrap; }
  .ws-wide th .w, .wp-check, .ws-rates .rt-f .w, .ws-rates .hrs, .ws-wide tbody th small, .ws-view .rate-src, .ws-src-k { display: none; }
  .ws-formula { padding: 9px 14px; font-size: 13px; line-height: 19px; }
  .ws-wide { font-size: 14px; }
  .ws-wide th, .ws-wide td, .ws-wide tfoot th, .ws-wide tfoot td { padding: 9px 12px; }
  .ws-wide tbody th { font-size: 14px; }
  .ws-wide .c-clin, .ws-wide .c-cost, .ws-bar { display: none; }
  .ws-view .rate-src { padding: 10px 14px 12px; }
  .wp-body { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .wp-outline { display: none; }
  .wp-sheet { padding: 16px 16px 14px; }
  .wp-p { font-size: 13.5px; }
  .wp-fn { margin-top: 18px; }
  .wp-fn-t { margin-right: 0; }
  .wp-sheet .greek.s + .greek { display: none; }
  .tv-partner { padding: 10px 12px; }
  .sv-rows { padding: 2px 14px 6px; }
  .sv-rows li { padding: 10px 0; }
  .tl-lab.t2.int { transform: translateX(-92%); }
  /* the demo film: square cut and poster (the <source> media in index.html matches 600 px) */
  .watch { padding: 40px 0 44px; scroll-margin-top: -20px; }
  .watch-grid { gap: 16px; }
  .watch .label, .watch-note { display: none; }
  /* no scroll scrub on phones, so the scrub's cue line goes too */
  .scrub-only { display: none; }
  .watch .lede { display: none; }
  .watch-cta .btn { width: 100%; }
  .watch-note { font-size: 14.5px; line-height: 21px; }
  .vp-play { left: 12px; bottom: 12px; min-height: 52px; gap: 10px; padding-right: 18px; font-size: 16px; }
  .vp-ctrls { left: 12px; right: 12px; bottom: 12px; }
  .vp-glyph { width: 36px; height: 36px; }
  .vm { padding: 0; }
  .vm[open] { place-items: start stretch; }
  .vm-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title close" "vp vp" "disc disc" "cta cta"; align-content: start; width: 100%; min-width: 0; min-height: 100%; border-radius: 0; padding: 10px 16px 24px; }
  .vm-cta .btn { width: 100%; min-height: 50px; font-size: 16px; }
  .watch-link { margin-top: 10px; }
}
@media (max-width: 600px) {
  .vp { aspect-ratio: 1 / 1; }
}

/* the narrowest phones (360 to 374 px): tighter tables and stages, same content */
@media (max-width: 374px) {
  .ws-wide, .ws-wide tbody th { font-size: 13.5px; }
  .ws-wide th, .ws-wide td, .ws-wide tfoot th, .ws-wide tfoot td { padding-left: 10px; padding-right: 10px; }
  .ws-wide tfoot td.n:last-child { font-size: 15px; }
  .stage, .stage:first-of-type { padding: 22px 0; scroll-margin-top: calc(var(--rail-h) + 16px - 22px); }
  .sec { padding: 46px 0; scroll-margin-top: -26px; }
}
/* 320 to 340 px: the price worksheet's row labels wrap, so the table fits the card */
@media (max-width: 340px) {
  .ws-wide, .ws-wide tbody th { font-size: 13px; }
  .ws-wide th, .ws-wide td, .ws-wide tfoot th, .ws-wide tfoot td { padding-left: 8px; padding-right: 8px; }
  .ws-wide tbody th, .ws-wide tfoot th { white-space: normal; }
  .ws-wide tfoot td.n:last-child { font-size: 14px; }
}

/* ---------- reduced motion and ?still=1: every scene shows its final, complete frame ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: var(--dur-none) !important; transition-duration: var(--dur-none) !important; transition-delay: var(--dur-none) !important; scroll-behavior: auto !important; }
}
html.rm *, html.rm *::before, html.rm *::after { transition-duration: var(--dur-none) !important; transition-delay: var(--dur-none) !important; }
html.rm .hero .bc-row > *, html.rm .hero .bc-row .pc, html.rm .hero .bc-row .status, html.rm .hero .bc-verdict .in, html.rm .reads .rt li > *, html.rm .reads .rt li .pc, html.rm .reads .rt li .status, html.rm .chalk .lrow { opacity: 1 !important; transform: none !important; }
html.rm .chalk .tl-mark, html.rm .chalk .tl-lab { opacity: 1 !important; }
html.rm .chalk .tl-fill, html.rm .stage .bar3 span, html.rm .tv-share span, html.rm .ws-bar { transform: none !important; }
html.rm .ws-wide tbody tr, html.rm .sv-rows li, html.rm .wp-fn-t { opacity: 1 !important; transform: none !important; }
html.rm .v-tick { stroke-dashoffset: 0 !important; }
html.rm .hl-line .w::before { --f: 1 !important; }
html.rm .ruler, html.rm .scrub-cue, html.rm .lift { display: none !important; }
html.rm .dots10 i.y { background: var(--navy) !important; }
html.rm .ticks90 i.d { background: transparent !important; border-color: var(--confirm-line) !important; }

/* ---------- print: the bid or no-bid checklist (and any guide), black on white ---------- */
@media print {
  :root { --paper: #FFFFFF; --field: #FFFFFF; --band: #FFFFFF; --wash: #FFFFFF; --text: #000000; --ink: #000000; --navy: #000000; --muted: #000000; --sky: #000000; --line: #000000; --line-soft: #000000; }
  @page { margin: 13mm 12mm; }
  html, body { background: var(--paper); color: var(--ink); font-size: 10pt; line-height: 1.35; }
  .site-header, .site-footer, .skip, [data-print-hide], .g-toc, .g-ontoc, .g-cta, .g-related, .crumbs, .g-tools, .sprite, .scroll-hint { display: none !important; }
  .guide-hero { background: none; border: 0; padding: 0 0 6pt; }
  .guide-hero h1 { font-size: 17pt; line-height: 1.15; margin: 0; max-width: none; }
  .guide-hero .g-lede, .guide-hero .g-more, .guide-hero .g-updated { font-size: 9pt; line-height: 1.32; margin-top: 3pt; max-width: none; }
  .wrap { max-width: none; padding: 0; }
  .g-layout { display: block; padding: 0; }
  .g-content { max-width: none; }
  .g-content > section, .g-content > aside, .g-content > nav { margin-top: 9pt; }
  .g-content h2 { font-size: 12pt; line-height: 1.2; break-after: avoid; }
  .g-content h3 { font-size: 10.5pt; margin-top: 6pt; }
  .g-content p, .g-content li, .g-content dd { font-size: 9pt; line-height: 1.32; margin-top: 3pt; }
  .g-content ul { margin-top: 3pt; }
  .g-content li + li { margin-top: 1pt; }
  .table-box { overflow: visible; border: 0; border-radius: 0; margin-top: 4pt; }
  .table-box.wide table { min-width: 0; }
  .g-content table { font-size: 8pt; line-height: 1.28; }
  .g-content tr { break-inside: avoid; }
  .g-content caption { padding: 0 0 3pt; border: 0; font-size: 8pt; }
  .g-content thead th { font-size: 8.5pt; }
  .g-content th, .g-content td { padding: 2.5pt 4pt; border: 0.5pt solid var(--line); }
  .g-content tbody tr:nth-child(even) { background: none; }
  a { color: var(--ink); text-decoration: none; }
}