/* Two landing variants share this file.
   A = "Big answers" (peach cream, lavender, plum). B = "A whole world inside you" (cream, sunny yellow, coral, teal).
   Deliberate light designs: every color is explicit, so they look the same in any theme. */
:root{
  --bg:#FBF0E8; --ink:#4A1B47; --muted:#6B4D68; --band:#EBDDF5; --band2:#F3E8FA; --peach:#F8DCC9; --peach2:#FCE9DD;
  --accent:#E2574C; --spark:#F2B227; --deep:#5A2150; --onDeep:#FFF4EC; --line:#E6D3E3; --teal:#1E9486;
  --display:"Baloo 2","Fredoka","Trebuchet MS",system-ui,sans-serif;
  --text:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1160px; color-scheme:light;
}
.vb{background:var(--bg);color:var(--ink);
  --bg:#FFF8EC; --ink:#4B2417; --muted:#6D4A3C; --band:#FFF1D2; --peach:#FBDCCB; --line:#F1DEC4;
  --accent:#E4553A; --spark:#F5B60F; --deep:#E8604C; --onDeep:#FFFFFF; --teal:#178A7E; --sun:#FCE39B; --mint:#D6EEE8;
  --display:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--text);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--spark);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));position:relative}
section{position:relative;overflow-x:clip}
.deco{position:absolute;pointer-events:none;z-index:0}
.sp{position:absolute;width:38px;height:38px;color:var(--spark);pointer-events:none}
.sp.r{transform:scaleX(-1)}
.wave{display:block;width:100%;height:70px;margin:0}
.wave path{fill:var(--f)}

/* review switcher (artifact only) */
.review{background:#2B2233;color:#fff;font:600 13px/1 system-ui,sans-serif;display:flex;gap:6px;justify-content:center;padding:8px;flex-wrap:wrap;position:relative;z-index:5}
.review a{color:#fff;text-decoration:none;padding:6px 12px;border-radius:999px;background:#ffffff1f}
.review a[aria-current]{background:#F7C531;color:#2B2233}

/* header */
.top{position:relative;z-index:3}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);position:relative}
.logo img{width:72px;height:72px;border-radius:50%;border:4px solid var(--ink);background:#fff}
.vb .logo img{border-radius:0;background:none;border:0;padding:0;width:76px;height:76px}
.logo b{font:800 1.9rem/1 var(--display);display:block}
.logo i{display:block;font:800 1.05rem/1 var(--display);font-style:normal;background:var(--peach);padding:5px 12px 3px;border-radius:12px;margin-top:5px;width:max-content}
.vb .logo i{background:none;padding:0;color:var(--accent);font-size:1.2rem}
.logo .sp{right:-30px;top:-8px;width:26px;height:26px}
.nav{display:flex;gap:34px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:1.05rem}
.nav a:hover{color:var(--accent)}

/* mobile menu (no framework: a details element) */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;width:48px;height:48px;border-radius:14px;background:#fff;border:2px solid var(--line);display:grid;place-content:center;gap:5px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;width:22px;height:3px;border-radius:3px;background:var(--ink);transition:transform .2s,opacity .2s}
.mnav[open] summary span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.mnav[open] summary span:nth-child(2){opacity:0}
.mnav[open] summary span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mpanel{position:absolute;right:0;top:58px;background:#fff;border:2px solid var(--line);border-radius:20px;padding:8px;display:grid;min-width:220px;box-shadow:0 18px 40px -18px #4b241766;z-index:10}
.mpanel a{color:var(--ink);text-decoration:none;font:600 1.15rem/1 var(--display);padding:14px 16px;border-radius:12px}
.mpanel a:hover,.mpanel a:focus-visible{background:#FFF0C2}
@media (max-width:760px){.vb .logo{min-width:0}.vb .logo i{width:auto;font-size:1rem;line-height:1.15}.top .nav{display:none}.mnav{display:block}.top .wrap{flex-wrap:nowrap}}

/* hero */
.hero>.wrap{display:grid;align-items:center;gap:20px;padding-block:10px 0;z-index:1}
.va .hero>.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr)}
.vb .hero>.wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) minmax(0,.9fr)}
.copy{display:grid;gap:22px;min-width:0;position:relative;z-index:2;align-content:center}
.h1{font-size:clamp(2.8rem,6vw,4.9rem);font-weight:800;letter-spacing:-.015em;position:relative}
.va .h1{transform:rotate(-4deg);transform-origin:left;line-height:.98}
.vb .h1{font-weight:700;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:.98}
.vb .h1 em{font-style:normal;color:var(--accent);display:inline-block;position:relative;white-space:nowrap}
.vb .h1 em::after{content:"";position:absolute;left:8%;right:10%;bottom:-.14em;height:.12em;border-radius:99px;background:var(--spark);transform:rotate(-2deg)}
.lead{font-size:1.15rem;color:var(--ink);max-width:36ch;line-height:1.55}

/* A hero art */
.va .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:var(--peach);clip-path:polygon(0 60%,10% 35%,22% 22%,34% 24%,46% 40%,58% 58%,70% 66%,82% 52%,92% 30%,100% 22%,100% 100%,0 100%);z-index:0}
.kids{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:560px;padding-top:190px;z-index:1}
.kids>img{max-height:400px;width:auto;margin-inline:-8px}
.bubble{position:absolute;font:800 1.45rem/1.05 var(--display);text-align:center;padding:22px 20px 18px;border-radius:50% 50% 48% 52%/55% 55% 45% 45%;width:178px;display:grid;justify-items:center;gap:6px;z-index:2}
.bubble::after{content:"";position:absolute;bottom:-14px;width:30px;height:30px;background:inherit;border-radius:0 0 0 18px;transform:skewX(-20deg);z-index:-1}
.bubble img{width:46px;height:auto}
.bubble.b1{background:var(--peach);top:10px;left:2%;transform:rotate(-5deg)}
.bubble.b1::after{left:58%}
.bubble.b2{background:#E4D2F4;top:40px;right:-4%;transform:rotate(4deg)}
.bubble.b2::after{left:22%;transform:skewX(20deg);border-radius:0 0 18px 0}
.bubble .sp{width:30px;height:30px;right:-24px;bottom:30px}
.plant{left:-20px;bottom:0;width:120px;height:auto;z-index:0}
.blob-tr{right:-80px;top:-60px;width:260px;height:210px;border-radius:50%;background:#E6D3F5}

/* B hero art */
.boy-big{position:relative;justify-self:start;margin-left:-40px;margin-top:70px;z-index:1}
.boy-big img{max-height:600px;width:auto;position:relative}
.sunblob{left:-160px;top:40px;width:640px;height:auto;z-index:0}
.peachblob{right:-60px;top:20px;width:340px;height:auto}
.mintblob{right:-40px;bottom:0;width:420px;height:auto}
.vb .hero .sp{z-index:2}

/* phone */
.phone{justify-self:center;width:min(270px,100%);aspect-ratio:9/18.6;border-radius:46px;padding:7px;background:linear-gradient(135deg,#f1f1f4,#a4a4ac 40%,#e6e6ea 60%,#8e8e96);box-shadow:0 30px 60px -22px #4a1b4770;position:relative;transform:rotate(5deg);z-index:2}
.vb .phone{transform:rotate(4deg)}
.phone>.in{height:100%;border-radius:40px;background:#141218;padding:7px}
.phone .notch{position:absolute;top:22px;left:50%;width:84px;height:24px;border-radius:14px;background:#141218;transform:translateX(-50%);z-index:3}
.screen{height:100%;border-radius:33px;overflow:hidden;background:linear-gradient(#E9DDF8,#D7C3F0);display:flex;flex-direction:column;align-items:center;padding:12px;gap:6px;position:relative}
.vb .screen{background:linear-gradient(#FFE59A,#FFF1C9)}
.status{display:flex;justify-content:space-between;width:100%;font:700 .7rem/1 var(--text);padding:2px 14px 0;color:#222}
.status i{font-style:normal;letter-spacing:1px}
.screen .bar{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:14px;gap:4px}
.screen .app{display:flex;align-items:center;gap:6px;font:800 .82rem/1 var(--display);margin:0 auto}
.screen .app img{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink)}
.round{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;flex:none}
.round svg{width:16px;height:16px}
.round.coral{background:#E4553A}.round.teal{background:#178A7E}
.screen .body{flex:1;min-height:0;display:flex;align-items:center;gap:6px;width:100%;justify-content:center;position:relative}
.screen .body>img{max-height:100%;width:auto;min-width:0;position:relative;z-index:1}
.va .screen .body::after{content:"";position:absolute;bottom:2%;left:22%;right:22%;height:16px;border-radius:50%;background:#C8B0E8;z-index:0}
.screen .side{display:grid;gap:5px;flex:none}
.screen .side span{display:grid;justify-items:center;border-radius:12px;padding:5px 6px 4px;font:600 .6rem/1.1 var(--display);width:58px;box-shadow:inset 0 0 0 2px #ffffffb0}
.screen .side img{width:30px;height:24px;object-fit:contain}
.screen .tabs{display:flex;gap:6px;width:100%}
.screen .tabs span{flex:1;background:#FFF4EA;border-radius:14px;display:grid;justify-items:center;gap:3px;font:700 .64rem/1 var(--text);padding:8px 2px 7px}
.screen .tabs svg{width:18px;height:18px}

.phone.shot{aspect-ratio:auto}
.phone.shot>.in{height:auto}
.phone.shot .notch{width:12px;height:12px;top:16px;border-radius:50%}
.shotimg{width:100%;height:auto;border-radius:33px;background:#F6F1EA}

/* text pages (privacy, help) */
.doc{max-width:760px;padding-block:20px 72px;display:grid;gap:16px}
.doc h1{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700}
.doc h2{font-size:1.5rem;font-weight:600;margin-top:14px}
.doc ul{margin:0;padding-left:22px;display:grid;gap:6px}
.doc .lead{max-width:none;color:var(--muted)}
.doc .eyebrow{font:700 .85rem/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.doc .note{background:#FFF0C2;border-radius:18px;padding:14px 18px}
.email{font-weight:700;user-select:all}
.page-top{position:relative;overflow-x:clip}

/* store buttons */
.get{display:grid;gap:10px}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:grid;background:var(--ink);color:#fff;text-decoration:none;border-radius:14px;padding:9px 18px;font:800 1.1rem/1.1 var(--display);min-width:160px}
.store small{font:600 .72rem/1.2 var(--text);opacity:.8}
.store:hover{background:var(--accent)}
.vb .store{background:var(--accent);box-shadow:0 4px 0 #B83E27;transition:transform .12s,box-shadow .12s}
.vb .stores .store+.store{background:var(--teal);box-shadow:0 4px 0 #0F6158}
.vb .store:hover{transform:translateY(-2px);box-shadow:0 6px 0 #B83E27}
.vb .stores .store+.store:hover{box-shadow:0 6px 0 #0F6158}
.vb .close .store,.vb .close .stores .store+.store{background:#fff;color:var(--accent);box-shadow:0 4px 0 #B83E27}
.soon{color:var(--muted);font-size:.92rem}

/* section heading */
.h2{font-size:clamp(2rem,4.4vw,3rem);font-weight:800;text-align:center;position:relative;width:max-content;max-width:100%;margin:0 auto}
.vb .h2{font-weight:700}
.h2 .alt{color:var(--teal);display:block}
.h2 .sp.l{left:-50px;top:-6px}
.h2 .sp.r{right:-50px;top:-6px}
.sub{text-align:center;color:var(--ink);margin-top:8px;font-size:1.1rem}

/* topics */
.topics-sec{padding-block:30px 40px}
.va .topics-sec{background:linear-gradient(var(--band),var(--band2))}
.topics{display:grid;gap:18px;list-style:none;padding:0;margin:34px 0 0}
.va .topics{grid-template-columns:repeat(5,minmax(0,1fr))}
.vb .topics{grid-template-columns:repeat(6,minmax(0,1fr))}
.topic{border-radius:30px;padding:26px 14px 22px;text-align:center;display:grid;gap:8px;justify-items:center;align-content:start;position:relative}
.va .topic{background:linear-gradient(#FFF3EB,#FBE1D2);box-shadow:inset 0 0 0 2px #ffffffaa,0 6px 18px -10px #4a1b4740}
.va .topic:nth-child(even){background:linear-gradient(#F8F1FD,#EADCF7)}
.vb .topic{padding:22px 10px 20px;box-shadow:inset 0 0 0 2px #ffffff90}
.vb .topic:nth-child(1){background:#FCE2E4}.vb .topic:nth-child(2){background:#EEE3F9}.vb .topic:nth-child(3){background:#FDE0D7}
.vb .topic:nth-child(4){background:#FFF0C2}.vb .topic:nth-child(5){background:#F2DDF4}.vb .topic:nth-child(6){background:#DCEFF6}
.topic .pic{position:relative;height:110px;display:grid;place-items:center}
.topic .pic img{max-height:110px;width:auto;max-width:130px}
.vb .topic .pic{height:96px}
.vb .topic .pic img{max-height:96px}
.topic .sp{width:30px;height:30px}
.topic .sp.l{left:-26px;top:4px}
.topic .sp.r{right:-26px;top:-4px}
.topic h3{font-size:1.4rem;font-weight:800}
.vb .topic h3{font-size:1.2rem;font-weight:600}
.topic p{font-size:1rem;color:var(--ink);line-height:1.3}
.also{text-align:center;margin-top:22px;color:var(--ink)}
.also b{font-weight:800}

/* parents */
.parents{padding-block:30px 40px}
.parents .wrap{display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,1.25fr);gap:40px;align-items:center}
.vline{align-self:stretch;background:var(--line);border-radius:2px;margin-block:30px}
.family{position:relative;display:grid;place-items:center;min-height:380px}
.family .blob{position:absolute;inset:0;width:120%;height:100%;left:-12%}
.family>img{position:relative;max-height:380px;width:auto}
.parents h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;position:relative}
.vb .parents h2{font-weight:700}
.parents h2 .sp{position:relative;display:inline-block;vertical-align:middle;width:34px;height:34px;margin-left:6px}
.heart-i{display:inline-block;width:38px;height:34px;vertical-align:middle;margin-left:6px}
.intro{color:var(--ink);margin-top:10px;max-width:46ch}
.feats{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:24px}
.feats li{display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:center}
.ic{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;position:relative}
.va .ic{background:linear-gradient(#FFE7DA,#F8D2C0)}
.va .feats li:nth-child(2) .ic{background:linear-gradient(#EFE3FA,#DCC8F1)}
.ic svg{width:40px;height:40px}
.vb .ic img{max-height:70px;width:auto}
.vb .ic .sp{left:-22px;top:-14px;width:28px;height:28px}
.feats b{font:800 1.35rem/1.15 var(--display);display:block}
.vb .feats b{font-weight:600}
.feats span{color:var(--ink)}

/* B parents */
.vb .parents .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);row-gap:10px}
.vb .parents .head{grid-column:1;position:relative;z-index:1}
.vb .parents .family{grid-column:1;grid-row:2;min-height:0;padding-top:70px}
.vb .parents .family>img{max-height:none;width:100%}
.vb .parents .feats{grid-column:2;grid-row:1/3;margin:0}
.sunround{position:absolute;width:min(48%,280px);aspect-ratio:1;border-radius:50%;background:var(--sun);left:52%;bottom:40%;transform:translateX(-50%)}
.sofa{position:absolute;left:2%;right:4%;bottom:4%;height:32%;z-index:0;background:#2E9C93;border-radius:46px 46px 20px 20px}
.leaf{left:-50px;bottom:60px;width:150px;height:auto}
.bush{right:-40px;bottom:-30px;width:210px;height:auto}

/* price + faq */
.sec{padding-block:56px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.plan{border-radius:30px;padding:28px;display:grid;gap:8px;align-content:start;background:linear-gradient(#FFF3EB,#FBE1D2)}
.plan:nth-child(2){background:linear-gradient(#F8F1FD,#EADCF7)}
.vb .plan{background:#FFF0C2}.vb .plan:nth-child(2){background:#FCE2E4}
.plan h3{font-size:1.3rem}
.amount{font:800 3rem/1 var(--display)}
.fine{color:var(--muted);font-size:.92rem;margin-top:14px;text-align:center}
.faq{max-width:760px;margin:24px auto 0}
details{border-bottom:2px solid var(--line);padding-block:16px}
summary{cursor:pointer;font:800 1.2rem/1.3 var(--display)}
.vb summary{font-weight:600}
details p{margin-top:8px;color:var(--muted)}

/* closing band */
.close{background:var(--deep);color:var(--onDeep);overflow:hidden}
.close .wrap{display:flex;align-items:center;gap:32px;padding-block:30px 46px;flex-wrap:wrap;z-index:1}
.close h2{color:var(--onDeep);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;flex:1 1 360px;position:relative}
.vb .close h2{font-weight:700;text-align:center}
.vb .close h2 span{color:#FFE45C}
.close h2 .sp{right:4%;top:0}
.bulb{width:84px;height:84px;flex:none}
.close .divider{width:2px;align-self:stretch;background:#ffffff44}
.close p.say{max-width:30ch;font-size:1.1rem}
.close .store{background:#fff;color:var(--deep)}
.close .soon{color:var(--onDeep);opacity:.85}
.close-maya{height:200px;width:auto;margin-block:-30px -50px;align-self:flex-end;position:relative}
.vb .close .wrap{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"m h" "m s";column-gap:32px;row-gap:20px;align-items:center}
.vb .close-maya{grid-area:m;height:230px;margin-block:-10px -46px}
.vb .close h2{grid-area:h;margin:0}
.vb .close .stores{grid-area:s;justify-content:center}
.close .blobl{left:-60px;bottom:-60px;width:200px;height:150px;border-radius:50%;background:#73356A}
.close .blobr{right:-50px;top:-40px;width:180px;height:150px;border-radius:50%;background:#73356A}

.foot{padding-block:26px;font-size:.9rem;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot nav{display:flex;gap:16px}
.fl{display:flex;align-items:center;gap:10px}
.fl img{width:36px;height:36px;flex:none}
.foot a{color:var(--muted)}

.cc{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:560px;margin-inline:auto;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:20px;padding:14px 16px;box-shadow:0 12px 30px -12px #4b241755;z-index:20;display:grid;gap:10px;font-size:.95rem}
.cc[hidden]{display:none}
.cc-b{display:flex;gap:8px;justify-content:flex-end}
.cc button{font:700 .95rem/1 var(--text);border-radius:12px;padding:10px 16px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.cc #ccYes{background:var(--teal);border-color:var(--teal);color:#fff}
.doc code{font-size:.9em;background:#fff;padding:1px 5px;border-radius:6px}

@media (max-width:1060px){
  .va .hero>.wrap{grid-template-columns:1fr 1fr}
  .va .copy{grid-column:1/-1}
  .vb .hero>.wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .vb .boy-big,.sunblob{display:none}
  .nav{gap:20px}
  .va .topics,.vb .topics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vb .parents .wrap,.parents .wrap{grid-template-columns:1fr}
  .vline{display:none}
  .vb .parents .head,.vb .parents .family,.vb .parents .feats{grid-column:1;grid-row:auto}
}
@media (max-width:680px){
  .va .hero>.wrap,.vb .hero>.wrap{grid-template-columns:1fr}
  .va .phone,.vb .boy-big,.sunblob,.peachblob,.plant{display:none}
  .vb .phone{transform:rotate(2deg);width:min(240px,72vw);margin-bottom:30px}
  .kids{min-height:0;padding-top:150px}
  .kids>img{max-height:300px}
  .bubble{width:130px;font-size:1.05rem;padding:14px 12px}
  .va .topics,.vb .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:1fr}
  .nav{gap:16px;font-size:.95rem}
  .h2 .sp,.logo .sp,.h1 .sp{display:none}
  .close-maya,.close .divider{display:none}
  .vb .close .wrap{grid-template-columns:1fr;grid-template-areas:"h" "s"}
  .logo img{width:56px;height:56px}
  .logo b{font-size:1.6rem}
  .family{min-height:300px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}