/* XactInsure ACA subsidy calculator — the Round 5 design system.
   The palette is XactInsure's and nothing else: navy #100F58, green #5DB279, cream #FFFAEB.
   No gradients, no glass, no amber/orange/yellow, no purple, no emoji. Depth is layered
   shadow and real surface contrast. Mono is for figures only — never a label costume.
   The system is documented in DESIGN.md; if the two disagree, this file is the truth. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/aca/static/fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/aca/static/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/aca/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
  font-style: normal;
}

:root {
  --navy: #100F58;
  --green: #5DB279;
  --green-dark: #2F7A4E;
  --cream: #FFFAEB;
  --sheet: #FFFDF6;
  --inset: #FFF8E2;
  --ink-70: #3A3A72;
  --ink-55: #5A5A86;
  --line: #E4DCC0;
  --line-strong: #CFC4A2;
  --navy-line: rgba(16, 15, 88, .14);
  --mint-tint: rgba(93, 178, 121, .16);
  --error: #96322C;

  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 560px;
  --gutter: 20px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(16, 15, 88, .06), 0 2px 6px -2px rgba(16, 15, 88, .08);
  --sh-2: 0 2px 4px rgba(16, 15, 88, .06), 0 10px 24px -12px rgba(16, 15, 88, .22);
  --sh-3: 0 4px 8px rgba(16, 15, 88, .07), 0 22px 44px -18px rgba(16, 15, 88, .30);
  --sh-cta: 0 1px 2px rgba(16, 15, 88, .18), 0 10px 22px -10px rgba(47, 122, 78, .55);
  --sh-cta-hover: 0 2px 4px rgba(16, 15, 88, .20), 0 18px 30px -12px rgba(47, 122, 78, .60);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 90ms;
  --t-base: 160ms;
  --t-step: 200ms;

  --notice-h: 0px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(76px + var(--notice-h));
}

::selection { background: rgba(93, 178, 121, .26); color: var(--navy); }
:root { caret-color: var(--navy); scrollbar-color: var(--line-strong) var(--cream); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--green-dark); text-underline-offset: 3px; }
svg { display: block; }

.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

/* ---------------------------------------------------------------- hero band */
.band {
  background: var(--navy);
  color: var(--cream);
  padding: 14px 0 26px;
  position: relative;
}
.band .shell { max-width: var(--max); }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--cream);
  border-radius: var(--r-sm);
}
.brand .logo {
  width: 42px; height: 42px;
  display: block;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.brand-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand-sub {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 250, 235, .72);
  text-align: right;
  max-width: 210px;
  line-height: 1.35;
}
.band h1 {
  font-size: clamp(27px, 6.6vw, 42px);
  margin: 20px 0 0;
  max-width: 20ch;
}
.band .sub {
  margin-top: 10px;
  color: rgba(255, 250, 235, .76);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 44ch;
}

/* trust strip */
.trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0 0;
  padding: 0;
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 250, 235, .9);
}
.trust svg { width: 14px; height: 14px; color: var(--green); flex: 0 0 14px; }

/* Once the visitor is past the first question the band goes quiet: the promise has done
   its job and the question needs the room. */
body.is-flowing .band .sub,
body.is-flowing .band .trust { display: none; }
body.is-flowing .band h1 {
  font-size: clamp(17px, 3.6vw, 21px);
  letter-spacing: -.015em;
  margin-top: 16px;
  max-width: 34ch;
  color: rgba(255, 250, 235, .82);
  font-weight: 500;
  line-height: 1.25;
}

/* ------------------------------------------------------------------- sheet */
.sheet {
  background: var(--sheet);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  margin-top: -18px;
  padding: 14px 0 0;
  position: relative;
  box-shadow: 0 -1px 0 rgba(16, 15, 88, .05), 0 -20px 44px -30px rgba(16, 15, 88, .55);
}
.sheet > .shell { padding-bottom: 8px; }

/* --------------------------------------------------------------- progress */
.progressrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.progress {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.steps {
  display: flex;
  gap: 4px;
  height: 6px;
}
.steps i {
  display: block;
  flex: 1 1 0;
  background: var(--line);
  border-radius: var(--r-pill);
  transition: background var(--t-step) var(--ease);
}
.steps i.on { background: rgba(93, 178, 121, .55); }
.steps i.done { background: var(--green); }
.step-count {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-55);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- screens */
.screen { display: none; }
.screen.active {
  display: block;
  animation: rise var(--t-step) var(--ease);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.q-title {
  font-size: clamp(24px, 5.4vw, 31px);
  letter-spacing: -.028em;
  margin-bottom: 0;
}
h3 { font-size: 18px; }
.lede {
  color: var(--ink-70);
  font-size: 16px;
  line-height: 1.58;
  margin-top: 11px;
  max-width: 46ch;
}

/* ------------------------------------------------------------------ fields */
.field-block { margin-top: 14px; }
.field-block:first-of-type { margin-top: 16px; }
label.field {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {
  width: 100%;
  min-height: 54px;
  background: var(--inset);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16.5px;
  padding: 15px 15px;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease,
              background var(--t-base) ease;
  appearance: none;
}
input::placeholder { color: var(--ink-55); opacity: 1; }
input:hover, select:hover { border-color: var(--line-strong); }
input:focus, select:focus {
  outline: none;
  background: var(--sheet);
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(93, 178, 121, .18);
}
input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(150, 50, 44, .12);
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.select-wrap { position: relative; }
.select-wrap select { padding-right: 42px; cursor: pointer; }
.select-wrap .chev {
  position: absolute;
  right: 15px;
  top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  color: var(--ink-55);
  pointer-events: none;
}

.zip-input {
  font-family: var(--mono);
  font-size: 23px;
  letter-spacing: .16em;
  text-align: center;
  padding: 16px 15px;
  font-variant-numeric: tabular-nums;
}
.money-input {
  font-family: var(--mono);
  font-size: 23px;
  text-align: center;
  padding: 16px 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.field-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-55);
}
.field-note.is-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-pill);
  background: var(--mint-tint);
  color: var(--green-dark);
  font-weight: 600;
  animation: chip-in 220ms var(--ease);
}
.field-note.is-confirmed svg { width: 13px; height: 13px; }
.field-note.is-watch { color: var(--green-dark); }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(-3px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------- tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 22px;
}
.tiles-income { grid-template-columns: repeat(3, 1fr); }
.tile {
  position: relative;
  appearance: none;
  min-height: 64px;
  padding: 12px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--inset);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-base) ease, background var(--t-base) ease,
              transform var(--t-base) var(--ease), box-shadow var(--t-base) ease;
}
.tile:hover { border-color: var(--navy); transform: translateY(-1px); box-shadow: var(--sh-1); }
.tile:active { transform: translateY(1px); box-shadow: none; }
.tile .tile-value { display: block; font-size: 19px; letter-spacing: -.01em; padding-right: 4px; }
.tile .tile-sub {
  display: block;
  margin-top: 3px;
  padding-right: 16px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-55);
  line-height: 1.3;
}
.tile .tile-check {
  position: absolute;
  bottom: 7px; right: 7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--navy);
  display: none;
  place-items: center;
}
.tile .tile-check svg { width: 12px; height: 12px; }
.tile[aria-pressed="true"] {
  background: var(--mint-tint);
  border-color: var(--green);
  border-width: 2px;
  box-shadow: var(--sh-1);
}
.tile[aria-pressed="true"] .tile-check { display: grid; }
.tile[aria-pressed="true"] .tile-sub { color: var(--green-dark); }

/* ---------------------------------------------------------------- buttons */
.btn-primary, .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 58px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) ease,
              background var(--t-base) ease, border-color var(--t-base) ease;
}
.btn-primary {
  border: 0;
  background: var(--green);
  color: var(--navy);
  box-shadow: var(--sh-cta);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-cta-hover);
  background: #68bc83;
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: var(--sh-1);
  background: #55a96f;
}
.btn-secondary {
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-weight: 600;
}
.btn-secondary:hover { background: rgba(16, 15, 88, .06); transform: translateY(-1px); }
.btn-secondary:active { background: rgba(16, 15, 88, .1); transform: translateY(1px); }
.btn-primary:focus-visible, .btn-secondary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--cream), var(--sh-cta);
}
.band .brand:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.btn-primary:disabled, .btn-secondary:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--sh-1);
}
.btn-arrow { width: 18px; height: 18px; flex: 0 0 18px; transition: transform var(--t-base) var(--ease); }
.btn-primary:hover .btn-arrow { transform: translateX(3px); }
.btn-icon { width: 19px; height: 19px; flex: 0 0 19px; }
form .btn-primary, form .btn-secondary { margin-top: 16px; }

.btn-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.btn-row > * { flex: 1 1 200px; }
.cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.back {
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink-55);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  padding: 10px 0;
  margin-top: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  border-radius: 6px;
}
.back:hover { color: var(--navy); }
.back:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(16, 15, 88, .25);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: 0 0 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ teaser */
.teaser {
  margin-top: 20px;
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--navy);
  color: var(--cream);
  box-shadow: var(--sh-2);
  animation: chip-in 240ms var(--ease);
}
.teaser .teaser-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 250, 235, .74);
}
.teaser .teaser-figure {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 500;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.teaser .teaser-figure .unit {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 250, 235, .74);
}
.teaser .teaser-note {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 250, 235, .7);
}
.teaser.is-working .teaser-figure { color: rgba(93, 178, 121, .6); }

/* --------------------------------------------------------- payoff slab */
.payoff {
  margin-top: 20px;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--cream);
  padding: 18px 18px 17px;
  box-shadow: var(--sh-3);
  position: relative;
  overflow: hidden;
}
.payoff-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.payoff-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  color: rgba(255, 250, 235, .76);
}
.payoff-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 250, 235, .28);
  color: rgba(255, 250, 235, .82);
}
.payoff-badge.is-county { border-color: rgba(93, 178, 121, .7); color: var(--green); }
.payoff-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: clamp(40px, 12vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.payoff-figure .unit {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 250, 235, .74);
}
.payoff-band {
  margin-top: 16px;
}
.band-track {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 250, 235, .18);
  overflow: hidden;
}
.band-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-pill);
  background: var(--green);
  width: 0;
  transition: width 600ms var(--ease);
}
.band-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: var(--cream);
  left: 0;
  opacity: .9;
  transition: left 600ms var(--ease);
}
.band-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(255, 250, 235, .66);
  font-variant-numeric: tabular-nums;
}
.payoff-note {
  margin-top: 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 250, 235, .7);
}

/* ------------------------------------------------------------------- bento */
/* Two-up on a wide screen, one column of stat rows on a phone: at 390px two narrow tiles
   stack their own labels to four lines each and push the ask below the fold. */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}
@media (max-width: 619px) {
  .tile-card { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 10px; padding: 11px 12px; }
  .tile-card .card-head { grid-column: 1 / -1; margin-bottom: 4px; display: block; }
  .tile-card .card-head .badge { margin-top: 3px; }
  .tile-card .card-figure { margin-top: 0; font-size: 24px; }
  .tile-card .range-bar { grid-column: 1 / -1; margin-top: 8px; }
  .tile-card .range-legend { grid-column: 1 / -1; margin-top: 4px; }
  .tile-card .card-sub { grid-column: 1 / -1; margin-top: 2px; }
  .tile-card.is-wide { display: block; }
}
.tile-card {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sheet);
  padding: 16px 15px;
  box-shadow: var(--sh-1);
  animation: deal 240ms var(--ease) backwards;
}
.tile-card.is-wide { grid-column: 1 / -1; }
.tile-card.is-cheap { border-color: var(--green); background: #FBFDF9; }
.tile-card .card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-55);
  letter-spacing: .01em;
}
.tile-card .card-figure {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tile-card .card-figure .unit {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-55);
  letter-spacing: 0;
  margin-left: 3px;
}
.tile-card .card-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-55);
}
@keyframes deal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ quick / cards */
.quick {
  margin-top: 26px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--green);
  background: var(--sheet);
  padding: 20px;
  box-shadow: var(--sh-2);
}
.quick h3 { font-size: 20px; letter-spacing: -.02em; }
.quick .cta-row { margin-top: 12px; }
.quick-lede {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-70);
}
#f-quick { margin-top: 20px; }
.form-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.card {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  margin-top: 14px;
  box-shadow: var(--sh-1);
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-55);
}
.hero-figure {
  font-family: var(--mono);
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.hero-figure .unit {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-55);
  letter-spacing: 0;
}
.band-range {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--green-dark);
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}
.sub-note {
  font-size: 12.5px;
  color: var(--ink-55);
  margin-top: 8px;
  line-height: 1.6;
}

.kv { display: grid; grid-template-columns: 1fr auto; gap: 11px 14px; }
.kv dt { font-size: 14px; color: var(--ink-70); }
.kv dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* the band bar on cream */
.range-bar {
  margin-top: 16px;
  height: 6px;
  background: var(--line);
  border-radius: var(--r-pill);
  position: relative;
}
.range-bar .fill {
  position: absolute;
  top: 0;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(93, 178, 121, .55);
}
.range-bar .mid {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: var(--navy);
}
.range-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-55);
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}

/* metal tier rows */
.tiers { width: 100%; border-collapse: collapse; }
.tiers th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-55);
  text-align: left;
  padding: 0 0 8px;
}
.tiers th:last-child, .tiers td:last-child { text-align: right; }
.tiers td {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  vertical-align: top;
}
.tiers td.metal { font-weight: 600; }
.tiers td.money {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tiers td.money.is-free { color: var(--green-dark); }
.tiers .tier-range {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-55);
  margin-top: 3px;
}
.tiers tr.is-benchmark td { background: var(--inset); }
.tiers tr.is-benchmark td.metal::after {
  content: "benchmark";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-top: 3px;
}

/* flags → quiet notes, no coloured rail */
.flag {
  display: flex;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--inset);
  margin-top: 10px;
}
.flag .flag-mark {
  width: 8px; height: 8px;
  flex: 0 0 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--navy);
}
.flag.good .flag-mark, .flag.watch .flag-mark { background: var(--green); }
.flag h3 { font-size: 15.5px; margin-bottom: 5px; letter-spacing: -.01em; }
.flag p { font-size: 14px; color: var(--ink-70); line-height: 1.58; }
.flag .flag-src {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-55);
  margin-top: 7px;
}

/* arithmetic */
.why {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  margin-top: 14px;
}
.why h3 { font-size: 16px; margin-bottom: 12px; letter-spacing: -.015em; }
.why ol, .why .working-steps { margin: 0; padding: 0; list-style: none; }
.why li {
  font-size: 14px;
  color: var(--ink-70);
  margin-bottom: 10px;
  line-height: 1.55;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}
.why li:last-child { margin-bottom: 0; }
.why li b { color: var(--navy); font-weight: 600; }

.srcs {
  font-size: 11.5px;
  color: var(--ink-55);
  line-height: 1.75;
  margin-top: 12px;
  word-break: break-word;
}
.srcs a { color: var(--ink-55); }

/* ------------------------------------------------------------ lead gate */
.gate {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--sheet);
  box-shadow: var(--sh-1);
}
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-70);
  margin: 20px 0 0;
  cursor: pointer;
  line-height: 1.6;
}
.check input {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  min-height: 0;
  margin: 1px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}
.check input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.two { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .two { grid-template-columns: 1fr 1fr; } }

.status {
  font-size: 13px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  margin-top: 14px;
  border: 1px solid var(--line-strong);
  color: var(--ink-70);
  line-height: 1.55;
}
.status.ok { border-color: var(--green); color: var(--green-dark); }
.status.err { border-color: var(--error); color: var(--error); background: rgba(150, 50, 44, .05); }

/* recap */
.recap {
  margin-top: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--inset);
  padding: 16px;
}
.recap-line {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--navy);
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.caveat-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-70);
  font-size: 14px;
  line-height: 1.7;
}
.caveat-list li { margin-bottom: 8px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink-55);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-55); }
.badge.mint, .badge.watch { border-color: var(--green); color: var(--green-dark); }
.badge.mint .dot, .badge.watch .dot { background: var(--green); }

/* dates of birth */
.dob-grid { display: grid; gap: 14px; margin-top: 20px; }
.dob-cell {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sheet);
  box-shadow: var(--sh-1);
}
.dob-label {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
/* Month, day and year are ordinary fields: the same 54px well, radius and focus ring as
   the ZIP and income inputs, with a caption above each instead of a placeholder. */
.dob-row { display: grid; grid-template-columns: 1.55fr .8fr 1fr; gap: 9px; }
.dob-field { min-width: 0; }
.dob-cap {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-55);
  margin-bottom: 4px;
}
.dob-row select, .dob-row input {
  min-height: 54px;
  height: 54px;
  font-size: 16.5px;
  padding: 12px 13px;
  background: var(--inset);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--navy);
  width: 100%;
}
.dob-row select { padding-right: 34px; }
.dob-row input { text-align: center; font-family: var(--mono); }
.dob-row select:focus, .dob-row input:focus {
  background: var(--sheet);
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(93, 178, 121, .18);
}
.dob-row .select-wrap .chev { right: 11px; }
/* Polar's note: the Continue button on this step sat flush under the last field. */
#s-dob .btn-primary { margin-top: 16px; }

/* thank you */
.thanks {
  border-radius: var(--r-lg);
  border: 1.5px solid var(--green);
  background: var(--sheet);
  padding: 24px 20px;
  margin-top: 6px;
  box-shadow: var(--sh-2);
}
.thanks-mark { width: 38px; height: 38px; color: var(--green-dark); margin-bottom: 14px; }
.thanks h2 { font-size: 23px; margin-bottom: 9px; }
.thanks-lede { font-size: 16px; line-height: 1.55; color: var(--ink-70); margin-bottom: 14px; }
.thanks-ref {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-55);
  font-variant-numeric: tabular-nums;
}

/* footer */
.foot {
  margin-top: 36px;
  padding: 22px 0 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-55);
  line-height: 1.65;
  display: grid;
  gap: 9px;
}
.foot-brand { color: var(--ink-70); font-weight: 500; }
.foot-src { font-family: var(--mono); font-size: 10.5px; line-height: 1.7; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-links a { color: var(--ink-55); }
.disclaimer {
  font-size: 12.5px;
  color: var(--ink-55);
  margin-top: 12px;
  line-height: 1.6;
}

/* --------------------------------------------------- measurement notice */
.notice {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--cream);
  border-top: 3px solid var(--green);
  box-shadow: 0 -6px 20px -14px rgba(16, 15, 88, .5);
  padding: 6px 0;
}
.notice-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.notice p {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-55);
  margin: 0;
}
.notice a { color: var(--green-dark); }
.notice-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.notice-btn {
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 7px 11px;
  min-height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--sheet);
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color var(--t-base) ease, color var(--t-base) ease;
}
.notice-btn:hover { border-color: var(--green); color: var(--green-dark); }
.notice-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.notice-btn[aria-pressed="false"] { border-color: var(--navy); color: var(--navy); }

/* ------------------------------------------------------- mobile action bar */
.stickybar {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--notice-h);
  z-index: 55;
  display: none;
  gap: 9px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--sheet);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 26px -18px rgba(16, 15, 88, .45);
  animation: bar-in 220ms var(--ease);
}
.stickybar[hidden] { display: none; }
.stickybar .btn-primary, .stickybar .btn-secondary {
  min-height: 50px;
  font-size: 15.5px;
  padding: 12px 14px;
  flex: 1 1 0;
}
.sticky-call { flex: 1.1 1 0; }
@keyframes bar-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ------------------------------------------------------------------ nudge */
.nudge {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 var(--gutter) calc(var(--notice-h) + 14px);
  background: rgba(16, 15, 88, .34);
  animation: fade-in 200ms ease;
}
.nudge[hidden] { display: none; }
.nudge-card {
  width: 100%;
  max-width: 460px;
  background: var(--sheet);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  box-shadow: var(--sh-3);
  animation: nudge-in 240ms var(--ease);
}
.nudge-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
}
.nudge-body { margin-top: 7px; font-size: 14.5px; color: var(--ink-70); line-height: 1.55; }
.nudge-actions { display: grid; gap: 9px; margin-top: 16px; }
.nudge-dismiss {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink-55);
  padding: 8px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.nudge-dismiss:hover { color: var(--navy); }
.nudge-dismiss:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nudge-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  :root { --max: 720px; --gutter: 32px; }
  .band { padding: 18px 0 38px; }
  .band h1 { font-size: 44px; margin-top: 24px; }
  .band .sub { font-size: 17px; }
  .sheet { margin-top: -32px; padding-top: 26px; }
  .q-title { font-size: 32px; }
  .payoff-figure { font-size: 64px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .cta-row { flex-direction: row; }
  .cta-row .btn-primary { flex: 1.4 1 0; }
  .cta-row .btn-secondary { flex: 1 1 0; }
  .dob-grid { grid-template-columns: 1fr; }
  .nudge { align-items: center; }
  body { padding-bottom: 92px; }
}

@media (max-width: 640px) {
  .brand-sub { display: none; }
  body.is-flowing .band { padding-bottom: 34px; }
  body.is-flowing .sheet { margin-top: -20px; }
  .stickybar { display: flex; }
  .two { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile { min-height: 68px; padding: 10px 8px; }
  .tile .tile-value { font-size: 17px; }
}

@media (max-width: 360px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tiles-income { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html:focus-within { scroll-behavior: auto; }
}

/* ============================================================ round 5 overrides
   Placed last on purpose: these settle the few places where a shared component class is
   reused on a navy slab, and the stagger that makes the bento deal in rather than appear. */

.payoff .hero-figure,
.payoff-figure {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: clamp(40px, 12vw, 60px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--cream);
}
.payoff .hero-figure .unit,
.payoff-figure .unit {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 250, 235, .74);
}
.payoff .badge {
  border-color: rgba(255, 250, 235, .28);
  color: rgba(255, 250, 235, .84);
}
.payoff .badge .dot { background: var(--cream); }
.payoff .badge.is-county {
  border-color: rgba(93, 178, 121, .72);
  color: var(--green);
}
.payoff .badge.is-county .dot { background: var(--green); }

.tile-card .card-head { margin-bottom: 2px; align-items: center; }
.tile-card .card-head .card-title { flex: 1 1 auto; }
.tile-card .badge { font-size: 9.5px; padding: 3px 8px; }
.tile-card .range-bar { margin-top: 12px; }
.tile-card .range-legend { font-size: 11px; margin-top: 7px; }
.tile-card .tiers td { font-size: 14px; padding: 10px 0; }
.tile-card .tiers td.money { font-size: 14px; }

.bento > *:nth-child(1) { animation-delay: 60ms; }
.bento > *:nth-child(2) { animation-delay: 120ms; }
.bento > *:nth-child(3) { animation-delay: 180ms; }

@media (min-width: 900px) {
  .payoff .hero-figure, .payoff-figure { font-size: 64px; }
}

/* The tiles grid holds eight answers on a 390px screen without shrinking a tap target
   below 44px: 4 columns at >= 360px, 3 below that. */
@media (max-width: 400px) {
  .tile { padding: 9px 7px; }
  .tile .tile-value { font-size: 16px; }
  .tile .tile-sub { font-size: 10.5px; }
}

/* A 720px column inside a 1440px window leaves the payoff and the tier table looking
   lost. Above 1100px the sheet widens to 820px, which is still a comfortable measure for
   the prose but gives the numbers room to breathe. */
@media (min-width: 1100px) {
  :root { --max: 820px; }
  .payoff { padding: 24px 24px 22px; }
  .bento { grid-template-columns: 1fr 1fr; }
}

/* The one-line band readout when the published spread is too tight for an axis. */
.payoff-one {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 250, 235, .82);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
/* The basis line under the bento: full width, quiet, one sentence of provenance. */
.bento-note {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-55);
}
@media (max-width: 619px) {
  .bento-note { font-size: 11.5px; }
}

/* The basis line that sits under the bento stays to two lines: the full provenance
   sentence is rendered under the ask instead, so it cannot push the call button down. */
.bento-note.is-short { font-size: 11px; line-height: 1.45; }