/* 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 by
   observatory/lab.mjs against WCAG 2.2 AA, not assumed. */

:root {
  /* Colour ------------------------------------------------------------- */
  --ink:         #14313D;  /* headings + body.        12.90:1 on ground */
  --brand:       #1F5D74;  /* marine. links, fills.    6.89:1 on ground */
  --brand-lift:  #2A7288;  /* hover, active.           5.13:1 on ground */
  --accent:      #D98C3A;  /* CTA FILL ONLY. never type: 2.55:1, fails by design */
  --accent-lift: #E9A254;  /* CTA hover. LIGHTER, so the ink label gains contrast */
  --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 */

  --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));

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

  /* Body base is 18px. Some readers are 80. This is a floor, not a default. */
  --t-body:   1.125rem;   /* 18 */
  --t-lead:   1.375rem;   /* 22 */
  --t-small:  1rem;       /* 16 */
  --t-micro:  0.875rem;   /* 14, labels and meta only, never prose */
  --t-h3:     1.5rem;     /* 24 */
  --t-h2:     2rem;       /* 32 */
  --t-h1:     2.75rem;    /* 44 */
  /* Capped so the hook AND question one both sit above the fold on a laptop.
     A bigger H1 that pushes the ZIP field off screen is a worse hero. */
  --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(20, 49, 61, .05), 0 8px 24px rgba(20, 49, 61, .06);
  --shadow-lift: 0 2px 4px rgba(20, 49, 61, .07), 0 16px 40px rgba(20, 49, 61, .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); }

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

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

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

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

@media (max-width: 560px) {
  .zipform { flex-direction: column; align-items: stretch; }
  .zipform .btn { width: 100%; }
}

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

.check { max-width: 46rem; }

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

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

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

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

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

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

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

.stepnav { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); }
.stepnav .btn-primary { min-width: 12rem; }
.saved { font-size: var(--t-small); color: var(--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); }