/* styles.css — beststateforme.com
 * Visual register: NYT The Upshot. Newsprint-warm paper, editorial serif
 * display, restrained chrome, tabular numerals everywhere. The heatmap is
 * the hero — every other element steps back to let it lead.
 */

:root {
  /* Paper & ink */
  --paper:        #F7F4ED;
  --paper-deep:   #EFEAE0;
  --paper-soft:   #FBF8F1;
  --ink:          #1A1714;
  --ink-soft:     #3D3832;
  --muted:        #6B6356;
  --muted-soft:   #8B8275;
  --rule:         #D6CDB9;
  --rule-soft:    #E5DECB;

  /* Accent — brick red, the one accent in the system */
  --brick:        #B2503C;
  --brick-soft:   #D88A75;
  --brick-pale:   #F1D9CF;

  /* Heatmap palette (mirrored in hero-map.jsx for SVG) */
  --hm-0:  #2C4F5C;
  --hm-9:  #8B3A2B;

  /* Type */
  --serif:  "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:   -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --mono:   "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

.page {
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

/* ── Site header ─────────────────────────────────────────────── */

.site-header {
  border-bottom: 0.5px solid var(--rule);
  background: var(--paper);
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.site-header__mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
}
.site-header__name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-header__tld {
  color: var(--muted);
  font-weight: 400;
}
.site-header__nav {
  display: flex;
  gap: 26px;
  font-size: 13px;
}
.site-header__nav a {
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.site-header__nav a:hover { color: var(--brick); }

/* (former .hero block — replaced by .refine at top + .answer below) */

/* ── Answer (map + ranking strip) ───────────────────────────── */

.answer {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 32px 32px;
}
.answer__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 12px 0 18px;
  border-bottom: 0.5px solid var(--rule);
  flex-wrap: wrap;
}
.answer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 12px;
}
.answer__eyebrow-num {
  background: var(--brick);
  color: var(--paper);
  padding: 1px 6px;
}
.answer__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.answer__title em { font-style: italic; color: var(--brick); font-weight: 400; }
.answer__sub {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 720px;
}
.answer__metric-toggle {
  display: inline-flex;
  border: 0.5px solid var(--ink);
  font-size: 12px;
  white-space: nowrap;
  margin-bottom: 6px;
}
.answer__metric-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  border-right: 0.5px solid var(--ink);
}
.answer__metric-toggle button:last-child { border-right: 0; }
.answer__metric-toggle button.is-active {
  background: var(--ink);
  color: var(--paper);
}
.answer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  padding-top: 24px;
}
@media (max-width: 1080px) {
  .answer__body { grid-template-columns: 1fr; }
}

/* ── Hero map (real US states heatmap) ────────────────────── */

.hero-map {
  display: flex;
  flex-direction: column;
  background: var(--paper-soft);
  border: 0.5px solid var(--rule);
  padding: 18px 18px 14px;
  min-width: 0;
}

.hero-map__caption-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}
.hero-map__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-map__eyebrow-sep { color: var(--muted-soft); }
.hero-map__eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--brick);
  display: inline-block;
}
.hero-map__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
}

.hero-map__svg-wrap {
  position: relative;
  width: 100%;
}

.hero-map__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Hover tooltip */
.hero-map__tip {
  position: absolute;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px 10px;
  font-size: 12px;
  min-width: 200px;
  max-width: 220px;
  box-shadow: 0 8px 32px rgba(26, 23, 20, 0.22);
  z-index: 20;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hero-map__tip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.hero-map__tip-head strong {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}
.hero-map__tip-code {
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: 0.55;
  letter-spacing: 0.06em;
}
.hero-map__tip-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}
.hero-map__tip-unit {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.55;
  margin-left: 4px;
}
.hero-map__tip-delta {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 2px;
}
.hero-map__tip-delta.is-saving { color: #9CCDB5; }
.hero-map__tip-delta.is-costing { color: #E6A088; }
.hero-map__tip-rank {
  font-family: var(--mono);
  font-size: 10.5px;
  margin-top: 4px;
  opacity: 0.65;
  letter-spacing: 0.04em;
}
.hero-map__tip-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(247, 244, 237, 0.15);
  font-size: 10.5px;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

/* Heatmap legend */

.hero-map__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.hero-map__legend-top {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  align-items: center;
}
.hero-map__legend-label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  font-family: var(--mono);
}
.hero-map__legend-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-map__legend-bar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  height: 10px;
  border: 0.5px solid var(--rule);
}
.hero-map__legend-cell { width: 100%; height: 100%; }
.hero-map__legend-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hero-map__legend-foot {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.hero-map__chip { display: inline-flex; align-items: center; gap: 6px; }
.hero-map__chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brick);
  display: inline-block;
}
.hero-map__chip-square {
  width: 10px; height: 10px;
  border: 1.5px solid var(--ink);
  display: inline-block;
}
.hero-map__chip--right {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.hero-map__chip--right em {
  color: var(--muted-soft);
  font-style: italic;
}

/* ── State ranking strip ─────────────────────────────────────── */

.state-strip {
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  padding: 18px 18px 14px;
  font-size: 13px;
}
.state-strip__head { margin-bottom: 12px; }
.state-strip__title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.state-strip__sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.state-strip__section { margin-bottom: 10px; }
.state-strip__section--current {
  padding: 10px 0;
  border-top: 0.5px dashed var(--rule);
  border-bottom: 0.5px dashed var(--rule);
  margin: 12px 0;
}
.state-strip__section--middle {
  padding: 10px 0;
  border-top: 0.5px dashed var(--rule);
  border-bottom: 0.5px dashed var(--rule);
  margin: 12px 0;
  max-height: 360px;
  overflow-y: auto;
}
.state-strip__section-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--rule);
}
.strip-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 0.5px solid var(--rule-soft);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule-soft);
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}
.strip-row:hover { background: var(--paper-deep); }
.strip-row.is-current { background: var(--brick-pale); }
.strip-row.is-selected { background: var(--ink); color: var(--paper); }
.strip-row__rank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.strip-row.is-selected .strip-row__rank { color: var(--paper); opacity: 0.6; }
.strip-row__name { font-size: 13px; }
.strip-row__you {
  color: var(--brick);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.strip-row.is-selected .strip-row__you { color: var(--paper); }
.strip-row__cost {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.strip-row__delta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 78px;
  text-align: right;
}
.strip-row.is-selected .strip-row__delta { color: var(--paper); opacity: 0.7; }

.state-strip__more {
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 0.5px solid var(--ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
}
.state-strip__more:hover { background: var(--ink); color: var(--paper); }

/* ── Hover card (heatmap tooltip-style) ──────────────────────── */

.hover-card {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
  font-size: 12px;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(26, 23, 20, 0.18);
  z-index: 50;
  pointer-events: none;
}
.hover-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.hover-card__head strong {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}
.hover-card__code {
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: 0.6;
  letter-spacing: 0.06em;
}
.hover-card__num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hover-card__unit {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 4px;
}
.hover-card__delta {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.hover-card__delta.is-saving { color: #9CCDB5; }
.hover-card__delta.is-costing { color: #E6A088; }
.hover-card__hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(250, 247, 239, 0.15);
  font-size: 10.5px;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

/* ── State detail panel ──────────────────────────────────────── */

.detail {
  max-width: 1320px;
  margin: 8px auto 32px;
  padding: 0 32px;
}
.detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  border-bottom: 0.5px solid var(--rule);
  padding: 22px 0 18px;
}
.detail__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 8px;
}
.detail__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.detail__total-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.detail__total {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.detail__total-unit {
  font-size: 14px;
  color: var(--muted);
}
.detail__delta {
  font-family: var(--mono);
  font-size: 12px;
  padding: 3px 8px;
  border: 0.5px solid;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}
.detail__delta.is-saving { color: #2C4F5C; border-color: #2C4F5C; background: rgba(44,79,92,.06); }
.detail__delta.is-costing { color: var(--brick); border-color: var(--brick); background: rgba(178,80,60,.06); }

.detail__close {
  appearance: none;
  border: 0.5px solid var(--rule);
  background: transparent;
  width: 32px; height: 32px;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
}
.detail__close:hover { border-color: var(--ink); color: var(--ink); }

.detail__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 24px 0;
}
@media (max-width: 880px) {
  .detail__cols { grid-template-columns: 1fr; }
}
.detail__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--rule);
}

.detail__bars { display: flex; flex-direction: column; gap: 8px; }
.detail__bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.detail__bar-label { color: var(--ink-soft); }
.detail__bar-track {
  position: relative;
  height: 10px;
  background: var(--paper-deep);
  border: 0.5px solid var(--rule);
}
.detail__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink);
  display: block;
}
.detail__bar-val {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.detail__where {
  margin-top: 24px;
  padding: 16px;
  background: var(--paper-soft);
  border-left: 2px solid var(--brick);
}
.detail__where-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brick);
  margin: 0 0 8px;
}
.detail__where-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--ink-soft);
}

.detail__narr {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.detail__factbox {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid var(--rule);
}
.detail__fact {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--rule);
  font-size: 13px;
}
.detail__fact-label { color: var(--muted); }
.detail__fact-val { color: var(--ink-soft); }
.detail__fact-val em { color: var(--muted-soft); font-style: italic; }

.detail__city-alts {
  margin-top: 20px;
  padding: 16px;
  background: var(--paper-soft);
  border: 0.5px solid var(--rule);
}
.detail__city-note { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.detail__city-btn {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  margin-bottom: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.detail__city-btn:hover { border-color: var(--ink); }
.detail__city-btn.is-active {
  border-color: var(--brick);
  box-shadow: inset 0 0 0 1px var(--brick);
  background: var(--paper-soft);
}
.detail__city-name { font-family: var(--serif); font-weight: 600; font-size: 14px; }
.detail__city-note-small { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.detail__city-delta { font-family: var(--serif); font-weight: 600; color: var(--brick); font-variant-numeric: tabular-nums; }

/* ── Refine form (PRIMARY — the entry point) ──────────────── */

.refine {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 32px 24px;
}

.refine__head {
  display: block;
  padding: 8px 0 24px;
  border-bottom: 0;
}
.refine__head-text { max-width: 880px; }
@media (max-width: 980px) {
  .refine__head { padding: 8px 0 16px; }
}

/* ── How this works (editorial explainer above the form) ──── */

.how {
  border-top: 0.5px solid var(--rule);
  padding: 24px 0 0;
  margin-bottom: 24px;
}
.how__head {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 0.5px solid var(--rule);
}
@media (max-width: 720px) {
  .how__head { grid-template-columns: 1fr; gap: 8px; }
}
.how__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 500;
  white-space: nowrap;
}
.how__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 780px;
}
.how__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 0.5px solid var(--rule);
}
@media (max-width: 980px) {
  .how__grid { grid-template-columns: 1fr; }
}
.how__item {
  padding: 22px 24px 24px;
  border-right: 0.5px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.how__item:last-child { border-right: 0; }
.how__item:first-child { padding-left: 0; }
.how__item:last-child  { padding-right: 0; }
@media (max-width: 980px) {
  .how__item {
    border-right: 0;
    border-bottom: 0.5px solid var(--rule);
    padding: 18px 0;
  }
  .how__item:last-child { border-bottom: 0; padding-right: 0; }
}
.how__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.how__h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 4px;
}
.how__body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
.how__body em {
  font-style: italic;
  color: var(--brick);
  font-weight: 500;
}

/* Privacy strip — final emphasized row of the explainer */
.how__privacy {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 24px 20px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.how__privacy::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 3px;
  background: var(--brick);
}
@media (max-width: 720px) {
  .how__privacy { grid-template-columns: 1fr; gap: 10px; padding: 16px 18px 18px; }
}
.how__privacy-icon {
  color: #9CCDB5;
  display: flex;
  align-items: center;
  padding-top: 2px;
}
.how__privacy-text { display: flex; flex-direction: column; gap: 6px; }
.how__privacy-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9CCDB5;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.how__privacy-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9CCDB5;
  box-shadow: 0 0 0 3px rgba(156, 205, 181, 0.18);
  display: inline-block;
}
.how__privacy-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  color: rgba(247, 244, 237, 0.78);
}
.how__privacy-body strong {
  color: var(--paper);
  font-weight: 600;
}
.how__privacy-body em {
  font-style: italic;
  color: #E0B891;
  font-weight: 500;
}

.refine__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 12px;
}
.refine__eyebrow-num {
  background: var(--brick);
  color: var(--paper);
  padding: 1px 6px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.refine__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.refine__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brick);
}
.refine__sub {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 580px;
}
.refine__sub em { font-style: italic; }

/* Topline summary on right side of header */
.refine__topline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 0;
  border-left: 0.5px solid var(--rule);
  padding-left: 28px;
}
@media (max-width: 980px) {
  .refine__topline { border-left: 0; padding-left: 0; border-top: 0.5px solid var(--rule); padding-top: 16px; }
}
.refine__topline-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 0.5px dashed var(--rule-soft);
}
.refine__topline-row:last-child { border-bottom: 0; }
.refine__topline-row--accent { padding-top: 12px; }
.refine__topline-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.refine__topline-val {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.refine__topline-val strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.refine__topline-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.refine__topline-num--brick {
  color: var(--brick);
  font-size: 22px;
}

/* Preset chips */
.refine__presets {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0 4px;
  flex-wrap: wrap;
}
.refine__presets-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.refine__presets-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.refine__preset {
  appearance: none;
  background: var(--paper-soft);
  border: 0.5px solid var(--rule);
  padding: 8px 14px 9px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  transition: border-color 0.12s, background 0.12s;
}
.refine__preset:hover {
  border-color: var(--ink-soft);
  background: var(--paper);
}
.refine__preset.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.refine__preset-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.refine__preset-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.refine__preset.is-active .refine__preset-sub { color: rgba(247,244,237,.6); }

.refine__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding: 24px 0 8px;
}
@media (max-width: 980px) {
  .refine__grid { grid-template-columns: 1fr; gap: 28px; }
}

.rf-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rf-group__label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  padding: 0 0 8px;
  border-bottom: 0.5px solid var(--ink);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.rf-group__label > span:first-child {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.rf-group__hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
}

.rf-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  align-items: center;
  gap: 14px;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 0.5px solid var(--rule-soft);
}
.rf-field__label {
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--serif);
}
.rf-field__sub {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}
.rf-field__note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.rf-field__note--warn { color: var(--brick); }

.rf-field input,
.rf-field select {
  font: inherit;
  font-size: 13.5px;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
  text-align: right;
}
.rf-field select {
  text-align: left;
  background: var(--paper-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%236B6356'/></svg>") no-repeat right 8px center;
  appearance: none;
  padding-right: 22px;
}
.rf-field input:focus,
.rf-field select:focus {
  outline: 0;
  border-color: var(--ink);
  background: var(--paper);
}

.rf-money {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  width: 100%;
}
.rf-money__prefix {
  font-family: var(--serif);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  line-height: 1;
}
.rf-money input {
  border: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
  text-align: right;
}

.rf-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
}
.rf-trio input { font-size: 12px; padding: 5px 6px; }

.refine__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 4px;
  border-top: 0.5px solid var(--rule);
  margin-top: 16px;
  flex-wrap: wrap;
}
.refine__live {
  font-size: 12.5px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
}
.refine__dot {
  width: 7px; height: 7px;
  background: var(--brick);
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.refine__jump {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0.5px solid var(--ink);
  padding: 2px 0;
}
.refine__jump:hover { color: var(--brick); border-color: var(--brick); }

.refine__local {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.refine__local-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6FA889;
  box-shadow: 0 0 0 2px rgba(111, 168, 137, 0.18);
  display: inline-block;
}

/* ── Category grid (per-tax heatmap) ─────────────────────────── */

.cat-grid {
  max-width: 1320px;
  margin: 24px auto 0;
  padding: 0 32px;
}
.cat-grid__head {
  border-top: 1px solid var(--ink);
  padding: 24px 0 16px;
  border-bottom: 0.5px solid var(--rule);
}
.cat-grid__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.cat-grid__sub {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 720px;
}

.cat-grid__scroll {
  overflow-x: auto;
  padding: 16px 0;
}
.cat-grid__table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1100px;
  font-size: 11px;
}
.cat-grid__row-label {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 6px 12px 6px 0;
  white-space: nowrap;
  font-family: var(--serif);
  position: sticky;
  left: 0;
  background: var(--paper);
  z-index: 1;
}
.cat-grid__row-label--total {
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--ink);
}
.cat-grid__col-hd {
  padding: 4px 0 8px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: center;
  vertical-align: bottom;
  border-bottom: 0.5px solid var(--rule);
}
.cat-grid__col-hd.is-current .cat-grid__col-code {
  color: var(--brick);
  font-weight: 600;
  border-bottom: 2px solid var(--brick);
  padding-bottom: 2px;
}
.cat-grid__col-hd.is-selected .cat-grid__col-code {
  color: var(--paper);
  background: var(--ink);
  padding: 2px 4px;
}
.cat-grid__cell {
  width: 22px;
  min-width: 22px;
  height: 22px;
  cursor: pointer;
  border: 0.5px solid rgba(26,23,20,.04);
}
.cat-grid__cell:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
.cat-grid__total-row { border-top: 1px solid var(--ink); }
.cat-grid__total-cell {
  text-align: center;
  vertical-align: bottom;
  padding: 8px 0 4px;
  border-top: 1px solid var(--ink);
  height: 64px;
  min-width: 22px;
  width: 22px;
}
.cat-grid__total-num {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 2px 0;
}
.cat-grid__row-unit {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: none;
  font-weight: 400;
  margin-top: 2px;
}
.cat-grid__row-label--total {
  vertical-align: bottom;
  padding-bottom: 6px !important;
}
.cat-grid__foot {
  padding: 8px 0 24px;
  border-top: 0.5px solid var(--rule);
}
.cat-grid__src {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ── Compare ─────────────────────────────────────────────────── */

.compare {
  max-width: 1320px;
  margin: 24px auto 0;
  padding: 0 32px;
}
.compare__head {
  border-top: 1px solid var(--ink);
  padding: 24px 0 16px;
}
.compare__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.compare__sub {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 720px;
}
.compare__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--rule);
}
.compare__pick-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-right: 4px;
}
.compare__chip {
  appearance: none;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compare__chip-x { opacity: 0.6; font-size: 11px; }
.compare__add {
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 0.5px dashed var(--ink);
  background: transparent;
  cursor: pointer;
  color: var(--ink);
}

.compare__table-wrap { overflow-x: auto; padding: 16px 0 24px; }
.compare__table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.compare__table th {
  text-align: left;
  font-weight: 500;
  vertical-align: bottom;
  padding: 12px 14px 14px;
  border-bottom: 0.5px solid var(--rule);
}
.compare__col-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}
.compare__col-total {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.compare__col-delta {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.compare__col-delta.is-saving { color: #2C4F5C; }
.compare__col-delta.is-costing { color: var(--brick); }
.compare__row-label {
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  padding-left: 0 !important;
}
.compare__cell {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--serif);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-bottom: 0.5px solid var(--rule-soft);
}
/* Best (cheapest) cell in each row. Light-blue tint pulled from the cool
   end of the heatmap palette; red is reserved for is-costing (worse). */
.compare__cell.is-best {
  color: #2C4F5C;
  font-weight: 700;
  background: rgba(143, 175, 196, 0.38);
}

/* ── Explainer ───────────────────────────────────────────────── */

.explainer {
  background: var(--paper-deep);
  margin-top: 32px;
  padding: 48px 32px;
}
.explainer__inner {
  max-width: 1320px;
  margin: 0 auto;
}
.explainer__h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  max-width: 720px;
}
.explainer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 880px) {
  .explainer__cols { grid-template-columns: 1fr; gap: 32px; }
}
.explainer__col-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brick);
  margin-bottom: 12px;
}
.explainer__col h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
  min-height: 3.6em; /* equalise heights across 3 cols so bodies align */
  display: block;
}
.explainer__col p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.explainer__col p em { font-style: italic; }

/* ── FAQ ─────────────────────────────────────────────────────── */

.faq {
  padding: 56px 32px 32px;
}
.faq__inner {
  max-width: 920px;
  margin: 0 auto;
}
.faq__h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.faq__list { margin: 0; padding: 0; }
.faq__item {
  border-top: 0.5px solid var(--rule);
  padding: 20px 0;
}
.faq__item:last-child { border-bottom: 0.5px solid var(--rule); }
.faq__q {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--ink);
}
.faq__a {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  padding-left: 0;
}

/* ── Sources (Methodology) ──────────────────────────────────── */

.sources {
  background: var(--paper-deep);
  padding: 56px 32px 48px;
  border-top: 0.5px solid var(--rule);
}
.sources__inner {
  max-width: 1320px;
  margin: 0 auto;
}
.sources__head {
  max-width: 720px;
  margin-bottom: 32px;
}
.sources__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sources__eyebrow-num {
  background: var(--brick);
  color: var(--paper);
  padding: 2px 6px;
  letter-spacing: 0.06em;
}
.sources__h {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 12px;
}
.sources__sub {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}
.sources__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
  border-top: 0.5px solid var(--rule);
  padding-top: 24px;
}
.sources__col-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-weight: 500;
}
.sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sources__item {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.45;
}
.sources__item a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0.5px solid var(--rule);
  padding-bottom: 1px;
}
.sources__item a:hover { color: var(--brick); border-color: var(--brick); }
.sources__item > span { color: var(--muted); }
.sources__arrow {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-left: 2px;
}
.sources__foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 0.5px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 72ch;
}
@media (max-width: 900px) {
  .sources__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sources__grid { grid-template-columns: 1fr; }
  .sources__h { font-size: 26px; }
}

/* ── Ads ─────────────────────────────────────────────────────── */

.ad-rail {
  display: flex;
  justify-content: center;
  padding: 20px 32px;
}
.ad-rail--top { padding-top: 8px; padding-bottom: 4px; }
.ad-rail--inline {
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  margin: 20px auto;
  max-width: 1320px;
}

/* Live ad slot — fixed min-height reserves the box (CLS), but the slot
   renders nothing visible until AdSense actually fills it (data-ad-status
   gates the "Advertisement" label). Per docs/ad_slots.md "Unfilled slot
   behavior." */
.ad-slot {
  display: block;
  position: relative;
  width: 100%;
  min-width: 200px;
}
.ad-slot--top-banner    { max-width: 728px; min-height: 90px;  margin: 0 auto; }
.ad-slot--pre-result    { max-width: 300px; min-height: 250px; margin: 0 auto; }
.ad-slot--mid-content   { max-width: 728px; min-height: 90px;  margin: 0 auto; }
.ad-slot--pre-faq       { max-width: 728px; min-height: 90px;  margin: 0 auto; }
.ad-slot--sidebar       { max-width: 300px; min-height: 600px; margin: 0 auto; }
.ad-slot--mobile-sticky { max-width: 320px; min-height: 50px;  margin: 0 auto; }

.ad-slot-label {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: 4px;
}
.ad-slot:has(ins[data-ad-status="filled"]) .ad-slot-label { display: block; }
.ad-slot ins[data-ad-status="unfilled"] { display: none; }

.ad-mobile-anchor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 6px;
  background: var(--paper);
  border-top: 0.5px solid var(--rule);
  z-index: 40;
  display: none; /* shown on narrow viewports */
}
@media (max-width: 720px) {
  .ad-mobile-anchor { display: flex; }
}

/* ── Footer ──────────────────────────────────────────────────── */

.site-footer {
  background: var(--paper-deep);
  margin-top: 48px;
  padding: 48px 32px 32px;
}
.site-footer__cols {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 720px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: 32px; }
}
.site-footer__col--brand { max-width: 320px; }
.site-footer__mark {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
}
.site-footer__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 8px;
}
.site-footer__tld { color: var(--muted); font-weight: 400; }
.site-footer__tag {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.site-footer__h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 6px 0 14px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--rule);
}
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li { margin-bottom: 8px; }
.site-footer__links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 0.5px dotted var(--muted-soft);
  padding-bottom: 1px;
}
.site-footer__links a:hover { color: var(--brick); border-color: var(--brick); }

.site-footer__rule {
  max-width: 1320px;
  margin: 32px auto 24px;
  border: 0;
  border-top: 0.5px solid var(--rule);
}
.site-footer__legal {
  max-width: 1320px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-family: var(--serif);
}
.site-footer__legal strong { color: var(--ink); }

.site-footer__bottom {
  max-width: 1320px;
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  gap: 16px;
}
.site-footer__privacy {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 0.5px dotted var(--muted);
  padding: 0 0 1px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.site-footer__privacy:hover { color: var(--brick); border-color: var(--brick); }
.site-footer__updated {
  max-width: 1320px;
  margin: 16px auto 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted-soft);
  letter-spacing: 0.02em;
}

/* ── Privacy modal ──────────────────────────────────────────── */

.pm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pm-modal {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.pm-modal--narrow { max-width: 520px; }
.pm-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid var(--rule);
}
.pm-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  margin: 0;
}
.pm-x {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}
.pm-body {
  padding: 20px 24px;
  overflow-y: auto;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pm-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  margin: 20px 0 8px;
  color: var(--ink);
}
.pm-body p, .pm-body ul { margin: 0 0 12px; }
.pm-body ul { padding-left: 18px; }
.pm-body li { margin-bottom: 6px; }
.pm-lead { font-size: 15.5px; }
.pm-lead strong { color: var(--ink); }
.pm-stamp {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 24px !important;
}
.pm-foot {
  padding: 14px 24px;
  border-top: 0.5px solid var(--rule);
  text-align: right;
}
.pm-close-btn {
  appearance: none;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 9px 18px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ── Small responsive guards ─────────────────────────────────── */

@media (max-width: 720px) {
  .hero { padding: 24px 20px; }
  .hero__topline { flex-direction: column; }
  .hero__topline-item {
    border-right: 0;
    border-bottom: 0.5px solid var(--rule);
    padding: 10px 0;
  }
  .hero__topline-item:last-child { border-bottom: 0; }
  .site-header__nav { display: none; }
  .detail { padding: 0 20px; }
  .refine { padding: 0 20px; }
  .cat-grid { padding: 0 20px; }
  .compare { padding: 0 20px; }
}

/* ============================================================ */
/* v3 additions — scenarios + new field types + state-detail
/* ============================================================ */

/* ── Scenario tab rail ─────────────────────────────────────── */

.sc-tabs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 20px;
  align-items: stretch;
  padding: 20px 0 16px;
  border-bottom: 0.5px solid var(--rule);
}
@media (max-width: 980px) {
  .sc-tabs { grid-template-columns: 1fr; gap: 12px; }
}
.sc-tabs__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
  white-space: nowrap;
}
.sc-tabs__row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: stretch;
  border-left: 0.5px solid var(--rule);
}
.sc-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 0.5px solid var(--rule);
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 8px 18px 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sc-tab:hover { background: var(--paper-soft); color: var(--ink); }
.sc-tab.is-active {
  background: var(--paper-soft);
  color: var(--ink);
  border-bottom-color: var(--brick);
}
.sc-tab.is-current::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--brick);
  opacity: 0.35;
}
.sc-tab.is-active.is-current::before { opacity: 1; }
.sc-tab__label { display: flex; flex-direction: column; gap: 2px; }
.sc-tab__badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 500;
}
.sc-tab__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: inherit;
  line-height: 1.2;
}
.sc-tab__sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sc-tab.is-active .sc-tab__sub { color: var(--ink-soft); }
.sc-tab__num {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-left: 2px;
}

.sc-tabs__actions { display: flex; align-items: center; gap: 6px; align-self: center; }
.sc-action {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--rule);
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sc-action:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-soft);
}
.sc-action__glyph { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.sc-action--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.sc-action--primary:hover {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--paper);
}

/* ── Scenario meta bar (rename + current-life toggle + delete) ─ */

.sc-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--rule);
}
@media (max-width: 980px) {
  .sc-meta { grid-template-columns: 1fr; gap: 16px; }
}
.sc-meta__name { display: flex; flex-direction: column; gap: 4px; }
.sc-meta__name-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc-meta__name-input {
  font: inherit;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule);
  padding: 4px 0 6px;
  width: 100%;
  border-radius: 0;
}
.sc-meta__name-input:focus { outline: 0; border-bottom-color: var(--brick); }

.sc-meta__toggles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sc-toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: var(--ink-soft);
  position: relative;
}
.sc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sc-toggle__box {
  width: 16px;
  height: 16px;
  border: 0.5px solid var(--ink);
  background: var(--paper);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.12s;
}
.sc-toggle input:checked + .sc-toggle__box {
  background: var(--brick);
  border-color: var(--brick);
}
.sc-toggle input:checked + .sc-toggle__box::after {
  content: "✓";
  position: absolute;
  top: -3px;
  left: 2px;
  font-size: 14px;
  color: var(--paper);
  font-weight: 600;
}
.sc-toggle__text { display: flex; flex-direction: column; gap: 1px; font-size: 13px; font-family: var(--serif); }
.sc-toggle__text strong { color: var(--ink); font-weight: 600; }
.sc-toggle__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
}
.sc-meta__delete {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 11.5px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 0.5px solid transparent;
  white-space: nowrap;
}
.sc-meta__delete:hover:not(:disabled) {
  color: var(--brick);
  border-bottom-color: var(--brick);
}
.sc-meta__delete:disabled { opacity: 0.4; cursor: not-allowed; }

/* Topline hint row + brick num override */
.refine__topline-row--hint { border-bottom: 0 !important; padding-top: 6px !important; }
.refine__topline-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.refine__topline-label em { font-style: italic; color: var(--brick); font-weight: 500; }
.refine__topline-num--brick { font-size: 17px !important; line-height: 1.2; }

/* ── Coverage radio (segmented control) ────────────────────── */

.rf-coverage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  width: 100%;
}
@media (max-width: 1240px) {
  .rf-coverage { grid-template-columns: repeat(3, 1fr); }
  .rf-coverage__opt:nth-child(n+4) { border-top: 0.5px solid var(--rule); }
}
.rf-coverage__opt {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 0.5px solid var(--rule);
  font: inherit;
  padding: 7px 6px 8px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  min-width: 0;
}
.rf-coverage__opt:last-child { border-right: 0; }
.rf-coverage__opt:hover { background: var(--paper); color: var(--ink); }
.rf-coverage__opt.is-active { background: var(--ink); color: var(--paper); }
.rf-coverage__l {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.rf-coverage__s {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.15;
}
.rf-coverage__opt.is-active .rf-coverage__s { color: rgba(247,244,237,.6); }

/* When the coverage radio is the field value, give it the full row width */
.rf-field:has(.rf-coverage) {
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
  padding-top: 6px;
}
.rf-field:has(.rf-coverage) .rf-field__label { font-size: 13px; padding-bottom: 2px; }

/* Disabled fields */
.rf-field.is-disabled { opacity: 0.5; }
.rf-money.is-disabled { background: transparent; }
.rf-money.is-disabled input { color: var(--muted-soft); }

/* ── Add-line (Tobacco) ────────────────────────────────────── */

.rf-add-line {
  appearance: none;
  background: transparent;
  border: 0.5px dashed var(--rule);
  padding: 8px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  margin-top: 4px;
}
.rf-add-line:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-soft); }
.rf-add-line__hint {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted-soft);
}

.rf-tobacco {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 4px;
  width: 100%;
  align-items: center;
}
.rf-tobacco input {
  font: inherit;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
  text-align: right;
}
.rf-tobacco__hide {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
}
.rf-tobacco__hide:hover { color: var(--brick); }

/* ── Spending field smart-input components ─────────────────── */

.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: baseline;
}
.tip__icon {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--muted);
  color: var(--muted);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 9.5px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  cursor: help;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tip__icon:hover, .tip__icon:focus {
  color: var(--brick);
  border-color: var(--brick);
  outline: none;
}
.tip__body {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  padding: 10px 12px 11px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  box-shadow: 0 8px 20px -6px rgba(34, 30, 26, 0.4);
}
.tip__body em {
  color: #E0B891;
  font-style: italic;
  font-weight: 500;
}
.tip__body::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.tip:hover .tip__body, .tip__icon:focus + .tip__body {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Mode toggle (direct vs. estimator) */

.rf-mode {
  display: inline-flex;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  width: 100%;
  margin-bottom: 6px;
}
.rf-mode__opt {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 0.5px solid var(--rule);
  padding: 5px 10px 6px;
  font: inherit;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--ink-soft);
  flex: 1;
  text-align: center;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.rf-mode__opt:last-child { border-right: 0; }
.rf-mode__opt:hover { color: var(--ink); }
.rf-mode__opt.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* Generic number input used by smart fields */

.rf-num {
  font: inherit;
  font-family: var(--serif);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
  text-align: right;
}
.rf-num--center { text-align: center; }

.rf-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* Generic calculator block (used by gasoline) */

.rf-calc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 0.5px solid var(--rule);
  padding: 8px 10px;
  background: var(--paper-soft);
}
.rf-calc__row {
  display: grid;
  grid-template-columns: 1fr 92px;
  align-items: center;
  gap: 8px;
}
.rf-calc__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.rf-calc__out {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brick);
  letter-spacing: 0.02em;
  border-top: 0.5px dashed var(--rule);
  padding-top: 6px;
  margin-top: 2px;
  text-align: right;
}
.rf-calc__out strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Alcohol (gated optional block) */

.rf-alcohol {
  grid-column: 1 / -1;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rf-alcohol__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.rf-alcohol__head-l {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rf-alcohol__soft {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--brick);
  letter-spacing: -0.005em;
}
.rf-alcohol__hint {
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.rf-alcohol__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rf-alcohol__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rf-alcohol__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rf-alcohol__lbl em {
  color: var(--muted);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.rf-alcohol__unit {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}
.rf-alcohol__out {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  border-top: 0.5px dashed var(--rule);
  padding-top: 8px;
  margin-top: 2px;
}
.rf-alcohol__out strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Energy (electricity + natural gas, with shared estimator) */

.rf-energy {
  grid-column: 1 / -1;
  border: 0.5px solid var(--rule);
  background: var(--paper-soft);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-energy__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rf-energy__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.rf-energy__hint {
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.rf-energy__hint em {
  font-style: italic;
  color: var(--brick);
}
.rf-energy__direct,
.rf-energy__calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rf-energy__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rf-energy__cell--climate {
  grid-column: 1 / -1;
}
.rf-energy__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rf-energy__unit {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
}
.rf-energy__out {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  border-top: 0.5px dashed var(--rule);
  padding-top: 8px;
  margin-top: 2px;
  display: flex;
  gap: 6px;
}
.rf-energy__out strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Heating fuel selector */
.rf-fuel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.rf-fuel__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rf-fuel__opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 0.5px solid var(--rule);
  background: var(--paper);
}
.rf-fuel__opt {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 0.5px solid var(--rule);
  padding: 8px 6px;
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.rf-fuel__opt:last-child { border-right: 0; }
.rf-fuel__opt:hover { background: var(--paper-soft); color: var(--ink); }
.rf-fuel__opt.is-active {
  background: var(--ink);
  color: var(--paper);
}
.rf-energy__note {
  color: var(--muted);
  font-style: italic;
}

/* Climate picker (3-way) */
.rf-climate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 0.5px solid var(--rule);
  background: var(--paper);
}
.rf-climate__opt {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 0.5px solid var(--rule);
  padding: 6px 8px 7px;
  font: inherit;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
}
.rf-climate__opt:last-child { border-right: 0; }
.rf-climate__opt:hover { background: var(--paper-soft); color: var(--ink); }
.rf-climate__opt.is-active {
  background: var(--ink);
  color: var(--paper);
}
.rf-climate__l {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.1;
}
.rf-climate__s {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.rf-climate__opt.is-active .rf-climate__s { color: rgba(247,244,237,.55); }

.detail__eyebrow-sep { color: var(--muted-soft); margin: 0 4px; }

.detail__bar-group {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 0 4px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 4px;
}
.detail__bar-group:first-child { padding-top: 0; }
.detail__bar-fill--tax  { background: var(--ink); }
.detail__bar-fill--ins  { background: var(--brick); }
.detail__bar-fill--util { background: var(--muted); }

/* Tax quirks — "what to know" */
.detail__quirks {
  margin-top: 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--ink);
}
.detail__quirks-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.detail__quirks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail__quirk {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px 14px;
  background: var(--paper-soft);
  border-left: 2px solid var(--ink);
}
.detail__quirk-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brick);
}
.detail__quirk-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Senior / homestead exemption */
.detail__senior {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(178, 80, 60, 0.06);
  border-left: 2px solid var(--brick);
}
.detail__senior.is-future {
  background: var(--paper-soft);
  border-left-color: var(--muted);
}
.detail__senior-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.detail__senior-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 500;
}
.detail__senior.is-future .detail__senior-tag { color: var(--ink-soft); }
.detail__senior-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.detail__senior-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* Estate / inheritance sidebar callout */
.detail__estate {
  margin-top: 20px;
  padding: 16px;
  background: var(--paper-deep);
  border: 0.5px solid var(--rule);
}
.detail__estate-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--rule);
}
.detail__estate-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 500;
}
.detail__estate-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.detail__estate-foot {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* ── Onboarding wizard (shown when no scenarios exist) ───── */

.wiz {
  border-bottom: 1px solid var(--ink);
  padding: 32px 0 48px;
  margin-bottom: 0;
}
.wiz__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .wiz__inner { padding: 0 20px; }
}
.wiz__head {
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 28px;
}
.wiz__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 14px;
  font-weight: 500;
}
.wiz__eyebrow-num {
  background: var(--brick);
  color: var(--paper);
  padding: 1px 6px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.wiz__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 880px;
}
.wiz__sub {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 720px;
  text-wrap: pretty;
}
.wiz__sub em {
  font-style: italic;
  color: var(--brick);
  font-weight: 500;
}

/* Choice cards (step 1) */

.wiz__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 0.5px solid var(--rule);
}
@media (max-width: 880px) {
  .wiz__choices { grid-template-columns: 1fr; }
}
.wiz__card {
  appearance: none;
  background: var(--paper-soft);
  border: 0;
  border-right: 0.5px solid var(--rule);
  padding: 28px 28px 26px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-width: 0;
  transition: background 0.15s;
}
.wiz__card:last-child { border-right: 0; }
@media (max-width: 880px) {
  .wiz__card { border-right: 0; border-bottom: 0.5px solid var(--rule); }
  .wiz__card:last-child { border-bottom: 0; }
}
.wiz__card:hover { background: var(--paper); }
.wiz__card--primary {
  background: var(--ink);
  color: var(--paper);
}
.wiz__card--primary::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brick);
}
.wiz__card--primary:hover { background: #1a1612; }
.wiz__card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.wiz__card--primary .wiz__card-num { color: #9CCDB5; }
.wiz__card-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 4px;
  color: inherit;
}
.wiz__card-body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  flex: 1;
  text-wrap: pretty;
}
.wiz__card-body em {
  font-style: italic;
  color: var(--brick);
  font-weight: 500;
}
.wiz__card--primary .wiz__card-body { color: rgba(247,244,237,.8); }
.wiz__card--primary .wiz__card-body em { color: #E0B891; }
.wiz__card-go {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 0.5px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 500;
}
.wiz__card--primary .wiz__card-go {
  border-top-color: rgba(247,244,237,.18);
  color: #E0B891;
}
.wiz__card-go span:not(.wiz__card-arrow) {
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
}
.wiz__card--primary .wiz__card-go span:not(.wiz__card-arrow) {
  color: rgba(247,244,237,.5);
}
.wiz__card-arrow {
  margin-left: auto;
  font-size: 16px;
}

/* Step 2 — state picker */

.wiz__form {
  background: var(--paper-soft);
  border: 0.5px solid var(--rule);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.wiz__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wiz__field-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.wiz__state-select {
  font: inherit;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  background: var(--paper);
  border: 0.5px solid var(--ink);
  padding: 10px 14px;
  color: var(--ink);
  border-radius: 0;
}
.wiz__field-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.wiz__field-hint em {
  color: var(--brick);
  font-style: italic;
}
.wiz__actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 0.5px solid var(--rule);
  margin-top: 4px;
}
.wiz__btn-primary, .wiz__btn-secondary {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--rule);
  padding: 10px 18px;
  font: inherit;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wiz__btn-secondary:hover { color: var(--ink); border-color: var(--ink); }
.wiz__btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.wiz__btn-primary:hover { background: var(--brick); border-color: var(--brick); }

/* Step 3 — followup chips */

.wiz__followup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 0.5px solid var(--rule);
}
@media (max-width: 980px) {
  .wiz__followup-grid { grid-template-columns: 1fr; }
}
.wiz__chip {
  appearance: none;
  background: var(--paper-soft);
  border: 0;
  border-right: 0.5px solid var(--rule);
  padding: 22px 22px 24px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: background 0.15s;
}
.wiz__chip:last-child { border-right: 0; }
@media (max-width: 980px) {
  .wiz__chip { border-right: 0; border-bottom: 0.5px solid var(--rule); }
  .wiz__chip:last-child { border-bottom: 0; }
}
.wiz__chip:hover { background: var(--paper); }
.wiz__chip--primary {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.wiz__chip--primary::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brick);
}
.wiz__chip--primary:hover { background: #1a1612; }
.wiz__chip-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: inherit;
  line-height: 1.2;
}
.wiz__chip-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.wiz__chip--primary .wiz__chip-body { color: rgba(247,244,237,.75); }

/* Wizard footer */

.wiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 0.5px solid var(--rule);
  flex-wrap: wrap;
}
.wiz__foot-btn {
  appearance: none;
  background: transparent;
  border: 0.5px dashed var(--rule);
  padding: 10px 16px;
  font: inherit;
  font-family: var(--serif);
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
}
.wiz__foot-btn:hover { border-color: var(--ink); color: var(--ink); }
.wiz__foot-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.wiz__foot-priv {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wiz__foot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6FA889;
  box-shadow: 0 0 0 2px rgba(111, 168, 137, 0.18);
}

/* Future-tab badge (smaller, more muted than current-life) */
.sc-tab__badge--future {
  color: var(--muted);
}

/* New "Set baseline" button — green-toned to distinguish from + New */
.sc-action--baseline {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}
.sc-action--baseline:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.sc-action--baseline .sc-action__glyph {
  color: var(--brick);
  font-size: 9px;
}
.sc-action--baseline:hover .sc-action__glyph {
  color: #E0B891;
}

/* ── Confirm-delete modal ─────────────────────────────────── */

.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(34, 30, 26, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  animation: confirmFade 0.16s ease-out;
}
@keyframes confirmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.confirm {
  background: var(--paper);
  max-width: 460px;
  width: 100%;
  padding: 24px 28px 22px;
  border-top: 3px solid var(--brick);
  box-shadow: 0 30px 60px -10px rgba(34, 30, 26, 0.35),
              0 8px 20px -8px rgba(34, 30, 26, 0.2);
  font-family: var(--serif);
  animation: confirmRise 0.18s ease-out;
}
@keyframes confirmRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.confirm__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 500;
  margin-bottom: 8px;
}
.confirm__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}
.confirm__title em {
  font-style: italic;
  color: var(--brick);
}
.confirm__body {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.confirm__warn {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--paper-deep);
  border-left: 2px solid var(--brick);
}
.confirm__warn strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brick);
  display: inline;
  margin-right: 4px;
  font-weight: 500;
}
.confirm__warn em {
  font-style: italic;
  font-weight: 500;
}
.confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid var(--rule);
}
.confirm__btn {
  appearance: none;
  background: transparent;
  border: 0.5px solid var(--rule);
  padding: 9px 18px;
  font: inherit;
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.confirm__btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.confirm__btn--destructive {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--paper);
}
.confirm__btn--destructive:hover {
  background: #8d3e2d;
  border-color: #8d3e2d;
  color: var(--paper);
}
.confirm__btn--destructive:focus {
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}

/* ── Topline band (placed after the pre-result ad) ────────── */

.topline-band {
  border-top: 1px solid var(--ink);
  border-bottom: 0.5px solid var(--rule);
  background: var(--paper-soft);
}
.topline-band__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 32px 24px;
}
.topline-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 14px;
}
.topline-band__eyebrow-num {
  background: var(--brick);
  color: var(--paper);
  padding: 1px 6px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.topline-band__eyebrow em {
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
}
.topline-band .refine__topline {
  border-left: 0;
  padding: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.topline-band .refine__topline-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 24px 14px 0;
  border-right: 0.5px solid var(--rule);
  border-bottom: 0;
}
.topline-band .refine__topline-row:last-child { border-right: 0; }
.topline-band .refine__topline-row--accent {
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 0.5px solid var(--rule);
  margin-top: 6px;
  padding-top: 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}
.topline-band .refine__topline-row--hint {
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 0.5px solid var(--rule);
  margin-top: 6px;
  padding-top: 12px !important;
}
.topline-band .refine__topline-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.topline-band .refine__topline-val {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.topline-band .refine__topline-val strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.topline-band .refine__topline-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
}
.topline-band .refine__topline-num--brick {
  color: var(--brick);
  font-weight: 600;
  font-size: 22px !important;
}
@media (max-width: 880px) {
  .topline-band .refine__topline { grid-template-columns: 1fr; }
  .topline-band .refine__topline-row {
    border-right: 0;
    border-bottom: 0.5px solid var(--rule);
    padding: 12px 0;
  }
}