/* 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; }
}

/* 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); }

/* 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%; }
}

/* 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; }