:root {
  /* Brand — Teal Scale */
  --c-teal-100: #b2d8d8;  /* CTA light */
  --c-teal-300: #66b2b2;  /* CTA medium */
  --c-teal-500: #008080;
  --c-teal-700: #006666;  /* Primary anchor */
  --c-teal-900: #004c4c;

  --c-teal: var(--c-teal-700);
  --c-teal-dark: var(--c-teal-900);
  --c-teal-soft: #e6f0f0;

  /* Surfaces */
  --c-bg: #f7f4ef;
  --c-surface: #ffffff;
  --c-ink: #1a1a1a;
  --c-ink-soft: #4a4a4a;
  --c-line: #d8d2c8;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-serif: var(--font-sans);

  /* Layout — content width 65% desktop / 85% mobile, equal side margins.
     --gutter = content + header side margin. --edge = exceptions (hero, trust). */
  --gutter: 17.5vw;
  --edge: 3vw;
  --header-h: 2.5vw;
  --header-h-min: 40px;

  /* Radii */
  --r-pill: 999px;
}

/* Mobile: content 85% (7.5vw each side) */
@media (max-width: 768px) {
  :root {
    --gutter: 7.5vw;
    --edge: 5vw;
  }
}