/* ============================================================
   PAGE.CSS — The Bills Are Too Damn High (campaign landing page)
   ------------------------------------------------------------
   This is NOT a parallel design system. It is a faithful, 1:1
   port of the design-system React components (which ship as
   inline-styled .jsx) into reusable CSS classes that consume
   ONLY the DS token variables from tokens/*.css. No literal
   colors, spacing, shadows, or fonts are invented here — every
   value resolves to a --token. styles.css + tokens stay
   untouched and are linked ahead of this file.

   Order: 1) layout primitives  2) ported components
          3) page sections      4) motion / a11y
   ============================================================ */

/* ============================================================
   1. LAYOUT PRIMITIVES
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-8); }
.section + .section { border-top: var(--border-w-hair) solid var(--border-hairline); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}

.section--ink {
  background: var(--surface-ink);
  color: var(--text-inverse);
  border-top: none;
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--text-inverse); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Display headlines — the Anton "shout". ALL CAPS per the DS. */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
}
.display--hero { font-size: clamp(2rem, 8vw, 5.25rem); }
.display--xl   { font-size: clamp(2.25rem, 8vw, 5rem); }
.display--lg   { font-size: clamp(1.9rem, 6vw, 3.5rem); }
.display--md   { font-size: clamp(1.6rem, 4.5vw, 2.5rem); }
/* Section-title sizes wrap to multiple lines (esp. on mobile); the display shout's
   0.92 is too tight there. Loosen to the heading line-height — the hero (.display--hero,
   manual line spans) and the big stat numbers keep 0.92. */
.display--xl, .display--lg, .display--md { line-height: var(--lh-heading); }

/* Red highlight block behind a headline line ("TOO DAMN HIGH"). */
.shout-hl {
  background: var(--red-500);
  color: var(--paper-100);
  padding: 0.02em 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Archivo-heavy sub-headings (the fs-h* scale). */
.h-archivo { font-family: var(--font-sans); font-weight: var(--fw-black); color: var(--text-strong); line-height: var(--lh-heading); margin: 0; }
.h2-archivo { font-size: var(--fs-h2); }
.h3-archivo { font-size: var(--fs-h3); }

.prose {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.prose p { margin: 0 0 var(--space-4); }
.prose p:last-child { margin-bottom: 0; }

.micro {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Mono eyebrow / kicker (Eyebrow.jsx). base.css ships .kicker too. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--inverse { color: var(--highlight); }
/* For a full-sentence lead-in: sentence case + normal tracking reads far better
   than a long all-caps, wide-tracked kicker. */
.eyebrow--sentence { text-transform: none; letter-spacing: 0.01em; line-height: var(--lh-snug); }
.hl-volt { background: var(--volt-500); color: var(--ink-900); padding: 0 0.18em; }

/* ============================================================
   2. PORTED COMPONENTS
   ============================================================ */

/* --- Button.jsx ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  padding: 11px 20px;
  border: var(--border-w) solid var(--ink-900);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  background: var(--red-500);
  color: var(--paper-100);
  box-shadow: 4px 4px 0 var(--ink-900);
  transform: translate(0, 0);
  transition: background var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap),
              transform var(--dur-fast) var(--ease-snap);
}
.btn:hover { background: var(--red-400); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink-900); }

.btn--secondary { background: var(--paper-100); color: var(--ink-900); }
.btn--secondary:hover { background: var(--paper-300); }
.btn--volt { background: var(--volt-500); color: var(--ink-900); }
.btn--volt:hover { background: var(--volt-300); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-900); }
.btn--ghost:hover { background: var(--paper-300); }
.btn--ghost:active { transform: none; box-shadow: none; }

.btn--sm { padding: 7px 14px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink-900); }
.btn--sm:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink-900); }
.btn--lg { padding: 15px 28px; font-size: 17px; box-shadow: 5px 5px 0 var(--ink-900); }
.btn--lg:active { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink-900); }

.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--paper-900); color: var(--ink-300);
  border-color: var(--ink-300); box-shadow: none; cursor: not-allowed;
  transform: none;
}
.btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* --- Stamp.jsx -------------------------------------------- */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: var(--ls-stamp);
  text-transform: uppercase;
  color: var(--red-500);
  padding: 6px 12px;
  border: 3px solid var(--red-500);
  box-shadow: inset 0 0 0 1px var(--red-500);
  border-radius: 2px;
  transform: rotate(-5deg);
  background: transparent;
  line-height: 1;
}
.stamp--sm { font-size: 12px; padding: 4px 8px; border-width: 2px; }
.stamp--lg { font-size: 22px; padding: 9px 16px; border-width: 4px; }
.stamp--ink { color: var(--ink-900); border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }

/* --- Badge.jsx -------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
  background: var(--paper-100);
  border: 1.5px solid var(--ink-900);
  border-radius: 2px;
  padding: 3px 8px;
  line-height: 1.1;
}
.badge svg { width: 13px; height: 13px; }
.badge--rising, .badge--overdue { color: var(--paper-100); background: var(--red-500); border-color: var(--red-600); }
.badge--falling, .badge--good { color: var(--paper-100); background: var(--ledger-500); border-color: var(--ledger-600); }
.badge--flagged { color: var(--ink-900); background: var(--volt-500); border-color: var(--volt-600); }
.badge__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: currentColor; flex: 0 0 auto; }

/* --- StatCallout.jsx -------------------------------------- */
.stat { font-family: var(--font-sans); text-align: left; }
.stat--center { text-align: center; }
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.stat__row { display: flex; align-items: baseline; gap: var(--space-2); }
.stat--center .stat__row { justify-content: center; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 84px);
  line-height: var(--lh-display);
  color: var(--red-500);
  letter-spacing: 0.01em;
}
.stat__value--green { color: var(--ledger-500); }
.stat__value--ink { color: var(--ink-900); }
.stat__trend { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 18px; color: var(--red-500); }
.stat__trend--down { color: var(--ledger-500); }
.stat__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
  letter-spacing: 0.04em;
}

/* --- Card.jsx --------------------------------------------- */
.card {
  background: var(--surface-card);
  color: var(--text-body);
  border: var(--border-w) solid var(--ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  padding: var(--space-5);
}
.card--raised { background: var(--surface-raised); }
.card--ink { background: var(--surface-ink); color: var(--text-inverse); }
.card--hard { box-shadow: var(--shadow-hard); }
.card--flush { padding: 0; }

/* --- BillCard.jsx (the signature "the bill itself") ------- */
.billcard {
  position: relative;
  background: var(--surface-raised);
  border: var(--border-w) solid var(--ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-mono);
  color: var(--ink-900);
  padding: var(--space-5);
}
.billcard__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid var(--ink-900);
  padding-bottom: 10px; margin-bottom: 12px;
}
.billcard__acct { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.1em; }
.billcard__meta { font-size: 10px; color: var(--text-muted); margin-top: 3px; letter-spacing: 0.06em; }
.billcard__no { font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; }
.billcard__line {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 7px 0; border-bottom: 1px dashed var(--paper-line); font-size: 13px;
}
.billcard__line span:first-child { letter-spacing: 0.03em; }
.billcard__amt { font-weight: var(--fw-bold); }
.billcard__amt--accent { color: var(--red-500); }
.billcard__total {
  display: flex; justify-content: space-between;
  border-top: 2px solid var(--ink-900); margin-top: 6px; padding-top: 12px;
  font-size: 15px; font-weight: var(--fw-bold); letter-spacing: 0.04em;
}
.billcard__stamp { position: absolute; right: 14px; bottom: 14px; }

/* --- Input.jsx + select (form fields) --------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-900);
}
.field__control {
  display: flex; align-items: stretch;
  border: var(--border-w) solid var(--ink-900);
  background: var(--paper-100);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: box-shadow var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.field__control:focus-within { border-color: var(--red-500); box-shadow: 3px 3px 0 var(--ink-900); }
.field__affix {
  display: inline-flex; align-items: center; padding: 0 12px;
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 15px;
  color: var(--ink-900); background: var(--paper-700);
  border-right: var(--border-w) solid var(--ink-900);
}
.field__affix svg { width: 18px; height: 18px; }
.field input, .field select {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink-900);
  padding: 11px 14px; border-radius: var(--radius-sm);
}
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px; }
/* Chevron via mask so the colour comes from a token (var()), not a hardcoded hex in the data-URI */
.field__control:has(select) { position: relative; }
.field__control:has(select)::after {
  content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  background-color: var(--ink-900);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.field__control--invalid { border-color: var(--red-500); }
.field__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); }
.field__hint--error { color: var(--red-500); }

/* --- SectionRule.jsx -------------------------------------- */
.rule { display: flex; align-items: center; gap: var(--space-4); }
.rule__num { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-bold); color: var(--accent); letter-spacing: 0.06em; flex: 0 0 auto; }
.rule__label { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-900); flex: 0 0 auto; }
.section--ink .rule__label { color: var(--text-inverse); }
.rule__line { flex: 1; height: 0; border-top: 2px solid var(--ink-900); }
.section--ink .rule__line { border-color: var(--text-inverse); }

/* ============================================================
   3. PAGE SECTIONS
   ============================================================ */

/* --- Skip link -------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--ink-900); color: var(--paper-100);
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* --- Nav -------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--paper-500);
  border-bottom: var(--border-w) solid var(--ink-900);
  transition: box-shadow var(--dur-base) var(--ease-snap);
}
.nav--scrolled { box-shadow: 0 4px 0 -1px var(--paper-line); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px;
}
.wordmark {
  font-family: var(--font-display); text-transform: uppercase; color: var(--ink-900);
  font-size: clamp(0.95rem, 3.6vw, 1.25rem); line-height: 1; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
}
.wordmark .uline { border-bottom: 3px solid var(--volt-500); padding-bottom: 1px; }
.nav__links { display: none; align-items: center; gap: var(--space-5); }
.nav__link {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-900);
  text-decoration: none; padding-block: var(--space-2);
}
.nav__link:hover { color: var(--accent); box-shadow: inset 0 -3px 0 var(--volt-500); }
.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--ink-900); color: var(--paper-100);
  border: var(--border-w) solid var(--ink-900); border-radius: var(--radius-sm); cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__menu {
  display: none; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-5);
  border-top: var(--border-w-hair) solid var(--border-hairline);
}
.nav__menu.is-open { display: flex; }
.nav__menu .nav__link { font-size: var(--fs-mono); padding: var(--space-3) 0; }
.nav__menu .btn { margin-top: var(--space-3); }

@media (min-width: 900px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__toggle { display: none; }
  .nav__menu { display: none !important; }
}

/* --- Hero ------------------------------------------------- */
.hero { padding-block: var(--space-7) var(--space-8); }
.hero__grid { display: grid; gap: var(--space-7); align-items: center; }
/* space-7 (not -6): the red shout-hl block's box-decoration-break paint overhangs
   ~22px below the text box, so the effective gap to the sub is ~margin − 22px.
   On small screens the headline is at its clamp floor (smaller overhang), so -7
   reads airy there — tighten to -6 below 700px to match the desktop gap. */
.hero__headline { margin-bottom: var(--space-7); }
@media (max-width: 700px) { .hero__headline { margin-bottom: var(--space-6); } }
.hero__headline .line { display: block; white-space: nowrap; }
.hero__headline .line + .line { margin-top: 0.34em; }
.hero__sub { max-width: 38ch; }
.hero__sub .amt { color: var(--red-500); font-weight: var(--fw-black); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__source { margin-top: var(--space-5); max-width: 52ch; }
.hero__receipt { justify-self: center; width: 100%; max-width: 380px; }
.hero__receipt .billcard__stamp { position: static; text-align: center; margin-bottom: var(--space-4); }

/* down-arrow cue pointing to the receipt */
.scrolldown { text-align: center; margin-top: var(--space-3); }
.scrolldown a { display: inline-flex; color: var(--red-500); }
.scrolldown svg { width: 40px; height: 40px; animation: scrolldown-bob 1.6s ease-in-out infinite; }
@keyframes scrolldown-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scrolldown svg { animation: none; } }
@media (min-width: 980px) {
  /* Rebalance toward the receipt + pull the columns closer so the card fills
     its track instead of floating small (the dead gap collapses to the gutter). */
  .hero__grid { grid-template-columns: 1fr 0.9fr; gap: var(--space-7); }
  .hero__receipt { justify-self: stretch; max-width: 540px; margin-left: auto; padding: var(--space-6); }
  /* Scale the BillCard internals up a notch so the larger card reads as a bigger
     printed document, not a thin stretched one. */
  .hero__receipt .billcard__line { padding: 10px 0; font-size: 16px; }
  .hero__receipt .billcard__total { margin-top: 8px; padding-top: 16px; font-size: 20px; }
  .hero__receipt .billcard__stamp { margin-bottom: var(--space-5); }
  .hero__receipt .billcard__stamp .stamp.stamp--sm { font-size: 14px; padding: 5px 11px; }
}

/* --- Stat band (hero → section transition) ---------------- */
.statband { background: var(--bg-sunken); border-block: var(--border-w) solid var(--ink-900); padding-block: var(--space-7); }
.statband__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.statband__num { font-family: var(--font-display); font-size: clamp(3.25rem, 11vw, 6rem); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--red-500); flex: 0 0 auto; }
.statband__lede { margin: 0; max-width: 34ch; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: var(--lh-snug); color: var(--text-strong); }
@media (min-width: 760px) { .statband__inner { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-7); } }

/* --- The Receipt (centerpiece) ---------------------------- */
.receipt { max-width: 760px; margin-inline: auto; }
.receipt__head { text-align: center; margin-bottom: var(--space-3); }
.receipt__doc {
  position: relative;
  background: var(--surface-raised);
  border: var(--border-w-thick) solid var(--ink-900);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard);
  padding: var(--space-5);
}
.receipt__stamp { position: absolute; top: 16px; right: 22px; z-index: 2; }
/* On narrow phones the receipt is slim and the account meta reaches the right
   edge — shrink the stamp and reserve space so PAST DUE never sits over text. */
@media (max-width: 600px) {
  .receipt__stamp { top: 12px; right: 14px; }
  .receipt__stamp .stamp { font-size: var(--fs-mono-sm); padding: var(--space-1) var(--space-2); border-width: var(--border-w); box-shadow: inset 0 0 0 1px var(--red-500); }
  .receipt__docmeta > span:first-child { max-width: 62%; }
}
@media (min-width: 768px) { .receipt__doc { padding: var(--space-7); } }
.receipt__docmeta {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 2px solid var(--ink-900); padding-bottom: var(--space-3); margin-bottom: var(--space-4);
}
.lineitem { padding: var(--space-5) 0; border-bottom: 1px dashed var(--paper-line); }
.lineitem:first-of-type { padding-top: var(--space-2); }
.lineitem__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.lineitem__tag {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-900);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.lineitem__tag svg { width: 16px; height: 16px; color: var(--accent); }
.lineitem__nums { display: flex; align-items: baseline; gap: var(--space-3); }
.lineitem__amt { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1; color: var(--red-500); }
.lineitem__pct { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-mono); color: var(--red-500); }
.lineitem__headline { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h3); color: var(--text-strong); line-height: var(--lh-snug); margin: var(--space-3) 0 var(--space-2); }
.lineitem__body { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-body); line-height: var(--lh-body); margin: 0; max-width: 62ch; }
.lineitem__note { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-muted); letter-spacing: 0.03em; margin-top: var(--space-3); }
.lineitem__source { color: var(--text-muted); }

.receipt__subtotal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3);
  border-top: var(--border-w-thick) solid var(--ink-900); margin-top: var(--space-2); padding-top: var(--space-5);
}
.receipt__subtotal-label { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-900); }
.receipt__subtotal-amt { font-family: var(--font-display); font-size: clamp(2.5rem, 9vw, 4rem); line-height: 1; color: var(--ink-900); }

.receipt__addon {
  margin-top: var(--space-5); padding: var(--space-5);
  background: var(--red-100); border: var(--border-w) solid var(--red-500); border-radius: var(--radius-sm);
}
.receipt__addon .lineitem { border-bottom: none; padding-bottom: 0; }
.receipt__amountdue {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5); padding: var(--space-5);
  background: var(--ink-900); color: var(--paper-100); border-radius: var(--radius-sm);
  position: relative;
}
.receipt__amountdue .label { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--volt-500); }
.receipt__amountdue .amt { font-family: var(--font-display); font-size: clamp(2.5rem, 9vw, 4rem); line-height: 1; color: var(--paper-100); }
/* ACA stub: a perforated tear-off slip. Distinct paper shade + dashed perforation
   + punched notches at the edges = clearly a separate, detachable part of the receipt. */
.receipt__stub {
  position: relative;
  margin: var(--space-6) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--paper-900);
  border-top: var(--border-w) dashed var(--paper-line);
}
.receipt__stub::before, .receipt__stub::after {
  content: ""; position: absolute; top: 0; width: 20px; height: 20px;
  background: var(--bg-page); border-radius: var(--radius-pill); transform: translateY(-50%);
}
.receipt__stub::before { left: -13px; }
.receipt__stub::after { right: -13px; }
@media (min-width: 768px) {
  .receipt__stub { margin: var(--space-6) calc(-1 * var(--space-7)) calc(-1 * var(--space-7)); padding: var(--space-6) var(--space-7) var(--space-7); }
}
.receipt__amountdue-sub { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.04em; color: color-mix(in srgb, var(--paper-100) 72%, transparent); }
.receipt__stub > .eyebrow { text-align: center; }

/* --- Bottom line ------------------------------------------ */
.bottomline__nums { display: grid; gap: var(--space-6); margin-block: var(--space-6); }
@media (min-width: 640px) { .bottomline__nums { grid-template-columns: 1fr 1fr; } }
.bottomline__kicker { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 2.75rem); color: var(--text-strong); line-height: var(--lh-snug); }
.bottomline__kicker .hl { background: var(--volt-500); padding: 0.04em 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* --- They were warned (quote cards) ----------------------- */
.quotes { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 720px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--surface-raised); border: var(--border-w) solid var(--ink-900);
  border-left: 6px solid var(--red-500); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper); padding: var(--space-5);
}
.quote__text { font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: var(--lh-snug); margin: 0 0 var(--space-3); }
.quote__text .q { color: var(--red-500); }
.quote__cite { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-muted); letter-spacing: 0.04em; }
.quote__source { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-1); margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); text-decoration: none; }
.quote__source svg { width: 13px; height: 13px; }
.quote__source:hover { box-shadow: inset 0 -3px 0 var(--volt-500); }
.quote__source:active { transform: translateY(1px); }
.warned__kicker { margin-top: var(--space-6); text-align: center; }
.warned__kicker .display { display: inline-block; }

/* --- Who did this (ink section) --------------------------- */
.who__stats { display: grid; gap: 0; margin-block: var(--space-7); border: var(--border-w) solid var(--text-inverse); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 640px) { .who__stats { grid-template-columns: repeat(3, 1fr); } }
.who__stat { padding: var(--space-5); text-align: center; border-bottom: var(--border-w-hair) solid color-mix(in srgb, var(--paper-500) 25%, transparent); }
@media (min-width: 640px) { .who__stat { border-bottom: none; border-right: var(--border-w-hair) solid color-mix(in srgb, var(--paper-500) 25%, transparent); } .who__stat:last-child { border-right: none; } }
.who__stat-num { font-family: var(--font-display); font-size: clamp(2.75rem, 9vw, 4.5rem); line-height: 1; color: var(--volt-500); }
.who__stat-label { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-inverse); margin-top: var(--space-2); }

/* --- Lookup modules (shared) ------------------------------ */
.lookup__controls { display: grid; gap: var(--space-4); margin-block: var(--space-6); }
@media (min-width: 620px) { .lookup__controls { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.lookup__controls .field { min-width: 0; }
.lookup__controls .btn { height: 47px; }
.lookup__controls--single { grid-template-columns: 1fr; max-width: 480px; }
.reps__picker { max-width: 340px; }

.toggle { display: inline-flex; border: var(--border-w) solid var(--ink-900); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-100); }
.toggle__btn {
  flex: 1 1 0;
  font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-bold);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900);
  background: transparent; border: none; border-right: var(--border-w-hair) solid var(--ink-900);
  padding: var(--space-2) var(--space-3); cursor: pointer; white-space: nowrap; text-align: center;
}
.toggle__btn:last-child { border-right: none; }
.toggle__btn[aria-pressed="true"] { background: var(--ink-900); color: var(--paper-100); }
.toggle--disabled { opacity: 0.45; }
.toggle__btn:disabled { cursor: not-allowed; }

.result { margin-top: var(--space-6); }
.result[hidden] { display: none; }

/* State result card */
.stateresult__grid { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .stateresult__grid { grid-template-columns: 1fr 1fr; } }
.stateresult__caveat {
  margin-top: var(--space-5); padding: var(--space-4);
  background: var(--volt-300); border: var(--border-w) solid var(--volt-600); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--ink-900); line-height: var(--lh-snug);
}
.stateresult__caveat strong { font-weight: var(--fw-black); }
.stateresult__note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-w-hair) solid var(--paper-line); font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-muted); line-height: var(--lh-snug); }
.stateresult__note svg { flex: 0 0 auto; }
.stateresult__cta { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-w-hair) solid var(--paper-line); }

/* Member cards */
.members { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 760px) { .members--row { grid-template-columns: 1fr 1fr; } }
.member {
  position: relative; background: var(--surface-raised);
  border: var(--border-w) solid var(--ink-900); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard); padding: var(--space-5);
}
.member--flag { border-left: 8px solid var(--red-500); }
.member--clear { border-left: 8px solid var(--ledger-500); }
.member--nodata { border-left: 8px solid var(--ink-300); }
.member__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); border-bottom: var(--border-w-hair) solid var(--paper-line); padding-bottom: var(--space-3); margin-bottom: var(--space-4); }
.member__name { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-h3); color: var(--text-strong); line-height: var(--lh-heading); margin: 0; }
.member__role { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: var(--space-1); }
.member__verdict { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: var(--lh-snug); margin: 0 0 var(--space-4); }
.member__verdict--flag { color: var(--red-600); }
.member__verdict--clear { color: var(--ledger-600); }
.member__verdict--nodata { color: var(--text-muted); }
.member__cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.member__votes { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--text-muted); letter-spacing: 0.03em; margin-bottom: var(--space-4); }

.loading { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-muted); letter-spacing: 0.04em; }

/* --- Take action ------------------------------------------ */
.actions { display: grid; gap: var(--space-4); margin-block: var(--space-6); max-width: 520px; }
.actions .btn { justify-content: space-between; }
.signup { margin-top: var(--space-7); max-width: 520px; }
.signup__row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: stretch; }
.signup__row .field { flex: 1; min-width: 200px; }
.signup__msg { margin-top: var(--space-3); }
.signup__msg[hidden] { display: none; }
.signup__msg--ok { color: var(--ledger-600); font-weight: var(--fw-bold); }
.signup__msg--err { color: var(--red-600); font-weight: var(--fw-bold); }
.signup__msg--note { color: var(--text-muted); font-weight: var(--fw-bold); }

/* Toast — tokenized (replaces the former inline px styles in app.js) */
.toast {
  position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  background: var(--ink-900); color: var(--paper-100);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard); z-index: var(--z-toast);
}

/* --- Footer ----------------------------------------------- */
.footer { background: var(--surface-ink); color: var(--text-inverse); padding-block: var(--space-8); }
.footer .wordmark { color: var(--paper-100); font-size: clamp(1.1rem, 4vw, 1.5rem); }
.footer__tag { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--volt-500); letter-spacing: 0.04em; margin-top: var(--space-3); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-6); }
.footer__links a { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-inverse); text-decoration: none; }
.footer__links a:hover { box-shadow: inset 0 -3px 0 var(--volt-500); }
.footer__sources, .footer__disclaimer { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: color-mix(in srgb, var(--paper-500) 65%, transparent); line-height: var(--lh-loose); max-width: 80ch; }
.footer__disclaimer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-w-hair) solid color-mix(in srgb, var(--paper-500) 25%, transparent); }
.footer hr { border: none; border-top: var(--border-w-hair) solid color-mix(in srgb, var(--paper-500) 25%, transparent); margin-block: var(--space-6); }

/* ============================================================
   4. MOTION / A11Y
   ============================================================ */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

:focus-visible { outline: 3px solid var(--volt-500); outline-offset: 2px; }

/* Screen-reader-only text (e.g. "(opens in new tab)" on external links) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
[hidden] { display: none !important; }