/* ===========================================================================
   Design tokens — measured from the live SafeCare site, not invented.

   NOTE: root font-size is 62.5%, so 1rem = 10px. This matches the original
   site (Core Framework convention) and makes every value below readable as
   "px divided by 10". 1.8rem = 18px.
   =========================================================================== */

:root {
  /* ---- brand palette (verbatim from the original's :root) ---------------- */
  --primary:      #00558F;   /* SafeCare blue: headings, header bar, buttons  */
  --secondary:    #6FA3D7;   /* mid blue: the second tone in the intro h2     */
  --tertiary:     #E2EDF7;   /* pale blue section background                   */
  --quaternary:   #D31C5C;   /* magenta: outline buttons, accents              */
  --quinary:      #dbe8f5;   /* hero / results section background              */
  --senary:       #F1F6FB;
  --white:        #FFFFFF;
  --text-body:    #000000;
  --text-title:   var(--primary);

  /* greens — used by the stat cards, benefit cards and eyebrow labels */
  --green:        #6FBC84;   /* eyebrow text, icon fill, primary CTA fill     */
  --green-card:   #E2F1E6;   /* benefit / news card background                 */
  --green-stat:   #9AD0A8;   /* active stat card                              */

  /* ---- type scale -------------------------------------------------------
     Desktop values are the measured ones. Below 900px they step down; the
     original swaps its clamp() bounds at breakpoints, this achieves the same
     result more legibly.                                                    */
  --text-xs:   1.01rem;   /* 10.1px */
  --text-s:    1.35rem;   /* 13.5px — buttons                                */
  --text-m:    1.8rem;    /* 18px   — body copy, eyebrow, h4                 */
  --text-l:    2.4rem;    /* 24px   — card headings                          */
  --text-xl:   3.2rem;    /* 32px                                            */
  --text-2xl:  4.26rem;   /* 42.6px — section h2                             */
  --text-3xl:  5.68rem;   /* 56.8px — intro h2                               */
  --text-4xl:  7.58rem;   /* 75.8px — hero h1                                */

  --font-body: "DIN Pro", "DIN Pro Fallback", system-ui, sans-serif;
  --font-display: "Nunito", system-ui, sans-serif;

  /* ---- spacing scale (fluid, from the original's Core Framework tokens) -- */
  --space-4xs: 0.49rem;
  --space-3xs: clamp(0.66rem, 0.04vw + 0.64rem, 0.7rem);
  --space-2xs: clamp(0.82rem, 0.16vw + 0.77rem, 0.99rem);
  --space-xs:  clamp(1.02rem, 0.36vw + 0.91rem, 1.4rem);
  --space-s:   clamp(1.28rem, 0.67vw + 1.07rem, 1.98rem);
  --space-m:   clamp(1.6rem,  1.15vw + 1.23rem, 2.8rem);   /* gutter: 28px   */
  --space-l:   clamp(2rem,    1.87vw + 1.4rem,  3.96rem);
  --space-xl:  clamp(2.5rem,  2.96vw + 1.55rem, 5.6rem);   /* card gap: 56px */
  --space-2xl: clamp(3.13rem, 4.58vw + 1.66rem, 7.92rem);
  --space-3xl: clamp(3.91rem, 6.97vw + 1.68rem, 11.19rem); /* section: 112px */

  /* ---- radii ------------------------------------------------------------ */
  --radius-s:    clamp(0.6rem, 0.19vw + 0.54rem, 0.8rem);
  --radius-m:    clamp(1rem,   0.19vw + 0.94rem, 1.2rem);
  --radius-l:    clamp(1.6rem, 0.38vw + 1.48rem, 2rem);
  --radius-xl:   clamp(2.6rem, 0.57vw + 2.42rem, 3.2rem);  /* cards: 32px    */
  --radius-full: 999rem;

  /* ---- layout ----------------------------------------------------------- */
  --container:        128rem;  /* 1280px — wide sections                     */
  --container-narrow: 105.6rem;/* 1056px — hero, pricing, form, testimonial  */
  --header-h:         13.5rem; /* 135px                                      */
  --card-stick-top:   20rem;   /* 200px — sticky offset for stacking cards   */

  --shadow-card: 0 3px 12px rgba(0, 85, 143, 0.08);
  --transition: 0.25s ease;
}

@media (max-width: 900px) {
  :root {
    --text-4xl: 4.2rem;
    --text-3xl: 3.4rem;
    --text-2xl: 2.9rem;
    --text-xl:  2.4rem;
    --text-l:   2rem;
    --card-stick-top: 9rem;
    --header-h: 9rem;
  }
}

/* ---- DIN Pro ------------------------------------------------------------
   Self-hosted, the same woff2 files as the original, served same-origin
   (cross-origin webfonts are CORS-gated and would silently fall back).

   IMPORTANT: this declares exactly the four weights the original declares —
   300 / 400 / 700 / 900. There is no Medium or ExtraBold file on the site, so
   the 600 used by card headings and the 800 used by buttons are synthesised
   by the browser. Declaring extra faces here would make our text render
   *differently* from the original, not better. Don't "fix" this.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "DIN Pro";
  src: url("/assets/fonts/DINPro-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("/assets/fonts/DINPro-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("/assets/fonts/DINPro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("/assets/fonts/DINPro-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("/assets/fonts/DINPro-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("/assets/fonts/DINPro-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}