/* tripwingz landing v10 — white ground, yellow only on actions, the app performs */
@font-face{font-family:"Archivo Black";src:url(fonts/ArchivoBlack-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Onest;src:url(fonts/Onest-VariableFont_wght.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#0D0D0F;--y:#FCF567;--mute:#5E5E66;--tile:#F4F4F2;--faint:#E5E5E8;--r:18px;--m:20px;--hh:64px;
--ease-out:cubic-bezier(.22,1,.36,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.76,0,.24,1);--spring:cubic-bezier(.32,.72,0,1)}
@media (min-width:760px){:root{--m:40px}}
@media (min-width:1200px){:root{--m:48px}}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 8px);background:#fff}
body{margin:0;font-family:Onest,system-ui,sans-serif;color:var(--ink);background:#fff;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}a{color:inherit}p{margin:0}
h1,h2,h3{font-family:"Archivo Black",Onest,sans-serif;font-weight:400;letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance}
.wrap{padding-left:max(var(--m),env(safe-area-inset-left));padding-right:max(var(--m),env(safe-area-inset-right));max-width:1440px;margin:0 auto}
.line{font-size:18px;color:var(--mute);margin-top:14px;max-width:34ch}
.tiny{font-size:14px;color:var(--mute)}

/* buttons: full pill everywhere, yellow + ink edge. feedback: magnetic drift + press */
.btn{--mx:0px;--my:0px;--s:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 16px/1 Onest,sans-serif;text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:0 20px;min-height:44px;cursor:pointer;background:var(--y);color:var(--ink);white-space:nowrap;transform:translate(var(--mx),var(--my)) scale(var(--s));transition:transform 180ms var(--ease-out);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{--s:.96;transition-duration:140ms}
.btn.big{font-size:18px;padding:0 30px;min-height:60px}
.btn.full{width:100%}
.btn.sm{font-size:15px;padding:0 16px}
.btn:focus-visible,input:focus-visible,summary:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.linkbtn{background:none;border:0;border-bottom:2px solid currentColor;font:inherit;font-weight:700;cursor:pointer;padding:6px 0 2px;color:inherit;min-height:44px}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;height:calc(var(--hh) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--m),env(safe-area-inset-right)) 0 max(var(--m),env(safe-area-inset-left));background:#fff}
.logo{display:flex;align-items:center;min-height:44px}.logo img{height:22px;width:auto}

/* header right: invite (hidden while hero cta / form / menu is on screen, js only) + menu button */
.hdr-r{display:flex;align-items:center;gap:6px;margin-right:-8px}
.hdr-cta .cta-s{display:none}
@media (max-width:359px){.top .logo img{height:20px}.hdr-cta.btn.sm{font-size:14px;padding:0 12px}.hdr-cta .cta-l{display:none}.hdr-cta .cta-s{display:inline}}
.hdr-cta{--hy:0px;transform:translate(var(--mx),calc(var(--my) + var(--hy))) scale(var(--s))}
.js .hdr-cta{transition:transform 250ms var(--ease-out),opacity 250ms var(--ease-out),visibility 0s}
.js .top:not(.cta-on) .hdr-cta,.js .top.mn-open .hdr-cta{--hy:8px;opacity:0;visibility:hidden;pointer-events:none;transition:transform 250ms var(--ease-out),opacity 250ms var(--ease-out),visibility 0s linear 250ms}
.mn-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--ink);-webkit-tap-highlight-color:transparent;cursor:pointer;transition:background-color .18s}
.mn-btn:active{background:var(--tile)}
.mn-ic{position:relative;width:20px;height:10px;display:block}
.mn-ic i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform 250ms var(--spring),width 250ms var(--spring)}
.mn-ic i:first-child{top:0}.mn-ic i:last-child{bottom:0;right:6px;transition-property:transform,right}
.mn-open .mn-ic i:first-child{transform:translateY(4px) rotate(45deg)}
.mn-open .mn-ic i:last-child{right:0;transform:translateY(-4px) rotate(-45deg)}
/* panel: no js = :target; js = .mn-open */
.mn{display:none;position:fixed;z-index:2;left:0;right:0;top:calc(var(--hh) + env(safe-area-inset-top));max-height:calc(100svh - var(--hh) - env(safe-area-inset-top));overflow:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);border-radius:0 0 24px 24px;box-shadow:0 24px 48px -24px rgba(13,13,15,.28);border-bottom:1.5px solid var(--ink)}
.mn:target{display:block}
.js .mn{display:block;visibility:hidden;opacity:0;transform:translateY(-10px);transform-origin:top right;pointer-events:none;transition:opacity 250ms var(--ease-out),transform 250ms var(--spring),visibility 0s linear 250ms}
.js .mn-open .mn{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity 250ms var(--ease-out),transform 250ms var(--spring),visibility 0s}
.mn-scrim{display:none}
.js .mn-scrim{display:block;position:fixed;z-index:1;inset:calc(var(--hh) + env(safe-area-inset-top)) 0 0;background:rgba(13,13,15,.22);opacity:0;visibility:hidden;transition:opacity 250ms var(--ease-out),visibility 0s linear 250ms}
.js .mn-open .mn-scrim{opacity:1;visibility:visible;transition:opacity 250ms var(--ease-out),visibility 0s}
.mn-in{padding:4px max(var(--m),env(safe-area-inset-right)) 20px max(var(--m),env(safe-area-inset-left))}
.mn-l{list-style:none;margin:0;padding:0}
.mn-l li{border-bottom:1px solid var(--faint)}
.mn-l .mn-a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 10px;min-height:60px;padding:14px 0 12px;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.mn-t{font:400 28px/1 "Archivo Black",Onest,sans-serif;letter-spacing:-.03em}
.mn-h{font-size:14px;font-weight:600;color:var(--mute);white-space:nowrap}
.mn-l .mn-a:active .mn-t{opacity:.55}
.js .mn-l li{opacity:0;transform:translateY(6px);transition:opacity 220ms var(--ease-out),transform 260ms var(--ease-out)}
.js .mn-open .mn-l li{opacity:1;transform:none;transition-delay:calc(40ms + var(--i) * 30ms)}
.mn-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.mn-ig{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.mn-cta{min-height:52px;padding:0 22px}
@media (max-width:359px){.mn-t{font-size:26px}.mn-h{display:none}.mn-f{flex-direction:column-reverse;align-items:stretch}.mn-ig{justify-content:center}}
@media (min-width:1000px){
  .mn{left:auto;right:max(var(--m),env(safe-area-inset-right));top:calc(var(--hh) + env(safe-area-inset-top) - 4px);width:420px;border:1.5px solid var(--ink);border-radius:24px;box-shadow:0 30px 60px -30px rgba(13,13,15,.35)}
  .mn-in{padding:6px 24px 22px}
  .mn-l .mn-a:hover .mn-t{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
  .js .mn-scrim{background:transparent}
}
html.mn-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.js .hdr-cta,.js .top:not(.cta-on) .hdr-cta,.js .top.mn-open .hdr-cta,.js .mn,.js .mn-open .mn,.js .mn-scrim,.js .mn-open .mn-scrim,.js .mn-l li,.js .mn-open .mn-l li,.mn-ic i{transition:none;--hy:0px}.js .mn,.js .mn-l li{transform:none}}
/* ---------- hero: the sentence split by the phone ---------- */
section.hero{position:relative;padding:20px 0 0}
/* safari: keep rounded clipping for transformed (sliding) screens */
.a-vp{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
.hero-stage{padding:0 max(var(--m),env(safe-area-inset-right)) 0 max(var(--m),env(safe-area-inset-left));display:flex;flex-direction:column}
.badge{font-size:15px;font-weight:600;color:var(--mute);margin-bottom:14px}
.hero h1{font-size:clamp(40px,13.4vw,64px);line-height:.95}
.h-l,.h-r{display:block}
.dr{display:inline-block}
.hero-foot{margin-top:20px}
.sub{font-size:19px;line-height:1.35;max-width:34ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.soon{font-size:15px;color:var(--mute);font-weight:600}
.hero-ph{order:3;display:flex;justify-content:center;margin-top:36px}
.a-note{position:absolute;z-index:55;top:52px;left:10px;right:10px;display:flex;gap:11px;align-items:center;background:#fff;border:1.5px solid var(--ink);border-radius:22px;padding:11px 14px 11px 11px;transform:translateY(-150%);opacity:0;transition:transform .6s var(--ease-expo),opacity .18s}
.a-note.show{transform:none;opacity:1}
.a-note img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.a-note div{flex:1;min-width:0}.a-note b{display:block;font-size:15px}.a-note span{display:block;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-note i{font-style:normal;font-size:14px;color:#6a6a72;align-self:flex-start}
@media (min-width:1000px){
  section.hero{padding-top:8px}
  .hero-stage{flex-direction:row;align-items:center;justify-content:space-between;gap:64px;min-height:max(720px,calc(var(--vhl,100svh) - var(--hh) - 120px))}
  .hero-copy{flex:1;min-width:0;max-width:760px}
  .hero h1{font-size:clamp(56px,6.4vw,104px)}
  .hero-ph{order:0;margin:0;flex:none;padding-right:clamp(0px,4vw,72px)}
  .hero .a-phone{--k:.8}
  .hero-foot{margin-top:28px}
}
/* hero entrance */
.js .rise{opacity:0;animation:rise .8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 80ms + 120ms)}
.js .h-l{opacity:0;animation:inL .9s var(--ease-expo) .1s forwards}
.js .h-r{opacity:0;animation:inL .9s var(--ease-expo) .18s forwards}
.js .hero-ph .a-phone{opacity:0;animation:phIn 1.1s var(--ease-expo) .22s forwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes phIn{from{opacity:0;transform:translateY(56px) scale(.96)}to{opacity:1;transform:none}}
/* city names band (one marquee, pausable) */
.cities{margin-top:-1px;overflow:clip;padding:40px 0 0;position:relative}
.cities-track{display:flex;width:max-content;animation:mq 70s linear infinite}
.cities-set{display:flex;align-items:center;flex:none;padding-right:.3em;font:400 clamp(60px,13vw,176px)/1 "Archivo Black",sans-serif;letter-spacing:-.04em;color:var(--faint)}
.cities-set span{padding:0 .18em;white-space:nowrap}
.cities-set img{height:.74em;width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);margin:0 .1em}
@keyframes mq{to{transform:translateX(-50%)}}
.cities.paused .cities-track,.cities.off .cities-track{animation-play-state:paused}
@media (hover:hover){.cities:hover .cities-track{animation-play-state:paused}}
.mq-btn{display:flex;align-items:center;gap:8px;margin:6px max(var(--m),env(safe-area-inset-right)) 0 auto;min-height:44px;padding:0 4px;background:none;border:0;font:600 15px Onest,sans-serif;color:var(--mute);cursor:pointer}
.mq-btn .ic{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.mq-btn[aria-pressed=true] .ic{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.mq-btn:active{transform:scale(.96)}
@media (min-width:1000px){.cities{padding-top:28px}}

/* ---------- pain: ink-fill statement ---------- */
.pain{padding:104px 0 112px}
.pain h2{font-size:clamp(30px,5.4vw,80px);line-height:1.02;max-width:17ch}
.ink-fill .w{transition:opacity .2s linear}
.pain-ans{font-size:clamp(19px,1.9vw,26px);line-height:1.35;color:var(--mute);margin-top:32px;max-width:36ch}
.pain-ans b{color:var(--ink);font-weight:800}
.js .pain-ans{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .pain.done .pain-ans{opacity:1;transform:none}
@media (min-width:1000px){.pain h2{max-width:18ch}.pain .wrap{display:grid;grid-template-columns:8fr 4fr;align-items:end;column-gap:48px}.pain-ans{margin:0 0 .4em}}

/* ---------- how it works: pinned phone, the app pushes screen to screen ---------- */
.story{position:relative}
.story-stage{display:grid;padding:0 max(var(--m),env(safe-area-inset-right)) 0 max(var(--m),env(safe-area-inset-left))}
.bars{display:flex;gap:6px;margin-bottom:20px;max-width:420px}
.bars i{flex:1;height:4px;border-radius:4px;background:var(--faint);overflow:hidden}
.bars b{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.steps{display:grid}
.step h2{font-size:clamp(28px,8.4vw,64px);max-width:12ch}
.story-vis{display:flex;justify-content:center;margin-top:24px}
.story-ph .a-vp>.scr-w{position:absolute;inset:0;overflow:hidden}
.story-ph .scr-w .a-scr{position:absolute}
.story-ph .a-scr.chrome{background:transparent;pointer-events:none;z-index:30}
.story-ph .scr-w::after{content:"";position:absolute;inset:0;background:#0D0D0F;opacity:0;pointer-events:none}
/* no-js: plain list of steps, first screen shown */
html:not(.js) .step+.step{margin-top:40px}
html:not(.js) .scr-w:not(.on){display:none}
html:not(.js) .bars{display:none}
/* pinned story: stable svh pin (no 100vh resize jumps), ~95svh of scroll per step */
.js .story{height:calc(var(--vhl,100svh) * 4.8);overflow-anchor:none}
/* stable px height locked by js (only re-set on width change / big height change), so a collapsing in-app toolbar can't resize the 4.8-screen story and shove everything below it */
.js .story-stage{position:sticky;top:0;height:var(--vhl,100svh);overflow:clip;align-content:start;padding-top:calc(var(--hh) + env(safe-area-inset-top) + 16px)}
.js .bars b{will-change:transform}
.js .step{grid-area:1/1;opacity:0;transform:translate3d(0,14px,0);filter:blur(6px);transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),filter .32s var(--ease-out);pointer-events:none;will-change:opacity,transform}
.js .step.past{transform:translate3d(0,-10px,0)}
.js .step.on{opacity:1;transform:none;filter:blur(0);pointer-events:auto;transition-duration:.55s,.65s,.55s;transition-delay:.14s}
.story-ph .a-vp{background:var(--cream,#FFF8E8)}
.js .story-ph .scr-w{opacity:0;visibility:hidden;transform:translate3d(7%,0,0) scale(.985);transition:opacity .42s var(--ease-out),transform .62s var(--spring),visibility 0s linear .62s;will-change:opacity,transform;backface-visibility:hidden}
.js .story-ph .scr-w.past{transform:translate3d(-5%,0,0) scale(.985)}
.js .story-ph .scr-w.on{opacity:1;visibility:visible;transform:none;z-index:3!important;transition:opacity .42s var(--ease-out),transform .62s var(--spring),visibility 0s}
.js .story-ph .scr-w.prev{opacity:1;visibility:visible;z-index:2!important;transition:transform .62s var(--spring),visibility 0s}
.story-ph li,.story-ph .a-strip img,.story-ph .a-pin,.story-ph .a-m{transition:opacity .5s var(--ease-out),transform .6s var(--spring)}
.story-ph .pre{opacity:0;transform:translate3d(0,8px,0)}
.story-ph .a-m.pre{transform:translateY(10px) scale(.96);transform-origin:0 100%}
.story-ph .a-m.r.pre{transform-origin:100% 100%}
.a-input span.typing{color:var(--ink)}
@media (min-width:1000px){
  .js .story-stage{grid-template-columns:5fr 6fr;align-items:center;align-content:stretch;padding-top:var(--hh)}
  .story-stage{grid-template-columns:5fr 6fr;column-gap:48px}
  .story-txt{padding-bottom:40px}
  .story-vis{margin:0;align-self:center}
  .step h2{font-size:clamp(44px,4.6vw,72px)}
  .step .line{font-size:20px}
}

/* ---------- invites ---------- */
.join{padding:112px 0}
.join-h{font-size:clamp(30px,5.2vw,72px);max-width:15ch}
.join-in{display:grid;gap:0}
.join-form{margin-top:32px}
.join-side .line.first{margin-top:16px}
.story-ph .chrome .a-sb{transition:color .3s}.story-ph .chrome.w .a-sb{color:#fff}
.form{display:grid;gap:20px}
.q{display:grid;gap:8px}
.q-t{font-size:17px;font-weight:700}
.opt{font-weight:500;color:var(--mute);font-size:15px;margin-left:6px}
.q input{width:100%;min-height:58px;font:500 18px Onest,sans-serif;color:var(--ink);background:var(--tile);border:2px solid transparent;border-radius:var(--r);padding:0 18px;-webkit-appearance:none;appearance:none;transition:border-color .18s,background-color .18s}
.q input::placeholder{color:#8a8a92}
.q input:focus{outline:none;border-color:var(--ink);background:#fff}
.err{font-size:15px;font-weight:700;color:#B3261E}
.form .tiny a{font-weight:700}
.sent{background:var(--tile);border-radius:var(--r);padding:28px}
.sent h3{font-size:30px;margin-bottom:12px}.sent p{margin-top:10px;font-size:17px}
@media (min-width:1000px){
  .join-in{grid-template-columns:5fr 6fr;column-gap:64px;align-items:start}
  .join-h{max-width:none;font-size:clamp(44px,4.2vw,64px);text-wrap:balance}
  .join-side .line.first{margin-top:20px}
  .join-form{margin-top:0}
  .join-form .form{background:var(--tile);border-radius:var(--r);padding:32px}
  .join-form .q input{background:#fff}
}

/* ---------- free: the one centred moment ---------- */
.free{padding:96px 0 120px;text-align:center}
.join,.free{overflow-anchor:none}
.free h2{font-size:clamp(30px,9.4vw,136px);margin:0 auto;max-width:12ch}
.free-l{margin-top:24px;font-size:clamp(20px,2.2vw,30px);font-weight:700;color:var(--mute)}
.free-l span{display:inline-block}

/* ---------- faq ---------- */
.faq{padding:40px 0 120px}
.faq h2{font-size:clamp(40px,10vw,80px);margin-bottom:28px}
.faq-list{display:grid;gap:8px}
.faq details{background:var(--tile);border-radius:var(--r)}
.faq details[open]{background:var(--y)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 20px;font-size:18px;font-weight:700;line-height:1.25;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:16px;height:16px;transition:transform .3s var(--ease-out)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;border-radius:2px;background:var(--ink)}
.faq summary i::after{transform:rotate(90deg);transition:transform .3s var(--ease-out)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq summary:active i{transform:scale(.85)}
.faq details p{padding:0 20px 22px;font-size:17px;max-width:52ch}
.faq details[open] p{animation:rise .45s var(--ease-out)}
@media (min-width:1000px){
  .faq-in{display:grid;grid-template-columns:4fr 8fr;column-gap:48px;align-items:start}
  .faq h2{position:sticky;top:calc(var(--hh) + 32px);margin:0;font-size:clamp(56px,5vw,80px)}
  .faq summary{min-height:72px;padding:20px 24px;font-size:20px}
  .faq details p{padding:0 24px 24px}
}

/* ---------- footer: name returns full width ---------- */
.foot{padding:48px max(var(--m),env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(var(--m),env(safe-area-inset-left))}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px}
.foot-row p:first-child{display:flex;flex-wrap:wrap;gap:0 20px}
.foot-row a{font-size:16px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot-mark{overflow:clip;margin-top:20px}
.foot-mark img{width:100%;height:auto}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .foot-mark img{animation:markUp linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes markUp{from{transform:translateY(60%);opacity:.4}to{transform:none;opacity:1}}
  }
}

/* reveals (fire once at ~88% of the viewport) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--rd,0ms)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rise,.js .h-l,.js .h-r,.js .hero-ph .a-phone{animation:none;opacity:1}
  .cities-track{animation:none}
  .mq-btn{display:none}
  .js .rv,.js .pain-ans{opacity:1;transform:none;transition:none}
  .story-ph li,.story-ph .a-m,.story-ph .a-strip img,.story-ph .a-pin{transition:none}
  .js .step,.js .step.past,.js .story-ph .scr-w,.js .story-ph .scr-w.past{transform:none;filter:none}
  .js .step,.js .step.on{transition:opacity .3s linear;transition-delay:0s}
  .js .story-ph .scr-w{transition:opacity .3s linear,visibility 0s linear .3s}.js .story-ph .scr-w.on{transition:opacity .3s linear,visibility 0s}
  .story-ph .pre{opacity:1;transform:none}
  .a-note{display:none}
  .btn{transition:none}
  .faq details[open] p{animation:none}
}
/* short mobile screens: tighter story text so the full phone stays bigger. keyed off the locked height (html.vshort), not a max-height query, so an in-app toolbar toggle can't flip it */
@media (max-width:999px){
  .vshort.js .story-stage{padding-top:calc(var(--hh) + env(safe-area-inset-top) + 6px)}
  .vshort.js .story .bars{margin-bottom:12px}
  .vshort.js .story .step h2{font-size:clamp(24px,7vw,30px)}
  .vshort.js .story .step .line{font-size:16px;margin-top:8px}
  .vshort.js .story-vis{margin-top:14px}
}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button[disabled]{opacity:.6;cursor:progress}
.form .priv-note{margin-top:-16px}
/* privacy page */
.pv{padding:120px 0 72px}
.pv-in{max-width:720px}
.pv-k{font-size:14px;font-weight:600;color:var(--mute)}
.pv h1{font:400 clamp(56px,9vw,96px)/.95 "Archivo Black",Onest,sans-serif;letter-spacing:-.04em;margin:12px 0 0}
.pv-lede{font-size:21px;line-height:1.4;margin-top:20px;max-width:34ch}
.pv-lede mark{background:none;color:inherit;box-shadow:inset 0 -.42em 0 #FCF567;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pv section{margin-top:44px;padding-top:24px;border-top:1px solid rgba(13,13,15,.12)}
.pv h2{font:400 26px/1.1 "Archivo Black",Onest,sans-serif;letter-spacing:-.02em;margin:0 0 12px}
.pv section p,.pv li{font-size:17px;line-height:1.55;margin-top:10px;max-width:60ch}
.pv ul{margin:6px 0 0;padding-left:20px}
.pv a:not(.btn){font-weight:700;text-underline-offset:3px}
.pv-back{margin-top:48px}
@media (min-width:1000px){.pv{padding:160px 0 96px}}
/* rules link in the pain block */
.pain-lnk{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;padding:0 14px 0 16px;font:700 16px/1 Onest,sans-serif;color:var(--ink);text-decoration:none;background:var(--y);border:1.5px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .8s var(--ease-out) .15s,transform .8s var(--ease-out) .15s,translate .14s var(--ease-out),box-shadow .14s var(--ease-out)}
.pain-lnk span{display:inline-block;transition:transform .25s var(--ease-out)}
@media (hover:hover){.pain-lnk:hover{translate:-1px -1px;box-shadow:4px 4px 0 var(--ink)}.pain-lnk:hover span{transform:translateX(3px)}}
.pain-lnk:active{translate:2px 2px;box-shadow:1px 1px 0 var(--ink)}
.js .pain-lnk{opacity:0;transform:translateY(16px)}
.js .pain.done .pain-lnk{opacity:1;transform:none}
@media (min-width:1000px){.pain-r{margin:0 0 .4em}.pain-r .pain-ans{margin:0}}
@media (prefers-reduced-motion:reduce){.js .pain-lnk{opacity:1;transform:none;transition:none}}
.faq-lnk{font-weight:700;white-space:nowrap;text-underline-offset:3px}
.foot-row a[aria-current]{text-decoration:underline;text-underline-offset:4px}
/* rules page */
.rl-list{list-style:none;counter-reset:r;margin:40px 0 0;padding:0}
.rl-list li{counter-increment:r;display:grid;grid-template-columns:2.6em 1fr;column-gap:14px;padding:22px 0;border-top:1px solid rgba(13,13,15,.12)}
.rl-list li::before{content:counter(r);grid-row:1/3;font:400 22px/1.15 "Archivo Black",Onest,sans-serif;color:var(--mute);font-variant-numeric:tabular-nums}
.rl-list h2{font:400 22px/1.15 "Archivo Black",Onest,sans-serif;letter-spacing:-.02em;margin:0}
.rl-list p{font-size:17px;line-height:1.5;margin-top:6px;max-width:52ch;color:var(--ink)}
.rl-q{margin-top:28px;padding-top:24px;border-top:1px solid rgba(13,13,15,.12);font-size:17px}
.rl-q a{font-weight:700;text-underline-offset:3px}
@media (min-width:1000px){.rl-list li{grid-template-columns:3em 1fr;padding:26px 0}.rl-list h2{font-size:26px}.rl-list li::before{font-size:26px}}