/* GrowthMastery design tokens (Joe, Nov 5 2026: "the best practices of design" = /viral-traffic-system + the homepage).
 *
 * Every value below is copied from the real CSS of the two reference pages, never invented. Each comment names the
 * selector it came from:
 *   VTS  = state/offer-ladder/site-preview/viral-traffic-system.html (first <style> block, + the embed-application block)
 *   HOME = state/summit-v3/home-build/home.src.html (its own <style> rules; it also loads ref.css, a copy of the VTS block)
 *   NAV  = state/offer-ladder/site-preview/assets/nav-unified.css (the canonical light header + footer)
 *
 * The short names (--bg, --ink, --green, --gold ...) are the names the reference CSS already uses, so any rule copied
 * from those pages works unchanged on top of this file. The --gm-* names cover hex values the references hard-code.
 */
:root{
  /* ── Surfaces (light) ───────────────────────────────────────────── */
  --bg:#F7F6F1;            /* VTS :root --bg; body background; .hero.cl first value */
  --bg2:#EFEEE8;           /* VTS :root --bg2 (earlier .sys/.proof band; later overridden, see --gm-* below) */
  --panel:#FFFFFF;         /* VTS :root --panel; .tier, .pcard, .formcard */
  --gm-ivory:#FBF8F1;      /* HOME .hero.hq background; VTS .hero.cl (final override) and .pricing radial end */
  --gm-cream:#FBF7EE;      /* VTS .incl, .obj (FAQ) and .d30 bands */
  --gm-sand:#F4EFE4;       /* VTS .proof (final override), HOME .answer .go chip */
  --gm-parchment:#F3F1EA;  /* NAV footer.gmf; VTS .apply-acc fallback colour; nav menu hover */
  --gm-pricing-glow:#F4EEDF; /* VTS .pricing radial-gradient centre */
  --gm-tier-warm:#FFFCF5;  /* VTS .tier.main gradient end */

  /* ── Lines ──────────────────────────────────────────────────────── */
  --line:#E3E5DF;          /* VTS :root --line; card borders */
  --line2:#D3D8D0;         /* VTS :root --line2; FAQ rules, ghost button */
  --gm-line-warm:#E9E1CF;  /* VTS .rows li border (checklist rows) */
  --gm-line-quiz:#E4DFD2;  /* HOME .answer border */

  /* ── Ink ────────────────────────────────────────────────────────── */
  --ink:#10201A;           /* VTS :root --ink; body text, h1-h3 */
  --ink2:#4F5E56;          /* VTS :root --ink2; .lead, FAQ answers */
  --ink3:#7E8A83;          /* VTS :root --ink3; .muted, .rows .q, .assure */
  --gm-ink-hero:#0F1E17;   /* HOME .hero.hq h1; VTS .hero.cl h1, .hchecks li */
  --gm-ink-body:#33443B;   /* HOME .hero.hq .lead; VTS .hero.cl .lead; NAV .nitem */
  --gm-ink-soft:#55645C;   /* VTS .hero.cl .assure */
  --gm-ink-quiet:#5E6E66;  /* NAV .menu a small, .gmf-brand p */

  /* ── Greens ─────────────────────────────────────────────────────── */
  --green:#0C2B1E;         /* VTS :root --green; .btn-green fill, .closing/.promiseband/.case bands */
  --green2:#143A29;        /* VTS :root --green2; .btn-green:hover */
  --green3:#07190F;        /* VTS :root --green3 */
  --gm-forest:#0E3B2A;     /* NAV light header: brand word, .cta fill, menu titles, footer logo */
  --gm-forest-deep:#0A2419;/* VTS .case gradient end */
  --gm-forest-night:#0A2618;/* VTS .love fallback */
  --gm-leaf:#1F6A45;       /* HOME .hero.hq h1 .gold + glow stops; VTS .hero.cl h1 .gold; NAV .cta:hover, footer hover */
  --emerald:#1F7A4D;       /* VTS :root --emerald; focus rings, .hchecks/.rows check fills */
  --emerald-tint:#E7F2EC;  /* VTS :root --emerald-tint; .rows check chip */

  /* ── Golds ──────────────────────────────────────────────────────── */
  --gold:#D8A13B;          /* VTS :root --gold; kicker hairlines, .tier.main border, chip gradient middle */
  --gold-soft:#F0C36A;     /* VTS :root --gold-soft; gold on dark bands (.closing .kicker, .pull cite) */
  --gold-text:#8A6216;     /* VTS :root --gold-text; .kicker text, .gmf-cols b, FAQ chevron */
  --gold-ink:#1B1405;      /* VTS :root --gold-ink; text on the gold pill (.dark .btn-green) */
  --amber-tint:#FAF0DC;    /* VTS :root --amber-tint; .tier.main .tag, .save */
  --gm-gold-deep:#B98228;  /* NAV brand "Mastery"; HOME glow stops; chip gradient end */
  --gm-gold-hero-kicker:#7A5512; /* HOME .hero.hq .kicker; VTS .hero.cl .kicker */
  --gm-gold-light:#F6D58E; /* VTS .btn-green chip gradient start */
  --gm-gold-bright:#E2AE4E;/* HOME .hero.hq h1 .glow gradient peak */
  --gm-warm-on-dark:#EDE6D2; /* VTS .closing/.promiseband/.case body text colour */

  --err:#A63A29;           /* VTS :root --err; form errors */

  /* ── Gradients ──────────────────────────────────────────────────── */
  /* THE hero headline gradient: HOME .hero.hq h1 .glow (green, gold sheen, green), animated by @keyframes hqshimmer */
  --gm-hero-glow:linear-gradient(100deg,#0F3B26 0%,#1F6A45 28%,#B98228 46%,#E2AE4E 50%,#B98228 54%,#1F6A45 72%,#0F3B26 100%);
  --gm-hero-glow-size:220% 100%;
  --gm-hero-glow-shadow:drop-shadow(0 0 9px rgba(240,195,106,.3));        /* HOME .hero.hq h1 .glow filter */
  --gm-hero-glow-shadow-still:drop-shadow(0 0 8px rgba(240,195,106,.35)); /* HOME reduced-motion fallback */
  /* the static gold word on light bands: VTS .gold */
  --gm-gold-word:linear-gradient(100deg,#7A5512 0%,#A8761E 55%,#8A6216 100%);
  /* hero background glows: HOME .hero.hq::before / ::after, VTS .hero.cl::before */
  --gm-hero-wash-green:radial-gradient(closest-side,rgba(31,122,77,.09),transparent 70%);
  --gm-hero-wash-gold:radial-gradient(closest-side,rgba(240,195,106,.13),transparent 70%);
  /* the button's gold arrow chip: VTS .btn-green --chip-bg */
  --gm-chip-gold:linear-gradient(135deg,#F6D58E 0%,#D8A13B 55%,#B98228 100%);
  /* the gold pill on dark bands: VTS .dark .btn-green background (+ :hover) */
  --gm-pill-gold:linear-gradient(135deg,#F6D58E 0%,#E3B04E 45%,#D8A13B 100%);
  --gm-pill-gold-hover:linear-gradient(135deg,#F8DDA0 0%,#E8B85A 45%,#DCA642 100%);
  /* dark bands: VTS .case background, and the gold glow on .closing::before / .case::before */
  --gm-band-dark:linear-gradient(180deg,#0C2B1E 0%,#0A2419 100%);
  --gm-band-dark-glow:radial-gradient(closest-side,rgba(240,195,106,.16),transparent);
  /* pricing band: VTS .pricing */
  --gm-band-pricing:radial-gradient(120% 70% at 50% 0%,#F4EEDF 0%,#FBF8F1 60%);
  /* kicker hairline: VTS .kicker::before */
  --gm-kicker-rule:linear-gradient(90deg,transparent,#D8A13B);

  /* ── Type ───────────────────────────────────────────────────────── */
  --display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; /* VTS :root --display: headings, kicker, buttons */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;       /* VTS :root --font: body */
  --gm-hand:'Caveat',cursive;  /* VTS .approve .hand, .case-reel figcaption: handwritten founder notes */
  /* Google Fonts URL used by both pages:
     https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600&family=Caveat:wght@500;600&display=swap */
  --gm-fs-hero:clamp(40px,6.4vw,76px);      /* HOME .hero.hq h1 (line-height 1.02, letter-spacing -.03em) */
  --gm-fs-hero-split:clamp(34px,3.9vw,56px);/* VTS .hero.cl h1 (two-column product hero), 30px under 480px */
  --gm-fs-h2:clamp(34px,4.6vw,60px);        /* VTS h2 (line-height 1.06, weight 600, light line weight 300) */
  --gm-fs-h3:clamp(20px,2vw,24px);          /* VTS h3 (line-height 1.25) */
  --gm-fs-lead:clamp(18px,1.6vw,21px);      /* VTS .lead (line-height 1.6) */
  --gm-fs-lead-hero:clamp(17px,1.4vw,19px); /* HOME .hero.hq .lead, VTS .hero.cl .lead */
  --gm-fs-body:17px;                        /* VTS body (line-height 1.62) */
  --gm-fs-kicker:12px;                      /* VTS .kicker (weight 600, letter-spacing .24em, uppercase) */
  --gm-fs-button:13px;                      /* VTS .btn (weight 600, letter-spacing .14em, uppercase) */
  --gm-fs-small:14.5px;                     /* NAV .gmf links, VTS .closing .after */
  --gm-tracking-display:-.02em;             /* VTS h1,h2,h3 */
  --gm-tracking-hero:-.03em;                /* HOME .hero.hq h1 */
  --gm-weight-light:300;                    /* the light first line of every stacked headline (.lt) */
  --gm-weight-bold:700;                     /* the hero's bold line (HOME .glow) */

  /* ── Layout and spacing ─────────────────────────────────────────── */
  --wrap:1200px;                            /* VTS :root --wrap */
  --gutter:clamp(16px,4vw,40px);            /* VTS :root --gutter */
  --gm-section-pad:clamp(84px,11vw,150px);  /* VTS section padding (top and bottom) */
  --gm-band-pad:clamp(76px,9vw,120px);      /* VTS .closing padding */
  --gm-head-gap:clamp(36px,4.6vw,60px);     /* VTS .sec-head margin-bottom */
  --gm-hero-pad-top:clamp(30px,3.6vw,52px); /* HOME .hero.hq padding-top */
  --gm-hero-pad-bottom:clamp(64px,7vw,96px);/* HOME .hero.hq padding-bottom */
  --gm-nav-h:64px;                          /* NAV .nv .in height */
  --gm-head-max:900px;                      /* VTS .sec-head max-width */
  --gm-lead-max:640px;                      /* VTS .sec-head .lead max-width */
  --gm-faq-max:860px;                       /* VTS .faq max-width */
  --gm-form-max:680px;                      /* VTS .formcard max-width */

  /* ── Radii ──────────────────────────────────────────────────────── */
  --r:24px;                                 /* VTS :root --r: .pcard */
  --gm-r-tier:28px;                         /* VTS .tier, .formcard */
  --gm-r-card:20px;                         /* HOME .answer */
  --gm-r-chip:999px;                        /* VTS .btn pill, tags */
  --gm-r-device:52px;                       /* VTS .device phone frame (screen 40px, 34px/27px under 860px) */
  --gm-r-device-screen:40px;
  --gm-r-menu:10px;                         /* NAV .menu */
  --gm-r-control:6px;                       /* NAV .login */

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow:0 30px 80px -40px rgba(12,43,30,.45);     /* VTS :root --shadow: .tier.main */
  --shadow-sm:0 14px 40px -24px rgba(12,43,30,.35);  /* VTS :root --shadow-sm */
  --gm-shadow-card:0 14px 40px -28px rgba(12,43,30,.35);   /* VTS .pcard */
  --gm-shadow-tier:0 22px 46px -38px rgba(12,43,30,.45);   /* VTS .tier */
  --gm-shadow-form:0 40px 90px -40px rgba(12,43,30,.5);    /* VTS .formcard */
  --gm-shadow-quiz:0 14px 34px -30px rgba(12,43,30,.5);    /* HOME .answer (hover: 0 22px 44px -30px rgba(12,43,30,.55)) */
  --gm-shadow-device:0 50px 90px -40px rgba(12,43,30,.6),0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 2px #2A302C; /* VTS .device */
  --gm-shadow-button:inset 0 0 0 1px rgba(240,195,106,.45),0 14px 34px -16px rgba(12,43,30,.7);   /* VTS .btn-green */
  --gm-shadow-nav:0 10px 30px -24px rgba(12,43,30,.35);    /* NAV body .nv */

  /* ── Motion ─────────────────────────────────────────────────────── */
  --gm-ease:cubic-bezier(.2,.7,.2,1);       /* VTS .btn, .reveal, HOME .answer: the one house easing curve */
  --gm-dur-fast:.2s;                        /* NAV hover colours */
  --gm-dur:.3s;                             /* VTS .btn transform, FAQ chevron */
  --gm-dur-chip:.35s;                       /* VTS .btn::after arrow-chip slide */
  --gm-dur-screen:.55s;                     /* VTS .screen>* phone screen swap (ease) */
  --gm-dur-reveal:.9s;                      /* VTS .reveal scroll-in */
  --gm-dur-shimmer:9s;                      /* HOME hqshimmer: the hero headline sheen, linear, infinite */
  /* Every motion stops under prefers-reduced-motion (VTS + HOME both carry that media query). */
}