/* Moonpeach Studio: site styles */
:root{
  --velvet:#1C2357; --velvet-deep:#141A44; --gold:#F2C55C; --peach:#F7C7A3; --peach-soft:#FCE4D2;
  --cream:#FFF6EA; --ink:#1A1F45; --muted:#4A4F75; --on-dark:#FFF6EA; --on-dark-muted:#C9CBE0;
  --nav:72px; --padt:120px; --padb:72px; --gut:80px;
  --display:"Nunito", system-ui, sans-serif; --text:"Nunito", system-ui, sans-serif;
  --t-h1:clamp(40px, 4.4vw + 12px, 76px); --t-h2:clamp(30px, 1.6vw + 24px, 50px);
  --t-lead:clamp(18px, .3vw + 17px, 21px); --t-body:17px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-enter:cubic-bezier(.22,1,.36,1);
  --r-lg:24px; --r-md:18px; --focus:var(--velvet);
}
@media (max-width:639px){ :root{ --nav:60px; --padt:96px; --padb:48px; --gut:20px; } }
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:auto; -webkit-text-size-adjust:100%}
body{font-family:var(--text); font-size:var(--t-body); line-height:1.6; color:var(--ink); background:var(--velvet-deep); font-optical-sizing:auto}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; margin:0; text-wrap:balance}
h1{font-size:var(--t-h1); line-height:1.04; letter-spacing:-.022em; font-weight:900}
h2{font-size:var(--t-h2); line-height:1.08; letter-spacing:-.018em}
h3{font-size:22px; line-height:1.25; letter-spacing:-.01em}
h4{font-size:19px; line-height:1.3}
p{margin:0; text-wrap:pretty}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
.wrap{width:min(100% - 2*var(--gut), 1280px); margin-inline:auto}

/* skip link */
.skip-link{position:absolute; left:var(--gut); top:12px; z-index:30; background:var(--cream); color:var(--ink); padding:10px 16px; border-radius:999px; font-weight:600; transform:translateY(-300%)}
.skip-link:focus-visible{transform:none}

/* nav */
.nav{position:fixed; inset:0 0 auto; height:var(--nav); z-index:20; background:var(--velvet-deep); color:var(--on-dark); border-bottom:1px solid rgba(255,246,234,.12); --focus:var(--gold)}
.nav__row{height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative}
.nav__brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--display); font-weight:900; font-size:20px; letter-spacing:-.005em; min-height:44px}
.nav__brand img{width:40px; height:40px; border-radius:50%}
.nav__links{display:flex; gap:28px; font-size:15px; font-weight:500}
.nav__links a{text-decoration:none; padding:12px 0; position:relative; color:var(--on-dark-muted); transition:color var(--m-in,150ms) var(--ease)}
.nav__links a::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 150ms var(--ease)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--on-dark)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__end{display:flex; align-items:center; gap:12px}
.lang{font:500 15px/1 var(--text); color:var(--on-dark); background:transparent; border:1px solid rgba(255,246,234,.35); border-radius:999px; height:44px; padding:0 16px; cursor:pointer; transition:background-color 150ms var(--ease), border-color 150ms var(--ease)}
.lang:hover{background:rgba(255,246,234,.08); border-color:rgba(255,246,234,.7)}
@media (max-width:960px){ .nav__links{display:none} }
@media (max-width:480px){ .nav__brand span{display:none} .nav__cta{padding:0 18px} }

/* buttons */
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 26px; border-radius:999px; font:600 16px/1 var(--text); text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease)}
.btn--primary{background:var(--gold); color:var(--ink); border:0}
.btn--secondary{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn--xl{height:60px; padding:0 34px; font-size:18px}
.m-arrow{width:16px; height:16px; transition:transform 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:color-mix(in srgb, var(--gold) 86%, var(--ink)); transform:translateY(-1px)}
  .btn--secondary:hover{background:rgba(26,31,69,.06); transform:translateY(-1px)}
  .btn--xl:hover{transform:translateY(-2px)}
  .btn:hover .m-arrow{transform:translateX(3px)}
}
.btn:disabled{opacity:.55; cursor:default; transform:none}
.btn:active{transform:translateY(1px) scale(.985); transition-duration:90ms}

/* text links */
.link{text-decoration:none; font-weight:600; padding:10px 0; background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1.5px no-repeat, linear-gradient(rgba(26,31,69,.25),rgba(26,31,69,.25)) 0 calc(100% - 8px)/100% 1px no-repeat; transition:background-size 150ms var(--ease)}
.link:hover,.link:focus-visible{background-size:100% 1.5px, 100% 1px}

/* sections */
.section{min-height:100svh; padding:var(--padt) 0 var(--padb); display:flex; flex-direction:column}
.section > .wrap{flex:1}

/* hero */
.hero{min-height:100svh; padding-top:var(--nav); display:flex; flex-direction:column; background:var(--peach) radial-gradient(ellipse 46% 60% at 50% 0%, rgba(255,246,234,.75), rgba(255,246,234,0) 70%) no-repeat; background-position:0 0, 50% var(--curtain-h, 60%); overflow:hidden}
.hero__curtain{flex:1 0 clamp(240px, 46svh, 560px); overflow:hidden; position:relative}
.hero__curtain img{width:100%; height:100%; object-fit:cover; object-position:50% 100%; transform-origin:50% 0}
.hero__text{flex:0 0 auto; text-align:center; padding:28px 0 56px; display:flex; flex-direction:column; align-items:center; gap:20px}
.hero h1{max-width:15ch}
.hero__lead{font-size:var(--t-lead); line-height:1.5; max-width:46ch; color:#2A2F5E}
.hero .btn-row{justify-content:center; margin-top:6px}
@media (min-width:900px) and (max-height:800px){ .hero h1{font-size:clamp(36px, 7.4svh, 60px)} .hero__lead{font-size:17px} .hero__text{padding:18px 0 32px; gap:12px} .hero__curtain{flex-basis:clamp(220px, 40svh, 360px)} }
@media (min-width:900px) and (max-height:740px){ .hero__curtain{flex-basis:clamp(200px, 32svh, 300px)} .hero__text{padding-bottom:20px} .ages{margin-top:0} }
@media (max-width:639px){ .hero__text{padding:20px 0 28px; gap:14px} .hero .btn-row{flex-direction:column; width:100%} .hero .btn{width:100%} }

/* hero entrance (once, on load) */
.m-enter .hero__curtain img{transform:scale(1.12)}
.m-enter .hero__lead,.m-enter .hero .btn{opacity:0; transform:translateY(12px)}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em}
.hero h1 .w__i{display:inline-block}
.m-enter .hero h1 .w__i{transform:translateY(110%)}
.m-go .hero__curtain img{transform:none; transition:transform 1400ms var(--ease-enter)}
.m-go .hero h1 .w__i{transform:none; transition:transform 700ms var(--ease-enter); transition-delay:calc(450ms + var(--line,0) * 80ms)}
.m-go .hero__lead,.m-go .hero .btn{opacity:1; transform:none; transition:opacity 520ms var(--ease-enter), transform 520ms var(--ease-enter); transition-delay:calc(900ms + var(--i,0) * 60ms)}
.m-go .hero .btn:hover{transition-delay:0ms}
.m-enter-done:not(.m-go) .hero__curtain img,.m-enter-done:not(.m-go) .hero h1 .w__i,.m-enter-done:not(.m-go) .hero__lead,.m-enter-done:not(.m-go) .hero .btn{opacity:1; transform:none; transition:opacity 400ms, transform 400ms}

/* hero: twinkling stars and moon glow */
.sparkles{position:absolute; inset:0; pointer-events:none; z-index:2}
.sparkles i{position:absolute; left:var(--x); top:var(--y); width:14px; height:14px; background:#FFE9B0; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); opacity:.2; animation:twinkle 4.2s ease-in-out var(--d) infinite}
@keyframes twinkle{0%,100%{opacity:.15; transform:scale(.7)} 50%{opacity:.95; transform:scale(1.1)}}
.hero__glow{position:absolute; left:50%; bottom:-14%; width:min(46vw,520px); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,233,176,.55), rgba(255,233,176,0) 65%); animation:glow 6s ease-in-out infinite; pointer-events:none; z-index:1}
.hero__curtain img{position:relative; z-index:1}
.sparkles{z-index:3}
@keyframes glow{0%,100%{opacity:.45} 50%{opacity:.95}}

/* gallery: two slow reels */
.gallery{background:var(--velvet-deep); color:var(--on-dark); --focus:var(--gold); overflow:hidden}
.gallery__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px}
.gallery__head p{margin-top:14px; font-size:var(--t-lead); color:var(--on-dark-muted); max-width:46ch}
.btn--on-dark{color:var(--on-dark); border-color:rgba(255,246,234,.6)}
@media (hover:hover) and (pointer:fine){ .btn--on-dark:hover{background:rgba(255,246,234,.08)} }
.gallery__reels{display:grid; gap:20px}
.reel{display:flex; width:max-content; gap:20px}
.reel__track{list-style:none; margin:0; padding:0; display:flex; gap:20px; animation:reel 70s linear infinite}
.reel--b .reel__track{animation-duration:84s; animation-direction:reverse}
.reel li{flex:0 0 auto; width:clamp(240px, 26vw, 380px); aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; background:#222a5e}
.reel img{width:100%; height:100%; object-fit:cover}
.gallery:hover .reel__track,.gallery.is-paused .reel__track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(calc(-100% - 20px))}}

/* bobbing pompos */
.pompos{margin-top:28px; display:flex; gap:0; background:#FEF5E6; border-radius:var(--r-lg); padding:18px 18px 6px; width:min(100%, 400px)}
.pompos img{width:33.333%; height:auto; animation:bob 2.6s ease-in-out infinite alternate}
.pompos img:nth-child(2){animation-delay:-.9s}
.pompos img:nth-child(3){animation-delay:-1.7s}
@keyframes bob{from{transform:translateY(0)} to{transform:translateY(-12px)}}

/* chapters: three series (stacked at rest, pinned when live) */
.chapters{background:var(--cream); padding:var(--padt) 0 var(--padb)}
.chapters__head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; margin-bottom:40px}
.chapters__head p{font-size:var(--t-lead); color:var(--muted); max-width:36ch}
.chapters__stage{display:grid; gap:64px}
.chapter{display:grid; gap:20px}
.chapter__frame{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; background:var(--tint)}
.chapter__frame img{width:100%; height:100%; object-fit:cover}
.chapter__panel{background:#FFFFFF; border-radius:var(--r-md); padding:28px; display:flex; flex-direction:column; gap:10px; max-width:460px}
.chapter__logo{height:64px; width:auto; object-fit:contain; object-position:left center; margin-bottom:6px}
.chapter__age{font-size:14px; font-weight:600; color:var(--muted)}
.chapter__text{font-size:17px; line-height:1.55}
.chapter .link{align-self:flex-start}

.ch-live .chapters{min-height:100svh}
.ch-live .chapters__stage{position:relative; display:block; height:clamp(380px, 100svh - var(--nav) - 230px, 720px); border-radius:var(--r-lg); overflow:hidden; touch-action:pan-y; background:#FBF1DF}
.ch-live .chapter{position:absolute; inset:0; display:block}
.ch-live .chapter__frame{position:absolute; inset:0; aspect-ratio:auto; border-radius:0}
.ch-live .chapter.is-in .chapter__frame{animation:wipe 900ms cubic-bezier(.65,0,.35,1) both}
.ch-live .chapter.is-in .chapter__frame img{animation:settle 1400ms cubic-bezier(.22,1,.36,1) both}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.08)} to{transform:scale(1)}}
.ch-live .chapter__panel{position:absolute; left:28px; bottom:28px; width:min(440px, 100% - 56px); z-index:5; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s 260ms; box-shadow:0 10px 30px rgba(20,26,68,.12)}
.ch-live .chapter.is-active .chapter__panel{opacity:1; visibility:visible; transform:none; transition:opacity 360ms var(--ease) 420ms, transform 360ms var(--ease) 420ms, visibility 0s}
.ch-live .chapter[data-chapter="0"] img{object-position:62% 50%}
.ch-live .chapter[data-chapter="1"] img{object-position:55% 40%}
.ch-live .chapter[data-chapter="2"] img{object-position:38% 40%}
@media (max-width:639px){
  .ch-live .chapters__stage{height:clamp(460px, 78svh, 640px)}
  .ch-live .chapter__panel{left:12px; right:12px; bottom:12px; width:auto; padding:20px; gap:6px}
  .ch-live .chapter__logo{height:44px}
  .ch-live .chapter__text{font-size:16px}
}

/* split sections */
.split#neu{background:var(--peach-soft)}
.split#atem{background:var(--cream)}
#atem .split__media{aspect-ratio:1}
#atem .split__media img{height:100%; object-fit:cover; object-position:40% 50%}
.split__grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:start}
.split__text{grid-column:1 / span 5; display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.split__text p{font-size:var(--t-lead); line-height:1.55; max-width:40ch; color:#2A2F5E}
.split__text .btn{margin-top:8px}
.split__media{grid-column:7 / span 6; border-radius:var(--r-lg); overflow:hidden; position:relative; display:block}
.split__media img{width:100%; height:auto}
.m-zoom img{transition:transform 600ms var(--ease)}
@media (hover:hover) and (pointer:fine){ .m-zoom:hover img{transform:scale(1.03); transition-duration:600ms} }
.play{position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; background:var(--cream); color:var(--ink); display:grid; place-items:center; box-shadow:0 8px 24px rgba(20,26,68,.18); transition:transform 150ms var(--ease)}
.play svg{width:30px; height:30px; margin-left:4px}
@media (hover:hover) and (pointer:fine){ .m-zoom:hover .play{transform:translateY(-1px)} }
#neu .split__text{grid-column:1 / span 4}
#neu .split__media{grid-column:6 / span 7; aspect-ratio:4/3}
#neu .split__media img{height:100%; object-fit:cover; object-position:100% 50%}
@media (max-width:899px){ .split__grid{grid-template-columns:minmax(0,1fr); gap:40px} .split__text,.split__media,#neu .split__text,#neu .split__media{grid-column:1 / -1} }

/* statement: for parents */
.statement{background:var(--velvet); color:var(--on-dark); --focus:var(--gold)}
.statement h2{color:var(--gold); margin-bottom:48px}
.statement__grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:start}
.statement__main{grid-column:1 / span 8}
.statement__img{grid-column:9 / span 4; margin-top:104px; border-radius:var(--r-lg); overflow:hidden; background:#F7E9D6}
.statement__img img{width:100%; aspect-ratio:1; object-fit:cover}
@media (max-width:899px){ .statement__grid{grid-template-columns:minmax(0,1fr)} .statement__main,.statement__img{grid-column:1 / -1} .statement__img{margin-top:24px; max-width:420px} }
.statement__text{font-family:var(--display); font-weight:800; font-size:clamp(28px, 2.3vw + 17px, 52px); line-height:1.22; letter-spacing:-.015em; max-width:24em}
.statement__text .hw{color:rgba(255,246,234,.42); transition:color 300ms var(--ease)}
.statement__text .hw.is-lit{color:var(--on-dark)}
.statement__text .hw.is-accent.is-lit{color:var(--gold)}
.statement__fact{margin-top:48px; font-size:var(--t-lead); color:var(--on-dark-muted); max-width:52ch}

/* closing footer */
.closing{background:var(--velvet-deep); color:var(--on-dark); min-height:100svh; padding:var(--padt) 0 40px; display:flex; --focus:var(--gold)}
.closing > .wrap{display:flex; flex-direction:column; justify-content:space-between; gap:72px}
.close__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px}
.close__head p{margin-top:16px; font-size:var(--t-lead); color:var(--on-dark-muted); max-width:44ch}
.close__word{margin-top:64px; display:flex; align-items:center; gap:clamp(16px, 2vw, 32px); font-family:var(--display); font-weight:900; font-size:clamp(44px, 8.2vw, 130px); line-height:1; letter-spacing:-.03em; color:var(--cream); white-space:nowrap}
.close__word img{width:clamp(56px, 8vw, 128px); height:auto; border-radius:50%}
.directory{border-top:1px solid rgba(255,246,234,.14); padding-top:40px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px}
.directory__cols{display:grid; grid-template-columns:repeat(3, minmax(160px, auto)); gap:32px 64px}
.directory h3{color:var(--on-dark-muted); margin-bottom:12px; font-size:15px; font-weight:700; letter-spacing:0}
.directory ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.directory a{text-decoration:none; display:inline-block; padding:8px 0; color:var(--on-dark); background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 1px no-repeat; transition:background-size 150ms var(--ease)}
.directory a:hover,.directory a:focus-visible{background-size:100% 1px}
.legal{font-size:14px; color:var(--on-dark-muted)}
@media (max-width:639px){ .directory__cols{grid-template-columns:1fr 1fr} .close__word{white-space:normal; font-size:clamp(36px, 11vw, 56px)} .close__word span{min-width:0; overflow-wrap:anywhere} }

/* what children take away */
.statement .learn{margin-top:128px}
.learn__h{font-size:var(--t-h2); font-weight:800; letter-spacing:-.018em; color:var(--cream); margin-bottom:40px; max-width:20ch}
.learn__item h4{color:var(--cream); font-size:22px}
.learn__grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.learn__item{display:flex; flex-direction:column; gap:10px}
.learn__img{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; margin-bottom:10px; background:#FBF1DF}
.learn__img img{width:100%; height:100%; object-fit:cover}
.learn__item p{font-size:17px; line-height:1.6; color:var(--on-dark-muted); max-width:40ch}
.learn__img{position:relative}
.learn__img .learn__badge{object-fit:contain; position:absolute; left:12px; top:12px; z-index:2; height:44px; width:auto; background:#FFF6EA; border-radius:12px; padding:6px 10px; box-shadow:0 4px 14px rgba(20,26,68,.18)}
.learn__img .learn__badge--tall{height:64px}
@media (max-width:899px){ .learn__grid{grid-template-columns:minmax(0,1fr); gap:40px} }

/* breathing pause */
.breath{margin-top:12px; display:flex; align-items:center; gap:28px; background:#FFFFFF; border-radius:var(--r-lg); padding:24px 28px 24px 24px; box-shadow:0 10px 30px rgba(20,26,68,.08); width:100%; max-width:520px}
.breath__ring{flex:0 0 auto; width:140px; height:140px; border-radius:50%; background:var(--peach-soft); display:grid; place-items:center}
.breath__dot{width:56px; height:56px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 10px rgba(242,197,92,.25); transform:scale(1); transition:transform 4000ms cubic-bezier(.45,0,.55,1)}
.breath.is-in .breath__dot{transform:scale(2.1)}
.breath.is-out .breath__dot{transform:scale(1); transition-duration:5000ms}
.breath__side{display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:0}
.breath__prompt{font-family:var(--display); font-weight:800; font-size:21px; line-height:1.3; min-height:2.6em}
.breath__round{font-size:14px; font-weight:600; color:var(--muted); min-height:1.4em}
@media (max-width:480px){ .breath{flex-direction:column; align-items:flex-start} }

/* studio: turnaround and steps */
.studio{background:var(--cream)}
.studio__top{margin-bottom:112px}
.turn{grid-column:7 / span 6; display:flex; flex-direction:column; align-items:center; gap:12px; background:#FFF4E2; border-radius:var(--r-lg); padding:32px 32px 28px}
.turn__stage{position:relative; width:min(100%, 380px); aspect-ratio:500/591; cursor:ew-resize; touch-action:pan-y; user-select:none}
.turn__stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 160ms linear}
.turn__stage img.is-on{opacity:1}
.turn__label{font-size:14px; font-weight:700; color:var(--muted)}
.turn__range{width:min(100%, 380px); accent-color:var(--velvet); height:44px}
.turn__play{font:600 14px/1 var(--text); color:var(--velvet); background:transparent; border:1px solid rgba(28,35,87,.35); border-radius:999px; height:44px; padding:0 16px; cursor:pointer}
.turn__play:hover{background:rgba(28,35,87,.06)}
.turn__stage.is-flip img{transform:scaleX(-1)}
.turn__ticks{width:min(100%, 380px); display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}
.steps__h{font-size:var(--t-h2); font-weight:800; letter-spacing:-.018em; margin-bottom:40px}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px}
.step{display:flex; flex-direction:column; gap:10px}
.step__img{border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:#FBF1DF; margin-bottom:8px}
.step__img img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.step__n{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--velvet); color:var(--cream); font-size:15px; margin-right:6px; vertical-align:2px}
.step p{font-size:16px; line-height:1.6; color:#2A2F5E}
@media (max-width:1023px){ .steps{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:899px){ .turn{grid-column:1 / -1} .studio__top{margin-bottom:80px} }
@media (max-width:560px){ .steps{grid-template-columns:minmax(0,1fr); gap:40px} }

/* mobile menu */
.nav__toggle{display:none; align-items:center; gap:10px; height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,246,234,.35); background:transparent; color:var(--on-dark); font:600 15px/1 var(--text); cursor:pointer}
.nav__burger{width:16px; height:10px; border-top:2px solid currentColor; border-bottom:2px solid currentColor; position:relative}
.nav__burger::after{content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid currentColor}
.nav__toggle[aria-expanded="true"] .nav__burger{border-color:transparent}
.nav__toggle[aria-expanded="true"] .nav__burger::after{top:2px; transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__burger::before{content:""; position:absolute; left:0; right:0; top:4px; border-top:2px solid currentColor; transform:rotate(-45deg)}
.menu{position:fixed; inset:var(--nav) 0 0; background:var(--velvet-deep); z-index:19; padding:24px 0; overflow:auto}
.menu[hidden]{display:none}
.menu__links{display:flex; flex-direction:column}
.menu__links a{font-family:var(--display); font-weight:800; font-size:30px; color:var(--cream); text-decoration:none; padding:14px 0; border-bottom:1px solid rgba(255,246,234,.12)}
@media (max-width:960px){ .nav__toggle{display:inline-flex} }
@media (max-width:520px){ .nav__cta{display:none} .lang{padding:0 12px} }

/* hero: age picker and shooting star */
.ages{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px}
.age{display:flex; align-items:center; gap:10px; padding:6px 18px 6px 6px; border-radius:999px; background:#FFF6EA; text-decoration:none; color:var(--ink); box-shadow:0 4px 14px rgba(20,26,68,.08); transition:transform 180ms var(--ease), box-shadow 180ms var(--ease)}
.age img{width:42px; height:42px; border-radius:50%; object-fit:cover; background:#FEF5E6}
.age span{display:flex; flex-direction:column; text-align:left; font-weight:800; font-size:16px; line-height:1.15}
.age b{font-size:13px; font-weight:700; color:var(--muted)}
@media (hover:hover) and (pointer:fine){ .age:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,26,68,.14)} }
.shoot{position:absolute; z-index:3; top:16%; left:-12%; width:140px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(255,233,176,0), #FFE9B0); transform:rotate(14deg); opacity:0; animation:shoot 11s linear 2.5s infinite; pointer-events:none}
@keyframes shoot{0%{opacity:0; transform:translate(0,0) rotate(14deg)} 2%{opacity:1} 9%{opacity:0; transform:translate(62vw,15vw) rotate(14deg)} 100%{opacity:0; transform:translate(62vw,15vw) rotate(14deg)}}
@media (max-width:639px){ .ages{flex-direction:column; align-items:stretch} }

/* chapter progress */
.ch-dots{display:none; gap:6px; flex-wrap:wrap}
.ch-live .ch-dots{display:flex}
.ch-dots button{position:relative; overflow:hidden; display:flex; align-items:center; height:44px; padding:0 18px; border-radius:999px; border:1px solid rgba(28,35,87,.2); background:transparent; color:var(--muted); font:700 15px/1 var(--text); cursor:pointer; transition:background-color 200ms var(--ease), color 200ms var(--ease)}
.ch-dots button:hover{color:var(--ink); border-color:rgba(28,35,87,.45)}
.ch-dots button[aria-selected="true"]{background:var(--velvet); color:var(--cream); border-color:var(--velvet)}
.ch-dots button::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left}
.ch-dots button.is-run::after{animation:chbar 7s linear forwards}
.chapters:hover .ch-dots button.is-run::after,.chapters:focus-within .ch-dots button.is-run::after,.chapters.is-off .ch-dots button.is-run::after{animation-play-state:paused}
@keyframes chbar{to{transform:scaleX(1)}}

/* gentle autonomous motion */
.kb{animation:kb 16s ease-in-out infinite alternate}
.step:nth-child(2) .kb,.learn__item:nth-child(2) .kb{animation-delay:-5s}
.step:nth-child(3) .kb,.learn__item:nth-child(3) .kb{animation-delay:-10s}
@keyframes kb{from{transform:scale(1.02) translate(0,0)} to{transform:scale(1.09) translate(-2%,-1.5%)}}
.float{animation:float 6.5s ease-in-out infinite alternate}
@keyframes float{from{transform:scale(1.06) translateY(8px)} to{transform:scale(1.06) translateY(-10px)}}
.breath:not(.is-in):not(.is-out) .breath__dot{animation:invite 2.8s ease-in-out infinite}
@keyframes invite{0%,100%{transform:scale(1)} 50%{transform:scale(1.18)}}
.m-paused *,.m-paused *::before,.m-paused *::after{animation-play-state:paused !important}
.legal-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px}
.motion-toggle{font:600 14px/1 var(--text); color:var(--on-dark); background:transparent; border:1px solid rgba(255,246,234,.35); border-radius:999px; height:44px; padding:0 16px; cursor:pointer}
.motion-toggle:hover{background:rgba(255,246,234,.08)}

/* browser surfaces */
::selection{background:#F2C55C; color:#1A1F45}
html{scrollbar-color:#1C2357 #FFF6EA}
h1,h2,h3,h4{hyphens:auto; overflow-wrap:break-word}

/* legal pages */
.page{background:var(--cream); min-height:100svh; padding:calc(var(--nav) + 64px) 0 96px}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(36px, 3vw + 20px, 56px); margin-bottom:32px}
.page h2{font-size:26px; margin:40px 0 12px}
.page p,.page li{font-size:17px; line-height:1.65; max-width:62ch}
.page p + p{margin-top:12px}
.page .todo{background:#FFE7A3; padding:0 4px; border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms !important; animation:none !important}
}