/* Studio Grade tokens, Sprout copy.
   Overridden for: direction 9 Playful System · register LOUD · saturated field ground.
   Colour logic: each field hue owns one meaning.
     pink   = Sprout talking (hero, finale, the playground)
     forest = how the plant brain works (steps, species, footer)
     butter = Sprout Plus (paid)
   One ink (plum near-black) on every light field; cream on forest. */

:root{
  /* ---------- Fields (the ground IS the colour) ---------- */
  --pink:        #FF6FB1;   /* hero + finale field */
  --pink-pale:   #FFEAF3;   /* playground + FAQ field */
  --forest:      #0E3A29;   /* how-it-works, species, footer */
  --forest-2:    #154D37;   /* raised surface on forest */
  --butter:      #FFD84A;   /* Sprout Plus field only */
  --cream:       #FFF6EC;   /* stickers, cards, text on forest */

  /* ---------- Ink: one plum near-black, tiers by opacity ---------- */
  --paper:      var(--pink);
  --paper-2:    var(--pink-pale);
  --surface:    var(--cream);
  --ink-rgb:    42 11 29;                    /* #2A0B1D */
  --ink:        rgb(var(--ink-rgb));
  --ink-2:      rgb(var(--ink-rgb) / .8);    /* secondary text: .8 keeps AA on the pink field */
  --ink-3:      rgb(var(--ink-rgb) / .8);    /* no 40% tier: it fails AA on every field here */
  --hairline:   rgb(var(--ink-rgb) / .14);
  --hairline-2: rgb(var(--ink-rgb) / .24);
  --accent:     var(--pink);                 /* the brand hue; on forest it is the highlight colour */
  --accent-ink: var(--ink);
  --focus:      var(--ink);                  /* focus ring = ink (cream on forest) — never pink on pink */

  /* ---------- Type families (2) ---------- */
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-text:    "M PLUS Rounded 1c", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-serif:   var(--font-text);          /* no serif voice on this site */
  --font-mono:    var(--font-text);          /* no mono labels: labels use the display face */

  /* ---------- Type scale (fluid; 390px → 1440px) ---------- */
  --word:     clamp(4.25rem, 1.2rem + 12.6vw, 13rem);    /* poster words: 68 → 208px */
  --display:  clamp(3.75rem, 1rem + 10.4vw, 10.5rem);    /* hero h1: 60 → 168px */
  --h2:       clamp(2.5rem, 1.3rem + 4.4vw, 5.25rem);    /* 40 → 84px */
  --h3:       clamp(1.5rem, 1.25rem + .9vw, 2rem);       /* 24 → 32px */
  --lead:     clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);  /* 19 → 24px */
  --body:     1.0625rem;     /* 17px */
  --ui:       .9375rem;      /* 15px */
  --small:    .875rem;       /* 14px */
  --label:    .8125rem;      /* 13px, sentence case, display face */

  --display-wt: 600;  --display-lh: .88;  --display-ls: -0.035em;
  --word-wt:    600;  --word-lh:    .82;  --word-ls:    -0.04em;
  --h2-wt:      600;  --h2-lh:      .94;  --h2-ls:      -0.03em;
  --h3-wt:      600;  --h3-lh:      1.08; --h3-ls:      -0.015em;
  --label-ls:   .02em;

  /* ---------- Space ---------- */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;  --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: clamp(3rem, 2.4rem + 2.4vw, 4rem);
  --s-8: clamp(4rem, 3rem + 4vw, 6rem);
  --s-9: clamp(5.5rem, 4rem + 5.33vw, 9rem);
  --s-10: clamp(7rem, 5rem + 8vw, 13rem);

  /* ---------- Layout ---------- */
  --container: 1312px;
  --margin: clamp(1.25rem, .4rem + 3.6vw, 4rem);
  --cols: 12;
  --gap: clamp(1rem, .7rem + 1vw, 1.5rem);
  --nav-h: 76px;

  /* ---------- Shape: pill camp for every button; soft 24px cards ---------- */
  --r-btn: 9999px;
  --r-card: 24px;
  --r-media: 24px;
  --btn-h: 56px;  --btn-h-sm: 44px;
  --press: 6px;                 /* toy-plastic button depth */

  /* ---------- Elevation: hard sticker offsets, no blur ---------- */
  --ring: 0 0 0 2.5px var(--ink);
  --sticker: 0 6px 0 rgb(var(--ink-rgb));
  --float: 0 10px 0 rgb(var(--ink-rgb) / .9);

  /* ---------- Motion: springy on small things, critically damped on big ones ---------- */
  --ease:        cubic-bezier(.16, 1, .3, 1);      /* big surfaces: fields, cards, phone */
  --ease-inout:  cubic-bezier(.76, 0, .24, 1);
  --ease-ui:     cubic-bezier(.4, 0, .2, 1);
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1);  /* ≤64px pops */
  /* spring {k:380, c:16}: ~24% overshoot, settles in ~760ms. Characters, words, stickers. */
  --spring: linear(0,.074,.247,.451,.664,.875,1.032,1.145,1.216,1.24,1.231,1.195,1.148,1.097,1.044,1.003,.973,.952,.943,.943,.95,.961,.973,.985,.996,1.005,1.01,1.013,1.014,1.013,1.01,1.007,1.005,1.002,.999,.998,.997,.997,.997,.997,1);
  /* spring {k:220, c:22}: ~3% overshoot. Buttons, chips. */
  --spring-soft: linear(0,.025,.069,.137,.217,.292,.38,.467,.539,.616,.687,.743,.799,.848,.884,.92,.949,.969,.988,1.002,1.013,1.019,1.025,1.027,1.029,1.029,1.028,1.026,1.024,1.022,1.02,1.017,1.015,1.013,1.01,1.009,1.007,1.005,1.004,1.003,1);
  --t-fast: 150ms;  --t-ui: 240ms;  --t-spring: 760ms;  --t-reveal: 850ms;  --t-scene: 1200ms;
  --stagger: 70ms;
}

/* Forest scope: re-declare derived tokens (they resolve where declared). */
[data-theme="forest"]{
  --paper: var(--forest); --paper-2: var(--forest-2); --surface: var(--cream);
  --ink-rgb: 255 246 236;
  --ink:   rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink-rgb) / .82); --ink-3: rgb(var(--ink-rgb) / .82);
  --hairline: rgb(var(--ink-rgb) / .16); --hairline-2: rgb(var(--ink-rgb) / .28);
  --focus: var(--pink);
  --ring: 0 0 0 2.5px var(--cream);
  color-scheme: dark;
  color: var(--ink);
  background-color: var(--paper);
}
[data-theme="pink"],[data-theme="pale"],[data-theme="butter"]{
  --ink-rgb: 42 11 29;
  --ink:   rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink-rgb) / .8); --ink-3: rgb(var(--ink-rgb) / .8);
  --hairline: rgb(var(--ink-rgb) / .14); --hairline-2: rgb(var(--ink-rgb) / .24);
  --focus: var(--ink);
  --ring: 0 0 0 2.5px var(--ink);
  color-scheme: light;
  color: var(--ink);
  background-color: var(--paper);
}
[data-theme="pink"]  {--paper: var(--pink)}
[data-theme="pale"]  {--paper: var(--pink-pale)}
[data-theme="butter"]{--paper: var(--butter)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--body)/1.55 var(--font-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--butter)}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:12px}

/* ---------- Text-style bundles (use only these) ---------- */
.t-word   {font:var(--word-wt) var(--word)/var(--word-lh) var(--font-display);letter-spacing:var(--word-ls);font-variation-settings:"wdth" 100}
.t-display{font:var(--display-wt) var(--display)/var(--display-lh) var(--font-display);letter-spacing:var(--display-ls)}
.t-h2     {font:var(--h2-wt) var(--h2)/var(--h2-lh) var(--font-display);letter-spacing:var(--h2-ls)}
.t-h3     {font:var(--h3-wt) var(--h3)/var(--h3-lh) var(--font-display);letter-spacing:var(--h3-ls)}
.t-lead   {font:400 var(--lead)/1.42 var(--font-text);letter-spacing:-.018em}
.t-body   {font:400 var(--body)/1.55 var(--font-text)}
.t-ui     {font:500 var(--ui)/1.35 var(--font-display);letter-spacing:0}
.t-small  {font:400 var(--small)/1.45 var(--font-text)}
.t-label  {font:500 var(--label)/1.2 var(--font-display);letter-spacing:var(--label-ls)}
.t-num    {font-variant-numeric:tabular-nums lining-nums}
.dim      {color:var(--ink-2)}

/* ---------- Layout ---------- */
.container{width:min(100% - 2 * var(--margin), var(--container));margin-inline:auto}
.grid     {display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
.section  {padding-block:var(--s-9)}

/* ---------- Buttons: pill, toy-plastic press ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:var(--btn-h);padding:1px 28px 0;border-radius:var(--r-btn);
  font:600 1.0625rem/1 var(--font-display);letter-spacing:0;text-decoration:none;cursor:pointer;border:0;
  box-shadow:0 var(--press) 0 var(--btn-depth, rgb(0 0 0 / .45));
  transition:transform var(--t-spring) var(--spring-soft),box-shadow var(--t-spring) var(--spring-soft),background-color var(--t-fast) var(--ease-ui)}
.btn:hover{transform:translateY(-2px);box-shadow:0 calc(var(--press) + 2px) 0 var(--btn-depth, rgb(0 0 0 / .45))}
.btn:active{transform:translateY(calc(var(--press) - 1px));box-shadow:0 1px 0 var(--btn-depth, rgb(0 0 0 / .45));transition-duration:60ms}
.btn--primary{background:var(--ink);color:var(--cream);--btn-depth:#000}
.btn--ghost{background:var(--cream);color:var(--ink);--btn-depth:var(--ink)}
.btn--sm{height:var(--btn-h-sm);padding-inline:20px;font-size:var(--ui);--press:4px}

/* ---------- Eyebrow (no accent dot: labels are plain display-face text) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}

/* ---------- Reveal: pop on a spring (pairs with motion.js) ---------- */
[data-reveal]{opacity:0;transform:translateY(28px) scale(.97);
  transition:opacity 420ms var(--ease-ui),transform var(--t-reveal) var(--ease);
  transition-delay:calc(var(--i, 0) * var(--stagger))}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ---------- Utilities ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--margin);top:-100px;z-index:999}
.skip:focus{top:12px}

/* ---------- Reduced motion (non-negotiable) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}