@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(/fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(/fonts/nunito-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:900;font-display:swap;src:url(/fonts/nunito-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:Baloo;font-weight:800;font-display:swap;src:url(/fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:NotoTamil;font-weight:700;font-display:swap;src:url(/fonts/noto-sans-tamil-tamil-700-normal.woff2) format("woff2")}
@font-face{font-family:NotoDeva;font-weight:700;font-display:swap;src:url(/fonts/noto-sans-devanagari-devanagari-700-normal.woff2) format("woff2")}
:root{--bg:#F3EFFF;--band:#5A3FD8;--band2:#3E27A8;--island:#6E55E8;--ink:#2A1F5C;--muted:#554C80;--card:#fff;--shadow:#E2DAFF;--outline:#D8CFFF;--tint:#EEE9FF;--gold:#FFC23D;--gold2:#D99A12;--green:#58CC02;--green2:#3E9200;--gem:#19C3D6;--flame:#FF8A45;--pink:#FF7BC0;--red:#FF4B4B}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:700 17px/1.6 Nunito,ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:Baloo,Nunito,ui-rounded,system-ui,sans-serif;font-weight:800;line-height:1.1;margin:0}
a{color:var(--band)}
img{max-width:100%;height:auto}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
/* header */
header.top{background:var(--band);position:sticky;top:0;z-index:20;box-shadow:0 4px 0 var(--band2)}
.bar{max-width:1040px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-size:28px;display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px;border-radius:50%;border:3px solid #fff;object-fit:cover;background:#FFF6E4}
nav a{color:#fff;text-decoration:none;font-weight:800;padding:6px 12px;border-radius:12px;font-size:16px}
nav a:hover,nav a:focus-visible{background:var(--island)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:900 18px Nunito,sans-serif;color:#fff;background:var(--green);border-radius:18px;padding:14px 26px;text-decoration:none;box-shadow:0 6px 0 var(--green2);transition:transform .12s,box-shadow .12s;border:0;cursor:pointer}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--green2)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--green2)}
.btn.gold{background:var(--gold);color:#3A2600;box-shadow:0 6px 0 var(--gold2)}
.btn.store{background:#fff;color:var(--ink);box-shadow:0 6px 0 var(--shadow);border:2px solid var(--outline);font-size:16px;padding:10px 20px;line-height:1.2;text-align:left;cursor:default}
.btn.store small{display:block;font-size:12px;color:var(--muted);font-weight:800}
.btn.store:hover,.btn.store:active{transform:none;box-shadow:0 6px 0 var(--shadow)}
/* hero: the app's welcome scene */
header.top.forest{background:#CFEFD8;box-shadow:0 4px 0 #A9DDB8}
header.top.forest .brand{color:#14472F}
header.top.forest .brand img{border-color:#14472F;background:#fff}
header.top.forest nav a{color:#14472F}
header.top.forest nav a:hover,header.top.forest nav a:focus-visible{background:#B7E4C4}
.hero{position:relative;overflow:hidden;background:#CFEFD8 url(/img/forest.svg) center bottom/cover no-repeat;padding-top:34px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px;align-items:end}
.copy{align-self:center;margin-bottom:96px;background:rgba(255,248,226,.94);border:4px solid #8A5A2E;border-bottom-width:8px;border-radius:28px;padding:26px 26px 28px}
.copy h1{font-size:clamp(38px,6vw,62px);color:#14472F}
.copy h1 em{font-style:normal;color:#E8890C;display:inline-block;transform:rotate(-3deg)}
.copy p.lead{font-size:clamp(17px,2.2vw,20px);margin:14px 0 22px;color:#5A4524}
.pill{display:inline-block;background:#E6F5EA;border:2px solid #14472F;color:#14472F;border-radius:999px;padding:3px 14px;font-weight:900;font-size:13px;margin-bottom:12px;letter-spacing:.03em}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stage{width:100%;max-width:520px;justify-self:end}
svg.scene{display:block;width:100%;height:auto;overflow:visible}
svg.scene .card{cursor:pointer;outline:none;transition:transform .2s}
svg.scene .card:focus-visible rect:nth-child(2){stroke:#5A3FD8;stroke-width:4}
svg.scene .pet{will-change:transform}
.p-breathe{transform-origin:100px 170px;animation:breathe 3200ms ease-in-out infinite}
.p-tail{animation:sway 2600ms ease-in-out infinite}
.p-flapL{animation:flapL 3000ms ease-in-out infinite}.p-flapR{animation:flapR 3000ms ease-in-out infinite}
.p-puff{animation:puff 2400ms ease-in-out infinite}
.p-fan{transform:scale(.5)}
.p-eyesClosed{opacity:0}
.p-eyesOpen{animation:blink 4600ms infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015,1.035)}}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes flapL{50%{transform:rotate(-14deg)}}@keyframes flapR{50%{transform:rotate(14deg)}}
@keyframes puff{50%{transform:scale(1.5)}}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
/* the trail below the scene */
.trail{position:relative;background:#6CC06A;padding:0 0 120px}
.trail-in{position:relative;max-width:440px;margin:0 auto;padding:30px 50px 36px;text-align:center;background:url(/img/trail.svg) center top/cover no-repeat;min-height:260px;border-radius:0 0 40px 40px}
.sign{display:inline-block;background:#8A5A2E;border-bottom:4px solid #5C3A18;border-radius:12px;padding:4px 24px 2px;margin-bottom:16px}
.sign h2{color:#FFF1D0;font-size:28px;margin:0}
ul.perks{list-style:none;margin:0 auto 14px;padding:12px 16px;background:#FBEBC4;border:3px solid #8A5A2E;border-radius:16px;text-align:left;display:grid;gap:6px}
ul.perks li{padding-left:30px;position:relative;font-weight:900;color:#3B2A14}
ul.perks li:before{content:"";position:absolute;left:2px;top:5px;width:12px;height:7px;border-left:3.5px solid #1F8A56;border-bottom:3.5px solid #1F8A56;transform:rotate(-45deg)}
.trail-note{margin:0;color:#5A4524;font-size:15px}
.wave{position:absolute;left:0;right:0;bottom:-1px;height:90px;display:block;width:100%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
/* sections */
section{padding:56px 0}
.sec-title{text-align:center;font-size:clamp(30px,5vw,44px);margin-bottom:8px}
.sec-sub{text-align:center;color:var(--muted);max-width:34em;margin:0 auto 34px;font-size:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:2px solid var(--outline);border-radius:26px;padding:24px;box-shadow:0 6px 0 var(--shadow)}
.step .num{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:800 30px Baloo,sans-serif;color:#fff;margin-bottom:12px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.step:nth-child(1) .num{background:var(--flame)}.step:nth-child(2) .num{background:var(--gem)}.step:nth-child(3) .num{background:var(--green)}
.step h3{font-size:24px;margin-bottom:6px}
.step p{margin:0;color:var(--muted)}
.step:nth-child(even){transform:rotate(.6deg)}.step:nth-child(odd){transform:rotate(-.6deg)}
/* toy */
.toy{background:#fff;border-top:3px dashed var(--outline);border-bottom:3px dashed var(--outline)}
.toybox{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:32px;align-items:center;justify-content:center}
#toy-art{background:#fff;border:4px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--shadow);padding:6px;max-width:420px;width:100%;margin:0 auto}
#toy-art svg{display:block;width:100%;height:auto;border-radius:22px}
#toy-art path{cursor:pointer;transition:fill .15s;outline:none}
#toy-art path:focus-visible{stroke:var(--band);stroke-width:2.6}
#toy-art path.pop{animation:pop .3s}
#toy-colors{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
#toy-colors button{width:46px;height:46px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 2px var(--outline),0 4px 0 rgba(0,0,0,.15);cursor:pointer;transition:transform .12s}
#toy-colors button.on{transform:scale(1.22);box-shadow:0 0 0 3px var(--ink),0 4px 0 rgba(0,0,0,.15)}
#toy-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
#toy-tabs button{font:900 16px Nunito,sans-serif;color:var(--ink);background:var(--tint);border:2px solid var(--outline);border-radius:999px;padding:8px 18px;cursor:pointer}
#toy-tabs button.on{background:var(--band);color:#fff;border-color:var(--band2)}
.toycopy h2{font-size:clamp(30px,4.5vw,42px);margin-bottom:10px}
.toycopy p{color:var(--muted);margin:0 0 6px}
/* features */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat .card{text-align:center;padding:22px 16px}
.feat .ico{font-size:42px;line-height:1;display:block;margin-bottom:8px}
.feat h3{font-size:21px;margin-bottom:4px}
.feat p{margin:0;font-size:15px;color:var(--muted)}
/* promise */
.promise{background:var(--band);color:#fff;position:relative;overflow:hidden}
.promise h2{color:#fff;text-align:center;font-size:clamp(30px,5vw,44px);margin-bottom:28px}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:760px;margin:0 auto 26px;padding:0;list-style:none}
.checks li{background:var(--island);border:2px solid #8B76F0;border-radius:20px;padding:14px 16px 14px 56px;position:relative;font-weight:800}
.checks li:before{content:"\2713";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-weight:900;box-shadow:0 3px 0 var(--green2)}
.promise .more{text-align:center}.promise .more a{color:var(--gold);font-weight:900}
/* kids */
.kids{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:36px 0 0}
.kids img{width:110px;height:110px;margin:0 -4px;animation:bob 4s ease-in-out infinite}
.kids img:nth-child(2n){animation-delay:-1.3s;margin-top:14px}.kids img:nth-child(3n){animation-delay:-2.4s}
/* cta */
.final{text-align:center}
.final .box{background:linear-gradient(160deg,var(--gold),#FFD875);border-radius:34px;padding:42px 20px;box-shadow:0 8px 0 var(--gold2);border:4px solid #fff;color:#3A2600}
.final h2{font-size:clamp(30px,5vw,46px);margin-bottom:8px}
.final p{margin:0 0 22px;font-size:18px}
.final .cta{justify-content:center}
/* footer */
footer.foot{background:var(--ink);color:#D8CFFF;padding:30px 20px;text-align:center;font-size:15px}
footer.foot a{color:#fff;margin:0 10px;font-weight:800;text-decoration:none}
footer.foot a:hover{text-decoration:underline}
footer.foot p{margin:12px 0 0}
/* inner pages */
.page{background:var(--bg)}
main.doc{max-width:860px;margin:0 auto;padding:30px 20px 56px}
main.doc .card{padding:28px}
main.doc h1{font-size:clamp(34px,6vw,48px);margin-bottom:12px;color:var(--band)}
main.doc h2{font-size:26px;margin:1.6em 0 .3em;color:var(--band)}
main.doc p,main.doc li{font-weight:600}
main.doc ul.ticks{list-style:none;padding:0}
main.doc ul.ticks li{padding-left:30px;position:relative;margin:.5em 0}
main.doc ul.ticks li:before{content:"\2713";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center}
table{border-collapse:collapse;width:100%;font-size:15px;display:block;overflow-x:auto}
th,td{border:1px solid var(--outline);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--tint)}
.note{font-size:14px;color:var(--muted)}
@media(max-width:860px){.feat{grid-template-columns:repeat(2,1fr)}.toybox{grid-template-columns:1fr}}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.copy{margin:0 0 -6px;text-align:center}.cta{justify-content:center}.stage{justify-self:center}}
@media(max-width:520px){header.top nav a:nth-child(-n+2){display:none}}
@media(max-width:700px){.grid3{grid-template-columns:1fr}.step{transform:none!important}.checks{grid-template-columns:1fr}.hero{padding-top:20px}nav a{padding:6px 8px;font-size:15px}.brand{font-size:24px}.trail-in{padding-left:44px;padding-right:44px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}