:root{--ink:#14101F;--paper:#FFFBF5;--purple:#7B3FE4;--lime:#FF7A3D;--orange:#FF7A3D;--lilac:#E9DDFF;--peach:#FFE0CF;--mint:#E9DDFF;--pink:#FFE0CF;--sky:#E9DDFF;--muted:#3A3450}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:#5B21C4}a:hover{color:#3B0F8C}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto}
.display{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.04em;line-height:.95;margin:0}
.hl{background:var(--purple);color:#fff;padding:0 .14em .02em;border-radius:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.chip{display:inline-block;border:2px solid var(--ink);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;background:#fff}
.chip.lime{background:var(--lime)}.chip.orange{background:var(--lilac)}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:17px;padding:16px 26px;border-radius:999px;border:2px solid var(--ink);cursor:pointer;font-family:inherit}
.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{color:#fff;background:#2b2440}
.btn.orange{background:var(--orange);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}.btn.orange:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn.lime{background:var(--lime);color:var(--ink)}.btn.lime:hover{color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:progress}
.card{border:2px solid var(--ink);border-radius:28px;box-shadow:6px 6px 0 var(--ink);background:#fff}
/* nav */
.top{padding:16px 16px 0}
.nav{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:10px 10px 10px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;box-shadow:4px 4px 0 var(--ink)}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo i{width:22px;height:22px;border-radius:999px;background:var(--purple);border:2px solid var(--ink);box-shadow:inset -8px 0 0 var(--orange)}
.nav nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:15px;font-weight:600}
.nav nav a{color:var(--ink);text-decoration:none;padding:12px 14px;border-radius:999px}
.nav nav a:hover{background:var(--lilac)}
.nav nav a.on{background:var(--peach);border:2px solid var(--ink);padding:10px 14px}
.nav nav a.cta{background:var(--purple);color:#fff;padding:12px 20px}
.nav nav a.cta:hover{background:#6A2FD3}
/* hero */
.hero{padding:64px 16px 80px}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-copy{flex:3 1 560px;display:flex;flex-direction:column;gap:28px;min-width:0}
.hero h1{font-size:clamp(52px,8.5vw,124px);letter-spacing:-.045em;line-height:1.06}
.lede{margin:0;font-size:21px;max-width:600px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:12px}
.collage{flex:2 1 340px;position:relative;height:550px;max-width:460px}
.polaroid{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px 12px 16px;box-shadow:6px 6px 0 var(--ink)}
.polaroid .ph{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.polaroid p{margin:10px 0 0;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:18px}
.collage .a{position:absolute;left:4%;top:0;width:62%;transform:rotate(-6deg)}
.collage .a .ph{background:var(--lilac);color:#5B21C4}
.collage .b{position:absolute;right:0;top:120px;width:58%;transform:rotate(5deg)}
.collage .b .ph{background:var(--peach);color:#8A3A12}
.collage .sticker{position:absolute;left:2%;bottom:4px;white-space:nowrap;background:var(--orange);border:2px solid var(--ink);border-radius:999px;padding:14px 22px;transform:rotate(-4deg);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px}
/* ticker */
.ticker{background:var(--purple);color:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;padding:18px 0;transform:rotate(-1.2deg);margin:0 -20px}
.track{display:flex;width:max-content;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:28px;white-space:nowrap;animation:marquee 40s linear infinite}
.track span{padding-right:22px}.track b{color:var(--orange);padding-right:22px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}html{scroll-behavior:auto}}
/* sections */
section.block{padding:0 16px 96px}
.asks{padding:112px 16px 96px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.head h2{font-size:clamp(44px,6vw,88px);max-width:1000px}
.head p{margin:0;font-size:18px;max-width:400px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:24px}
.ask{padding:32px;display:flex;flex-direction:column;gap:18px;min-height:260px}
.ask .top-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ask .num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:72px;line-height:.8;letter-spacing:-.05em}
.ask h3{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.025em}
.ask p{margin:0;color:#26203A}
.t1{background:var(--lilac)}.t2{background:var(--peach)}.t3{background:var(--peach)}.t4{background:var(--lilac)}.t5{background:var(--lilac)}
.t1 .num,.t4 .num{color:var(--purple)}.t2 .num,.t3 .num{color:#C94E14}
.because{background:var(--purple);color:#fff;border:2px solid var(--ink);border-radius:36px;padding:clamp(32px,6vw,72px);display:flex;flex-direction:column;gap:32px}
.because h2{align-self:flex-start;transform:rotate(-2deg);margin:0;color:var(--ink)}
.because ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.because li{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,60px);line-height:1.05;letter-spacing:-.035em}
.because li span{color:#FFB08A}
.sign{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.sign .intro{flex:1 1 380px;display:flex;flex-direction:column;gap:18px}
.sign .intro h2{font-size:clamp(44px,6vw,80px)}
.sign .intro p{margin:0;font-size:19px;color:var(--muted)}
.signform{flex:1 1 480px;padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:700}
.field.wide,.signform .actions,.signform .msg{grid-column:1/-1}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=url],.field input[type=date],.field select,.field textarea{font:inherit;font-weight:400;padding:14px 18px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);width:100%}
.field textarea{border-radius:18px;min-height:110px}
.field input[aria-invalid=true]{border-color:#B3261E;background:#FFF3F2}
.check{flex-direction:row;align-items:center;gap:12px;font-weight:600}
.check input{width:24px;height:24px;accent-color:var(--purple)}
.err{margin:0;color:#B3261E;font-size:14px;font-weight:600}
.help{margin:0;color:var(--muted);font-size:14px;font-weight:400}
.actions .btn{width:100%}
.msg{margin:0}
.thanks{padding:40px;display:flex;flex-direction:column;gap:12px;flex:1 1 480px;background:var(--peach)}
.thanks h3{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:40px;letter-spacing:-.03em;line-height:1;color:var(--purple)}
.thanks p{margin:0;font-size:18px}
.teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:var(--orange);color:var(--ink);text-decoration:none;border:2px solid var(--ink);border-radius:36px;padding:40px;box-shadow:6px 6px 0 var(--ink)}
.teaser:hover{color:var(--ink)}
.teaser .t{display:flex;flex-direction:column;gap:8px;flex:1 1 420px}
.teaser .t strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(34px,4.5vw,56px);line-height:.98;letter-spacing:-.035em}
.teaser .go{font-weight:700;background:var(--purple);color:#fff;padding:18px 28px;border-radius:999px;border:2px solid var(--ink)}
/* stories */
.page-head{padding:72px 16px 64px}
.page-head .wrap{display:flex;flex-direction:column;gap:24px}
.page-head .chip{align-self:flex-start;transform:rotate(-2deg);background:var(--orange)}
.page-head h1{font-size:clamp(52px,8vw,116px);letter-spacing:-.045em;line-height:1.06;max-width:1100px}
.stories{display:flex;flex-direction:column;gap:40px}
.story{border-radius:36px;padding:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px}
.story figure{margin:0;flex:0 1 240px}
.story figure.then{transform:rotate(-4deg)}.story figure.now{transform:rotate(4deg)}
.story .shot{aspect-ratio:4/5;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-size:14px;font-weight:700}
.story .shot img{width:100%;height:100%;object-fit:cover;display:block}
.story .shot.has{padding:0}
.story figure.then .shot{background:#F1ECF8;border:2px dashed #9C86C4;color:#5B21C4}
.story figure.now .shot{background:#FFF1E8;border:2px dashed #D9875A;color:#8A3A12}
.story .shot.has{border-style:solid!important}
.story figcaption{padding-top:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:20px}
.story figure.now figcaption{text-align:right}
.story .words{flex:1 1 360px;display:flex;flex-direction:column;gap:18px;min-width:0}
.story blockquote{margin:0;background:#fff;border:2px solid var(--ink);border-radius:24px 24px 24px 6px;padding:26px 28px}
.story blockquote p{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:22px;line-height:1.4;letter-spacing:-.01em}
.story .who{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.story .who strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em}
.state{padding:40px;text-align:center;font-weight:600}
.dim{opacity:.6}
.closer{background:var(--purple);color:#fff;border:2px solid var(--ink);border-radius:36px;padding:48px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;box-shadow:6px 6px 0 var(--ink)}
.closer p{margin:0;flex:1 1 440px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(34px,4.5vw,60px);line-height:.98;letter-spacing:-.035em}
/* footer */
footer{background:var(--ink);color:#E4DEF0;padding:56px 16px;border-top:6px solid var(--orange)}
footer .wrap{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
footer .help-lines{flex:1 1 420px;display:flex;flex-direction:column;gap:12px}
footer .help-lines strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:#fff;font-size:24px}
footer p{margin:0;line-height:1.8}
footer .ack{flex:1 1 420px;font-size:14px;line-height:1.7}
/* keep the page from sliding sideways */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.hero .hl{white-space:nowrap}
/* because list with supporting lines */
.because ul{gap:0}
.because li{padding:26px 0;border-top:2px solid rgba(255,255,255,.22)}
.because li:first-child{border-top:0;padding-top:0}
.because li p{margin:12px 0 0;font-family:"DM Sans",sans-serif;font-weight:400;font-size:clamp(17px,1.6vw,21px);line-height:1.55;letter-spacing:0;max-width:780px;color:#F1EAFE}
/* seven asks */
.t6{background:var(--peach)}.t7{background:var(--lilac)}
.t5 .num,.t7 .num{color:var(--purple)}.t6 .num{color:#C94E14}
.grid .ask:last-child:nth-child(odd){grid-column:1/-1}
/* phones */
@media (max-width:640px){
.top{padding:12px 12px 0}
.nav{border-radius:26px;padding:12px 12px 10px 16px;gap:8px;box-shadow:3px 3px 0 var(--ink)}
.nav nav{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:2px;font-size:14px}
.nav nav a{padding:10px 8px;white-space:nowrap}
.nav nav a[href$="#because"]{display:none}
.nav nav a.on{padding:8px 10px}
.nav nav a.cta{padding:10px 14px}
.hero{padding:40px 16px 56px}
.hero .wrap{gap:40px}
.hero-copy{gap:22px}
.lede{font-size:19px}
.collage{height:375px;max-width:330px;margin:0 auto;width:100%}
.collage .b{top:56px}
.collage .sticker{font-size:18px;padding:10px 16px}
.polaroid p{font-size:16px}
.ticker{margin:0;padding:14px 0}
.track{font-size:22px}
.asks{padding:72px 16px 72px}
.head{margin-bottom:32px}
.ask{padding:24px;min-height:0}
.ask .num{font-size:56px}
.ask h3{font-size:26px}
section.block{padding:0 16px 72px}
.because{border-radius:28px}
.signform{padding:24px}
.teaser{padding:28px 24px;border-radius:28px}
.closer{padding:32px 24px;border-radius:28px}
.page-head{padding:48px 16px 48px}
.story{padding:24px 18px;gap:24px 16px;border-radius:28px}
.story figure{flex:0 0 calc(50% - 8px);padding:8px 8px 10px;box-shadow:3px 3px 0 var(--ink)}
.story figure.then{transform:rotate(-3deg)}.story figure.now{transform:rotate(3deg)}
.story figcaption{font-size:16px;padding-top:6px}
.story .shot{font-size:12px;padding:8px}
.story .words{order:3;flex-basis:100%}
.story blockquote{padding:20px 22px}
.story blockquote p{font-size:19px}
}