@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  /* palette */
  --c-ink: #001F1F;
  --c-accent: #046645;
  --c-mint: #CDFACE;
  --c-bg: #FFFFFF;
  --c-card: #FFFFFF;
  --c-muted: #3D5A58;
  --c-line: #D3E4DC;
  --c-surface: #F4FAF6;
  --c-tint: #E6F7EA;
  --c-tile-1: #CDFACE;
  --c-tile-2: #BFE8E2;
  --c-tile-3: #A9E3C1;
  --c-tile-4: #E2D9FB;
  --c-tile-5: #F4F1C1;
  --focus-ring: #FFFFFF;

  /* front-page hero gradient: nine light-mint stops, top to bottom; stop 4 (50%) is the footer mint (--footer-bg), the last stop fades to white */
  --hero-stop-1: #8FEFCB;
  --hero-stop-2: #96F1CE;
  --hero-stop-3: #A1F4D4;
  --hero-stop-4: var(--footer-bg);
  --hero-stop-5: #BDF9E2;
  --hero-stop-6: #D4FBEC;
  --hero-stop-7: #E8FDF5;
  --hero-stop-8: #F6FFFB;
  --hero-stop-9: #FFFFFF;
  --hero-pos-1: 0%;
  --hero-pos-2: 12%;
  --hero-pos-3: 30%;
  --hero-pos-4: 50%;
  --hero-pos-5: 62%;
  --hero-pos-6: 76%;
  --hero-pos-7: 88%;
  --hero-pos-8: 95%;
  --hero-pos-9: 100%;
  --hero-glow: 37, 206, 170;
  --hero-glow-a: .3;
  --hero-glow-x: 76%;
  --hero-glow-y: 82%;
  --hero-glow-rx: 30%;
  --hero-glow-ry: 24%;
  --hero-overlap: clamp(56px, 10vw, 200px);
  --hero-band-h: 900px;
  --hero-pad-top: clamp(104px, 9vw, 136px);
  --hero-lead-fs: 1.25rem;
  --hero-lead-lh: 1.5;
  --hero-btn-pad: 14px 28px;
  /* worst-case text wrapping the contrast test assumes (H1 lines, lead lines, button rows); keep in sync with the layout */
  --hero-lines: 4 3 1;
  --r-card: 16px;
  --r-inner: 12px;
  --r-block: 32px;
  --r-pill: 100px;
  --bw: 1.5px;
  --container: 1120px;
  --shadow-card: 0 4px 20px rgba(0, 31, 31, .06);
  --shadow-card-hover: 0 10px 28px rgba(0, 31, 31, .12);

  --font-head: "Figtree", Arial, sans-serif;
  --font-body: "Figtree", Arial, sans-serif;
  --fs-body: 18px;
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.875rem);    /* max 78px */
  --fs-h2: clamp(1.875rem, 1.2rem + 2.2vw, 3.1875rem); /* max 51px */
  --fs-hero-h1: clamp(2rem, 1rem + 4.6vw, 4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
}

/* hero band: below 1000px the band is fluid and the right glow is off */
@media (max-width: 999px) {
  :root {
    --hero-glow-a: 0;
    --hero-band-h: clamp(680px, 80vw, 820px);
    --hero-pad-top: 96px;
    --hero-lines: 3 3 1;
  }
}
@media (max-width: 700px) {
  :root { --hero-lead-fs: 1.0625rem; --hero-lead-lh: 1.45; --hero-btn-pad: 12px 22px; --hero-lines: 4 5 2; }
}

/* footer-tokens:start */
/* The footer keeps the previous look; its rules use only these tokens. */
:root {
  --footer-bg: #ADF7DB;
  --footer-ink: #211C28;
  --footer-border: #211C28;
  --footer-btn-bg: #08F2EA;
  --footer-white: #FFFFFF;
  --footer-muted: #5B5561;
  --footer-page: #FFFFFF;
}
/* footer-tokens:end */