/* tokens.css */
/* tokens.css
   The ONLY file in this project allowed to contain a hex value. build.mjs fails
   if a colour appears anywhere else.

   Every ratio below was MEASURED against WCAG 2.2 AA on the ground colour, not
   estimated. The numbers are in the comments so the next person can check the
   claim instead of trusting it.

   WHY PINE AND NOT MARINE. AIOSeniors owns marine blue. This is its sibling,
   not its clone: a family who lands on both should be able to tell which site
   they are on without reading the wordmark. Pine also happens to be the right
   temperature for the subject, which is local organisations run by people
   rather than a government portal. */

:root {
  /* Colour ------------------------------------------------------------- */
  --ink:         #16302A;  /* headings + body.          13.28:1 on ground */
  --brand:       #1C6349;  /* pine. links, fills.        6.75:1 on ground */
  --brand-lift:  #237055;  /* hover, active.             5.62:1 on ground */
  --accent:      #E0A22E;  /* CTA FILL ONLY. never type: 2.11:1, fails by design */
  --accent-lift: #EFB955;  /* CTA hover. LIGHTER, so the ink label gains contrast:
                              ink on accent 6.29:1, ink on accent-lift 7.88:1 */
  --ground:      #FAF8F3;  /* warm off-white. never pure white, never cool grey */
  --surface:     #FFFFFF;  /* cards only */
  --line:        #E2DDD2;  /* warm hairline */

  /* The four availability states have their own colours because they are the
     load-bearing information on this site. Each one is also carried by a word
     and an icon shape, never by colour alone. */
  --open:        #2E6E62;  /* verified as accepting people. 5.62:1 */
  --waitlist:    #8A5A12;  /* operating, not taking people. 5.57:1 */
  --unsure:      #4A5A63;  /* worth calling to check.       6.74:1 */

  --ink-70:      color-mix(in srgb, var(--ink) 70%, var(--ground));
  --ink-55:      color-mix(in srgb, var(--ink) 55%, var(--ground));
  --brand-wash:  color-mix(in srgb, var(--brand) 7%, var(--ground));
  --accent-wash: color-mix(in srgb, var(--accent) 14%, var(--ground));
  --open-wash:   color-mix(in srgb, var(--open) 10%, var(--ground));
  --wait-wash:   color-mix(in srgb, var(--waitlist) 10%, var(--ground));
  --unsure-wash: color-mix(in srgb, var(--unsure) 8%, var(--ground));

  /* Type --------------------------------------------------------------- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Body base is 18px. Some readers are 80. This is a floor, not a default. */
  --t-body:   1.125rem;   /* 18 */
  --t-lead:   1.375rem;   /* 22 */
  --t-small:  1rem;       /* 16 */
  --t-micro:  0.875rem;   /* 14, labels and meta only, never prose */
  --t-h3:     1.5rem;     /* 24 */
  --t-h2:     2rem;       /* 32 */
  --t-h1:     2.75rem;    /* 44 */
  /* Capped so the hook AND question one both sit above the fold on a laptop. */
  --t-hero:   clamp(2.25rem, 4.4vw, 3.375rem);

  /* Space -------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Shape -------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --wrap: 1160px;
  --measure: 62ch;

  /* Targets. 48px minimum, 64px for anything primary. */
  --tap: 48px;
  --tap-primary: 64px;

  /* Print. A family prints the results and takes them to a kitchen table, so
     print is a real surface here rather than an afterthought. Paper is white
     and toner is cheap, so these deliberately abandon the warm palette. */
  --print-paper: #FFFFFF;
  --print-ink:   #000000;
  --print-rule:  #999999;

  --shadow-card: 0 1px 2px rgba(22, 48, 42, .05), 0 8px 24px rgba(22, 48, 42, .06);
  --shadow-lift: 0 2px 4px rgba(22, 48, 42, .07), 0 16px 40px rgba(22, 48, 42, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* base.css */
/* base.css: reset, type scale, buttons, links. No colour literals: tokens only. */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; } /* an img height attribute beats aspect-ratio. this wins it back */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-4);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.24; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-70); }

a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-lift); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--ground);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm); text-decoration: none;
  transition: top .15s var(--ease);
}
.skip:focus { top: var(--s-4); color: var(--ground); }

/* Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-primary);
  padding: 0 var(--s-6);
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: var(--t-body); font-weight: 650;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

/* Gold fill, ink label. White on this gold measures 2.24:1 and fails AA;
   ink on it measures 6.29:1 and passes, and the lighter hover state measures
   7.88:1 so contrast RISES on hover rather than falling. Not decorative. */
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--accent-lift); color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-primary:active { transform: translateY(0); }

.btn-quiet {
  background: transparent; color: var(--brand); border-color: var(--line);
  min-height: var(--tap);
}
.btn-quiet:hover { border-color: var(--brand); color: var(--brand-lift); background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Shared blocks -------------------------------------------------------- */

section { padding-block: var(--s-9); }
.section-head { max-width: var(--measure); margin-bottom: var(--s-7); }
.eyebrow {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 var(--s-3);
}

.beta {
  display: inline-block; vertical-align: 1px;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--brand-wash); color: var(--brand); border: 1px solid var(--line);
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-6);
  box-shadow: var(--shadow-card);
}

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.src {
  font-size: var(--t-small); color: var(--ink-55);
  border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-5);
}
.src a { color: var(--brand); }
.checked { white-space: nowrap; }

.reviewed {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-small); color: var(--ink-55);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: var(--s-2) var(--s-4);
}

/* chrome.css */
/* chrome.css: header, megamenu, footer. */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-in {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 76px;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap);
  color: var(--ink); text-decoration: none; flex: 0 0 auto;
}
.brand-mark { display: block; width: 34px; height: 34px; color: var(--brand); }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em;
}

.sitenav { margin-left: auto; }
.navlist { display: flex; align-items: center; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.navgroup { position: relative; }

.navtop {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  background: transparent; border: 0; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: var(--t-body); font-weight: 550; color: var(--ink);
  cursor: pointer;
}
.navtop:hover { background: var(--brand-wash); color: var(--brand); }
.chev { width: 11px; height: 7px; transition: transform .18s var(--ease); }
.navtop[aria-expanded="true"] .chev { transform: rotate(180deg); }
.navtop[aria-expanded="true"] { background: var(--brand-wash); color: var(--brand); }

.navpanel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 264px; list-style: none; margin: 0; padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lift);
  display: none;
}
.navpanel[data-open] { display: block; }
.navpanel a {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-weight: 500;
}
.navpanel a:hover { background: var(--brand-wash); color: var(--brand); }
.navpanel a[aria-current="page"] { background: var(--brand-wash); color: var(--brand); font-weight: 650; }

.btn-header { flex: 0 0 auto; min-height: var(--tap); padding: 0 var(--s-5); }

.navtoggle { display: none; }

/* Mobile --------------------------------------------------------------- */
/* Every header child gets an explicit order under 980px. A child without one
   defaults to 0 and jumps above the H1. This has cost real time on Digilu. */

@media (max-width: 980px) {
  .header-in { flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-3); }

  .brand      { order: 1; margin-right: auto; }
  .navtoggle  { order: 2; }
  .btn-header { order: 3; display: none; }
  .sitenav    { order: 4; flex-basis: 100%; margin-left: 0; }

  .navtoggle {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: var(--tap); padding: 0 var(--s-4);
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    font-family: var(--sans); font-size: var(--t-small); font-weight: 650; cursor: pointer;
  }
  .navtoggle-bars { display: grid; gap: 4px; }
  .navtoggle-bars i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

  .sitenav { display: none; }
  .sitenav[data-open] { display: block; }

  .navlist { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s-4); }
  .navgroup { border-top: 1px solid var(--line); }

  .navtop { width: 100%; justify-content: space-between; min-height: var(--tap-primary); border-radius: 0; }

  /* Accordion, never an unlabelled hamburger drawer. */
  .navpanel {
    position: static; display: none; min-width: 0;
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 var(--s-3) var(--s-3);
  }
  .navpanel[data-open] { display: block; }
  .navpanel a { min-height: var(--tap-primary); }
}

/* Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}

.foot-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: var(--s-8); }
.foot-brand .brand-mark { width: 40px; height: 40px; margin-bottom: var(--s-3); }
.foot-brand .brand-name { display: block; font-size: 1.5rem; margin-bottom: var(--s-3); }
.foot-promise { color: var(--ink-70); margin-bottom: var(--s-5); }

.foot-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.foot-nav h2 {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); margin-bottom: var(--s-3);
}
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { margin-bottom: var(--s-1); }
.foot-nav a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); color: var(--ink); text-decoration: none;
}
.foot-nav a:hover { color: var(--brand-lift); text-decoration: underline; }

.foot-legal {
  border-top: 1px solid var(--line); margin-top: var(--s-7); padding-top: var(--s-5);
  font-size: var(--t-small); color: var(--ink-70);
}
.foot-legal p { max-width: 78ch; }
.foot-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; color: var(--ink-55); }
/* Navigation, not links inside a sentence, so the inline target-size exception
   does not apply to these. */
.foot-meta a { display: inline-flex; align-items: center; min-height: var(--tap); }

@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: var(--s-7); }
  .foot-nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot-nav { grid-template-columns: 1fr; }
}

/* ============================================================== */
/* MEGA-MENU, floating card, opens on HOVER on desktop.           */
/* ============================================================== */
/*
 * The nav shipped as a click-to-open list of plain text links. Three things were
 * wrong with it: it did not open on hover, so it felt broken to anybody who
 * expected a menu; it carried no line art, against the standing directive that
 * every block on every Digilu property carries it; and it gave a row of
 * destinations with no indication of which one to pick.
 *
 * Desktop opens on :hover AND on :focus-within, so it works by keyboard without
 * any JavaScript. The click handler stays for touch and for the mobile
 * accordion, which is why aria-expanded is still driven in script.
 */

@media (min-width: 981px) {
  /* The bridge. Without it the pointer crosses a 10px gap on the way down and
     the panel closes under the cursor, which reads as a flickering menu. */
  .navgroup::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%;
    height: 14px;
  }

  .navpanel {
    display: block;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
    /* Wide enough that a row label stays on ONE line. At 30rem the rows had
       about 300px after the feature card and the gap, which wrapped
       "Find help near you" onto three lines and made the menu look broken. */
    min-width: 46rem; padding: var(--s-5);
  }

  .navgroup:last-child > .navpanel { left: auto; right: 0; }

  .navgroup:hover > .navpanel,
  .navgroup:focus-within > .navpanel,
  .navpanel[data-open] {
    opacity: 1; visibility: visible; transform: translateY(0);
  }

  /* A feature card plus a list of rows. The card answers "which one do I want",
     which a flat list of links never does. */
  .navpanel {
    display: grid; grid-template-columns: 14rem 1fr; gap: var(--s-6);
  }

  .mm-feature {
    background: var(--brand-wash); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s-5);
    text-decoration: none; color: var(--ink);
    display: flex; flex-direction: column;
  }
  .mm-feature:hover { border-color: var(--brand); }
  .mm-feature .mm-kicker {
    font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand); margin-bottom: var(--s-2);
  }
  .mm-feature h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
  .mm-feature p { font-size: var(--t-small); color: var(--ink-70); margin: 0; }
  .mm-feature .mm-go {
    margin-top: auto; padding-top: var(--s-4);
    font-size: var(--t-small); font-weight: 650; color: var(--brand);
  }

  .mm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); align-content: start; }
  .mm-rows a {
    display: grid; grid-template-columns: 22px 1fr; gap: var(--s-4);
    align-items: start; padding: var(--s-3) var(--s-4); min-height: var(--tap);
    border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  }
  .mm-rows a:hover { background: var(--brand-wash); }
  .mm-rows a[aria-current="page"] { background: var(--brand-wash); }
  .mm-rows .mm-text { display: block; min-width: 0; }
  .mm-rows b { display: block; font-weight: 650; font-size: var(--t-small); }
  .mm-rows .mm-text span { display: block; font-size: var(--t-micro); color: var(--ink-55); }
  .mm-rows .la--ico { margin-top: 2px; }
}

/* Mobile: the accordion keeps the icons but drops the feature card, which would
   be a 15rem block above every list on a 390px screen. */
@media (max-width: 980px) {
  .mm-feature { display: none; }
  .mm-rows { list-style: none; margin: 0; padding: 0; }
  .mm-rows a {
    display: grid; grid-template-columns: 22px 1fr; gap: var(--s-4); align-items: center;
    min-height: var(--tap); padding: var(--s-3) var(--s-5); text-decoration: none; color: var(--ink);
  }
  .mm-rows b { font-weight: 600; font-size: var(--t-body); }
  .mm-rows .mm-text span { display: none; }
}

/* ===================================================================== */
/* THE WORDMARK: AIO reads first, then the word.                         */
/* ===================================================================== */
/*
 * "AIONonprofit" set in one colour is fourteen characters of the same weight,
 * and a reader has to work out where the prefix ends. AIO is the family marker
 * shared with AIOSeniors, AIOGovernment and AIOCoordination, so it should land
 * first and then hand over.
 *
 * Colour AND tracking do the separating, never colour alone: AIO in brand pine
 * measures 6.75:1 on the ground and the word in ink measures 13.28:1, so both
 * are comfortably legible on their own, and the 1.97:1 between them is what
 * makes the seam visible. A reader who cannot distinguish the two hues still
 * gets the letter-spacing shift and the weight change.
 */
.brand-name .bn-aio {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .01em;
  /* Optical: the serif A and the O want a hair of air before the capital N. */
  margin-right: .5px;
}
.brand:hover .brand-name .bn-aio { color: var(--brand-lift); }

.site-footer .brand-name .bn-aio { color: var(--brand); }

/* ===================================================================== */
/* FOOTER: the System Two cross-links.                                   */
/* ===================================================================== */
/*
 * FOUR links, each with a sentence saying who it is for. That sentence is the
 * whole difference between a cross-link and a link farm: a reader can tell
 * whether to click, and a link nobody should click is not there at all.
 *
 * Deliberately NOT the System One five-brand module. A family looking for a
 * ride to dialysis has no use for a marketing framework, and listing every
 * property we own so authority can circulate between them is exactly the
 * pattern the AI visibility we sell is built to detect.
 */
.foot-family {
  border-top: 1px solid var(--line);
  padding-top: var(--s-6);
  margin-top: var(--s-6);
}
.foot-family h2 {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55);
  margin-bottom: var(--s-3);
}
.foot-family > p { font-size: var(--t-small); color: var(--ink-70); max-width: var(--measure); }
.foot-family ul {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5);
}
.foot-family li { margin: 0; }
.foot-family a {
  display: block; min-height: var(--tap);
  padding: var(--s-3) var(--s-4); margin-inline: calc(var(--s-4) * -1);
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
}
.foot-family a:hover { background: var(--brand-wash); }
.foot-family a b { display: block; font-weight: 650; color: var(--brand); }
.foot-family a span { display: block; font-size: var(--t-micro); color: var(--ink-55); margin-top: 2px; }

@media (max-width: 700px) {
  .foot-family ul { grid-template-columns: 1fr; }
}

/* The DIGILU-TRUST-BAR ships fully inline-styled and identical on every Digilu
   property, including its own hairline top border, which is tuned for the dark
   footers most of them have. On this warm ground that border is invisible, so
   the separation comes from here instead. The component itself is not
   restyled: it is the same chip everywhere on purpose. */
.digilu-trust-bar { border-top-color: var(--line) !important; }

/* lineart.css */
/* lineart.css: the .la system, ported from the Digilu web line-art standard.
 *
 * Eight house rules, three of which are enforced here:
 *   - navy HAIRLINE ink, never a fill
 *   - the accent used exactly once per piece, on the stroke carrying the meaning
 *   - a ghost pass used as TOOTH, not as a drop shadow
 *
 * Everything is DRAWN in order rather than faded in. Every stroke carries
 * pathLength="1", so the draw-on is a single dashoffset transition and nothing
 * has to be measured in script.
 *
 * No hex values here. tokens.css owns colour.
 */

.la { display: block; width: 100%; height: auto; overflow: visible; }

.la-ink   { stroke: var(--ink); }
.la-det   { stroke: var(--ink-55); }
.la-acc   { stroke: var(--accent); }
.la-ghost { stroke: var(--line); }

/* On a dark field the ink inverts, and the accent stays the accent: it is the
   one stroke whose colour is load bearing. */
.la--dark .la-ink   { stroke: var(--ground); }
.la--dark .la-det   { stroke: var(--line); }
.la--dark .la-ghost { stroke: rgba(255, 255, 255, .14); }


/* WHY A TAG LIST AND NOT [pathLength], 2026-07-29.
 *
 * These rules used to select `[pathLength]`, and they selected NOTHING in the
 * cascade, so every mark on the site rendered as a blank rectangle. The whole
 * line-art system was installed, deployed and invisible on both this site and
 * AIOGovernment.
 *
 * The cause is that a CSS attribute selector written in an HTML document is
 * lowercased to `[pathlength]`, while the attribute on an SVG element really is
 * `pathLength`, and attribute names on foreign elements match case SENSITIVELY.
 * So the selector could never match. It is a particularly quiet failure because
 * `querySelectorAll('[pathLength]')` DOES return the elements, which makes the
 * selector look correct from the console while the stylesheet ignores it.
 *
 * The tag list has no case to get wrong. `pathLength="1"` stays on every stroke,
 * because that is what normalises the dash to one path length; it is simply no
 * longer what the CSS keys off.
 */

/* Draw-on ---------------------------------------------------------------- */
/* One transition, driven by a class the observer adds. Strokes draw in document
   order, so the subject assembles the way somebody would draw it.
   
   THE DRAWN STATE IS THE DEFAULT, AND THE HIDING IS OPT IN.
   
   The hiding is scoped to `.la-anim`, which nav.js puts on <html> only once it
   has an IntersectionObserver and is about to drive the animation. This
   ordering matters: the first version hid every stroke by default and revealed
   them on observe, so the hero mark rendered as a large blank rectangle when the
   observer did not fire. Art that depends on script to be VISIBLE is art that is
   sometimes missing. Now the failure mode is a mark that does not animate,
   which nobody notices, instead of a mark that is not there, which is the whole
   right column of the homepage. */

.la-anim .la :is(path,circle,rect,line,polyline,polygon) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.la-anim .la.is-drawn :is(path,circle,rect,line,polyline,polygon) { stroke-dashoffset: 0; }

/* Stagger by position so it reads as drawing rather than as everything at once.
   Ten steps is enough for the busiest mark here. */
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(1)  { transition-delay: .00s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(2)  { transition-delay: .06s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(3)  { transition-delay: .12s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(4)  { transition-delay: .18s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(5)  { transition-delay: .24s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(6)  { transition-delay: .30s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(7)  { transition-delay: .36s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(8)  { transition-delay: .42s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(9)  { transition-delay: .48s; }
.la-anim .la :is(path,circle,rect,line,polyline,polygon):nth-child(10) { transition-delay: .54s; }

/* A reader who has asked for less motion gets the finished drawing, immediately
   and in full. Never a half-drawn mark. */
@media (prefers-reduced-motion: reduce) {
  .la-anim .la :is(path,circle,rect,line,polyline,polygon) { transition: none; stroke-dashoffset: 0; }
}

/* Sizes ------------------------------------------------------------------ */

.la--ico  { width: 22px; height: 22px; flex: 0 0 auto; }
.la--feat { width: 100%; max-width: 15rem; margin-bottom: var(--s-4); }
.la--hero { width: 100%; max-width: 26rem; }

/* Under 900px the pen wobble and the stagger both cost more than they add. */
@media (max-width: 900px) {
  .la-anim .la :is(path,circle,rect,line,polyline,polygon) { transition-duration: .6s; transition-delay: 0s !important; }
}

/* home.css */
/* home.css: hero and page sections. */

/* Hero ----------------------------------------------------------------- */
/* Not dark. Not a bare photo rectangle. The right panel is a composed preview
   of the actual output, which is a stronger promise than a stock photograph
   and avoids every photo trap in the brief at the same time. */

.hero {
  position: relative; overflow: hidden;
  padding-block: var(--s-7) var(--s-8);
  background:
    radial-gradient(1100px 520px at 78% -10%, var(--brand-wash), transparent 62%),
    radial-gradient(760px 420px at 4% 108%, var(--accent-wash), transparent 66%),
    var(--ground);
}

.hero-in {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: var(--s-8); align-items: center;
}

.hero h1 {
  font-size: var(--t-hero);
  letter-spacing: -0.025em;
  margin-bottom: var(--s-5);
  max-width: 15ch;
}

.hero-sub {
  font-size: var(--t-lead); line-height: 1.5; color: var(--ink-70);
  max-width: 46ch; margin-bottom: var(--s-6);
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--open); }

/* Field art: the aperture motif, drawn not photographed. */
.hero-field {
  position: absolute; inset: 0; pointer-events: none;
  color: var(--brand); opacity: .09;
}
.hero-field svg { position: absolute; right: -14%; top: -34%; width: 76%; height: auto; }

/* Plan preview --------------------------------------------------------- */

.plan {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  padding: var(--s-6);
}
.plan-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); margin-bottom: var(--s-4);
}
.plan-head h2 {
  font-size: 1.25rem; margin: 0;
}
.plan-tag { font-size: var(--t-micro); color: var(--ink-55); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

.plan-row { display: flex; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.plan-row:last-of-type { border-bottom: 0; }
.plan-row b { display: block; font-size: var(--t-body); font-weight: 650; margin-bottom: 2px; }
.plan-row p { font-size: var(--t-small); color: var(--ink-70); margin: 0; }

.tag {
  flex: 0 0 auto; align-self: flex-start;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: var(--s-1) var(--s-3); border-radius: 999px; border: 1px solid var(--line);
  white-space: nowrap;
}
.tag-likely { background: var(--open-wash); color: var(--open); }
.tag-check  { background: var(--brand-wash); color: var(--brand); }
.tag-out    { background: var(--ground); color: var(--ink-55); }

.plan-foot { border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-4); }
/* Prose, not a label, so it does not use --t-micro. */
.plan-foot p { font-size: var(--t-small); color: var(--ink-70); margin: 0; }

@media (max-width: 980px) {
  .hero { padding-block: var(--s-7) var(--s-8); }
  .hero-in { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero h1 { max-width: 100%; }
  /* Explicit order: the plan preview never climbs above the hook or the form. */
  .hero-copy { order: 1; }
  .plan       { order: 2; }
}

/* The problem ---------------------------------------------------------- */

.problem { background: var(--surface); border-block: 1px solid var(--line); }
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.problem h2 { font-size: var(--t-h2); max-width: 20ch; }
.problem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.problem-list li {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
}
.problem-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.problem-list .n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand);
  font-size: var(--t-small); font-weight: 700;
}
.problem-list p { margin: 0; }

@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* Programs, the proof -------------------------------------------------- */

.progs { display: grid; gap: var(--s-6); }
.prog {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-7);
  box-shadow: var(--shadow-card);
}
.prog-head { margin-bottom: var(--s-5); }
.prog h3 { font-size: 1.75rem; margin-bottom: var(--s-3); max-width: 26ch; }
.prog-name { font-size: var(--t-small); font-weight: 650; color: var(--brand); margin: 0; }
.prog-level {
  font-weight: 500; color: var(--ink-55);
  border-left: 1px solid var(--line); margin-left: var(--s-3); padding-left: var(--s-3);
}

.pull {
  margin: var(--s-5) 0; padding: var(--s-5) var(--s-6);
  background: var(--brand-wash); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pull p { font-family: var(--display); font-size: 1.3125rem; line-height: 1.4; margin: 0 0 var(--s-2); }
.pull cite { font-style: normal; font-size: var(--t-small); color: var(--ink-55); }

.figure {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--ink); background: var(--accent-wash);
  display: inline-block; padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
}

.catch { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-4) var(--s-5); }
.apply { font-weight: 600; }

/* Steps ---------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); }
.step .num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: var(--surface);
  font-family: var(--display); font-size: 1.25rem; font-weight: 600; margin-bottom: var(--s-4);
}
.step h3 { font-size: var(--t-h3); }
.step p { color: var(--ink-70); margin-bottom: 0; }

@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Mid CTA + friction removers ----------------------------------------- */
/* Friction removers live HERE, after the sell, never in the hero. At the top of
   the page nobody has decided anything yet, so these lines plant doubts instead
   of killing them. */

.cta-band {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-8);
  box-shadow: var(--shadow-card); text-align: center;
}
.cta-band h2 { font-size: var(--t-h2); max-width: 22ch; margin-inline: auto; }
.cta-band > p { margin-inline: auto; }

.friction {
  list-style: none; margin: 0 0 var(--s-6); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5);
}
.friction li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-70);
}
.friction svg { width: 19px; height: 19px; color: var(--open); flex: 0 0 auto; }

/* Situations ----------------------------------------------------------- */

.sits { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.sit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); }
.sit h3 { font-size: 1.3125rem; }
.sit p { color: var(--ink-70); margin-bottom: 0; font-size: var(--t-small); }
@media (max-width: 760px) { .sits { grid-template-columns: 1fr; } }

/* Engines -------------------------------------------------------------- */

.engines { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.engine {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-6);
}
.engine-top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.engine-mark { width: 30px; height: 30px; color: var(--brand); }
.engine h3 { font-size: var(--t-h3); margin: 0; }
.engine p { color: var(--ink-70); font-size: var(--t-small); }
.engine .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .engines { grid-template-columns: 1fr; } }

/* FAQ ------------------------------------------------------------------ */

.faq { display: grid; gap: var(--s-3); max-width: 78ch; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: var(--tap-primary); padding: var(--s-4) var(--s-6);
  font-family: var(--display); font-size: 1.1875rem; font-weight: 600;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ''; flex: 0 0 auto; width: 12px; height: 12px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .18s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.qa summary:hover { background: var(--brand-wash); }
.qa-body { padding: 0 var(--s-6) var(--s-5); }
.qa-body p:last-child { margin-bottom: 0; }

/* Page headers for inner routes --------------------------------------- */

.pagehead {
  padding-block: var(--s-8) var(--s-7);
  background: radial-gradient(900px 420px at 12% -30%, var(--brand-wash), transparent 64%), var(--ground);
  border-bottom: 1px solid var(--line);
}
.pagehead h1 { max-width: 20ch; }
.pagehead .lead { max-width: 56ch; margin-bottom: 0; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); font-size: 1.3125rem; }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); max-width: var(--measure); }

.callout {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s-5) var(--s-6); margin-block: var(--s-6);
}
.callout p:last-child { margin-bottom: 0; }

.notify { background: var(--brand-wash); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-7); }

/* Agency directory (the Area Agency on Aging page) ---------------------- */
/* Rendered from the seed by build.mjs, never hand-written. */

.agencies { display: grid; gap: var(--s-5); }

.agency {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
.agency-head {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-3);
}
.agency-head h3 { font-size: var(--t-h3); margin: 0; max-width: 40ch; }
.agency-psa {
  flex: 0 0 auto;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-wash);
  border: 1px solid var(--line); border-radius: 999px; padding: var(--s-1) var(--s-3);
}
.agency-meta { font-size: var(--t-small); color: var(--ink-70); margin-bottom: var(--s-2); }
.agency-meta a { font-weight: 650; }
.agency-addr { color: var(--ink-55); }
.agency-link { font-size: var(--t-small); margin-bottom: var(--s-4); }

.agency-counties { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.agency-counties caption {
  text-align: left; font-size: var(--t-micro); color: var(--ink-55);
  padding-bottom: var(--s-2); max-width: var(--measure);
}
.agency-counties th, .agency-counties td {
  text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-top: 1px solid var(--line); vertical-align: top;
}
.agency-counties thead th {
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55);
  border-top: 0;
}
.agency-counties tbody th { font-weight: 650; color: var(--ink); }
.agency-counties td a { font-weight: 650; white-space: nowrap; }

@media (max-width: 560px) {
  .agency { padding: var(--s-5); }
  .agency-head h3 { font-size: 1.25rem; }
}

/* TAP TARGETS IN THE AGENCY DIRECTORY.
 *
 * These are the most important links on the site: 33 agency numbers, 33 agency
 * websites, and 59 county Information and Assistance lines. At a 390px viewport
 * they measured 19px tall, which is roughly a third of the minimum, on a page
 * built for people with unsteady hands who are trying to dial a number.
 *
 * The accessibility page claims a 48px floor for anything tappable. It was true
 * everywhere except here, and the honest options were to fix the targets or
 * withdraw the claim. Fixing them. Inline-flex rather than block so a number
 * still sits inside its sentence, and the height comes from min-height so the
 * text baseline does not move.
 */
.agency-meta a,
.agency-link a,
.agency-counties td a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  /* Widen the strike area without visibly moving the number. */
  padding-inline: var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-sm);
}
.agency-meta a:hover,
.agency-link a:hover,
.agency-counties td a:hover { background: var(--brand-wash); }

/* The row keeps its rhythm once the links grew, rather than gaining 25px of
   dead space per row. */
.agency-counties th, .agency-counties td { padding-block: var(--s-1); }
.agency-counties tbody th { padding-block: var(--s-3); }

/* ===================================================================== */
/* HERO, BANDS AND STEPS, ported from AIOGovernment.                     */
/* ===================================================================== */
/*
 * These two sites are siblings and a family may well see both, so they share a
 * hero skeleton and differ only in palette, mark and words. The earlier hero
 * here was a bespoke two-column thing whose right-hand panel was a fake list of
 * OPEN / WAITLIST / WORTH A CALL rows. That panel was the single worst decision
 * on the site: it put the engine's internal vocabulary in the shop window, and
 * it advertised a taxonomy instead of an outcome. The right-hand panel is now
 * what the reader actually gets for answering, which is what AIOGovernment's
 * does and what it should always have been.
 *
 * The later rules win on the cascade, which is why this block sits at the end.
 */

/* Bands. The alternating rhythm that carries every content page. */
.band { padding: var(--s-8) 0; border-top: 1px solid var(--line); }
.band--alt { background: var(--brand-wash); }
.band > .wrap > h2 { font-size: var(--t-h2); margin-bottom: var(--s-4); max-width: 24ch; }
.band > .wrap > p { max-width: var(--measure); margin-bottom: var(--s-4); }

.pagehead { padding: var(--s-8) 0 var(--s-7); background: var(--brand-wash); border-bottom: 1px solid var(--line); }
.pagehead--tight { padding-bottom: var(--s-6); }
.pagehead h1 { margin-bottom: var(--s-4); }

.hero-copy { max-width: 44rem; }
.hero-note { font-size: var(--t-small); color: var(--ink-70); margin-top: var(--s-4); max-width: var(--measure); }

/* Numbered explanation steps. */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
.steps > li { counter-increment: s; position: relative; padding-left: var(--s-8); }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: var(--s-7); height: var(--s-7); border-radius: 999px;
  background: var(--brand); color: var(--surface);
  display: grid; place-items: center; font-family: var(--display); font-size: var(--t-h3);
}
.steps h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.steps p { max-width: var(--measure); }

/* Plain prose lists that still need breathing room. */
.plain { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-4); max-width: var(--measure); }
.plain > li { padding-left: var(--s-5); border-left: 3px solid var(--line); }

/* The five outcomes, explained. */
.outcomes { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-5); }
.outcomes > li { display: grid; gap: var(--s-2); max-width: var(--measure); }
.outcomes .pill { justify-self: start; margin: 0; }

/* The asymmetry: two cards, deliberately equal width so neither reads louder. */
.asym { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; margin-bottom: var(--s-5); }
.asym > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); }
.asym h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
@media (max-width: 700px) { .asym { grid-template-columns: 1fr; } }

/* Coverage counts. Numbers we publish so they can be checked. */
.statgrid { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.statgrid > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
.statgrid b { display: block; font-family: var(--display); font-size: var(--t-h1); line-height: 1; color: var(--brand); margin-bottom: var(--s-2); }
.statgrid span { font-size: var(--t-small); color: var(--ink-70); }

/* Questions. */
.faqs { display: grid; gap: var(--s-6); max-width: 52rem; }
.faqs .faq h2 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.faqs .faq p { max-width: var(--measure); }

/* The county table. Scrolls inside itself so the page body never does. */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ctable { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 44rem; }
.ctable caption { text-align: left; padding: var(--s-5); color: var(--ink-70); border-bottom: 1px solid var(--line); }
.ctable th, .ctable td { text-align: left; padding: var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable thead th { background: var(--ground); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-55); }
.ctable tbody th { font-weight: 650; white-space: nowrap; }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }

/* The catalog list. */
.proglist { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-5); }
.proglist > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
.proglist > li > b { font-size: var(--t-h3); font-family: var(--display); display: block; }
.proglist-org { font-size: var(--t-small); color: var(--ink-55); display: block; margin-bottom: var(--s-3); }
.proglist p { max-width: var(--measure); }

/* An honest absence. Never an empty cell. */
.none { color: var(--ink-55); font-style: italic; }

/* Form bits the intake needs. */
.hint { color: var(--ink-70); font-size: var(--t-small); max-width: var(--measure); margin-bottom: var(--s-5); }
.found { color: var(--open); font-weight: 650; font-size: var(--t-small); margin-top: var(--s-2); min-height: 1.4em; }

.radios, .checks { display: grid; gap: var(--s-3); }
.checks { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.radios label, .checks label {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; font-weight: 500;
}
.radios label:hover, .checks label:hover { border-color: var(--brand); }
.radios input, .checks input { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; accent-color: var(--brand); }
.radios label:focus-within, .checks label:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; }

/* Honeypot. Off screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stepnav { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
@media (max-width: 560px) { .stepnav .btn { width: 100%; } }

/* ============================================================== */
/* THE HERO. Form above the fold, and the right column answers    */
/* "why would I fill this in".                                    */
/* ============================================================== */
/*
 * The hero shipped with the form BELOW the fold and an empty right column, which
 * broke the pattern every property in this ecosystem uses: the form is the hero,
 * and the thing next to it says what you get for filling it in.
 *
 * The H1 does the hooking. The right column does the answering. A ZIP field with
 * no stated payoff is a toll gate, and people do not pay a toll before they know
 * what is on the other side.
 */

.hero { padding: var(--s-8) 0 var(--s-9); border-bottom: 1px solid var(--line); }

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-8);
  align-items: start;   /* top align: centring a short column against a tall one
                           is what pushes a CTA below the fold */
}

/* THE TYPE SCALE IS THE FOLD FIX. Read this before enlarging anything here.
 *
 * Measured on the live page 2026-07-29: the ZIP input sat at 614px and the submit
 * button at 614-678, against roughly 648px of usable height on a 1366x768 laptop
 * and roughly 700px on an iPhone 14 in Safari. The button was cut off on both.
 *
 * The cause was 566px of preamble above the field, and it was almost entirely
 * two things: an H1 wrapping to THREE lines at 54px under a `max-width: 15ch`
 * cap, and a 250 character lead running to five lines.
 *
 * So the fix is here, at the base, and not in another viewport-specific tier.
 * The three stacked short-phone tiers further down this file were a previous
 * attempt at the same problem from the wrong end: they patched per device, they
 * keyed on viewport HEIGHT (which changes under you on mobile Safari as the URL
 * bar collapses, so the hero reflows mid-scroll), and they never touched the
 * laptop case at all.
 *
 * WHEN THE FORM IS THE HERO, THE H1 IS THE CAPTION, NOT THE MONUMENT. A 54px
 * headline above an invisible field is worth less than a 40px headline above a
 * visible one. Do not put --t-hero back here without re-measuring the button
 * position at 1366x768 and 390x844. */
.hero-copy { max-width: 38rem; }
.hero-copy h1 {
  font-size: clamp(2rem, 3.1vw, 2.5rem);   /* 40px desktop, 32px phone */
  line-height: 1.12;
  max-width: 24ch;                          /* was 15ch, which forced the 3rd line */
  margin-bottom: var(--s-4);
}
.hero-copy .lead {
  font-size: 1.3125rem;                     /* 21px, from 22px */
  line-height: 1.52;
  max-width: 38rem;                         /* from 32rem: the cheapest line saved */
  margin-bottom: var(--s-5);
}

/* The one line of copy that answers the only question a reader actually has at
 * the field: what happens the moment I type this. It sits directly under the
 * button, above the slower reassurance, because it is the only reassurance that
 * changes a decision rather than confirming one already made. */
.hero-next {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-70);
  max-width: 34rem;
}

/* The payoff card. This is the "what do I get" answer, and it sits at the same
   height as the form so the two are read together. */
.hero-get {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
.hero-get .la--hero { margin: 0 auto var(--s-5); }
.hero-get h2 {
  font-size: var(--t-h3); margin-bottom: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line);
}
.hero-get ol { list-style: none; margin: 0 0 var(--s-5); padding: 0; counter-reset: g; display: grid; gap: var(--s-4); }
.hero-get li { counter-increment: g; display: grid; grid-template-columns: 26px 1fr; gap: var(--s-4); align-items: start; }
.hero-get li::before {
  content: counter(g); grid-row: span 2;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--brand); color: var(--surface);
  display: grid; place-items: center;
  font-family: var(--display); font-size: var(--t-small);
}
.hero-get b { display: block; font-weight: 650; }
.hero-get span { display: block; font-size: var(--t-small); color: var(--ink-70); }

.hero-get .hero-cost {
  border-top: 1px solid var(--line); padding-top: var(--s-4);
  font-size: var(--t-small); color: var(--ink-70);
}
.hero-get .hero-cost b { display: inline; color: var(--ink); }

.hero-copy .zipform { max-width: none; }

/* `.hero-why` (a row of three ticked reassurances) was removed from the hero on
 * 2026-07-29 and its rules deleted with it. All three of its facts now live in
 * `.hero-next` above, in one line, directly under the button. They were saying
 * "about three minutes / no Social Security number / results not held behind an
 * email" as three separate claims in a row 61px tall, and the reader had to have
 * already decided to care before any of them helped. Folded into the sentence
 * that answers "what happens next", they do the same work in a third the space
 * and at the moment the answer changes something. */

@media (max-width: 980px) {
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero-in { grid-template-columns: 1fr; gap: var(--s-6); }
  /* On a phone the form comes FIRST, then the payoff card. Explicit order,
     because a child with no order defaults to 0 and jumps above the H1. */
  .hero-copy { order: 1; max-width: none; }
  .hero-get  { order: 2; }
  .hero-get .la--hero { max-width: 18rem; }
}

/* ===================================================================== */
/* SHORT PHONES: the form must be reachable without scrolling.           */
/* ===================================================================== */
/*
 * REWRITTEN 2026-07-29, and the history matters because it explains why these
 * tiers must stay small.
 *
 * These began as three stacked tiers written when the submit button sat at 839px.
 * They shaved padding, dropped the H1 to 30px then 26px then 24px, shrank the
 * lead twice, and visually hid the ZIP label to buy back 30px. Every step was
 * measured and every step was treating a symptom, because the real causes were
 * elsewhere and neither was device specific:
 *
 *   1. A 54px H1 under a `max-width: 15ch` cap wrapping to three lines, plus a
 *      250 character lead running to five. Both fixed at the base, above.
 *   2. `.zipwrap { flex: 1 1 12rem }` becoming a forced 192px HEIGHT once the
 *      form turned into a column, which put ~82px of dead air between the field
 *      and the button on EVERY phone. Fixed in forms.css.
 *
 * Fixing those two moved the button from 839 to 582 at 390x844 without any tier
 * firing at all. So what is left here is a light touch for genuinely short
 * viewports, and the label is visible again everywhere because the space it
 * needed came back.
 *
 * A WARNING ABOUT KEYING ON HEIGHT. `max-height` on a phone is not stable: mobile
 * Safari reports a taller viewport before the URL bar collapses and a shorter one
 * after, so a tier keyed on height can switch mid-scroll and reflow the hero
 * under the reader's thumb. That is tolerable for padding and a font step. It
 * would not be tolerable for hiding or reordering anything, so do not add that
 * here. If a future fix needs more than this, fix the base again instead.
 */
/* EVERY PHONE, keyed on WIDTH because width is stable and height is not.
 *
 * This tier exists because of something visible only by rendering the two side by
 * side: with compaction keyed on height, an iPhone SE got a BETTER hero than an
 * iPhone 14. The short-viewport tier fired on the SE and tightened everything,
 * while the roomier iPhone 14 kept a 3-line 32px headline and a 5-line lead and
 * pushed its own button 140px further down. The most common phone in the audience
 * was getting the loosest layout.
 *
 * A 390px-wide screen is a phone whether it is 640px tall or 932px tall, so the
 * tightening belongs here where it applies to all of them. The height tiers below
 * now only handle the genuinely cramped cases. */
@media (max-width: 560px) {
  .hero-copy h1 {
    font-size: 1.75rem;    /* 28px: still comfortably the largest thing on screen */
    line-height: 1.14;
    max-width: 100%;
  }
  .hero-copy .lead { font-size: var(--t-body); line-height: 1.45; }
}

/* NOTHING IN THIS FILE MAY STYLE `.zipform`. The bundle order in build.mjs is
 * tokens, base, chrome, lineart, home.css, forms.css, result.css, so forms.css
 * loads AFTER this file. A `.zipform` rule here and a `.zipform` rule there have
 * identical specificity (a media query adds none), so forms.css wins on source
 * order and anything written here is silently dead.
 *
 * That is not hypothetical. The tiers below previously carried four such rules,
 * including one that visually hid the ZIP label to buy back 30px on short
 * phones. None of them ever applied. The label was never actually hidden in
 * production, the form padding never tightened, and the comment explaining the
 * trade-off described behaviour that did not exist. Everything read correct and
 * measured wrong, which is the whole failure mode of this hero.
 *
 * Form compaction for small viewports now lives in forms.css. Keep it there. */
@media (max-width: 700px) and (max-height: 740px) {
  .hero { padding-block: var(--s-5) var(--s-6); }
  .hero-copy .eyebrow { margin-bottom: var(--s-3); }
  .hero-copy h1 { margin-bottom: var(--s-3); }
  .hero-copy .lead { margin-bottom: var(--s-4); }
  .hero-next, .hero-note { margin-top: var(--s-3); }
}

/* iPhone SE and iPhone 8 at 667px, still in service and over-represented among
   exactly the readers this site is built for. 28px rather than the 26px this
   tier used to force, and the ZIP label stays VISIBLE: hiding it was buying 30px
   that the flex fix has since returned with room to spare. A visible label on a
   form filled in by people in their eighties is worth more than 30px of fold. */
@media (max-width: 700px) and (max-height: 700px) {
  .hero { padding-block: var(--s-3) var(--s-5); }
  .hero-copy h1 { font-size: 1.625rem; margin-bottom: var(--s-2); }
  .hero-copy .lead { line-height: 1.42; margin-bottom: var(--s-3); }
}

/* 360x640, a large population of older Android handsets and over-represented
   here for the same reason. The narrower column wraps the heading, so this tier
   takes one more step down. */
@media (max-width: 380px) and (max-height: 700px) {
  .hero { padding-block: 0 var(--s-5); }
  .hero-copy .eyebrow { margin-bottom: var(--s-2); }
  .hero-copy h1 { font-size: 1.625rem; }
  .hero-copy .lead { margin-bottom: var(--s-2); }
}

/* forms.css */
/* forms.css: the inline ZIP entry and the full intake. */

/* Question one, inline in the hero. The button and the first field are the same
   element, so this is still ONE call to action: it starts the form instead of
   promising to. */

.zipform {
  display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4);
  box-shadow: var(--shadow-card);
  max-width: 33rem;
}
.zipwrap { flex: 1 1 12rem; min-width: 0; }
.zipform label {
  display: block; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55);
  margin-bottom: var(--s-2); padding-left: var(--s-3);
}
.zipform input {
  width: 100%; min-height: var(--tap-primary);
  padding: 0 var(--s-4);
  font-family: var(--sans); font-size: 1.25rem; font-weight: 600; color: var(--ink);
  background: var(--ground); border: 2px solid var(--line); border-radius: var(--r-md);
}
.zipform input::placeholder { color: var(--ink-55); font-weight: 500; }
.zipform input:focus-visible { border-color: var(--brand); outline-offset: 1px; }
.zipform input[aria-invalid="true"] { border-color: var(--brand); background: var(--surface); }
.zipform .btn { flex: 0 0 auto; }

.err { font-size: var(--t-small); color: var(--brand); margin: var(--s-2) 0 0; padding-left: var(--s-3); font-weight: 600; }

@media (max-width: 560px) {
  .zipform { flex-direction: column; align-items: stretch; }
  .zipform .btn { width: 100%; }
  /* `.zipwrap` carries `flex: 1 1 12rem`, which is correct in the desktop ROW,
   * where 12rem is a WIDTH basis. The moment this container becomes a COLUMN,
   * flex-basis switches axis and that 12rem becomes a forced 192px HEIGHT on a
   * block whose content is about 110px tall. The result was ~82px of dead air
   * between the ZIP field and the submit button on every phone, which pushed the
   * button toward the fold and looked like a spacing choice rather than a bug.
   *
   * Measured 2026-07-29: the button sat at 656px on a 390x844 viewport with this
   * missing. AIOGovernment already carried this override and its comment;
   * this site never got it. If you add a sibling property, it needs this too. */
  .zipwrap { flex: 0 0 auto; }
}

/* SMALL VIEWPORT FORM COMPACTION LIVES HERE, NOT IN home.css.
 *
 * The bundle order in build.mjs is tokens, base, chrome, lineart, home.css,
 * forms.css, result.css. This file loads last of the two, so a `.zipform` rule
 * here beats an identical-specificity one in home.css on source order. The
 * reverse is not true, which is why four such rules in home.css (form padding,
 * label margin, tap-target heights, and a rule that visually hid the ZIP label
 * on short phones) were dead for as long as they existed. Nothing errored and
 * nothing applied.
 *
 * Tap targets are never reduced below 52px here. The readers this site is for
 * are frequently in their eighties, often on a phone they find hard to hit
 * accurately, and buying fold space by shrinking the one thing they have to
 * touch is the wrong trade every time. The label also stays visible: the
 * placeholder alone is not a label, it disappears the moment they start typing,
 * and this audience is the least able to afford that. */
@media (max-width: 700px) and (max-height: 740px) {
  .zipform { padding: var(--s-3); }
  .zipform label { margin-bottom: var(--s-1); }
  .zipform input, .zipform .btn { min-height: 56px; }
}

@media (max-width: 700px) and (max-height: 700px) {
  .zipform { padding: var(--s-3); gap: var(--s-2); }
  .zipform input, .zipform .btn { min-height: 52px; }
}

/* The last few pixels at 360x500, an older small Android with browser chrome,
   where the button landed 8px under the fold with all the type above already
   tightened. Taken from the form's padding and the label gap, never from the
   input or the button. */
@media (max-width: 380px) and (max-height: 700px) {
  .zipform { padding: var(--s-2); }
  .zipform label { margin-bottom: 2px; }
}

/* Full intake ---------------------------------------------------------- */

.check { max-width: 46rem; }

.progress { margin-bottom: var(--s-6); }
.progress-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--brand); border-radius: 999px; transition: width .3s var(--ease); }
.progress-meta {
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-small); color: var(--ink-55); margin-top: var(--s-3); font-weight: 600;
}

.stepcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-7); box-shadow: var(--shadow-card);
}
.stepcard[hidden] { display: none; }
.stepcard h2 { font-size: 1.75rem; max-width: 24ch; }
.stepcard .hint { color: var(--ink-70); font-size: var(--t-small); }

.field { margin-bottom: var(--s-6); }
.field > label, .fieldset > legend {
  display: block; font-size: var(--t-body); font-weight: 650; margin-bottom: var(--s-2); padding: 0;
}
.field .hint { display: block; margin-bottom: var(--s-3); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select {
  width: 100%; min-height: var(--tap-primary); padding: 0 var(--s-4);
  font-family: var(--sans); font-size: var(--t-body); color: var(--ink);
  background: var(--ground); border: 2px solid var(--line); border-radius: var(--r-md);
}
.field select { appearance: none; padding-right: var(--s-7); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--brand); }

.fieldset { border: 0; margin: 0 0 var(--s-6); padding: 0; }
.opts { display: grid; gap: var(--s-3); }
.opts-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .opts-2 { grid-template-columns: 1fr; } }

.opt {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-primary); padding: var(--s-3) var(--s-5);
  background: var(--ground); border: 2px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; font-weight: 550;
}
.opt:hover { border-color: var(--brand); background: var(--surface); }
.opt input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--brand); margin: 0; }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Consent wraps to two lines on a phone, so it cannot be a single-line row. */
.opt-consent { align-items: flex-start; padding-block: var(--s-4); line-height: 1.5; }
.opt-consent input { margin-top: 3px; }

.stepnav { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); }
.stepnav .btn-primary { min-width: 12rem; }
.saved { font-size: var(--t-small); color: var(--open); font-weight: 650; display: none; align-items: center; gap: var(--s-2); }
.saved[data-on] { display: inline-flex; }

.asterisk { font-size: var(--t-small); color: var(--ink-55); margin-top: var(--s-5); max-width: 68ch; }

.done { text-align: center; }
.done .tick {
  width: 64px; height: 64px; margin: 0 auto var(--s-5);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--open-wash); color: var(--open);
}
.done .tick svg { width: 30px; height: 30px; }
.done h2 { margin-inline: auto; }
.done p { margin-inline: auto; }

.noscript-note { background: var(--accent-wash); border-radius: var(--r-md); padding: var(--s-5); }

/* result.css */
/* result.css: the results page, and the availability states it renders.
 *
 * THE RULE THIS FILE EXISTS TO ENFORCE VISUALLY: a state is never carried by
 * colour alone. Every state pill has a WORD, and every state pill has a SHAPE
 * that differs from the others. A reader with any form of colour blindness, a
 * reader on a black and white printout, and a reader who has turned colours off
 * all get the same information, which matters more here than on most sites
 * because the difference between "open" and "worth calling to check" is the
 * difference between a wasted afternoon and a meal delivery.
 *
 * The other rule: the CONFIRMED DATE is never hidden behind an interaction. No
 * tooltip, no accordion, no "show details". It sits next to the claim, at a
 * readable size, because a family weighing a stale listing needs the date at
 * the moment they read the listing.
 */

/* The plan shell ------------------------------------------------------- */

.result-head {
  padding-block: var(--s-7) var(--s-6);
  background:
    radial-gradient(900px 420px at 80% -20%, var(--brand-wash), transparent 62%),
    var(--ground);
  border-bottom: 1px solid var(--line);
}
.result-head h1 { font-size: var(--t-h1); max-width: 20ch; margin-bottom: var(--s-4); }
.result-where { font-size: var(--t-lead); color: var(--ink-70); margin-bottom: var(--s-5); }

.result-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  font-size: var(--t-small); color: var(--ink-55);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.result-meta b { color: var(--ink-70); font-weight: 650; }

/* Sections ------------------------------------------------------------- */

.rsection { padding-block: var(--s-8); border-bottom: 1px solid var(--line); }
.rsection:last-of-type { border-bottom: 0; }
.rsection-head { max-width: var(--measure); margin-bottom: var(--s-6); }
.rsection-head h2 { margin-bottom: var(--s-3); }
.rsection-count {
  font-size: var(--t-small); color: var(--ink-55);
}

/* The county front door, always first when we have it ------------------ */

.frontdoor {
  background: var(--brand-wash);
  border: 1px solid var(--line); border-left: 5px solid var(--brand);
  border-radius: var(--r-md);
  padding: var(--s-6); margin-bottom: var(--s-6);
}
.frontdoor h3 { margin-bottom: var(--s-3); }
.frontdoor .callnum {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  color: var(--brand); text-decoration: none;
  min-height: var(--tap); margin-block: var(--s-2) var(--s-3);
}
.frontdoor .callnum:hover { color: var(--brand-lift); text-decoration: underline; }
.frontdoor .also {
  font-size: var(--t-small); color: var(--ink-70);
  border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-4);
}

/* A listing ------------------------------------------------------------ */

.listing {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-6);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-card);
}
.listing-top {
  display: flex; gap: var(--s-4); align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--s-4);
}
.listing h3 { font-size: var(--t-h3); margin: 0 0 var(--s-1); }
.listing-org { font-size: var(--t-small); color: var(--ink-55); margin: 0; }

.listing dl { margin: 0; }
.listing dt {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-55); margin-top: var(--s-4);
}
.listing dd { margin: var(--s-1) 0 0; font-size: var(--t-small); color: var(--ink-70); max-width: var(--measure); }
.listing dd a { color: var(--brand); }

.listing-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.listing-actions .btn { min-height: var(--tap); font-size: var(--t-small); padding: 0 var(--s-5); }

.listing-src {
  font-size: var(--t-micro); color: var(--ink-55);
  margin-top: var(--s-4);
}
.listing-src a { color: var(--ink-55); }

/* The state pill.
   Word + shape + colour, never colour alone. The three shapes are deliberately
   different silhouettes rather than three colours of the same dot. */

.state {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .04em;
  padding: var(--s-2) var(--s-4); border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.state svg { width: 13px; height: 13px; flex: 0 0 auto; }

.state-open     { background: var(--open-wash);   color: var(--open); }
.state-waitlist { background: var(--wait-wash);   color: var(--waitlist); }
.state-unknown  { background: var(--unsure-wash); color: var(--unsure); }

/* The confirmed date. Never hidden, never smaller than body-adjacent size. */
.confirmed {
  display: block; font-size: var(--t-small); color: var(--ink-70);
  margin-top: var(--s-3);
}
.confirmed b { color: var(--ink); font-weight: 650; }

/* An empty section says the gap is OURS ---------------------------------- */

.gap {
  background: var(--surface);
  border: 1px solid var(--line); border-left: 5px solid var(--unsure);
  border-radius: var(--r-md); padding: var(--s-6);
}
.gap h3 { margin-bottom: var(--s-3); }
.gap p { color: var(--ink-70); }

/* A degraded section. Ours, not theirs. */
.degraded {
  background: var(--wait-wash);
  border: 1px solid var(--line); border-left: 5px solid var(--waitlist);
  border-radius: var(--r-md); padding: var(--s-6);
}

/* The single conversion block ------------------------------------------- */
/* One destination, Family Observatory, and it appears only when the family's
   own answers show a coordination problem. There is no price here: the paid
   product states its own, on its own site, where it can be bought. */

.handoff {
  background: var(--surface);
  border: 1px solid var(--line); border-top: 5px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-7);
  margin-top: var(--s-6);
}
.handoff h2 { margin-bottom: var(--s-4); }
.handoff .why {
  background: var(--accent-wash); border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
}
.handoff .why p { margin: 0; font-size: var(--t-small); }
.handoff .why b { font-weight: 650; }
.handoff ul { margin: 0 0 var(--s-6); padding-left: var(--s-5); max-width: var(--measure); }
.handoff li { margin-bottom: var(--s-2); color: var(--ink-70); }
.handoff .quiet-note { font-size: var(--t-small); color: var(--ink-55); margin-top: var(--s-4); }

/* When there is no coordination problem, we say so and ask for nothing. */
.no-pitch {
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: var(--s-6); margin-top: var(--s-6);
  color: var(--ink-70);
}

/* Print: a family prints this and takes it to a kitchen table ------------ */

@media print {
  .site-header, .site-footer, .listing-actions, .handoff, .skip { display: none !important; }
  body { background: var(--print-paper); color: var(--print-ink); font-size: 11pt; }
  .listing { break-inside: avoid; box-shadow: none; border: 1px solid var(--print-rule); }
  .state { border: 1px solid var(--print-ink); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 760px) {
  .result-head h1 { font-size: var(--t-h2); }
  .listing-top { flex-direction: column; gap: var(--s-3); }
  .listing { padding: var(--s-5); }
  .handoff { padding: var(--s-5); }
  .frontdoor { padding: var(--s-5); }
}

/* Ruled out. Its own colour AND its own struck-circle shape, because the whole
   system rests on "ruled out" and "we do not know" being different findings.
   Muted rather than alarming: being ruled out on a stated rule is information,
   not a failure, and the rule that produced it is shown next to it. */
.state-ruled { background: var(--unsure-wash); color: var(--unsure); opacity: .85; }

/* MOBILE TAP TARGETS AND LONG URLS ON THE RESULTS PAGE.
 *
 * Measured at a true 390px viewport, not a resized desktop window: the results
 * page overflowed 56px and carried nine links at 19px tall. Both matter more
 * here than anywhere else on the site, because this is the page somebody reads
 * one-handed in a hospital corridor and then tries to dial from.
 *
 * The overflow was a single unbroken medicare.gov URL running to 446px. A URL
 * is the one string that cannot be trusted to wrap on its own, and it is worth
 * printing in full rather than truncating, because families forward these
 * results and a cut-off link is not a link. */
.listing dd a,
.frontdoor .also a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-sm);
  /* Break anywhere rather than push the page sideways. Only URLs need this,
     and only because they contain no spaces to break at. */
  overflow-wrap: anywhere;
}
.listing dd a:hover,
.frontdoor .also a:hover { background: var(--brand-wash); }

/* Belt and braces: any long token inside a listing wraps rather than widening
   the page. A future data source WILL contain a URL longer than this one. */
.listing dd, .listing p, .frontdoor .also { overflow-wrap: anywhere; }