/* Simpler Stories marketing pages (home + waitlist). Ported from site/design-handoff:
   desktop design at 1024px and up, mobile design below 768px, fluid in between. */
:root{--paper:#f2ede2;--ink:#1f2826;--tang:#ff6b3d;--tang-deep:#e85a2e;--lemon:#f7e36b;--mint:#7fd6c2;--slate:#3d5552;--g:48px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block}
.page{overflow-x:clip}
.mono{font-family:"DM Mono",ui-monospace,monospace}
.hand{font-family:"Caveat",cursive}

/* Logo: wordmark + our play triangle, sized in em so it sits on the x-height at any size */
.mark{font-weight:800;font-size:30px;letter-spacing:-.04em;white-space:nowrap}
.tri{display:inline-block;height:.56em;width:.51em;margin-left:.08em;vertical-align:-.04em;fill:var(--tang);stroke:var(--tang);stroke-width:2;stroke-linejoin:round;overflow:visible}
.tri.ink{fill:var(--ink);stroke:var(--ink)}

/* Nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px var(--g);gap:24px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;font-size:15px;transition:background .15s}
.pill:hover{background:var(--tang)}
.pill.outline{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pill.outline:hover{background:var(--ink);color:var(--paper)}

/* Buttons */
.btn{display:inline-block;padding:20px 32px;border-radius:999px;font-weight:600;font-size:18px;text-align:center;border:0;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.btn-primary{background:var(--tang);color:var(--paper);box-shadow:0 6px 0 var(--ink)}
.btn-primary:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.btn-outline{box-shadow:inset 0 0 0 2px var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink);box-shadow:0 6px 0 var(--ink);padding:22px 36px;font-size:19px}
.btn-paper:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
:focus-visible{outline:3px solid var(--tang);outline-offset:3px}

.badge{display:flex;gap:10px;align-items:center;background:var(--lemon);padding:8px 16px 8px 8px;border-radius:999px;font-family:"DM Mono",monospace;font-size:13px;align-self:flex-start}
.badge span{background:var(--ink);color:var(--lemon);padding:4px 10px;border-radius:999px}
.aside{font-family:"Caveat",cursive;font-size:clamp(26px,2.4vw,34px);color:var(--tang);transform:rotate(-3deg);margin:4px 0 0 8px}
h1{margin:0;font-weight:800;font-size:clamp(60px,8.6vw,124px);line-height:.86;letter-spacing:-.06em}
.hero h1{font-size:clamp(56px,5.7vw,84px)}
h1 em,h2 em{font-style:normal;color:var(--tang)}

/* Hero */
.hero{padding:40px var(--g) 100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"text collage" "ctas collage";column-gap:40px}
.hero-text{grid-area:text;align-self:end;display:flex;flex-direction:column;gap:28px}
.hero-text p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;max-width:520px;text-wrap:pretty}
.hero-ctas{grid-area:ctas;align-self:start;display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.collage{grid-area:collage;position:relative;height:700px}
.pol{position:absolute;background:#fff;padding:12px 12px 50px;box-shadow:0 18px 40px rgba(31,40,38,.18);transform:rotate(var(--r));transition:transform .3s}
.pol:hover{transform:rotate(var(--rh)) scale(1.03)}
.pol img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.pol .cap{position:absolute;left:14px;bottom:10px;font-family:"Caveat",cursive;font-size:26px}
.tape{position:absolute;top:-14px;width:100px;height:28px}
.pol1{left:0;top:50px;width:250px;--r:-8deg;--rh:-4deg}
.pol1 .tape{left:80px;background:rgba(247,227,107,.75);transform:rotate(4deg)}
.pol2{right:0;top:0;width:240px;--r:7deg;--rh:3deg}
.pol2 .tape{left:60px;background:rgba(127,214,194,.6);transform:rotate(-5deg)}
.pol2 .cap{left:auto;right:14px}
.pol3{left:30px;bottom:0;width:230px;--r:5deg;--rh:1deg}
.pol3 .tape{display:none;left:36px;background:rgba(127,214,194,.7);transform:rotate(-5deg)}
.phone{position:absolute;left:50%;top:70px;margin-left:-140px;z-index:2;width:280px;aspect-ratio:9/16;border-radius:35px;background:var(--ink);padding:8px;box-shadow:0 30px 60px rgba(31,40,38,.25);transform:rotate(-3deg)}
.screen{position:relative;width:100%;height:100%;border-radius:29px;overflow:hidden;background:var(--slate)}
.screen video,.screen img{width:100%;height:100%;object-fit:cover}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(31,40,38,.35),rgba(31,40,38,0) 25%,rgba(31,40,38,0) 55%,rgba(31,40,38,.75))}
.bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px}
.bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.4);overflow:hidden}
.bars i:first-child::after{content:"";display:block;height:100%;background:#fff;animation:bar 5s linear infinite}
.phone-cap{position:absolute;left:14px;right:14px;bottom:16px;color:#fff;display:flex;flex-direction:column;gap:6px}
.phone-cap .mono{font-size:10px;opacity:.85}
.phone-cap b{font-weight:600;font-size:18px;line-height:1.2}
.st{position:absolute;z-index:3;font-weight:800;transform:rotate(var(--r));animation:pop .8s var(--d,.3s) cubic-bezier(.2,.8,.3,1.4) both}
.st-circle{display:grid;place-items:center;text-align:center;border-radius:50%}
.st-tang{right:40px;top:330px;width:150px;height:150px;background:var(--tang);color:var(--paper);--r:-12deg;transition:transform .3s}
.st-tang:hover{transform:rotate(0) scale(1.08)}
.st-tang b{display:block;font-size:44px;letter-spacing:-.04em;line-height:.9}
.st-tang small{display:block;font-size:14px;font-weight:600;margin-top:4px}
.st-lemon{left:200px;top:10px;background:var(--lemon);padding:12px 20px;border-radius:999px;font-size:22px;--r:8deg;--d:.5s}
.st-mint{right:110px;bottom:50px;width:120px;height:120px;background:var(--mint);font-size:26px;--r:10deg;--d:.7s}
.note{position:absolute;left:10px;top:400px;font-family:"Caveat",cursive;font-size:34px;color:var(--tang);transform:rotate(-6deg);z-index:3}

/* Ticker */
.ticker{background:var(--ink);color:var(--paper);padding:20px 0;transform:rotate(-1.5deg);margin:20px -20px 0;overflow:hidden}
.track{display:flex;gap:40px;width:max-content;animation:marq 30s linear infinite;font-weight:800;font-size:44px;letter-spacing:-.03em;white-space:nowrap}
.track span{display:flex;gap:40px;align-items:center}
.track span::after{content:"✺";color:var(--lemon)}

/* Compare */
.compare{padding:140px var(--g) 0;display:flex;flex-direction:column;gap:56px}
.compare h2{font-size:clamp(46px,6.7vw,96px);line-height:.9}
.compare h2 span{color:var(--tang)}
.cmp-title{display:flex;flex-direction:column;gap:18px}
.cmp-title .eyebrow{color:var(--tang)}
.cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.opt{border-radius:28px;padding:36px;box-shadow:inset 0 0 0 2px var(--ink);display:flex;flex-direction:column}
.opt .who{font-size:12px;opacity:.6}
.opt h3{margin:10px 0 0;font-weight:800;font-size:clamp(28px,2.6vw,36px);letter-spacing:-.04em;line-height:1}
.opt dl{margin:8px 0 0}
.opt dt{font-family:"DM Mono",monospace;font-size:11px;opacity:.6;margin-top:20px}
.opt dd{margin:4px 0 0;font-size:17px;line-height:1.4}
.opt.ours{background:var(--tang);color:var(--paper);box-shadow:0 8px 0 var(--ink)}
.opt.ours .who,.opt.ours dt{opacity:.85}
.opt .tagline{font-family:"Caveat",cursive;font-size:28px;line-height:1.05;margin-top:12px;color:var(--lemon)}

/* Services bento */
.services{padding:140px var(--g) 120px;display:flex;flex-direction:column;gap:56px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px}
h2{margin:0;font-weight:800;letter-spacing:-.05em}
.services h2{font-size:clamp(46px,6.7vw,96px);line-height:.9}
.services h2 span{color:var(--mint)}
.sec-head p{margin:0;font-size:19px;line-height:1.5;max-width:360px}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:300px 300px;gap:16px}
.card{border-radius:28px;transition:transform .3s}
.card h3{margin:0;font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1}
.card p{margin:8px 0 0;font-size:15px;line-height:1.4}
.b-walk{grid-column:span 2;grid-row:span 2;background:var(--tang);color:var(--paper);padding:28px;display:flex;flex-direction:column;gap:20px;scroll-margin-top:24px}
.media{flex:1;border-radius:18px;overflow:hidden;position:relative;background:var(--tang-deep)}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.media .tag{position:absolute;left:14px;top:14px;font-family:"DM Mono",monospace;font-size:12px;background:rgba(31,40,38,.7);color:var(--paper);padding:6px 10px;border-radius:999px;pointer-events:none}
.playbtn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--paper);display:grid;place-items:center;border:0;cursor:pointer;transition:transform .2s}
.playbtn:hover{transform:scale(1.08)}
.playbtn svg{width:30px;height:32px;margin-left:6px;fill:var(--tang);stroke:var(--tang);stroke-width:2;stroke-linejoin:round;overflow:visible}
.playing .playbtn,.playing .tag{display:none}
.walk-row{display:flex;justify-content:space-between;align-items:end;gap:20px}
.b-walk h3{font-size:44px;letter-spacing:-.04em}
.b-walk p{font-size:17px;margin-top:10px;max-width:420px;line-height:1.45}
.chip{font-family:"DM Mono",monospace;font-size:13px;background:var(--paper);color:var(--ink);padding:8px 12px;border-radius:999px;white-space:nowrap}
.b-spot{background:var(--lemon);padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.b-spot:hover,.b-format:hover{transform:rotate(-1.5deg)}
.icon{font-size:48px;line-height:1}
.b-season{overflow:hidden;position:relative;background:var(--mint)}
.b-season:hover,.b-hooks:hover{transform:rotate(1.5deg)}
.b-season img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-season h3{position:absolute;left:20px;bottom:20px;background:var(--paper);padding:6px 12px;border-radius:12px}
.b-hooks{background:var(--ink);color:var(--paper);padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.b-hooks .mono{font-size:13px;color:var(--mint)}
.b-hooks p{opacity:.8}
.b-format{background:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 2px var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{font-family:"DM Mono",monospace;font-size:12px;padding:6px 10px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.cal .legend{display:none}
.swipe{display:none;font-family:"Caveat",cursive;font-size:24px;color:var(--tang);transform:rotate(-2deg);transform-origin:left}

/* Content calendar band */
.cal-band{margin:0 var(--g);border-radius:40px;background:var(--mint);padding:80px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;align-items:center}
.cal-copy{display:flex;flex-direction:column;gap:24px}
.eyebrow{font-family:"DM Mono",monospace;font-size:14px}
.cal-band h2{font-size:clamp(42px,5.3vw,76px);line-height:.92}
.cal-copy p{margin:0;font-size:18px;line-height:1.5;max-width:420px}
.legend{display:flex;gap:8px;flex-wrap:wrap}
.legend span{display:flex;gap:8px;align-items:center;background:var(--paper);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600}
.legend span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.cal{background:var(--paper);border-radius:28px;padding:24px;box-shadow:0 12px 0 var(--ink)}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.cal-head b{font-weight:800;font-size:24px;letter-spacing:-.03em}
.cal-head .mono{font-size:12px;background:var(--ink);color:var(--paper);padding:6px 10px;border-radius:999px;white-space:nowrap}
.grid7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dow{font-family:"DM Mono",monospace;font-size:11px;opacity:.55;padding:0 4px 4px}
.d{aspect-ratio:1;border-radius:12px;background:rgba(31,40,38,.05);padding:8px;display:flex;flex-direction:column;justify-content:space-between}
.d span{font-family:"DM Mono",monospace;font-size:11px}
.d b{font-size:11px;font-weight:600;line-height:1.1}
.d.r{background:var(--tang);color:var(--paper)}
.d.s{background:var(--lemon)}
.d.p{background:var(--ink);color:var(--paper)}

/* Problem */
.problem{padding:140px var(--g) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.problem h2{font-size:clamp(46px,6.7vw,96px);line-height:.9;position:sticky;top:40px}
.problem h2 span{color:var(--tang)}
.pains{display:flex;flex-direction:column;gap:16px}
.pain{border-radius:28px;padding:32px 36px;box-shadow:inset 0 0 0 2px var(--ink)}
.pain h3{margin:0;font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1.05}
.pain p{margin:10px 0 0;font-size:17px;line-height:1.45}
.pain.big{background:var(--lemon);box-shadow:none;display:flex;gap:28px;align-items:center}
.pain.big b{font-weight:800;font-size:clamp(56px,6vw,88px);letter-spacing:-.06em;line-height:.85;white-space:nowrap}
.pain small{display:block;font-family:"DM Mono",monospace;font-size:11px;margin-top:12px;opacity:.7}

/* Story */
.story{margin:140px var(--g) 0;border-radius:40px;background:var(--ink);color:var(--paper);padding:80px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;align-items:center}
.story-head{display:flex;flex-direction:column;gap:22px}
.story .eyebrow{color:var(--mint)}
.story h2{font-size:clamp(42px,5.3vw,76px);line-height:.92}
.story p{margin:0;font-size:18px;line-height:1.5}
.story p b{display:block;margin-bottom:10px;font-weight:800;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em;color:var(--lemon)}
.beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.beats figure{margin:0;display:flex;flex-direction:column;gap:12px}
.beats figure:nth-child(2){margin-top:48px}
.before{position:relative;background:#fff;padding:6px 6px 28px;border-radius:3px;transform:rotate(-2.5deg);box-shadow:0 10px 24px rgba(0,0,0,.3);margin:0 10px 26px}
.beats figure:nth-child(2) .before{transform:rotate(2deg)}
.before img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.before::after{content:"";position:absolute;right:22px;bottom:-38px;width:22px;height:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40' fill='none' stroke='%23f7e36b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2c7 8 9 19 4 33'/%3E%3Cpath d='M5 28l7 8 6-8'/%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none}
.before span{position:absolute;left:10px;bottom:2px;font-family:"Caveat",cursive;font-size:21px;color:var(--ink)}
.sc{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--slate);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.sc video{width:100%;height:100%;object-fit:cover}
.sc .bars{top:10px;left:10px;right:10px;gap:3px}
.sc .bars i::after{content:"";display:block;height:100%;width:0;background:#fff}
.sc .bars i.done::after{width:100%}
.sc .bars i.on::after{animation:bar 5s linear infinite}
.sc .bars i:first-child:not(.on)::after{animation:none}
.sc-tag{position:absolute;top:22px;left:12px;font-size:10px;color:#fff;opacity:.9}
.sc figcaption{position:absolute;left:14px;right:14px;bottom:16px;font-family:"Caveat",cursive;font-size:26px;line-height:1.02;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* Audiences */
.auds{padding:0 var(--g) 140px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.aud{border-radius:28px;padding:44px;box-shadow:inset 0 0 0 2px var(--ink);display:flex;flex-direction:column;gap:20px;transition:background .2s,color .2s}
.aud:hover{background:var(--ink);color:var(--paper)}
.aud .mono{font-size:13px;color:var(--tang)}
.aud h3{margin:0;font-weight:800;font-size:clamp(32px,3.6vw,52px);letter-spacing:-.045em;line-height:.95}
.aud p{margin:0;font-size:18px;line-height:1.5;max-width:480px}
.aud .go{font-weight:600;font-size:17px;color:var(--tang)}

/* Footer CTA */
.cta{background:var(--tang);color:var(--paper);padding:120px var(--g) 56px;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.cta h2{font-size:clamp(76px,11.7vw,168px);line-height:.84;letter-spacing:-.065em}
.cta p{margin:0;font-size:21px;max-width:560px;line-height:1.45}
.foot{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:80px;font-family:"DM Mono",monospace;font-size:13px;gap:20px;flex-wrap:wrap}
.foot .mark{font-family:"Bricolage Grotesque",sans-serif;font-size:28px}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot nav a:hover{color:var(--ink)}
.cta .fine{width:100%;max-width:none;margin:0;font-family:"DM Mono",monospace;font-size:11px;line-height:1.6;opacity:.85;text-align:center}

/* Mobile buy bar */
.buybar{display:none}

/* Waitlist page */
.wl{padding:40px var(--g) 120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);grid-template-areas:"intro form" "steps form";column-gap:72px;row-gap:48px;align-items:start}
.wl-intro{grid-area:intro;display:flex;flex-direction:column;gap:24px}
.wl-intro p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:540px;text-wrap:pretty}
.wl h1{font-size:clamp(60px,7.6vw,112px)}
.steps-wrap{grid-area:steps;display:flex;flex-direction:column;gap:28px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.steps li{position:relative;background:#fff;padding:28px 22px 24px;box-shadow:0 10px 24px rgba(31,40,38,.12);transform:rotate(var(--r))}
.steps li:nth-child(1){--r:-1deg}.steps li:nth-child(2){--r:.8deg}.steps li:nth-child(3){--r:-.6deg}
.steps li::before{content:"";position:absolute;top:-12px;left:50%;margin-left:-45px;width:90px;height:24px;background:var(--t)}
.steps li:nth-child(1){--t:rgba(247,227,107,.8)}.steps li:nth-child(2){--t:rgba(127,214,194,.7)}.steps li:nth-child(3){--t:rgba(255,107,61,.5)}
.steps .n{font-family:"Caveat",cursive;font-size:34px;color:var(--tang);line-height:1}
.steps b{display:block;font-size:20px;letter-spacing:-.02em;margin:6px 0}
.steps p{margin:0;font-size:15px;line-height:1.45}
.soon{margin:0;font-size:15px;line-height:1.5}
.soon .mono{font-size:12px;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:999px;margin-right:6px}
.form-card{grid-area:form;position:relative;background:#fff;border-radius:28px;padding:40px 36px 32px;box-shadow:inset 0 0 0 2px var(--ink),0 12px 0 var(--ink)}
.form-card::before{content:"";position:absolute;top:-14px;left:50%;margin-left:-60px;width:120px;height:28px;background:rgba(247,227,107,.8);transform:rotate(-3deg)}
.form-card h2{font-size:clamp(32px,3vw,40px);letter-spacing:-.04em;line-height:1}
.form-card .sub{margin:10px 0 24px;font-size:16px;line-height:1.45}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-family:"DM Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.field input{font:inherit;font-size:17px;padding:15px 18px;border-radius:16px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);width:100%;min-height:52px}
.field input:focus{outline:3px solid var(--tang);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px;font-size:14px;line-height:1.45;cursor:pointer}
.check input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--tang)}
.form-card .btn{width:100%}
.legal{margin:16px 0 0;font-size:13px;line-height:1.5;opacity:.8}
.legal a{text-decoration:underline;text-decoration-color:var(--tang);text-underline-offset:3px}
.err{margin:0 0 14px;font-size:15px;font-weight:600;color:#b8361a}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.joined{display:none;text-align:center;padding:12px 0 8px}
.joined .st-circle{position:relative;margin:0 auto 22px;width:110px;height:110px;background:var(--lemon);font-size:48px;--r:-8deg;animation:pop .8s .1s cubic-bezier(.2,.8,.3,1.4) both}
.joined p{margin:12px 0 0;font-size:17px;line-height:1.5}
.joined:focus{outline:none}
.joined a{text-decoration:underline;text-decoration-color:var(--tang);text-underline-offset:3px}
.form-card:has(#joined:target) form{display:none}
#joined:target{display:block}

@keyframes pop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.12) rotate(var(--r))}100%{transform:scale(1) rotate(var(--r))}}
@keyframes bar{from{width:0}to{width:100%}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Tablet: interpolate */
@media (max-width:1023px){
  :root{--g:32px}
  .hero{grid-template-columns:1fr;grid-template-areas:"text" "collage" "ctas";padding-bottom:80px}
  .collage{width:100%;max-width:660px;margin:56px auto 0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:420px 260px 260px}
  .cal-band{grid-template-columns:1fr;padding:56px 40px;gap:40px}
  .hero h1{font-size:clamp(60px,9vw,96px)}
  .problem{grid-template-columns:1fr;gap:40px;padding-top:96px}
  .problem h2{position:static}
  .compare{padding-top:96px}
  .cmp-grid{grid-template-columns:1fr;max-width:640px}
  .story{grid-template-columns:1fr;padding:56px 40px;gap:40px;margin-top:96px}
  .auds{grid-template-columns:1fr}
  .wl{grid-template-columns:1fr;grid-template-areas:"intro" "form" "steps"}
  .form-card{max-width:560px}
}

/* Mobile design (390px) */
@media (max-width:767px){
  :root{--g:20px}
  .nav{position:sticky;top:0;z-index:20;background:var(--paper);padding:12px 20px;border-bottom:1px solid rgba(31,40,38,.08)}
  .mark{font-size:22px}
  .pill{padding:12px 16px;font-size:14px}
  .badge{font-size:11px;padding:6px 12px 6px 6px;gap:8px}
  .badge span{padding:3px 8px}
  h1,.hero h1{font-size:clamp(52px,16.4vw,64px)}
  .hero h1 br{display:none}
  .aside{font-size:26px;margin-left:4px}
  .hero{padding:28px 20px 48px}
  .hero-text{gap:18px}
  .hero-text p{font-size:17px}
  .collage{height:440px;max-width:none;margin:28px -20px 36px;width:auto}
  .pol{padding:8px 8px 34px;box-shadow:0 14px 30px rgba(31,40,38,.18)}
  .pol .cap{left:10px;bottom:6px;font-size:19px}
  .tape{top:-10px;width:70px;height:20px}
  .pol1{left:8px;top:30px;width:150px;--r:-9deg}
  .pol1 .tape{left:40px}
  .pol2{display:none}
  .pol3{left:auto;right:6px;top:190px;bottom:auto;width:140px;--r:8deg}
  .pol3 .tape{display:block}
  .phone{width:200px;top:10px;margin-left:-100px;border-radius:28px;padding:6px;box-shadow:0 24px 50px rgba(31,40,38,.28)}
  .screen{border-radius:23px}
  .bars{top:10px;left:10px;right:10px;gap:3px}
  .phone-cap{left:12px;right:12px;bottom:12px;gap:4px}
  .phone-cap .mono{font-size:9px}
  .phone-cap b{font-size:15px}
  .st-tang{right:auto;left:16px;top:250px;width:104px;height:104px}
  .st-tang b{font-size:30px}
  .st-tang small{font-size:11px;margin-top:3px}
  .st-lemon{left:auto;right:20px;top:20px;padding:9px 14px;font-size:16px}
  .st-mint{right:40px;bottom:0;width:84px;height:84px;font-size:18px}
  .note{display:none}
  .hero-ctas{flex-direction:column;gap:10px;margin-top:0}
  .hero-ctas .btn{display:block;padding:18px;font-size:17px;box-shadow:0 5px 0 var(--ink)}
  .hero-ctas .btn-outline{padding:16px;box-shadow:inset 0 0 0 2px var(--ink)}
  .ticker{padding:14px 0;transform:rotate(-2deg);margin:0 -20px}
  .track{gap:24px;font-size:28px;animation-duration:24s}
  .track span{gap:24px}
  .problem{padding:72px 20px 0;gap:24px}
  .problem h2{font-size:46px}
  .pain{padding:24px;border-radius:24px}
  .pain h3{font-size:24px}
  .pain p{font-size:15px}
  .pain.big{flex-direction:column;align-items:flex-start;gap:14px}
  .pain.big b{font-size:64px}
  .story{margin:72px 12px 0;border-radius:28px;padding:36px 20px;gap:28px}
  .story h2{font-size:42px}
  .story p{font-size:16px}
  .beats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;gap:12px;margin:0 -20px -24px;padding:10px 20px 24px;scrollbar-width:none}
  .beats::-webkit-scrollbar{display:none}
  .beats figure{flex:none;width:200px;scroll-snap-align:start}
  .beats figure:nth-child(2){margin-top:0}
  .sc figcaption{font-size:23px}
  .compare{padding:72px 20px 0;gap:24px}
  .compare h2{font-size:46px}
  .compare .sec-head{padding:0}
  .compare .sec-head p{display:block;font-size:16px}
  .cmp-grid{gap:12px}
  .opt{padding:24px;border-radius:24px}
  .opt dd{font-size:15px}
  .opt dt{margin-top:14px}
  .opt .tagline{font-size:24px}
  .services{padding:72px 0 64px;gap:24px}
  .sec-head{padding:0 20px}
  .services h2{font-size:46px}
  .sec-head p{display:none}
  .swipe{display:block;padding:0 20px}
  .bento{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 20px 12px;scrollbar-width:none}
  .bento::-webkit-scrollbar{display:none}
  .bento .card{flex:none;width:240px;min-height:300px;scroll-snap-align:start;border-radius:24px}
  .card:hover{transform:none}
  .card h3{font-size:26px}
  .card p{font-size:14px}
  .b-walk{width:300px!important;padding:16px;gap:14px;scroll-margin-top:84px}
  .media{flex:none;aspect-ratio:16/10;border-radius:14px}
  .playbtn{width:60px;height:60px;margin:-30px 0 0 -30px}
  .playbtn svg{width:22px;height:24px;margin-left:4px}
  .walk-row{flex-direction:column;align-items:flex-start;gap:14px}
  .b-walk h3{font-size:30px}
  .b-walk p{font-size:15px;margin-top:8px}
  .chip{font-size:11px;padding:6px 10px}
  .b-spot,.b-hooks,.b-format{padding:22px}
  .icon{font-size:38px}
  .b-season{height:300px}
  .cal-band{margin:0 12px;border-radius:28px;padding:36px 20px;display:flex;flex-direction:column;gap:18px}
  .cal-copy{gap:18px}
  .eyebrow{font-size:12px}
  .cal-band h2{font-size:42px}
  .cal-copy p{font-size:16px}
  .cal-copy .legend{display:none}
  .cal{border-radius:20px;padding:14px;box-shadow:0 8px 0 var(--ink);margin-top:6px}
  .cal-head{margin-bottom:10px}
  .cal-head b{font-size:17px;letter-spacing:-.02em}
  .cal-head .mono{font-size:10px;padding:4px 8px}
  .grid7{gap:4px}
  .dow{font-size:10px;text-align:center;padding:0 0 2px}
  .d{border-radius:8px;padding:4px}
  .d span{font-size:10px}
  .d b{display:none}
  .cal .legend{display:flex;margin-top:12px;gap:6px 12px}
  .cal .legend span{background:none;padding:0;font-size:12px;gap:6px}
  .cal .legend span::before{width:9px;height:9px}