@font-face{font-family:'Bagel Fat One';font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/BagelFatOne-400.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:300 900;font-style:normal;font-display:swap;src:url(assets/fonts/Figtree.woff2) format('woff2')}

:root{
  --sun:#FFD32B; --sun-deep:#E9B500; --ink:#221A17; --chalk:#FFFFFF; --sky:#8AD4FF; --sky-deep:#4FB4EC; --grass:#3DBE7A;
  --soft:#FFF3B8; --line:3px solid var(--ink);
  --pop:5px 5px 0 var(--ink);
  --display:'Bagel Fat One','Arial Rounded MT Bold',system-ui,sans-serif;
  --text:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sun);color:var(--ink);font-family:var(--text);font-size:clamp(1.05rem,1.1vw + .8rem,1.25rem);line-height:1.55}
img,video,svg{display:block;max-width:100%}
img[width][height]{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-ink :focus-visible{outline-color:var(--sun)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--sun);padding:10px 16px;border-radius:999px;z-index:100;font-weight:700}
.skip:focus{left:12px}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.01em;margin:0}
.h-xl{font-size:clamp(3rem,6.6vw,6.2rem)}
.h-lg{font-size:clamp(2.4rem,5.6vw,4.8rem)}
.h-md{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.08}
.lede{font-size:clamp(1.15rem,1.4vw + .75rem,1.5rem);line-height:1.45;max-width:34ch;margin:0}
.muted{opacity:.78}
p{margin:0}
.measure{max-width:56ch}

/* ---------- buttons and tags ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:800;text-decoration:none;color:var(--ink);background:var(--chalk);border:var(--line);border-radius:999px;padding:14px 26px;box-shadow:var(--pop);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.is-ink{background:var(--ink);color:var(--sun);box-shadow:5px 5px 0 var(--sun-deep)}
.btn.is-ink:hover{box-shadow:3px 3px 0 var(--sun-deep)}
.btn.is-static{cursor:default;pointer-events:none}
.btn svg{width:22px;height:22px}
.tag{display:inline-block;border:var(--line);border-radius:999px;padding:3px 14px;font-weight:700;font-size:.9em;background:var(--chalk)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--sun);border-bottom:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.7rem;line-height:1}
.brand img{width:38px;height:38px;border-radius:10px;border:2.5px solid var(--ink)}
.nav-links{display:flex;gap:6px;margin-left:auto;font-weight:700}
.nav-links a{text-decoration:none;padding:8px 14px;border-radius:999px}
.nav-links a:hover{background:var(--ink);color:var(--sun)}
.bones{display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--sun);border-radius:999px;padding:6px 16px 6px 10px;font-weight:800;font-variant-numeric:tabular-nums;min-width:96px}
.bones svg{width:24px;height:24px;color:var(--chalk)}
.bones.pop svg{animation:wiggle .35s ease}
.bones .hint{display:none}
@media (max-width:760px){.nav-links{display:none}.bones{margin-left:auto}}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,6vw,72px) 0 clamp(56px,8vw,110px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero .wrap>div:first-child{position:relative;z-index:2}
.hero h1{text-shadow:4px 4px 0 var(--chalk)}
.hero h1 .w{display:inline-block;width:max-content;white-space:nowrap}
.hero .lede{margin-top:clamp(18px,2vw,28px)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(22px,3vw,36px);align-items:center}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.facts li{border:var(--line);border-radius:999px;background:var(--soft);padding:4px 14px;font-weight:700;font-size:.92rem}
.stage{position:relative;justify-self:center;width:min(100%,440px,calc((100vh - 140px) * .45));padding:0 0 20px}
.stage .sunburst{position:absolute;inset:-12% -22%;z-index:0;opacity:.55}
.stage .sunburst svg{width:100%;height:100%}
.stage .phone{position:relative;z-index:1;transform:rotate(3deg)}
.milo{position:absolute;z-index:3;left:-34%;bottom:9%;width:62%;filter:drop-shadow(6px 6px 0 var(--ink))}
.bubble{position:absolute;z-index:4;left:-36%;bottom:45%;max-width:10.5em;background:var(--chalk);border:var(--line);border-radius:22px 22px 22px 6px;padding:10px 16px;font-weight:800;line-height:1.2;box-shadow:var(--pop);font-size:1.05rem}
.bone-fall{position:absolute;z-index:2;width:34px;height:34px;color:var(--chalk);filter:drop-shadow(2px 2px 0 var(--ink))}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .stage{width:min(88%,380px);margin-top:16px}
  .milo{left:-12%;bottom:8%;width:50%}
  .bubble{left:-6%;bottom:58%;font-size:.92rem}
}

/* ---------- phone frame ---------- */
.phone{--r:44px;position:relative;aspect-ratio:1170/2532;border:10px solid var(--ink);border-radius:var(--r);background:var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden}
.phone::after{content:"";position:absolute;top:10px;left:50%;width:30%;height:22px;transform:translateX(-50%);background:var(--ink);border-radius:999px;z-index:5}
.phone img,.phone video{width:100%;height:100%;object-fit:cover}
.phone.on-sun{box-shadow:10px 10px 0 var(--ink)}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--sun);border-block:var(--line);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:0;padding:14px 0;animation:slide 38s linear infinite}
.ticker span{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.7rem);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.ticker svg{width:26px;height:26px;color:var(--chalk)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- how it works ---------- */
.story{background:var(--chalk);padding:clamp(64px,9vw,140px) 0}
.story-head{margin-bottom:clamp(32px,5vw,72px)}
.story-grid{display:grid;grid-template-columns:1fr minmax(300px,400px);gap:clamp(32px,6vw,110px);align-items:start}
.steps{display:flex;flex-direction:column}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:30rem;opacity:.28;transition:opacity .4s ease}
.step.is-on{opacity:1}
.step h3{margin:0}
.step .inline-shot{display:none}
.step-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800}
.step-kicker i{width:34px;height:34px;border-radius:50%;background:var(--sun);border:var(--line);display:grid;place-items:center;font-style:normal}
.step-kicker svg{width:18px;height:18px}
.sticky{position:sticky;top:96px;height:calc(100vh - 120px);display:grid;place-items:center}
.sticky .phone{height:min(100%,780px);width:auto;max-width:100%}
.screens img{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.screens img.is-on{opacity:1}
.sticky .bell{position:absolute;top:2%;right:-2%;width:74px;height:74px;background:var(--sun);border:var(--line);border-radius:50%;display:grid;place-items:center;box-shadow:var(--pop);z-index:6;transform-origin:50% 12%}
.sticky .bell svg{width:38px;height:38px}
.sticky .bell.ring{animation:ring .7s ease}
.sticky .say{position:absolute;left:-6%;bottom:6%;z-index:6;max-width:13em;background:var(--sun);border:var(--line);border-radius:22px 22px 6px 22px;padding:10px 16px;font-weight:800;line-height:1.2;box-shadow:var(--pop);font-size:1rem;transition:transform .25s ease}
.sticky .say.swap{transform:scale(1.08) rotate(-2deg)}
.sticky-wrap{position:relative;width:100%;display:grid;place-items:center;height:100%}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr}
  .sticky{display:none}
  .step{min-height:0;opacity:1;padding:34px 0;border-top:var(--line);max-width:none}
  .step:first-child{border-top:0}
  .step .inline-shot{display:block;width:min(70%,300px);height:auto;aspect-ratio:1170/2532;object-fit:cover;margin:8px auto 0;border:8px solid var(--ink);border-radius:36px;box-shadow:8px 8px 0 var(--ink);background:var(--ink)}
}

/* ---------- video ---------- */
.watch{background:var(--ink);color:var(--chalk);padding:clamp(64px,9vw,130px) 0}
.watch .tour-wrap{}
.watch .phone{border-color:var(--sun);background:var(--sun);box-shadow:10px 10px 0 var(--sun-deep)}
.watch h2{color:var(--sun)}
.player{position:relative}
.player video{background:#000}
.play{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(34,26,23,.28);border:0;cursor:pointer;transition:opacity .2s}
.play span{width:92px;height:92px;border-radius:50%;background:var(--sun);border:var(--line);box-shadow:var(--pop);display:grid;place-items:center;transition:transform .15s}
.play:hover span{transform:scale(1.07)}
.play svg{width:40px;height:40px;margin-left:5px;color:var(--ink)}
.player.is-playing .play{opacity:0;pointer-events:none}
.chapters{list-style:none;padding:0;margin:clamp(24px,3vw,40px) 0 0;display:flex;flex-wrap:wrap;gap:12px}
.chapters button{font:inherit;font-weight:700;color:var(--chalk);background:transparent;border:2.5px solid var(--chalk);border-radius:999px;padding:8px 18px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.chapters button:hover,.chapters button.is-on{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.watch .lede{margin-top:18px;max-width:36ch}
@media (max-width:900px){.watch .phone{width:min(70%,320px);margin:0 auto}}

/* ---------- dress up ---------- */
.dress{background:var(--sky);border-block:var(--line);padding:clamp(64px,9vw,130px) 0;overflow:hidden}
.dress .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,100px);align-items:center}
.dress .phone{width:min(100%,360px);justify-self:center;transform:rotate(-3deg)}
.wardrobe-wall{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px;max-width:30rem}
.wardrobe-wall figure{margin:0;background:var(--chalk);border:var(--line);border-radius:26px;box-shadow:var(--pop);padding:12px 12px 6px;text-align:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.wardrobe-wall figure:nth-child(odd){transform:rotate(-2deg)}
.wardrobe-wall figure:nth-child(even){transform:rotate(2deg)}
.wardrobe-wall figure:hover{transform:rotate(0) scale(1.05)}
.wardrobe-wall img{width:100%;aspect-ratio:1;object-fit:contain}
.wardrobe-wall figcaption{font-weight:800;font-size:.92rem;padding:4px 0 6px}
.dress ul.plain{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;font-weight:600}
.dress ul.plain li{display:flex;gap:12px;align-items:flex-start}
.dress ul.plain svg{flex:none;width:22px;height:22px;margin-top:3px}
@media (max-width:900px){.dress .wrap{grid-template-columns:1fr}.dress .phone{order:2}}

/* ---------- extras ---------- */
.extras{background:var(--chalk);padding:clamp(64px,9vw,130px) 0}
.extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px) clamp(24px,4vw,64px);margin-top:clamp(32px,5vw,64px)}
.extras-grid h3{margin:0 0 8px;display:flex;align-items:center;gap:10px}
.extras-grid h3 svg{width:28px;height:28px;flex:none}
.extras-grid p{max-width:30ch;opacity:.86}
@media (max-width:900px){.extras-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.extras-grid{grid-template-columns:1fr}}

/* ---------- pro + faq ---------- */
.pro{background:var(--sun);padding:clamp(64px,9vw,120px) 0;border-top:var(--line)}
.pro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,100px)}
.pro .perks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-weight:600}
.pro .perks li{display:flex;gap:12px}
.pro .perks svg{flex:none;width:22px;height:22px;margin-top:3px}
.faq details{border-top:var(--line);padding:18px 0}
.faq details:last-child{border-bottom:var(--line)}
.faq summary{cursor:pointer;font-weight:800;font-size:1.15em;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.8rem;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;max-width:52ch}
@media (max-width:900px){.pro .wrap{grid-template-columns:1fr}}

/* ---------- closing + footer ---------- */
.closing{background:var(--ink);color:var(--chalk);text-align:center;padding:clamp(72px,10vw,150px) 0 clamp(48px,6vw,80px)}
.closing h2{color:var(--sun)}
.closing .milo-end{width:min(46vw,220px);margin:0 auto 18px;filter:drop-shadow(5px 5px 0 var(--sun-deep))}
.closing .cta-row{justify-content:center}
.footer{background:var(--ink);color:var(--chalk);padding:0 0 40px}
.footer .wrap{border-top:2px solid rgba(255,255,255,.2);padding-top:28px;display:grid;gap:18px}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:700}
.footer nav a{text-decoration:none}
.footer nav a:hover{color:var(--sun);text-decoration:underline}
.footer small{opacity:.7;max-width:70ch;font-size:.9rem}

/* ---------- motion ---------- */
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg) scale(1.15)}60%{transform:rotate(12deg) scale(1.15)}}
@keyframes ring{0%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes drop{0%{transform:translateY(-90px) scale(.9,1.1);opacity:0}55%{transform:translateY(8px) scale(1.06,.9);opacity:1}75%{transform:translateY(-4px) scale(.98,1.02)}100%{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(60px) rotate(9deg);opacity:0}to{transform:translateY(0) rotate(3deg);opacity:1}}
@keyframes hop{0%{transform:translateY(40px) scale(.85);opacity:0}60%{transform:translateY(-14px) scale(1.04);opacity:1}100%{transform:none;opacity:1}}
@keyframes bobble{0%{transform:scale(0) rotate(-10deg);opacity:0}70%{transform:scale(1.08) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

.js .hero h1 .w{opacity:0}
.js .hero .lede,.js .hero .cta-row,.js .hero .facts,.js .hero .milo,.js .hero .bubble,.js .hero .bone-fall,.js .hero .stage .phone,.js .hero .sunburst{opacity:0}
.js.go .hero h1 .w{animation:drop .7s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--i) * 110ms + 100ms)}
.js.go .hero .lede{animation:hop .6s ease both .75s}
.js.go .hero .cta-row{animation:hop .6s ease both .88s}
.js.go .hero .facts{animation:hop .6s ease both 1s}
.js.go .hero .stage .phone{animation:rise .9s cubic-bezier(.2,.9,.3,1.1) both .35s}
.js.go .hero .sunburst{animation:hop .9s ease both .2s;animation-fill-mode:both}
.js.go .hero .milo{animation:hop .7s ease both 1.0s}
.js.go .hero .bubble{animation:bobble .5s ease both 1.5s}
.js.go .hero .bone-fall{animation:drop .8s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--d) * 1ms + 900ms)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero h1 .w,.js .hero .lede,.js .hero .cta-row,.js .hero .facts,.js .hero .milo,.js .hero .bubble,.js .hero .bone-fall,.js .hero .stage .phone,.js .hero .sunburst{opacity:1}
}

/* ---------- store badges ---------- */
.stores{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.stores.is-center{justify-content:center}
.store{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--chalk);border:var(--line);border-radius:16px;padding:9px 20px 9px 14px;box-shadow:5px 5px 0 var(--sun-deep);line-height:1.1}
.store svg{width:34px;height:34px;flex:none}
.store small{display:block;font-size:.72rem;font-weight:600;opacity:.85}
.store b{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.closing .store{background:var(--sun);color:var(--ink);box-shadow:5px 5px 0 var(--chalk);border-color:var(--sun)}

/* ---------- watches ---------- */
.watches{background:var(--soft);border-top:var(--line);padding:clamp(64px,9vw,130px) 0;overflow:hidden}
.watches .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,100px);align-items:center}
.brands{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.brands li{border:var(--line);border-radius:999px;background:var(--chalk);padding:5px 16px;font-weight:800;box-shadow:3px 3px 0 var(--ink)}
.fine{margin-top:20px;font-size:.92rem;opacity:.8;max-width:46ch}
.watch-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2vw,28px)}
.wf{margin:0;text-align:center;flex:1;max-width:210px}
.wf svg{width:100%;height:auto;filter:drop-shadow(7px 7px 0 var(--ink))}
.wf .ink *{stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.wf figcaption{margin-top:16px;font-weight:800}
.wf1{transform:rotate(-6deg)}.wf2{transform:translateY(-26px)}.wf3{transform:rotate(6deg)}
@media (max-width:900px){.watches .wrap{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  .watch-row.in .pulse{stroke-dasharray:140;animation:trace 1.6s ease-out both}
  .watch-row.in .ring{animation:fill 1.4s ease-out both}
  .watch-row.in .bar{animation:grow 3s ease-out both}
}
@keyframes trace{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
@keyframes fill{from{stroke-dashoffset:327}to{stroke-dashoffset:90}}
@keyframes grow{from{width:0}to{width:38px}}

/* ---------- trailer ---------- */
.trailer-wrap{display:block!important;padding-bottom:clamp(48px,7vw,96px)}
.trailer-head{margin-bottom:clamp(20px,3vw,36px)}
.trailer-head .lede{margin-top:12px}
.player.wide{max-width:1080px}
.player.wide video{width:100%;aspect-ratio:16/9;border:var(--line);border-color:var(--sun);border-radius:28px;box-shadow:10px 10px 0 var(--sun-deep);background:#000;object-fit:cover}
.player.wide .play{border-radius:28px;background:transparent}
.tour-wrap{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(32px,7vw,120px);align-items:center;padding-top:clamp(24px,4vw,56px);border-top:2px solid rgba(255,255,255,.18)}
@media (max-width:900px){.tour-wrap{grid-template-columns:1fr}}