/* ============================================================================
   SUNNY HVAC — CAREERS PAGE  ·  styles.css
   Locked direction: DIRECTION 3 "Clean Heat" (GATE 1 LOCKED).
   Build contract: ../design/DESIGN-SPEC.md (936-line build spec).
   Self-contained: this file inlines the canonical brand tokens (sunny-tokens.css)
   AND the AA-corrected careers extension (tokens-careers.css). No external
   file:// links, no CDN @import. Fonts are self-hosted via fonts.css.
   ALL color/type/spacing flows from tokens below — no raw hex in components.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   1 · TOKENS  (sunny-tokens.css VERBATIM  +  tokens-careers.css extension)
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* — Color: the single red accent (sunny-tokens.css, LAW) — */
  --sunny-red:#e10201;            /* signature accent — links, primary CTA, focal */
  --sunny-red-600:#c30201;        /* hover / deep */
  --sunny-red-700:#a50100;        /* pressed */
  --sunny-red-50:#fef2f2;         /* tint wash */

  /* — Ink + neutrals (warm near-black, never pure #000) — */
  --sunny-ink:#141110;            /* primary text / headings */
  --sunny-ink-soft:#2a2422;       /* secondary headings */
  --sunny-charcoal:#463939;       /* tertiary */
  --sunny-muted:#6b6158;          /* metadata, captions, kickers */
  --sunny-line:#e5e1de;           /* hairline dividers / borders (decorative only) */

  /* — Backgrounds: white + warm paper — */
  --sunny-bg:#ffffff;             /* base surface */
  --sunny-warm-50:#faf8f6;        /* warm paper */
  --sunny-warm-100:#f2efec;       /* deeper warm paper */

  /* — Type system (exact from --font-sunny-*) — */
  --font-display:"Source Sans 3","Source Sans Pro",-apple-system,system-ui,sans-serif;
  --font-body:"Source Sans 3","Source Sans Pro",-apple-system,system-ui,sans-serif;
  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;

  /* — Weight scale — */
  --w-light:300; --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* — Radius: restrained — */
  --r-sm:.25rem; --r-md:.375rem; --r-lg:.5rem; --r-xl:.75rem;

  /* ── tokens-careers.css extension (link-AFTER values) ───────────────────── */

  /* Spacing scale (base unit 4px — the page's only spacing source) */
  --sp-1:.25rem;  --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.25rem;
  --sp-6:1.5rem;  --sp-8:2rem;   --sp-10:2.5rem;--sp-12:3rem;  --sp-16:4rem;
  --sp-20:5rem;   --sp-24:6rem;  --sp-32:8rem;

  /* Layout */
  --container:1200px;
  --container-narrow:760px;       /* form + prose measure */
  --gutter:clamp(1rem,4vw,2rem);

  /* Fluid type scale (clamp = mobile→desktop; no media query needed) */
  --fs-display:clamp(2.75rem,7vw,5.25rem);   /* hero H1 44→84px */
  --fs-h2:clamp(1.9rem,4vw,3rem);            /* section H2 30→48 */
  --fs-h3:clamp(1.25rem,2vw,1.5rem);         /* card/sub head 20→24 */
  --fs-stat:clamp(2.5rem,5.5vw,4rem);        /* stat numerals 40→64 */
  --fs-lede:clamp(1.0625rem,1.6vw,1.1875rem);/* lede 17→19 */
  --fs-body:1.0625rem;                        /* 17px body */
  --fs-small:.9375rem;                        /* 15px UI/helper */
  --fs-kicker:.71875rem;                      /* 11.5px kicker */
  --lh-tight:1.02; --lh-snug:1.18; --lh-body:1.6;
  --tracking-kicker:.18em; --tracking-tight:-.03em;

  /* A11y-CORRECTED interactive tokens (deck values failed AA at web sizes) */
  --field-border:#857b71;          /* 3.91:1 on warm-50, 4.14:1 on white — ≥3:1 non-text */
  --field-border-hover:#6b6158;    /* = --sunny-muted, 5.70:1 on warm-50 */
  --field-bg:#ffffff;              /* fields sit on white inside paper sections */
  --field-placeholder:#7a7068;     /* 4.83:1 white, 4.56:1 warm-50 — placeholder AA pass */

  /* Focus ring: 2-layer (white gap + solid red-700 8.06:1) — replaces deck's failing ring */
  --focus-ring:0 0 0 3px #ffffff, 0 0 0 5px #a50100;
  --focus-ring-on-red:0 0 0 3px rgba(165,1,0,.45), 0 0 0 5px #ffffff;

  /* Error */
  --err:#a50100;                   /* red-700 = 8.06:1 on white → AA small text */
  --err-bg:#fef2f2;                /* = --sunny-red-50 */

  /* On-red text (CRITICAL: <24px or <18.5px-bold must be SOLID white) */
  --on-red:#ffffff;                /* 4.99:1 ✅ */
  --on-red-muted:rgba(255,255,255,.82);   /* ONLY labels ≥18.5px bold / ≥24px */
  --hairline-on-red:rgba(255,255,255,.28);/* dividers inside the red section */

  /* ── FORM CRAFT REWORK (additive; DESIGN-SPEC §8-REVISED, mirrors design/tokens-careers.css)
     Build-sync: styles.css inlines its own :root (no @import of tokens-careers.css), so these
     must live HERE or every var() resolves to empty and the rework silently fails. No brand hex
     changed; every value AA-verified WCAG 2.x (ratios in tokens-careers.css §8R.9). ───────── */
  --field-fill:#fbfaf9;            /* near-white modern fill — not a muddy beige well */
  --field-hairline:#dcd7d1;        /* hairline border, 1.6:1 — quiet at rest, focus does the work */
  --field-fill-hover:#f6f4f1;      /* hover deepen */
  --field-fill-focus:#ffffff;      /* brightens to white on focus = "lift into edit" */
  --field-fill-disabled:#efebe7;   /* disabled well (ink 15.85:1 ✅) */
  --field-inset:inset 0 1px 2px rgba(20,17,16,.07);  /* tactile recess */
  --field-placeholder-fill:#6b6158;/* =--sunny-muted, 5.37:1 on --field-fill ✅ */

  /* Committed card (scenario + basics groups become real cards, not faint side rules) */
  --card-bg:#ffffff;
  --card-radius:.75rem;            /* =--r-xl real card corner */
  --card-shadow:0 1px 1px rgba(20,17,16,.10), 0 3px 6px rgba(20,17,16,.10), 0 10px 24px rgba(20,17,16,.12);
  --card-shadow-hover:0 1px 2px rgba(20,17,16,.05), 0 16px 40px rgba(20,17,16,.08);
  --card-pad:clamp(1.5rem,4vw,2.25rem);   /* interior padding rhythm */

  /* Answered-state (progressive reward — the rhythm/momentum device) */
  --answered-wash:#fdf4f3;         /* faint red-50 header tint on a completed card */
  --answered-ring:rgba(225,2,1,.22);

  /* Scenario number node (the demoted ordinal — a quiet disc) */
  --node-size:2.25rem;             /* 36px disc */
  --node-bg-todo:#ffffff;          /* unanswered: white disc, ink number */
  --node-bg-done:#e10201;          /* answered: red disc, white check (4.99:1) ✅ */

  /* Section progress device (prominent, sticky) */
  --progress-track:#e5e1de;        /* =--sunny-line */
  --progress-fill:#e10201;         /* =--sunny-red */
  --progress-h:.625rem;            /* 10px bar (was 4px) */
}

/* reduced-motion floor (global guard) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · RESET & BASE
   ───────────────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--sunny-ink);
  background:var(--sunny-bg);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--sunny-red);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none}
/* MF-1 fix: bare text/nav links must show a visible focus ring (WCAG 2.4.7) */
a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
.on-red a:focus-visible,.comp a:focus-visible{box-shadow:var(--focus-ring-on-red)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─────────────────────────────────────────────────────────────────────────
   3 · LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(4rem,9vw,8rem)}
.sec--line{border-top:1px solid var(--sunny-line)} /* hairline between same-tone sections */

.kicker{
  font-size:var(--fs-kicker);font-weight:var(--w-semibold);
  letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--sunny-muted);
}
.kicker .dot{color:var(--sunny-red)}
.h2{
  font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--w-semibold);
  letter-spacing:-.02em;line-height:var(--lh-snug);margin-top:var(--sp-3);max-width:18ch;
}
.lede{font-size:var(--fs-lede);color:var(--sunny-charcoal);max-width:60ch;
  margin-top:var(--sp-4);line-height:1.45}
.body-prose{max-width:68ch}
.serif-accent{font-family:var(--font-serif);font-style:italic;font-weight:600;color:var(--sunny-red)}
.label-strip{font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sunny-muted);margin:var(--sp-8) 0 var(--sp-3)}

/* ─────────────────────────────────────────────────────────────────────────
   4 · SKIP LINK + HEADER / NAV
   ───────────────────────────────────────────────────────────────────────── */
.skip{
  position:fixed;top:var(--sp-3);left:var(--sp-3);z-index:200;
  transform:translateY(-200%);
  background:var(--sunny-ink);color:#fff;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);font-size:var(--fs-small);font-weight:var(--w-semibold);
}
.skip:focus{transform:translateY(0);box-shadow:var(--focus-ring);text-decoration:none}

.nav{
  position:sticky;top:0;z-index:50;
  background:var(--sunny-warm-50);
  transition:background .15s ease,box-shadow .15s ease,border-color .15s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--sunny-bg);
  border-bottom-color:var(--sunny-line);
  box-shadow:0 1px 0 var(--sunny-line),0 8px 24px rgba(20,17,16,.06);
}
.nav-row{display:flex;align-items:center;gap:var(--sp-4);height:64px}
.brandmark{font-size:14px;font-weight:var(--w-bold);letter-spacing:-.01em;color:var(--sunny-ink)}
.brandmark:hover{text-decoration:none}
.brandmark .sun{color:var(--sunny-red)}
.nav-links{display:none;margin-left:auto;gap:var(--sp-6)}
.nav-links a{
  font-size:15px;font-weight:var(--w-semibold);color:var(--sunny-ink);
  padding-block:var(--sp-2);border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--sunny-red);text-decoration:none}
.nav-links a[aria-current="true"]{color:var(--sunny-red);border-bottom-color:var(--sunny-red)}
.nav-cta{margin-left:auto}
.nav-links + .nav-cta{margin-left:0}
.nav-cta-full{display:inline}
.nav-cta-short{display:none}

/* ─────────────────────────────────────────────────────────────────────────
   5 · BUTTONS  (deck definitions verbatim + completed states)
   ───────────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-body);font-size:15px;font-weight:var(--w-semibold);
  padding:14px 26px;min-height:48px;border-radius:var(--r-md);border:1px solid transparent;
  cursor:pointer;text-decoration:none;letter-spacing:.01em;transition:.15s ease;
}
.btn:hover{text-decoration:none}
.btn-sm{padding:10px 18px;min-height:44px;font-size:14px}
.btn-primary{background:var(--sunny-red);color:#fff}
.btn-primary:hover{background:var(--sunny-red-600)}
.btn-primary:active{background:var(--sunny-red-700)}
.btn-ghost{background:transparent;color:var(--sunny-ink);border-color:var(--sunny-ink)}
.btn-ghost:hover{background:var(--sunny-ink);color:var(--sunny-warm-50)}
.btn-ghost:active{background:var(--sunny-ink-soft)}
.btn-on-red{background:#fff;color:var(--sunny-red)}
.btn-on-red:hover{background:var(--sunny-warm-100)}
.btn-on-red:active{background:var(--sunny-warm-100);color:var(--sunny-red-700)}
.btn-ghost-red{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost-red:hover{background:rgba(255,255,255,.14)}
.btn-ghost-red:active{background:rgba(255,255,255,.22)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.on-red .btn:focus-visible,.btn-on-red:focus-visible,.btn-ghost-red:focus-visible{box-shadow:var(--focus-ring-on-red)}
.btn[disabled],.btn.is-disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;cursor:not-allowed}
.btn-on-red[disabled],.btn-ghost-red[disabled]{opacity:.5}
.btn-block{width:100%}
.arrow{font-size:16px;line-height:1;transition:transform .15s ease}
.btn:hover .arrow{transform:translateX(2px)}
@media (prefers-reduced-motion: reduce){.btn:hover .arrow{transform:none}}
.spinner{animation:spin .8s linear infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation:none}}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;margin-top:var(--sp-8)}

/* ─────────────────────────────────────────────────────────────────────────
   6 · HERO
   ───────────────────────────────────────────────────────────────────────── */
.hero{background:var(--sunny-warm-50)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:center}
.hero-grid>*{min-width:0}  /* grid-overflow guard: prevent aspect-ratio photo forcing track width */
.hero-h1{
  font-family:var(--font-display);font-size:var(--fs-display);font-weight:var(--w-bold);
  letter-spacing:-.03em;line-height:var(--lh-tight);margin-top:var(--sp-4);max-width:15ch;
}
.hero-lede{margin-top:var(--sp-6);max-width:58ch}
.hero-micro{font-size:var(--fs-small);color:var(--sunny-muted);margin-top:var(--sp-5);max-width:50ch}
@media(min-width:900px){
  .hero-grid{grid-template-columns:58% 42%;gap:var(--sp-12)}
}

/* ─────────────────────────────────────────────────────────────────────────
   7 · PHOTO SLOT (art-directed CSS placeholder — no faked photography)
   ───────────────────────────────────────────────────────────────────────── */
.photo{
  position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:280px;height:100%;
  background:
    linear-gradient(135deg,rgba(225,2,1,.12),rgba(20,17,16,0) 55%),
    linear-gradient(180deg,#efe7df 0%,#d8cabb 48%,#b9a594 100%);
}
.photo::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(20,17,16,.22) 1px,transparent 1.4px);background-size:4px 4px}
/* real photo present: fill the slot, drop the placeholder gradient + dot texture */
.photo:has(img){background:none}
.photo:has(img)::after{display:none}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo .cap{position:absolute;left:12px;bottom:12px;z-index:2;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#faf8f6;background:rgba(20,17,16,.72);padding:6px 10px;border-radius:var(--r-sm)}
.photo .note{position:absolute;right:12px;top:12px;z-index:2;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sunny-ink);background:rgba(250,248,246,.9);padding:5px 9px;
  border-radius:var(--r-sm);border:1px solid var(--sunny-line)}
.photo--hero{aspect-ratio:4/3;min-height:0;width:100%}
.photo--portrait{aspect-ratio:3/4;min-height:0;width:100%}
@media(min-width:900px){
  .photo--hero{aspect-ratio:auto;min-height:420px}
  .photo--portrait{min-height:460px}
}

/* ─────────────────────────────────────────────────────────────────────────
   8 · NUMBERED CARDS (Why Sunny 01/02/03)
   ───────────────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-10)}
@media(min-width:600px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.ncard{
  background:var(--sunny-bg);border:1px solid var(--sunny-line);border-radius:var(--r-lg);
  padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-3);transition:.15s ease;
}
.ncard:hover{border-color:var(--field-border);transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,17,16,.08)}
@media (prefers-reduced-motion: reduce){.ncard:hover{transform:none}}
.ncard-num{font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:clamp(2rem,3vw,2.75rem);color:var(--sunny-red);letter-spacing:-.04em;line-height:1;
  margin-bottom:var(--sp-2)}
.ncard-h{font-size:var(--fs-h3);font-weight:var(--w-semibold);color:var(--sunny-ink)}
.ncard-b{font-size:var(--fs-body);color:var(--sunny-charcoal);max-width:42ch}

/* ─────────────────────────────────────────────────────────────────────────
   9 · PULL-QUOTE (Fraunces — one per page)
   ───────────────────────────────────────────────────────────────────────── */
.pull{margin-block:var(--sp-10);border-left:3px solid var(--sunny-red);
  padding-left:var(--sp-6);max-width:46ch}
.pull q{font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--sunny-ink);line-height:1.35}
.pull q::before,.pull q::after{content:none}
.pull .by{display:block;font-size:var(--fs-body);color:var(--sunny-charcoal);margin-top:var(--sp-3)}

/* ─────────────────────────────────────────────────────────────────────────
   10 · STAT LEDGER (signature device — paper + on-red variants)
   ───────────────────────────────────────────────────────────────────────── */
.ledger{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);
  border-top:1px solid var(--sunny-line);border-bottom:1px solid var(--sunny-line);
  padding-block:var(--sp-8);margin-top:var(--sp-10);
}
@media(max-width:359px){.ledger{grid-template-columns:1fr}}
@media(min-width:900px){
  .ledger{display:flex;gap:var(--sp-8)}
  .ledger .stat{flex:1;position:relative}
  .ledger .stat+.stat::before{content:"";position:absolute;left:calc(var(--sp-8)/-2);
    top:0;bottom:0;width:1px;background:var(--sunny-line)}
}
.stat-n{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--fs-stat);
  color:var(--sunny-red);letter-spacing:-.04em;line-height:.9}
.stat-l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sunny-muted);
  margin-top:var(--sp-2)}
.ledger.on-red{border-color:var(--hairline-on-red)}
.ledger.on-red .stat-n{color:#fff}
.ledger.on-red .stat-l{color:#fff}  /* solid white — labels render ~12px, AA requires solid */
@media(min-width:900px){.ledger.on-red .stat+.stat::before{background:var(--hairline-on-red)}}

/* ─────────────────────────────────────────────────────────────────────────
   11 · THE ROLE — responsibility list rows
   ───────────────────────────────────────────────────────────────────────── */
.role{background:var(--sunny-warm-100)}
.role-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:start;margin-top:var(--sp-10)}
.role-grid>*{min-width:0}
@media(min-width:900px){.role-grid{grid-template-columns:56% 44%;gap:var(--sp-12)}}
.rows{list-style:none}
.row{display:flex;gap:var(--sp-3);padding-block:var(--sp-4);
  border-bottom:1px solid var(--sunny-line);align-items:flex-start}
.row:last-child{border-bottom:0}
.mark{flex:none;margin-top:.3em;color:var(--sunny-red)}
.mark--muted{color:var(--sunny-muted)}
.row span{font-size:var(--fs-body);color:var(--sunny-charcoal);max-width:60ch}
.role-close{margin-top:var(--sp-6);font-size:var(--fs-body);color:var(--sunny-charcoal);max-width:60ch}

/* ─────────────────────────────────────────────────────────────────────────
   12 · REQUIREMENTS
   ───────────────────────────────────────────────────────────────────────── */
.req-list{list-style:none;margin-top:var(--sp-10)}
.req-list .row span{color:var(--sunny-charcoal)}
.req-list .row b,.req-list .row strong{color:var(--sunny-ink);font-weight:var(--w-semibold)}
.nice-label{margin-top:var(--sp-10)}
.reassure{
  margin-top:var(--sp-10);background:var(--sunny-red-50);border:1px solid #f3d3d3;
  border-radius:var(--r-lg);padding:var(--sp-6);font-size:var(--fs-body);color:var(--sunny-ink-soft);
  max-width:64ch;
}

/* ─────────────────────────────────────────────────────────────────────────
   13 · COMP & BENEFITS — the ONE full-bleed red moment
   ───────────────────────────────────────────────────────────────────────── */
.comp{background:var(--sunny-red);color:#fff}
.comp .kicker{color:#fff}
.comp .h2{color:#fff;font-weight:var(--w-bold);max-width:20ch}
.comp .lede{color:#fff;max-width:60ch}   /* lede is ≥17px; solid white = 4.99:1 AA */
.comp-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10);margin-top:var(--sp-10)}
@media(min-width:900px){.comp-grid{grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:start}}
.comp-frame{font-size:var(--fs-body);color:#fff;max-width:60ch;margin-top:var(--sp-8)}
.comp-fine{font-size:var(--fs-small);color:#fff;max-width:64ch;margin-top:var(--sp-6)} /* solid white, 15px */

/* labeled-row deal table */
.deal{margin-top:0}
.deal-row{display:grid;grid-template-columns:1fr;gap:var(--sp-1);padding-block:var(--sp-4);
  border-bottom:1px solid var(--hairline-on-red)}
.deal-row:last-child{border-bottom:0}
@media(min-width:600px){.deal-row{grid-template-columns:minmax(120px,160px) 1fr;gap:var(--sp-4)}}
.deal-row dt{font-size:var(--fs-kicker);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;font-weight:var(--w-semibold)}
.deal-row dd{font-size:var(--fs-body);color:#fff}
.deal-cap{font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;font-weight:var(--w-semibold);margin-bottom:var(--sp-2)}

/* ─────────────────────────────────────────────────────────────────────────
   14 · APPLY / FORM
   ───────────────────────────────────────────────────────────────────────── */
.apply{background:var(--sunny-warm-100)}   /* deeper paper so white cards lift off it */
.form{margin-top:var(--sp-10)}
/* §8R.5 each form group is a committed card on the warm-paper section */
.form-group{
  background:var(--card-bg);border:1px solid var(--sunny-line);
  border-radius:var(--card-radius);box-shadow:var(--card-shadow);
  padding:var(--card-pad);margin-block:var(--sp-10);
}
.form-group:first-of-type{margin-top:var(--sp-10)}
.group-kicker{margin-bottom:var(--sp-2)}
.group-h{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--w-semibold);
  color:var(--sunny-ink);margin-bottom:var(--sp-3)}
.group-intro{font-size:var(--fs-body);color:var(--sunny-charcoal);max-width:64ch;margin-bottom:var(--sp-6)}

.field{margin-block:var(--sp-5)}
.field:first-child{margin-top:0}
.field-pair{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:600px){.field-pair{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .field-pair .field{margin-block:var(--sp-5);display:flex;flex-direction:column}
  /* align inputs across columns: hint area reserves space so fields-with-hint and
     fields-without start their control at the same Y, and controls bottom-align */
  .field-pair .field .control{margin-top:auto}
  .field-pair .field-hint{min-height:calc(var(--fs-small) * 1.5)}}
.field-label{display:block;font-size:var(--fs-small);font-weight:var(--w-semibold);
  color:var(--sunny-ink);margin-bottom:var(--sp-2)}
.field-hint{font-size:var(--fs-small);color:var(--sunny-muted);margin-bottom:var(--sp-2)}
/* §8R.2 CONTROL ANATOMY — modern flat field: soft fill, hairline border, focus-driven definition */
.control{
  width:100%;min-height:50px;padding:14px 16px;
  font-family:var(--font-body);font-size:17px;line-height:1.5;  /* 17px = no iOS zoom */
  color:var(--sunny-ink);
  background:var(--field-fill);                 /* soft flat fill, no deboss */
  border:1px solid var(--field-hairline);       /* hairline, not heavy 1.5px */
  border-radius:10px;                           /* modern radius */
  box-shadow:none;                              /* killed the inset well */
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.control::placeholder{color:var(--field-placeholder-fill)}
.control:hover{border-color:var(--field-border-hover)}
.control:focus-visible{outline:none;background:#fff;
  border-color:var(--sunny-red);box-shadow:var(--focus-ring)}   /* focus = the definition moment */
.control.is-filled{background:#fff;border-color:var(--field-hairline)}
.field.is-invalid .control{border-color:var(--err);background:var(--err-bg);box-shadow:none}
.control:disabled{background:var(--field-fill-disabled);border-color:var(--field-hairline);
  opacity:.55;cursor:not-allowed}

/* TEXTAREA — no native resize; JS auto-grow owns the height (clean corner, top-1%) */
textarea.control{min-height:120px;line-height:1.6;padding-bottom:15px;resize:none;overflow:hidden}
.ta-wrap{position:relative}
textarea.control::-webkit-resizer{display:none} /* belt-and-suspenders: no OS grip */

/* SELECT — match the modern control box; styled chevron */
select.control{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--field-fill);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b6158' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:44px;cursor:pointer;
}
select.control:focus-visible{background-color:#fff}   /* lift, keep chevron */
.field-err{display:none;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);
  color:var(--err);font-weight:var(--w-semibold);margin-top:var(--sp-2)}
.field.is-invalid .field-err{display:flex}
.field-err svg{flex:none}

/* checkbox group */
.checks{border:0;margin-block:var(--sp-5)}
.checkwrap{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
@media(min-width:600px){.checkwrap{grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-8)}}
.check{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;cursor:pointer;
  font-size:var(--fs-body);color:var(--sunny-ink)}
.check input{width:20px;height:20px;accent-color:var(--sunny-red);flex:none}
.check input:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:3px}
.other-reveal{margin-top:var(--sp-3);max-width:360px}
.other-reveal[hidden]{display:none}

/* ─────────────────────────────────────────────────────────────────────────
   15 · SCENARIO SCREENING BLOCK  (§8R.3 / §8R.5 / §8R.6 / §8R.7)
   ───────────────────────────────────────────────────────────────────────── */
/* The scenarios group is the canvas the white scenario cards + sticky rail sit
   on — it opts OUT of the committed-card fill so cards read on warm paper. */
#scenarios.form-group{background:transparent;border:0;box-shadow:none;padding:0;margin-top:var(--sp-10)}
.scenarios-intro{margin-top:var(--sp-6)}
.scenarios-frame{font-size:var(--fs-body);color:var(--sunny-charcoal);max-width:64ch;margin-top:var(--sp-3)}

/* §8R.6 PROMINENT PROGRESS RAIL — framed card: inset bar + bold red count + "N to go" */
.progress{
  background:var(--sunny-warm-50);
  padding:var(--sp-4) var(--sp-5);   /* real horizontal gutter — nothing bleeds to the edge */
  border:1px solid var(--sunny-line);
  border-radius:var(--r-xl);
  margin-bottom:var(--sp-8);
}
@media(min-width:900px){.progress{position:sticky;top:64px;z-index:10;box-shadow:0 6px 18px rgba(20,17,16,.06)}}
.progress-meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.progress-count{font-size:var(--fs-body);color:var(--sunny-ink);font-weight:var(--w-medium)}
.progress-count strong{font-family:var(--font-display);font-weight:700;color:var(--sunny-red);font-size:1.25rem;margin-right:.15em}
.progress-remain{font-size:var(--fs-small);color:var(--sunny-muted);white-space:nowrap}
.progress-track{
  position:relative;height:var(--progress-h);
  background:var(--progress-track);border-radius:999px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(20,17,16,.10);  /* carved channel, subtle */
}
.progress-fill{
  height:100%;width:0%;border-radius:999px;
  /* smooth continuous fill with quiet vertical sheen for depth — no hard segments */
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, var(--sunny-red) 0%, var(--sunny-red-600) 100%);
  transition:width .45s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){.progress-fill{transition:none}}

/* §8R.5 scenario = a clean committed card (no left spine — whitespace organizes) */
.scenario{
  position:relative;background:var(--card-bg);
  border:1px solid var(--field-hairline);border-radius:14px;
  box-shadow:var(--card-shadow);padding:var(--card-pad);
  margin-block:var(--sp-8);
  transition:box-shadow .15s ease,border-color .15s ease,background-color .15s ease;
}
.scenario:focus-within{box-shadow:var(--card-shadow-hover);border-color:var(--field-border-hover)}

/* §8R.3 HIERARCHY: number as quiet typography (no outlined-circle badge) → question is focal */
.scenario-top{display:flex;align-items:baseline;gap:var(--sp-3)}
.scenario-node{display:flex;align-items:baseline;gap:6px;flex:none}
.node-num{font-family:var(--font-display);font-weight:700;font-size:28px;
  color:var(--field-hairline);line-height:1;letter-spacing:-.01em}  /* big, quiet, modern */
.node-check{display:none;width:18px;height:18px;color:var(--sunny-red)}
.scenario-of{font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--sunny-muted)}
.scenario-setup{font-size:var(--fs-body);color:var(--sunny-charcoal);line-height:1.6;
  max-width:62ch;margin-top:var(--sp-4)}
.scenario-q{display:block;font-size:var(--fs-h3);font-weight:var(--w-semibold);color:var(--sunny-ink);
  line-height:1.35;max-width:60ch;margin-block:var(--sp-4)}   /* THE FOCAL LINE — loudest text on the card */
.scenario textarea.control{min-height:112px;background:#f7f5f3;border-color:var(--field-hairline)}
.scenario textarea.control:focus-visible{background:#fff;border-color:var(--sunny-red)}

/* §8R.6 per-card done-state: number reddens, check appears, faint wash */
.scenario.is-answered{background:linear-gradient(var(--answered-wash),var(--card-bg) 96px);
  border-color:var(--node-bg-done)}
.scenario.is-answered .node-num{color:var(--sunny-red)}
.scenario.is-answered .node-check{display:block}

/* ─────────────────────────────────────────────────────────────────────────
   16 · SUBMIT + FORM-LEVEL STATES
   ───────────────────────────────────────────────────────────────────────── */
.submit-block{margin-top:var(--sp-12)}
.btn-submit{min-height:52px}
@media(max-width:599px){.btn-submit{width:100%}}
.privacy{font-size:var(--fs-small);color:var(--sunny-muted);margin-top:var(--sp-3)}

.errsum{border:1px solid var(--err);background:var(--err-bg);border-radius:var(--r-md);
  padding:var(--sp-6);margin-bottom:var(--sp-8)}
.errsum[hidden]{display:none}
.errsum-head{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-h3);
  color:var(--err);font-weight:var(--w-semibold);margin-bottom:var(--sp-3)}
.errsum ul{margin-left:var(--sp-6)}
.errsum li{margin-block:var(--sp-1)}
.errsum a{color:var(--err);font-weight:var(--w-semibold)}

.formfail{border:1px solid var(--err);background:var(--err-bg);border-radius:var(--r-md);
  padding:var(--sp-6);margin-bottom:var(--sp-8)}
.formfail[hidden]{display:none}
.formfail h3{font-size:var(--fs-h3);color:var(--err);font-weight:var(--w-semibold);margin-bottom:var(--sp-2)}
.formfail p{color:var(--sunny-ink-soft);max-width:60ch;margin-bottom:var(--sp-4)}

.success{
  background:var(--sunny-warm-50);border:1px solid var(--sunny-line);border-radius:var(--r-lg);
  padding:clamp(2rem,5vw,3rem);max-width:var(--container-narrow);
}
.success[hidden]{display:none}
.success-icon{color:var(--sunny-red);margin-bottom:var(--sp-4)}
.success h3{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--w-semibold);
  color:var(--sunny-ink);margin-bottom:var(--sp-4);max-width:18ch}
.success p{color:var(--sunny-charcoal);max-width:56ch;margin-bottom:var(--sp-4)}
.success a{color:var(--sunny-red);font-weight:var(--w-semibold)}

.live-region{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ─────────────────────────────────────────────────────────────────────────
   17 · FOOTER
   ───────────────────────────────────────────────────────────────────────── */
.footer{background:var(--sunny-bg);border-top:1px solid var(--sunny-line)}
.footer-inner{padding-block:var(--sp-16)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-6);align-items:baseline}
.footer-brand{font-size:14px;font-weight:var(--w-bold);letter-spacing:-.01em;color:var(--sunny-ink)}
.footer-brand .sun{color:var(--sunny-red)}
.footer-back{font-size:var(--fs-small);font-weight:var(--w-semibold);color:var(--sunny-red)}
.stamp{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-8);
  font-size:var(--fs-small);color:var(--sunny-ink)}
.stamp .item{display:inline-flex;gap:var(--sp-2);align-items:baseline}
.stamp .item + .item{border-left:1px solid var(--sunny-line);padding-left:var(--sp-4)}
.stamp .lbl{font-size:var(--fs-kicker);letter-spacing:.12em;text-transform:uppercase;color:var(--sunny-muted)}
.disclaimer{font-size:var(--fs-small);color:var(--sunny-muted);margin-top:var(--sp-8);max-width:70ch}
@media(max-width:599px){
  .stamp{flex-direction:column;gap:var(--sp-2)}
  .stamp .item + .item{border-left:0;padding-left:0}
}

/* ─────────────────────────────────────────────────────────────────────────
   18 · RESPONSIVE — nav reveal at sm+
   ───────────────────────────────────────────────────────────────────────── */
@media(min-width:600px){
  .nav-links{display:flex}
  .nav-cta-full{display:inline}
  .nav-cta-short{display:none}
}
@media(max-width:599px){
  .nav-cta-full{display:none}
  .nav-cta-short{display:inline}
  .nav-cta{margin-left:auto}
}