:root{
  --bg:#FFF7FA; --surface:#FFFFFF; --ink:#2A0F1E; --ink-2:#6B4A5C; --ink-3:#7D6171;
  --pink:#FF8DBA; --pink-soft:#FFE3EE; --pink-deep:#F0357F; --pink-text:#C21B62;
  --lilac:#EBE2FF; --butter:#FFF0C9; --amber:#FFB020; --line:#F0D0DD;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/24px "DM Sans","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:clip}
img{max-width:100%; display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display); text-wrap:balance}
a{color:inherit}
.wrap{width:100%; max-width:1120px; margin-inline:auto; padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:16px}}

.skip{position:absolute; left:16px; top:-64px; z-index:20; padding:8px 12px; border-radius:9999px; background:var(--ink); color:#fff; font-weight:700; text-decoration:none}
.skip:focus{top:16px}

.wordmark{font:800 24px/1 var(--display); letter-spacing:-.04em; text-decoration:none; color:var(--ink)}
.wordmark i{font-style:normal; color:var(--pink-deep)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; border-radius:9999px}
.logo{width:32px; height:32px; border-radius:9px}
.logo.lg{width:80px; height:80px; border-radius:22px; box-shadow:0 0 0 4px #fff}

.btn{
  display:inline-flex; align-items:center; gap:12px; padding:12px 24px; border-radius:9999px;
  background:var(--ink); color:#fff; border:2px solid var(--ink); text-decoration:none;
  font-size:16px; line-height:24px; font-weight:700; cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 0 rgba(255,255,255,.9);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.btn svg{width:24px; height:24px; flex:none}
.btn span{display:flex; flex-direction:column; align-items:flex-start; line-height:1}
.btn small{font-size:12px; line-height:16px; font-weight:500; opacity:.75}
.btn b{font-size:16px; line-height:20px; font-weight:700}
.btn:hover{transform:translateY(-3px); box-shadow:0 7px 0 rgba(255,255,255,.9)}
.btn:active{transform:translateY(1px); box-shadow:0 2px 0 rgba(255,255,255,.9)}
.btn:focus-visible,.brand:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.btn.sm{padding:8px 16px; font-size:14px; line-height:20px; gap:8px; box-shadow:none}
.btn.sm:hover{box-shadow:none}
[data-platform="ios"] .btn-play,[data-platform="android"] .btn-ios{background:#fff; color:var(--ink); order:2}

.nav{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:10; display:flex; justify-content:center; padding:16px 16px 0; pointer-events:none}
.nav .pill{
  pointer-events:auto; display:flex; align-items:center; gap:24px; padding:8px 8px 8px 14px; border-radius:9999px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 2px var(--ink), 0 10px 30px -12px rgba(42,15,30,.35);
}

/* hero: flash on bubblegum pink */
.hero{background:var(--pink); padding-block:96px 56px; overflow:hidden}
.hero .grid{display:grid; gap:24px; align-items:center}
.hero-copy{max-width:680px; display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; margin-inline:auto}
.eyebrow{display:none; align-items:center; gap:8px; padding:6px 14px; border-radius:9999px; background:#fff; color:var(--ink); font-size:14px; line-height:20px; font-weight:700; transform:rotate(-2deg); box-shadow:0 0 0 2px var(--ink)}
.eyebrow svg{width:16px; height:16px; color:var(--pink-deep)}
h1{font-size:40px; line-height:.98; font-weight:800; letter-spacing:-.045em; color:var(--ink)}
h1 br{display:none}
.lede{font-size:17px; line-height:26px; color:var(--ink); max-width:520px}
.actions{display:flex; flex-wrap:wrap; gap:10px; width:100%}
.actions .btn{flex:1 1 0; justify-content:center; padding:12px 16px}
.proof{font-size:14px; line-height:20px; color:var(--ink-2); font-weight:500}
.hero .proof{color:var(--ink)}
.toast{
  position:fixed; z-index:30; top:calc(env(safe-area-inset-top,0px) + 12px); right:12px; left:12px; margin-left:auto; max-width:360px;
  display:flex; align-items:flex-start; gap:12px; padding:12px 12px 12px 16px; border-radius:16px;
  background:var(--ink); color:#fff; font-size:14px; line-height:20px; box-shadow:0 24px 48px -16px rgba(42,15,30,.6);
  animation:toast .7s var(--ease) both;
}
.toast[hidden]{display:none}
.toast::before{content:""; position:absolute; top:-6px; right:20px; width:12px; height:12px; background:var(--ink); transform:rotate(45deg); border-radius:2px}
.toast b{color:var(--pink)}
.toast p{flex:1}
.toast button{flex:none; width:32px; height:32px; margin:-4px -4px 0 0; border:0; border-radius:9999px; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:18px; line-height:1; cursor:pointer}
.toast button:focus-visible{outline:3px solid var(--pink); outline-offset:2px}
@keyframes toast{from{opacity:0; transform:translateY(-16px)} to{opacity:1; transform:none}}
@media (min-width:640px){
  .hero{padding-block:128px 72px}
  .hero .grid{gap:48px}
  .hero-copy{gap:24px}
  .eyebrow{display:inline-flex}
  h1{font-size:60px} h1 br{display:inline}
  .lede{font-size:19px; line-height:28px}
  .actions{gap:12px; width:auto} .actions .btn{flex:none; padding:12px 24px}
}
@media (min-width:900px){
  .hero{padding-block:152px 104px}
  .hero .grid{grid-template-columns:1.1fr .9fr; gap:72px}
  .hero-copy{align-items:flex-start; text-align:left; margin-inline:0}
}
@media (min-width:1024px){h1{font-size:80px}}

/* flash + polaroid stage */
.stage{position:relative; isolation:isolate; order:-1; width:min(100%,300px); width:min(100%,calc(min(44svh,400px) * .75)); margin-inline:auto; aspect-ratio:3/4; max-width:100%}
.stage::before{content:""; position:absolute; inset:-30%; z-index:-1; background:radial-gradient(closest-side,#fff 0,rgba(255,255,255,.8) 30%,rgba(255,255,255,0) 72%)}
@media (min-width:640px){.stage{width:min(100%,380px)}}
@media (min-width:900px){.stage{order:0}}
.stage .back{position:absolute; top:8%; width:66%; aspect-ratio:3/4; padding:6px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 20px 40px -20px rgba(42,15,30,.55)}
.stage .back img{width:100%; height:100%; object-fit:cover; border-radius:4px}
.stage .back.l{left:-14%; transform:rotate(-10deg)}
.stage .back.r{right:-14%; transform:rotate(9deg)}
@media (min-width:900px){.stage .back.l{left:-24%} .stage .back.r{right:-24%}}
.compare{
  --pos:42%; position:absolute; inset:0; padding:10px 10px 48px; border-radius:10px; background:#fff; transform:rotate(-2.5deg);
  box-shadow:0 36px 60px -28px rgba(42,15,30,.6);
}
.compare::after{content:"bestie."; position:absolute; left:0; right:0; bottom:12px; text-align:center; font:800 20px/24px var(--display); letter-spacing:-.04em; color:var(--ink)}
.compare .frame{position:relative; height:100%; border-radius:4px; overflow:hidden; background:var(--pink-soft); touch-action:pan-y; cursor:ew-resize; user-select:none}
.compare .frame::after{content:"\2019 26  10  16"; position:absolute; right:12px; bottom:10px; font:500 13px/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.04em; color:var(--amber); text-shadow:0 0 6px rgba(255,150,0,.7); pointer-events:none}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare .line{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px)}
.compare .knob{position:absolute; top:50%; left:var(--pos); width:44px; height:44px; border-radius:9999px; background:#fff; color:var(--ink); transform:translate(-50%,-50%); display:grid; place-items:center; box-shadow:0 0 0 2px var(--ink), 0 8px 20px -8px rgba(42,15,30,.6)}
.compare .knob svg{width:20px; height:20px}
.compare .tag{position:absolute; top:12px; padding:4px 12px; border-radius:9999px; font-size:12px; line-height:16px; font-weight:700; background:rgba(255,255,255,.88); color:var(--ink)}
.compare .tag.b{left:12px}
.compare .tag.a{right:12px; background:var(--ink); color:#fff}
.compare input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none}
.compare input:focus-visible ~ .knob{outline:3px solid var(--pink-deep); outline-offset:3px}

section{padding-block:72px}
@media (min-width:900px){section{padding-block:112px}}
.hero{padding-block:96px 56px}
@media (min-width:640px){.hero{padding-block:128px 72px}}
@media (min-width:900px){.hero{padding-block:152px 104px}}
.head{display:flex; flex-direction:column; gap:12px; max-width:640px; margin-bottom:40px}
h2{font-size:34px; line-height:1; font-weight:800; letter-spacing:-.04em}
@media (min-width:640px){h2{font-size:48px}}
.head p{font-size:18px; line-height:28px; color:var(--ink-2)}

/* looks: loose prints sliding by */
.looks{background:#fff; padding-inline:0; overflow:hidden}
.track{display:flex; gap:20px; width:max-content; padding-block:12px 24px; animation:marquee 70s linear infinite}
.track:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 10px))}}
.look{position:relative; flex:none; width:180px; aspect-ratio:3/4; margin:0; padding:6px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 18px 30px -20px rgba(42,15,30,.45)}
.look:nth-child(odd){transform:rotate(-1.8deg)}
.look:nth-child(even){transform:rotate(1.4deg) translateY(14px)}
@media (min-width:640px){.look{width:230px}}
.look img{width:100%; height:100%; object-fit:cover; border-radius:6px}
.look span{position:absolute; left:16px; bottom:16px; padding:4px 12px; border-radius:9999px; background:var(--pink); color:var(--ink); font-size:12px; line-height:16px; font-weight:700}

/* tagline: the dark band */
.tagline{background:var(--ink)}
.tagline p{font:800 36px/1.02 var(--display); letter-spacing:-.04em; max-width:900px; color:#fff}
@media (min-width:640px){.tagline p{font-size:60px}}
@media (min-width:1024px){.tagline p{font-size:76px}}
.tagline .w{display:inline-block; opacity:.25; transition:opacity .7s var(--ease); transition-delay:calc(var(--i) * 35ms)}
.tagline .w.on{opacity:1}

/* steps: a real sequence, so the numerals stay */
.steps .cards{display:grid; gap:20px}
@media (min-width:768px){.steps .cards{grid-template-columns:repeat(3,1fr)}}
.step{display:flex; flex-direction:column; gap:20px; padding:10px 10px 28px; border-radius:32px; background:var(--pink-soft)}
.step:nth-child(2){background:var(--lilac)}
.step:nth-child(3){background:var(--butter)}
.step .pic{aspect-ratio:4/5; border-radius:22px; overflow:hidden; background:#fff}
.step .pic img{width:100%; height:100%; object-fit:cover}
.step .pic.grid{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.step .pic.grid img{border-radius:8px}
.step .txt{display:flex; flex-direction:column; gap:8px; padding-inline:16px}
.step .n{font:800 56px/1 var(--display); letter-spacing:-.05em; color:var(--ink)}
.step h3{font-size:24px; line-height:28px; font-weight:800; letter-spacing:-.03em}
.step p{color:var(--ink-2)}

/* faq: sticky title left, plain rules right */
.faq .wrap{display:grid; gap:24px}
.faq .head{margin-bottom:0}
@media (min-width:900px){
  .faq .wrap{grid-template-columns:1fr 1.5fr; gap:72px}
  .faq .head{position:sticky; top:112px; align-self:start}
}
.faq .list{display:flex; flex-direction:column; border-top:2px solid var(--ink)}
details{border-bottom:1px solid var(--line)}
summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; cursor:pointer; list-style:none; font:700 19px/26px var(--display); letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary svg{width:32px; height:32px; padding:7px; border-radius:9999px; background:var(--pink); color:var(--ink); flex:none; transition:transform .5s var(--ease)}
details[open] summary svg{transform:rotate(45deg)}
details p{padding:0 48px 22px 0; color:var(--ink-2)}
details a{color:var(--pink-text)}

/* cta */
.cta .box{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; padding:64px 24px; border-radius:40px; background:var(--pink)}
.cta .box::before{content:""; position:absolute; inset:-40% -10%; z-index:-1; background:radial-gradient(closest-side,#fff 0,rgba(255,255,255,.75) 32%,rgba(255,255,255,0) 70%)}
.cta h2{max-width:720px; font-size:38px}
@media (min-width:640px){.cta h2{font-size:60px}}
.cta .actions{justify-content:center}
.cta .proof{color:var(--ink)}

footer{margin-top:24px; padding:40px 0 48px; background:var(--ink); color:#E9C9D8}
footer .row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; font-size:14px; line-height:20px}
footer nav{display:flex; flex-wrap:wrap; gap:24px}
footer nav a{text-decoration:none; font-weight:500; color:#fff}
footer nav a:hover{color:var(--pink)}

/* motion: one page-load sequence in the hero, one scroll moment in the tagline */
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
.hero-copy > *{animation:rise .8s var(--ease) both; animation-delay:calc(var(--i) * 90ms)}
.stage{animation:rise 1s var(--ease) both .2s}
@media (prefers-reduced-motion:reduce){
  .hero-copy > *,.stage,.track{animation:none}
  .tagline .w{transition:none; opacity:1}
  .btn{transition:none}
  html{scroll-behavior:auto}
}