/* The Magic Sponge, marketing site. Light mode only (brand rule).
   Tokens lifted from the design handoff (tokens.css / prototype inline vars). */
:root{
  --paper:#f5f7ec; --surface:#fff; --surface-2:#eef1e2; --ink:#17251a; --ink-soft:#586558; --line:#e3e7d5;
  --sponge:#ffc933; --sponge-deep:#e9a90c; --grass:#1f9d55; --grass-deep:#157a41; --magic:#ff4f9e;
  --club:#2f83c4; --parent:#ff6a45; --on-ink:#fff; --sticker:#17251a;
  --footer-line:rgba(255,255,255,.22); --footer-accent:#ffd24d;
  --shadow-sm:0 1px 2px rgba(23,37,26,.08),0 6px 16px rgba(23,37,26,.08);
  --shadow-lg:0 2px 4px rgba(23,37,26,.08),0 18px 44px rgba(23,37,26,.12);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--grass-deep)} a:hover{color:var(--magic)}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--grass);outline-offset:2px}

/* sticker-press feedback (was style-active in the prototype) */
.press:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--sticker)!important}
/* tilt cards straighten on hover; flat on touch */
.tilt{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover){ .tilt:hover{transform:rotate(0deg) translateY(-2px)!important} }

@keyframes ms-pop{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.2) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}

/* bento grids (from the design head) */
[data-bento]{display:grid;gap:14px}
[data-bento="club"]{grid-template-columns:repeat(3,1fr)}
[data-bento="coach"]{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto)}
[data-bento="parents"]{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(120px,auto)}
@media (max-width:1000px){
  [data-bento="parents"]{grid-template-columns:repeat(2,1fr)}[data-bento="parents"]>*{grid-column:span 1!important;grid-row:auto!important}
  [data-bento="coach"]{grid-template-columns:repeat(2,1fr)}[data-bento="coach"]>*{grid-row:auto!important}
  [data-bento="club"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  [data-bento]{grid-template-columns:1fr!important;grid-auto-rows:auto!important}
  [data-bento]>*{grid-column:auto!important;grid-row:auto!important;min-height:150px}
}

/* audience tab panels (home) */
.tabpanel{display:none;flex-direction:column;gap:24px}
.tabpanel.active{display:flex}

/* Hero, the magic sponge squeezes out healing water (the cure) */
.ms-sponge{transform-origin:50% 72%;animation:ms-squeeze 2.6s ease-in-out infinite;will-change:transform}
.ms-drop{position:absolute;top:72%;opacity:0;pointer-events:none;animation:ms-drip 2.6s ease-in infinite;will-change:transform,opacity}
@keyframes ms-squeeze{0%,56%,100%{transform:scale(1,1)}14%{transform:scale(1.05,.9)}30%{transform:scale(.99,1.02)}}
@keyframes ms-drip{0%{transform:translateY(-4px) scale(.2);opacity:0}18%{transform:translateY(0) scale(1);opacity:.95}48%{transform:translateY(22px) scale(1);opacity:.85}100%{transform:translateY(70px) scale(.55);opacity:0}}

/* Feature micro-animations, one signature element per persona */
.ms-watch{animation:ms-glow 2.2s ease-in-out infinite}          /* club: credential being auto-chased */
.ms-live{display:inline-block;animation:ms-blink 1.3s ease-in-out infinite}  /* coach: live matchday */
.ms-remind{display:inline-block;transform-origin:left center;animation:ms-remind 2.4s ease-in-out infinite}  /* parents: kick-off reminder */
@keyframes ms-glow{0%,100%{box-shadow:0 0 0 0 rgba(245,166,0,0)}50%{box-shadow:0 0 0 4px rgba(245,166,0,.4)}}
@keyframes ms-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ms-remind{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* Mobile header: wordmark + Book a demo share the top row; nav wraps below */
@media (max-width:640px){.ms-hnav{order:3!important;flex:1 1 100%!important;justify-content:flex-start!important}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ── Legal / policy pages ─────────────────────────────────────────────────── */
.legal-top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.legal-top .in{max-width:820px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.legal-brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font:800 18px 'Baloo 2';letter-spacing:-.02em}
.legal-back{font:600 13px Figtree;color:var(--grass-deep);text-decoration:none;white-space:nowrap}
.legal-wrap{max-width:820px;margin:0 auto;padding:clamp(26px,5vw,52px) 20px 10px}
.legal-wrap h1{font:800 clamp(28px,6vw,40px)/1.05 'Baloo 2';letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.legal-wrap .updated{font:600 13px Figtree;color:var(--ink-soft);margin:0 0 24px}
.legal-wrap .lead{font:400 16.5px/1.6 Figtree;color:var(--ink-soft);margin:0 0 8px}
.legal-wrap h2{font:800 clamp(19px,3.4vw,23px) 'Baloo 2';letter-spacing:-.01em;margin:34px 0 10px;color:var(--ink)}
.legal-wrap h3{font:700 15px Figtree;margin:18px 0 4px;color:var(--ink)}
.legal-wrap p,.legal-wrap li{font:400 15.5px/1.68 Figtree;color:#2c3a2f}
.legal-wrap ul{padding-left:22px;margin:8px 0}
.legal-wrap li{margin:5px 0}
.legal-wrap a{color:var(--grass-deep)}
.legal-wrap table{width:100%;border-collapse:collapse;margin:12px 0}
.legal-wrap th,.legal-wrap td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;font:400 14px/1.5 Figtree;color:#2c3a2f}
.legal-wrap th{background:var(--surface-2);font-weight:700;color:var(--ink)}
.legal-todo{background:#fff2b8;color:#7a5a00;padding:1px 6px;border-radius:5px;font-weight:600}
.legal-foot{background:var(--ink);color:var(--on-ink);margin-top:44px}
.legal-foot .in{max-width:820px;margin:0 auto;padding:26px 20px;display:flex;flex-direction:column;gap:12px}
.legal-foot .nav{display:flex;gap:8px 16px;flex-wrap:wrap;font:500 13px Figtree}
.legal-foot .nav a{color:inherit;text-decoration:none;opacity:.85}
.legal-foot .copy{font:500 12px Figtree;opacity:.65}