/* Benefit Guardian design system (v2, 2026-10).
   Light, fast, phone-first. No web fonts: system fonts render instantly on low-cost phones.
   Content pages carry legacy utility classes (Tailwind names); the subset they use is mapped
   onto the tokens below so every existing page adopts the new design without markup changes. */

:root {
  --ink: #10243a;          /* body text */
  --ink-2: #33475b;        /* secondary text */
  --muted: #5a6d80;        /* captions, meta */
  --line: #d7e0e9;         /* borders */
  --surface: #f4f7fa;      /* panels */
  --surface-2: #eaf1f8;    /* tinted panels */
  --brand: #0b5cab;        /* links, primary actions (6.9:1 on white) */
  --brand-dark: #083f78;
  --brand-ink: #0a2540;    /* header, dark panels */
  --brand-tint: #e8f1fb;
  --accent: #b45309;       /* dates and deadlines (5.0:1 on white) */
  --accent-tint: #fff5e6;
  --ok: #11703f;
  --ok-tint: #e8f6ee;
  --bad: #b42318;          /* negative verdicts (6.6:1 on white) */
  --bad-tint: #fdeceb;
  --radius: 12px;
  --radius-lg: 18px;
  --measure: 46rem;
  --wide: 70rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-dark); text-decoration-thickness: 2px; }
/* Focus ring: yellow with a dark outer edge (and a white gap inside), so it shows on white content (the yellow
   alone is 1.8:1 on white) as well as on the navy header, footer and panels, where the dark edge is dropped. */
:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 2px #fff, 0 0 0 7px var(--brand-ink); }
:is(.bg-header, .bg-footer) :focus-visible { box-shadow: none; }
strong, b { font-weight: 700; }
small { font-size: 0.85em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */
/* Below 60rem the header scrolls away with the page and the nav wraps into rows of 44 px pills, so every link
   is visible (no hidden sideways scroller). From 60rem it is one 64 px row that stays pinned to the top. */
.bg-header { background: var(--brand-ink); color: #fff; }
.bg-header-inner { max-width: var(--wide); margin: 0 auto; padding: 0.375rem 1rem 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.bg-logo { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.bg-logo:hover { color: #fff; }
.bg-logo svg { width: 28px; height: 32px; flex: none; }
.bg-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; width: 100%; }
.bg-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #dbe7f3; text-decoration: none; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.bg-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
/* The current page (aria-current, set by the build) is a white pill on phones and a gold underline from 60rem. */
.bg-nav a[aria-current="page"] { color: var(--brand-ink); background: #fff; }
.bg-nav .nav-affiliate { color: #b9c9d9; font-weight: 500; }
.bg-nav .nav-affiliate small { font-size: 0.75rem; opacity: 0.85; margin-left: 0.25em; }
/* In-page links and the skip link land a little below the top edge (below the pinned header from 60rem). */
html { scroll-padding-top: 1rem; }
@media (min-width: 60rem) {
  html { scroll-padding-top: 5rem; }
  .bg-header { position: sticky; top: 0; z-index: 50; }
  .bg-header-inner { flex-wrap: nowrap; padding: 0 1rem; min-height: 4rem; }
  .bg-nav { flex-wrap: nowrap; gap: 0.25rem; width: auto; margin-left: auto; align-self: stretch; }
  .bg-nav a { min-height: 0; padding: 0 0.8rem; border-radius: 0; background: none; font-size: 0.95rem; border-bottom: 3px solid transparent; }
  .bg-nav a:hover, .bg-nav a[aria-current="page"] { color: #fff; background: none; border-bottom-color: #f2b705; }
  /* Each link fills the 64 px bar from the top of the screen: draw its focus ring inside the link. */
  .bg-nav a:focus-visible { outline-offset: -5px; }
}

/* ---------- Footer ---------- */
.bg-footer { background: var(--brand-ink); color: #c9d6e3; margin-top: 3.5rem; font-size: 0.95rem; }
.bg-footer-inner { max-width: var(--wide); margin: 0 auto; padding: 2.5rem 1rem 1rem; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .bg-footer-inner { grid-template-columns: 2fr 1fr 1fr; } }
.bg-footer p { margin: 0.75rem 0 0; line-height: 1.55; max-width: 34rem; }
.bg-footer h2 { color: #fff; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.6rem; }
.bg-footer nav a { display: block; color: #dbe7f3; text-decoration: none; padding: 0.3rem 0; }
.bg-footer nav a:hover { color: #fff; text-decoration: underline; }
.bg-footer-legal { max-width: var(--wide); margin: 0 auto; padding: 1rem 1rem 2rem; border-top: 1px solid #23415f; color: #9fb3c8; font-size: 0.85rem; }
.bg-footer-legal a { color: #dbe7f3; }

/* ---------- Page frame ---------- */
/* The content grows to fill short pages, so the footer sits at the bottom of the screen and always keeps its
   own top margin as the gap below the content (an auto margin on the footer collapsed to 0 on long pages). */
.guide-shell, .v2-shell { min-height: 100vh; display: flex; flex-direction: column; }
.v2-shell > #main { flex: 1 0 auto; }
.program-route, .legacy-learn-html, .legacy-article, .trend-page, .guide-main, .legacy-card-html,
.card-guide-hub, .deep-guide, .legacy-hero, main.v2-main { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
.legacy-program-html, .legacy-learn-html, .legacy-article, .legacy-hero { padding-top: 1.5rem; }
/* One gutter only: frames nested in a padded frame, and the legacy pages' own Tailwind gutter wrappers
   (px-4/px-6 + mx-auto, which left a 240 px column on a 320 px phone), drop their side padding. */
.program-route > .legacy-program-html, .program-route > article, .program-route > .trend-page,
.guide-main .card-guide-hub,
:is(.legacy-learn-html, .legacy-card-html, .legacy-program-html) :is(.px-4, .px-6).mx-auto { padding-left: 0; padding-right: 0; }
.v2-wide { max-width: var(--wide); margin: 0 auto; padding: 0 1rem; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; letter-spacing: -0.015em; margin: 0; font-weight: 800; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem); letter-spacing: -0.025em; margin-top: 0.5rem; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem); margin-top: 2.5rem; }
h3 { font-size: 1.2rem; margin-top: 1.75rem; font-weight: 700; }
h4 { font-size: 1.05rem; margin-top: 1.25rem; font-weight: 700; }
p { margin: 0.9rem 0 0; }
ul, ol { margin: 0.9rem 0 0; padding-left: 1.4rem; }
li { margin-top: 0.4rem; }
li > ul, li > ol { margin-top: 0.4rem; }
blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 4px solid var(--brand); background: var(--brand-tint); }
article > p:first-of-type, .lead, .lede, .trend-lede { font-size: 1.12em; color: var(--ink-2); }

/* breadcrumb */
nav.text-sm, nav.breadcrumb, .breadcrumb { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.25rem; }
nav.text-sm a, .breadcrumb a { color: var(--muted); }
/* Inline padding gives each breadcrumb link a taller tap area without moving the line. */
:is(nav.text-sm, nav.text-xs, .breadcrumb) a { padding-block: 0.6rem; }

/* byline / updated */
.updated, .byline, .trend-byline, .benefits-byline { color: var(--muted); font-size: 0.92rem; }

/* ---------- Tables ---------- */
/* Cells never break inside a word or figure (see the overflow-wrap rules at the end of this file): a table
   wider than the screen scrolls sideways inside its wrapper. Edge shadows show that columns are hidden; the
   white covers move with the content (local) and hide each shadow once that edge is reached. Cell and row
   tints are translucent so the shadows show through them. */
:root {
  --scroll-cue:
    linear-gradient(90deg, #fff 40%, rgba(255, 255, 255, 0)) left / 2.5rem 100% no-repeat local,
    linear-gradient(270deg, #fff 40%, rgba(255, 255, 255, 0)) right / 2.5rem 100% no-repeat local,
    linear-gradient(90deg, rgba(16, 36, 58, 0.3), rgba(16, 36, 58, 0)) left / 1.25rem 100% no-repeat scroll,
    linear-gradient(270deg, rgba(16, 36, 58, 0.3), rgba(16, 36, 58, 0)) right / 1.25rem 100% no-repeat scroll,
    #fff;
}
table { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th, th { background: rgba(11, 92, 171, 0.045); color: var(--ink); font-weight: 700; font-size: 0.9rem; }
tbody tr:nth-child(even) td { background: rgba(11, 92, 171, 0.018); }
:is(thead, tr):is(.bg-slate-50, .bg-slate-100, .bg-gray-50) { background: none; }
tr:is(.bg-slate-50, .bg-slate-100, .bg-gray-50) > td { background: rgba(11, 92, 171, 0.045); }
td a { font-weight: 600; }
/* A link in a cell gets a taller tap area (about 38 px for one line); inline padding does not move the text or
   the row, and it stays inside the cell's own top and bottom padding. */
:where(#main td) a { padding-block: 0.6rem; }
a[href^="tel:"] { white-space: nowrap; }
/* Row-header labels keep a readable width, so a table with many figure columns scrolls instead of printing
   the label one word per line. */
tbody th { min-width: min(11rem, 40vw); }
/* Summer EBT state table: three text columns over 50 rows; a minimum width keeps 'Deadline' off one word a line. */
.sun-table > table { min-width: 22rem; }
.overflow-x-auto, .table-wrap, .sun-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 1rem; background: var(--scroll-cue); }
:is(.overflow-x-auto, .table-wrap, .sun-table) > table { margin: 0; border: 0; }
:is(.overflow-x-auto, .table-wrap, .sun-table) :is(th, td) { border-left: 0; border-right: 0; }
@media (min-width: 40rem) {
  /* Tablets and desktops: tables that fit the column keep fitting with whole words and figures.
     8+ column figure tables (income limits for households of 1-8) get compact cells, so the eight figures and an
     11rem label column fit the 46rem column instead of scrolling. */
  #main table:has(tr > :nth-child(8)) :is(th, td) { padding-left: 0.4rem; padding-right: 0.4rem; }
  /* A cell holding just a link keeps at least 7rem: the long-text column beside it does the wrapping, so a link
     reads in one or two lines ('view source' on one) instead of three with a lone last word. */
  #main td:has(> a:only-child) { min-width: 7rem; }
}
@media (max-width: 40rem) {
  table:not(:is(.overflow-x-auto, .table-wrap, .sun-table) table) { display: block; overflow-x: auto; background: var(--scroll-cue); }
  th, td { padding: 0.55rem 0.5rem; }
  /* Beats the legacy .px-4/.pr-4 cell utilities, which kept 16 px side padding on phones (.p-2 is 0.5rem too). */
  #main th, #main td { padding-left: 0.5rem; padding-right: 0.5rem; }
}
/* 320-360 px phones: tighter cells and 12 px header labels, so a four-column figure table (the SNAP limits) fits
   the screen with room to spare (about 20 px at 320) instead of cutting its last column mid-figure. Only header
   rows (no td) shrink: a row-header label beside figures (Missouri's MO HealthNet rows) keeps the usual size. */
@media (max-width: 22.5rem) {
  #main th, #main td { padding-left: 0.375rem; padding-right: 0.375rem; }
  #main tr:not(:has(> td)) > th { font-size: 0.75rem; }
}

/* ---------- Callouts and cards (legacy components) ---------- */
.program-checker-link, .cta-box, .trend-cta, .learn-changing-box, .research-inbound,
.trend-note, .program-rule-changes {
  display: block; background: var(--brand-tint); border: 1px solid #c9dcf1; border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: 1.5rem auto 0; color: var(--ink);
}
/* These two sit directly in #main, outside any padded frame: they take the frame's gutter and content width. */
.learn-changing-box, .research-inbound { width: calc(100% - 2rem); max-width: calc(var(--measure) - 2rem); }
.program-checker-link a { font-weight: 700; font-size: 1.05rem; }
.program-checker-link p { margin-top: 0.35rem; color: var(--ink-2); font-size: 0.95rem; }
.trend-urgent { border-left: 5px solid var(--accent); background: var(--accent-tint); padding: 1rem 1.15rem; margin-top: 1.5rem; border-radius: var(--radius); }
.related-programs { margin: 2.5rem 0 0; padding: 1.25rem 1.25rem 1.4rem; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.related-programs h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.related-programs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem 1.5rem; }
@media (min-width: 40rem) { .related-programs ul { grid-template-columns: 1fr 1fr; } }
.related-programs li { margin: 0; }
.related-programs a { display: block; padding: 0.4rem 0; font-weight: 600; text-decoration: none; }
.related-programs a:hover { text-decoration: underline; }
.kicker, .trend-kicker, .benefits-kicker, .tools-kicker { color: var(--brand); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.card-guide-grid, .leader-grid { display: grid; gap: 0.9rem; margin-top: 1rem; }
@media (min-width: 40rem) { .card-guide-grid, .leader-grid { grid-template-columns: 1fr 1fr; } }
.card-guide-tile, .leader-tile { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); background: #fff; }
.card-guide-tile:hover, .leader-tile:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(16, 36, 58, 0.08); color: var(--ink); }
.leader-tile span { display: block; color: var(--brand); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; }
.leader-tile strong { display: block; font-size: 1.05rem; margin-top: 0.25rem; }
.leader-tile b { display: block; color: var(--ok); margin-top: 0.25rem; }
.leader-tile small { display: block; color: var(--muted); margin-top: 0.35rem; }

/* ---------- Utilities used by legacy content (Tailwind names, mapped to tokens) ---------- */
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; }
.p-6 { padding: 1.25rem 1.35rem; } .p-8 { padding: 1.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pb-5 { padding-bottom: 1.25rem; }
.pl-6 { padding-left: 1.5rem; } .pr-4 { padding-right: 1rem; }
.block { display: block; } .inline-block { display: inline-block; } .hidden { display: none; }
.grid { display: grid; } .flex { display: flex; } .items-center { align-items: center; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
@media (min-width: 40rem) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-1 { grid-template-columns: 1fr; }
}
@media (min-width: 48rem) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:text-3xl { font-size: 1.9rem; } }
.space-y-1 > * + * { margin-top: 0.25rem; } .space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; } .space-y-6 > * + * { margin-top: 1.5rem; }
.max-w-md { max-width: 28rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; }
.max-w-3xl, .max-w-4xl, .max-w-5xl { max-width: 100%; }
.w-full { width: 100%; }
.list-disc { list-style: disc; } .list-inside { list-style-position: outside; padding-left: 1.3rem; }
.text-xs { font-size: 0.8rem; } .text-sm { font-size: 0.92rem; } .text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.22rem; } .text-2xl { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.6rem); }
.text-3xl { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); } .text-4xl { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 650; } .font-bold { font-weight: 750; } .font-extrabold { font-weight: 800; }
.leading-relaxed { line-height: 1.65; } .leading-tight { line-height: 1.2; } .tracking-tight { letter-spacing: -0.02em; }
.uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.05em; } .italic { font-style: italic; }
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
.whitespace-nowrap { white-space: nowrap; } .align-top { vertical-align: top; }
.underline { text-decoration: underline; } .hover\:underline:hover { text-decoration: underline; }
/* colours */
.text-slate-900, .text-gray-900, .text-slate-800 { color: var(--ink); }
.text-slate-700, .text-gray-700 { color: var(--ink-2); }
.text-slate-600, .text-slate-500, .text-gray-500, .text-slate-400 { color: var(--muted); }
.text-blue-600, .text-blue-700, .text-indigo-600 { color: var(--brand); }
.text-blue-800, .text-blue-900 { color: var(--brand-dark); }
/* verdicts: green = comes out ahead, red = costs more than it returns; amber = caution labels */
.text-emerald-700 { color: var(--ok); } a .text-emerald-700 { color: var(--brand); }
/* Labels in the same green are not verdicts: a pill badge ('$0 annual fee') and a note inside a heading stay blue. */
.rounded-full.bg-emerald-50, :is(h1, h2, h3, h4) .text-emerald-700 { color: var(--brand); }
.rounded-full.bg-emerald-50 { background: var(--brand-tint); }
.text-rose-700, .text-rose-800 { color: var(--bad); } .bg-rose-100 { background: var(--bad-tint); }
.text-amber-500, .text-amber-600, .text-amber-700 { color: var(--accent); }
/* The darker amber shades are text on amber tints (badges, the disclosure box), not labels. */
.text-amber-800 { color: #7c3a0a; } .text-amber-900 { color: var(--ink); }
.bg-amber-100 { background: var(--accent-tint); }
/* Inline text links marked with a dark text colour are links like any other: brand blue. */
a:is(.text-slate-900, .text-gray-900, .text-slate-800):not(.block, [class*="bg-"]) { color: var(--brand); }
a:is(.text-slate-900, .text-gray-900, .text-slate-800):not(.block, [class*="bg-"]):hover { color: var(--brand-dark); }
.text-white { color: #fff; }
.bg-white { background: #fff; }
.bg-slate-50, .bg-gray-50 { background: var(--surface); }
.bg-slate-100 { background: #edf2f7; }
.bg-blue-50, .bg-indigo-50 { background: var(--brand-tint); }
.bg-emerald-50 { background: var(--ok-tint); }
.bg-amber-50, .bg-yellow-50 { background: var(--accent-tint); }
.border { border: 1px solid var(--line); } .border-2 { border: 2px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); } .border-t { border-top: 1px solid var(--line); }
.border-slate-200, .border-slate-100, .border-slate-300, .border-gray-200 { border-color: var(--line); }
.border-blue-200, .border-blue-100 { border-color: #c9dcf1; }
.border-amber-200, .border-amber-300 { border-color: #f3d6a6; }
.rounded { border-radius: 6px; } .rounded-lg { border-radius: 10px; } .rounded-xl { border-radius: var(--radius); }
.rounded-2xl { border-radius: var(--radius-lg); } .rounded-full { border-radius: 999px; }
/* cards: an <a class="block rounded-xl border ..."> tile */
a.block.border, a.block.rounded-xl { color: var(--ink); text-decoration: none; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
a.block.border:hover, a.block.rounded-xl:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(16, 36, 58, 0.08); }
a.block h3, a.block .font-semibold { color: var(--ink); }
/* buttons: legacy filled links */
a.bg-blue-600, a.bg-emerald-600, a.bg-blue-700, button.bg-blue-600, .btn-primary {
  display: inline-block; background: var(--brand); color: #fff; font-weight: 700; text-decoration: none;
  padding: 0.7rem 1.15rem; border-radius: 999px; border: 0; text-wrap: balance;
}
a.bg-blue-600:hover, a.bg-emerald-600:hover, a.bg-blue-700:hover, .btn-primary:hover { background: var(--brand-dark); color: #fff; }
/* dark promo panels: bg-gradient-to-br / bg-gradient-to-b from-blue-* to-blue-* */
.bg-gradient-to-br, .bg-gradient-to-b, .bg-slate-900, .bg-blue-600:not(a) { background: var(--brand-ink); color: #fff; border-radius: var(--radius-lg); }
:is(.bg-gradient-to-br, .bg-gradient-to-b, .bg-slate-900) :is(h2, h3) { color: #fff; }
:is(.bg-gradient-to-br, .bg-gradient-to-b, .bg-slate-900) p, .text-blue-100, .text-blue-200, .text-blue-50 { color: #d5e3f2; }
:is(.bg-gradient-to-br, .bg-gradient-to-b, .bg-slate-900) a:not(.bg-white) { color: #fff; }
/* White pill buttons in dark panels only (the amber "light gradient" panel holds white cards, not pills). */
:is(.bg-gradient-to-br, .bg-gradient-to-b):not(.from-amber-50) a.bg-white, :is(.bg-slate-900, .bg-blue-600:not(a)) a.bg-white {
  display: inline-flex; align-items: center; min-height: 44px; background: #fff; color: var(--brand-ink); font-weight: 700; text-decoration: none;
  padding: 0.6rem 1.15rem; border-radius: 999px; line-height: 1.3; text-align: center; justify-content: center; text-wrap: balance;
}
.prose { max-width: none; }
.prose p, .prose li { color: var(--ink-2); }

/* ---------- Chips for "may qualify" and dates ---------- */
.chip { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); }
.chip-date { background: var(--accent-tint); color: var(--accent); }
.chip-ok { background: var(--ok-tint); color: var(--ok); }

/* ---------- Homepage ---------- */
.home-hero { background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 100%); border-bottom: 1px solid var(--line); }
.home-hero-inner { max-width: var(--wide); margin: 0 auto; padding: 2.25rem 1rem 2.5rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .home-hero-inner { grid-template-columns: 1.15fr 0.85fr; padding: 3.5rem 1rem; } }
.home-hero h1 { margin: 0.4rem 0 0; max-width: 18ch; }
.home-hero .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 36rem; margin-top: 1rem; }
.home-hero-art { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
@media (min-width: 56rem) { .home-hero-art { aspect-ratio: 4 / 3; } }
.home-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.state-picker { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.state-picker select { font: inherit; font-size: 1rem; padding: 0.75rem 0.9rem; border: 2px solid var(--brand-ink); border-radius: var(--radius); background: #fff; color: var(--ink); min-width: 15rem; flex: 1 1 15rem; max-width: 22rem; }
.btn { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-weight: 700; font-size: 1rem; padding: 0.75rem 1.2rem; border-radius: 999px; border: 2px solid var(--brand); background: var(--brand); color: #fff; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }
.trust-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 0.95rem; }
.trust-row li { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.trust-row li::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ok); flex: none; }
.home-section { max-width: var(--wide); margin: 0 auto; padding: 2.5rem 1rem 0; }
.home-section > h2 { margin-top: 0; }
.section-intro { color: var(--ink-2); margin-top: 0.4rem; max-width: 40rem; }
.update-list { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .update-list { grid-template-columns: repeat(3, 1fr); } }
.update-list li { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; background: #fff; }
.update-list .chip { margin-bottom: 0.4rem; }
.update-list a { font-weight: 700; display: block; color: var(--ink); text-decoration: none; line-height: 1.3; }
.update-list a:hover { color: var(--brand); text-decoration: underline; }
.update-list p { margin: 0.4rem 0 0; color: var(--ink-2); font-size: 0.95rem; }
.cat-grid { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-grid li { margin: 0; }
.cat-grid a { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; }
.cat-grid a:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(16, 36, 58, 0.08); }
.cat-grid img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--brand-tint); margin-bottom: 0.35rem; }
.cat-grid strong { font-size: 1.02rem; }
.cat-grid span { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.popular-list { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .popular-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.popular-list li { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.popular-list a { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.3; }
.popular-list a:hover { color: var(--brand); text-decoration: underline; }
.popular-list p { margin: 0.35rem 0 0; color: var(--ink-2); font-size: 0.95rem; }
.state-links { columns: 2 9rem; column-gap: 1.25rem; padding: 0; margin: 1rem 0 0; list-style: none; }
@media (min-width: 48rem) { .state-links { columns: 5 9rem; } }
.state-links li { margin: 0; padding: 0.2rem 0; break-inside: avoid; }
.state-links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); }
.state-links a:hover { color: var(--brand); text-decoration-color: currentColor; }
.tool-cards { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
@media (min-width: 48rem) { .tool-cards { grid-template-columns: repeat(3, 1fr); } }
.tool-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; background: #fff; display: flex; flex-direction: column; gap: 0.4rem; }
.tool-card h3 { margin: 0; font-size: 1.1rem; }
.tool-card p { margin: 0; color: var(--ink-2); font-size: 0.95rem; flex: 1; }
.tool-card a { font-weight: 700; }
.home-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 3rem; }
.home-band .home-section { padding-bottom: 2.5rem; }

/* ---------- Benefits checker ---------- */
.benefits-checker { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1rem 0; }
.benefits-notice { background: var(--surface); border-left: 4px solid var(--brand-ink); padding: 0.85rem 1rem; margin-top: 1rem; border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-2); }
.benefits-form { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.15rem; margin-top: 1.5rem; background: #fff; }
.benefits-form label { display: block; font-weight: 700; }
.benefits-form select { font: inherit; width: 100%; max-width: 22rem; padding: 0.7rem 0.85rem; margin-top: 0.4rem; border: 2px solid var(--brand-ink); border-radius: var(--radius); background: #fff; }
.benefits-form h2 { font-size: 1.2rem; margin-top: 1.5rem; }
.situation-grid { display: grid; gap: 0.55rem; margin-top: 0.75rem; }
@media (min-width: 40rem) { .situation-grid { grid-template-columns: 1fr 1fr; } }
.situation-grid button { font: inherit; text-align: left; color: var(--ink); background: #fff; border: 1px solid #b8c7d9; border-radius: var(--radius); padding: 0.75rem 0.9rem; cursor: pointer; }
.situation-grid button:hover { border-color: var(--brand); }
.situation-grid button.chosen { background: var(--brand); color: #fff; border-color: var(--brand-dark); font-weight: 700; }
.benefits-results { margin-top: 1.5rem; }
.program-match { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-top: 0.9rem; }
.program-match h3 { margin: 0; }
.program-match p { margin-top: 0.4rem; font-size: 0.97rem; }
.match-why { color: var(--ink-2); }
.program-match .program-route { color: var(--ink-2); font-size: 0.95rem; }
.program-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.6rem; }
.program-links a { font-weight: 700; }
.benefits-card-link { margin-top: 2rem; background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem; }

/* ---------- Print: guides people print for appointments ---------- */
@media print {
  .bg-header, .bg-footer, .program-checker-link, .related-programs, .bg-nav { display: none !important; }
  body { font-size: 11pt; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Cards and panels: the first element sits flush with the padding. */
a.block > :first-child, .rounded-xl > :first-child, .rounded-2xl > :first-child, .rounded-lg > :first-child,
.border > :first-child, .p-4 > :first-child, .p-5 > :first-child, .p-6 > :first-child, .p-8 > :first-child,
.program-checker-link > :first-child, .related-programs > :first-child, .tool-card > :first-child,
.update-list li > :first-child, .program-match > :first-child, .trend-cta > :first-child, .trend-urgent > :first-child,
.trend-note > :first-child, .learn-changing-box > :first-child, .program-rule-changes > :first-child, .cta-box > :first-child,
.card-guide-tile > :first-child, .leader-tile > :first-child { margin-top: 0; }
/* A kicker label belongs to the heading under it; headings in a flex row (emoji + h2) sit on the row. */
.kicker + :is(h1, h2, h3) { margin-top: 0.35rem; }
.flex.items-center > :is(h1, h2, h3, h4) { margin-top: 0; }
a.block h3 { font-size: 1.08rem; }

/* Dark banners (legacy "bg-gradient-to-br/-b ... text-white"): headings and breadcrumbs inherit white. */
.text-white h1, .text-white h2, .text-white h3, .text-white h4 { color: inherit; }
:is(.bg-gradient-to-br, .bg-gradient-to-b).text-white { padding: 1.75rem 1.25rem; margin-top: 1rem; }
:is(.bg-gradient-to-br, .bg-gradient-to-b).text-white > div { padding: 0; }
:is(.bg-gradient-to-br, .bg-gradient-to-b).text-white h1 { margin-top: 0.4rem; }
:is(.bg-gradient-to-br, .bg-gradient-to-b).text-white nav, :is(.bg-gradient-to-br, .bg-gradient-to-b).text-white nav a { color: #c9d9ea; }
:is(.bg-gradient-to-br, .bg-gradient-to-b).text-white p { color: #dbe7f3; }
/* The one light gradient box (amber) stays light. */
.bg-gradient-to-br.from-amber-50 { background: var(--accent-tint); color: var(--ink); border: 1px solid #f3d6a6; }
.bg-gradient-to-br.from-amber-50 h2, .bg-gradient-to-br.from-amber-50 h3 { color: var(--ink); }
.bg-gradient-to-br.from-amber-50 p { color: var(--ink-2); }
.bg-gradient-to-br.from-amber-50 a:not(.bg-white) { color: var(--brand); }

/* Flex utilities used by hubs, pill rows and filter bars. */
.inline-flex { display: inline-flex; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.items-start { align-items: flex-start; } .items-baseline { align-items: baseline; }
.ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; }
.gap-x-2 { column-gap: 0.5rem; } .gap-x-4 { column-gap: 1rem; } .gap-y-2 { row-gap: 0.5rem; }
.flex, .inline-flex { min-width: 0; }
.flex > *, .inline-flex > * { min-width: 0; }
/* Pill links (category chips on hubs). */
a.rounded-full.border { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.8rem; text-decoration: none; color: var(--ink); background: #fff; font-size: 0.92rem; }
a.rounded-full.border:hover { border-color: var(--brand); color: var(--brand); }
select { max-width: 100%; }
.gap-x-6 { column-gap: 1.5rem; }

/* Long words and URLs in running text wrap instead of widening the page. break-word (unlike anywhere) leaves
   min-content widths alone, and table cells keep words and figures whole, so a wide table scrolls in its
   wrapper instead of squeezing every column ('$1,157' printed one character per line). */
#main p, #main li, #main a { overflow-wrap: break-word; }
#main th, #main td, #main th a, #main td a { overflow-wrap: normal; word-break: normal; }

/* Form fields at 16 px: iOS zooms the whole page into any smaller field when it gets focus. The checker's state
   select keeps the size of the text around it (18 px on tablets and desktops), never less than 16 px. */
#main :is(input, select, textarea) { font-size: 1rem; }
#main .benefits-form select { font-size: max(1rem, 1em); }

/* ---------- Legacy components (stage 1 mobile fixes, 2026-10-12) ---------- */
/* Guide-layout pages no longer load their old stylesheet (index-aBevWOt8.css); these map the old components
   they still use onto the design system. The template migration removes the classes for good. */
/* Primary buttons; the card-guide index link is the outlined secondary. Balanced wrapping keeps a trailing
   arrow off a line of its own. */
.cta, .guide-cta, .card-guide-index-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; margin-top: 1rem;
  padding: 0.6rem 1.2rem; border: 2px solid var(--brand); border-radius: 999px; background: var(--brand); color: #fff;
  font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; text-wrap: balance;
}
.cta:hover, .guide-cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.card-guide-index-link { background: #fff; color: var(--brand); }
.card-guide-index-link:hover { background: var(--brand-tint); color: var(--brand-dark); }
.legacy-hero .guide-cta { margin-top: 1.25rem; }
.center { text-align: center; }
/* Card-guide hubs: a section of their own, below the content above. */
.card-guide-hub { margin-top: 2.5rem; }
.card-guide-tile p { color: var(--ink-2); font-size: 0.95rem; }
.card-guide-tile span { display: block; margin-top: 0.5rem; color: var(--brand); font-weight: 700; }
/* /benefits-by-state: the 50 state links as a grid of tap-sized tiles. */
.states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .states { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.states a { display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: 0.95rem; font-weight: 650; line-height: 1.25; text-decoration: none; text-wrap: balance; }
.states a:hover { border-color: var(--brand); color: var(--brand); }
/* 320-360 px: a little more text width, so the longest name ('Massachusetts' plus its arrow) keeps its arrow on its line. */
@media (max-width: 22.5rem) { .states a { padding: 0.5rem 0.4rem; font-size: 0.875rem; } }
/* Old guide and trend templates open with their kicker: the usual 24 px below the header, as on every other template. */
#main :is(.guide, .trend-wrap) > :is(.kicker, .trend-kicker):first-child { margin-top: 1.5rem; }
/* /learn: the guide search runs the full content width like the hero above and the Trending box below; its old
   full-bleed grey band (now a strip under the field) gives way to plain space between the three. */
.legacy-learn-html section:has(#learn-search) { background: none; border-bottom: 0; padding-top: 1rem; }
/* Legacy divided sections (border-t with py-10/py-12): space on both sides of the divider line. */
section.border-t:is(.py-10, .py-12) { padding-top: 2rem; padding-bottom: 2rem; }
section.border-t:is(.py-10, .py-12) > :first-child { margin-top: 0; }
.pb-8 { padding-bottom: 2rem; }
/* /about founder note: initials avatar above the note on phones, beside it from 40rem. */
.founder { display: grid; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.founder > b { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--brand-ink); color: #fff; font-size: 1.1rem; letter-spacing: 0.04em; }
.founder > div > :first-child { margin-top: 0; }
@media (min-width: 40rem) { .founder { grid-template-columns: 3.5rem 1fr; align-items: start; } }

/* Until hero art exists, the hero is one column. */
.home-hero-inner:not(:has(.home-hero-art)) { grid-template-columns: 1fr; }
.home-hero-inner:not(:has(.home-hero-art)) > div { max-width: 46rem; }
/* The skip link moves focus to <main tabindex=-1>; the whole page needs no focus ring. */
#main:focus { outline: none; box-shadow: none; }