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

/* ============================================================== */
/* 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;
    /* WIDTH IS LOAD BEARING. At 30rem the two columns squeezed the row blurbs to
       three words a line and the feature heading to one word a line, which looks
       broken and is slower to read than the plain list it replaced. A mega-menu
       that is not wide enough to breathe is worse than no mega-menu. */
    width: 46rem; max-width: calc(100vw - var(--s-6) * 2);
    padding: var(--s-5);
  }

  /* Keep the panel inside the viewport. The rightmost menu sits close to the
     CTA, so a left anchored 46rem panel would run off the edge. */
  .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);
  }

  /* SPECIFICITY TRAP, found by rendering rather than by reading.
     The base stylesheet carries `.navpanel[data-open] { display: block }`, which
     is (0,2,0) and therefore beats the `.navpanel { display: grid }` below at
     (0,1,0). Hover worked, because hover never sets data-open. The CLICK and
     TOUCH path sets it, so on a touch device the mega-menu silently collapsed
     into a stacked column with a full width feature card. Matching the
     specificity here is the fix. */
  .navpanel[data-open] { display: grid; }

  /* 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: 16rem minmax(0, 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; }
}

/* ============================================================== */
/* WORDMARK: AIO reads first, then the noun.                      */
/* ============================================================== */
/*
 * "AIOGovernment" set in one weight and one colour is 13 characters of
 * undifferentiated text, and the eye has to parse the whole string before the
 * brand lands. AIO is the family mark and has to arrive first.
 *
 * The separation is WEIGHT plus COLOUR, not colour alone, so it survives a
 * greyscale print and a colour-blind reader. The accent is not used: it is the
 * CTA fill and measures 2.55:1 on the ground, which fails as type by design.
 * Brand navy measures 8.12:1 and the noun stays at ink's 14.02:1, so both halves
 * pass AA comfortably.
 */
/* Two-tone, and the tones are far enough apart to actually separate. The first
   attempt put brand navy next to ink navy, which are close in value, so at
   header size it still read as one 13 character word. AIO now carries the
   heavier weight AND the saturated hue; the noun steps back in weight and
   lightness so the eye lands on AIO first and reads the noun second. */
.brand-name {
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--ink-70);
}
.brand-name b {
  font-weight: 800;
  color: var(--brand);
  letter-spacing: .015em;
  margin-right: 0.08em;   /* a hair of air, not a visible gap */
}

/* On the dark trust-bar side of the footer the same relationship has to hold,
   so the noun lightens rather than the mark darkening. */
.foot-brand .brand-name { color: var(--ink-70); }

/* ============================================================== */
/* FOOTER: ecosystem cross links + the mandated Digilu trust bar. */
/* ============================================================== */

.foot-eco {
  border-top: 1px solid var(--line);
  padding-top: var(--s-6); margin-top: var(--s-7);
}
.foot-eco h2 {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-55); margin-bottom: var(--s-4);
}
.foot-eco ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot-eco a {
  display: block; text-decoration: none; color: var(--ink);
  font-weight: 650; min-height: var(--tap); padding: var(--s-2) 0;
}
.foot-eco a span {
  display: block; font-weight: 400; font-size: var(--t-small); color: var(--ink-70);
}
.foot-eco a:hover { color: var(--brand); }

/* The trust bar is the LAST row of the footer, always. Centred strip, its own
   rule above it, three chips of equal height. */
.digilu-trust-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-4);
  border-top: 1px solid var(--line);
  margin-top: var(--s-7);
}
.dtb-chip, .dtb-badge {
  display: inline-flex; align-items: center; height: 52px;
  box-sizing: border-box; text-decoration: none; border-radius: 11px;
}
.dtb-built {
  gap: var(--s-3); padding: 0 var(--s-5);
  background: var(--ink); border: 1px solid var(--line);
}
.dtb-built span {
  font-size: 9px; font-weight: 600; line-height: 1.1; letter-spacing: .13em;
  text-transform: uppercase; color: var(--line); white-space: nowrap;
}
.dtb-built img { height: 22px; width: auto; display: block; }
.dtb-badge img {
  height: 52px; width: 217px; display: block;
  border: 1px solid var(--line); border-radius: 11px; box-sizing: border-box;
}
.dtb-chip:hover, .dtb-badge:hover { border-color: var(--brand); }

@media (max-width: 560px) {
  .digilu-trust-bar { gap: var(--s-3); padding: var(--s-5) var(--s-3); }
  .dtb-badge img { width: 100%; max-width: 217px; }
}

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

/* 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 [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.la-anim .la.is-drawn [pathLength] { 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 [pathLength]:nth-child(1)  { transition-delay: .00s; }
.la-anim .la [pathLength]:nth-child(2)  { transition-delay: .06s; }
.la-anim .la [pathLength]:nth-child(3)  { transition-delay: .12s; }
.la-anim .la [pathLength]:nth-child(4)  { transition-delay: .18s; }
.la-anim .la [pathLength]:nth-child(5)  { transition-delay: .24s; }
.la-anim .la [pathLength]:nth-child(6)  { transition-delay: .30s; }
.la-anim .la [pathLength]:nth-child(7)  { transition-delay: .36s; }
.la-anim .la [pathLength]:nth-child(8)  { transition-delay: .42s; }
.la-anim .la [pathLength]:nth-child(9)  { transition-delay: .48s; }
.la-anim .la [pathLength]: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 [pathLength] { 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 [pathLength] { 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(--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%; } }

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

.hero-copy { max-width: 34rem; }
.hero-copy h1 { font-size: var(--t-hero); margin-bottom: var(--s-4); }
.hero-copy .lead { margin-bottom: var(--s-5); max-width: 32rem; }

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

/* The form label has to say WHY, not just what. */
.hero-copy .zipform { max-width: none; }
.hero-why {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-70);
}
.hero-why span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-why .tick { color: var(--ok); font-weight: 700; }

@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; }
}

/* Three-up comparison, used where a distinction has three sides rather than two.
   Equal widths on purpose: the point is that these are peers, not a ranking. */
.asym--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .asym--3 { grid-template-columns: 1fr; } }

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