/* Tervo design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #03242A;            /* deep teal page: hero, step band, numbers band, footer */
  --paper: #FAF7F2;         /* warm cream panels inset 24px from the edge */
  --paper-2: #F4EEE4;       /* logo band at the top of a panel */
  --surface: #FFFFFF;       /* cards, FAQ rows, chips on cream */
  --dark-2: #0D2D33;        /* nav pills, social discs, dark chip */
  --dark-line: #17363B;     /* the hairline grid on dark */
  --dark-line-2: #203E43;   /* nav pill border */
  --paper-line: #E9E4DC;    /* the hairline grid on cream */
  --scrim: rgba(3, 36, 42, .86); /* photo-card label fade (deep teal) */

  /* ── Text ── */
  --text: #03242A;          /* ink on cream: headlines, buttons, labels */
  --muted: #687072;         /* body copy on cream (the design's #6C7475, nudged to pass 4.5:1) */
  --faint: #879193;         /* step numbers (large, 3:1) */
  --on-dark: #FFFFFF;
  --on-dark-2: #B9C4C6;     /* lead and body on teal */
  --on-dark-3: #8C9B9D;     /* footer heads, copyright */

  /* ── Lines ── */
  --line: #DED9D1;          /* list track, rules on cream */
  --line-strong: #03242A;   /* active list item */

  /* ── Brand / accent (brand slots — see palette/slots.json) ── */
  --accent: #E3F21A;        /* lime: arrow discs, active nav pill, dots, one value card, CTA swoosh */
  --accent-rgb: 227, 242, 26;
  --on-accent: #03242A;
  --tint-1: #E6FBB9;        /* pastel tab / bar 1 (lime tint) */
  --tint-2: #B1C8FC;        /* pastel tab / bar 2 (sky) */
  --tint-3: #FFD2F3;        /* pastel tab / bar 3 (pink) */
  --tint-4: #F5E4B4;        /* pastel tab / bar 4 (butter) */

  /* ── Data / status (forms only) ── */
  --success: #2F7D4F; --warning: #B7791F; --danger: #C0392B; --info: #2F5D8A;

  /* ── Fonts ── */
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;   /* the italic emphasis phrase only */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 8px;     /* icon tiles, small photos in mock-ups */
  --r-sm: 12px;    /* photos inside a card */
  --r: 16px;       /* cards, photo cards, FAQ rows, tabs */
  --r-lg: 24px;    /* phone panels */
  --r-panel: 40px; /* cream panels */
  --r-arch: 64px;  /* portrait cards in the hero strip */
  --r-pill: 999px;

  /* ── Spacing / layout ── */
  --container: 1224px;
  --gutter: 24px;
  --inset: 24px;            /* cream panels sit 24px in from the screen edge, 24px apart */
  --section: 120px;         /* vertical padding of a band or panel */
  --gap: 24px;              /* card grid gap */
  --head-gap: 16px;         /* chip → headline */
  --head-to-content: 56px;  /* headline block → content */

  /* ── Shadows (the design is flat; only the open menu gets one) ── */
  --shadow-1: 0 1px 2px rgba(3, 36, 42, .05), 0 10px 30px rgba(3, 36, 42, .08);
  --shadow-2: 0 24px 60px rgba(3, 36, 42, .22);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  --dur-fast: .25s;
}

/* ── Type scale (desktop values from the design's text styles; phone sizes in tervo.css) ──
   Headlines are Instrument Sans 400 with ONE Instrument Serif italic phrase (.it), set 5–14% larger. */
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 80px; line-height: .96; letter-spacing: -.035em; }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1.04; letter-spacing: -.03em; }
.t-h3 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: -.025em; }
.t-h4 { font-family: var(--font); font-weight: 500; font-size: 24px; line-height: 1.4; letter-spacing: -.015em; }
.t-stat { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1.1; letter-spacing: -.03em; }
.t-title { font-family: var(--font); font-weight: 500; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; }
.t-lead { font-family: var(--font); font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -.005em; }
.t-body { font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.55; }
.t-small { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.5; }
.t-label { font-family: var(--font); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.t-button { font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1; }
.it { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; font-size: 1.1em; line-height: .9; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }