:root{
  --bg:#F4F0E8;--bg2:#EFE9DD;--card:#fff;--ink:#1A2540;--ink2:#5F5A51;--link:#1C3A6B;--link-h:#2C5596;
  --navy:#1C3A6B;--navy-g:linear-gradient(160deg,#2C5596 0%,#1C3A6B 55%,#152C54 100%);
  --sun:#FFC22E;--sun-g:linear-gradient(150deg,#FFE37A,#FFC22E);--sun-ink:#2A2000;
  --emma:#CC4236;--emma-g:linear-gradient(145deg,#CC4236,#A92E25);--emma-t:#FFE7E2;--emma-d:#B8352B;
  --noah:#2570C8;--noah-g:linear-gradient(145deg,#2570C8,#1A55A8);--noah-t:#DDEEFD;--noah-d:#1E5FB0;
  --lily:#8A55E6;--lily-g:linear-gradient(145deg,#8A55E6,#6A36CC);--lily-t:#EEE5FD;--lily-d:#6B3BCF;
  --leaf:#17703A;--leaf-t:#DDF3E3;
  --sh:0 1px 2px rgba(50,40,20,.05),0 14px 32px -16px rgba(50,40,20,.28);
  --sh-lg:0 2px 4px rgba(50,40,20,.05),0 30px 60px -28px rgba(50,40,20,.4);
  --sh-navy:0 18px 30px -14px rgba(21,44,84,.6),inset 0 1px 0 rgba(255,255,255,.16);
  --round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--link-h)}
h1,h2,h3{font-family:var(--round);text-wrap:balance;margin:0;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:#fff;padding:8px 12px;border-radius:10px;z-index:10}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(244,240,232,.84);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 1px 0 rgba(50,40,20,.06),0 8px 24px -18px rgba(50,40,20,.35)}
.top .wrap{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font:800 20px var(--round);color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px}
.brand:hover{color:var(--ink)}
.brand.sm{font-size:16px}.brand.sm img{width:24px;height:24px;border-radius:6px}
.nav{display:flex;gap:4px;margin-left:auto;font:700 15px var(--round)}
.nav a{color:var(--ink);text-decoration:none;padding:9px 14px;border-radius:20px}
.nav a:hover,.nav a[aria-current]{background:#fff;color:var(--ink);box-shadow:var(--sh)}

/* App Store badge */
.store{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border-radius:18px;background:linear-gradient(180deg,#26262a,#000);color:#fff;text-decoration:none;font-family:var(--round);box-shadow:0 16px 28px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.store:hover{color:#fff;background:linear-gradient(180deg,#34343a,#111)}
.store svg{width:22px;height:26px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.05}
.store small{font-size:11px;font-weight:600}
.store b{font-size:19px;font-weight:700;letter-spacing:-.01em}
.store.sm{height:40px;border-radius:12px;padding:0 14px 0 12px;gap:8px;box-shadow:0 8px 16px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.store.sm svg{width:16px;height:19px}.store.sm small{font-size:9px}.store.sm b{font-size:15px}

/* buttons */
.btn{display:inline-flex;align-items:center;height:50px;padding:0 24px;border-radius:25px;background:var(--navy-g);color:#fff;font:700 16px var(--round);text-decoration:none;box-shadow:var(--sh-navy)}
.btn:hover{color:#fff;background:linear-gradient(160deg,#3663AB 0%,#22457E 55%,#18325E 100%)}
.btn.soft{background:#fff;color:var(--ink);box-shadow:var(--sh)}.btn.soft:hover{background:#FBF9F4;color:var(--ink)}

/* kid color helpers */
.dots{display:inline-flex;gap:4px}.dots i{width:10px;height:10px;border-radius:5px;display:block}
.k-emma{background:var(--emma-g)}.k-noah{background:var(--noah-g)}.k-lily{background:var(--lily-g)}.k-sun{background:var(--sun-g)}

/* hero */
.hero{position:relative;padding:72px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(37,112,200,.14),rgba(37,112,200,0) 65%);pointer-events:none}
.hero::after{content:"";position:absolute;left:-200px;top:260px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,46,.2),rgba(255,194,46,0) 65%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hero-icon{width:128px;height:128px;border-radius:30px;box-shadow:0 26px 40px -20px rgba(28,58,107,.55),0 4px 10px rgba(28,58,107,.12)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font:700 14px var(--round);color:var(--ink);background:#fff;padding:8px 16px 8px 12px;border-radius:20px;box-shadow:var(--sh)}
.hero h1{font-size:60px;line-height:1.02;font-weight:800;margin-top:20px;max-width:15ch}
.hero h1 em{font-style:normal;background:var(--noah-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:20px;line-height:1.5;color:var(--ink2);max-width:32em;margin-top:20px}
.hero .cta{display:flex;gap:18px;align-items:center;margin-top:30px;flex-wrap:wrap}
.hero .note{font:700 14px var(--round);color:var(--ink2)}
.hero-art{margin:0;position:relative;border-radius:40px;padding:10px;background:linear-gradient(160deg,#fff,#FBF7EF);box-shadow:var(--sh-lg)}
.hero-art img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:32px;background:linear-gradient(145deg,#FFF3D6,#DDEEFD)}

/* phones */
.screens{padding:40px 0 104px}
.stage{position:relative;border-radius:48px;padding:56px 32px 44px;background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F2 60%,#F3EDE2 100%);box-shadow:var(--sh-lg),inset 0 1px 0 #fff;overflow:hidden}
.stage::before{content:"";position:absolute;left:50%;top:-240px;width:900px;height:520px;margin-left:-450px;border-radius:50%;background:radial-gradient(closest-side,rgba(37,112,200,.12),rgba(37,112,200,0));pointer-events:none}
.phones{position:relative;display:flex;justify-content:center;gap:44px}
.phone{margin:0;flex:none;width:280px;display:flex;flex-direction:column;align-items:center;gap:22px}
.phone:nth-child(2){margin-top:44px}
.device{width:100%;padding:9px;border-radius:50px;background:linear-gradient(160deg,#3A3B40,#16171A 40%,#0E0F11);box-shadow:0 34px 60px -26px rgba(26,37,64,.55),0 6px 14px rgba(26,37,64,.12),inset 0 1px 0 rgba(255,255,255,.14)}
.device img{width:100%;aspect-ratio:402/874;border-radius:42px;object-fit:cover;background:linear-gradient(180deg,#F4F0E8,#EFE9DD)}
.phone figcaption{font:600 15px/1.4 var(--round);color:var(--ink2);text-align:center;max-width:26ch}

/* sections */
.sec{padding:96px 0}
.sec.alt{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 20%,rgba(255,255,255,.55) 80%,rgba(255,255,255,0))}
.sec h2{font-size:46px;line-height:1.06;font-weight:800;max-width:18ch}
.sec .intro{font-size:19px;color:var(--ink2);margin-top:14px;max-width:34em}
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:48px}
.reason{background:var(--card);border-radius:32px;padding:30px 28px 32px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh)}
.reason .num{width:48px;height:48px;border-radius:16px;color:#fff;font:800 21px/48px var(--round);text-align:center;background:var(--navy-g);box-shadow:var(--sh-navy)}
.reason.b .num{background:var(--sun-g);color:var(--sun-ink);box-shadow:0 14px 24px -12px rgba(215,150,0,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.reason h3{font-size:24px;line-height:1.15;font-weight:800;margin-top:8px}
.reason p{font-size:16.5px;color:#4A463F}
.source{margin-top:8px;background:linear-gradient(160deg,#F7F3EB,#EFE9DD);border-radius:18px;padding:14px 16px;font:600 13.5px/1.45 var(--round);color:var(--ink2);box-shadow:inset 0 1px 0 #fff}
.source b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.kids{margin-top:auto;padding-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kid{border-radius:18px;padding:12px 12px 11px;color:#fff;display:flex;flex-direction:column;gap:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.kid.k-emma{box-shadow:0 12px 20px -12px rgba(169,46,37,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.kid.k-noah{box-shadow:0 12px 20px -12px rgba(26,85,168,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.kid.k-lily{box-shadow:0 12px 20px -12px rgba(106,54,204,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.kid i{width:20px;height:20px;border-radius:10px;background:#fff;display:block}
.kid b{display:block;font:800 16px/1.1 var(--round)}.kid small{font:600 12px var(--text)}

.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:48px;align-items:stretch}
.price{background:var(--card);border-radius:32px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh)}
.price.pick{background:var(--navy-g);color:#fff;box-shadow:0 30px 50px -24px rgba(21,44,84,.7),inset 0 1px 0 rgba(255,255,255,.16);transform:translateY(-10px)}
.price .tag{align-self:flex-start;font:700 13px var(--round);padding:5px 12px;border-radius:12px;background:var(--noah-t);color:var(--noah-d)}
.price .tag.g{background:var(--leaf-t);color:var(--leaf)}.price .tag.p{background:var(--lily-t);color:var(--lily-d)}
.price.pick .tag{background:var(--sun-g);color:var(--sun-ink)}
.price h3{font-size:22px;font-weight:800}
.amt{font:800 46px/1 var(--round);letter-spacing:-.02em}.amt small{font-size:16px;font-weight:600;color:var(--ink2);letter-spacing:0}
.price .fine{font:600 14px var(--round);color:var(--ink2);margin-top:-6px}
.price.pick .amt small,.price.pick .fine{color:#fff}
.price ul{list-style:none;margin:6px 0 0;padding:16px 0 0;display:flex;flex-direction:column;gap:10px;font-size:16px;position:relative}
.price ul::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:1px;background:linear-gradient(90deg,rgba(50,40,20,.1),rgba(50,40,20,0))}
.price.pick ul::before{background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.price li{display:flex;gap:10px;align-items:flex-start}
.price li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:10px;background:linear-gradient(145deg,#3FAE62,#1E8A45);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.price li::after{content:"";position:absolute;width:5px;height:9px;margin:6px 0 0 7.5px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.price li{position:relative}
.price.pick li::before{background:#fff}.price.pick li::after{border-color:var(--navy)}
.pricenote{margin-top:26px;font-size:15px;color:var(--ink2)}

.faq{margin-top:40px;display:flex;flex-direction:column;gap:12px;max-width:800px}
.faq details{background:var(--card);border-radius:24px;box-shadow:var(--sh)}
.faq summary{list-style:none;cursor:pointer;padding:22px 68px 22px 26px;font:800 19px/1.3 var(--round);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";position:absolute;right:20px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:16px;background:linear-gradient(180deg,#F6F2EA,#ECE5D8);box-shadow:inset 0 1px 0 #fff}
.faq summary::after{content:"";position:absolute;right:32px;top:50%;width:7px;height:7px;margin-top:-6px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details>div{padding:0 26px 24px;color:#4A463F;display:flex;flex-direction:column;gap:10px}

.final{padding:24px 0 104px}
.final .card{position:relative;overflow:hidden;border-radius:48px;padding:72px 32px;text-align:center;background:var(--navy-g);color:#fff;box-shadow:0 40px 70px -34px rgba(21,44,84,.75),inset 0 1px 0 rgba(255,255,255,.16)}
.final .card::before{content:"";position:absolute;right:-160px;top:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.14),rgba(255,255,255,0))}
.final .card::after{content:"";position:absolute;left:-120px;bottom:-240px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,194,46,.22),rgba(255,194,46,0))}
.final .card>*{position:relative;z-index:1}
.final img{width:96px;height:96px;margin:0 auto 24px;border-radius:24px;box-shadow:0 20px 34px -14px rgba(0,0,0,.55)}
.final h2{font-size:42px;font-weight:800;margin:0 auto;max-width:18ch}
.final p{color:#fff;margin:12px auto 30px;font-size:18px}

/* footer */
.foot{padding:28px 0 44px;font:700 14px var(--round);color:var(--ink2)}
.foot .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.foot nav{display:flex;gap:20px}
.foot a{color:var(--ink);text-decoration:none}.foot a:hover{color:var(--link-h)}
.foot .by{margin-left:auto}

/* document pages */
.doc{padding:72px 0 96px}
.doc .wrap{max-width:800px}
.doc h1{font-size:50px;line-height:1.05;font-weight:800}
.doc .meta{font:700 15px var(--round);color:var(--ink2);margin-top:14px}
.doc .summary{margin-top:32px;background:var(--noah-g);color:#fff;border-radius:28px;padding:26px 28px;display:grid;gap:10px;box-shadow:0 24px 40px -22px rgba(26,85,168,.65),inset 0 1px 0 rgba(255,255,255,.2)}
.doc .summary b{font:800 18px var(--round)}
.doc .summary ul{margin:0;padding-left:20px;display:grid;gap:4px}
.doc h2{font-size:27px;font-weight:800;margin:48px 0 10px}
.doc p+p{margin-top:12px}
.doc ul.plain{margin:10px 0 0;padding-left:22px;display:grid;gap:6px}
.mail{margin-top:32px;background:var(--card);border-radius:28px;padding:24px 26px;box-shadow:var(--sh);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mail .ic{width:54px;height:54px;border-radius:18px;background:var(--navy-g);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--sh-navy)}
.mail div{flex:1;min-width:200px}
.mail b{display:block;font:800 20px var(--round)}
.mail span{color:var(--ink2);font-size:15px}
.steps{margin:10px 0 0;padding-left:22px;display:grid;gap:6px}

/* 404 */
.nf{min-height:calc(100vh - 66px - 96px);display:flex;align-items:center;padding:72px 0}
.nf .wrap{text-align:center}
.nf .rows{display:inline-flex;flex-direction:column;gap:8px;margin-bottom:32px;padding:18px;border-radius:28px;background:#fff;box-shadow:var(--sh)}
.nf .rows i{display:block;width:140px;height:18px;border-radius:9px}
.nf .rows i.gap{background:linear-gradient(180deg,#F1ECE2,#E8E1D3);box-shadow:inset 0 1px 2px rgba(50,40,20,.12)}
.nf h1{font-size:50px;font-weight:800}
.nf p{color:var(--ink2);font-size:19px;margin:14px auto 30px;max-width:26em}
.nf .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero h1{max-width:18ch}
  .phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -32px;padding:0 32px 10px}
  .phones::-webkit-scrollbar{display:none}
  .phone{scroll-snap-align:center}
  .reasons{grid-template-columns:1fr}
  .kids{max-width:420px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .top .wrap{height:58px;gap:12px}
  .brand{font-size:18px}.brand img{width:30px;height:30px}
  .nav{display:none}
  .top .store.sm{margin-left:auto}
  .hero{padding:40px 0 24px}
  .hero-icon{width:96px;height:96px;border-radius:23px}
  .eyebrow{margin-top:22px}
  .hero h1{font-size:40px;margin-top:16px}
  .hero .lede{font-size:18px;margin-top:14px}
  .hero .cta{gap:12px;margin-top:24px}
  .hero-art{border-radius:30px;padding:8px}.hero-art img{border-radius:23px}
  .screens{padding:24px 0 64px}
  .stage{border-radius:32px;padding:32px 0 28px;margin:0 -8px}
  .phones{gap:18px;margin:0;padding:0 24px 8px}
  .phone{width:240px}
  .phone:nth-child(2){margin-top:0}
  .device{border-radius:44px;padding:8px}.device img{border-radius:37px}
  .sec{padding:64px 0}
  .sec h2{font-size:32px}
  .sec .intro{font-size:17px}
  .reasons,.prices{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .reason{padding:24px 22px 26px;border-radius:26px}
  .reason h3{font-size:22px}
  .price{padding:24px 22px;border-radius:26px}
  .price.pick{order:-1;transform:none}
  .faq summary{font-size:17px;padding:18px 60px 18px 20px}
  .faq details>div{padding:0 20px 20px}
  .final{padding:8px 0 64px}
  .final .card{border-radius:32px;padding:48px 24px;text-align:left}
  .final img{margin:0 0 20px;width:76px;height:76px;border-radius:19px}
  .final h2{font-size:30px;margin:0}
  .final p{margin:10px 0 24px}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .foot .by{margin-left:0}
  .doc{padding:44px 0 64px}
  .doc h1{font-size:36px}
  .doc h2{font-size:22px;margin-top:36px}
  .doc .summary,.mail{padding:20px;border-radius:22px}
  .nf h1{font-size:36px}
  .nf .wrap{text-align:left}.nf .acts{justify-content:flex-start}
}