/* ============================================================
   AskForSeniors.com — main.css
   APPROVED DESIGN SYSTEM · Version 3.0 · June 2026
   Orange/cream palette. No teal. Ever.
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* Accent */
  --color-accent:        #E8650A;  /* decorative — borders, icons, bg tints only */
  --color-accent-dark:   #893900;  /* hover states on light bg — NOT for body text. Canonical per Decisions Log 2026-06-17; #B84D00 was divergent. */
  --color-accent-light:  #FDF0E8;  /* RESULT TINT — Design v2.1 Rule 4 (2026-07-09): reserved for result-view + top-match stat surfaces on conversion pages only. Means "this is yours". NOT for general callouts, short answers, or asides — those use --color-aside. */
  --color-aside:         #F0EBE4;  /* Design v2.1 Rule 4 (2026-07-09): neutral warm tint for asides/callouts/short-answers. Distinct from the result tint. Body #444 → 8.7:1, accent-text #893900 → 6.8:1 (AA/AAA). */
  --color-accent-text:   #893900;  /* text on white/cream — 7.93:1 white, 7.05:1 cream (AAA) */
  --color-accent-on-dark:#FF8300;  /* text on dark bg (#1A1A1A) — 7.04:1 (AAA) */

  /* Backgrounds */
  --color-bg:           #F5F1EC;  /* warm cream — page background */
  --color-surface:      #FFFFFF;  /* white — cards, nav, footer */

  /* Text */
  --color-text:         #1A1A1A;  /* near-black — headings, primary */
  --color-text-mid:     #444444;  /* dark gray — body copy */
  --color-text-sec:     #555555;  /* secondary text, captions */

  /* Borders */
  --color-border:       #E8E4DF;  /* decorative card borders — unchanged per Design v2 A2 */
  --color-border-dark:  #C8C4BF;  /* legacy — MUST NOT be used on form-field borders (see --color-form-border) */
  --color-form-border:  #8C8880;  /* Design v2 A2 — form inputs/selects/textareas — 3.2:1 on white (WCAG 1.4.11) */
  --color-focus-ring:   #B84D00;  /* Design v2 A2 — focus indicator — 4.6:1 on cream */

  /* Dark-surface set (on #1A1A1A) — Design v2 A2 */
  --dark-surface:       #1A1A1A;
  --dark-text:          #F5F1EC;  /* headings on dark */
  --dark-body:          #D3D1C7;  /* body copy on dark */
  --dark-meta:          #B4B2A9;  /* meta/fine print on dark */
  --dark-eyebrow:       #F0997B;  /* accent eyebrow on dark */

  /* CTA button */
  --color-cta-bg:       #1A1A1A;
  --color-cta-text:     #FFFFFF;

  /* Semantic quartet — symbol-paired always (Design v2 A2) */
  --color-err:          #B3261E;  /* pair with △ */
  --color-ok:           #1B5E20;  /* pair with ✓ */
  --color-warn:         #854F0B;  /* trade-off — pair with ! on tint #FAEEDA */
  --color-warn-tint:    #FAEEDA;

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif; /* display headings — Design v2 A1; Fraunces→Lora, LOCKED Design & Decision Record §3 (2026-07-15) */

  /* Touch targets */
  --touch-target: 44px;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* ── BASE ── */
:root { font-size: 100%; } /* enables rem to respect browser zoom */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: 1.125rem;   /* 18px — NEVER go below this */
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-align: left;      /* NEVER justify */
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
/* Display face on h1–h3 only (LOCKED Design & Decision Record §3: "Use Lora
   for all headings"); h4–h6 stay on the body sans, matching the established
   sitewide pattern (every hand-built page's own h1,h2,h3{font-family:"Lora"}
   rule stops at h3). This rule previously pointed h1–h6 at var(--font)
   (system sans) even after --font-display above was corrected to Lora — the
   token was declared but never actually wired to a real heading element on
   any page using this stylesheet, which is how 103 state pages ended up
   still rendering Fraunces via state-page-v1.css's own separate --sp-display
   token instead. See the Decisions Log entry on the main.css Fraunces→Lora
   migration for the full account. */
h1, h2, h3 { font-family: var(--font-display); }
h4, h5, h6 { font-family: var(--font); }
h1 { font-size: 2.5rem;   font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } /* was 700 — outside Lora's self-hosted 400–600 weight axis; clamped to the axis top */
h2 { font-size: 1.875rem; font-weight: 600; } /* was 700 — same reason */
h3 { font-size: 1.375rem; font-weight: 600; }
h4 { font-size: 1.1875rem; font-weight: 600; }
h5 { font-size: 1.125rem;  font-weight: 600; }
h6 { font-size: 1rem;      font-weight: 600; }

p { margin-bottom: 1em; color: var(--color-text-mid); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-dark); }

small, .text-sm { font-size: 1rem; } /* 16px floor — never smaller in body */
.text-sec { color: var(--color-text-sec); font-size: 1rem; }

/* Display headings — Georgia for editorial weight */
.display-heading {
  font-family: var(--font-display);
  font-weight: 700;
}
.display-heading em, .display-heading i {
  color: var(--color-accent);
  font-style: italic;
}

/* Eyebrow / category label */
.eyebrow {
  font-size: 0.8125rem;  /* 13px — only acceptable sub-16 use: labels not body */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── ACCESSIBILITY — NON-NEGOTIABLE ── */

/* Skip navigation — FIRST element on every page */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  padding: 12px 24px;
  font-size: 1.125rem;
  font-weight: 700;
  z-index: 9999;
  text-decoration: none;
  border-bottom-right-radius: var(--r-md);
}
.skip-link:focus { top: 0; }

/* Focus ring — NEVER remove */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Touch targets — ALL interactive elements */
button, a, input, select, textarea, [role="button"], [tabindex] {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
}
/* Inline links are exempt from min-width (they flow with text) */
p a, li a, td a { min-width: unset; }

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

/* ── LAYOUT ── */
.page-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
@media (max-width: 640px) {
  .page-wrap { padding: 0 1.25rem; }
}

.section { padding: 4rem 0; }
.section--sm { padding: 2.5rem 0; }
.section--lg { padding: 5rem 0; }
.section--cream { background: var(--color-bg); }
.section--white { background: var(--color-surface); }

/* ── HEADER ── */
.site-header {
  background: var(--color-bg);   /* cream per Decisions Log 2026-06-16 afternoon — was var(--color-surface) white */
  border-bottom: 1px solid var(--color-border);
  padding: 0 2.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo */
.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.site-logo .logo-ask    { color: var(--color-text); }
.site-logo .logo-for    { color: var(--color-accent); font-style: italic; }
.site-logo .logo-seniors {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-left: 3px;
  align-self: center;
}

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}
.site-nav a {
  padding: 0.625rem 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  border-radius: var(--r-sm);
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--color-bg); color: var(--color-accent-dark); }
.site-nav a.is-active { color: var(--color-accent); font-weight: 600; }

/* Header CTA */
.header-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.header-search input {
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--color-form-border);
  border-radius: var(--r-md);
  font-size: 1rem;
  font-family: var(--font);
  min-height: var(--touch-target);
  background: var(--color-surface);
  color: var(--color-text);
  width: 180px;
}
.header-search input::placeholder { color: var(--color-text-sec); }

/* Mobile header */
.menu-btn {
  display: none;
  margin-left: auto;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--r-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; stroke: var(--color-text); fill: none; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 768px) {
  .site-header { padding: 0 1.25rem; }
  .site-nav, .header-search { display: none; }
  .menu-btn { display: flex; }
}

/* ── HERO ── */
.hero {
  padding: 0.75rem 0;
  background: var(--color-bg);
}
.hero .eyebrow { margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.75rem; }
.hero .eyebrow::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2px;
  background: var(--color-accent);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  max-width: 18ch;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}
.hero h1 em { color: var(--color-accent); font-style: italic; }
.hero .lede {
  font-size: 1.3125rem;
  line-height: 1.55;
  color: var(--color-text-mid);
  max-width: 42ch;
  margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
  .hero { padding: 0.5rem 0; }
  .hero .lede { font-size: 1.125rem; }
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  min-width: var(--touch-target);
  padding: 0.75rem 1.25rem;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-color: var(--color-cta-bg);
}
.btn--primary:hover  { background: #333333; border-color: #333333; color: #fff; }
.btn--primary:active { background: #000000; border-color: #000000; }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] {
  background: #999; border-color: #999; cursor: not-allowed;
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn--accent:hover  { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-dark);
}
.btn--secondary:hover { background: var(--color-bg); }

.btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent);
  padding: 0.75rem 0.5rem;
}
.btn--text:hover { text-decoration: underline; color: var(--color-accent-dark); }

.btn--lg  { font-size: 1.125rem; min-height: 56px; padding: 0.875rem 1.5rem; }
.btn--block { width: 100%; }

/* ── FORMS ── */
.field { display: grid; gap: 6px; }
.field label, .field .legend {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.field .hint  { font-size: 1rem; color: var(--color-text-sec); }
.field .err   {
  font-size: 1rem;
  color: var(--color-err);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field .err::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-err);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.input, .select {
  font: inherit;
  font-size: 1.125rem;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--color-form-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}
.input:hover, .select:hover { border-color: #888; }
.input[aria-invalid="true"] { border-color: var(--color-err); border-width: 2px; }

/* ── CARDS ── */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.card:hover {
  border-color: var(--color-border-dark);
  box-shadow: var(--shadow-card);
}
.card .eyebrow { margin-bottom: 0.25rem; }
.card h3, .card h4 { color: var(--color-text); }
.card p { color: var(--color-text-mid); margin-bottom: 0; }
.card-meta { font-size: 1rem; color: var(--color-text-sec); }
.card-arrow {
  margin-top: auto;
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}
.card-arrow::after { content: "→"; }

/* ── CALLOUTS ── */
.callout {
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent);
  background: var(--color-aside);   /* Design v2.1 Rule 4 (2026-07-09): aside tint, not the result tint */
  border-radius: var(--r-md);
  padding: 1.125rem 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
}
.callout .c-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.callout--warn {
  border-left-color: var(--color-err);
  background: #FDECEA;
  border-color: #F4C7C2;
}
.callout--warn .c-label { color: var(--color-err); }
.callout--disclaimer { font-size: 0.9375rem; }

/* ── AFFILIATE WRAPPER ── */
.affiliate {
  border: 1px dashed var(--color-border-dark);
  border-radius: var(--r-md);
  padding: 0.875rem 1rem;
  background: var(--color-surface);
  display: grid;
  gap: 6px;
}
.affiliate .disclosure { font-size: 0.9375rem; color: var(--color-text-mid); }
.affiliate .aff-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  min-height: var(--touch-target);
}
.affiliate .aff-link::after { content: "↗"; font-weight: 700; }

/* ── CTA BLOCKS ── */
.cta-block {
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.cta-block .tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-accent);
}
.cta-block.premium {
  background: var(--color-cta-bg);
  color: #fff;
  border-color: var(--color-cta-bg);
}
.cta-block.premium .tag   { color: #ccc; }
.cta-block.premium p      { color: #ccc; }
.cta-block.premium h3     { color: #fff; }

/* ── SIDEBAR NAV (topic list) ── */
.topic-nav { display: grid; gap: 0.25rem; }
.topic-nav .topic-group { margin-bottom: 1rem; }
.topic-nav .topic-group-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}
.topic-nav a {
  display: block;
  padding: 0.375rem 0.5rem;
  color: var(--color-text-mid);
  text-decoration: none;
  font-size: 1rem;
  border-radius: var(--r-sm);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
}
.topic-nav a:hover { background: var(--color-bg); color: var(--color-text); }

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 3rem 2.5rem;
  background: var(--color-bg);   /* cream per Design Source of Truth §2.7 + Decisions Log cream-top-to-bottom — was var(--color-surface) white */
  color: var(--color-text-mid);
  font-size: 1rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  max-width: 1180px;
  margin: 0 auto;
}
.site-footer h5 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.site-footer a { color: var(--color-text-mid); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.foot-meta {
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-sec);
  display: grid;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .site-footer { padding: 2rem 1.25rem; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ── DISCLAIMER BLOCKS ── */
.disclaimer {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-sec);
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* ── UTILITIES ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.no-margin  { margin: 0 !important; }
.text-center { text-align: center; }
.mt-sm  { margin-top: 0.5rem; }
.mt-md  { margin-top: 1rem; }
.mt-lg  { margin-top: 2rem; }
.mb-sm  { margin-bottom: 0.5rem; }
.mb-md  { margin-bottom: 1rem; }
.mb-lg  { margin-bottom: 2rem; }


/* ════════════════════════════════════════════════════════════════
   BUILD STANDARD v1.0 COMPONENT ADDITIONS — June 16, 2026
   ════════════════════════════════════════════════════════════════
   15 new components per Build Standard §1.3, §4, §5, §6, §7, §8,
   §9, §10, §11, §12. Existing component updates (header cream,
   footer cream, FAQ answer 18px) are applied inline above where
   the original rules lived.
   ════════════════════════════════════════════════════════════════ */


/* ── 1. TRUST STRIP ── */

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 1rem;            /* 16px floor — only acceptable sub-18px body context */
  color: var(--color-text-sec);
  letter-spacing: 0.01em;
  padding: 0.5rem 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.trust-strip .trust-seg {
  white-space: nowrap;
}

.trust-strip .trust-dot {
  color: var(--color-accent);
  font-weight: 700;
}

.trust-strip time {
  font-variant-numeric: tabular-nums;
}

/* Variants — distinguish by class on the parent <p> */
.trust-strip--exclusion { /* Type H — same styling, different segment content */ }
.trust-strip--game { /* Type F — same styling, different segments */ }
.trust-strip--utility { /* Type G — 3 segments instead of 5, same styling */ }


/* ── 2. SHORT ANSWER ── */

.short-answer {
  background: var(--color-aside);   /* Design v2.1 Rule 4 (2026-07-09): aside tint, not the result tint */
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  max-width: 720px;
  margin: 1.5rem 0 2rem 0;
}

.short-answer-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.5rem 0;
}

.short-answer-body {
  font-family: var(--font);     /* system sans, NOT Georgia */
  font-size: 1.125rem;          /* 18px body floor */
  font-weight: 500;             /* slightly heavier than body — signals "this is the answer" */
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}


/* ── 3. TOOL RESULT ── */

.tool-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin: 2rem 0;
}

@media (max-width: 768px) {
  .tool-result { padding: 1.5rem; }
}

.tool-result-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.75rem 0;
}

.tool-result-headline {
  font-family: var(--font-display);   /* Georgia serif */
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 1rem 0;
}

.tool-result-summary {
  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 1.5rem 0;
}

.tool-result-data {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.tool-result-data-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.tool-result-data-row:last-child {
  border-bottom: none;
}

.tool-result-data dt {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-sec);
  margin: 0;
}

.tool-result-data dd {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  text-align: right;
}

/* Variants */
.tool-result--editorial-gravity .tool-result-label::before {
  content: "🛈 ";
}

.tool-result--editorial-gravity .tool-result-label {
  /* visually identical default; label text changes to "Your result — informational" */
}

.tool-result--type-h {
  /* page-level Type H suppression handles commercial; result block visually identical */
}

.tool-result--no-action {
  /* visually identical; headline patterns lean declarative */
}


/* ── 4. TOOL INPUTS SUMMARY ── */

.tool-inputs-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.tool-inputs-summary header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.tool-inputs-summary dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.tool-inputs-summary dt {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-sec);
  margin: 0;
}

.tool-inputs-summary dd {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 768px) {
  .tool-inputs-summary dl {
    grid-template-columns: 1fr;
  }
}


/* ── 5. EDITOR'S RECOMMENDATION ── */

.editors-recommendation {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.editors-recommendation-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.5rem 0;
}

.editors-recommendation-headline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 0.75rem 0;
}

.editors-recommendation-why {
  font-size: 1.125rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

.editors-recommendation-contact {
  font-size: 1rem;
  color: var(--color-text-sec);
  margin: 0 0 1rem 0;
}

.editors-recommendation-contact a {
  color: var(--color-accent);
  text-decoration: none;
}

.editors-recommendation-contact a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.editors-recommendation-link {
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  /* NOT a button — editorial reference */
}

.editors-recommendation-link:hover {
  text-decoration: underline;
  color: var(--color-accent-dark);
}


/* ── 6. PAID PARTNER COMPANION ── */

.paid-partner-companion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* NO left rule — distinguishes from editors-recommendation */
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.paid-partner-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-sec);   /* GRAY not orange — distinguishes from editorial */
  margin: 0 0 0.5rem 0;
}

.paid-partner-disclosure {
  font-size: 0.9375rem;            /* 15px secondary-disclaimer floor */
  color: var(--color-text-sec);
  line-height: 1.55;
  margin: 0 0 1rem 0;
}

.paid-partner-headline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 0.75rem 0;
}

.paid-partner-body {
  font-size: 1.125rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
}

/* 300px ad-exclusion zone on Type D pages — JavaScript enforces against
   surrounding ad slots; this CSS provides the visual breathing room */
.paid-partner-companion .btn--primary {
  margin: 0;
}


/* ── 7. INLINE TOOL CALLOUT ── */

.inline-tool-callout {
  background: var(--color-aside);   /* Design v2.1 Rule 4 (2026-07-09): aside tint, not the result tint */
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin: 2rem 0;
}

.inline-tool-callout .eyebrow {
  margin: 0 0 0.5rem 0;
}

.inline-tool-callout h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.75rem 0;
}

.inline-tool-callout p {
  font-size: 1.125rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
}

.inline-tool-callout .btn--accent {
  /* The rare permitted orange-CTA use — signals side branch from
     main editorial reading. Per Design Source of Truth §3.1 and
     Build Standard §6.3. */
}


/* ── 8. STATE DATA POINT ── */

.state-data-point {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.state-data-point .eyebrow {
  margin: 0 0 1rem 0;
}

.state-data-point dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin: 0;
}

@media (max-width: 768px) {
  .state-data-point dl {
    grid-template-columns: 1fr;
  }
}

.state-data-point dt {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-sec);
  margin: 0;
}

.state-data-point dd {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
}


/* ── 9. DAILY SPARK HOOK ── */

.daily-spark-hook {
  background: var(--color-bg);     /* cream — matches page */
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0;
  margin: 2rem 0 0 0;
}

.daily-spark-hook .page-wrap {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 768px) {
  .daily-spark-hook .page-wrap {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.daily-spark-hook .eyebrow {
  margin: 0 0 0.5rem 0;
}

.daily-spark-hook-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.daily-spark-hook-body {
  font-size: 1.125rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  margin: 0;
}

.daily-spark-hook-cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .daily-spark-hook-cta {
    align-items: flex-start;
  }
}

.streak-badge {
  font-size: 1rem;
  color: var(--color-text-sec);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.streak-tick {
  color: var(--color-accent);
  font-size: 0.75em;
}

.daily-spark-link {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.daily-spark-link:hover {
  text-decoration: underline;
  color: var(--color-accent-dark);
}


/* ── 10. CROSS-LINK BLOCK ── */

.cross-link-block {
  margin: 2rem 0;
}

.cross-link-block h2 {
  margin: 0 0 0.75rem 0;
}

.cross-link-block p {
  font-size: 1.125rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.county-list,
.city-list,
.cross-link-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}

@media (max-width: 768px) {
  .county-list,
  .city-list,
  .cross-link-list {
    grid-template-columns: 1fr;
  }
}

.county-list li a,
.city-list li a,
.cross-link-list li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.county-list li a:hover,
.city-list li a:hover,
.cross-link-list li a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.county-list .meta,
.city-list .meta,
.cross-link-list .meta {
  font-size: 0.9375rem;
  color: var(--color-text-sec);
}

.cross-link-block .section-link {
  font-weight: 600;
  color: var(--color-accent);
}

.cross-link-block .section-link:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}


/* ── 11. CROSS-PROMO STRIP ── */

.cross-promo-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

@media (max-width: 1024px) {
  .cross-promo-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .cross-promo-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cross-promo-strip > a {
  display: block;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease;
}

.cross-promo-strip > a:hover {
  border-color: var(--color-border-dark);
}

.cross-promo-strip .eyebrow {
  color: var(--color-text-sec);    /* gray, not orange — subordinates the strip */
  margin: 0 0 0.25rem 0;
}

.cross-promo-strip h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}


/* ── 12. CALLOUT EXCLUSION VARIANT ── */

.callout--exclusion {
  /* inherits .callout from existing main.css */
  /* differentiated by label text, not visual styling — already has
     orange left rule and accent-light background from base .callout */
}

.callout--exclusion .c-label {
  /* "Editorial exclusion" label text */
}


/* ── 13. CARD COMING VARIANT ── */

.card--coming {
  border-color: rgba(232, 228, 223, 0.6);   /* var(--color-border) at 60% opacity */
}

.card--coming .card-arrow {
  color: var(--color-text-sec);    /* gray, not orange */
}

.card--coming .eyebrow {
  color: var(--color-text-sec);    /* "Coming for AEP" not orange */
}


/* ── 14. AD SLOT ── */

.ad-slot {
  max-width: 100%;
  margin: 1.5rem auto;
  padding: 0;
  text-align: center;
}

.ad-slot-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-sec);
  margin: 0 0 0.5rem 0;
  /* hidden until ad serves */
  display: none;
}

.ad-slot.ad-slot--served .ad-slot-label {
  display: block;
}

.ad-slot--leaderboard {
  max-width: 728px;
  margin: 1rem auto 1.5rem;
}

@media (max-width: 768px) {
  .ad-slot--leaderboard {
    max-width: 320px;
  }
}

/* min-height/content-visibility on --in-content and --sidebar (2026-07-19,
   Monetization Maximization Plan §2 follow-up): an empty slot with no
   reserved height collapses to 0px pre-provisioning and can still shift
   layout once a network is live. content-visibility:auto is the CLS-safe,
   no-JS-required way to defer a below-the-fold slot's rendering cost with
   no live ad network wired in yet to hang a real loading="lazy" iframe
   off of (matches the treatment given the county-frontdoor above-footer
   unit, ported here since dental/medicare/benefits pages consume this
   shared file directly instead of embedding their own copy). */
.ad-slot--in-content {
  max-width: 336px;
  min-height: 250px;
  margin: 2rem auto;
  content-visibility: auto;
  contain-intrinsic-size: 336px 250px;
}

.ad-slot--sidebar {
  max-width: 300px;
  min-height: 600px;
  margin: 1rem 0;
  position: sticky;
  top: 88px;
  content-visibility: auto;
  contain-intrinsic-size: 300px 600px;
}

.ad-slot--above-footer {
  max-width: 970px;
  margin: 2rem auto 1.5rem;
}

@media (max-width: 768px) {
  .ad-slot--above-footer {
    max-width: 320px;
  }
}

/* Type F games post-game result screen: one anchor unit below the share
   module, then one in-content unit (Placement Spec Type F, amended 2026-07-02).
   Never during play; never an interstitial. */
.ad-slot--anchor {
  max-width: 728px;
  margin: 1.5rem auto;
}

@media (max-width: 768px) {
  .ad-slot--anchor {
    max-width: 320px;
  }
}


/* ── 15. MODAL ── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.6);
  animation: modal-backdrop-in 200ms ease-out;
}

.modal-content {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  animation: modal-content-in 250ms ease-out;
}

@media (max-width: 768px) {
  .modal-content {
    padding: 1.5rem;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  transition: background 0.15s ease;
}

.modal-close:hover {
  background: var(--color-bg);
}

.modal-body {
  font-size: 1.125rem;
  color: var(--color-text-mid);
  line-height: 1.6;
}

.modal-body p {
  margin: 0 0 1rem 0;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-content-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal-content {
    animation: none;
  }
}




/* ════════════════════════════════════════════════════════════════
   END OF BUILD STANDARD COMPONENT ADDITIONS
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   DESIGN v2 ADDITIONS · 2026-07-02
   Governed by AskForSeniors-Design-SoT-v2-Amendment.md (A1–A6)
   ════════════════════════════════════════════════════════════════ */

/* ── A1. Lora (self-hosted variable, weight axis 400–600) ──
   Replaces the original Fraunces face (cut per LOCKED Design & Decision
   Record §3, 2026-07-15: "Fraunces was too expressive — curly f / pinched
   g"). Same self-hosted files every hand-built page already links directly
   (/assets/fonts/lora-variable.woff2 + italic) — declared once here so
   every page linking main.css gets it for free, instead of each page
   re-declaring its own @font-face. */
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-variable-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

/* ── A1. Display type scale ── */
.display,
h1.display,
h2.display,
h3.display,
.hero-h1,
.hub-h1,
.stat-figure,
.situation-phrase,
.guide-title,
.article-h1 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.hero-h1, .hub-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  /* First-viewport rule (Amendment A3): hero + top row of situation cards
     must fit in the first viewport at 1440×900 and 390×844. Cap H1 at 3rem. */
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.article-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.15;
}
@media (max-width: 640px) { .article-h1 { font-size: 2rem; } }

h2.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.25rem;
}
@media (max-width: 640px) { h2.display { font-size: 1.75rem; } }

/* ── A3. Question hero ── */
.q-hero {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  /* First-viewport rule (Amendment A3): halved from 3.5/2.75 so the
     hero + top row of situation cards land in the first viewport. */
  padding: 1.75rem 1.5rem 1.5rem;
}
.q-hero-inner { max-width: 1140px; margin: 0 auto; }
.q-hero-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 1rem;
}
.q-hero-lede {
  font-size: 1.1875rem;
  color: var(--color-text-mid);
  max-width: 44ch;
  margin-top: 1rem;
  line-height: 1.55;
}

/* ── A3. Situation router ── */
.situation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1140px;
  margin: 1.25rem auto 2.5rem;
  padding: 0 1.5rem;
}
@media (max-width: 900px) { .situation-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .situation-grid { grid-template-columns: 1fr; } }

.situation-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.situation-card:hover,
.situation-card:focus-visible {
  border-color: var(--color-text);
  box-shadow: var(--shadow-card);
}
.situation-phrase {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.situation-sub {
  font-size: 1rem;
  color: var(--color-text-sec);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.situation-action {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.situation-action::after { content: ' →'; }

.situation-more {
  max-width: 1140px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  text-align: center;
}
.situation-more a {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── A3. Editorial stat band (dark) ── */
.stat-band {
  background: var(--dark-surface);
  color: var(--dark-text);
  padding: 4rem 1.5rem;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.stat-band-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .stat-band-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
.stat-figure {
  font-family: var(--font-display);
  font-weight: 600;
  /* Cap at 3.5rem (Amendment A1) so the figure keeps first-viewport
     headroom for the situation cards above. */
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dark-text);
}
.stat-claim {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.25;
  color: var(--dark-text);
  max-width: 34ch;
  margin-bottom: 0.75rem;
}
.stat-support {
  font-size: 1.0625rem;
  color: var(--dark-body);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 52ch;
}
.stat-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--dark-text);
  color: var(--dark-surface);
  border: none;
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  min-height: var(--touch-target);
  cursor: pointer;
}
.stat-cta::after { content: ' →'; }
.stat-cta:hover { background: #FFF; }
.stat-fine {
  display: block;
  font-size: 0.9375rem;
  color: var(--dark-meta);
  margin-top: 1.25rem;
  max-width: 60ch;
  line-height: 1.5;
}
.stat-fine a { color: var(--dark-meta); text-decoration: underline; }

/* ── A3. Local rows ── */
.local-rows {
  max-width: 1140px;
  margin: 3.5rem auto 3rem;
  padding: 0 1.5rem;
}
.local-rows-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.local-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.local-row:last-child { border-bottom: none; }
.local-row-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 0.375rem;
}
.local-row-name {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.local-row-desc {
  font-size: 1rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  margin: 0;
}
.local-row-action {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ── A3. Featured guide ── */
.featured-guide {
  max-width: 1140px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}
.featured-guide-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  display: block;
  text-decoration: none;
  color: inherit;
}
.featured-guide-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 0.75rem;
}
.featured-guide-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  max-width: 34ch;
  letter-spacing: -0.01em;
}
.featured-guide-dek {
  font-size: 1.0625rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  max-width: 56ch;
  margin-bottom: 1.25rem;
}
.featured-guide-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-radius: 999px;
  padding: 0.75rem 1.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  min-height: var(--touch-target);
}
.featured-guide-cta::after { content: ' →'; }

/* ── A5. Referral slab ── */
.referral-slab {
  background: var(--dark-surface);
  color: var(--dark-text);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  max-width: 1140px;
  /* Design v2.1 Rule 4.1 (2026-07-09): quiet-zone staging — ≥64px whitespace
     immediately precedes the slab so it reads as a considered recommendation,
     entered through whitespace, not one row among equal boxes. The free/editorial
     alternative (.free-alternative) renders immediately ABOVE it. A 300px
     ad-exclusion zone is maintained around the slab (see .referral-slab-stage). */
  margin: 4rem auto 2rem;
}
/* When a free-alternative sits directly above, the two form one staged unit:
   the quiet zone opens before the free alternative, and the slab hugs it. */
.free-alternative + .referral-slab { margin-top: 1rem; }
.referral-slab-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-eyebrow);
  margin-bottom: 0.75rem;
}
.referral-slab-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--dark-text);
  margin-bottom: 0.75rem;
  max-width: 34ch;
}
.referral-slab-support {
  font-size: 1.0625rem;
  color: var(--dark-body);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 56ch;
}
.referral-slab-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--dark-text);
  color: var(--dark-surface);
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  min-height: var(--touch-target);
}
.referral-slab-meta {
  font-size: 0.9375rem;
  color: var(--dark-body);
  margin-top: 0.75rem;
}
.referral-slab-rule {
  border: none;
  border-top: 1px solid #444441;
  margin: 1.5rem 0 1rem;
}
.referral-slab-disclosure {
  font-size: 0.9375rem;
  color: var(--dark-meta);
  line-height: 1.5;
  margin: 0;
}

/* ── A5. Match cards ── */
.match-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 900px) { .match-grid { grid-template-columns: 1fr; } }
.match-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.match-card.is-top {
  border: 1.5px solid var(--color-text);
}
.match-card-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-sec);
}
.match-card.is-top .match-card-eyebrow { color: var(--color-accent-text); }
.match-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--color-text);
}
.match-card-stats {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
  display: grid;
  gap: 0.5rem;
}
/* Design v2.1 Rule 4.2 (2026-07-09): the result tint (#FDF0E8) backs the TOP
   match's stat panel only — "one warm panel makes the top match's numbers the
   first thing scanned." Tint = "this is yours", restored to result surfaces. */
.match-card.is-top .match-card-stats {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.875rem;
}
.match-card-stat {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--color-text-mid);
}
.match-card-tradeoff {
  background: var(--color-warn-tint);
  border-left: 3px solid var(--color-warn);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--color-warn);
  line-height: 1.5;
}
.match-card-tradeoff strong { color: var(--color-warn); }
.match-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  min-height: var(--touch-target);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-text);
}
.match-card.is-top .match-card-cta {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-color: var(--color-cta-bg);
}
.match-card-disclosure {
  font-size: 0.875rem;
  color: var(--color-text-sec);
  line-height: 1.4;
}

/* ── A6. Publication review line ── */
.review-line {
  font-size: 1rem;
  color: var(--color-text-sec);
  line-height: 1.55;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
}
.review-line a { color: var(--color-accent-text); text-decoration: underline; }

/* ── A4. Artifact figures ── */
figure.artifact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
}
figure.artifact img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
}
figure.artifact figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-sec);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   DESIGN v2.1 ADDITIONS · 2026-07-09  (visual compellingness pass)
   Governed by AskForSeniors-Design-SoT-v2-Amendment.md Rules 1–4
   (Editor Decisions Log 2026-07-09). Adds the two missing layers the
   Fable 5 audit named — pacing and figures — using existing tokens.
   No new conversion component types. AA floor / AAA type targets hold.
   ════════════════════════════════════════════════════════════════ */

/* ── Rule 1. Band / pacing layout — rows, not boxes ──────────────────
   Extends the homepage's band-and-rule ordering (A3 §6 local-rows) to
   hub and state page templates. A `.band` is a full-bleed horizontal
   region; `.band--dark` is the single loud surface on the page (the
   dark stat band or referral slab — never two). Lists inside a band
   render as `.pace-rows` (hairline rows over a 2px near-black rule),
   not as a grid of equal-weight white boxes. Layout ordering only —
   no new components, no compliance impact. */
.band {
  padding: 3rem 0;
}
.band--tight { padding: 2rem 0; }
.band--cream { background: var(--color-bg); }
.band--white { background: var(--color-surface); }
.band--dark  { background: var(--dark-surface); color: var(--dark-text); }
.band-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* One loud element per band: a band may contain at most one display
   figure OR one dark surface. This is an authoring rule; the heading
   below documents it for template partials. */
.band-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 0.5rem;
  margin: 0 0 0.5rem;
}
/* Rows, not boxes — the "rule under the heading, hairline rows below"
   pattern generalized from A3 local-rows so hub/state lists inherit it. */
.pace-rows { display: grid; }
.pace-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.pace-row:last-child { border-bottom: none; }
.pace-row-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 0.375rem;
}
.pace-row-name {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.pace-row-desc {
  font-size: 1rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  margin: 0;
}
.pace-row-action {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .pace-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ── Rule 2. Display-figure layer ────────────────────────────────────
   Lora at display scale beside the headings (never raising the H1/H2
   caps). Two forms, max ONE per band:
   (a) `.display-figure` — a REAL data figure. Any stat shown here must be
       source-verified and year-flagged before ship (Pre-Ship Gate duty).
   (b) `.glyph-ornament` — a purely decorative, aria-hidden glyph. Faint
       neutral color; contrast rules do not apply to decoration, but it
       never uses the result tint (kept meaningful for "yours"). */
.display-figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);  /* A1 stat-band figure cap */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.band--dark .display-figure { color: var(--dark-text); }
.display-figure-unit {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0;
}
.glyph-ornament {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 2rem + 8vw, 8rem);
  line-height: 0.8;
  color: var(--color-border);   /* faint decorative — NOT the result tint */
  user-select: none;
  pointer-events: none;
}

/* ── Rule 3. .specimen-figure (non-conversion component) ─────────────
   Displays a sanctioned artifact-figure image (official CMS sample cards,
   SSA sample letters, blank forms, state maps) per Design SoT v2 Rule 5:
   the artifact image is UNMODIFIED with its watermark retained; all
   annotations are rendered as HTML/SVG OUTSIDE the image. Functional alt
   text on the <img>, a teaching caption in <figcaption>, and source +
   retrieval date recorded in the caption.
   IMAGE-FREE-ZONE RULES STILL APPLY: never placed inside a conversion
   block or ad-adjacent; keep ≥1 viewport from any .referral-slab /
   .match-grid and outside the 300px ad-exclusion zone. Explicitly NOT a
   conversion component. */
.specimen-figure {
  margin: 2rem 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
.specimen-figure-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 0.75rem;
}
.specimen-figure-body {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 640px) {
  .specimen-figure-body { flex-direction: column; }
}
/* Image column — the unmodified artifact lives here; annotation dots are
   positioned OUTSIDE the artifact edge via this relative wrapper. */
.specimen-figure-plate {
  flex: 1.3;
  position: relative;
}
.specimen-figure-plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-form-border);
  border-radius: var(--r-md);
}
.specimen-anno-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* Annotations column — numbered teaching notes, rendered outside the image. */
.specimen-figure-notes {
  flex: 1;
  display: grid;
  gap: 0.75rem;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.specimen-figure-notes li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.specimen-anno-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.specimen-figure-notes p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-mid);
}
.specimen-figure figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-sec);
}

/* ── Rule 4.1. Free / editorial alternative above the referral slab ──
   The free, non-commercial alternative (e.g. HICAP / SHIP) renders in
   this quiet editorial row immediately ABOVE the dark .referral-slab, so
   the honest option is seen first. It is intentionally NOT a card and NOT
   dark — a hairline-topped row, so the slab remains the only loud surface. */
.free-alternative {
  max-width: 1140px;
  margin: 4rem auto 0;   /* opens the ≥64px quiet zone before the staged unit */
  padding: 1.25rem 0 0;
  border-top: 2px solid var(--color-text);
}
.free-alternative-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 0.375rem;
}
.free-alternative-name {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.free-alternative p {
  font-size: 1rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  margin: 0 0 0.5rem;
}
.free-alternative a {
  font-weight: 700;
  color: var(--color-accent-text);
  text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════
   END DESIGN v2 ADDITIONS
   ════════════════════════════════════════════════════════════════ */