/* ==========================================================================
   Local Values+ — design tokens and base styles
   Single stylesheet. No build step. Mobile first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Color: brand palette --- */
  --color-navy: #1B4B6B;        /* primary text, headings, dark UI */
  --color-navy-deep: #12354E;   /* hero and footer backgrounds */
  --color-orange: #F47B20;      /* CTAs and accents ONLY, never body text */
  --color-orange-hover: #F68A38;/* lighter, so navy-deep text stays at 5.23:1 */
  --color-offwhite: #EAEFF3;    /* alternating sections */
  --color-white: #FFFFFF;

  /* --- Color: semantic roles (all derived from the palette above) --- */
  --color-text: var(--color-navy);
  --color-text-muted: #496E86;          /* body copy. 4.70:1 on off-white, 5.44:1 on white */
  --color-text-on-dark: #D6E3EC;        /* body copy on navy-deep */
  --color-text-on-dark-muted: #A9C0D1;  /* fine print on navy-deep */
  /* Navy-deep on orange = 4.68:1. White on orange is only 2.7:1, so never use it. */
  --color-text-on-orange: var(--color-navy-deep);

  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-offwhite);
  --color-surface-dark: var(--color-navy-deep);

  --color-border: rgba(27, 75, 107, 0.14);
  --color-border-strong: rgba(27, 75, 107, 0.28);
  --color-rule: #BFCDD6;                /* thin navy dividers, solid */
  --color-rule-soft: #D6E3EC;           /* mobile row rule inside the stat card */
  --color-error: #B3261E;               /* form errors. 6.2:1 on white */
  --color-border-on-dark: rgba(255, 255, 255, 0.32);

  --color-focus: var(--color-orange);
  --color-focus-on-dark: var(--color-white);

  /* --- Type: families --- */
  --font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* --- Type: weights --- */
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* --- Type: scale (48 / 32 / 28 / 24 / 18 / 16 / 14 / 12) --- */
  --font-size-h1: 48px;
  --font-size-h1-mobile: 28px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-label: 14px;
  --font-size-eyebrow: 12px;
  --font-size-fineprint: 13px;          /* hero CTA fine print only, off the main scale */

  --line-height-h1: 56px;
  --line-height-h1-mobile: 36px;
  --line-height-h2: 40px;
  --line-height-h3: 32px;
  --line-height-body-lg: 28px;
  --line-height-body: 24px;
  --line-height-label: 20px;
  --line-height-eyebrow: 16px;

  --letter-spacing-h1: -0.02em;
  --letter-spacing-h2: -0.01em;
  --letter-spacing-label: 0.05em;
  --letter-spacing-eyebrow: 0.1em;

  /* --- Spacing: 8px base --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-12: 96px;

  /* --- Layout --- */
  --container-max: 1280px;
  --gutter-mobile: 16px;
  --gutter-desktop: 40px;
  --section-padding-y: var(--space-7);         /* 56px under 768 */
  --header-height: 64px;

  /* --- Radius: one value everywhere --- */
  --radius: 8px;

  /* --- Elevation --- */
  --shadow-header: 0 1px 3px rgba(18, 53, 78, 0.06);
  --shadow-card: 0 4px 12px rgba(27, 75, 107, 0.08);

  /* --- Motion --- */
  --transition: 150ms ease;
}

@media (min-width: 768px) {
  :root {
    --section-padding-y: var(--space-10);      /* 80px from 768 up */
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 80px;
  }
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Page ground below the hero. Sections that need white set it themselves. */
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--color-text);
}

p { margin: 0; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

button { font: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.on-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

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

@media (min-width: 1024px) {
  .container { padding-inline: var(--gutter-desktop); }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY CLASSES
   -------------------------------------------------------------------------- */
.h1 {
  font-size: var(--font-size-h1-mobile);
  line-height: var(--line-height-h1-mobile);
  font-weight: var(--font-weight-black);
}
@media (min-width: 768px) {
  .h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1);
  }
}

.h2 {
  font-size: var(--font-size-h1-mobile);
  line-height: var(--line-height-h1-mobile);
  font-weight: var(--font-weight-black);
}
@media (min-width: 768px) {
  .h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
  }
}

.h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-bold);
}

.body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.eyebrow {
  font-size: var(--font-size-eyebrow);
  line-height: var(--line-height-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.text-muted { color: var(--color-text-muted); }
.on-dark,
.section--dark { color: var(--color-text-on-dark); }

.on-dark .text-muted,
.section--dark .text-muted { color: var(--color-text-on-dark-muted); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 12px var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
/* No opacity on hover: it drags button label contrast under 4.5:1. */
.btn--primary:hover {
  background-color: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
}

.btn--primary {
  background-color: var(--color-orange);
  color: var(--color-text-on-orange);
  border-color: var(--color-orange);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-border-on-dark);
}
.btn--ghost:hover {
  background-color: var(--color-white);
  color: var(--color-navy-deep);
  border-color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--outline:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn--lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-body-lg);
  letter-spacing: 0;
}

.btn--block { width: 100%; }
@media (min-width: 640px) {
  .btn--block { width: auto; }
}

/* --------------------------------------------------------------------------
   6. SITE HEADER (one sticky header, mobile collapses to hamburger)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-header);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

/* Below 1024px this is the square mark at 32px. From 1024px the <picture>
   swaps in the wordmark: 32px tall (338px wide) fits a 1024px bar, 40px
   fits from 1200px up. */
.site-header__logo {
  height: 32px;
  width: auto;
}
@media (min-width: 1200px) {
  .site-header__logo { height: 40px; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.site-nav { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__link {
  display: inline-block;
  padding: var(--space-1) 0;
  color: var(--color-text);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-label);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}
.site-nav__link:hover { border-bottom-color: var(--color-orange); }

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-navy);
  cursor: pointer;
}

.site-header__toggle .icon-close { display: none; }
.site-header__toggle[aria-expanded="true"] .icon-menu { display: none; }
.site-header__toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drop panel */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
}
.mobile-nav[data-open="true"] { display: block; }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-1) var(--space-3);
}

.mobile-nav__link {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-text);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

/* Desktop: real nav, no hamburger */
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__toggle { display: none; }
  .mobile-nav { display: none !important; }
  .site-header__actions { gap: var(--space-4); }
}

/* --------------------------------------------------------------------------
   7. SECTIONS
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-padding-y);
}

.section--alt { background-color: var(--color-surface-alt); }

/* The homepage hero is a plain .section. Hold its original padding so the
   site wide reduction does not touch it. */
.hero { padding-block: var(--space-8); }

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-12); }
}

.section--white { background-color: var(--color-white); }

/* The stat card owns the space above this section. */
.section--no-top { padding-top: 0; }

.section--dark {
  background-color: var(--color-surface-dark);
  color: var(--color-text-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--color-white); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Query container so the h1 can size itself against this column, not the viewport. */
  container-type: inline-size;
  min-width: 0;
}

/* Each phrase is its own block and never wraps. The longest line measures
   13.4x the font size, so the size is capped against the column width to
   guarantee the phrase fits rather than breaking mid-phrase. */
.hero__title-line {
  display: block;
  white-space: nowrap;
}

.hero__title {
  letter-spacing: var(--letter-spacing-h1);
  font-size: min(var(--font-size-h1-mobile), 7.2cqi);
}

.hero__lede { max-width: 34ch; margin-inline: auto; }

/* Same pattern as .hero__title-line on the homepage. Below 768px the spans
   stay inline so the headline wraps naturally instead of overflowing. */
@media (min-width: 768px) {
  .page-hero__title-line {
    display: block;
    white-space: nowrap;
  }
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: var(--space-1);
}

/* Under 768px: below the button, left aligned. From 768px: beside it,
   vertically centred, and never allowed to wrap. */
.hero__fineprint {
  align-self: stretch;
  margin: 0;
  font-size: var(--font-size-fineprint);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--color-text-on-dark-muted);
}

/* Aspect-ratio placeholder for the hero image */
.media-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--color-border-on-dark);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    text-align: left;
  }
  .hero__copy { flex: 1.4 1 0; gap: var(--space-3); }
  .hero__lede { margin-inline: 0; }
  .hero__media { flex: 1 1 0; min-width: 0; }
  .hero__title { font-size: min(var(--font-size-h1), 7.2cqi); }
  .hero__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
  .hero__fineprint { align-self: auto; white-space: nowrap; }
  .media-placeholder { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   9. STEPS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
}

.step__number {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-black);
  color: var(--color-orange);
}

.step__icon { color: var(--color-navy); }

.step__body { max-width: 34ch; }

/* --------------------------------------------------------------------------
   10. STAT CARD (straddles the bottom edge of the hero)
   -------------------------------------------------------------------------- */
.stat-strip {
  position: relative;
  z-index: 1;                       /* above the hero, below the sticky header (50) */
  margin-top: -32px;                /* mobile overlap */
  padding-inline: var(--gutter-mobile);
  padding-bottom: var(--space-9);   /* 72px of air before the step row */
}

.stat-card {
  max-width: 1100px;
  margin-inline: auto;
  padding-block: var(--space-4);
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(27, 75, 107, 0.10);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  text-align: center;
}

/* Mobile 2x2: no vertical rules, one horizontal rule between the two rows. */
.stat:nth-child(-n+2) { padding-top: 0; }
.stat:nth-child(n+3) {
  padding-bottom: 0;
  border-top: 1px solid var(--color-rule-soft);
}

.stat__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-black);
  color: var(--color-orange);
}

.stat__label {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}

@media (min-width: 768px) {
  .stat-strip {
    margin-top: -56px;
    padding-inline: var(--gutter-desktop);
  }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { padding-block: 0; }
  /* Vertical dividers return, horizontal rule goes away. */
  .stat:nth-child(n+3) { border-top: none; }
  .stat:nth-child(n+2) { border-left: 1px solid var(--color-rule); }
  .stat__value {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
  }
}

/* --------------------------------------------------------------------------
   11. SHARED PAGE FURNITURE
   -------------------------------------------------------------------------- */
.page-hero { padding-block: var(--space-8); }

@media (min-width: 1024px) {
  .page-hero { padding-block: var(--space-10); }
}

.page-hero__inner {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 46rem;
  margin-bottom: var(--space-5);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 46rem;
}

/* Orange numeral / accent text on light backgrounds. */
.accent-number {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-black);
  color: var(--color-orange);
}

/* --------------------------------------------------------------------------
   12. NUMBERED LIST
   -------------------------------------------------------------------------- */
.numbered {
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
  max-width: 52rem;
}

@media (min-width: 768px) {
  .numbered { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); }
}

.numbered__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.numbered__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-black);
  color: var(--color-orange);
}

.numbered__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* --------------------------------------------------------------------------
   13. BORDERED CARD
   -------------------------------------------------------------------------- */
.card {
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  max-width: 46rem;
}

@media (min-width: 768px) {
  .card { padding: var(--space-4); }
}

.card__label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-navy);
}

.card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.card__list svg { color: var(--color-orange); flex-shrink: 0; margin-top: 2px; }

/* --------------------------------------------------------------------------
   14. ACCORDION
   -------------------------------------------------------------------------- */
.accordion {
  max-width: 46rem;
  border-top: 1px solid var(--color-border-strong);
}

.accordion__item { border-bottom: 1px solid var(--color-border-strong); }

.accordion__heading { margin: 0; }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-bold);
  text-align: left;
  cursor: pointer;
}

.accordion__icon {
  flex-shrink: 0;
  color: var(--color-navy);
  transition: transform var(--transition);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }

.accordion__panel { padding-bottom: var(--space-3); }
.accordion__panel[hidden] { display: none; }
.accordion__panel p { max-width: 60ch; }

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background-color: var(--color-surface-alt);
  padding-block: var(--space-10);   /* ~80px of off-white above and below the card */
}

/* Contained navy card, so the CTA reads as the end of the page and not as
   the top of the footer. Same idea as the homepage stat card. */
.cta-band__card {
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-3);
  border-radius: var(--radius);
}

.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.cta-band__fineprint {
  font-size: var(--font-size-fineprint);
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   16. FORM
   -------------------------------------------------------------------------- */
.form { max-width: 44rem; }

.form__fieldset {
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
}

.form__legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}

.form__help {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.form__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .form__grid--two { grid-template-columns: repeat(2, 1fr); }
}

.field { display: flex; flex-direction: column; gap: var(--space-1); }

/* Conditional fields are toggled with the hidden attribute. .field sets
   display:flex, which would otherwise beat the UA [hidden] rule. */
.field[hidden] { display: none; }

.field__label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}

.field__optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.field__help {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 12px var(--space-2);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.field__textarea { min-height: 120px; resize: vertical; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--color-navy); }

.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }

.field__error {
  display: none;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
}

.field__error[data-visible="true"] { display: block; }

/* Repeated offer blocks */
.offer-block {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}

/* Consent checkbox */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-navy);
}

.consent__text { color: var(--color-navy); }

.form__submit { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }

.form__note { color: var(--color-navy); max-width: 52ch; }

.form__summary {
  display: none;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border: 2px solid var(--color-error);
  border-radius: var(--radius);
  color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

.form__summary[data-visible="true"] { display: block; }

/* --------------------------------------------------------------------------
   17. SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy-deep);
  color: var(--color-text-on-dark);
  padding-block: var(--space-8) var(--space-4);
}

.site-footer h2,
.site-footer h3 { color: var(--color-white); }

.site-footer__top {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 1.2fr 2fr 1.4fr; gap: var(--space-8); }
}

.site-footer__logo { height: 44px; width: auto; }

@media (min-width: 1024px) {
  .site-footer__logo { height: 56px; }
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

.site-footer__col-title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-eyebrow);
  line-height: var(--line-height-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
}

.site-footer__list { display: flex; flex-direction: column; gap: var(--space-1); }

.site-footer__link {
  display: inline-block;
  padding-block: 4px;
  color: var(--color-text-on-dark);
  font-size: var(--font-size-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer__link:hover { border-bottom-color: var(--color-orange); }

.footer-signup { display: flex; flex-direction: column; gap: var(--space-2); }

.footer-signup__row { display: flex; flex-direction: column; gap: var(--space-2); }

@media (min-width: 480px) {
  .footer-signup__row { flex-direction: row; }
  .footer-signup__row .field__input { flex: 1; min-width: 0; }
}

.footer-signup .field__label { color: var(--color-text-on-dark); }

.footer-signup__note {
  font-size: var(--font-size-fineprint);
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
}

.site-footer__bottom {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-on-dark);
}

.site-footer__fineprint {
  font-size: var(--font-size-fineprint);
  line-height: 1.6;
  color: var(--color-text-on-dark-muted);
  max-width: 80ch;
}

/* --------------------------------------------------------------------------
   18. PAGE HERO ACTIONS
   Left aligned stack of one button plus its fine print. The homepage
   .hero__actions is centred, so the page heroes need their own alignment.
   -------------------------------------------------------------------------- */
.page-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   19. MATH TABLE
   Contained white card on off-white, same shell as the homepage .stat-card.
   Three rows, three columns, holds at 375px.
   -------------------------------------------------------------------------- */
.math-card {
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--space-2);
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .math-card { padding: var(--space-4); }
}

.math-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.math-table th,
.math-table td {
  padding: var(--space-2) var(--space-1);
  vertical-align: baseline;
}

.math-table th:first-child,
.math-table td:first-child { padding-left: 0; }

.math-table th:last-child,
.math-table td:last-child { padding-right: 0; text-align: right; }

.math-table thead th {
  padding-top: 0;
  font-size: var(--font-size-eyebrow);
  line-height: var(--line-height-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-rule-soft);
}

.math-table tbody tr + tr th,
.math-table tbody tr + tr td { border-top: 1px solid var(--color-rule-soft); }

.math-table tbody tr:last-child th,
.math-table tbody tr:last-child td { padding-bottom: 0; }

.math-table__sellers {
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}

/* Second half of the first cell. Its own line so the column stays narrow. */
.math-table__each {
  display: block;
  white-space: nowrap;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.math-table__books { color: var(--color-text-muted); }

.math-table__total {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-black);
  color: var(--color-orange);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .math-table__total {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.math-fineprint {
  max-width: 1100px;
  margin: var(--space-3) auto 0;
  color: var(--color-text-muted);
}