/* ===== Fonts (files live in the /fonts folder) ===== */
@font-face{font-family:'Grandstander';font-weight:100 900;font-display:swap;src:url(../fonts/grandstander.woff2) format('woff2');}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(../fonts/atkinson-400.woff2) format('woff2');}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(../fonts/atkinson-700.woff2) format('woff2');}
@font-face{font-family:'Caveat Brush';font-weight:400;font-display:swap;src:url(../fonts/caveat-brush.woff2) format('woff2');}

/* ===== Photo gallery (only shows when you add photos in js/content.js) ===== */
.photos{padding-top:clamp(20px,4vw,60px);}
.photos h2{font-size:clamp(2rem,4.4vw,3.4rem);}
.polaroids{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(22px,3vw,40px);margin-top:clamp(28px,4vw,48px);}
.polaroid{margin:0;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:18px 24px 18px 26px / 24px 18px 26px 18px;padding:12px 12px 16px;box-shadow:0 8px 0 var(--navy);}
.polaroid:nth-child(3n+1){rotate:-1.6deg;} .polaroid:nth-child(3n+2){rotate:1.2deg;} .polaroid:nth-child(3n){rotate:-.6deg;}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:#dcebff;}
.polaroid figcaption{font-family:var(--f-hand);font-size:1.5rem;line-height:1.15;margin-top:12px;text-align:center;}

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  /* fixed brand colors (same in light and dark) */
  --cobalt:#1F58A6; --cobalt-d:#154283; --navy:#0C2544;
  --sun:#FFC93C; --sun-d:#F2A900; --blush:#FFB5C0; --coral:#FF6A57;
  --mint:#2FC9B4; --mint-d:#1A9C8B; --red:#E5384B; --white:#FFFFFF;

  /* theme tokens */
  --bg:#F7FBFF; --bg2:#E4F1FF; --card:#FFFFFF; --ink:#0C2544; --muted:#46628A;
  --edge:#0C2544; --dot:#C9DDF3; --nav-bg:rgba(255,255,255,.94);
  --accent-text:#1F58A6; --focus:#B26A00; --sun-soft:#FFF1BF; --tint:#EAF4FF;

  --f-display:'Grandstander','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Atkinson Hyperlegible','Trebuchet MS',system-ui,sans-serif;
  --f-hand:'Caveat Brush','Bradley Hand','Comic Sans MS',cursive;

  --ra:26px 34px 28px 38px / 34px 26px 38px 28px;
  --rb:34px 24px 38px 26px / 26px 38px 24px 34px;
  --rc:20px 28px 22px 30px / 28px 20px 30px 22px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1A31; --bg2:#0F2440; --card:#14294A; --ink:#EAF4FF; --muted:#AFC6E3;
    --edge:#7DB2F0; --dot:#1D3A61; --nav-bg:rgba(12,37,68,.92); --accent-text:#8DBDF5;
    --focus:#FFD24D; --sun-soft:#4A3C08; --tint:#12294A;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1A31; --bg2:#0F2440; --card:#14294A; --ink:#EAF4FF; --muted:#AFC6E3;
  --edge:#7DB2F0; --dot:#1D3A61; --nav-bg:rgba(12,37,68,.92); --accent-text:#8DBDF5;
  --focus:#FFD24D; --sun-soft:#4A3C08; --tint:#12294A;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.05;letter-spacing:-.015em;text-wrap:balance;}
h2{font-weight:900;} h3{font-weight:800;}
p{margin:0;}
a{color:inherit;}
button{font:inherit;color:inherit;cursor:pointer;}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:8px;}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:clamp(20px,5vw,56px);}
[hidden]{display:none !important;}
.mc-wrap{display:block;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sr:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;background:var(--card);color:var(--ink);padding:.6rem 1rem;border:3px solid var(--edge);border-radius:12px;z-index:200;}
.hand{font-family:var(--f-hand);font-weight:400;letter-spacing:.01em;}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-display);font-weight:800;font-size:1.05rem;line-height:1;
  padding:.95rem 1.5rem;border:3px solid var(--navy);border-radius:20px 24px 20px 26px / 24px 20px 26px 20px;
  text-decoration:none;background:var(--card);color:var(--navy);
  box-shadow:0 5px 0 var(--navy);transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--navy);}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--navy);}
.btn-sun{background:var(--sun);}
.btn-ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.28);}
.btn-ghost:hover{box-shadow:0 7px 0 rgba(0,0,0,.28);}
.btn-lg{font-size:1.15rem;padding:1.05rem 1.7rem;}

/* ================= mascot engine ================= */
.mc{position:relative;display:block;width:100%;--lx:0px;--ly:0px;--tilt:0deg;rotate:var(--tilt);transition:rotate .28s ease-out;transform-origin:50% 90%;}
.mc-l{position:absolute;opacity:0;pointer-events:none;user-select:none;-webkit-user-drag:none;transition:translate .22s ease-out;}
.mc-l.on{opacity:1;}
.mc-l[data-g="o"]{z-index:0;}
.mc-l[data-g="body"]{z-index:1;translate:calc(var(--lx)*-.12) calc(var(--ly)*-.12);}
.mc-l[data-g="eyes"]{z-index:2;translate:calc(var(--lx)*1) calc(var(--ly)*1);}
.mc-l[data-g="mouth"]{z-index:2;translate:calc(var(--lx)*.7) calc(var(--ly)*.7);}
.mc-l[data-g="fx"]{z-index:3;}
.mc-l[data-k="stars"].on{animation:twinkle 2.4s ease-in-out infinite;transform-origin:45% 60%;}
.mc-l[data-k="exclaim"].on{animation:alertpop .55s cubic-bezier(.3,1.6,.5,1);transform-origin:15% 92%;}
.mc.pop{animation:mcpop .42s ease-out;}
@keyframes mcpop{0%{transform:scale(.9,1.06)}50%{transform:scale(1.06,.95)}100%{transform:scale(1)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.09) rotate(6deg)}}
@keyframes alertpop{0%{transform:scale(.2) rotate(-18deg)}60%{transform:scale(1.18) rotate(7deg)}100%{transform:scale(1) rotate(0)}}
.mc-float{display:block;transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-1.8%) scale(.985,1.02)}}
.mc-float.dance{animation:dance .7s ease-in-out infinite;}
@keyframes dance{0%,100%{transform:rotate(-3.5deg) translateY(0)}25%{transform:rotate(3.5deg) translateY(-4%) scale(.98,1.03)}50%{transform:rotate(-3.5deg) translateY(0)}75%{transform:rotate(3.5deg) translateY(-4%) scale(.98,1.03)}}
.tooth-btn{background:none;border:0;padding:0;display:block;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent;}
.tooth-btn.hop{animation:hop .75s cubic-bezier(.3,.7,.4,1);}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}16%{transform:translateY(0) scale(1.1,.88)}45%{transform:translateY(-13%) scale(.94,1.08)}72%{transform:translateY(0) scale(1.08,.9)}88%{transform:scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
.burst{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6;}
.spark{position:absolute;width:22px;height:22px;left:0;top:0;pointer-events:none;}
.spark svg{width:100%;height:100%;display:block;}

/* speech bubble */
.bubble{
  position:relative;background:#fff;color:var(--navy);border:3px solid var(--navy);
  border-radius:24px 30px 26px 32px / 30px 24px 32px 26px;box-shadow:0 5px 0 var(--navy);
  padding:.75rem 1.15rem;font-family:var(--f-display);font-weight:700;font-size:1.12rem;line-height:1.25;
}
.bubble::after{
  content:"";position:absolute;width:20px;height:20px;background:#fff;
  border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);
  bottom:-12px;left:56%;transform:rotate(45deg);
}
.bubble.swap{animation:bubblein .32s cubic-bezier(.3,1.5,.5,1);}
@keyframes bubblein{from{transform:translateY(8px) scale(.94);opacity:.3}to{transform:none;opacity:1}}

/* ================= nav ================= */
.nav{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:60;padding-inline:clamp(12px,3vw,32px);pointer-events:none;}
.nav-pill{
  pointer-events:auto;max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);
  padding:7px 8px 7px 16px;background:var(--nav-bg);border:3px solid var(--edge);border-radius:999px;
  box-shadow:0 5px 0 var(--edge);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-display);font-weight:900;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink);margin-right:auto;}
.brand .mc-wrap{width:36px;display:block;margin:-4px 0 -8px;}
.nav-links{display:flex;gap:clamp(10px,2vw,26px);margin-right:8px;}
.nav-links a{text-decoration:none;font-weight:700;font-size:1rem;color:var(--ink);padding:6px 2px;border-bottom:3px solid transparent;}
.nav-links a:hover{border-bottom-color:var(--sun);}
.lang{display:inline-flex;border:3px solid var(--edge);border-radius:999px;padding:2px;gap:2px;background:var(--card);}
.lang button{border:0;background:transparent;font-family:var(--f-display);font-weight:800;font-size:.9rem;padding:.3rem .7rem;border-radius:999px;color:var(--ink);line-height:1.2;}
.lang button[aria-pressed="true"]{background:var(--cobalt);color:#fff;}
.nav .btn{padding:.6rem 1.1rem;font-size:.98rem;border-radius:999px;box-shadow:0 3px 0 var(--navy);}
@media (max-width:860px){ .nav-links{display:none;} }
@media (max-width:420px){ .brand .wordmark{display:none;} .nav .btn{padding:.55rem .9rem;} }

/* ================= hero ================= */
.hero{position:relative;background:var(--cobalt);color:#fff;overflow:hidden;padding-top:calc(env(safe-area-inset-top,0px) + 112px);padding-bottom:clamp(110px,13vw,170px);isolation:isolate;}
.hero::before{ /* paper grain */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px);align-items:center;position:relative;}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.9rem);font-weight:900;line-height:.96;letter-spacing:-.025em;color:#fff;}
.hero .lead{margin-top:1.5rem;font-size:clamp(1.15rem,2vw,1.4rem);max-width:30em;color:#DCEBFF;}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:2.2rem;}
.dd{position:absolute;pointer-events:none;z-index:-1;}
.dd svg{display:block;width:100%;height:100%;fill:currentColor;}
.dd.ln svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}

.hero-stage{position:relative;width:min(540px,100%);justify-self:center;aspect-ratio:1/1.08;display:flex;align-items:flex-end;justify-content:center;}
.rays{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,201,60,.26) 0 7deg,transparent 7deg 18deg);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 62%);mask-image:radial-gradient(circle,#000 10%,transparent 62%);
  animation:spin 120s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.disc{position:absolute;left:47%;top:53%;width:84%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFE79B,#FFC93C 55%,#F5AE0A);border:4px solid var(--navy);box-shadow:0 8px 0 rgba(12,37,68,.35);}
.disc::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:3px dashed rgba(255,255,255,.55);}
.hero-tooth{position:relative;z-index:3;width:82%;margin-bottom:1%;}
.hero-stage .bubble{position:absolute;z-index:5;left:-2%;top:2%;max-width:14.5em;}
.hero-stage .bubble::after{left:auto;right:16%;}
.hero-note{position:absolute;z-index:5;left:2%;bottom:-3.2rem;display:flex;align-items:flex-end;gap:8px;color:var(--sun);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;transform:rotate(-3deg);white-space:nowrap;}
.hero-note svg{width:54px;height:54px;flex:none;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;}
.tap{position:absolute;z-index:5;right:0;bottom:2%;background:var(--navy);color:#fff;border-radius:999px;padding:.3rem .95rem;font-family:var(--f-display);font-weight:800;font-size:1rem;rotate:5deg;box-shadow:0 4px 0 rgba(0,0,0,.3);}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(50px,8vw,110px);display:block;}
.wave path{fill:var(--bg);}
@media (max-width:900px){
  .hero .dd{display:none;}
  .hero-grid{grid-template-columns:1fr;text-align:left;}
  .hero-stage{margin-top:24px;width:min(440px,96%);}
  .hero-stage .bubble{left:0;top:0;font-size:1rem;max-width:12.5em;}
}

/* ================= sections ================= */
.sec{position:relative;padding-block:clamp(72px,10vw,140px);}
.sec h2{font-size:clamp(2.3rem,5.2vw,4.3rem);line-height:1;}
.intro{margin-top:1.3rem;max-width:33em;font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink);}

/* ---- impact ---- */
.impact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center;}
.viz{position:relative;margin:0;background:var(--card);border:3px solid var(--edge);border-radius:var(--ra);box-shadow:8px 8px 0 var(--edge);
  padding:clamp(20px,3vw,32px) clamp(18px,3vw,30px) clamp(16px,2.4vw,24px);rotate:1.2deg;
  background-image:radial-gradient(var(--dot) 1.4px,transparent 1.8px);background-size:22px 22px;}
.stamp{position:absolute;top:-30px;left:-16px;rotate:-6deg;background:var(--sun);color:var(--navy);border:3px solid var(--navy);border-radius:20px 26px 20px 28px;padding:.45rem 1.1rem .5rem;box-shadow:0 5px 0 var(--navy);text-align:center;line-height:1;z-index:2;}
.stamp b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;}
.stamp > span{font-weight:700;font-size:.95rem;}
.stamp .dsh{font-size:.5em;font-weight:700;margin:0 .3em;font-family:var(--f-body);}
.viz-grid{display:grid;grid-template-columns:repeat(21,1fr);gap:clamp(2px,.5vw,6px) clamp(1px,.3vw,4px);margin-top:14px;}
.t{display:block;aspect-ratio:24/28;color:var(--cobalt);opacity:0;scale:.3;transition:opacity .35s ease,scale .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i)*2.4ms);}
.t svg{display:block;width:100%;height:100%;}
.t.solid svg{fill:currentColor;}
.t.dash svg{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:3.2 2.6;}
.viz.in .t{opacity:1;scale:1;}
.viz.in .t.dash{opacity:.75;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t{color:#8DBDF5;}}
:root[data-theme="dark"] .t{color:#8DBDF5;}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:16px;font-weight:700;font-size:1rem;}
.legend .sw{display:inline-block;width:14px;height:16px;margin-right:6px;vertical-align:-2px;}
.legend .sw.solid{background:var(--cobalt);border-radius:5px 5px 7px 7px;}
.legend .sw.dash{border:2px dashed var(--cobalt);border-radius:5px 5px 7px 7px;}
@media (max-width:900px){ .impact-grid{grid-template-columns:1fr;} .viz{margin-top:14px;} }

/* club report */
.club{margin-top:clamp(72px,10vw,130px);}
.club h3{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:900;max-width:18em;}
.club .intro{max-width:36em;}
.club-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);margin-top:clamp(28px,4vw,48px);align-items:center;}
.ctiles{display:grid;gap:20px;}
.ct{display:flex;gap:18px;align-items:center;border:3px solid var(--navy);border-radius:var(--rc);padding:18px 22px;box-shadow:0 7px 0 var(--navy);color:var(--navy);}
.ct:nth-child(1){background:var(--mint);} .ct:nth-child(2){background:var(--sun);} .ct:nth-child(3){background:var(--blush);}
.ct .ic{flex:none;width:58px;height:58px;border-radius:50%;background:#fff;border:3px solid var(--navy);display:grid;place-items:center;}
.ct .ic svg{width:28px;height:28px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ct h4{font-family:var(--f-display);font-size:1.3rem;font-weight:800;line-height:1.15;}
.ct p{font-size:1.02rem;line-height:1.4;margin-top:2px;}
.report{position:relative;background:var(--card);border:3px solid var(--edge);border-radius:var(--ra);box-shadow:8px 8px 0 var(--edge);padding:clamp(24px,3vw,36px);rotate:1deg;display:flex;flex-direction:column;gap:12px;}
.rep-tag{align-self:flex-start;background:var(--cobalt);color:#fff;border-radius:999px;padding:.15rem .95rem;font-weight:700;font-size:.95rem;}
.report h4{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;line-height:1.1;}
.rep-date{color:var(--muted);font-weight:700;}
.report p{font-size:1.06rem;line-height:1.5;}
.report .btn{align-self:flex-start;margin-top:6px;}
.pdf{position:absolute;top:-20px;right:22px;rotate:6deg;background:var(--sun);color:var(--navy);border:3px solid var(--navy);border-radius:12px;padding:.05rem .75rem;font-family:var(--f-display);font-weight:900;box-shadow:0 4px 0 var(--navy);}
@media (max-width:860px){ .club-grid{grid-template-columns:1fr;} }

/* gap / journey */
.gap{margin-top:clamp(72px,10vw,130px);}
.gap h3{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:900;max-width:18em;}
.gap .intro{max-width:36em;}
.journey{margin-top:clamp(32px,4vw,52px);}
.j-toggle{max-width:100%;display:inline-flex;border:3px solid var(--edge);border-radius:999px;background:var(--card);padding:4px;gap:4px;box-shadow:0 4px 0 var(--edge);}
.j-toggle button{border:0;background:transparent;font-family:var(--f-display);font-weight:800;font-size:1.02rem;padding:.6rem 1.3rem;border-radius:999px;color:var(--ink);}
.j-toggle button[aria-pressed="true"]{background:var(--cobalt);color:#fff;}
.j-track{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.j-stop{position:relative;padding-right:12px;}
.j-stop .dot{position:relative;z-index:2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:3px solid var(--edge);background:var(--card);color:var(--edge);transition:background .3s,color .3s;}
.j-stop .dot svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s;}
.j-stop::before{content:"";position:absolute;z-index:1;left:58px;right:0;top:26px;height:5px;background:var(--edge);border-radius:3px;}
.j-stop:last-child::before{display:none;}
.j-stop h4{font-size:1.2rem;font-weight:800;margin-top:14px;line-height:1.15;}
.j-stop p{font-size:1rem;color:var(--muted);margin-top:4px;line-height:1.4;}
.j-stop .a{display:none;}
.journey[data-state="after"] .j-stop .a{display:block;}
.journey[data-state="after"] .j-stop .b{display:none;}
.journey[data-state="after"] .j-stop:nth-child(2) .dot{background:var(--mint);color:var(--navy);}
.journey[data-state="after"] .j-stop:nth-child(3) .dot{background:var(--sun);color:var(--navy);}
.journey[data-state="after"] .j-stop:nth-child(4) .dot{background:var(--blush);color:var(--navy);}
.journey[data-state="after"] .j-stop:nth-child(5) .dot{background:var(--cobalt);color:#fff;}
.journey[data-state="before"] .j-stop:not(.fixed) .dot{border-style:dashed;border-color:var(--muted);background:transparent;color:var(--muted);}
.journey[data-state="before"] .j-stop:not(.fixed) .dot svg{opacity:0;}
.journey[data-state="before"] .j-stop::before{background:repeating-linear-gradient(90deg,var(--muted) 0 10px,transparent 10px 20px);opacity:.6;}
.journey[data-state="before"] .j-stop.fixed::before{background:var(--edge);opacity:1;}
.j-note{display:flex;align-items:center;gap:18px;margin-top:clamp(28px,4vw,44px);max-width:46rem;}
.j-note .mc-wrap{width:96px;flex:none;}
.j-note p{font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.3;}
@media (max-width:760px){
  .j-toggle button{padding:.55rem .85rem;font-size:.94rem;}
  .j-track{grid-template-columns:1fr;}
  .j-stop{padding:0 0 26px 76px;min-height:80px;}
  .j-stop .dot{position:absolute;left:0;top:0;}
  .j-stop h4{margin-top:0;padding-top:4px;}
  .j-stop::before{left:27px;right:auto;top:58px;bottom:0;width:5px;height:auto;}
  .journey[data-state="before"] .j-stop::before{background:repeating-linear-gradient(180deg,var(--muted) 0 10px,transparent 10px 20px);}
  .journey[data-state="before"] .j-stop.fixed::before{background:var(--edge);}
  .journey[data-state="before"] .j-stop.late{display:none;}
  .journey[data-state="before"] .j-stop:nth-child(2){padding-bottom:44px;}
}

/* outcomes bento */
.outcomes{margin-top:clamp(72px,10vw,130px);}
.outcomes h2{font-size:clamp(2rem,4.4vw,3.4rem);}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);margin-top:clamp(28px,4vw,48px);}
.tile{position:relative;border:3px solid var(--navy);border-radius:var(--ra);box-shadow:0 8px 0 var(--navy);padding:clamp(22px,3vw,34px);min-height:270px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;color:var(--navy);}
.tile h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;margin-top:26px;}
.tile p{margin-top:.6rem;font-size:1.08rem;line-height:1.45;max-width:26em;}
.tile .ic{flex:none;margin-bottom:auto;width:60px;height:60px;border-radius:50%;background:#fff;border:3px solid var(--navy);display:grid;place-items:center;}
.tile .ic svg{width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tile .mc-wrap{position:absolute;right:clamp(8px,2vw,28px);bottom:-8px;width:clamp(110px,16vw,190px);}
.tile.t1{grid-column:span 4;background:var(--sun);padding-right:clamp(130px,20vw,230px);}
.tile.t2{grid-column:span 2;background:var(--mint);}
.tile.t3{grid-column:span 2;background:var(--blush);}
.tile.t4{grid-column:span 4;background:var(--cobalt);color:#fff;padding-right:clamp(130px,20vw,230px);}
.tile.t4 .ic{background:var(--sun);}
@media (max-width:820px){
  .bento{grid-template-columns:1fr;}
  .tile.t1,.tile.t2,.tile.t3,.tile.t4{grid-column:auto;min-height:0;padding-right:clamp(22px,3vw,34px);}
  .tile .mc-wrap{width:96px;right:12px;top:14px;bottom:auto;}
  .tile.t1 .ic,.tile.t4 .ic{margin-bottom:70px;}
}

/* ---- data science ---- */
.data{background:var(--navy);color:#fff;overflow:hidden;isolation:isolate;}
.data::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);}
.data h2{color:#fff;font-size:clamp(2.4rem,6vw,5rem);max-width:13em;}
.data .lead{margin-top:1.4rem;max-width:34em;font-size:clamp(1.15rem,1.8vw,1.4rem);color:#CFE2FA;}
.edge{position:absolute;left:0;right:0;width:100%;height:clamp(40px,6vw,80px);display:block;}
.edge.top{top:-1px;}.edge.top path{fill:var(--bg);}
.edge.bot{bottom:-1px;}
.lane{--lane:var(--mint);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(64px,9vw,120px);}
.lane.two{--lane:var(--sun);}
.lane.rev .lane-vis{order:-1;}
.lane-tag{display:inline-block;padding:.3rem 1rem;border-radius:999px;font-family:var(--f-display);font-weight:800;font-size:1rem;background:var(--lane);color:var(--navy);}
.lane h3{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:900;margin:1rem 0 .8rem;color:#fff;}
.lane .lp{color:#CFE2FA;font-size:1.15rem;max-width:30em;}
.steps{list-style:none;margin:32px 0 0;padding:0;counter-reset:s;}
.steps li{position:relative;padding:0 0 28px 68px;opacity:.38;transition:opacity .5s;}
.steps li.lit{opacity:1;}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--lane);color:var(--navy);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:1.3rem;z-index:1;}
.steps li::after{content:"";position:absolute;left:22px;top:48px;bottom:0;width:4px;background:var(--lane);opacity:.4;border-radius:2px;}
.steps li:last-child{padding-bottom:0;}
.steps li:last-child::after{display:none;}
.steps h4{font-size:1.35rem;font-weight:800;color:#fff;padding-top:8px;}
.steps p{color:#CFE2FA;margin-top:.3rem;font-size:1.05rem;max-width:30em;line-height:1.5;}
.vis-card{background:var(--tint);color:var(--navy);border:3px solid var(--lane);border-radius:var(--ra);box-shadow:10px 10px 0 rgba(0,0,0,.4);padding:clamp(18px,2.6vw,28px);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vis-card{background:#EAF4FF;}}
:root[data-theme="dark"] .vis-card{background:#EAF4FF;}
.vis-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--f-display);font-weight:800;font-size:1.15rem;margin-bottom:14px;}
.chip-ex{background:var(--sun);border:2px solid var(--navy);border-radius:999px;padding:.05rem .75rem;font-size:.85rem;font-weight:800;font-family:var(--f-display);}

.tbl{border:2px solid var(--navy);border-radius:16px;overflow:hidden;background:#fff;}
.tbl .r{display:grid;grid-template-columns:1.25fr .85fr 1.4fr;gap:0;}
.tbl .r>*{padding:.7rem .85rem;font-size:.98rem;line-height:1.35;border-bottom:1.5px dashed #B7CDE8;}
.tbl .r:last-child>*{border-bottom:0;}
.tbl .h>*{background:var(--mint);color:var(--navy);font-family:var(--f-display);font-weight:800;font-size:.9rem;border-bottom:2px solid var(--navy);}
.tbl .place{font-weight:700;}
.pill{display:inline-block;border-radius:999px;padding:.05rem .65rem;font-weight:700;font-size:.88rem;color:#fff;background:#2E9F5B;}
.pill.school{background:#7C4FDB;}
.tbl-foot{margin-top:14px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;}
.tbl-foot i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mint);border:2px solid var(--navy);}
.tbl-foot svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:560px){
  .tbl .h{display:none;}
  .tbl .r{grid-template-columns:1fr;}
  .tbl .r>*{border-bottom:0;padding:.15rem .9rem;}
  .tbl .r{padding:.7rem 0;border-bottom:1.5px dashed #B7CDE8;}
  .tbl .r:last-child{border-bottom:0;}
}

.pick-l{font-weight:700;font-size:1rem;color:#3B5A84;margin-bottom:14px;line-height:1.45;}
.dform{display:grid;gap:10px;margin-bottom:16px;}
.drow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center;}
.drow label{font-weight:700;color:var(--navy);font-size:1rem;line-height:1.25;}
.dsel{appearance:none;-webkit-appearance:none;width:100%;border:3px solid var(--navy);border-radius:14px;padding:.45rem 2.2rem .45rem .8rem;font:700 1rem var(--f-body);color:var(--navy);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M2 2l6 6 6-6' fill='none' stroke='%230C2544' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;}
.dchk{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--navy);font-size:1rem;cursor:pointer;line-height:1.3;}
.dchk input{width:24px;height:24px;accent-color:#1F58A6;flex:none;}
.flow{display:flex;justify-content:center;margin:8px 0;color:var(--navy);}
.flow svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.adv{display:flex;gap:14px;align-items:flex-start;background:#FFF1BF;border:2px solid var(--navy);border-radius:16px;padding:.9rem 1rem;color:var(--navy);}
.adv .mc-wrap{width:64px;flex:none;margin-top:-2px;}
.adv h5{margin:0 0 .5rem;font-family:var(--f-display);font-weight:800;font-size:1rem;}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.tips li{display:flex;gap:10px;align-items:flex-start;font-size:1.02rem;line-height:1.42;}
.tips li i{font-style:normal;font-size:1.4rem;line-height:1.1;flex:none;}
.adv.swap .tips{animation:fadeup .35s ease-out;}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vis-foot{margin-top:12px;font-size:.9rem;color:#3B5A84;}

.close{margin-top:clamp(72px,10vw,130px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,56px);align-items:center;border-top:3px dashed rgba(255,255,255,.3);padding-top:clamp(40px,6vw,72px);}
.close h3{font-size:clamp(2.1rem,5.4vw,4.4rem);font-weight:900;color:#fff;max-width:14em;line-height:1;}
.close .priv{margin-top:1.4rem;color:#9FBBE0;font-size:1rem;max-width:32em;}
.close .mc-wrap{width:clamp(130px,18vw,210px);}
@media (max-width:760px){ .lane{grid-template-columns:1fr;} .lane.rev .lane-vis{order:0;} .close{grid-template-columns:1fr;} }

/* ---- app ---- */
.app{background:var(--bg2);}
.app-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(36px,6vw,88px);margin-top:clamp(32px,5vw,56px);align-items:start;}
.tabs{display:flex;flex-direction:column;gap:14px;}
.tab{display:block;text-align:left;width:100%;background:var(--card);color:var(--ink);border:3px solid var(--edge);border-radius:var(--rc);padding:1.05rem 1.25rem;box-shadow:0 5px 0 var(--edge);transition:transform .12s,box-shadow .12s,background .2s;}
.tab .th{display:flex;align-items:center;gap:14px;font-family:var(--f-display);font-weight:800;font-size:1.35rem;}
.tab .th i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid var(--navy);flex:none;color:var(--navy);}
.tab:nth-child(1) .th i{background:var(--sun);} .tab:nth-child(2) .th i{background:var(--mint);} .tab:nth-child(3) .th i{background:var(--blush);} .tab:nth-child(4) .th i{background:#D9C9FA;} .tab:nth-child(5) .th i{background:#fff;} .tab:nth-child(6) .th i{background:#BFE0FF;}
.tab .th svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.tab .td{display:none;margin-top:.7rem;font-size:1.06rem;line-height:1.5;}
.tab[aria-selected="true"]{background:var(--cobalt);color:#fff;transform:translateY(-2px);box-shadow:0 8px 0 var(--edge);}
.tab[aria-selected="true"] .td{display:block;}
.tab:not([aria-selected="true"]):hover{transform:translateY(-2px);}
.app-note{margin-top:22px;color:var(--muted);font-size:1rem;}
.phone-col{position:sticky;top:96px;display:flex;justify-content:center;}
.phone-stage{position:relative;padding:44px 26px 30px;}
.phone-stage::before{content:"";position:absolute;left:50%;top:54%;width:118%;aspect-ratio:1;translate:-50% -50%;border-radius:58% 42% 55% 45%/48% 55% 45% 52%;background:var(--cobalt);opacity:.16;z-index:0;}
.phone{position:relative;z-index:1;width:min(310px,78vw);background:#EAF4FF;border:6px solid var(--navy);border-radius:46px;box-shadow:10px 12px 0 var(--navy);overflow:hidden;rotate:2deg;}
.phone .shot{display:block;width:100%;height:auto;background:#EAF4FF;}
.phone .shot.swap{animation:fadeup .3s ease-out;}
.shot-lang{position:absolute;left:75.6%;top:1.95%;width:19.8%;height:4.98%;display:flex;z-index:4;}
.shot-lang button{flex:1;background:transparent;border:0;border-radius:999px;cursor:pointer;}
.shot-lang button:hover{background:rgba(255,255,255,.22);}
.phone-tip{position:absolute;z-index:3;right:14px;top:-46px;color:var(--cobalt);font-size:1.7rem;line-height:1;rotate:4deg;display:flex;align-items:flex-end;gap:2px;white-space:nowrap;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone-tip{color:var(--sun);}}
:root[data-theme="dark"] .phone-tip{color:var(--sun);}
.phone-tip svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-bottom:-30px;}
@media (max-width:980px){ .app-grid{grid-template-columns:1fr;} .phone-col{position:static;} .phone-tip{display:none;} }


/* ---- download ---- */
.dl{background:var(--sun);color:var(--navy);overflow:hidden;isolation:isolate;}
.dl-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center;}
.dl h2{font-size:clamp(2.5rem,5.6vw,4.7rem);color:var(--navy);}
.dl .intro{color:var(--navy);}
.stores{display:flex;flex-wrap:wrap;gap:18px;margin-top:2.2rem;}
.store{position:relative;display:flex;align-items:center;gap:12px;flex:1 1 250px;min-width:0;padding:1rem 1.2rem;background:var(--navy);color:#fff;text-decoration:none;border:3px solid var(--navy);border-radius:24px 30px 24px 32px / 30px 24px 32px 24px;box-shadow:0 7px 0 rgba(12,37,68,.35);transition:transform .12s,box-shadow .12s;}
.store:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(12,37,68,.35);}
.store:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(12,37,68,.35);}
.store svg{width:30px;height:30px;fill:none;stroke:var(--sun);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.store b{display:block;font-family:var(--f-display);font-weight:900;font-size:1.08rem;line-height:1.1;white-space:nowrap;}
.store small{display:block;font-size:.92rem;color:#CFE2FA;font-weight:700;margin-top:2px;}
.store[aria-disabled="true"]{cursor:default;}
.soon-note{margin-top:1.4rem;max-width:32em;font-size:1rem;font-weight:700;background:rgba(255,255,255,.55);border:2px dashed var(--navy);border-radius:16px;padding:.7rem 1rem;}
.dl-stage{position:relative;width:min(400px,100%);justify-self:center;}
.dl-stage .disc2{position:absolute;left:47%;top:54%;width:92%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#fff;border:4px solid var(--navy);box-shadow:0 8px 0 rgba(12,37,68,.3);}
.dl-stage .disc2::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:3px dashed var(--navy);opacity:.4;}
.dl-tooth{position:relative;z-index:2;width:88%;margin-inline:auto;}
@media (max-width:860px){ .dl-grid{grid-template-columns:1fr;} .dl-stage{margin-top:16px;width:min(320px,90%);} .store{min-width:0;flex:1 1 240px;} }

/* ---- about ---- */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(32px,6vw,88px);align-items:center;}
.about h2{font-size:clamp(2.1rem,4.6vw,3.7rem);}
.about .intro{max-width:34em;}
.venn{width:100%;height:auto;display:block;}
.venn text{font-family:var(--f-display);font-weight:800;fill:var(--navy);text-anchor:middle;}
.venn circle{stroke:var(--navy);stroke-width:3;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} .venn-wrap{max-width:360px;} }

/* ---- thanks + footer ---- */
.thanks{background:var(--navy);color:#DCEBFF;border-top:4px solid var(--sun);}
.thanks .wrap{display:flex;align-items:center;gap:18px;padding-block:22px;}
.thanks .mc-wrap{width:70px;flex:none;margin-block:-6px;}
.thanks p{font-size:1.02rem;line-height:1.5;max-width:52em;}
.thanks strong{color:#fff;font-weight:700;}
footer{background:var(--navy);color:#9FBBE0;padding:8px 0 40px;font-size:.98rem;}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;}
footer .lang{background:transparent;border-color:#7DB2F0;}
footer .lang button{color:#DCEBFF;}
footer .lang button[aria-pressed="true"]{background:var(--sun);color:var(--navy);}

/* ---- companion ---- */
.comp{position:fixed;left:clamp(8px,2vw,22px);bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:55;display:flex;align-items:flex-end;gap:6px;pointer-events:none;transform:translateY(150%);transition:transform .55s cubic-bezier(.3,1.5,.5,1);}
.comp.show{transform:none;}
.comp .cbtn{pointer-events:auto;width:clamp(66px,8vw,96px);background:none;border:0;padding:0;}
.comp .bubble{pointer-events:auto;font-size:.98rem;max-width:14em;padding:.6rem 2rem .6rem 1rem;margin-bottom:38px;opacity:0;transform:scale(.7) translateX(-14px);transform-origin:left bottom;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1);}
.comp .bubble.on{opacity:1;transform:none;}
.comp .bubble::after{left:-11px;right:auto;bottom:14px;border:0;border-left:3px solid var(--navy);border-bottom:3px solid var(--navy);}
.comp .x{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;border:2px solid var(--navy);background:var(--sun);font-family:var(--f-display);font-weight:900;font-size:.9rem;line-height:1;padding:0;color:var(--navy);}
.comp.gone{display:none;}
@media (max-width:640px){ .comp .bubble{max-width:11em;font-size:.9rem;} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;}
  .t{opacity:1;scale:1;}
}