/* ============================================================
   /assets/site.css — ParaLearn shared design system
   Single source of truth for design tokens, navigation, footer,
   and buttons used on every public page. Values here are copied
   exactly from the homepage's own styling so nothing diverges.
   Used by: product pages, quiz, starter pack, waitlist, /go/
   pages, and all legal pages. index.html keeps its own copy of
   these same rules (already tested, not touched, to avoid any
   regression risk on the flagship page) - this file exists so
   every OTHER page can share identical values instead of
   guessing at their own.
   ============================================================ */

:root{
  /* Keep these in lockstep with index.html's :root -- that file carries its
     own copy of the same tokens so the flagship page can be styled without
     depending on this stylesheet loading first. Change one, change both. */
  --g:#3C7851;--gd:#2F6242;--gl:#edf2e8;--gm:#bfd3b4;--gb:#e1ded6;
  --grn-l:#7FC08E;
  --gp:#0F1A14;--night-2:#17281D;--night-3:#1E3527;
  --t:#16211A;--tm:#5A625B;--tl:#6A716A;--bg:#fff;--ba:#EAE7DE;--r:14px;
  --brass:#BF8F3A;--brass-ink:#8A672A;--brass-tint:#F2E7CF;
  --hero:#17281D;--footer-bg:#17281D;
  --font-heading:'Plus Jakarta Sans';--font-body:'Inter';
  --shadow:0 20px 58px rgba(20,30,22,.14);
  --shadow-sm:0 10px 26px rgba(20,30,22,.09);
  --cream:#F7F5F0;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body),system-ui,sans-serif;background:linear-gradient(180deg,var(--cream) 0%,var(--bg) 340px);color:var(--t);line-height:1.6;margin:0}
.btn:focus-visible,.nb:focus-visible,.nc:focus-visible,.pill:focus-visible{outline:3px solid rgba(67,133,90,.42);outline-offset:3px}
img{max-width:100%;display:block}
a{color:inherit}

.h{font-family:var(--font-heading),system-ui,sans-serif;letter-spacing:-.02em}
.con{max-width:1100px;margin:0 auto;padding:0 20px}
.con-sm{max-width:720px;margin:0 auto;padding:0 20px}
.sec{padding:64px 0}

/* Eyebrow / section title / subtitle - used on legal pages and throughout
   the homepage. The eyebrow is a filled pill: it reads as a distinct label
   sitting above the heading rather than a rule-and-caps line, which is what
   it was briefly changed to. Pill on the site's pale green, in the darker
   green ink so 11px uppercase still clears 4.5:1 (6.3:1 as set).
   .ey-w is the dark-ground variant: a translucent white pill with white
   text (about 10:1 on the deep green bands), used on the hero, the
   newsletter band and anywhere else the ground is dark. */
/* inline-flex rather than inline-block so the few eyebrows that carry an
   .ico glyph (the Coming Soon one, for instance) sit centred in the pill. */
.ey{display:inline-flex;align-items:center;gap:7px;background:var(--gl);color:var(--gd);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:14px}
.ey-w{background:rgba(255,255,255,.16);color:#fff}
/* Inline line-icons, replacing the emoji that used to sit in chips, pills
   and feature tiles. Sized in em so they track the parent's font-size, and
   stroke-only so they inherit its colour on light or dark grounds.
   index.html carries its own identical copy for the same reason as :root. */
.ico{width:1.05em;height:1.05em;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}

.st{font-size:clamp(24px,4vw,36px);font-weight:800;line-height:1.15;margin-bottom:12px}
.ss{color:var(--tm);font-size:15px;line-height:1.75;max-width:500px}

/* ─── PAGE HERO ───
   The deep band that opens the homepage, shared so every interior page
   starts the same way instead of dropping straight into light content.
   Same gradient as index.html's .hero; keep the two in step.
   Inside it the eyebrow switches to the bright brass, which only clears
   contrast on dark grounds (the darker --brass-ink is for light ones). */
.page-hero{
  background:
    radial-gradient(760px 340px at 82% -4%, rgba(60,120,81,.28), transparent 62%),
    linear-gradient(180deg, var(--gp) 0%, var(--night-2) 100%);
  color:#fff;padding:52px 0 54px;
}
.page-hero .st{color:#fff}
.page-hero .ss{color:rgba(255,255,255,.74);max-width:54ch}
/* Inside the dark hero band the pill switches to the light-on-dark variant,
   same treatment as .ey-w, so it doesn't sit as a pale block on deep green. */
.page-hero .ey{background:rgba(255,255,255,.16);color:#fff}
.page-hero a{color:var(--grn-l)}
/* Breadcrumbs sit in this band on article and product pages. */
.page-hero .crumbs{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:16px}
.page-hero .crumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.page-hero .crumbs a:hover{color:#fff}
/* Slim variant for product pages: they open straight into the buy grid,
   where price and CTA need to stay in the light. A breadcrumb-height band
   gives the same top-of-page continuity without pushing that below the fold. */
.page-hero.slim{padding:14px 0}
.page-hero.slim .crumbs{margin-bottom:0}

/* ─── NAV ─── */
nav{backdrop-filter:blur(16px);background:rgba(252,251,247,.94);position:sticky;top:0;z-index:100;border-bottom:2px solid var(--gb);box-shadow:0 6px 24px rgba(20,30,22,.05)}
.ni{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px;max-width:1140px;margin:0 auto}
.nl{display:flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none;flex-shrink:0}
.lp{width:34px;height:40px;background:var(--g);border-radius:7px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(67,133,90,.32)}
.ln{font-family:var(--font-heading),sans-serif;font-weight:800;font-size:16px;letter-spacing:.05em;color:var(--t);line-height:1.2}
.ls{font-size:9px;font-weight:600;letter-spacing:.07em;color:var(--g);text-transform:uppercase}
.nls{display:flex;gap:20px;align-items:center}
.nb{background:none;border:none;font-family:inherit;font-size:14px;font-weight:500;color:var(--t);cursor:pointer;padding:4px;transition:color .15s;text-decoration:none}
.nb:hover,.nb.active{color:var(--g)}.nb.active{font-weight:700}
.nc{background:var(--g);color:#fff;border:none;padding:9px 18px;border-radius:9px;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;transition:background .15s;white-space:nowrap;text-decoration:none;display:inline-block}
.nc:hover{background:var(--gd)}
.cart-btn{position:relative;background:none;border:none;font-size:20px;cursor:pointer;padding:6px 8px;color:var(--t);display:flex;align-items:center;text-decoration:none}
.cart-badge{position:absolute;top:-2px;right:-2px;background:var(--g);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.mm .cart-badge{position:static;margin-left:6px;display:inline-flex}

/* Mobile nav */
.bg{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--t);padding:4px}
.mm{display:none;flex-direction:column;gap:0;padding:8px 20px 16px;border-top:1px solid var(--gb);background:#fff}
.mm.open{display:flex}
.mm .nb{font-size:16px;padding:12px 4px;border-bottom:1px solid var(--gb);text-align:left;width:100%}
@media(max-width:900px){
  .nls > .nb, .nls > .nc{display:none}
  .bg{display:block}
}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:10px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none}
.blg{padding:14px 28px;font-size:16px}.bmd{padding:11px 22px;font-size:15px}.bsm{padding:10px 18px;font-size:14px}
.bg2{background:var(--g);color:#fff}.bg2:hover{background:var(--gd);transform:translateY(-1px);box-shadow:0 4px 14px rgba(67,133,90,.32)}
.bo{background:transparent;color:var(--g);border:2px solid var(--g)}.bo:hover{background:var(--g);color:#fff}
.bgh{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.5)}.bgh:hover{background:rgba(255,255,255,.25)}
.bf{background:var(--gl);color:var(--gd);border:2px solid var(--gm)}.bf:hover{background:#e3ecdc}
.bso{background:#e8e8e8;color:#999;cursor:not-allowed}.bfu{width:100%;display:flex}

/* ─── FOOTER ─── */
footer{background:var(--footer-bg);padding:44px 20px 20px;border-top:1px solid rgba(67,133,90,.12)}
.fgr{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.ftit{color:#fff;font-weight:700;margin-bottom:14px;font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.fl{display:block;color:rgba(255,255,255,.88);font-size:13px;margin-bottom:9px;cursor:pointer;text-decoration:none;transition:color .15s}
.fl:hover{color:#fff}
.fso{display:flex;gap:10px;margin-top:14px}
.fsc{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none}
.fbot{max-width:1100px;margin:0 auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.6);font-size:12px}
@media(max-width:760px){.fgr{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.fgr{grid-template-columns:1fr}}

/* Legal page content container */
.legal-body{color:var(--tm);font-size:15px;line-height:1.8}
.legal-body h3{font-family:var(--font-heading),sans-serif;font-size:17px;font-weight:800;color:var(--t);margin:24px 0 10px}
.legal-body p{margin-bottom:12px}
.legal-body a{color:var(--g);font-weight:600}

/* Skip-to-content link (keyboard/screen-reader users) -- shared here so it
   works identically on every page that includes site-header.html, not just
   index.html (which previously had its own copy of both the link and this
   rule, so every other page silently had no skip link at all). */
.skip-link{position:absolute;left:8px;top:-48px;background:var(--gp);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;font-size:14px;z-index:1001;transition:top .15s;text-decoration:none}
.skip-link:focus{top:8px}

/* iOS Safari auto-zooms the whole page on focus for any input under 16px.
   The footer newsletter input is inline-styled at 13px (assets/site-footer.html,
   present on every page), so only !important can win over that inline value. */
@media(max-width:768px){#newsletter-email{font-size:16px !important}}