@charset "UTF-8";
/* =============================================================================
   THE MCA RESCUE — site.css
   The complete visual language of the site. Every page links only this file.

   Structure
     01. Design tokens (palette, type scale, space, radii, shadow, z-index)
     02. Semantic aliases (the layer that makes theming + dark mode a token swap)
     03. Modern reset
     04. Base typography
     05. Layout primitives
     06. Section themes  (re-map the semantic aliases — the key trick)
     07. Components
     08. Utilities
     09. Motion
     10. Print
     11. color scheme (light only)

   Rules honored
     - No framework, no @import (fonts are <link>-ed from the HTML head).
     - No !important outside the print block and .visually-hidden.
     - Every color comes from a token.
     - Mobile-first. Nothing horizontally scrolls at 320px.

   Contrast audit (measured, sRGB, WCAG 2.x):
     #C8102E on #FFFFFF ......... 5.88:1  PASS body text
     #FFFFFF on #C8102E ......... 5.88:1  PASS button label
     #C8102E on #0A1730 ......... 3.03:1  FAIL body / PASS large + non-text UI
        -> red text on navy uses --red-300 #FF7D8E ... 7.25:1 PASS at any size
     #D4A72C on #0A1730 ......... 7.95:1  PASS
     #D4A72C on #FFFFFF ......... 2.24:1  FAIL — gold is NEVER text or an
        informational border on a light surface. On light, gold text uses
        --gold-700 #886B1C (5.04) and gold UI borders use --gold-600 #AC8724 (3.36).
        Plain --gold-400 on light survives only as a decorative rule (--accent-line).
     #F7F3E8 on #0A1730 ......... 16.0:1  PASS
     #A8B4C8 on #0A1730 ..........8.48:1  PASS (muted text on navy)
     #4E5668 on #FFFFFF ......... 7.36:1  PASS (muted text on light)
     #0F7B4F on #FFFFFF ......... 5.29:1  PASS
   Added by the system pass (same method):
     #14171F on #FFE45C ......... 14.1:1  PASS <mark> placeholder text
     #886B1C on #FFE45C ......... 3.96:1  <mark> dashed outline (non-text UI)
     #8A91A1 on #FFFFFF ......... 3.16:1  --control-border, light (input edge vs its white fill)
     #5E7194 on #162033 ......... 3.31:1  --control-border, dark (on #17223A 3.22,
                                          on the lifted cream #1A2742 3.02, on #131F35 3.35)
     #6F93C8 on #1A2742 ......... 4.73:1  dark .callout--info rule (5.19 on #162033)
     #A3ADC0 on #131F35 ......... 7.29:1  dark muted text on the lifted cream band
                                          (6.58 on its raised #1A2742)
     #8F99AC on #1A2742 ......... 5.18:1  dark placeholder on the lifted cream band
     #4E5668 on #EFE9D9 ......... 6.07:1  calculator placeholder on a sunken (empty) field
   ========================================================================== */


/* =============================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Brand palette (exact, per BRIEF.md) ------------------------------- */
  --navy-900: #0A1730;
  --navy-800: #10233F;
  --navy-700: #16304F;
  --navy-600: #1F4068;
  --navy-500: #2A5488;
  --red-600:  #C8102E;
  --red-500:  #E01B3C;
  --red-300:  #FF7D8E;   /* derived: red for TEXT on navy (7.25:1) */
  --gold-400: #D4A72C;
  --gold-300: #E8C466;
  --gold-600: #AC8724;   /* per BRIEF: gold for UI BORDERS + large text on light
                            (3.36 on white / 3.03 on cream) — never body text */
  --gold-700: #886B1C;   /* per BRIEF: gold for TEXT on light (5.04 / 4.55) */
  --cream-100:#F7F3E8;
  --cream-200:#EFE9D9;
  --ink-900:  #14171F;
  --ink-700:  #2B3040;
  --slate-600:#4E5668;
  --slate-400:#8A91A1;
  --slate-200:#D8DBE3;
  --slate-100:#ECEEF2;
  --white:    #FFFFFF;
  --green-600:#0F7B4F;
  --green-100:#E3F3EB;
  --red-050:  #FDECEF;
  --gold-050: #FBF4E2;

  /* light text tuned for navy surfaces */
  --on-navy:        #F7F3E8;
  --on-navy-muted:  #A8B4C8;
  --on-navy-line:   #24385C;

  /* --- Type ------------------------------------------------------------- */
  --font-head: "Sora", "Archivo", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* fluid scale, locked 320px -> 1440px */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw,  0.75rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.16vw,  0.9375rem);
  --step-0:  clamp(1rem,     0.96rem + 0.20vw,  1.125rem);
  --step-1:  clamp(1.20rem,  1.13rem + 0.34vw,  1.406rem);
  --step-2:  clamp(1.44rem,  1.33rem + 0.55vw,  1.758rem);
  --step-3:  clamp(1.728rem, 1.55rem + 0.89vw,  2.197rem);
  --step-4:  clamp(2.074rem, 1.80rem + 1.37vw,  2.75rem);
  --step-5:  clamp(2.488rem, 2.07rem + 2.09vw,  3.45rem);
  --step-6:  clamp(2.6rem,   2.10rem + 2.60vw,  4.30rem);

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-base:  1.65;
  --lh-loose: 1.75;
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.08em;
  --tracking-eyebrow: 0.14em;
  --measure: 66ch;
  --measure-short: 46ch;

  /* --- Space (4px base) -------------------------------------------------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-7:  1.75rem;   /* 28 */
  --space-8:  2rem;      /* 32 */
  --space-9:  2.5rem;    /* 40 */
  --space-10: 3rem;      /* 48 */
  --space-11: 3.5rem;    /* 56 */
  --space-12: 4rem;      /* 64 */
  --space-13: 5rem;      /* 80 */
  --space-14: 6rem;      /* 96 */
  --space-15: 7.5rem;    /* 120 */
  --space-16: 9rem;      /* 144 */

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 7rem);
  --section-y-tight: clamp(2.25rem, 4.5vw, 4rem);

  /* --- Containers -------------------------------------------------------- */
  --container:        72rem;   /* 1152 */
  --container-narrow: 48rem;   /*  768 */
  --container-wide:   84rem;   /* 1344 */

  /* --- Radii ------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Borders ----------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --rule-gold: 2px solid var(--gold-400);

  /* --- Shadow (soft, layered, never harsh) -------------------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 23, 48, 0.05);
  --shadow-sm: 0 1px 2px rgba(10, 23, 48, 0.05),
               0 2px 6px rgba(10, 23, 48, 0.05);
  --shadow-md: 0 1px 2px rgba(10, 23, 48, 0.04),
               0 4px 10px rgba(10, 23, 48, 0.05),
               0 10px 24px rgba(10, 23, 48, 0.06);
  --shadow-lg: 0 2px 4px rgba(10, 23, 48, 0.04),
               0 8px 18px rgba(10, 23, 48, 0.06),
               0 24px 48px rgba(10, 23, 48, 0.09);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.75, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 480ms;

  /* --- Chrome ------------------------------------------------------------ */
  --header-h: 4.5rem;
  --header-h-scrolled: 3.75rem;
  --sticky-cta-h: 4.25rem;

  /* --- z-index ----------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-panel: 150;    /* full-screen nav panel sits UNDER the header so the
                        hamburger/close button stays clickable */
  --z-header: 200;
  --z-overlay: 400;
  --z-skip: 500;
}


/* =============================================================================
   02. SEMANTIC ALIASES
   Components only ever reference these. Section themes (06) and dark mode (11)
   re-map them, so any component dropped into any surface inverts correctly.
   ========================================================================== */

:root {
  --surface:         var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--cream-100);
  --surface-inverse: var(--navy-900);

  --text:        var(--ink-900);
  --text-strong: var(--navy-900);
  --text-muted:  var(--slate-600);
  --text-inverse:var(--on-navy);
  --placeholder: #6B7285;   /* input ::placeholder: 4.80:1 on --surface-raised (#FFF) */

  --border:        var(--slate-200);
  --border-strong: var(--slate-400);
  /* Form-control edges (inputs, selects, checkboxes, range track). Resolved HERE,
     so it stays slate-400 (3.16:1 on the white field) inside cream sections too,
     whose own --border-strong (#CFC7B1) is decorative only. Dark mode: section 11. */
  --control-border: var(--border-strong);

  --accent:          var(--gold-700);   /* gold as TEXT / meaningful icon stroke */
  --accent-ui:       var(--gold-600);   /* gold as an INFORMATIONAL border (>=3:1) */
  --accent-line:     var(--gold-400);   /* purely decorative rules — never meaning */
  --accent-contrast: var(--navy-900);

  --action:        var(--red-600);
  --action-hover:  var(--red-500);
  --action-text:   var(--white);
  --action-quiet:  var(--red-600);      /* red used as TEXT on this surface */

  --link:       var(--navy-600);
  --link-hover: var(--red-600);

  --ring: 0 0 0 3px rgba(31, 64, 104, 0.18), 0 0 0 1px var(--navy-600);
  --card-shadow: var(--shadow-md);
  --btn-outline:    var(--navy-600);    /* .btn--secondary border */
  --btn-outline-fg: var(--white);       /* label once that border fills in */
}


/* =============================================================================
   03. MODERN RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  /* Keeps the sticky .site-header off anything the UA scrolls into view — fragment
     navigation AND sequential focus (Tab / Shift-Tab), which uses the same
     scroll-into-view algorithm. scroll-padding on the scroller also covers the
     controls that carry no id, which scroll-margin on [id] never could.
     WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum). */
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, fieldset, pre {
  margin: 0;
}

ul[class], ol[class] { padding: 0; list-style: none; }

body {
  min-height: 100svh;
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

img, svg, video, canvas, picture, iframe {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }
svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

hr {
  border: 0;
  border-top: var(--hairline);
  margin-block: var(--space-8);
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--gold-300);
  color: var(--navy-900);
}

/* NOTE: no `:target, [id] { scroll-margin-top }` here, on purpose. scroll-padding-top
   on `html` (section 03) already clears the sticky header for fragment targets, and
   the two would ADD — the scrollport shrinks by the padding while the target box
   grows by the margin — dropping cross-page fragment links ~190px down the page. */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 3px solid var(--surface);
}


/* =============================================================================
   04. BASE TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text-strong);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

p, li, dd, dt, figcaption { max-width: var(--measure); }
p { text-wrap: pretty; }

strong, b { font-weight: 600; color: var(--text-strong); }
em { font-style: italic; }
small { font-size: var(--step--1); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.925em; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

sup { font-size: 0.68em; line-height: 0; vertical-align: super; }

/* A phone number never splits at its hyphen; a long address may break anywhere
   rather than push a 320px column sideways. */
a[href^="tel:"] { white-space: nowrap; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Owner placeholders ([OWNER TO CONFIRM: …]) stay loud on purpose — but designed,
   not the UA's neon. Same fill in both schemes (see audit: 14.1:1). */
mark {
  background-color: #FFE45C;
  color: var(--ink-900);
  padding: 0.05em 0.25em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  outline: 1px dashed var(--gold-700);
  outline-offset: 1px;
}

/* Long-form text (legal pages, FAQ answers, about copy) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-5); }
.prose > * + :is(h2, h3, h4) { margin-top: var(--space-10); }
.prose :is(h2, h3, h4) + * { margin-top: var(--space-3); }
.prose h2 { font-size: var(--step-2); }
.prose h3 { font-size: var(--step-1); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent-line); }
.prose a { color: var(--link); font-weight: 500; }


/* =============================================================================
   05. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section {
  padding-block: var(--section-y);
  background-color: var(--surface);
  color: var(--text);
  position: relative;
}
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Owl: vertical rhythm without margin math */
.stack { --stack-gap: var(--space-6); }
.stack > * + * { margin-top: var(--stack-gap); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-9); }

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
@media (min-width: 40em) {
  .grid--2 { --cols: 2; }
  .grid--3 { --cols: 2; }
  .grid--4 { --cols: 2; }
}
@media (min-width: 60em) {
  .grid--3 { --cols: 3; }
  .grid--4 { --cols: 4; }
  .grid { gap: var(--space-8); }
}
/* An odd last card spans the row instead of sitting beside an empty cell. */
@media (min-width: 40em) {
  .grid--2.grid--fill-last > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 40em) and (max-width: 59.99em) {
  .grid--3.grid--fill-last > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* The global `li { max-width: 66ch }` is for running text. List-based components
   (card grids, timelines, stat rows, the TOC) fill their track instead. */
:is(.grid, .stack, .stat-grid, .phase-timeline__track, .toc) > li,
li.card { max-width: none; }
.grid--auto {
  --cols: 1;
  --min-col: 17rem;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col), 100%), 1fr));
}

.cluster {
  --cluster-gap: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap);
}
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

.split {
  --split: 1fr 1fr;
  --split-align: start;
  display: grid;
  gap: var(--space-9);
  align-items: var(--split-align);
}
@media (min-width: 62em) {
  .split { grid-template-columns: var(--split); gap: var(--space-12); }
  .split--reverse > :first-child { order: 2; }
}

.section-head { max-width: var(--measure); margin-bottom: var(--space-9); }
.section-head--center { margin-inline: auto; text-align: center; }
/* Several centred lines on a phone are ragged and misalign with the cards below. */
@media (max-width: 39.99em) {
  .section-head--center { text-align: left; margin-inline: 0; }
}
.section-head__title { margin-top: var(--space-3); }
.section-head__lede {
  margin-top: var(--space-4);
  font-size: var(--step-1);
  line-height: var(--lh-base);
  color: var(--text-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  text-wrap: balance;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background-color: var(--accent-line);
  flex: none;
  /* centred on the FIRST line, so a wrapped eyebrow keeps its rule in place */
  margin-top: 0.8em;
  margin-top: calc(0.5lh - 1px);
}
.eyebrow--bare::before { display: none; }

.rule {
  width: 3.5rem;
  height: 2px;
  border: 0;
  background-color: var(--accent-line);
  margin-block: var(--space-6);
}


/* =============================================================================
   06. SECTION THEMES
   Each theme RE-MAPS the semantic aliases. Drop any component inside and it
   inverts automatically — no per-component "--on-dark" variants needed.
   ========================================================================== */

/* One navy alias block, shared by every navy surface on the site. Adding a
   selector here is all it takes to make a new dark surface theme correctly. */
.section--navy,
.theme-navy,
.site-header,
.nav-panel,
.hero,
.page-hero,
.cta-band,
.site-footer {
  --surface:        var(--navy-900);
  --surface-raised: var(--navy-700);
  --surface-sunken: var(--navy-800);
  --surface-inverse:var(--cream-100);

  --text:        var(--on-navy);
  --text-strong: var(--white);
  --text-muted:  var(--on-navy-muted);
  --text-inverse:var(--ink-900);

  --border:        var(--on-navy-line);
  --border-strong: var(--navy-500);

  --accent:          var(--gold-400);
  --accent-ui:       var(--gold-400);
  --accent-line:     var(--gold-400);
  --accent-contrast: var(--navy-900);

  --action:       var(--red-600);
  --action-hover: var(--red-500);
  --action-text:  var(--white);
  --action-quiet: var(--red-300);

  --link:       var(--gold-300);
  --link-hover: var(--white);

  --ring: 0 0 0 3px rgba(212, 167, 44, 0.35), 0 0 0 1px var(--gold-400);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.35);
  --btn-outline: var(--gold-400);
  --btn-outline-fg: var(--navy-900);
}
.section--navy,
.theme-navy {
  background-color: var(--surface);
  color: var(--text);
}

.section--cream,
.theme-cream {
  --surface:        var(--cream-100);
  --surface-raised: var(--white);
  --surface-sunken: var(--cream-200);
  --surface-inverse:var(--navy-900);

  --text:        var(--ink-900);
  --text-strong: var(--navy-900);
  --text-muted:  var(--slate-600);
  --text-inverse:var(--on-navy);

  --border:        var(--cream-200);
  --border-strong: #CFC7B1;

  --accent:          var(--gold-700);
  --accent-ui:       var(--gold-600);
  --accent-line:     var(--gold-400);
  --accent-contrast: var(--navy-900);

  --action:       var(--red-600);
  --action-hover: var(--red-500);
  --action-text:  var(--white);
  --action-quiet: var(--red-600);

  --link:       var(--navy-600);
  --link-hover: var(--red-600);

  --ring: 0 0 0 3px rgba(31, 64, 104, 0.18), 0 0 0 1px var(--navy-600);
  --card-shadow: var(--shadow-sm);
  --btn-outline: var(--navy-600);
  --btn-outline-fg: var(--white);

  background-color: var(--surface);
  color: var(--text);
}

.section--white,
.theme-white {
  --surface:        var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--slate-100);
  --surface-inverse:var(--navy-900);

  --text:        var(--ink-900);
  --text-strong: var(--navy-900);
  --text-muted:  var(--slate-600);
  --text-inverse:var(--on-navy);

  --border:        var(--slate-200);
  --border-strong: var(--slate-400);

  --accent:          var(--gold-700);
  --accent-ui:       var(--gold-600);
  --accent-line:     var(--gold-400);
  --accent-contrast: var(--navy-900);

  --action:       var(--red-600);
  --action-hover: var(--red-500);
  --action-text:  var(--white);
  --action-quiet: var(--red-600);

  --link:       var(--navy-600);
  --link-hover: var(--red-600);

  --ring: 0 0 0 3px rgba(31, 64, 104, 0.18), 0 0 0 1px var(--navy-600);
  --card-shadow: var(--shadow-md);
  --btn-outline: var(--navy-600);
  --btn-outline-fg: var(--white);

  background-color: var(--surface);
  color: var(--text);
}


/* =============================================================================
   07. COMPONENTS
   ========================================================================== */

/* --- 07.1 Skip link + screen-reader helper -------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background-color: var(--navy-900);
  color: var(--cream-100);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 2px solid var(--gold-400);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: var(--cream-100); }

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* --- 07.2 Buttons --------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;               /* 44px touch target */
  padding: var(--space-3) var(--space-6);
  border: var(--border-width-thick) solid var(--btn-bd);
  border-radius: var(--radius-md);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--ring); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--action);
  --btn-fg: var(--action-text);
  --btn-bd: var(--action);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { --btn-bg: var(--action-hover); --btn-bd: var(--action-hover); box-shadow: var(--shadow-md); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  --btn-bd: var(--btn-outline);
}
/* Filled-on-hover. --btn-outline-fg is themed so the label never lands on a
   near-matching background (navy-on-navy). */
.btn--secondary:hover {
  --btn-bg: var(--btn-outline);
  --btn-fg: var(--btn-outline-fg);
}

.btn--ghost {
  --btn-fg: var(--text);
  --btn-bd: transparent;
  padding-inline: var(--space-3);
}
.btn--ghost:hover { --btn-bg: var(--surface-sunken); --btn-fg: var(--text-strong); }

.btn--gold {
  --btn-bg: var(--gold-400);
  --btn-fg: var(--navy-900);
  --btn-bd: var(--gold-400);
}
.btn--gold:hover { --btn-bg: var(--gold-300); --btn-bd: var(--gold-300); }

.btn--lg {
  min-height: 3.25rem;
  padding: var(--space-4) var(--space-8);
  font-size: var(--step-0);
  border-radius: var(--radius-md);
}
.btn--sm {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--step--1);
}
@media (max-width: 35.99em) {
  .btn--lg { padding-inline: var(--space-5); }
  .hero__actions .btn { width: 100%; }
}
.btn--block { display: flex; width: 100%; }
.btn__icon { width: 1.125em; height: 1.125em; flex: none; }


/* --- 07.3 Site header ----------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--navy-900);          /* solid fallback */
  border-bottom: 1px solid rgba(212, 167, 44, 0.35);
  color: var(--on-navy);
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
/* Solid on purpose. A translucent bar over the white body read as washed-out
   slate above the navy hero, and the seam looked like a rendering error. */
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(10, 23, 48, 0.28); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
  transition: min-height var(--dur) var(--ease-out);
}
.site-header.is-scrolled .site-header__inner { min-height: var(--header-h-scrolled); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--cream-100);
  flex: none;
}
.brand:hover { color: var(--white); }
.brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  flex: none;
  transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
}
.site-header.is-scrolled .brand__mark { width: 2.125rem; height: 2.125rem; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--step-0);
  letter-spacing: var(--tracking-snug);
}
.brand__tag {
  font-size: var(--step--2);
  color: var(--on-navy-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.nav { display: none; }

/* ------------------------------------------------------------------ *
 * Header fit — corrected after measuring the rendered layout.
 *
 * Six nav labels need ~575px on one line. With the brand lockup (241px)
 * and the action cluster (321px) plus flex gaps, the header bar needs
 * ~1176px of inner width. The default --container caps inner width at
 * 1152px MINUS gutters, so that width was unreachable at ANY viewport:
 * .nav__list shrank (min-width:0 on a flex child) and .nav__link had
 * white-space:normal, so "How it works" and "Who we help" broke onto two
 * lines on every common laptop width (1280/1366/1440). Three fixes:
 *   a) labels never wrap, and nav items never shrink below their content;
 *   b) the header bar alone spans --container-wide (1344px);
 *   c) the desktop nav only appears at 74em, where it genuinely fits.
 * Measured budget once the nav is showing: brand-without-tagline 160 +
 * nav 574 + actions 321 + gaps 40 = ~1135, so the bar needs ~1183px of
 * viewport. The tagline is redundant on desktop (the nav does the
 * wayfinding) so it yields; the phone yields too until 86em, where the
 * full bar fits inside --container-wide. The hamburger (full-screen navy
 * panel, focus-trapped) covers everything below 74em.
 * IF YOU ADD OR RENAME A NAV ITEM, RE-MEASURE THESE THREE BREAKPOINTS —
 * they are derived from the rendered width of six specific labels.
 * ------------------------------------------------------------------ */
.site-header .container { max-width: var(--container-wide); }
.nav__link { white-space: nowrap; }
.nav__item { flex: 0 0 auto; }

@media (min-width: 74em) {
  .nav { display: block; margin-inline: auto; }
  .nav__list { display: flex; align-items: center; gap: var(--space-2); }
  /* The wordmark still reads "The MCA Rescue"; the tagline is what yields. */
  .brand__tag { display: none; }
}
.nav__item { display: block; }
.nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--on-navy);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--gold-300); background-color: rgba(255, 255, 255, 0.06); }
.nav__link[aria-current="page"] {
  color: var(--gold-300);
  box-shadow: inset 0 -2px 0 var(--gold-400);
  border-radius: 0;
}
.nav__link:focus-visible {
  box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.35), 0 0 0 1px var(--gold-400);
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.header-actions .btn--sm { padding-inline: var(--space-5); }
.header-phone {
  display: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--cream-100);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--gold-300); }
@media (min-width: 48em) { .header-phone { display: inline-flex; align-items: center; gap: var(--space-2); } }
/* The phone steps aside while the nav is tight; it returns at 86em. It stays
   reachable in the mobile panel, the footer and the sticky bar throughout. */
@media (min-width: 74em) and (max-width: 85.9375em) {
  .header-phone { display: none; }
}

.header-actions .btn--primary { display: none; }
@media (min-width: 62em) { .header-actions .btn--primary { display: inline-flex; } }

/* Hamburger — a real button, JS only toggles aria-expanded + [data-open] */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 167, 44, 0.4);
  color: var(--cream-100);
  cursor: pointer;
  flex: none;
}
.nav-toggle:hover { background-color: rgba(255, 255, 255, 0.07); }
.nav-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.35), 0 0 0 1px var(--gold-400); }
@media (min-width: 74em) { .nav-toggle { display: none; } }

.nav-toggle__box {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 0.875rem;
}
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: calc(50% - 1px); }
.nav-toggle__bar:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen navy panel. Closed state = [hidden]; open state = [data-open]. */
.nav-panel[hidden] { display: none; }
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  background-color: var(--navy-900);
  color: var(--on-navy);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-12);
}
/* The panel is fully visible the moment [hidden] comes off. The open animation
   is additive, so a JS bug that forgets [data-open] can never leave it blank. */
@media (prefers-reduced-motion: no-preference) {
  .nav-panel[data-open] { animation: nav-panel-in var(--dur) var(--ease-out) both; }
}
@keyframes nav-panel-in {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to   { opacity: 1; transform: none; }
}
.nav-panel__inner { display: flex; flex-direction: column; gap: var(--space-8); }
.nav-panel__list { display: flex; flex-direction: column; }
.nav-panel__link {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--on-navy-line);
  color: var(--cream-100);
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
}
.nav-panel__link:hover { color: var(--gold-300); }
.nav-panel__link[aria-current="page"] { color: var(--gold-400); }
.nav-panel__foot { display: flex; flex-direction: column; gap: var(--space-3); }
.nav-panel__foot .btn { width: 100%; }
@media (min-width: 74em) { .nav-panel { display: none; } }

body.has-nav-open { overflow: hidden; }


/* --- 07.4 Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--navy-900);
  color: var(--on-navy);
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  /* navy semantic aliases come from the shared block in section 06 */
}
/* layered background: navy gradient + radial glow */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70rem 40rem at 78% -10%, rgba(31, 64, 104, 0.85), transparent 62%),
    radial-gradient(40rem 28rem at 8% 108%, rgba(212, 167, 44, 0.16), transparent 60%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 58%, #08122A 100%);
}
/* scrim that sits over an optional .hero__media image */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 23, 48, 0.94) 0%, rgba(10, 23, 48, 0.78) 55%, rgba(10, 23, 48, 0.55) 100%);
  pointer-events: none;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hero__inner { position: relative; display: grid; gap: var(--space-10); }
@media (min-width: 64em) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-12); align-items: center; }
}
.hero__eyebrow { color: var(--gold-400); }
.hero__title {
  margin-top: var(--space-5);
  font-size: var(--step-6);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  max-width: 18ch;
}
.hero__lede {
  margin-top: var(--space-6);
  font-size: var(--step-1);
  line-height: var(--lh-base);
  color: var(--on-navy);
  max-width: 54ch;
}
.hero__actions { margin-top: var(--space-8); }
.hero__note {
  margin-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--on-navy-muted);
  max-width: 48ch;
}
.hero__trust { margin-top: var(--space-9); padding-top: var(--space-6); border-top: 1px solid var(--on-navy-line); }
.hero__aside {
  background-color: rgba(22, 48, 79, 0.72);
  border: 1px solid var(--on-navy-line);
  border-top: 3px solid var(--gold-400);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

/* Inner-page hero (shorter, no aside) */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--navy-900);
  color: var(--on-navy);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(52rem 26rem at 88% -30%, rgba(31, 64, 104, 0.9), transparent 62%),
    linear-gradient(170deg, var(--navy-800), var(--navy-900));
}
.page-hero__title { margin-top: var(--space-4); color: var(--white); max-width: 22ch; }
.page-hero__lede {
  margin-top: var(--space-5);
  font-size: var(--step-1);
  color: var(--on-navy-muted);
  max-width: 58ch;
}
/* Wide screens: a faint gold roundel + scales (hand-drawn line art, decorative
   gold on navy) fills the empty right side of every inner hero. It bleeds off the
   right edge so its left edge stays clear of a full 58ch lede (measured: >=90px
   of clearance from 1152px up). Off below 72em so it can never sit behind text,
   and off on narrow-container heroes (the legal pages), whose text runs down the
   middle of the band. */
@media (min-width: 72em) {
  .page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -5rem;
    top: 50%;
    width: clamp(18rem, 24vw, 24rem);
    aspect-ratio: 1;
    transform: translateY(-50%);
    opacity: 0.12;
    pointer-events: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23D4A72C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='50' cy='23.5' r='2'/%3E%3Cpath d='M50 25.5V70M29 32.5Q50 29 71 32.5M36 70h28M40 74h20'/%3E%3Cpath d='M30 32.5l-8 19.5M30 32.5l8 19.5M70 32.5l-8 19.5M70 32.5l8 19.5'/%3E%3Cpath d='M20 52q10 9 20 0M60 52q10 9 20 0'/%3E%3C/svg%3E");
  }
  .page-hero:has(> .container--narrow)::after { display: none; }
}


/* --- 07.5 Trust bar ------------------------------------------------------- */

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}
.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
}
.trust-bar__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--accent);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}
.trust-bar__label { color: inherit; }


/* --- 07.6 Cards ----------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card--raised { box-shadow: var(--card-shadow); border-color: transparent; }
.card--outline { background-color: transparent; border-color: var(--border-strong); }
.card--feature { border-top: 3px solid var(--accent-ui); }
a.card:hover, .card--link:hover { border-color: var(--accent-ui); box-shadow: var(--card-shadow); transform: translateY(-2px); }
a.card { text-decoration: none; color: var(--text); }

.card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  margin-bottom: var(--space-2);
}
.card__media {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  object-fit: cover;
}
.card__eyebrow {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.card__title {
  /* identical whatever element carries it (h3, p, span) */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0;
}
.card__body { color: var(--text-muted); margin: 0; }
.card__body > * + * { margin-top: var(--space-3); }
.card__foot {
  margin-top: auto;
  padding-top: var(--space-5);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
}

/* Icon beside the title instead of on a row of its own. */
.card--inline-icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-content: start;
}
.card--inline-icon > .card__icon {
  grid-row: 1;             /* sits beside the first line; adds no empty rows */
  width: 2rem;
  height: 2rem;
  margin: 0.1em 0 0;
}
.card--inline-icon > :not(.card__icon) { grid-column: 2; }
@media (max-width: 39.99em) {
  .card--inline-icon { padding: var(--space-6); }
}


/* --- 07.7 Phase timeline (signature component) ---------------------------- */

.phase-timeline { display: block; }
.phase-timeline__track {
  position: relative;
  display: grid;
  gap: var(--space-8);
}

.phase { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); }

/* mobile: vertical gold connector running through the numerals */
.phase__marker { position: relative; display: flex; justify-content: center; }
.phase__marker::before {
  content: "";
  position: absolute;
  top: 3.5rem;
  bottom: calc(-1 * var(--space-8) - 0.5rem);
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--accent-ui), rgba(172, 135, 36, 0.25));
}
.phase:last-child .phase__marker::before { display: none; }

.phase__num {
  position: relative;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent-ui);
  background-color: var(--surface);
  color: var(--accent);
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.phase__card {
  position: relative;
  background-color: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--card-shadow);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.phase__eyebrow {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.phase__title {
  margin-top: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  text-wrap: balance;
}
/* Phase-nav cards (how-it-works): the whole card is the link target. */
.phase__title a { color: var(--text-strong); text-decoration: none; }
.phase__title .icon { color: var(--accent); }
.phase__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.phase__card:has(.phase__title a) { cursor: pointer; }
.phase__card:has(.phase__title a):hover { border-color: var(--accent-ui); transform: translateY(-2px); }
.phase__title a:focus-visible { box-shadow: none; }
.phase__card:has(a:focus-visible) { box-shadow: var(--ring); }
.phase__body { margin-top: var(--space-4); color: var(--text-muted); }
.phase__body > * + * { margin-top: var(--space-3); }
.phase__list { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.phase__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.phase__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 2px;
  background-color: var(--accent-ui);
}
.phase__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
}
/* Inside a card the lists are primary content, not fine print. Callout lists
   keep --step--1. */
.card .phase__list { margin-top: 0; gap: var(--space-3); }
.card .phase__list li { font-size: var(--step-0); }

/* Phones: a narrower numeral column gives the card text a readable measure. */
@media (max-width: 35.99em) {
  .phase { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); }
  .phase__num { width: 2.5rem; height: 2.5rem; font-size: var(--step-1); }
  .phase__marker::before { top: 2.75rem; }
  .phase__card { padding: var(--space-5); }
}

/* >=900px: becomes a horizontal connected track */
@media (min-width: 56.25em) {
  .phase-timeline__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
  /* auto marker row + 1fr card row: the extra height of a taller sibling goes
     to the CARD, so numerals, connectors and card tops all stay on one line */
  .phase {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: var(--space-6);
  }
  .phase__marker { justify-content: flex-start; height: 3.75rem; }
  .phase__marker::before {
    top: 1.875rem;            /* half the numeral — not 50% of a stretched row */
    bottom: auto;
    left: 3.75rem;
    right: calc(-1 * var(--space-8));
    width: auto;
    height: 2px;
    transform: none;
    background: linear-gradient(to right, var(--accent-ui), rgba(172, 135, 36, 0.3));
  }
  .phase__num { width: 3.75rem; height: 3.75rem; font-size: var(--step-3); }
  .phase__card { height: 100%; }
}


/* --- 07.8 Stats ----------------------------------------------------------- */

.stat-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-ui);
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
}
.stat__value {
  font-family: var(--font-head);
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.stat--red { border-left-color: var(--action); }
.stat--red .stat__value { color: var(--action-quiet); }
.stat--gold { border-left-color: var(--gold-400); }
.stat--gold .stat__value { color: var(--accent); }
.stat__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-strong);
}
.stat__note { font-size: var(--step--1); color: var(--text-muted); }


/* --- 07.9 Result list (calculator output rows) ---------------------------- */

.result-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.result-list__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--surface-raised);
}
.result-list__row + .result-list__row { border-top: 1px solid var(--border); }
.result-list__row--total { background-color: var(--surface-sunken); }
.result-list__label { flex: 1 1 auto; min-width: 0; font-size: var(--step--1); color: var(--text-muted); max-width: none; }
.result-list__value {
  flex: 0 1 auto;
  max-width: 55%;
  text-align: right;
  font-family: var(--font-head);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.result-list__row--total .result-list__value { font-size: var(--step-2); color: var(--action-quiet); }


/* --- 07.10 Compare table -------------------------------------------------- */
/* Desktop: a real table. Mobile: stacked labelled rows via data-label.
   Never a horizontally scrolling table — and never a clipped one either, so wide
   tables stay stacked past 48em (see .compare-table--wide below). */

.compare-table {
  width: 100%;
  /* The frame is drawn on the CELLS (>=48em, below). A rounded overflow:hidden
     table clipped the first letter of its caption and left header corners square. */
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-size: var(--step--1);
}
.compare-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-4);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.compare-table th, .compare-table td { text-align: left; }

/* mobile: stacked cards */
@media (max-width: 47.99em) {
  .compare-table, .compare-table thead, .compare-table tbody,
  .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-table tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .compare-table tbody tr + tr { margin-top: var(--space-4); }
  .compare-table tbody th {
    padding: var(--space-4) 0 var(--space-3);
    font-family: var(--font-head);
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--text-strong);
    border-bottom: 1px solid var(--border);
  }
  .compare-table tbody td { padding: var(--space-3) 0 0; }
  .compare-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--step--2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
  }
  /* a table-caption inside a display:block table shrinks to one word per line */
  .compare-table caption {
    display: block;
    width: auto;
    max-width: var(--measure);
    padding-bottom: var(--space-4);
  }

  /* Two-column tables (one result per row): label left, value right, compact. */
  .compare-table:not(:has(thead th:nth-child(3))) tbody tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .compare-table:not(:has(thead th:nth-child(3))) tbody tr + tr { margin-top: var(--space-2); }
  .compare-table:not(:has(thead th:nth-child(3))) tbody th {
    border: 0;
    padding: 0;
    flex: 1 1 auto;
    font-size: var(--step--1);
  }
  .compare-table:not(:has(thead th:nth-child(3))) tbody td {
    padding: 0;
    text-align: right;
    font-weight: 600;
  }
  .compare-table:not(:has(thead th:nth-child(3))) tbody td:not(.cell--bad):not(.cell--good) { color: var(--text-strong); }
  .compare-table:not(:has(thead th:nth-child(3))) tbody td::before { display: none; }
}
/* Three-column tables: before and after sit side by side under the row label. */
@media (min-width: 22em) and (max-width: 47.99em) {
  .compare-table:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
  .compare-table:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) tbody th { grid-column: 1 / -1; }
}

/* >=768px: table layout */
@media (min-width: 48em) {
  .compare-table thead th {
    padding: var(--space-4) var(--space-5);
    background-color: var(--surface-sunken);
    border-bottom: 2px solid var(--accent-ui);
    font-family: var(--font-head);
    font-size: var(--step--2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-strong);
  }
  .compare-table tbody th,
  .compare-table tbody td {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    vertical-align: top;
  }
  .compare-table tbody th { font-weight: 600; color: var(--text-strong); width: 34%; }
  .compare-table tbody td { color: var(--text-muted); }

  /* the frame, drawn on the cells so nothing is clipped */
  .compare-table thead th { border-top: 1px solid var(--border); }
  .compare-table tbody th,
  .compare-table tbody td { background-color: var(--surface-raised); }
  .compare-table thead + tbody tr:first-child > * { border-top: 0; }
  .compare-table tr > :first-child { border-left: 1px solid var(--border); }
  .compare-table tr > :last-child { border-right: 1px solid var(--border); }
  .compare-table tbody tr:last-child > * { border-bottom: 1px solid var(--border); }
  .compare-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
  .compare-table thead th:last-child { border-top-right-radius: var(--radius-lg); }
  .compare-table tbody tr:last-child > :first-child { border-bottom-left-radius: var(--radius-lg); }
  .compare-table tbody tr:last-child > :last-child { border-bottom-right-radius: var(--radius-lg); }
}

/* A table only becomes a real table once the container can actually hold it.
   The calculator's 9-column "Position breakdown" table has a min-content width of
   roughly 1020px; between 48em and the 72rem --container cap the inner width is
   narrower than that, so as a real table it overflows its container and is
   CLIPPED, not scrolled — overflow-x on body is applied to the VIEWPORT, so there
   is no scrollbar at all and the two rightmost columns (weekly outflow and the
   effective annualized rate) are unreachable by mouse, touch or keyboard. Wide
   tables therefore keep the stacked data-label cards up to 72em, where
   --container finally gives 1072px of inner width. Matched by an explicit
   .compare-table--wide modifier, or — so that no markup change is required — by
   column count wherever :has() is supported.
   Still never a horizontally scrolling table. */
@media (min-width: 48em) and (max-width: 71.99em) {
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))),
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) thead,
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody,
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tr,
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) th,
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) td { display: block; }

  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) thead th { padding: 0; }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) caption {
    display: block;
    width: auto;
    max-width: var(--measure);
    padding-bottom: var(--space-4);
  }
  /* undo the >=48em cell frame: the stacked cards keep their own look */
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) th,
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) td {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: transparent;
  }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody tr:last-child > * { border-radius: 0; }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody tr:last-child > td { border-bottom: 0; }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody tr + tr { margin-top: var(--space-4); }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody th {
    width: auto;
    padding: var(--space-4) 0 var(--space-3);
    font-family: var(--font-head);
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--text-strong);
    border: 0;
    border-bottom: 1px solid var(--border);
  }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody td { padding: var(--space-3) 0 0; border-top: 0; }
  :is(.compare-table--wide, .compare-table:has(thead th:nth-child(7))) tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--step--2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
  }
}

.compare-table .cell--bad { color: var(--action-quiet); font-weight: 600; }
.compare-table .cell--good { color: var(--green-600); font-weight: 600; }
.section--navy .compare-table .cell--good,
.theme-navy .compare-table .cell--good { color: #6FD3A4; }


/* --- 07.11 Accordion (native details/summary, zero JS) -------------------- */

.accordion { display: grid; gap: var(--space-3); }
.accordion__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
  overflow: hidden;
}
.accordion__item[open] { border-color: var(--accent-ui); }
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 2.75rem;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text-strong);
  text-wrap: pretty;
  transition: background-color var(--dur) var(--ease-out);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { background-color: var(--surface-sunken); }
.accordion__summary::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease-out);
}
.accordion__item[open] > .accordion__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion__panel {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-muted);
}
.accordion__panel > * + * { margin-top: var(--space-4); }


/* --- 07.12 Quote ---------------------------------------------------------- */

.quote {
  position: relative;
  padding: var(--space-7);
  padding-left: var(--space-8);
  border-left: 3px solid var(--accent-ui);
  background-color: var(--surface-raised);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.quote__text {
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  max-width: 44ch;
}
.quote__attrib {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  font-style: normal;
  color: var(--text-muted);
}
/* Compliance: unreplaced testimonial slots are visibly flagged. */
.quote[data-placeholder="true"] { border-left-style: dashed; }
/* Owner notes read as a calm, obviously-temporary aside — not as debug output. */
.placeholder-badge {
  display: inline-block;
  margin-bottom: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: transparent;
  background-color: color-mix(in srgb, var(--accent-ui) 8%, transparent);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: var(--lh-base);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
/* Long notes sit on their own line instead of stranding words mid-paragraph. */
.prose .placeholder-badge,
.checklist__item .placeholder-badge,
.stack > li > .placeholder-badge {
  display: block;
  width: 100%;
  margin-block: var(--space-2) var(--space-3);
}
/* The short testimonial flag keeps its tag style. */
.quote > .placeholder-badge {
  display: inline-block;
  width: auto;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-style: normal;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* --- 07.13 Checklist ------------------------------------------------------ */

.checklist { display: grid; gap: var(--space-3); }
.checklist__item {
  position: relative;
  padding-left: var(--space-8);
  color: var(--text-muted);
}
.checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.1rem;
  height: 0.58rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.checklist__item strong { display: block; color: var(--text-strong); }
/* Symptoms are questions, not completed tasks: an empty tick box, not a tick.
   gold-600 on light (3.36:1 UI border), gold-400 in dark / on navy. */
.checklist--symptoms .checklist__item::before {
  top: 0.28em;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--accent-ui);
  border-radius: var(--radius-xs);
  transform: none;
}
/* Lead-in that continues the sentence: keep it on the same line. */
.checklist__item--runon strong { display: inline; }


/* --- 07.14 Forms ---------------------------------------------------------- */

.form { display: block; }
.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 40em) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }

.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field__label {
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-strong);
}
.required-mark { color: var(--action-quiet); margin-left: 0.15em; }
.field__hint { font-size: var(--step--1); line-height: 1.5; max-width: 60ch; color: var(--text-muted); }
.field__error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--action-quiet);
  display: none;
}
.field.has-error .field__error { display: block; }

.input, .select, .textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
/* A typed value must never look like the hint that was there before it. */
.input { color: var(--text-strong); font-weight: 500; }
.input::placeholder, .textarea::placeholder { color: var(--placeholder); opacity: 1; font-style: italic; font-weight: 400; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--link);
  box-shadow: var(--ring);
  outline: none;
}
.input[disabled], .select[disabled], .textarea[disabled] {
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}
.field.has-error :is(.input, .select, .textarea) { border-color: var(--action); }
.textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-base); }
.select {
  padding-right: var(--space-10);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right var(--space-5) center,
    right calc(var(--space-5) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.input[inputmode="numeric"], .input[type="number"] { font-variant-numeric: tabular-nums; }

/* Custom checkbox built on a real <input type="checkbox"> */
.checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  cursor: pointer;
  padding: var(--space-1) 0;
}
.checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  flex: none;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-xs);
  background-color: var(--surface-raised);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.checkbox__input::before {
  content: "";
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--action-text);
  border-bottom: 2px solid var(--action-text);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.checkbox__input:checked {
  background-color: var(--navy-600);
  border-color: var(--navy-600);
}
.checkbox__input:checked::before { transform: rotate(-45deg) scale(1); }
.checkbox__input:hover { border-color: var(--text-muted); }
.checkbox__input:focus-visible { box-shadow: var(--ring); outline: none; }
.checkbox__label {
  font-size: var(--step--1);
  line-height: var(--lh-base);
  color: var(--text-muted);
  max-width: var(--measure);
}
.checkbox__label > p:first-child { font-size: var(--step-0); color: var(--text-strong); }
.checkbox__label strong { color: var(--text-strong); }

/* Fieldset legends: a heading row inside the card, never the border notch. */
.form fieldset.card > legend {
  float: left;
  width: 100%;
  padding: 0 0 var(--space-4);
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  line-height: 1.35;
}
.form fieldset.card > legend + * { clear: both; }

/* Paired fields: label / control / hint / error rows line up across the pair
   even when one label wraps to two lines. */
@media (min-width: 40em) {
  .form-grid { row-gap: 0; }
  .form-grid > .field:not(.checkbox) {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
}

/* Range slider in the brand palette (was the only system-blue control). */
input[type="range"] {
  --range-thumb: var(--navy-700);
  width: 100%;
  height: 2.75rem;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  accent-color: var(--navy-700);
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--control-border);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--control-border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--range-thumb);
  border: 3px solid var(--surface-raised);
  box-shadow: 0 0 0 1px var(--border-strong);
}
input[type="range"]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--range-thumb);
  border: 3px solid var(--surface-raised);
  box-shadow: 0 0 0 1px var(--border-strong);
}
input[type="range"]:focus-visible { box-shadow: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--ring); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* Alert — used for the aria-live region */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface-sunken);
}
/* The contact form's aria-live status node ships empty. `display: none` would keep it
   out of the accessibility tree until the moment it is populated, so AT sees a newly
   inserted subtree rather than a mutation of a monitored region and commonly announces
   nothing (WCAG 4.1.3). Empty alerts therefore stay rendered, collapsed to nothing.
   The calculator's error slots hide via their own [hidden] attribute — author-origin
   `.alert { display: flex }` above would otherwise beat the UA's
   `[hidden] { display: none }`, which is what they were in fact relying on. */
.alert[hidden] { display: none; }
.alert:empty { padding: 0; border: 0; background: none; }
.alert__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--text-strong);
}
.alert__body { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-1); }
.alert--error {
  border-color: var(--action);
  background-color: var(--red-050);
}
.alert--error .alert__title { color: var(--red-600); }
.alert--error .alert__body { color: var(--ink-700); }
.alert--success {
  border-color: var(--green-600);
  background-color: var(--green-100);
}
.alert--success .alert__title { color: var(--green-600); }
.alert--success .alert__body { color: var(--ink-700); }


/* --- 07.15 Callout -------------------------------------------------------- */

.callout {
  /* hugs its text (which stops at 66ch) instead of leaving a tinted empty half */
  width: fit-content;
  max-width: 100%;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-ui);
  border-radius: var(--radius-md);
  background-color: var(--surface-sunken);
}
.callout__title {
  font-family: var(--font-head);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.callout:has(.toc) { width: auto; }
.callout__title:has(> .icon) { display: flex; align-items: center; gap: var(--space-2); }
.callout__body { font-size: var(--step--1); color: var(--text-muted); }
.callout__body > * + * { margin-top: var(--space-3); }
.callout--info { border-left-color: var(--navy-600); }
.callout--warn { border-left-color: var(--action); background-color: var(--red-050); }
.callout--warn .callout__body { color: var(--ink-700); }
.callout--warn .callout__title { font-size: var(--step-1); margin-bottom: var(--space-4); }
.callout--warn .callout__title .icon { width: 1.5rem; height: 1.5rem; color: var(--action-quiet); }
.callout--warn .phase__list li::before { background-color: var(--action-quiet); }
/* Legal qualifiers are footnotes: a hairline rule, no box. Still fully visible,
   and larger than before (--step--1). On navy --border is --on-navy-line. */
.callout--legal {
  width: auto;
  max-width: var(--measure);
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-4) 0 0;
  font-size: var(--step--1);
}
.callout--legal .callout__title { font-size: var(--step--1); }
.callout--legal .callout__body { font-size: var(--step--1); line-height: var(--lh-base); color: var(--text-muted); }
.section--navy .callout--warn,
.theme-navy .callout--warn { background-color: rgba(200, 16, 46, 0.14); }
.section--navy .callout--warn .callout__body,
.theme-navy .callout--warn .callout__body { color: var(--on-navy); }


/* --- 07.16 Breadcrumbs ---------------------------------------------------- */

.breadcrumbs { font-size: var(--step--2); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  color: var(--accent-line);
}
.breadcrumbs__link { color: var(--text-muted); text-decoration: none; }
.breadcrumbs__link:hover { color: var(--link-hover); text-decoration: underline; }


/* --- 07.17 CTA band ------------------------------------------------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--navy-900);
  color: var(--on-navy);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(44rem 22rem at 20% -40%, rgba(31, 64, 104, 0.9), transparent 65%),
    linear-gradient(120deg, var(--navy-800), var(--navy-900) 70%);
}
.cta-band--red { background-color: var(--red-600); }
.cta-band--red::before {
  background:
    radial-gradient(44rem 22rem at 80% -30%, rgba(255, 255, 255, 0.14), transparent 62%),
    linear-gradient(120deg, #A50D26, var(--red-600) 70%);
}
.cta-band--red {
  --text: var(--white);
  --text-strong: var(--white);
  --text-muted: rgba(255, 255, 255, 0.88);
  --accent: var(--white);
  --accent-ui: rgba(255, 255, 255, 0.8);
  --accent-line: rgba(255, 255, 255, 0.7);
  --border: rgba(255, 255, 255, 0.28);
  --link: var(--white);
  --link-hover: var(--cream-100);
  --btn-outline: var(--white);
  --btn-outline-fg: var(--red-600);
  --ring: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 0 0 1px var(--white);
}
.cta-band--red .btn--primary { --btn-bg: var(--white); --btn-fg: var(--red-600); --btn-bd: var(--white); }
.cta-band--red .btn--primary:hover { --btn-bg: var(--cream-100); --btn-bd: var(--cream-100); }

.cta-band__inner { display: grid; gap: var(--space-7); }
.cta-band__inner > * { min-width: 0; }
.cta-band__title { color: var(--text-strong); font-size: var(--step-3); max-width: 24ch; }
.cta-band__lede { margin-top: var(--space-4); color: var(--text-muted); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cta-band__actions .btn { overflow-wrap: anywhere; }
/* Desktop: the text column dominates; the actions stack in a column of equal
   widths beside it. A fixed ratio, so a long label can't squeeze the heading. */
@media (min-width: 60em) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 1fr);
    align-items: center;
    gap: var(--space-12);
  }
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { width: 100%; }
}
/* Phones: full-width buttons of one size. */
@media (max-width: 47.99em) {
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { width: 100%; justify-content: center; padding-inline: var(--space-5); }
}


/* --- 07.18 Site footer ---------------------------------------------------- */

.site-footer {
  background-color: var(--navy-900);
  color: var(--on-navy);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--gold-400);
  --link: var(--on-navy-muted);
  --link-hover: var(--gold-300);
}
@media (max-width: 56.24em) {
  .site-footer { padding-bottom: calc(var(--sticky-cta-h) + var(--space-10) + env(safe-area-inset-bottom, 0px)); }
  /* Same reason as scroll-padding-top, at the other edge: below 56.25em the fixed
     .sticky-cta bar covers the bottom of the viewport, so a control tabbed to the
     bottom edge would land underneath it. (contact.html ships no .sticky-cta; the
     strip reserved there is harmless.) */
  html { scroll-padding-bottom: calc(var(--sticky-cta-h) + var(--space-4)); }
}
.site-footer__inner {
  display: grid;
  gap: var(--space-9);
}
@media (min-width: 48em) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .site-footer__inner { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--space-10); } }

.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer__brand p { color: var(--on-navy-muted); font-size: var(--step--1); max-width: 34ch; }

.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col__title {
  font-family: var(--font-head);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--gold-400);
  margin-bottom: var(--space-1);
}
.footer-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  min-height: 2rem;
  padding-block: var(--space-1);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
  text-decoration: none;
}
.footer-nav__link .icon { color: var(--gold-400); }   /* decorative gold on navy */
@media (max-width: 47.99em) {
  .footer-nav__link { min-height: 2.75rem; }
}
.footer-nav__link:hover { color: var(--gold-300); text-decoration: underline; }

.site-footer__legal {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px solid var(--on-navy-line);
}
.footer-note {
  font-size: var(--step--2);
  line-height: var(--lh-base);
  color: var(--on-navy-muted);
  max-width: 88ch;
}
.footer-note + .footer-note { margin-top: var(--space-3); }
.footer-note a { color: var(--on-navy-muted); }
.footer-note a:hover { color: var(--gold-300); }
.footer-bottom {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--2);
  color: var(--on-navy-muted);
}


/* --- 07.19 Sticky mobile CTA --------------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background-color: var(--navy-900);
  border-top: 1px solid rgba(212, 167, 44, 0.4);
  box-shadow: 0 -8px 24px rgba(10, 23, 48, 0.3);
}
.sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.sticky-cta__btn:focus-visible { box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.35), 0 0 0 1px var(--gold-400); }
.sticky-cta__btn--call {
  background-color: transparent;
  border-color: var(--gold-400);
  color: var(--cream-100);
}
.sticky-cta__btn--call:hover { background-color: var(--gold-400); color: var(--navy-900); }
.sticky-cta__btn--help {
  background-color: var(--red-600);
  border-color: var(--red-600);
  color: var(--white);
}
.sticky-cta__btn--help:hover { background-color: var(--red-500); border-color: var(--red-500); color: var(--white); }
@media (min-width: 56.25em) { .sticky-cta { display: none; } }


/* --- 07.20 Table of contents (legal pages) --------------------------------- */

.toc { display: grid; gap: 0 var(--space-8); }
@media (min-width: 40em) {
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.toc li { max-width: none; }
.toc a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-1);
  font-size: var(--step-0);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
@media (max-width: 39.99em) {
  .toc li + li { border-top: 1px solid var(--border); }
}


/* =============================================================================
   08. UTILITIES  (kept deliberately small — 16 total)
   ========================================================================== */

.text-center { text-align: center; }
.text-center > * { margin-inline: auto; }
.text-balance { text-wrap: balance; }
.muted { color: var(--text-muted); }
.tabular { font-variant-numeric: tabular-nums; }
.lead { font-size: var(--step-1); line-height: var(--lh-base); color: var(--text-muted); }
.small { font-size: var(--step--1); }
.fine-print { font-size: var(--step--1); color: var(--text-muted); line-height: var(--lh-base); }
.no-wrap { white-space: nowrap; }
.measure-short { max-width: var(--measure-short); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.hide-on-mobile { display: none; }
@media (min-width: 48em) {
  .hide-on-mobile { display: revert; }
  .hide-on-desktop { display: none; }
}


/* =============================================================================
   09. MOTION
   Default state is VISIBLE. JS opts INTO animation by adding .js-motion to
   <html>. If JS never runs, nothing is ever hidden.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js-motion .reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
  }
  .js-motion .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .js-motion .reveal--delay-1 { transition-delay: 80ms; }
  .js-motion .reveal--delay-2 { transition-delay: 160ms; }
  .js-motion .reveal--delay-3 { transition-delay: 240ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
    scroll-behavior: auto;
  }
}


/* =============================================================================
   10. PRINT
   ========================================================================== */

@media print {
  :root {
    --surface: #fff;
    --surface-raised: #fff;
    --surface-sunken: #fff;
    --text: #000;
    --text-strong: #000;
    --text-muted: #333;
    --border: #999;
    --border-strong: #666;
  }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .site-header, .sticky-cta, .nav-panel, .nav-toggle, .skip-link,
  .cta-band, .hero__media, .btn { display: none !important; }
  .hero, .page-hero, .section--navy, .site-footer, .theme-navy {
    background: #fff !important;
    color: #000 !important;
    padding-block: 1rem !important;
  }
  .hero::before, .hero::after, .page-hero::before, .cta-band::before { display: none !important; }
  .hero__title, .page-hero__title, h1, h2, h3, .card__title, .phase__title { color: #000 !important; }
  .footer-note, .muted, .card__body, .text-muted { color: #222 !important; }
  .card, .phase__card, .callout, .accordion__item, .stat {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
  }
  .accordion__panel { display: block !important; }
  .section { padding-block: 1rem !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  h2, h3 { break-after: avoid; }
}


/* =============================================================================
   11. DARK MODE
   Only the semantic aliases are re-mapped. Navy sections are NOT inverted —
   they stay navy; light surfaces deepen instead of flipping to pure black.
   ========================================================================== */

/* Light only, by design. The brand is a light page with navy sections; an automatic
   dark theme turned every cream/white band navy on dark-mode computers, so the whole
   site read as one dark-blue block. <meta name="color-scheme" content="light"> in each
   page keeps browser-drawn controls (inputs, selects, scrollbars) light as well. */
:root { color-scheme: light; }


/* =============================================================================
   12. ADDED BY SHELL  (page-chrome contributor — PARTIALS.md)
   Three gaps found while writing the shared header/footer markup. Nothing here
   re-colors a component or introduces a new surface; it only fills in hooks the
   chrome markup needs. Keep this block last so its order beats section 07.
   ========================================================================== */

/* 12.1 Generic inline-SVG icon host.
   The sprite's <symbol>s already carry fill="none" stroke="currentColor" and
   stroke-width="1.75", so this only sizes the host element and lets colour
   inherit from whatever the icon sits inside. NEVER set fill here. */
.icon {
  /* the reset makes every svg display:block, which dropped inline icons (footer
     phone/mail, warn triangles, phase-nav arrows) onto a line of their own */
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: inherit;
  vertical-align: middle;
}
.phase__title a .icon { margin-left: 0.35em; vertical-align: -0.1em; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.icon--xl { width: 2.5rem; height: 2.5rem; }

/* 12.2 No-JS navigation fallback.
   Below 74em the desktop .nav is display:none and .nav-panel is [hidden], so a
   visitor with JS disabled would have no navigation above the footer. This strip
   is VISIBLE BY DEFAULT and is removed only once the inline head script proves
   JS is running by putting .js on <html>. That ordering means there is no flash:
   the class lands before first paint. */
.no-js-nav { display: block; }
/* Above 74em the desktop .nav is already visible, so the fallback would double up.
   This MUST track the .nav breakpoint above: if it switched at 62em while the nav
   switched at 74em, a JS-disabled visitor between 992px and 1184px would be left
   with a dead hamburger and no navigation at all. */
@media (min-width: 74em) { .no-js-nav { display: none; } }
html.js .no-js-nav { display: none; }

/* Mirror image: the hamburger does nothing without JS, so it is not offered. */
html:not(.js) .nav-toggle { display: none; }

/* <html class="no-js"> is an intentionally UNSTYLED hook. The shipped rules all
   key off .js / :not(.js); no-js exists only so a future page can target it. It
   is not a missing style. */

/* 12.3 Copy-to-clipboard confirmation.
   The button ships [hidden] and site.js reveals it on pointer-fine devices. */
[data-copied] { border-color: var(--green-600); color: var(--green-600); }


/* =============================================================================
   13. PAGE COMPOSITION
   Page-scoped layout, grouped by page and keyed off the <body> class. The shared
   desktop pattern: a sticky section head on the left, content on the right.
   Everything here only arranges components from section 07; it never introduces
   a new colour. Keep it after section 12.
   ========================================================================== */

/* --- 13.1 Home (body.page-index) ------------------------------------------ */

/* Hero: head spans the band, CTA lands above the fold at 1280x800 / 1440x900. */
@media (min-width: 64em) {
  .page-index .hero { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
  .page-index .hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    column-gap: var(--space-10);
    row-gap: var(--space-8);
    align-items: start;
  }
  .page-index .hero__head { grid-column: 1 / -1; }
  .page-index .hero__title { max-width: 21ch; }
  /* the row gap spaces head and body once I01 splits them */
  .page-index .hero__body > .hero__lede:first-child { margin-top: 0; }
  .page-index .hero__aside { padding: var(--space-6); }
  .page-index .hero__actions .btn--lg { padding-inline: var(--space-6); }
  .page-index .hero__actions .btn--secondary {
    min-height: 3.25rem;
    font-size: var(--step--1);
    padding-inline: var(--space-5);
  }
}
@media (max-width: 35.99em) {
  .page-index .hero .trust-bar { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Symptoms: the reassurance is the page's emotional turn, so it reads as a
   pull line, not fine print. */
.page-index #symptoms > .container > .callout {
  width: auto;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--accent-ui);
  border-radius: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
}
.page-index #symptoms > .container > .callout .callout__body {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-strong);
}
.page-index #symptoms > .container > .callout p { max-width: 60ch; }
@media (min-width: 62em) {
  .page-index .checklist--symptoms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-10);
    row-gap: var(--space-5);
  }
  .page-index #symptoms .card { padding: var(--space-9); }
}
@media (max-width: 35.99em) {
  .page-index #symptoms .card { padding: var(--space-5); }
  .page-index #symptoms .checklist__item { padding-left: var(--space-7); }
}

/* Phases: sticky head left, vertical rail right. Below 62em the head's parts
   re-order around the timeline (head, timeline, links, footnote). */
@media (max-width: 61.99em) {
  .page-index .phases-split { display: flex; flex-direction: column; gap: 0; }
  .page-index .phases-split__head { display: contents; }
  .page-index .phases-split .section-head { order: 1; }
  .page-index .phases-split .phase-timeline { order: 2; }
  .page-index .phases-split__head > .cluster { order: 3; margin-top: var(--space-12); }
  .page-index .phases-split__head > .callout--legal { order: 4; margin-top: var(--space-8); }
}
@media (min-width: 62em) {
  .page-index .phases-split { --split: minmax(0, 4fr) minmax(0, 7fr); }
  .page-index .phases-split__head {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-8));
  }
  .page-index .phases-split__head .section-head { margin-bottom: var(--space-8); }
}
.page-index .phases-split__head > .callout--legal { margin-top: var(--space-8); }
/* vertical rail at every width (overrides the >=56.25em horizontal track) */
@media (min-width: 56.25em) {
  .page-index .phase-timeline__track { grid-template-columns: minmax(0, 1fr); }
  .page-index .phase {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--space-6);
  }
  .page-index .phase__marker { height: auto; justify-content: center; }
  .page-index .phase__marker::before {
    top: 3.75rem;
    bottom: calc(-1 * var(--space-8) - 0.5rem);
    left: 50%;
    right: auto;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, var(--accent-ui), rgba(172, 135, 36, 0.25));
  }
  .page-index .phase__card { height: auto; }
}

/* What this is not: the closing line is the most quotable on the page. */
.page-index #what-this-is-not > .container > .callout { width: auto; }
.page-index #what-this-is-not > .container > .callout .callout__body {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-strong);
}

/* How we get paid + FAQ teaser: sticky heads. */
.page-index #how-we-get-paid .section-head .lead { margin-top: var(--space-6); color: var(--text-strong); }
@media (min-width: 62em) {
  .page-index #how-we-get-paid .section-head {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-8));
  }
}
.page-index #faq-teaser .split { --split: minmax(0, 5fr) minmax(0, 7fr); }
@media (min-width: 62em) {
  .page-index #faq-teaser .section-head {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-8));
    margin-bottom: 0;
  }
}


/* --- 13.2 How it works (body.page-how-it-works) ---------------------------- */

/* (a) Phase 1 timeline: one row of five at desktop, values never split. */
.page-how-it-works #phase-1 .stat__value { font-size: var(--step-2); white-space: nowrap; }
@media (min-width: 64em) {
  .page-how-it-works #phase-1 .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  .page-how-it-works #phase-1 .stat { padding: var(--space-5); }
  /* five across: "Months 3–6" at --step-2 overran its card by up to 26px (1024) */
  .page-how-it-works #phase-1 .stat__value { font-size: var(--step-1); }
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .page-how-it-works #phase-1 .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-how-it-works #phase-1 .stat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 39.99em) {
  .page-how-it-works #phase-1 .stat-grid { gap: var(--space-5); }
  .page-how-it-works #phase-1 .stat {
    background: none;
    border: 0;
    border-left: 2px solid var(--accent-ui);
    border-radius: 0;
    padding: 0 0 0 var(--space-5);
  }
}

/* (b) Feature + timeline cards: title column left, content right. */
@media (min-width: 64em) {
  .page-how-it-works .card--feature,
  .page-how-it-works .phase-timecard {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-8);
    align-items: start;
  }
  .page-how-it-works :is(.card--feature, .phase-timecard) > .card__icon { grid-column: 1; grid-row: 1; }
  .page-how-it-works :is(.card--feature, .phase-timecard) > .card__title { grid-column: 1; grid-row: 2; }
  .page-how-it-works :is(.card--feature, .phase-timecard) > :not(.card__icon):not(.card__title) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .page-how-it-works .card--feature .card__body { font-size: var(--step-1); }
}

/* (c) Warning lists in two columns at desktop. */
@media (min-width: 64em) {
  .page-how-it-works .callout--warn { width: auto; }
  .page-how-it-works .callout--warn .phase__list { display: block; columns: 2; column-gap: var(--space-8); }
  .page-how-it-works .callout--warn .phase__list li { break-inside: avoid; margin-bottom: var(--space-4); }
}

/* (d) Hero footnote. */
.page-how-it-works .page-hero .callout--legal { margin-top: var(--space-4); }

/* (e) First 72 hours: a numbered-step rail of open dots, not done-ticks. */
.page-how-it-works #first-72-hours .checklist { position: relative; isolation: isolate; }
.page-how-it-works #first-72-hours .checklist__item strong { display: inline; }
.page-how-it-works #first-72-hours .checklist__item::before {
  transform: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid var(--gold-400);    /* on navy: 7.95:1 */
  border-radius: 50%;
  top: 0.55em;
  left: 0.25rem;
  background: var(--navy-900);
}
.page-how-it-works #first-72-hours .checklist::after {
  content: "";
  position: absolute;
  left: calc(0.25rem + 0.3125rem - 1px);
  top: 0.9em;
  bottom: 1.2em;
  width: 2px;
  background: var(--on-navy-line);
  z-index: -1;
}
@media (min-width: 64em) {
  .page-how-it-works .first72-layout {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
  .page-how-it-works .first72-layout__aside {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-8));
  }
  .page-how-it-works .first72-layout__aside .cta-band__actions { flex-direction: column; align-items: stretch; }
}

/* (f) Next-phase link at the end of each phase. */
.page-how-it-works .phase__foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}
.page-how-it-works .phase__foot a:hover { color: var(--link-hover); }


/* Below 64em the head and body stack inside .hero__inner, whose row gap (--space-10) plus
   the lede's own margin put ~64px between the H1 and the lede. Cancel the gap so the
   lede's --space-6 is the only space, as before the split. */
@media (max-width: 63.99em) {
  .page-index .hero__head + .hero__body { margin-top: calc(-1 * var(--space-10)); }
}

/* --- 13.3 Calculator (body.page-calculator) -------------------------------- */

/* (a) Empty state: an invitation to start, not a failed load. */
.page-calculator .calc-empty {
  max-width: none;
  font-size: var(--step-0);
  color: var(--text);
  padding: var(--space-8) var(--space-7);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  text-align: center;
}
.page-calculator .calc-empty .icon {
  display: block;
  margin: 0 auto var(--space-3);
  transform: rotate(-90deg);
  color: var(--accent);
}
.page-calculator [data-mca-calc][data-calc-state="ok"] .calc-empty { display: none; }

/* (b) Empty fields look empty; typed fields look filled. */
/* half-way to the sunken tone: reads as empty, not as disabled */
.page-calculator .input:placeholder-shown { background-color: var(--surface-sunken); }
.page-calculator .input:placeholder-shown {
  background-color: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-raised));
}
.page-calculator .input:not(:placeholder-shown) {
  border-color: var(--text-muted);
  background-color: var(--surface-raised);
}
/* On a sunken light field the stock placeholder (#6B7285) drops to 3.96:1, so it
   steps up to slate-600 (6.07:1 on #EFE9D9). Dark keeps its own token. */
.page-calculator .input:placeholder-shown { --placeholder: var(--slate-600); }

/* (c) Results summary beside the form at desktop. */
@media (min-width: 64em) {
  .page-calculator .calc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--space-10);
    align-items: start;
  }
  .page-calculator .calc-summary {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
}
@media (max-width: 63.99em) {
  .page-calculator .calc-summary { display: none; }
}
/* With the aside beside it, a half-width column cannot hold the frequency select's
   longest option ("Daily (business days, Mon–Fri)") — it clipped at 1024 through 1440.
   Giving that one field the full row fixes it at every width, without betting on a
   2px margin in the column arithmetic. */
@media (min-width: 64em) {
  .page-calculator .calc-layout .field:has([data-calc-field="frequency"]) { grid-column: 1 / -1; }
}
.page-calculator .calc-summary .result-list__value { font-size: var(--step-1); }
/* never show a stale figure while the inputs are incomplete */
.page-calculator [data-mca-calc]:not([data-calc-state="ok"]) .calc-summary .result-list__value { font-size: 0; }
.page-calculator [data-mca-calc]:not([data-calc-state="ok"]) .calc-summary .result-list__value::after {
  content: "\2014";
  font-size: var(--step-1);
}

/* (d) The tool gets a visible container. */
.page-calculator #calculator .form {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: clamp(var(--space-5), 4vw, var(--space-9));
}
.page-calculator .calc-privacy {
  --stack-gap: var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
}
.page-calculator .calc-optional {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
}
/* Optional fields start a new group: a rule across the full row above them.
   The rule is drawn by the first optional field (.calc-optional-start); at two
   columns it spans both columns and the gap between them. */
.page-calculator .form-grid > .calc-optional-start {
  position: relative;
  grid-column-start: 1;
  margin-top: var(--space-4);
  padding-top: var(--space-5);
}
.page-calculator .form-grid > .calc-optional-start::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--border);
}
@media (min-width: 40em) {
  .page-calculator .form-grid > .calc-optional-start::before { width: calc(200% + var(--space-6)); }
  .page-calculator .form-grid > .calc-optional-start + .field {
    margin-top: var(--space-4);
    padding-top: var(--space-5);
  }
}

/* Results presentation. (a) Annualized: nominal and simple stay neutral, the
   effective rate carries the red. */
.page-calculator .annual-grid > .card { border-top: 3px solid var(--border); }
.page-calculator .annual--simple .stat__value,
.page-calculator .annual--nominal .stat__value { color: var(--text-strong); }
.page-calculator .annual--effective { border-top-color: var(--action); }
.page-calculator .annual--effective .stat__value { color: var(--action-quiet); }
.page-calculator .annual-grid .card__body { font-size: var(--step--1); }
@media (max-width: 39.99em) {
  .page-calculator .annual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .page-calculator .annual--nominal { grid-column: 1 / -1; order: 3; }
  .page-calculator .annual-grid .card { padding: var(--space-5); }
  .page-calculator .annual-grid .stat__value { font-size: var(--step-3); }
}
/* (b) what stays in the account is not a cost: not red */
.page-calculator [data-calc-restructure] .result-list__row--total .result-list__value { color: var(--text-strong); }
/* (c) the identical qualifier + link stays visible in the callout beside it;
   the JS-written copy stays in the DOM */
.page-calculator [data-calc-restructure] [data-calc-out="restructureQualifier"] { display: none; }
/* (d) the two worked examples read as two */
.page-calculator #worked-example .stack--lg > .stack + .stack {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border);
}
/* (e) breakdown rows on one line at desktop */
@media (min-width: 64em) {
  .page-calculator [aria-labelledby="breakdown-title"] .compare-table td { white-space: nowrap; }
  .page-calculator [aria-labelledby="breakdown-title"] .compare-table tbody th { width: auto; }
}


/* --- 13.4 Who we help (body.page-who-we-help) ------------------------------ */

/* (a) situations are paraphrases, not testimonials: a rule, not quote marks */
.page-who-we-help #situations .card__title {
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-strong);
}
/* (b) sticky qualification head */
@media (min-width: 62em) {
  .page-who-we-help #qualification .split > :first-child {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-8));
  }
}
.page-who-we-help #qualification .callout__body { font-size: var(--step-0); }
/* (c) closing callout: text left, action right */
.page-who-we-help #not-a-fit > .container > .callout { width: auto; }
@media (min-width: 48em) {
  .page-who-we-help .callout--cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
  .page-who-we-help .callout--cta .btn { flex: none; }
}
/* (d) the H1 no longer runs six or seven lines on a phone */
@media (max-width: 39.99em) {
  .page-who-we-help .page-hero__title { font-size: clamp(2rem, 1.5rem + 2.5vw, 2.488rem); }
}


/* --- 13.5 About (body.page-about) ------------------------------------------ */

/* (a) origin story with a sticky pull line */
.page-about .about-origin { --split: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (min-width: 62em) {
  .page-about .about-origin__pull {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
}
.page-about .about-origin__pull .callout {
  width: auto;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--accent-ui);
  border-radius: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
}
.page-about .about-origin__pull .callout__body {
  font-family: var(--font-head);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text-strong);
}
/* (b) approach list in two columns */
@media (min-width: 60em) {
  .page-about .section--navy .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
    row-gap: var(--space-7);
  }
}
/* (c) credentials as a ruled list */
.page-about .about-creds { --stack-gap: 0; border-top: 1px solid var(--border); }
.page-about .about-creds > li { padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.page-about .about-creds .placeholder-badge { display: block; margin: 0; }
/* (d) testimonial column on the narrow grid */
.page-about .quote,
.page-about .section--cream .callout--legal { max-width: var(--container-narrow); }
/* (e) the nickname never splits across lines */
@media (max-width: 47.99em) {
  .page-about .page-hero__title-nick { display: block; }
}
@media (max-width: 22.5em) {
  .page-about .page-hero__title-nick { white-space: normal; text-wrap: balance; }
  .page-about .page-hero__title { font-size: 2.125rem; } /* same size thank-you uses; restores a real gutter at 320px */
}


/* --- 13.6 FAQ (body.page-faq) ----------------------------------------------- */

/* (a) back-to-categories link: a real tap target */
.page-faq .faq-back a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-size: var(--step--1);
  font-weight: 600;
}
.page-faq .faq-back .icon { transform: rotate(180deg); }
/* (b) phones: a tidy single column of category buttons */
@media (max-width: 47.99em) {
  .page-faq #faq-categories .cluster { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
  .page-faq #faq-categories .btn { width: 100%; justify-content: space-between; }
}
/* (c) desktop: a sticky category bar for wayfinding down the long page */
@media (min-width: 64em) {
  .page-faq #faq-categories {
    position: sticky;
    top: var(--header-h-scrolled);
    z-index: calc(var(--z-sticky) - 1);
    padding-block: var(--space-4);
    box-shadow: 0 1px 0 var(--border), 0 8px 20px rgba(10, 23, 48, 0.06);
  }
  .page-faq #faq-categories > .container { display: flex; align-items: center; gap: var(--space-6); }
  .page-faq #faq-categories > .container > * + * { margin-top: 0; }
  .page-faq #faq-categories .cluster { --cluster-gap: var(--space-2); }
  .page-faq .faq-back { display: none; }
}


/* --- 13.7 Contact (body.page-contact) --------------------------------------- */

/* (a) a shorter hero so the first field is visible on load */
.page-contact .page-hero { padding-block: var(--space-10) var(--space-9); }
.page-contact .page-hero__lede { font-size: var(--step-0); max-width: 60ch; }
.page-contact .page-hero .mt-8 { margin-top: var(--space-5); }
.page-contact .page-hero + .section { padding-top: var(--space-9); }
.page-contact #form-title { margin-top: var(--space-2); }
.page-contact .contact-layout__main > .section-head { margin-bottom: var(--space-6); }
.page-contact .contact-layout__main > .callout { width: auto; } /* flush with the form cards below */
/* (b) form + privacy aside */
@media (min-width: 64em) {
  .page-contact .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(18rem, 22rem);
    gap: var(--space-10);
    justify-content: center;
    align-items: start;
  }
  .page-contact .contact-layout__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
  .page-contact .contact-layout__aside > section { margin-top: 0; }
}
.page-contact .contact-layout__aside .callout { width: auto; }
/* (c) submit row */
.page-contact .form-actions { margin-top: var(--space-6); }
.page-contact .form-actions + .fine-print { margin-top: var(--space-3); }
@media (max-width: 39.99em) {
  .page-contact .form-actions .btn { width: 100%; padding-inline: var(--space-5); font-size: var(--step-0); }
  .page-contact .form fieldset.card { padding: var(--space-5); border-radius: var(--radius-md); }
}
/* (d) */
@media (min-width: 60em) {
  .page-contact .cta-band__inner { align-items: start; }
}


/* --- 13.8 Thank you (body.page-thank-you) ----------------------------------- */

/* (a) sticky head + footnote left, timeline right */
.page-thank-you .split--timeline { --split: minmax(0, 4fr) minmax(0, 7fr); }
@media (min-width: 62em) {
  .page-thank-you .split--timeline > :first-child {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-8));
  }
}
.page-thank-you .split--timeline .callout--legal { margin-top: var(--space-6); }
/* below 62em: head, timeline, then the footnote */
@media (max-width: 61.99em) {
  .page-thank-you .split--timeline { display: flex; flex-direction: column; gap: 0; }
  .page-thank-you .split--timeline > :first-child { display: contents; }
  .page-thank-you .split--timeline .section-head { order: 1; }
  .page-thank-you .split--timeline > .ty-timeline { order: 2; }
  .page-thank-you .split--timeline .callout--legal { order: 3; margin-top: var(--space-8); }
}
/* (b) one connected timeline: a rail through the icons */
.page-thank-you .ty-timeline { position: relative; }
.page-thank-you .ty-timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--space-7) + 1rem);
  top: var(--space-7);
  bottom: var(--space-7);
  border-left: 2px solid var(--border-strong);
  z-index: 0;
}
@media (max-width: 39.99em) {
  .page-thank-you .ty-timeline::before { left: calc(var(--space-6) + 1rem); }
}
.page-thank-you .ty-timeline > .card {
  position: relative;
  z-index: 1;
  border-top-width: 1px;
  border-top-color: var(--border);
}
.page-thank-you .ty-timeline > .card:first-child { border-top: 3px solid var(--accent-ui); }
.page-thank-you .ty-timeline .card__icon { background: var(--surface-raised); }
/* (c) H1 breaks between its two sentences */
@media (max-width: 47.99em) {
  .page-thank-you .page-hero__title-2 { display: block; }
}
@media (max-width: 22.5em) {
  .page-thank-you .page-hero__title { font-size: 2.125rem; }
}
/* (d) the urgent line is not fine print */
.page-thank-you .section--navy .fine-print { font-size: var(--step-0); color: var(--on-navy); }
.page-thank-you .section--navy .fine-print a { font-weight: 700; }
/* (e) the visitor just asked for a review: the sticky bar only offers the call */
.page-thank-you .sticky-cta { grid-template-columns: 1fr; }
.page-thank-you .sticky-cta__btn--help { display: none; }


/* --- 13.9 404 (body.page-404) ----------------------------------------------- */

.page-404 .grid--auto { grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .page-404 .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-404 .grid--auto > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 60em) {
  .page-404 .grid--auto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-404 .grid--auto > * { grid-column: span 2; }
  .page-404 .grid--auto > :nth-child(n+4) { grid-column: span 3; }
}
.page-404 .grid--auto > :last-child { border-top: 3px solid var(--accent-ui); }
.page-404 .card__arrow {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: auto;
  align-self: flex-end;
  color: var(--accent);
  transition: transform var(--dur) var(--ease-out);
}
.page-404 .card--link:hover .card__arrow { transform: translateX(3px); }
.page-404 .section--cream > .container > p:last-child a { display: inline-block; padding-block: 0.5rem; }


/* --- 13.10 Legal pages ------------------------------------------------------ */

:is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .page-hero + .section {
  padding-top: var(--section-y-tight);
}
/* closing band: one text column, actions in a row under it */
:is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .cta-band__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 48em) {
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .cta-band__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .cta-band__actions .btn { width: auto; }
}
/* >=75em: sticky TOC in a left column; hero and closing band align to the
   document column (15rem TOC + --space-12 gap = 19rem inset). The container
   changes wait for the .legal-layout hook, so the page never half-applies. */
@media (min-width: 75em) {
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures):has(.legal-layout) main > .section--white > .container--narrow,
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures):has(.legal-layout) .page-hero > .container--narrow,
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures):has(.legal-layout) .cta-band > .container--narrow {
    max-width: calc(63rem + 2 * var(--gutter));
  }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures):has(.legal-layout) .page-hero > .container--narrow,
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures):has(.legal-layout) .cta-band > .container--narrow {
    padding-left: calc(var(--gutter) + 15rem + var(--space-12));
  }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 44rem);
    column-gap: var(--space-12);
    row-gap: var(--space-9);
    align-items: start;
  }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout > * + * { margin-top: 0; }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout > * { grid-column: 2; }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout > .callout--warn { grid-row: 1; }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout > .legal-toc {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-6));
    max-height: calc(100vh - var(--header-h-scrolled) - var(--space-12));
    overflow: auto;
  }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout > .legal-toc .toc { grid-template-columns: 1fr; }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout > .legal-toc .toc a {
    font-size: var(--step--1);
    min-height: 2.25rem;
  }
  :is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .legal-layout > :last-child { grid-row: 2; }
}
/* where a TOC link lands */
:is(.page-legal-privacy, .page-legal-terms, .page-legal-disclosures) .prose:target > h2 {
  box-shadow: inset 4px 0 0 var(--accent-ui);
  padding-left: var(--space-4);
}


/* === 14. Header: white bar over the navy hero === */
/* The navy header sat directly on the navy hero, so the two read as one block and the
   nav blended into the headline area. A white bar separates them cleanly and puts the
   red CTA on its strongest background. Placed last so it overrides section 07.3 at
   equal specificity (including the translucent @supports variant).
   Measured contrast on white: navy-900 17.8:1, slate-600 7.36:1, red-600 5.88:1,
   slate-400 3.16:1 (UI border). The mobile nav panel below stays navy. */
.site-header,
.site-header.is-scrolled {
  background-color: var(--white);
  color: var(--navy-900);
  border-bottom: 1px solid var(--slate-200);
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(10, 23, 48, 0.10); }
.site-header .brand,
.site-header .brand:hover { color: var(--navy-900); }
.site-header .brand__tag { color: var(--slate-600); }
.site-header .nav__link { color: var(--navy-900); }
.site-header .nav__link:hover { color: var(--red-600); background-color: var(--cream-100); }
.site-header .nav__link[aria-current="page"] {
  color: var(--red-600);
  box-shadow: inset 0 -2px 0 var(--red-600);
  background-color: transparent;
}
.site-header .nav__link:focus-visible { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25), 0 0 0 1px var(--red-600); }
.site-header .header-phone { color: var(--navy-900); }
.site-header .header-phone:hover { color: var(--red-600); }
.site-header .nav-toggle { color: var(--navy-900); border-color: var(--slate-400); }
.site-header .nav-toggle:hover { background-color: var(--cream-100); }
.site-header .nav-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25), 0 0 0 1px var(--red-600); }