/* Reset Radar · design system v2
   Two-layer tokens: RAW brand palette → SEMANTIC roles; themes flip only the
   semantic layer. v2 principles: editorial serif display + humanist sans body,
   monospace ONLY for literal code, compact density, progressive disclosure,
   one clear conversion path. Badges never mimic buttons; " · " separates. */

/* ---------- Raw layer ---------- */
:root {
  --raw-ink: #0d1421;
  --raw-ink-soft: #1a2436;
  --raw-slate: #33415c;
  --raw-steel: #5b6b8c;
  --raw-mist: #93a1bd;
  --raw-paper: #f6f4ef;
  --raw-paper-raised: #fffefb;
  --raw-line-light: #ddd8cc;
  --raw-line-dark: #2a3650;
  --raw-radar: #2fa878;
  --raw-radar-deep: #1e7d58;
  --raw-radar-dark: #43c491;
  --raw-amber: #c2820a;
  --raw-amber-dark: #e3a63a;
  --raw-rust: #b3462c;
  --raw-rust-dark: #d97757;
  /* chart series · validated (dataviz six checks) per surface */
  --raw-chart1-light: #279468;
  --raw-chart2-light: #2f6fa8;
  --raw-chart1-dark: #30a878;
  --raw-chart2-dark: #4b90da;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* literal code only */

  --radius: 10px;
  --radius-pill: 999px;
  --container: 62rem;
  --shadow-1: 0 1px 2px rgb(13 20 33 / 0.06), 0 4px 16px rgb(13 20 33 / 0.05);
}

/* ---------- Semantic layer · light (default) ---------- */
:root {
  color-scheme: light;
  --bg: var(--raw-paper);
  --bg-raised: var(--raw-paper-raised);
  --bg-inset: #eeeadf;
  --text: var(--raw-ink);
  --text-soft: var(--raw-slate);
  --text-muted: var(--raw-steel);
  --border: var(--raw-line-light);
  --accent: var(--raw-radar);
  --accent-deep: var(--raw-radar-deep);
  --accent-ink: #ffffff;
  --good: var(--raw-radar-deep);
  --bad: var(--raw-rust);
  --warn: var(--raw-amber);
  --focus: #2f6fa8;
  --chart-1: var(--raw-chart1-light);
  --chart-2: var(--raw-chart2-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--raw-ink);
    --bg-raised: var(--raw-ink-soft);
    --bg-inset: #101a2c;
    --text: #e8ecf4;
    --text-soft: #c0c9da;
    --text-muted: var(--raw-mist);
    --border: var(--raw-line-dark);
    --accent: var(--raw-radar-dark);
    --accent-deep: var(--raw-radar);
    --accent-ink: #08130e;
    --good: var(--raw-radar-dark);
    --bad: var(--raw-rust-dark);
    --warn: var(--raw-amber-dark);
    --focus: #6ea8d8;
    --chart-1: var(--raw-chart1-dark);
    --chart-2: var(--raw-chart2-dark);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--raw-ink);
  --bg-raised: var(--raw-ink-soft);
  --bg-inset: #101a2c;
  --text: #e8ecf4;
  --text-soft: #c0c9da;
  --text-muted: var(--raw-mist);
  --border: var(--raw-line-dark);
  --accent: var(--raw-radar-dark);
  --accent-deep: var(--raw-radar);
  --accent-ink: #08130e;
  --good: var(--raw-radar-dark);
  --bad: var(--raw-rust-dark);
  --warn: var(--raw-amber-dark);
  --focus: #6ea8d8;
  --chart-1: var(--raw-chart1-dark);
  --chart-2: var(--raw-chart2-dark);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
code { font-family: var(--code); font-size: 0.9em; background: var(--bg-inset); padding: 0.05em 0.35em; border-radius: 4px; }

h1, h2 { font-family: var(--serif); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.4em; font-weight: 650; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem); }
h3 { font-size: 1.08rem; font-family: var(--sans); font-weight: 700; line-height: 1.25; margin: 0 0 0.4em; }
p { margin: 0 0 0.9em; }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
section { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
section + section { border-top: 1px solid var(--border); }

/* Label grammar · sans small-caps (replaces v1 mono labels) */
.label {
  font: 650 0.7rem/1.4 var(--sans);
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted);
}

/* Quiet "optional" marker inside field labels · whisper, not noise */
.opt {
  font-weight: 400; font-size: 0.7rem; text-transform: lowercase;
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
  margin-left: 0.35rem; letter-spacing: 0.02em;
}
.eyebrow {
  font: 650 0.72rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-deep); margin: 0 0 0.6rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; gap: 1.25rem; min-height: 3.25rem; }
.wordmark { display: flex; align-items: center; gap: 0.5rem; font: 700 1.05rem/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; }
.wordmark svg { width: 24px; height: 24px; flex: none; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.3rem); font-size: 0.9rem; }
.site-nav a { text-decoration: none; color: var(--text-soft); }
.site-nav a:hover { color: var(--text); }
@media (max-width: 680px) { .site-nav .hide-sm { display: none; } }

.theme-toggle {
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-soft);
  border-radius: var(--radius-pill); width: 1.9rem; height: 1.9rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle svg { width: 0.9rem; height: 0.9rem; }
.footer-theme {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}

/* ---------- Buttons (CTA grammar) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 700 0.9375rem/1 var(--sans);
  padding: 0.72rem 1.35rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--text-muted); }
.btn-small { padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* ---------- Chips (state grammar · soft, never button-shaped) ---------- */
.chip {
  display: inline-block; font: 650 0.7rem/1.5 var(--sans);
  letter-spacing: 0.03em;
  padding: 0.1rem 0.5rem; border-radius: 5px;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--bg-inset);
  white-space: nowrap;
}
.chip-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 9%, transparent); }
.chip-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 9%, transparent); }
.chip-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.chip-ghost { border-style: dashed; background: transparent; }

/* ---------- Hero (conversion-first) ---------- */
/* Section order is a layout concern, not a document-structure one · the record
   should read first for somebody who expanded the full site, but the compact
   view is a sales page and the Pacing Coach is the only thing on it with a
   price. It was sitting 2.9 screens down, and 78% of sessions never pass a
   quarter of the page, so 64 of 816 ever laid eyes on it. Ordering rather than
   moving it in the DOM keeps the full view's reading order intact. */
main { display: flex; flex-direction: column; }
/* Flex items default to min-width:auto, which lets a wide child push the whole
   column out. Every section here is full-bleed anyway, so pin it closed. */
main > section { min-width: 0; }
[data-view="compact"] main > section { order: 3; }
[data-view="compact"] main > .hero { order: 1; }
[data-view="compact"] main > .coach { order: 2; }

.hero { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem); }
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1.2fr 0.8fr; align-items: center; }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Same breakpoint the grid stacks at · below it the pulse is under the hero
     rather than beside it, so anything it repeats is pure scrolling cost. */
  .pulse-wide-only { display: none; }
}
.hero .lede { font-size: 1.06rem; color: var(--text-soft); max-width: 33em; margin-bottom: 1.1rem; }

/* The headline carries two numbers and a turn, so it needs a smaller floor than
   the global h1 · at the old 2rem minimum it ate a third of a 695px phone
   screen, and 93% of this site's traffic is on a phone. */
.hero h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); max-width: 18em; }
/* The second sentence is the whole argument, so it gets its own line and the
   eye is sent to it. Block display makes the turn deliberate rather than
   whatever the line-wrap happens to do at a given width. */
.hero h1 .h1-turn { display: block; color: var(--accent-deep); }
.hero h1 strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-sub {
  font: 400 1.06rem/1.55 var(--sans);
  color: var(--text-soft); max-width: 34em; margin: 0 0 1.1rem;
}
/* Answers "how much mail is this" in the same glance as the button · sits
   tight under the CTA rather than floating away as another paragraph. */
.capture .rate {
  font: 400 0.82rem/1.5 var(--sans);
  color: var(--text-soft); margin: 0.5rem 0 0;
}

/* Inline capture · the primary conversion element */
.capture { max-width: 30rem; }
.capture-row { display: flex; gap: 0.5rem; }
.capture-row input[type="email"] { flex: 1; min-width: 0; }
.capture .consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.55rem; }
.capture .consent input { margin-top: 0.2rem; flex: none; }
.capture .trust { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; }
.capture .trust a { color: inherit; }
@media (max-width: 480px) { .capture-row { flex-direction: column; } }

/* Unmissable subscribe confirmation · replaces the capture form on success */
.capture-success {
  border: 1.5px solid color-mix(in srgb, var(--good) 55%, transparent);
  background: color-mix(in srgb, var(--good) 9%, var(--bg-raised));
  border-radius: var(--radius); padding: 1.1rem 1.3rem;
  animation: rr-pop 260ms ease;
}
.capture-success .cs-title {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 650; color: var(--good);
  margin-bottom: 0.25rem;
}
.capture-success .cs-title svg { width: 1.15rem; height: 1.15rem; flex: none; }
.capture-success p { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
@keyframes rr-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .capture-success { animation: none; } }
.cta-band .capture-success { max-width: 30rem; margin-inline: auto; text-align: left; }

/* Pulse · live status condensed into one stack beside the hero */
.pulse { display: grid; gap: 0.7rem; }
.pulse-item {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 0.95rem; box-shadow: var(--shadow-1);
}
.pulse-item .label { display: block; margin-bottom: 0.15rem; }
.pulse-value { font-weight: 700; font-size: 1.02rem; }
.pulse-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; }
.dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--text-muted); margin-right: 0.4em; }
.dot-good { background: var(--good); }
.dot-warn { background: var(--warn); }
.dot-bad { background: var(--bad); }
.countdown-inline { font-weight: 700; font-variant-numeric: tabular-nums; }

.signal-bar { height: 0.4rem; border-radius: var(--radius-pill); background: var(--bg-inset); overflow: hidden; margin-top: 0.4rem; }
.signal-bar > span { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: inherit; transition: width 400ms ease; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-1);
}
.card h3 { margin-top: 0; }

/* ---------- Charts ---------- */
.chart-figure { margin: 0; }
.chart-figure figcaption { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; max-width: 52em; }
.chart-wrap { position: relative; }
/* pan-y: vertical scroll stays native, horizontal drags reach the zoom brush
   (touch-action:auto let scrolling cancel every touch drag · review) */
.chart-wrap svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: var(--text-soft); margin: 0.4rem 0 0.6rem; }
.chart-legend .key { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend .swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; display: none;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-1); padding: 0.45rem 0.65rem; font-size: 0.78rem;
  max-width: min(15rem, calc(100vw - 2rem));
}
.chart-tip .tip-date { font-weight: 700; margin-bottom: 0.15rem; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 0.4rem; color: var(--text-soft); }
.chart-tip .swatch { width: 10px; height: 3px; border-radius: 2px; flex: none; }

/* ---------- Timeline v2 · collapsed rows, three clear states ---------- */
.tl-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1rem; }
.tl-filters button {
  font: 650 0.78rem/1 var(--sans); letter-spacing: 0.02em;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer;
}
.tl-filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { border-bottom: 1px solid var(--border); }
.timeline details { border: none; background: none; }
.timeline summary {
  display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.2rem; cursor: pointer; list-style: none;
}
.timeline summary::-webkit-details-marker { display: none; }
.tl-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; cursor: pointer; }
.tl-dot:hover { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Record toolbar: funnel button + filter panel ---------- */
.tl-toolbar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.tl-filter-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 650 0.82rem/1 var(--sans); padding: 0.45rem 0.85rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer;
}
.tl-filter-btn:hover, .tl-filter-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
.tl-filter-count {
  background: var(--accent); color: var(--bg); border-radius: var(--radius-pill);
  font-size: 0.7rem; padding: 0.1rem 0.4rem; min-width: 1.1rem; text-align: center;
}
.tl-filter-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.9rem 1.2rem;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem; max-width: 58rem;
}
/* author display:grid beats the UA's [hidden] rule · restate it (review: the
   panel rendered permanently expanded for every visitor) */
.tl-filter-panel[hidden] { display: none; }
.tl-filter-panel fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tl-filter-panel legend {
  font: 650 0.7rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: 0.35rem;
}
.tl-filter-panel label {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; font-weight: 400; color: var(--text-soft); margin: 0 0 0.25rem;
}
.tl-filter-panel input { accent-color: var(--accent); }
.tl-filter-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; }

/* Band headers: the record's three sections, visible instead of implied */
li.tl-band {
  display: flex; align-items: baseline; gap: 0.6rem; list-style: none;
  padding: 1.05rem 0 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 0.2rem;
}
li.tl-band:first-child { padding-top: 0.1rem; }
.tl-band-title { font: 700 0.78rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-soft); }
.tl-band-note { font-size: 0.78rem; color: var(--text-muted); }
li[data-state="historic"] .tl-dot { background: var(--text-muted); }
li[data-state="historic"][data-impact="positive"] .tl-dot { background: var(--good); }
li[data-state="historic"][data-impact="negative"] .tl-dot { background: var(--bad); }
li[data-state="announced"] .tl-dot { background: transparent; border: 2.5px solid var(--warn); }
li[data-state="projected"] .tl-dot { background: transparent; border: 2px dashed var(--text-muted); }
li[data-state="projected"] summary .tl-title { color: var(--text-muted); }
.tl-date { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 6.2rem; }
.tl-title { font-weight: 650; font-size: 0.95rem; line-height: 1.3; }
.tl-chevron { color: var(--text-muted); transition: transform 160ms ease; font-size: 0.7rem; }
.timeline details[open] .tl-chevron { transform: rotate(90deg); }
.tl-body { padding: 0.15rem 0.2rem 0.9rem 2.6rem; }
.tl-body p { color: var(--text-soft); font-size: 0.92rem; max-width: 58em; margin-bottom: 0.4rem; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.tl-sources { font-size: 0.8rem; color: var(--text-muted); }
.tl-sources a { color: inherit; }
/* The opened row's first line: what the date means (took effect / takes
   effect / projected for), full precision included. */
.tl-effective { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.tl-applies { margin-bottom: 0.4rem; }
.tl-empty { padding: 0.55rem 0.2rem; font-size: 0.875rem; color: var(--text-muted); }
.key-dot {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  vertical-align: -0.05em; margin-right: 0.45rem;
}
@media (max-width: 560px) {
  .timeline summary { gap: 0.5rem; }
  .tl-date { min-width: 0; font-size: 0.72rem; }
  .tl-body { padding-left: 1.4rem; }
}

/* ---------- Two-up ---------- */
.split { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
form .field { margin-bottom: 0.85rem; }
label { display: block; font-weight: 650; font-size: 0.88rem; margin-bottom: 0.25rem; }
.hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
input[type="email"], input[type="tel"], input[type="text"], input[type="time"], input[type="password"], select, textarea {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
}
textarea { resize: vertical; min-height: 4.5rem; }
.checkbox-row { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.85rem; color: var(--text-soft); }
.checkbox-row input { margin-top: 0.22rem; flex: none; }
.form-msg { margin-top: 0.6rem; font-weight: 600; font-size: 0.9rem; }
.form-msg[data-kind="ok"] { color: var(--good); }
.form-msg[data-kind="err"] { color: var(--bad); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Single-use accordions (legend, report form) ---------- */
details.exp { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
details.exp summary { cursor: pointer; font-weight: 650; font-size: 0.92rem; padding: 0.7rem 0.95rem; list-style: none; display: flex; justify-content: space-between; gap: 0.6rem; }
details.exp summary::-webkit-details-marker { display: none; }
details.exp summary::after { content: "+"; color: var(--text-muted); font-weight: 400; }
details.exp[open] summary::after { content: "\2212"; }
details.exp .answer { padding: 0 0.95rem 0.8rem; color: var(--text-soft); font-size: 0.9rem; }

/* ---------- Tabs (mechanics section · replaces the grid accordions whose
   equal-height rows read as empty open panels) ---------- */
.tab-strip { display: flex; flex-wrap: wrap; gap: 0.35rem; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.tab-strip [role="tab"] {
  font: 650 0.88rem/1.2 var(--sans); color: var(--text-soft);
  background: none; border: none; border-bottom: 2.5px solid transparent;
  padding: 0.55rem 0.85rem 0.6rem; margin-bottom: -1px; cursor: pointer;
}
.tab-strip [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab-strip [role="tab"]:hover { color: var(--text); }
/* Panels stack in one grid cell so the container always holds the height
   of the TALLEST panel · no layout jump when switching tabs (review) */
.tab-panels { display: grid; }
.tab-panel {
  grid-area: 1 / 1;
  padding: 0.95rem 0.2rem 0.2rem; color: var(--text-soft); font-size: 0.94rem;
  max-width: 52em;
}
.tab-panel[hidden] { display: block; visibility: hidden; }

/* ---------- Expand strip (compact view's door to the full site) ---------- */
.expand-strip { padding-block: 0; }
.strip-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-block: 1.75rem; font: inherit; color: inherit;
  transition: border-color 140ms ease;
}
.strip-btn:hover { border-color: var(--accent); }
.strip-lede { display: block; color: var(--text-soft); font-size: 0.92rem; margin-bottom: 0.35rem; }
.strip-cta { font: 700 0.95rem/1.2 var(--sans); color: var(--accent-deep); }
.strip-arrow { margin-left: 0.4rem; }
:root[data-theme="dark"] .strip-cta, :root:not([data-theme="light"]) .strip-cta { color: var(--accent); }

/* ---------- Trend teaser (compact view's peek at the full chart) ----------
   A clipped, bottom-blurred preview of the headroom chart with a callout that
   opens the full version. Shown only in compact view. */
.trend-teaser { padding-block: 1.5rem 0; }
.trend-teaser .eyebrow { margin-bottom: 0.1rem; }
.trend-teaser h2 { margin-bottom: 0.9rem; }
.teaser-frame { position: relative; }
/* aspect-ratio shorter than the chart's own 720:292 reveals ~65% of its
   height; the chart renders full-size inside and the surplus is clipped. */
/* min-height is the fallback: the children are absolutely positioned and add
   no in-flow height, so an engine without aspect-ratio support would collapse
   the clip to zero and hide the chart. */
/* max-width is load-bearing, not belt-and-braces. aspect-ratio plus min-height
   on a width:auto block is a trap: once the min-height floor beats the height
   the ratio wants, the box resolves the ratio the OTHER way and computes its
   width from its height · 168px * 720/196 = 617px, inside a 361px parent. That
   widened the document to 633px, and Android Chrome responds by widening the
   layout viewport to fit and zooming out, so 23% of all sessions (191 of them
   Android phones, including the paid X traffic) were reading the whole site at
   about 62% scale. Capping the width makes the ratio yield instead. */
.teaser-clip { position: relative; overflow: hidden; aspect-ratio: 720 / 196; min-height: 168px; max-width: 100%; }
/* the clone is a static preview · its inherited cursor:pointer hit areas have
   no handlers, so make the whole thing inert to avoid a dead clickable cursor. */
.teaser-chart { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.teaser-chart svg { display: block; width: 100%; height: auto; }
.teaser-chart:empty { display: none; }
/* one overlay does both jobs, weighted to the bottom by a mask: the backdrop
   blur ramps in and the tint fades to the page colour, hiding the clip edge. */
.teaser-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 74%, var(--bg) 99%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 97%);
          mask-image: linear-gradient(to bottom, transparent 80%, #000 97%);
}
.teaser-callout {
  position: relative; z-index: 2; margin-top: -3.25rem;
  max-width: 34rem; margin-inline: auto; text-align: center;
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.25rem 1.15rem;
}
.teaser-note { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 0.75rem; }

/* ---------- View modes · compact hides the deep sections ---------- */
:root[data-view="compact"] .full-only { display: none; }
:root[data-view="full"] .compact-only { display: none; }
:root[data-view="full"] .expand-strip { display: none; }
.nav-collapse { display: none; font-size: 0.9rem; }
:root[data-view="full"] .nav-collapse { display: inline; }
@media (max-width: 680px) { :root[data-view="full"] .nav-collapse { display: none; } }

/* Row highlight when arriving from a chart marker */
@keyframes tl-flash-kf { from { background: color-mix(in srgb, var(--warn) 18%, transparent); } to { background: transparent; } }
.tl-flash { animation: tl-flash-kf 1.8s ease; }

/* ---------- Projection signals ---------- */
.tl-signals { margin-top: 0.5rem; }
.tl-signals .label { display: block; margin-bottom: 0.25rem; }
.tl-signals a { color: inherit; }
.sig-scroll { overflow-x: auto; }
.sig-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: var(--text-soft); }
.sig-table th { text-align: left; font: 650 0.68rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); padding: 0.3rem 0.7rem 0.3rem 0; border-bottom: 1px solid var(--border); }
.sig-table td { padding: 0.32rem 0.7rem 0.32rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: top; }
.sig-table tr:last-child td { border-bottom: none; }
.sig-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.sig-table td:last-child { white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); margin-bottom: 0.5rem; }
.faq summary { cursor: pointer; font-weight: 650; font-size: 0.95rem; padding: 0.75rem 1rem; list-style: none; display: flex; justify-content: space-between; gap: 0.6rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-muted); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1rem 0.85rem; color: var(--text-soft); font-size: 0.92rem; }

/* ---------- CTA band ---------- */
/* ---------- Pacing Coach (premium funnel) ---------- */
.coach-teaser { margin-top: 0.9rem; font-size: 0.85rem; }
.coach-teaser a { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-bottom: 1px; display: inline-flex; align-items: center; gap: 0.25rem; }
.coach-teaser a:hover { color: var(--text); border-bottom-color: var(--accent); }
.coach-teaser svg { width: 0.72rem; height: 0.72rem; flex: none; }
.coach .lede { font-size: 1.02rem; color: var(--text-soft); max-width: 36em; margin: 0 0 1.2rem; }
/* Real terminal output from the shipped CLI · the one thing in this section that
   is not a design. Generated by tools/build-coach-demo.mjs and gated, so it can
   never quietly drift back into being a drawing of itself. */
.coach-real { margin: 0 0 1.1rem; min-width: 0; }
.cr-cap { font: 400 0.78rem/1.5 var(--sans); color: var(--text-muted); margin: 0 0 0.45rem; }
.cr-tag {
  display: inline-block; font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 0.66rem;
  color: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px; padding: 0.1rem 0.45rem; margin-right: 0.15rem;
}
.cr-lead { font: 400 0.82rem/1.5 var(--sans); color: var(--text-soft); margin: 0.7rem 0 0.35rem; }
.cr-lead:first-of-type { margin-top: 0.2rem; }
/* The statusline is one short line and the only surface that genuinely fits a
   phone, so it wraps rather than scrolls · a reader should never have to drag
   sideways to read the thing that is supposed to be glanceable. */
.cr-status {
  margin: 0; min-width: 0; max-width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--bg-inset);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 8px;
}
.cr-status code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem; line-height: 1.5; color: var(--text);
  background: none; border: 0; padding: 0; white-space: pre-wrap; word-break: break-word;
}
/* The report is a fixed-width artefact: its bars and columns only line up if the
   lines are never wrapped. So it scrolls INSIDE its own box · min-width:0 plus
   overflow-x on the element that owns the long content, which is what keeps a
   long line from widening the document instead. */
.cr-term {
  margin: 0; min-width: 0; max-width: 100%; overflow-x: auto;
  padding: 0.9rem 1rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cr-term code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; line-height: 1.55;
  color: var(--text-soft); background: none; border: 0; padding: 0;
  white-space: pre;
}

.coach-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start; }
/* minmax(0, 1fr), never a bare 1fr · a bare `1fr` is `minmax(auto, 1fr)`, and
   that auto minimum is the width of the widest unbreakable child. The desktop
   rule above already guards this; the stacked rule did not, so the terminal
   block's longest line pushed this column to 776px inside a 393px phone and
   took the document with it. Same failure family as the teaser-clip overflow. */
@media (max-width: 760px) {
  .coach-grid { grid-template-columns: minmax(0, 1fr); }
  /* Show, then tell. Stacked, the side column falls below every word of the
     explanation, which buried the one artefact that proves the thing is real
     6600px down the page. On a phone the real output goes first and the prose
     argues for something the reader has already seen. */
  .coach-side { order: -1; }
}
.coach-side, .coach-copy { min-width: 0; }
.coach-outcomes { display: grid; gap: 0.85rem; margin: 0 0 1.2rem; }
.coach-outcomes dt { font-weight: 700; font-size: 0.95rem; }
.coach-outcomes dd { margin: 0.15rem 0 0; color: var(--text-soft); font-size: 0.92rem; }
.coach-outcomes code { font-size: 0.84em; }
.coach-note { color: var(--text-muted); font-size: 0.85rem; max-width: 40em; }
.coach-film { margin: 0 auto 1.6rem; max-width: 54rem; }
.coach-film video { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #0a0f1a; box-shadow: var(--shadow-1); }
.coach-film figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.coach-mock { margin: 0 0 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); box-shadow: var(--shadow-1); padding: 0.9rem 1rem 0.75rem; }
.coach-mock svg { display: block; width: 100%; height: auto; margin-top: 0.55rem; }
.cm-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cm-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.18rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid; }
.cm-badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.cm-meta { font-size: 0.78rem; color: var(--text-muted); }
.cm-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.cm-chip { font-size: 0.72rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 0.18rem 0.5rem; }
.cm-chip-bind { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.cm-nudge { margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--text-soft); border-left: 3px solid var(--warn); padding-left: 0.65rem; }
.cm-statusline { margin: 0.55rem 0 0; }
.cm-statusline code { font-size: 0.78rem; color: var(--text-soft); background: var(--bg-inset); border: 1px solid var(--border); border-radius: 6px; padding: 0.22rem 0.5rem; display: inline-block; }
.coach-mock figcaption { margin-top: 0.6rem; font-size: 0.75rem; color: var(--text-muted); }
.coach-cta { margin-top: 2rem; padding: 1.8rem clamp(1.2rem, 4vw, 2.6rem) 1.6rem; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised)); text-align: center; }
.coach-cta h3 { font-family: var(--serif); font-size: 1.45rem; margin-bottom: 0.3rem; }
.coach-cta-sub { color: var(--text-soft); font-size: 0.92rem; margin-bottom: 1.1rem; }
.coach-cta .capture { margin-inline: auto; }
.coach-cta .capture-row input[type="email"] { font-size: 1rem; }
.coach-cta .capture-row .btn { font-size: 1rem; padding-block: 0.7rem; }
.coach-cta .consent { justify-content: center; text-align: left; }
.coach-cta .capture-success { margin-inline: auto; text-align: left; }

.cta-band { background: var(--bg-inset); border-block: 1px solid var(--border); text-align: center; }
.cta-band h2 { margin-bottom: 0.3rem; }
.cta-band .capture { margin-inline: auto; }
.cta-band .capture-row { justify-content: center; }

/* ---------- Ad slot · single native placement, CLS-safe, off by default ---------- */
.ad-slot { display: none; }
:root[data-ads="on"] .ad-slot {
  display: block; min-height: 110px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-raised); overflow: hidden;
  margin-block: 1.25rem;
}
.ad-tag { font: 650 0.62rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0.5rem 1.1rem 0; display: block; }
.ad-house { display: flex; gap: 0.9rem; align-items: center; padding: 0.7rem 1.1rem 0.9rem; text-decoration: none; }
.ad-house .ad-mark { width: 40px; height: 40px; border-radius: 9px; background: var(--bg-inset); display: grid; place-items: center; flex: none; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--accent-deep); }
.ad-house .ad-title { font-weight: 700; font-size: 0.95rem; }
.ad-house .ad-text { font-size: 0.83rem; color: var(--text-soft); }

/* ---------- Consent banner ---------- */
.consent-banner {
  position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 60;
  max-width: 30rem; margin-inline: auto;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-1); padding: 1rem 1.2rem; display: none;
}
.consent-banner.visible { display: block; }
.consent-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding-block: 2rem; font-size: 0.85rem; color: var(--text-muted); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.8rem; }
.site-footer a { color: var(--text-soft); }
.disclaimer { max-width: 56em; }

/* ---------- Radar mark ---------- */
.radar-figure svg { width: min(210px, 55vw); height: auto; }
.radar-sweep { transform-origin: 100px 100px; animation: sweep 6s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar-sweep { animation: none; } }

/* ---------- Utility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }


/* ---------- Tooltips (shared: public site + console) ----------
   One styled bubble replaces native title tooltips · faster, themed, and
   visible on keyboard focus. tooltip.js adopts any [title] into [data-tip]. */
.rr-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  font: 500 0.82rem/1.45 var(--sans);
  padding: 0.42rem 0.62rem; max-width: 22rem;
  opacity: 0; transform: translateY(3px); transition: opacity 0.12s ease, transform 0.12s ease;
}
.rr-tip.visible { opacity: 1; transform: none; }
.rr-tip:after {
  content: ""; position: absolute; left: var(--arrow, 50%); margin-left: -5px;
  border: 5px solid transparent; width: 0; height: 0;
}
.rr-tip[data-side="top"]:after { top: 100%; border-top-color: var(--bg-raised); }
.rr-tip[data-side="bottom"]:after { bottom: 100%; border-bottom-color: var(--bg-raised); }
@media (prefers-reduced-motion: reduce) { .rr-tip { transition: none; } }

/* Projection confidence · a meter rather than a fraction, so the strength of a
   claim reads at a glance instead of being computed. The band name carries the
   meaning; the bar and the number are reinforcement, never the only signal. */
.conf-meter { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.55rem;
  vertical-align: middle; font: 650 0.72rem/1 var(--sans); }
.conf-label { text-transform: uppercase; letter-spacing: 0.07em; color: var(--conf-color, var(--accent)); }
.conf-track { position: relative; width: 4.5rem; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 30%, transparent); overflow: hidden; }
.conf-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--conf-color, var(--accent)); }
.conf-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.conf-meter[data-band="high"]   { --conf-color: var(--good); }
.conf-meter[data-band="medium"] { --conf-color: var(--accent); }
.conf-meter[data-band="low"]    { --conf-color: var(--warn); }
.conf-meter[data-band="faint"]  { --conf-color: var(--text-muted); }
@media (max-width: 30rem) { .conf-track { width: 3rem; } }

/* The opening line of a record entry states what the entry IS · give it a
   little more weight so a reader orients before reading the reasoning. */
.tl-body .sum-lead { font-weight: 600; color: var(--text); }
.tl-body p + p { margin-top: 0.6em; }

/* Hero proof · evidence above the ask. Cold traffic arrives knowing nothing
   about us, and 79% of it never scrolls, so the record has to introduce itself
   on the first screen. Deliberately quiet: a countdown and a count, not a
   banner · the credibility comes from the specificity, not from volume. */
.hero-proof { margin: 0 0 1rem; }
.proof-next { display: block; padding: 0.7rem 0.9rem; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  text-decoration: none; color: inherit; }
.proof-next:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.proof-label { display: block; font: 650 0.68rem/1.4 var(--sans); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); }
.proof-title { display: block; font: 650 1rem/1.35 var(--sans); color: var(--text); margin: 0.15rem 0 0.2rem; }
.proof-when { display: block; font: 500 0.85rem/1.4 var(--sans); color: var(--text-soft); }
.proof-when .proof-date { color: var(--text-muted); }
.proof-count { margin: 0.55rem 0 0; font: 400 0.86rem/1.5 var(--sans); color: var(--text-soft); }
.proof-count strong { color: var(--text); font-weight: 700; }

/* Pacing Coach · install and tiers. The free column is deliberately first and
   deliberately generous: the local product IS the distribution, and a paid
   column that looks like the point would undercut that. */
.coach-install { max-width: 44rem; margin: 0 auto 1.6rem; }
.coach-code { background: var(--bg-inset, #0d1421); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.9rem 1.1rem; overflow-x: auto; margin: 0 0 0.6rem; }
.coach-code code { background: none; padding: 0; font-size: 0.92rem; line-height: 1.7; color: var(--text); }
.coach-note { font-size: 0.88rem; color: var(--text-muted); margin: 0; }
.coach-tiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 44rem; margin: 0 auto; text-align: left; }
.tier { background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.tier-paid { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tier-name { font: 650 0.72rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.2rem; }
.tier-price { font-family: var(--serif); font-size: 1.15rem; font-weight: 650; margin: 0 0 0.7rem; color: var(--text); }
.tier ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.tier li { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 0.3rem; }
.tier-fine { font-size: 0.78rem; color: var(--text-muted); margin: 0.6rem 0 0; }

/* Long signal text · folded to TWO RENDERED LINES, not to a character count.
   A character budget cannot know the column width, so the same text that fills
   two lines on a desktop fills nine on a phone. line-clamp asks the browser,
   which is the only thing that knows. The full text is one node that is merely
   clipped, so search, screen readers and copy-paste are unaffected. */
/* Clamped BY DEFAULT. The measurement that decides whether a button is needed
   compares scrollHeight to clientHeight, which are only different when the
   clamp is already in force · applying it via the class the measurement adds
   would mean nothing ever overflows and no button ever appeared. */
.clamp { display: block; }
.clamp-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.clamp.is-open .clamp-body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
/* Quiet by default. This control sits next to evidence a reader is trying to
   read, and an accent-coloured bold link beside every long row competes with
   the content it exists to serve. It earns colour on hover, and on keyboard
   focus too · losing the focus cue to gain subtlety would be a bad trade. */
.clamp-more { background: none; border: 0; padding: 0; margin: 0.15rem 0 0;
  color: var(--text-muted); font: 500 0.8rem/1.4 var(--sans); cursor: pointer;
  white-space: nowrap; display: inline-block; transition: color 0.12s ease; }
.clamp-more:hover { color: var(--accent); text-decoration: underline; }
.clamp-more:focus-visible { color: var(--accent); text-decoration: underline; }

/* Signup journey panel · section headings and one block per visit. */
.jr-h { margin: 1rem 0 0.3rem; font: 650 0.72rem/1.4 var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); }
.jr-row { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.jr-row:last-child { border-bottom: 0; }