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

   Every ratio below was MEASURED against WCAG 2.2 AA on the real pairing, not
   assumed and not inherited. Structure is deliberately identical to AIOSeniors:
   these are sibling System Two properties and a family moving between them
   should not have to relearn the interface. Only the hue differs.

   WHY NAVY AND NOT AIOSENIORS MARINE. AIOSeniors is the front door and reads
   warm, because a family arriving there is frightened. This is the entitlement
   layer: statutory, checkable, institutional. Navy is the register of the
   agencies whose rules we are quoting, and it keeps the two properties visually
   separable when a plan links from one to the other. */

:root {
  /* Colour ------------------------------------------------------------- */
  --ink:         #102A3A;  /* headings + body.        14.02:1 on ground */
  --brand:       #234E7A;  /* navy. links, fills.      8.12:1 on ground */
  --brand-lift:  #2F6299;  /* hover, active.           5.96:1 on ground */
  --accent:      #D98C3A;  /* CTA FILL ONLY. never type: 2.55:1, fails by design.
                              Ink on this fill measures 5.05:1, which is the pair
                              that actually has to pass. Shared with AIOSeniors
                              on purpose: one System Two "this is the button". */
  --accent-lift: #E9A254;  /* CTA hover. LIGHTER, so the ink label GAINS contrast: 6.35:1 */
  --ground:      #FBF8F3;  /* warm off-white. never pure white, never grey */
  --surface:     #FFFFFF;  /* cards only */
  --line:        #E3DDD3;  /* warm hairline, never cool grey */
  --ok:          #2E6E62;  /* confirmed states only.   5.63:1 on ground */

  /* Outcome colours. These carry MEANING, so none is decorative and none may be
     reused for anything else. `ruled-out` is deliberately NOT red: being ruled
     out of one programme is information, not an error, and a family that sees
     red stops reading the four programmes underneath it. */
  --likely:      #2E6E62;  /* same value as ok.       5.63:1 on ground */
  --possible:    #234E7A;  /* same value as brand.    8.12:1 on ground */
  --ruled-out:   #5C5147;  /* warm slate, quiet.      7.02:1 on ground */

  --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));
  --ok-wash:     color-mix(in srgb, var(--ok) 10%, var(--ground));
  --ruled-wash:  color-mix(in srgb, var(--ruled-out) 6%, 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 */
  --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;

  --shadow-card: 0 1px 2px rgba(16, 42, 58, .05), 0 8px 24px rgba(16, 42, 58, .06);
  --shadow-lift: 0 2px 4px rgba(16, 42, 58, .07), 0 16px 40px rgba(16, 42, 58, .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);
}

/* Amber fill, ink label. White on amber measures 2.71:1 and fails AA;
   ink on amber measures 5.05:1 and passes. This pairing is 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(--ok); }

/* 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(--ok-wash); color: var(--ok); }
.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(--ok); 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); }

/* ============================================================== */
/* AIOGovernment additions. No hex values: tokens.css owns colour. */
/* ============================================================== */

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

/* 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
     layout where 12rem is a width. Once the container flips to a column, that
     same basis becomes a HEIGHT and opened a dead gap of roughly 190px between
     the ZIP field and the button, on the primary call to action, on the device
     most of these families are holding. Reset it. */
  .zipwrap { flex: 0 0 auto; }
}

/* 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(--ok); 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(--ok-wash); color: var(--ok);
}
.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); }

/* The step heading receives focus programmatically when a question advances, so
   a screen reader announces the new question. It is not interactive and the
   reader did not navigate to it by keyboard, so the visible ring is noise: on
   first paint it read as an error box around an untouched form. Focus, and the
   announcement, are preserved. */
.stepcard h2:focus { outline: none; }
.stepcard h2:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* results.css */
/* results.css: the answer, the action plan, and the live-check badges.
   No hex values here. tokens.css owns colour. */

/* --------------------------------------------------------------- summary */

.res-head { background: var(--brand-wash); border-bottom: 1px solid var(--line); padding: var(--s-7) 0 var(--s-6); }
.res-head h1 { margin-bottom: var(--s-3); }
.res-where { font-size: var(--t-lead); color: var(--ink-70); margin-bottom: var(--s-5); }
.res-where b { color: var(--ink); }

/* The count row. `ruled_out` is present and never hidden: telling a family what
   to skip returns time they do not have. */
.res-counts { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.res-counts li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); font-size: var(--t-small); font-weight: 650; color: var(--ink-70);
}
.res-counts b { font-size: var(--t-h3); display: block; font-family: var(--display); color: var(--ink); }

/* ----------------------------------------------------------------- group */

.res-group { padding: var(--s-7) 0 0; }
.res-group > .wrap > h2 { font-size: var(--t-h2); margin-bottom: var(--s-2); }
.res-group-note { color: var(--ink-70); max-width: var(--measure); margin-bottom: var(--s-5); }

.res-list { display: grid; gap: var(--s-5); list-style: none; padding: 0; margin: 0; }

/* ------------------------------------------------------------------ card */

.res {
  background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-card);
}
.res--likely    { border-left-color: var(--likely); }
.res--possible  { border-left-color: var(--possible); }
.res--general   { border-left-color: var(--possible); }
.res--unknown   { border-left-color: var(--line); }
.res--ruled_out { border-left-color: var(--ruled-out); background: var(--ruled-wash); }

.res h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.res-org { font-size: var(--t-small); color: var(--ink-55); font-weight: 650; margin-bottom: var(--s-4); }
.res-summary { margin-bottom: var(--s-4); max-width: var(--measure); }

/* Outcome pill. Text ALWAYS states the outcome in words: colour is a second
   signal, never the only one. */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: var(--s-2) var(--s-3); border-radius: 999px; border: 1px solid currentColor;
  margin-bottom: var(--s-3);
}
.pill--likely    { color: var(--likely); background: var(--ok-wash); }
.pill--possible  { color: var(--possible); background: var(--brand-wash); }
.pill--general   { color: var(--possible); background: var(--brand-wash); }
.pill--unknown   { color: var(--ink-70); background: var(--ground); }
.pill--ruled_out { color: var(--ruled-out); background: var(--ground); }

/* The reason. This is the product: never a score without the sentence that
   produced it. */
.res-why {
  border-left: 3px solid var(--line); padding-left: var(--s-4);
  color: var(--ink-70); margin-bottom: var(--s-4); max-width: var(--measure);
}
.res-why b { color: var(--ink); }

.res-missing {
  background: var(--ground); border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: var(--s-4); margin-bottom: var(--s-4); font-size: var(--t-small);
}

/* ------------------------------------------------------------ next steps */

.res-steps { margin: 0 0 var(--s-5); padding-left: var(--s-5); }
.res-steps li { margin-bottom: var(--s-3); }

.res-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.res-actions .btn { min-height: var(--tap); }

.res-phone {
  font-family: var(--display); font-size: var(--t-h3); color: var(--brand);
  text-decoration: none; font-weight: 600;
}
.res-phone:hover { color: var(--brand-lift); }

/* --------------------------------------------------------------- sourcing */

.res-meta {
  border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-4);
  font-size: var(--t-small); color: var(--ink-55); display: grid; gap: var(--s-2);
}
.res-meta a { color: var(--brand); }

/* Live check badge. Three states, three different sentences, never one icon
   doing the work of all three. */
.live { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 650; }
.live-dot { width: 10px; height: 10px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.live--ok      { color: var(--ok); }
.live--moved   { color: var(--possible); }
.live--down    { color: var(--ruled-out); }
.live--unknown { color: var(--ink-55); }

/* ------------------------------------------------------------- veterans */

.vet {
  background: var(--brand-wash); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); margin-bottom: var(--s-6);
}
.vet h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.vet-note { font-size: var(--t-small); color: var(--ink-70); max-width: var(--measure); }
.vet-office { background: var(--surface); border-radius: var(--r-md); padding: var(--s-5); margin-top: var(--s-4); }
.vet-office address { font-style: normal; margin-bottom: var(--s-3); }

/* An honest absence. Alpine County has no CVSO in the state directory and the
   engine records that as a VERIFIED FINDING rather than showing nothing. */
.vet-absent { background: var(--ground); border: 1px dashed var(--line); }

/* ------------------------------------------------------------------ plan */

.plan-save {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-7); box-shadow: var(--shadow-card); max-width: 40rem;
}
.plan-save h2 { font-size: var(--t-h3); }
.plan-privacy { font-size: var(--t-small); color: var(--ink-70); margin-top: var(--s-4); }

.plan-link {
  display: block; word-break: break-all; background: var(--ground);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); font-family: var(--sans); font-size: var(--t-small); margin: var(--s-4) 0;
}

/* ------------------------------------------------- the one referral out */
/* Family Observatory. The ONLY commercial destination on this site, and it
   carries no price: the results page states the need and hands over. */

.handoff {
  background: var(--ink); color: var(--ground);
  border-radius: var(--r-lg); padding: var(--s-8) var(--s-7); margin: var(--s-8) 0;
}
.handoff h2 { color: var(--ground); font-size: var(--t-h2); margin-bottom: var(--s-4); max-width: 20ch; }
.handoff p { color: var(--ground); opacity: .88; max-width: var(--measure); margin-bottom: var(--s-5); }
.handoff .btn-primary { background: var(--accent); color: var(--ink); }
.handoff .btn-primary:hover { background: var(--accent-lift); }

/* --------------------------------------------------------------- report */

.report-toggle {
  background: none; border: 0; color: var(--ink-55); font-size: var(--t-small);
  text-decoration: underline; cursor: pointer; padding: var(--s-2) 0; min-height: var(--tap);
}
.report-toggle:hover { color: var(--brand); }

/* ------------------------------------------------------------- printing */
/* A printable plan is a real requirement here: a lot of these families take
   paper to an office appointment. */

@media print {
  .site-header, .site-footer, .handoff, .plan-save, .report-toggle, .skip { display: none !important; }
  .res { break-inside: avoid; box-shadow: none; border: 1px solid var(--line); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
  body { background: var(--surface); }
}

@media (max-width: 560px) {
  .res { padding: var(--s-5); }
  .res-actions .btn { width: 100%; }
}