/* ============================================================
   Growth Media — base.css : fonts, tokens, reset, typography, primitives
   ============================================================ */

/* ---- Self-hosted fonts (latin subset) ---- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-700.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/roboto-500.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/roboto-700.woff2') format('woff2');}

/* ---- Design tokens ---- */
:root{
  /* brand palette */
  --gm-dark:#101828;          /* dark hero / sections, heading text */
  --gm-dark-2:#1d2939;
  --gm-blue:#1f6fff;          /* PRIMARY accent / CTA */
  --gm-blue-700:#1257d6;      /* primary hover */
  --gm-purple:#7f56d9;
  --gm-purple-2:#6941c6;      /* checkmarks, slider active dot */
  --gm-purple-3:#53389e;
  --gm-green:#5ec045;
  --gm-coral:#fd5c63;
  --gm-slate:#475467;         /* muted body text */
  --gm-text:#333333;
  --gm-heading:#101828;
  --gm-white:#ffffff;
  --gm-tint-1:#f5f7fa;
  --gm-tint-2:#f2f3ff;
  --gm-tint-3:#f4ebff;
  --gm-border:#d0d5dd;
  --gm-border-light:#eaecf0;

  /* surfaces */
  --bg:var(--gm-white);
  --bg-dark:var(--gm-dark);

  /* type */
  --font-head:'Montserrat',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-body:'Roboto',system-ui,-apple-system,Segoe UI,sans-serif;

  /* spacing (8pt) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* radii / shadow / layout */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 8px 24px rgba(16,24,40,.08);
  --shadow-lg:0 20px 48px rgba(16,24,40,.10);
  --container:1200px;
  --container-narrow:820px;
  --gutter:clamp(20px,5vw,40px);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--gm-text);
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,svg,video{display:block;max-width:100%;height:auto;}
a{color:var(--gm-blue);text-decoration:none;}
a:hover{text-decoration:underline;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;border:0;background:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6,p,figure{margin:0;}
:focus-visible{outline:2px solid var(--gm-blue);outline-offset:2px;border-radius:2px;}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--gm-heading);font-weight:600;line-height:1.12;letter-spacing:-0.01em;}
h1{font-size:clamp(2.25rem,1.4rem + 3.6vw,4.375rem);}      /* up to 70px */
h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);}        /* up to 40px */
h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.5rem);font-weight:600;}
h4{font-size:1.125rem;font-weight:600;}
p{margin:0;}
strong{font-weight:600;}

/* ---- Skip link + a11y ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--gm-dark);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-sm) 0;}
.skip-link:focus{left:0;text-decoration:none;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- Layout primitives ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container--narrow{max-width:var(--container-narrow);}
.section{padding-block:clamp(48px,7vw,96px);}
.section--dark{background:var(--bg-dark);color:#fff;}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff;}
.section--tint{background:var(--gm-tint-1);}
.center{text-align:center;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px);}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* eyebrow / subhead labels above headings */
.eyebrow{font-family:var(--font-head);font-weight:600;font-size:.9375rem;color:var(--gm-blue);
  margin-bottom:var(--sp-3);}
.eyebrow--purple{color:var(--gm-purple-2);}

/* badge / pill */
.badge{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.8125rem;
  padding:6px 14px;border-radius:var(--r-pill);background:var(--gm-tint-2);color:var(--gm-purple-2);
  margin-bottom:var(--sp-4);}
.badge--primary{background:var(--gm-tint-2);color:var(--gm-blue);}

/* lede paragraph */
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--gm-slate);}
.section--dark .lede{color:#c9d2e3;}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}