@font-face{font-family:"Nunito Q";src:url(../fonts/nunito-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter Q";src:url(../fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:#101528;color:#F4F0FF;font-family:"Inter Q",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:#FFD27A}a:hover{color:#FFE7B0}
*:focus-visible{outline:3px solid #FFD27A;outline-offset:3px;border-radius:12px}
img{user-select:none;-webkit-user-drag:none}
.q-d{font-family:"Nunito Q","Nunito",system-ui,sans-serif;font-weight:800;letter-spacing:-0.02em}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 0.04em 0.12em;margin-bottom:-0.12em}
.w>span{display:inline-block}
.layer{position:absolute;inset:0;pointer-events:none}
.fig{position:absolute}
.fig img{display:block;width:100%;height:auto}
.fig>div,.fig>div>div,.fig>div>div>div{transform-origin:50% 92%}
.breath{transform-origin:50% 92%;animation:q-breath 3.6s cubic-bezier(.37,0,.63,1) infinite}
@keyframes q-breath{0%,100%{transform:scale(1,1)}50%{transform:scale(.994,1.016)}}
.contact{position:absolute;left:16%;right:16%;bottom:2%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,6,24,.6),rgba(8,6,24,0));z-index:-1}
.fly{position:absolute;border-radius:50%;background:#FFE7A6;box-shadow:0 0 10px 3px rgba(255,210,122,.7);animation:q-fly var(--d) ease-in-out infinite alternate;animation-delay:var(--dl);opacity:0}
@keyframes q-fly{0%{transform:translate3d(0,0,0);opacity:0}20%{opacity:.95}50%{transform:translate3d(var(--x),var(--y),0);opacity:.35}80%{opacity:1}100%{transform:translate3d(calc(var(--x)*-0.6),calc(var(--y)*1.4),0);opacity:.15}}
.fog{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(240,236,255,.42),rgba(240,236,255,.1) 60%,rgba(240,236,255,0));opacity:0;pointer-events:none}
.field{height:56px;border-radius:18px;border:1.5px solid rgba(185,173,255,.35);background:rgba(16,21,40,.72);color:#F4F0FF;padding:0 20px;font:500 16px "Inter Q",system-ui,sans-serif;outline:none;min-width:0;transition:border-color .3s,box-shadow .3s}
.field::placeholder{color:#BDB6DC}
.field:focus{border-color:#FFD27A;box-shadow:0 0 0 4px rgba(255,210,122,.18)}
.cta{position:relative;height:56px;border:0;border-radius:18px;padding:0 26px;color:#fff;font:800 16px "Nunito Q",system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 30px rgba(101,81,215,.45),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s;white-space:nowrap;overflow:hidden}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));transform:skewX(-18deg) translateX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 40px rgba(101,81,215,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.cta:hover::after{transform:skewX(-18deg) translateX(420%)}
.cta:active{transform:scale(.97)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:#D9D3F5;cursor:pointer;text-align:left}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;border:1.5px solid rgba(185,173,255,.6);background:rgba(16,21,40,.5);cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.check input:checked{background:#FFD27A;border-color:#FFD27A;transform:scale(1.08)}
.check input:checked::after{content:"";width:6px;height:11px;border:solid #1E2140;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.msg{min-height:24px;font-size:15px;line-height:1.5;color:#FFE7B0}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(244,240,255,.08);border:1px solid rgba(244,240,255,.14);font-size:13px;font-weight:600;letter-spacing:.04em;color:#D9D3F5}
.halo{position:fixed;left:0;top:0;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,140,.13),rgba(255,214,140,0));pointer-events:none;z-index:40;opacity:0}
.slide{position:absolute;inset:0;overflow:hidden}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bar{flex:1;height:3px;border-radius:2px;background:rgba(244,240,255,.22);overflow:hidden}
.bar span{display:block;height:100%;background:#FFD27A;transform-origin:0 50%;transform:scaleX(0)}
.marq{white-space:nowrap;font-size:clamp(64px,11vw,168px);line-height:1.05;color:transparent;-webkit-text-stroke:1.5px rgba(185,173,255,.4)}
.marq em{font-style:normal;color:#B9ADFF;-webkit-text-stroke:0;opacity:.9}
.gal-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-wrap::-webkit-scrollbar{display:none}
.gal-card{flex:none;width:min(78vw,1000px,calc((100vh - 450px) * 1.7778));min-width:min(78vw,520px);margin:0;scroll-snap-align:center}
.gal-img{position:relative;overflow:hidden;border-radius:28px;aspect-ratio:16/9;background:#2A2650;box-shadow:0 30px 80px rgba(8,6,24,.55)}
.gal-img img{position:absolute;top:0;left:-8%;width:116%;height:100%;object-fit:cover;display:block}
.bud{position:relative;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;color:#F4F0FF;-webkit-tap-highlight-color:transparent}
.bud__fig{position:relative;width:100%;aspect-ratio:1/1.05;display:block}
.bud__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 92%;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
/* Kids and grown-ups: both pictures sit in the same spot, the switch cross-fades them. */
.bud__fig img.is-adult{opacity:0;transform:translateY(6%) scale(.96);transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.bud__fig img.is-kid{transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.six-grid[data-age="adult"] .bud__fig img.is-kid{opacity:0;transform:translateY(6%) scale(.96)}
.six-grid[data-age="adult"] .bud__fig img.is-adult{opacity:1;transform:none}
.age-switch{display:inline-flex;gap:4px;padding:5px;margin:0 auto 72px;border-radius:999px;background:rgba(16,21,40,.55);border:1px solid rgba(244,240,255,.14)}
.age-switch button{height:42px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:#D9D3F5;font:700 15px "Inter Q",system-ui,sans-serif;cursor:pointer;transition:background .3s,color .3s}
.age-switch button[aria-pressed="true"]{background:#6551D7;color:#fff;box-shadow:0 6px 20px rgba(101,81,215,.45)}
.age-switch button:not([aria-pressed="true"]):hover{color:#fff}
/* Good to know: the honest notes at the end. */
.know-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.know-card{padding:26px 24px;border-radius:24px;background:#171C32;border:1px solid rgba(244,240,255,.08)}
.know-card h3{margin:0 0 10px;font-size:20px;line-height:1.25;letter-spacing:0;color:#F4F0FF}
.know-card p{margin:0;font-size:15px;line-height:1.6;color:#BDB6DC}
.bud__glow{position:absolute;left:10%;right:10%;top:20%;bottom:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,122,.38),rgba(255,210,122,0));opacity:0;transition:opacity .5s;z-index:-1}
.bud:hover .bud__glow,.bud:focus-visible .bud__glow{opacity:1}
.bud[data-kind="tilt"]:hover .bud__fig img{transform:rotate(-9deg) translateY(-3%)}
.bud[data-kind="heart"]:hover .bud__fig img{transform:scale(1.07) translateY(-2%)}
.bud[data-kind="hop"]:hover .bud__fig img{animation:q-hop .8s cubic-bezier(.3,.7,.45,1)}
.bud[data-kind="grow"]:hover .bud__fig img{transform:scale(1.05,1.09)}
.bud[data-kind="puff"]:hover .bud__fig img{transform:scale(1.1,.94)}
.bud[data-kind="twinkle"]:hover .bud__fig img{animation:q-twinkle 1.2s ease-in-out}
@keyframes q-hop{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.1,.9)}55%{transform:translateY(-22%) scale(.94,1.08)}82%{transform:translateY(0) scale(1.08,.93)}100%{transform:translateY(0) scale(1,1)}}
@keyframes q-twinkle{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg) translateY(-2%)}60%{transform:rotate(-3deg)}}
.bubble{position:absolute;bottom:calc(100% - 18px);left:50%;transform:translateX(-50%);width:max-content;max-width:210px;background:#FFF8F0;color:#1E2140;font:600 14px/1.4 "Inter Q",system-ui,sans-serif;padding:12px 16px;border-radius:20px;box-shadow:0 14px 40px rgba(10,8,30,.4);animation:q-pop .55s cubic-bezier(.34,1.7,.6,1) both;z-index:5;text-align:center}
.bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:calc(-8px - var(--shift,0px));border:8px solid transparent;border-top-color:#FFF8F0}
@keyframes q-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.6)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7);animation:q-tw var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes q-tw{0%{opacity:.15}100%{opacity:1}}
.orbit{animation:q-spin 70s linear infinite}
@keyframes q-spin{to{transform:rotate(360deg)}}
.pulse{animation:q-pulse 4s cubic-bezier(.37,0,.63,1) infinite}
@keyframes q-pulse{0%,100%{opacity:.45}18%{opacity:1}40%{opacity:.55}}
.lightname{background:linear-gradient(180deg,#FFF6DD,#FFD27A 55%,#FF9EC7);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:q-flicker 3.2s ease-in-out infinite}
@keyframes q-flicker{0%,100%{opacity:1}50%{opacity:.86}}
@media (max-width:760px){
.form-row{flex-direction:column;align-items:stretch!important}
.form-row .field{flex:none!important;width:100%;box-sizing:border-box}
.six-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:44px!important}
.gal-card{width:84vw;min-width:0}
}
@media (prefers-reduced-motion:reduce){.fly,.breath,.pulse,.lightname,.star,.orbit{animation:none!important}.fly{opacity:.7}}
/* Endless decoration stops while its section is off screen (set by main.js). */
.idle .fly,.idle .breath,.idle .pulse,.idle .star,.idle .orbit,.idle .lightname{animation-play-state:paused}
/* Additions for the production page (not in the mockup). */
html{background:#101528}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.cta[disabled]{cursor:progress}
.msg.is-error{color:#FFB4C8}
[hidden]{display:none!important}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:12px;background:#FFD27A;color:#1E2140;font-weight:700;text-decoration:none}
.skip:focus{top:16px}
noscript .nojs{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;padding:14px 18px;border-radius:16px;background:#2A2650;color:#F4F0FF;font-size:14px;text-align:center}
/* Small pages: confirm, unsubscribe, 404. */
.page{min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:48px 16px;text-align:center;background:radial-gradient(90% 70% at 50% 100%,#3a3470 0%,#2A2650 45%,#1B1838 100%)}
.page h1{margin:0;font-size:clamp(36px,6vw,64px);line-height:1.04}
.page p{margin:0;max-width:520px;font-size:18px;line-height:1.6;color:#E4DFF8}
.page .buddy{width:min(200px,46vw);height:auto}
.page .cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#6551D7;color:#fff}
/* The bar that follows once the hero is gone: logo and the way to the waitlist.
   No backdrop blur: re-blurring on every scroll frame is expensive on phones. */
.topbar{position:fixed;left:50%;top:14px;z-index:50;display:flex;align-items:center;gap:18px;padding:7px 7px 7px 18px;border-radius:999px;background:rgba(16,21,40,.92);border:1px solid rgba(244,240,255,.12);box-shadow:0 12px 40px rgba(8,6,24,.45);transform:translate(-50%,-160%);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
.topbar.is-on{transform:translate(-50%,0);opacity:1}
.topbar img{display:block;width:96px;height:auto}
.topbar-cta{display:inline-flex;align-items:center;white-space:nowrap;height:40px;padding:0 18px;border-radius:999px;background:#6551D7;color:#fff;font:800 14px "Nunito Q",system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 20px rgba(101,81,215,.45);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.topbar-cta:hover{color:#fff;transform:scale(1.04)}
/* The app in a phone: the sticky card of the promises. */
.feat-sticky{display:flex;flex-direction:column;align-items:center}
.phone{position:relative;height:min(calc(100vh - 230px),680px);aspect-ratio:393/852;border-radius:clamp(30px,5.4vh,48px);background:linear-gradient(160deg,#2c3052,#0c0f20 60%);box-shadow:0 0 0 1.5px rgba(244,240,255,.16),inset 0 0 0 1px rgba(255,255,255,.06),0 40px 100px rgba(8,6,24,.6),0 0 140px rgba(124,108,255,.22)}
.phone>.layer{inset:9px;border-radius:calc(clamp(30px,5.4vh,48px) - 9px);overflow:hidden;background:#101528}
.phone .slide img{object-position:50% 0}
.phone-meta{width:min(300px,100%);margin:22px auto 0;display:flex;flex-direction:column;gap:12px}
/* Under the finale button. */
.trust{margin:2px 0 0;font-size:13px;letter-spacing:.02em;color:#BDB6DC}
/* Questions and answers. */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border-radius:20px;background:#171C32;border:1px solid rgba(244,240,255,.08);transition:border-color .3s,background .3s}
.faq-item[open]{border-color:rgba(185,173,255,.35);background:#1B2140}
.faq-item summary{position:relative;list-style:none;cursor:pointer;padding:20px 60px 20px 24px;font-size:18px;line-height:1.35;letter-spacing:0;color:#F4F0FF}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:26px;top:50%;width:9px;height:9px;border:solid #B9ADFF;border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq-item[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq-item p{margin:0;padding:0 24px 22px;font-size:16px;line-height:1.65;color:#C9C2E6}
.marq{-webkit-text-stroke-color:rgba(185,173,255,.55)}

/* Touch: scenes held by position: sticky inside a taller track (main.js, stick()). */
.is-sticky{position:sticky!important;top:0}
.scene-track [data-gallery].is-sticky{height:100svh;display:flex;flex-direction:column;justify-content:center}
/* Phones: the same scroll story, sized to the screen. */
@media (max-width:760px){
header{padding:16px!important}
header .pill{height:30px;padding:0 12px;font-size:12px}
[data-hero]{height:100svh!important}
.hero-copy{padding:124px 16px 0!important;gap:16px!important}
.hero-copy h1{font-size:clamp(36px,10.4vw,50px)!important;line-height:1.02!important;text-wrap:balance}
.hero-copy .hero-br{display:none}
.hero-copy p[data-rise]{font-size:16px!important;line-height:1.55!important}
.hero-nova{width:34vw!important;left:-5vw!important}
.hero-lumi{width:40vw!important;right:-4vw!important}
.hero-fynn,[data-scrollhint-out],[data-copy-shade]{display:none!important}
[data-exit-d]{width:28vw!important;left:36%!important}
.welcome-wrap{padding-bottom:30%!important}
.feat-section{padding:56px 16px 72px!important}
.feat-sticky{top:70px!important;z-index:3;flex:none!important;width:100%}
.phone{height:min(50svh,440px)}
.phone-meta{margin-top:12px;gap:8px;padding-bottom:22px}
.feat-head{margin-bottom:28px!important}
.feat-list{padding:28px 0 6svh!important;gap:24svh!important}
.feat-list h3{font-size:clamp(32px,9vw,40px)!important}
.feat-list p{font-size:17px!important}
.marq{font-size:58px}
.gal-head{padding-top:0!important}
[data-gal-track]{padding-top:24px!important;padding-bottom:18px!important}
.gal-tail{padding-bottom:0!important}
.gal-card figcaption .q-d+span{font-size:15px!important}
[data-six]{padding:80px 16px 96px!important}
.six-sub{margin-bottom:24px!important;font-size:17px!important}
.age-switch{margin-bottom:48px}
.age-switch button{padding:0 16px;font-size:14px}
.bud .q-d{font-size:16px!important}
[data-planet]{height:640px!important}
[data-planet-orb]{--orb:min(640px,112vw);width:var(--orb)!important;height:var(--orb)!important;margin:calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2)!important;top:64%!important}
[data-planet-copy]{top:56px!important}
[data-planet-copy] p{font-size:16px!important}
.fin-card{min-height:0!important;border-radius:28px!important;padding-top:150px}
[data-finale]{padding-bottom:56px!important}
.fin-shade{background:linear-gradient(180deg,rgba(16,21,40,.1) 0%,rgba(16,21,40,.6) 26%,rgba(16,21,40,.9) 48%,rgba(16,21,40,.95) 100%)!important}
.fin-name{top:72px!important}
.fin-inner{padding:0 16px 40px!important}
.fin-heads{gap:2px!important}
[data-head]{width:44px!important;height:44px!important}
.fin-inner p{font-size:16px!important}
.faq{padding-bottom:72px!important}
.faq-item summary{font-size:16px;padding:18px 50px 18px 18px}
.faq-item summary::after{right:20px}
.faq-item p{padding:0 18px 18px;font-size:15px}
.topbar{top:10px;gap:12px;padding:6px 6px 6px 14px}
.topbar img{width:80px}
.topbar-cta{height:38px;padding:0 16px;font-size:13px}
footer nav{gap:16px 20px!important}
}
