
@font-face{font-family:"Fredoka";src:url(fonts/fredoka.woff2?v=9) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito.woff2?v=9) format("woff2");font-weight:200 1000;font-display:swap}
:root{
 --cream:#FFF7E8;--sky:#5FD0FF;--sky-d:#1FA8E8;--sun:#FFD23F;--sun-d:#F2B600;--coral:#FF6B6B;--coral-d:#E24E4E;
 --mint:#6FE3B4;--mint-d:#2FBF87;--lilac:#B59CFF;--lilac-d:#8E6BFF;--ink:#1B1A2E;--white:#fff;
 --r:26px;--line:3px;--shadow:6px 6px 0 var(--ink);
 --head:"Fredoka",system-ui,sans-serif;--body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;touch-action:pan-x pan-y}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.5;overflow-x:clip;max-width:100%}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:12px}
.skip:focus{left:8px;z-index:100}
:focus-visible{outline:3px solid var(--sky-d);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);font-weight:600;font-size:1.05rem;
 padding:14px 22px;border-radius:999px;border:var(--line) solid var(--ink);background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;
 box-shadow:4px 4px 0 var(--ink);transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active,.btn.squish{transform:translate(2px,2px) scale(.96);box-shadow:1px 1px 0 var(--ink)}
.btn-sm{padding:9px 16px;font-size:.95rem;box-shadow:3px 3px 0 var(--ink)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--coral)}
.btn-ink:hover{box-shadow:6px 6px 0 var(--coral)}
.btn-sun{background:var(--sun)}
.btn-ghost{background:transparent}
.btn-wa{background:#25D366;color:var(--ink);font-size:1.15rem;padding:16px 26px}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,247,232,.92);backdrop-filter:blur(8px);border-bottom:var(--line) solid var(--ink)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px}
.logo{font-family:var(--head);font-weight:700;font-size:1.7rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;letter-spacing:-.02em}
.logo-dot{width:14px;height:14px;border-radius:50%;background:var(--coral);border:var(--line) solid var(--ink);display:inline-block;animation:blip 2.4s infinite}
@keyframes blip{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.nav-desk{display:none;gap:22px;font-weight:800}
.nav-desk a{text-decoration:none;position:relative;padding:4px 2px}
.nav-desk a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;border-radius:4px;background:var(--sun);transform:scaleX(0);transition:transform .2s}
.nav-desk a:hover::after{transform:scaleX(1)}
.top-tools{display:flex;align-items:center;gap:8px}
.tool{width:42px;height:42px;border-radius:50%;border:var(--line) solid var(--ink);background:#fff;font-size:1.15rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s;display:inline-flex;align-items:center;justify-content:center;padding:0}
.tool:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.tool.lang{width:auto;padding:0 10px;border-radius:999px;font-family:var(--head);font-weight:700;font-size:.9rem;gap:4px}
.tool.lang .l-sep{opacity:.4}
.tool.lang .l-en{color:var(--ink)} .tool.lang .l-bm{color:#9b9bb0}
html[lang=ms] .tool.lang .l-en{color:#9b9bb0} html[lang=ms] .tool.lang .l-bm{color:var(--ink)}
.top .btn-sm.btn-ink{display:none}
.nav-mob{display:flex;align-items:center;gap:6px;padding:0 8px 8px;max-height:60px;overflow:hidden;transition:max-height .25s,padding .25s,opacity .25s}
.top.slim .nav-mob{max-height:0;padding-bottom:0;opacity:0}
.nav-row{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:1;padding:4px 2px;scroll-behavior:smooth}
.nav-row::-webkit-scrollbar{display:none}
.nav-row a{flex:0 0 auto;scroll-snap-align:start;text-decoration:none;font-family:var(--head);font-weight:600;padding:8px 16px;border-radius:999px;border:var(--line) solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.nav-row a:nth-child(1){background:var(--sun)} .nav-row a:nth-child(2){background:var(--mint)} .nav-row a:nth-child(3){background:var(--lilac)} .nav-row a:nth-child(4){background:var(--coral)} .nav-row a:nth-child(5){background:var(--sky)}
.arrow{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:var(--line) solid var(--ink);background:#fff;font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:3px 3px 0 var(--ink);padding:0 0 3px;font-family:var(--head)}
.arrow:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.arrow.big{width:46px;height:46px;font-size:1.8rem}

/* hero */
.hero{position:relative;background:var(--sky);border-bottom:var(--line) solid var(--ink);overflow:hidden;padding:36px 0 0}
.sky{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;width:140px;height:54px;background:#fff;border-radius:60px;border:var(--line) solid var(--ink);opacity:.95;will-change:transform}
.cloud::before{content:"";position:absolute;left:28px;top:-30px;width:60px;height:60px;background:#fff;border-radius:50%;border:var(--line) solid var(--ink);border-bottom:0}
.cloud::after{content:"";position:absolute;left:70px;top:-18px;width:46px;height:46px;background:#fff;border-radius:50%;border:var(--line) solid var(--ink);border-bottom:0}
.cloud.c1{left:-30px;top:6px;animation:drift 18s linear infinite}
.cloud.c2{right:-40px;top:30px;transform:scale(.7);animation:drift 26s linear infinite reverse}
.cloud.c3{left:40%;bottom:30px;transform:scale(.55);animation:drift 22s linear infinite;display:none}
@keyframes drift{0%{translate:0 0}50%{translate:40px -6px}100%{translate:0 0}}
.star{position:absolute;color:var(--sun);font-size:28px;-webkit-text-stroke:2px var(--ink);animation:twinkle 2.6s ease-in-out infinite}
.star.s1{left:8%;top:5%}.star.s2{right:12%;top:9%;animation-delay:.8s;font-size:20px}.star.s3{left:55%;top:3%;animation-delay:1.4s;display:none}.star.s4{right:28%;top:14%;animation-delay:.4s;font-size:22px;display:none}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(15deg)}}
.hero-grid{position:relative;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.kicker{font-family:var(--head);font-weight:600;background:var(--ink);color:#fff;display:inline-block;padding:6px 14px;border-radius:999px;font-size:.9rem;transform:rotate(-2deg);margin-bottom:14px}
.h1{font-size:clamp(2.6rem,11vw,5.2rem);line-height:.98;text-shadow:4px 4px 0 #fff;margin-bottom:12px}
.h1 .caret{display:inline-block;width:.08em;height:.9em;background:var(--ink);vertical-align:-.1em;margin-left:.05em;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.lead{font-size:1.15rem;font-weight:600;max-width:34ch;margin-bottom:18px}
.namebox{background:#fff;border:var(--line) solid var(--ink);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);max-width:440px}
.namebox label{display:block;font-family:var(--head);font-weight:600;margin-bottom:8px}
.namerow{display:flex;gap:8px}
.namerow input{flex:1;min-width:0;font:600 1.2rem var(--body);padding:12px 14px;border:var(--line) solid var(--ink);border-radius:999px;background:var(--cream)}
.hint{font-size:.8rem;opacity:.75;margin-top:8px}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-art{position:relative;display:block;min-height:300px;max-width:100%}
.kids{width:min(62%,340px);margin-left:auto;margin-right:4%;position:relative;z-index:1;filter:drop-shadow(0 10px 0 rgba(27,26,46,.25));animation:bob 3.4s ease-in-out infinite}
.mascot-wrap{position:absolute;left:2%;bottom:0;width:34%;max-width:200px;z-index:2}
.mascot{width:100%;animation:bob 2.6s ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(4px 6px 0 rgba(27,26,46,.3))}
.mascot.wave{animation:wave .9s ease-in-out 2}
.mascot.jump{animation:jump .6s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) translateY(-6px)}75%{transform:rotate(10deg) translateY(-6px)}}
@keyframes jump{0%{transform:scale(1)}30%{transform:translateY(-26px) scale(1.08,.95)}60%{transform:translateY(0) scale(.95,1.06)}100%{transform:scale(1)}}
.bubble{position:absolute;left:70%;bottom:95%;background:#fff;border:var(--line) solid var(--ink);border-radius:18px;padding:8px 12px;font-family:var(--head);font-weight:600;white-space:nowrap;box-shadow:3px 3px 0 var(--ink);font-size:.95rem;transform-origin:0 100%;animation:popin .4s cubic-bezier(.34,1.56,.64,1)}
.bubble::after{content:"";position:absolute;left:10px;bottom:-12px;width:14px;height:14px;background:#fff;border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);transform:rotate(45deg)}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
.sticker{position:absolute;right:-6px;bottom:10%;font-size:.9rem;background:var(--sun);border:var(--line) solid var(--ink);border-radius:999px;padding:8px 14px;font-family:var(--head);font-weight:700;transform:rotate(8deg);box-shadow:3px 3px 0 var(--ink);z-index:3;animation:wob 3s ease-in-out infinite}
.sticker.two{position:absolute;right:-6px;top:-18px;background:var(--coral);transform:rotate(6deg)}
@keyframes wob{0%,100%{rotate:0deg}50%{rotate:6deg}}

/* ribbon */
.ribbon{background:var(--ink);color:var(--sun);border-bottom:var(--line) solid var(--ink);overflow:hidden;padding:12px 0;font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}
.ribbon-track{display:flex;gap:28px;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}
.ribbon-track span{display:inline-flex;gap:28px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:44px 0}
.sec-head{margin-bottom:22px}
.h2{font-size:clamp(2rem,7vw,3.4rem);margin-bottom:8px}
.sub{font-size:1.08rem;font-weight:600;max-width:46ch;opacity:.9}
.nm{color:var(--coral-d);text-decoration:underline wavy var(--sun);text-underline-offset:6px}
.card{background:#fff;border:var(--line) solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);position:relative}

/* games */
.games{background:var(--cream)}
.slider-wrap{display:flex;align-items:center;gap:8px}
.slider-wrap .arrow.big{display:none}
.slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 4px 14px;flex:1;scroll-behavior:smooth}
.slider::-webkit-scrollbar{display:none}
.gcard{position:relative;flex:0 0 min(100%,420px);scroll-snap-align:center;background:#fff;border:var(--line) solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-height:440px}
.gcard-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gcard-h h3{font-size:1.5rem}
.gtag{font-family:var(--head);font-weight:600;font-size:.8rem;padding:4px 10px;border-radius:999px;border:2px solid var(--ink)}
.gtag.sun{background:var(--sun)}.gtag.coral{background:var(--coral)}.gtag.mint{background:var(--mint)}.gtag.lilac{background:var(--lilac)}
.gprompt{font-family:var(--head);font-weight:600;font-size:1.15rem;min-height:1.6em}
.gfoot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:10px}
.gscore{font-family:var(--head);font-weight:700;font-size:1.1rem;color:var(--coral-d)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:4px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#fff;transition:background .2s,transform .2s}
.dots i.on{background:var(--coral);transform:scale(1.2)}

/* letters game */
.letters-name{display:flex;gap:4px;flex-wrap:wrap;font-family:var(--head);font-weight:700;font-size:1.6rem}
.letters-name span{padding:0 4px;border-radius:8px}
.letters-name span.hl{background:var(--sun);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.letters-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start}
.lbtn{font-family:var(--head);font-weight:700;font-size:2.4rem;height:clamp(76px,24vw,104px);border-radius:22px;border:var(--line) solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1);touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--ink);min-height:70px}
.lbtn:nth-child(6n+1){background:var(--sun)}.lbtn:nth-child(6n+2){background:var(--mint)}.lbtn:nth-child(6n+3){background:var(--lilac)}.lbtn:nth-child(6n+4){background:var(--coral)}.lbtn:nth-child(6n+5){background:var(--sky)}.lbtn:nth-child(6n+6){background:#fff}
.lbtn:active{transform:scale(.92)}
.lbtn.yes,.letters-grid .lbtn.yes,.letters-grid.dense .lbtn.yes{position:relative;background:#EDE6D6;color:rgba(27,26,46,.35);border-color:rgba(27,26,46,.35);box-shadow:none;transform:translate(4px,4px);pointer-events:none;cursor:default;animation:yesdone .6s cubic-bezier(.34,1.56,.64,1)}.lbtn.yes::after{content:"\2713";position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;background:var(--mint-d);color:#fff;border:2px solid var(--ink);font:700 15px/22px var(--body);text-align:center;box-shadow:none;opacity:1}.letters-grid.dense .lbtn.yes{transform:translate(3px,3px)}.letters-grid.dense .lbtn.yes::after{width:22px;height:22px;font-size:13px;line-height:18px;top:-8px;right:-8px}@keyframes yesdone{0%{transform:scale(1)}40%{transform:scale(1.2) rotate(-6deg)}100%{transform:translate(4px,4px)}}
.lbtn.no{animation:no .4s}
@keyframes yes{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-6deg)}100%{transform:scale(1)}}
@keyframes no{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-3deg)}75%{transform:translateX(6px) rotate(3deg)}}

/* balloons */
.balloon-field{position:relative;flex:1;min-height:300px;border:var(--line) solid var(--ink);border-radius:20px;background:linear-gradient(#bfeaff,#e9f8ff);overflow:hidden;touch-action:manipulation}
.bigcount{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:7rem;color:#fff;-webkit-text-stroke:3px var(--ink);pointer-events:none;opacity:.9;transition:transform .2s}
.bigcount.bump{animation:bump .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{50%{transform:scale(1.3) rotate(-5deg)}}
.balloon{position:absolute;bottom:-150px;width:72px;height:108px;cursor:pointer;will-change:transform;animation:rise linear forwards;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.balloon img{width:100%;height:100%;object-fit:contain;animation:sway 1.6s ease-in-out infinite;pointer-events:none}
@keyframes rise{to{transform:translateY(-560px)}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.balloon.pop{animation:popout .3s forwards}
@keyframes popout{to{transform:scale(1.6);opacity:0}}
.balloon.pop img{animation:none}

/* shapes */
.shape-target{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--cream);border:var(--line) dashed var(--ink);border-radius:20px;padding:10px;min-height:96px}
.shape-target img{width:72px;height:72px;object-fit:contain;animation:bob 1.6s ease-in-out infinite}
.shape-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.sbtn{border:var(--line) solid var(--ink);border-radius:22px;background:#fff;box-shadow:4px 4px 0 var(--ink);cursor:pointer;display:grid;place-items:center;padding:10px;min-height:110px;transition:transform .15s cubic-bezier(.34,1.56,.64,1);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sbtn img{width:88px;height:88px;object-fit:contain;pointer-events:none}
.sbtn:active{transform:scale(.93)}
.sbtn.yes{animation:yes .6s cubic-bezier(.34,1.56,.64,1);background:var(--mint)}
.sbtn.no{animation:no .4s}

/* family doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.door{perspective:600px;cursor:pointer;min-height:96px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:none;border:0;padding:0}
.door-in{position:relative;width:100%;height:100%;min-height:96px;transition:transform .5s cubic-bezier(.34,1.3,.64,1);transform-style:preserve-3d}
.door.open .door-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:var(--line) solid var(--ink);border-radius:18px;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.face.front{background:var(--lilac);font-size:2rem}
.face.front::after{content:"?";font-family:var(--head);font-weight:700;color:var(--ink);font-size:2.4rem}
.face.back{background:#fff;transform:rotateY(180deg);padding:6px}
.face.back img{width:100%;height:100%;max-height:120px;object-fit:contain}
.door.found .face.back{background:var(--sun);animation:yes .6s}
.grown summary{font-family:var(--head);font-weight:600;cursor:pointer;font-size:.95rem}
.grown-row{display:flex;gap:8px;margin-top:8px}
.grown-row input{flex:1;min-width:0;font:600 1rem var(--body);padding:8px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--cream)}

/* how */
.how{background:var(--sun);border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink)}
.steps{display:grid;gap:16px}
.step .num{position:absolute;top:-16px;left:16px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.2rem;border:var(--line) solid var(--ink)}
.step h3{font-size:1.35rem;margin:10px 0 6px}
.step.sky{background:#d9f3ff}.step.sun{background:#fff}.step.coral{background:#ffe3e3}
.step:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--ink)}
.step{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}

/* parents */
.parents{background:#efe9ff;border-bottom:var(--line) solid var(--ink)}
.parents-grid{display:grid;gap:18px}
.parents-art img{width:min(100%,560px);margin-inline:auto;filter:drop-shadow(0 10px 0 rgba(27,26,46,.2))}
.chips{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{background:#fff;border:var(--line) solid var(--ink);border-radius:20px;padding:12px;display:grid;gap:2px;box-shadow:4px 4px 0 var(--ink);font-size:.9rem}
.chip .ico{font-size:1.5rem}
.chip b{font-family:var(--head);font-weight:600;font-size:1.05rem}
.progress{background:#fff}
.prog-title{font-family:var(--head);font-weight:600;font-size:1.15rem;margin-bottom:10px}
.prow{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:8px;font-weight:700;font-size:.95rem}
.bar{display:block;height:14px;border:2px solid var(--ink);border-radius:999px;background:#fff;position:relative;overflow:hidden}
.bar::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--sky);border-radius:999px;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.34,1.3,.64,1)}
.bar.coral::after{background:var(--coral)}.bar.mint::after{background:var(--mint)}
.in .bar::after{transform:scaleX(1)}
.prog-note{font-size:.78rem;opacity:.7;margin-top:6px}

/* start */
.start{background:var(--coral)}
.start-card{text-align:center;padding:30px 20px;background:#fff}
.start-card .sub{margin-inline:auto;margin-bottom:18px}
.price-row{display:grid;gap:10px;margin-bottom:20px}
.price{border:var(--line) solid var(--ink);border-radius:18px;padding:12px;background:var(--cream);display:grid;gap:2px}
.price b{font-family:var(--head);font-size:1.2rem}
.price span{font-size:.9rem;opacity:.85}

/* faq */
.faqs{display:grid;gap:12px}
.faq-item{padding:0}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;font-family:var(--head);font-weight:600;font-size:1.1rem;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:14px;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;font-size:1.3rem;transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 18px 16px}

/* footer */
.foot{background:var(--ink);color:#fff;padding:26px 0}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.foot .logo-dot{background:var(--sun)}
.foot p{font-size:.9rem;opacity:.85}

/* reveals */
.reveal{opacity:0;transform:translateY(24px) scale(.97)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}

/* celebrate overlay inside a card */
.cheer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,247,232,.92);border-radius:var(--r);z-index:5;text-align:center;padding:16px;animation:popin .4s cubic-bezier(.34,1.56,.64,1)}
.cheer b{font-family:var(--head);font-size:2rem;display:block;margin-bottom:8px}
.cheer img{width:auto;height:150px;max-width:160px;object-fit:contain;animation:jump .7s cubic-bezier(.34,1.56,.64,1) infinite}

@media (min-width:760px){
 .nav-desk{display:flex}.nav-mob{display:none}.top .btn-sm.btn-ink{display:inline-flex}
 .hero{padding:60px 0 0}
 .star.s3,.star.s4,.cloud.c3{display:block}
 .cloud.c1{top:60px}
 .kids{width:min(64%,400px);margin-left:auto;margin-right:6%}
 .mascot-wrap{left:6%}
 .hero-grid{grid-template-columns:1.05fr 1fr;align-items:end}
 .hero-copy{padding-bottom:50px}
 .steps{grid-template-columns:repeat(3,1fr)}
 .parents-grid{grid-template-columns:1fr 1.1fr;align-items:center}
 .price-row{grid-template-columns:1fr 1fr}
 .sec{padding:64px 0}
 .slider-wrap .arrow.big{display:inline-flex;align-items:center;justify-content:center}
 .gcard{flex-basis:420px}
 .prow{grid-template-columns:150px 1fr;align-items:center}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
 .reveal{opacity:1;transform:none}
 html{scroll-behavior:auto}
}

/* ---- v3: levels, counting, shapes, memory ---- */
.lvl{margin-left:auto;font-family:var(--head);font-weight:700;font-size:.8rem;background:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:3px 10px}
.lvlpick{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff}
.lvlpick button{font:700 .9rem var(--head);width:32px;height:30px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.lvlpick button+button{border-left:2px solid var(--ink)}
.lvlpick button.on{background:var(--ink);color:#fff}
.letters-name span.done{background:var(--mint)}
.letters-name span.dim{opacity:.45}
.letters-grid.dense .lbtn{font-size:1.7rem;height:clamp(54px,15vw,72px);border-radius:16px;box-shadow:3px 3px 0 var(--ink)}
.letters-grid.dense{gap:8px}
.count-scene{position:relative;flex:1;min-height:210px;border:var(--line) solid var(--ink);border-radius:20px;background:linear-gradient(#e9f7ff,#fff7e8) ,#fff;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:6px 10px;padding:12px}
.count-scene.nbig{gap:4px 6px;padding:8px}
.citem{position:relative;background:none;border:0;padding:4px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:popin .5s cubic-bezier(.34,1.56,.64,1) both}
.citem img{width:72px;height:72px;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(27,26,46,.25));animation:bob 2.2s ease-in-out infinite}
.citem img.bal{width:60px;height:90px}
.nmid .citem img{width:60px;height:60px}.nmid .citem img.bal{width:50px;height:75px}
.nbig .citem img{width:48px;height:48px}.nbig .citem img.bal{width:40px;height:60px}
.citem i{position:absolute;right:-2px;top:-4px;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--sun);border:2px solid var(--ink);font:700 1rem var(--head);display:none;place-items:center;font-style:normal}
.citem.done i{display:grid;animation:bump .4s cubic-bezier(.34,1.56,.64,1)}
.citem.done img{animation:none;transform:scale(.92);filter:drop-shadow(0 0 0 transparent) saturate(1.2)}
.citem:active img{transform:scale(.9)}
.numpad{display:grid;grid-auto-flow:column;gap:10px}
.nbtn{font:700 2rem var(--head);height:64px;border-radius:18px;border:var(--line) solid var(--ink);background:var(--sun);box-shadow:4px 4px 0 var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--ink)}
.nbtn:nth-child(2n){background:var(--mint)}.nbtn:nth-child(3n){background:var(--lilac)}
.nbtn:active{transform:scale(.93)}
.nbtn.yes{animation:yes .6s cubic-bezier(.34,1.56,.64,1)}.nbtn.no{animation:no .4s}
.shape-target{min-height:84px}
.shape-target svg{animation:bob 1.6s ease-in-out infinite}
.shape-target .qmark{font:700 3rem var(--head);color:var(--ink);opacity:.5}
.pattern{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.pattern .slot{display:grid;place-items:center;width:44px;height:44px;border:3px dashed var(--ink);border-radius:12px;font:700 1.6rem var(--head);background:#fff;animation:pulse 1s infinite}
.sbtn svg{pointer-events:none;display:block}
.sbtn{min-height:84px;padding:6px}
.memgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.memgrid.dense{gap:8px}
.mcard{perspective:600px;cursor:pointer;aspect-ratio:1/1.08;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:none;border:0;padding:0}
.mcard-in{position:relative;width:100%;height:100%;transition:transform .45s cubic-bezier(.34,1.3,.64,1);transform-style:preserve-3d}
.mcard.open .mcard-in{transform:rotateY(180deg)}
.mcard .face.front{background:var(--lilac) radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 60%)}
.mcard .face.front::after{content:"✦";font-size:2rem}
.mcard .face.back{background:#fff;transform:rotateY(180deg);padding:6px;display:grid;grid-template-rows:1fr auto;align-items:center}
.mcard .face.back img{width:100%;height:100%;max-height:92px;object-fit:contain}
.mcard .face.back small{font:700 .72rem var(--head);line-height:1;min-height:.8em;color:var(--coral-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.memgrid.dense .mcard .face.back img{max-height:60px}
.mcard.found .face.back{background:var(--sun);animation:yes .6s}
.family-art{display:block;margin:0 auto;width:min(60%,300px);filter:drop-shadow(0 10px 0 rgba(27,26,46,.25))}

/* v9 polish: no zoom, no sideways scroll */
button,a,input,.gcard,.slider,.nav-row,.namebox,.mascot-wrap,.hero-art,.lbtn,.nbtn,.mcard,.sbtn,.balloon-field{touch-action:manipulation}
.slider,.nav-row{touch-action:pan-x pan-y}
input,textarea,select{font-size:max(1em,16px)}
.grown-row input{font-size:16px}
/* win screen: boy centred */
.cheer>div{display:grid;justify-items:center;width:100%;max-width:320px;margin-inline:auto}
.cheer img{margin-inline:auto;display:block}
.cheer b{width:100%;text-align:center}
/* early access card */
.sticker.two{position:static;display:none}
.badge{display:inline-block;background:var(--coral);color:var(--ink);border:var(--line) solid var(--ink);border-radius:999px;padding:8px 18px;font-family:var(--head);font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);margin-bottom:14px;transform:rotate(-2deg);animation:wob 3s ease-in-out infinite}
.start-card{padding:34px 20px 30px;overflow:hidden}
.start-card .h2{margin-bottom:10px}
.start-card .sub{max-width:40ch;margin-bottom:22px}
.price-row{max-width:620px;margin-inline:auto;margin-bottom:22px}
.price{padding:14px 12px;text-align:center}
.price b{font-size:1.25rem}
.start-card .btn-wa{width:100%;max-width:360px;margin-inline:auto}
@media (min-width:760px){.start-card{padding:44px 40px 40px}.start-card .btn-wa{width:auto;min-width:260px}}
