/* calculatestampduty — hand-written, zero dependencies (ADR-0001/0006).
   Values from specs/design-tokens.json. */

:root {
  --brand-50: #F0F4FA; --brand-100: #DCE7F3; --brand-200: #B8CEE8;
  --brand-300: #8AAED7; --brand-400: #5C8DC4; --brand-500: #3B6FAF;
  --brand-600: #2C5595; --brand-700: #1F3F78; --brand-800: #152C58;
  --brand-900: #0D1C39;

  --bg: #FFFFFF; --bg-subtle: var(--brand-50); --surface: #FFFFFF;
  --text: var(--brand-800); --text-muted: #44567A;
  --border: var(--brand-200); --primary: var(--brand-600);
  --on-primary: #FFFFFF; --ring: var(--brand-500);
  --result-bg: var(--brand-800); --result-text: #FFFFFF; --result-muted: var(--brand-200);
  --hero-bg: linear-gradient(180deg, var(--brand-50) 0%, #FFFFFF 100%);
  --warning-bg: #FFF7E6; --warning-border: #E0A400;
  --insight-accent: #F5A623;
  --positive: #1F6E43;

  --radius-control: 8px; --radius-card: 14px; --radius-chip: 999px;
  --shadow-card: 0 2px 8px rgba(13, 28, 57, 0.14);
  --shadow-lift: 0 10px 30px -12px rgba(13, 28, 57, 0.28);
  --gutter: 16px; --max-w: 1120px; --prose-w: 68ch;

  /* Ad slots: reserved geometry, serving nothing (SA-006 item 9).
     Set --ad-h-* to the real unit height when an ad network is switched on;
     nothing else in the layout has to move. */
  --ad-h-leaderboard: 0px;
  --ad-h-inline: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--brand-900); --bg-subtle: #101F42; --surface: var(--brand-800);
    --text: var(--brand-100); --text-muted: var(--brand-300);
    --border: var(--brand-700); --primary: var(--brand-400);
    --on-primary: var(--brand-900); --ring: var(--brand-300);
    --result-bg: var(--brand-50); --result-text: var(--brand-900); --result-muted: #44567A;
    --hero-bg: linear-gradient(180deg, #101F42 0%, var(--brand-900) 100%);
    --warning-bg: #2A2410;
    --positive: #1F6E43;
  }
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 16px; line-height: 1.55;
  color: var(--text); background: var(--bg);
}

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

a { color: var(--primary); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-head { border-bottom: 1px solid var(--border); background: var(--bg); }
.head-inner { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.wordmark { font-size: 17px; font-weight: 650; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.wordmark span { color: var(--primary); }
.head-tag { font-size: 13.5px; color: var(--text-muted); }
@media (max-width: 900px) { .head-tag { display: none; } }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-control); color: var(--text); font: inherit; font-size: 14.5px;
  font-weight: 600; cursor: pointer;
}
.nav-toggle:hover { background: var(--bg-subtle); }
.nav-toggle .bars { display: inline-block; width: 16px; height: 10px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span { top: 4px; }
.nav-toggle .bars::after { bottom: 0; }

#nav-panel ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
#nav-panel a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px;
  border-radius: var(--radius-control); text-decoration: none; font-size: 14.5px;
  font-weight: 600; color: var(--text-muted);
}
#nav-panel a:hover { background: var(--bg-subtle); color: var(--text); }
#nav-panel a[aria-current="page"] { color: var(--primary); }

@media (min-width: 760px) {
  .nav-toggle { display: none; }
  #nav-panel { margin-left: auto; display: block; }
}
@media (max-width: 759px) {
  .head-inner { flex-wrap: wrap; }
  #nav-panel { flex-basis: 100%; padding-bottom: 8px; }
  #nav-panel ul { flex-direction: column; gap: 2px; }
  #nav-panel a { min-height: 44px; }
  /* Collapsed only when JS is present to reopen it. Hiding via CSS keyed on
     .js (set by an inline script in <head>) rather than the hidden attribute
     applied after load — the latter reflowed the page and cost 0.55 CLS.
     Without JS the links simply stay visible. */
  .js #nav-panel { display: none; }
  .js #nav-panel.open { display: block; }
}

/* ── Mode toggle: the two calculators, above everything (ADR-0007) ───── */
.mode-nav { background: var(--bg); padding: 12px 0 0; }
.mode-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-subtle); border-radius: var(--radius-chip);
  /* Pull back the pill's own padding so the first label's text sits flush with
     the wordmark and the result card below, not 4px inside them. */
  margin-left: -4px;
}
.mode-toggle a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 20px;
  border-radius: var(--radius-chip); text-decoration: none; font-size: 15px;
  font-weight: 600; color: var(--text-muted);
  transition: background-color 130ms ease, color 130ms ease;
}
.mode-toggle a:hover { color: var(--text); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.mode-toggle a[aria-current="page"] {
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 1px 3px rgba(13, 28, 57, 0.18);
}

/* ── Section bands: alternating grounds give the page real sections ──── */
.band { padding: 40px 0; }
.band-tint { background: var(--bg-subtle); }
.band-hero { background: var(--hero-bg); padding: 28px 0 40px; }
.section-h { font-size: clamp(19px, 2.2vw, 24px); font-weight: 650; letter-spacing: -0.01em; }
.section-lead { color: var(--text-muted); margin-top: 6px; max-width: var(--prose-w); }
.section-h + .compare-wrap, .section-h + .tables-grid, .section-h + .faq { margin-top: 18px; }
.section-lead + .compare-wrap, .section-lead + .tables-grid { margin-top: 18px; }
.section-h + .prose-cols { margin-top: 14px; }

/* ── Calculator grid: the number and the controls share the fold on desktop ── */
.calc-grid { display: grid; gap: 20px; }
@media (min-width: 900px) {
  /* Columns are the same height. Worth doing only because the controls column
     is now compact (paired controls, single-row chips) — the card grows by a
     few dozen pixels, not the ~250px void an earlier layout produced. */
  .calc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
  .calc-result { display: flex; flex-direction: column; }
  .calc-result .result { flex: 1; display: flex; flex-direction: column; }
  .calc-result .result .trust { margin-top: auto; padding-top: 16px; }
}

/* ── Result card ────────────────────────────────────────────────────── */
.result {
  background: var(--result-bg); color: var(--result-text);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
  padding: 26px 22px 20px;
  /* Reserves the default render's height, including the "nothing else applies"
     line the default scenario now triggers, so first paint doesn't shift (CLS). */
  min-height: 360px;
}
.result .label {
  font-size: 12.5px; color: var(--result-muted);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.result .figure {
  font-size: clamp(44px, 7vw, 62px); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 8px;
}
.result .for-line { font-size: 14.5px; color: var(--result-muted); margin-top: 8px; }

.result .insight {
  margin-top: 16px; font-size: 14px; line-height: 1.5;
  background: color-mix(in srgb, var(--insight-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--insight-accent) 55%, transparent);
  color: var(--result-text); border-radius: var(--radius-control);
  padding: 11px 13px;
}
.result .insight strong { font-variant-numeric: tabular-nums; }

.result .rows {
  margin-top: 16px; padding-top: 12px; font-size: 14.5px;
  border-top: 1px solid color-mix(in srgb, var(--result-muted) 35%, transparent);
}
.result .row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.result .row .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.result .row.saving .amt { color: #8fd7ae; }
@media (prefers-color-scheme: dark) { .result .row.saving .amt { color: var(--positive); } }
.result .plain-note { font-size: 13.5px; color: var(--result-muted); margin-top: 16px; line-height: 1.5; }
.result .trust { font-size: 12.5px; color: var(--result-muted); margin-top: 14px; line-height: 1.45; }
.result .trust a { color: inherit; }
.result .linkout {
  margin-top: 14px; font-size: 14.5px; border-radius: var(--radius-control); padding: 11px 13px;
  background: color-mix(in srgb, var(--result-muted) 18%, transparent);
}
.result .linkout a { color: inherit; font-weight: 600; }
.result.unavailable .figure { font-size: 24px; line-height: 1.3; font-weight: 650; }

@media (prefers-reduced-motion: no-preference) {
  /* A keyframe animation rather than a transition on .updating: a transition
     needs a rendered "before" frame to animate from, which a class added and
     removed within the same JS task race against — the dip never painted.
     An animation plays its full timeline once triggered regardless of that
     race, as long as the class re-add is preceded by a reflow to restart it. */
  @keyframes figure-pulse { 0% { opacity: 1; } 45% { opacity: 0.55; } 100% { opacity: 1; } }
  .result .figure.pulse { animation: figure-pulse 320ms ease; }
}

/* ── Controls ───────────────────────────────────────────────────────── */
.controls { display: grid; gap: 16px; }
/* Pair related controls across the column so the input side stays roughly as
   tall as the result card beside it, rather than running on below it. */
.ctrl-pair { display: grid; gap: 16px; }
@media (min-width: 560px) { .ctrl-pair { grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: end; } }
/* Checkbox rows align on their first line, not their boxes — one carries a hint. */
.toggles.ctrl-pair { align-items: start; }
fieldset { border: 0; padding: 0; }
legend, .field-label {
  font-size: 13px; font-weight: 650; color: var(--text-muted);
  margin-bottom: 7px; display: block; letter-spacing: 0.02em;
}
.hint { color: var(--text-muted); font-size: 12.5px; display: inline-block; margin-top: 5px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; min-width: 52px; padding: 0 12px; border: 1px solid transparent;
  border-radius: var(--radius-chip); font-size: 15px; cursor: pointer;
  background: var(--bg-subtle); color: var(--text-muted); font-weight: 550;
  transition: background-color 130ms ease, color 130ms ease, transform 130ms ease;
}
.band-tint .chips label { background: var(--surface); }
.chips label:hover { background: color-mix(in srgb, var(--primary) 15%, var(--bg-subtle)); color: var(--text); }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips input:checked + span { color: var(--on-primary); position: relative; z-index: 1; font-weight: 650; }
.chips label:has(input:checked) { background: var(--primary); border-color: var(--primary); }
.chips label:has(input:checked):hover { background: var(--primary); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.chips label.muted { opacity: 0.55; }

.price-row { display: flex; gap: 8px; align-items: stretch; }
.price-row .value-field { flex: 1; min-width: 0; }
.step {
  flex: none; width: 54px; border: 1.5px solid var(--border); background: var(--surface);
  border-radius: var(--radius-control); color: var(--text); font: inherit; font-size: 24px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color 130ms ease, border-color 130ms ease;
  -webkit-tap-highlight-color: transparent;
}
.step:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-color: var(--primary); }
.step:active { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
@media (max-width: 400px) { .step { width: 48px; font-size: 22px; } }

.value-field {
  display: flex; align-items: center; height: 54px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius-control);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.value-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.value-field .cur { padding: 0 2px 0 14px; color: var(--text-muted); font-size: 19px; }
.value-field input {
  border: 0; background: none; color: var(--text); font: inherit; font-size: 22px; font-weight: 650;
  font-variant-numeric: tabular-nums; width: 100%; height: 100%; padding-right: 14px;
  letter-spacing: -0.01em;
}
.value-field input:focus { outline: none; }

.seg {
  display: flex; border: 1px solid var(--border); border-radius: var(--radius-control);
  overflow: hidden; background: var(--surface);
}
.seg label {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 46px; font-size: 14.5px; cursor: pointer; text-align: center; padding: 0 6px;
  transition: background-color 130ms ease;
}
.seg label + label { border-left: 1px solid var(--border); }
.seg label:not(:has(input:checked)):hover { background: var(--bg-subtle); }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--primary); color: var(--on-primary); font-weight: 650; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }

.select {
  width: 100%; height: 46px; padding: 0 12px; font: inherit; font-size: 15px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-control); cursor: pointer;
}
.select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.toggles { display: grid; gap: 12px; }
.toggle { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; margin-top: 2px; }
.toggle .hint { display: block; margin-top: 2px; }

/* ── Notes under the result ─────────────────────────────────────────── */
.notes { margin-top: 14px; display: grid; gap: 8px; }
.note {
  font-size: 14px; color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-control); padding: 10px 13px;
}
.band-hero .note { background: var(--surface); }
.note a { color: var(--primary); }

/* ── Compare-all-states table ───────────────────────────────────────── */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
table.compare { border-collapse: collapse; width: 100%; font-size: 15px; }
table.compare th, table.compare td { text-align: left; padding: 11px 16px; }
table.compare thead th {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 650;
}
table.compare tbody tr + tr td { border-top: 1px solid var(--border); }
table.compare td.amt, table.compare td.rate { font-variant-numeric: tabular-nums; }
table.compare td.amt { font-weight: 650; }
table.compare tr.is-current { background: color-mix(in srgb, var(--primary) 10%, transparent); }
table.compare tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--primary); font-weight: 650; }
.badge {
  display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 650;
  padding: 2px 7px; border-radius: 999px; letter-spacing: 0.03em; vertical-align: 1px;
}
/* Solid pairs, not a translucent tint — a badge can land on the plain table
   background or on the "current row" highlight, and color-mix() over an
   unknown parent background is exactly the kind of thing that quietly fails
   contrast in one context and not the other (found on /car/'s default row,
   which is both "current" and "lowest" at once). Each pair is chosen to meet
   4.5:1 on its own, independent of what is behind it. */
.badge-low { background: #E3F5EA; color: #0F5132; }
.badge-high { background: #FBE4E1; color: #7A160D; }
@media (prefers-color-scheme: dark) {
  .badge-low { background: #103621; color: #8FE0B4; }
  .badge-high { background: #3A1410; color: #FFAA9E; }
}

/* ── Prose + rate tables ────────────────────────────────────────────── */
.prose-cols { max-width: var(--prose-w); display: grid; gap: 12px; }
@media (min-width: 900px) { .prose-cols { max-width: none; grid-template-columns: 1fr 1fr; gap: 28px; } }

.tables-grid { display: grid; gap: 10px; }
@media (min-width: 760px) { .tables-grid { grid-template-columns: 1fr 1fr; } }
details.state-table {
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface); align-self: start;
}
details.state-table summary {
  padding: 12px 14px; font-weight: 650; font-size: 15px; cursor: pointer;
  border-radius: var(--radius-control);
}
details.state-table summary:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
details.state-table[open] summary { border-bottom: 1px solid var(--border); border-radius: var(--radius-control) var(--radius-control) 0 0; }
details.state-table .inner { padding: 12px 14px; overflow-x: auto; }
details.state-table h3.field-label { margin-top: 12px; }
details.state-table h3.field-label:first-child { margin-top: 0; }
table.rates { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.rates th, table.rates td { text-align: left; padding: 5px 12px 5px 0; border-top: 1px solid var(--border); }
table.rates th { color: var(--text-muted); font-weight: 650; border-top: 0; }
.src-line { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { max-width: var(--prose-w); }
.faq dt { font-weight: 650; margin-top: 18px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 5px 0 0; color: var(--text-muted); }
@media (min-width: 900px) {
  .faq { max-width: none; columns: 2; column-gap: 40px; }
  .faq dt { break-after: avoid; }
  .faq dd { break-inside: avoid; margin-bottom: 18px; }
  .faq dt:first-child { margin-top: 0; }
}

/* ── Guides and article pages ───────────────────────────────────────── */
.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.crumbs a { color: var(--text-muted); }
.page-h1 { font-size: clamp(27px, 4.2vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.page-lead { margin-top: 12px; font-size: clamp(16.5px, 1.6vw, 19px); color: var(--text-muted); max-width: 62ch; }
.as-at { margin-top: 12px; font-size: 13px; color: var(--text-muted); }

/* Cap the measure on text only, not on the container — otherwise tables are
   squeezed into the reading column and (where .prose sits on .wrap) the whole
   section centres away from the h1 above it. */
.prose > p, .prose > h2, .prose > h3, .prose > ul, .prose > ol, .prose > .src-line {
  max-width: 78ch;
}
.prose h2.section-h { margin-top: 34px; }
.prose h2.section-h:first-child { margin-top: 0; }
.prose h3 { margin-top: 22px; font-size: 16.5px; font-weight: 650; }
.prose p { margin-top: 10px; }
.prose .src-line { margin-top: 12px; line-height: 1.6; }
.prose .table-scroll { max-width: 1000px; }
.table-scroll {
  margin-top: 16px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
}
table.rates.wide { font-size: 14.5px; }
table.rates.wide th, table.rates.wide td { padding: 10px 16px; vertical-align: top; }
table.rates.wide thead th {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em;
  border-top: 0; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.rates.wide tbody td { border-top: 1px solid var(--border); }
table.rates.wide tbody tr:first-child td { border-top: 0; }

.guide-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.guide-card {
  display: block; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.guide-card:hover { border-color: var(--primary); box-shadow: var(--shadow-card); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .guide-card:hover { transform: none; } }
.guide-card h2 { font-size: 17px; font-weight: 650; line-height: 1.3; }
.guide-card p { margin-top: 8px; font-size: 14.5px; color: var(--text-muted); }
.guide-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 650; color: var(--primary); }

.cta-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.cta {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border-radius: var(--radius-control); background: var(--primary); color: var(--on-primary);
  text-decoration: none; font-weight: 650; font-size: 15px;
  transition: background-color 140ms ease;
}
.cta:hover { background: var(--brand-700); }
.cta-secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--border); }
.cta-secondary:hover { background: var(--surface); border-color: var(--primary); }

/* ── Ad slots: reserved, empty ──────────────────────────────────────── */
.ad-slot { overflow: hidden; }
.ad-leaderboard { height: var(--ad-h-leaderboard); }
.ad-inline { height: var(--ad-h-inline); }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer {
  margin-top: 8px; padding: 28px 0 32px; font-size: 13px; color: var(--text-muted);
  border-top: 1px solid var(--border); background: var(--bg-subtle);
}
footer p { margin-bottom: 8px; max-width: var(--prose-w); }
footer ul { margin: 0 0 10px 18px; padding: 0; columns: 2; column-gap: 28px; }
@media (max-width: 640px) { footer ul { columns: 1; } }
footer li { margin-bottom: 2px; }

/* ── Print ──────────────────────────────────────────────────────────
   Force the light palette regardless of OS theme — a dark card is mostly
   ink on a printed page for no benefit — and drop everything that only
   makes sense on screen: navigation, buttons, hover affordances, ad slots. */
@media print {
  :root {
    --bg: #FFFFFF; --bg-subtle: var(--brand-50); --surface: #FFFFFF;
    --text: var(--brand-800); --text-muted: #44567A; --border: var(--brand-200);
    --primary: var(--brand-600); --on-primary: #FFFFFF;
    --result-bg: var(--brand-800); --result-text: #FFFFFF; --result-muted: var(--brand-200);
  }
  .nav-toggle, #nav-panel, .mode-nav, .step, .ad-slot, footer .cta-row,
  .guide-card .guide-more, details.state-table:not([open]) summary::marker {
    display: none !important;
  }
  .site-head { border-bottom: 1px solid #000; }
  .band { padding: 12px 0; }
  .result { box-shadow: none; border: 1px solid var(--border); break-inside: avoid; }
  .compare-wrap, details.state-table, .guide-card { break-inside: avoid; border-color: #999; }
  a { color: inherit; text-decoration: underline; }
  /* The whole point of this site is the source and date behind each figure —
     make that survive onto paper by printing the URL next to the link. */
  .result .trust a[href]::after, .src-line a[href]::after {
    content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all;
  }
  .reveal-up { opacity: 1 !important; transform: none !important; }
}

/* ── Scroll reveal (pattern borrowed from createaba's global.css) ─────
   Only ever hides content when JS is confirmed running (.js on <html>),
   so a failed module or a crawler never gets an invisible page. */
.js .reveal-up { opacity: 0; transform: translateY(14px); transition: opacity 380ms ease-out, transform 380ms ease-out; }
.js .reveal-up.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-up { opacity: 1; transform: none; transition: none; }
}