:root{
  --paper:#FBF9F4; --paper-edge:#F1ECE0; --dot:#E4DDCE;
  --ink:#1A1A1A; --ink-soft:#4A4742; --hint:#8F887B;
  --accent:#2B6CB0; --accent-soft:#EAF1F8; --danger:#C0432E;
  --blush:#FBD9D3; --butter:#FBEEC2; --mint:#CDEBD8; --sky:#CFE4F7; --lilac:#E1D6F5;
  --hand:"Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
  --sans:ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; color:var(--ink); background-color:var(--paper);
  background-image:radial-gradient(var(--dot) 1.5px, transparent 1.6px);
  background-size:26px 26px;
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent); text-underline-offset:.18em}
.hand{font-family:var(--hand)}
.wrap{width:min(1080px, 100% - 32px); margin:0 auto}
.narrow{width:min(760px, 100% - 32px); margin:0 auto}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:20; background:rgba(251,249,244,.86);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1.5px solid transparent; transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--dot)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-family:var(--hand); font-size:32px; line-height:1}
.brand img{width:38px; height:38px; border-radius:10px; border:2px solid var(--ink)}
.nav-links{display:flex; align-items:center; gap:22px; font-family:var(--hand); font-size:21px}
.nav-links a{color:var(--ink-soft); text-decoration:none}
.nav-links a:hover{color:var(--accent)}
.nav-cta{display:inline-flex; align-items:center; gap:8px; padding:6px 16px 7px; border:2.5px solid var(--ink);
  border-radius:999px; background:var(--ink); color:var(--paper)!important; font-family:var(--hand); font-size:20px;
  text-decoration:none; box-shadow:3px 3px 0 var(--accent); transition:transform .15s, box-shadow .15s}
.nav-cta:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--accent)}
@media (max-width:760px){ .nav-links a:not(.nav-cta){display:none} .brand{font-size:28px} }

/* ---------- hero ---------- */
.hero{padding:56px 0 40px}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.eyebrow{font-family:var(--hand); color:var(--accent); font-size:22px; margin:0 0 6px}
h1{font-family:var(--hand); font-weight:400; font-size:clamp(52px, 8vw, 92px); line-height:.98; margin:0 0 18px; letter-spacing:-.01em}
h1 .scribble{position:relative; white-space:nowrap}
h1 .scribble svg{position:absolute; left:-4%; bottom:-.12em; width:108%; height:.36em; overflow:visible}
.lede{font-size:clamp(18px, 2.1vw, 21px); color:var(--ink-soft); max-width:31em; margin:0 0 30px}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.store-badge{display:inline-block; line-height:0; border-radius:12px; transition:transform .15s}
.store-badge:hover{transform:translateY(-2px)}
.store-badge svg{display:block; height:56px; width:auto}
.cta-note{font-family:var(--hand); font-size:19px; color:var(--hint)}

.pool{position:relative; container-type:inline-size; margin-top:34px; aspect-ratio:10/11.5; width:100%; max-width:470px; justify-self:center; touch-action:manipulation}
.pool-outline{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.pool .character{position:absolute; left:50%; bottom:0; width:60%; transform:translateX(-50%); overflow:visible; pointer-events:none}
.bubble{position:absolute; width:calc(var(--s) * 1%); aspect-ratio:1; margin:0; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--hand); color:var(--ink); font-size:calc(var(--s) * .155cqw); line-height:1.12;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
  animation:drop .9s cubic-bezier(.3,1.5,.5,1) both; animation-delay:var(--d, 0s)}
.bubble svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; transition:transform .25s}
.bubble span{position:relative; padding:0 16%; text-align:center}
.bubble:hover svg{transform:scale(1.04) rotate(-2deg)}
.bubble:focus-visible{outline:3px dashed var(--accent); outline-offset:4px; border-radius:50%}
.bubble.popping{animation:pop .32s ease-out forwards; pointer-events:none}
.burst{position:absolute; pointer-events:none; width:120px; height:120px; margin:-60px 0 0 -60px; overflow:visible}
.burst path{stroke:var(--accent); stroke-width:5; stroke-linecap:round; fill:none;
  stroke-dasharray:24; stroke-dashoffset:24; animation:burst .45s ease-out forwards}
.burst circle{fill:var(--accent); animation:dot .45s ease-out forwards}
.pool-hint{position:absolute; left:0; right:0; top:-34px; margin:0; text-align:center; font-family:var(--hand); font-size:19px; color:var(--hint); pointer-events:none}
.pool-hint b{color:var(--accent); font-weight:400}
@keyframes drop{from{transform:translateY(-120px) rotate(-14deg); opacity:0} to{transform:none; opacity:1}}
@keyframes pop{40%{transform:scale(1.18)} 100%{transform:scale(.2); opacity:0}}
@keyframes burst{0%{stroke-dashoffset:24; opacity:1} 100%{stroke-dashoffset:-24; opacity:0}}
@keyframes dot{0%{opacity:1} 100%{opacity:0; transform:translate(var(--dx),var(--dy))}}
@media (max-width:860px){
  .hero{padding-top:28px}
  .hero .wrap{grid-template-columns:1fr; gap:22px}
  .hero-copy{text-align:center} .lede{margin-left:auto; margin-right:auto} .cta-row{justify-content:center}
  .pool{max-width:400px}
}

/* ---------- sections ---------- */
section{padding:72px 0}
.section-head{text-align:center; margin:0 auto 40px; max-width:620px}
h2{font-family:var(--hand); font-weight:400; font-size:clamp(40px, 5.5vw, 58px); line-height:1.02; margin:0 0 10px}
h3{font-family:var(--hand); font-weight:400; font-size:28px; line-height:1.1; margin:0 0 6px}
.section-head p{color:var(--ink-soft); font-size:19px; margin:0}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.step{text-align:center; padding:8px 10px}
.step .blob{position:relative; width:118px; height:118px; margin:0 auto 14px; display:grid; place-items:center; font-family:var(--hand); font-size:24px}
.step .blob svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.step .blob span{position:relative}
.step p{color:var(--ink-soft); margin:0 auto; max-width:17em}
@media (max-width:760px){ .steps{grid-template-columns:1fr; gap:34px} }

.card{position:relative; background:#fff; border:2.5px solid var(--ink); border-radius:24px; padding:24px 24px 22px;
  box-shadow:5px 5px 0 var(--paper-edge)}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feature .ico{width:52px; height:52px; margin-bottom:12px; display:block}
.feature p{margin:0; color:var(--ink-soft)}
.feature:nth-child(3n+1){transform:rotate(-.6deg)} .feature:nth-child(3n+2){transform:rotate(.4deg)} .feature:nth-child(3n){transform:rotate(-.3deg)}
@media (max-width:900px){ .features{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .features{grid-template-columns:1fr} .feature{transform:none!important} }

.pro{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:820px; margin:0 auto}
.plan h3{font-size:34px}
.plan .tag{display:inline-block; font-family:var(--hand); font-size:18px; padding:1px 12px 2px; border:2px solid var(--ink); border-radius:999px; margin-bottom:10px}
.plan ul{list-style:none; padding:0; margin:12px 0 0}
.plan li{position:relative; padding-left:30px; margin:8px 0; color:var(--ink-soft)}
.plan li::before{content:""; position:absolute; left:2px; top:.35em; width:17px; height:17px; border:2.5px solid var(--ink); border-radius:52% 48% 55% 45%}
.plan.pro-plan{background:var(--accent-soft); box-shadow:5px 5px 0 var(--accent)}
.plan.pro-plan .tag{background:var(--accent); border-color:var(--accent); color:#fff}
.swatches{display:flex; gap:8px; margin-top:16px}
.swatches i{width:26px; height:26px; border:2.5px solid var(--ink); border-radius:50% 46% 52% 48%; display:block}
.fine{color:var(--hint); font-size:14.5px; text-align:center; margin:22px auto 0; max-width:620px}
@media (max-width:700px){ .pro{grid-template-columns:1fr} }

/* ---------- support / faq ---------- */
.faq{display:grid; gap:14px}
details.card{padding:0}
details summary{list-style:none; cursor:pointer; padding:18px 56px 18px 22px; font-family:var(--hand); font-size:25px; position:relative}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-52%); font-size:32px; color:var(--accent); transition:transform .2s}
details[open] summary::after{transform:translateY(-52%) rotate(45deg)}
details .body{padding:0 22px 20px; color:var(--ink-soft)}
details .body p{margin:.3em 0}
.contact{margin-top:22px; text-align:center; font-family:var(--hand); font-size:23px}

/* ---------- privacy ---------- */
.privacy{background:#fff; border-top:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink)}
.tldr{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 34px}
.tldr div{border:2.5px solid var(--ink); border-radius:20px; padding:14px 16px; font-family:var(--hand); font-size:21px; line-height:1.2; text-align:center}
.tldr div:nth-child(1){background:var(--mint)} .tldr div:nth-child(2){background:var(--butter)} .tldr div:nth-child(3){background:var(--sky)}
@media (max-width:640px){ .tldr{grid-template-columns:1fr} }
.policy h3{font-size:27px; margin-top:30px}
.policy p, .policy li{color:var(--ink-soft)}
.policy ul{padding-left:22px} .policy li{margin:.3em 0}
.updated{font-family:var(--hand); color:var(--hint); font-size:19px; text-align:center; margin:-26px 0 30px}

/* ---------- final cta + footer ---------- */
.final{text-align:center; padding:84px 0 70px}
.final h2{margin-bottom:22px}
footer{border-top:1.5px solid var(--dot); padding:26px 0 44px; color:var(--hint); font-size:15px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px}
footer a{color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bubble{animation:none} .bubble.popping{animation:fadeout .2s forwards} .burst{display:none}
  @keyframes fadeout{to{opacity:0}}
}

/* ---------- privacy page ---------- */
.page-head{padding:56px 0 8px; text-align:center}
.page-head .eyebrow{margin-bottom:2px}
.page-head h1{font-size:clamp(48px, 7vw, 76px); margin-bottom:8px}
.page-head .updated{margin:0 0 30px}
.privacy-page{padding:12px 0 72px}
.privacy-page .policy{background:#fff; border:2.5px solid var(--ink); border-radius:24px; padding:8px 30px 26px; box-shadow:5px 5px 0 var(--paper-edge)}
.privacy-page .policy > p:first-child{margin-top:22px}
.back-link{display:inline-block; margin-top:26px; font-family:var(--hand); font-size:21px; text-decoration:none}
@media (max-width:600px){ .privacy-page .policy{padding:4px 18px 20px} }