/* Drew waitlist landing · v1 · 30 Oct 2026 · Ash (Creative Studio)
   Self-contained: no external fonts, CDNs or trackers. Palette from the Drew brand kit.
   Drift blue is used only for the pill dot, the Orbit dot, Drift and small accents. No red (red is reserved for waveform bars and the end-call button). */
@font-face{font-family:"Fredoka";src:url("../fonts/Fredoka-Variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/Nunito-Variable.woff2") format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --choc:#3F2519;--baby:#C6E4F6;--cream:#FFF7E3;--drift:#1A82CC;--white:#fff;
  --choc-70:rgba(63,37,25,.72);--choc-12:rgba(63,37,25,.12);
  --font-display:"Fredoka",system-ui,sans-serif;--font-ui:"Nunito",system-ui,sans-serif;
  --r-card:30px;--r-pill:999px;--stroke:3px;
  --ease:cubic-bezier(.22,1,.36,1);--ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --max:1160px;--pad:clamp(20px,5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--choc);font-family:var(--font-ui);font-weight:600;font-size:clamp(16px,1.05vw + 11px,18px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(40px,5.6vw,76px)}
h2{font-size:clamp(30px,3.6vw,50px)}
h3{font-size:clamp(20px,1.6vw,24px)}
p{margin:0 0 1em}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--choc);color:var(--cream);padding:10px 16px;border-radius:var(--r-pill);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--drift);outline-offset:3px;border-radius:8px}

/* Draft / test-mode banner and review flags */
.draft-bar{background:var(--cream);border-bottom:2px dashed var(--choc);font-size:13px;text-align:center;padding:6px var(--pad);position:relative;z-index:60}
.draft-bar strong{font-family:var(--font-display)}
.flag{display:none}
body.review .flag{display:inline-block;white-space:nowrap;vertical-align:middle;margin:0 0 0 .4em;font:700 11px/1.2 var(--font-ui);letter-spacing:.02em;text-transform:uppercase;padding:3px 8px;border:1.5px dashed var(--choc);border-radius:var(--r-pill);background:var(--cream);color:var(--choc)}
.ph{background:repeating-linear-gradient(-45deg,rgba(63,37,25,.07) 0 6px,transparent 6px 12px);border:1.5px dashed var(--choc-70);border-radius:8px;padding:0 .3em;white-space:nowrap}

/* Header */
.site-head{position:sticky;top:0;z-index:50;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.site-head.scrolled{background:rgba(198,228,246,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 3px 0 var(--choc-12)}
.brand{display:inline-flex;border-radius:var(--r-pill)}
.brand .pill-svg{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a.nl{text-decoration:none;padding:8px 12px;border-radius:var(--r-pill);font-weight:700;font-size:15px;transition:background .25s var(--ease)}
@media (hover:hover){.nav a.nl:hover{background:rgba(255,247,227,.7)}} /* v2.7: hover devices only */
.nav a.nl:active{background:rgba(255,247,227,.7)}
@media (max-width:900px){.nav a.nl{display:none}}

/* Buttons: one CTA, "Join the waitlist" (v2.22) */
.btn{--lift:0px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 17px/1 var(--font-display);letter-spacing:.01em;color:var(--cream);background:var(--choc);border:var(--stroke) solid var(--choc);border-radius:var(--r-pill);padding:16px 26px;min-height:54px;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--drift);transform:translateY(var(--lift));transition:transform .25s var(--ease-bounce),box-shadow .25s var(--ease)}
@media (hover:hover){.btn:hover{--lift:-3px;box-shadow:0 7px 0 var(--drift)}} /* v2.7: no sticky hover after a tap on iOS; :active below is the touch press */
.btn:active{--lift:2px;box-shadow:0 1px 0 var(--drift);transition-duration:.08s}
.btn .arrow{display:inline-block;transition:transform .3s var(--ease-bounce)}
@media (hover:hover){.btn:hover .arrow{transform:translateX(4px)}}
.btn-sm{padding:11px 18px;min-height:44px;font-size:15px}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* Hero */
.hero{background:var(--baby);position:relative;margin-top:-76px;padding:calc(76px + clamp(24px,3.4vw,44px)) 0 clamp(56px,8vw,110px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 14px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;background:var(--cream);border:2px solid var(--choc);border-radius:var(--r-pill);padding:8px 14px 8px 10px;margin-bottom:22px}
.eyebrow .blink{width:10px;height:10px;border-radius:50%;background:var(--drift);animation:stir 2.8s var(--ease) infinite}
@keyframes stir{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.5)}86%{transform:scale(.9)}}
.hero .sub{font-size:clamp(18px,1.3vw + 10px,21px);max-width:34em;color:var(--choc)}
.hero h1{font-size:clamp(40px,4.7vw,66px)}
.hero h1 .line{display:block}

.join-card{margin-top:28px;background:var(--cream);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 6px 0 var(--choc);padding:22px;position:relative;max-width:560px}
.fields{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin-bottom:14px}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.fields.fields-one{grid-template-columns:1fr} /* v2.17: public form, email only */
.field label{display:block;font-weight:800;font-size:14px;margin:0 0 6px 6px}
.field input{width:100%;font:600 17px var(--font-ui);color:var(--choc);background:var(--white);border:2px solid var(--choc);border-radius:var(--r-pill);padding:13px 18px;transition:box-shadow .2s var(--ease),border-color .2s}
.field input::placeholder{color:rgba(63,37,25,.5)}
.field input:focus{outline:none;box-shadow:0 0 0 4px rgba(26,130,204,.35)}
.field input[aria-invalid="true"]{border-style:dashed;border-width:3px}
.join-card .btn{width:100%}
.micro{font-size:14px;margin:12px 4px 0;color:var(--choc-70)}
.micro.collection-notice{margin:10px 4px 14px}
.form-error{display:none;font-weight:800;font-size:14px;margin:8px 6px 0}
.form-error.show{display:block}
.form-error::before{content:"↑ "}
.loading{position:absolute;inset:0;border-radius:calc(var(--r-card) - 3px);background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;text-align:center;padding:16px}
.loading.on{opacity:1;visibility:visible}
.loading p{margin:0;font-weight:800}
.loading small{font-weight:600;color:var(--choc-70)}
.orbit-spin{width:72px;height:72px}
.orbit-spin img{width:100%;height:100%;animation:orbit 1.15s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}

/* Hero stage: pill at rest, dot stirring; wakes into Drew + Drift on scroll */
.stage{position:relative;aspect-ratio:1/0.82;--wake:0}
.stage-pill,.stage-pair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:opacity,transform}
.stage-pill{opacity:calc(1 - var(--wake) * 1.25);transform:scale(calc(1 - var(--wake) * .18)) translateY(calc(var(--wake) * -24px))}
.stage-pill .pill-svg{width:min(92%,460px);height:auto;filter:none}
.stage-pair{opacity:calc(var(--wake) * 1.4 - .3);transform:translateY(calc((1 - var(--wake)) * 40px)) scale(calc(.9 + var(--wake) * .1))}
.stage-pair img{width:min(96%,480px)}
.pill-svg .pill-dot{transform-box:fill-box;transform-origin:50% 100%}
.stage-pill .pill-dot{animation:twitch 3.2s var(--ease) infinite}
@keyframes twitch{0%,62%,100%{transform:translate(0,0) scale(1)}66%{transform:translate(0,-9%) scale(1.06,.94)}70%{transform:translate(0,0) scale(1)}74%{transform:translate(3%,-4%) scale(1)}80%{transform:translate(0,0)}}
.wake-hint{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:calc(.8 - var(--wake) * 2);display:flex;align-items:center;gap:8px;white-space:nowrap}
.wake-hint i{display:block;width:2px;height:22px;background:var(--choc);border-radius:2px;animation:hint 1.8s var(--ease) infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
.bubble{position:absolute;background:var(--cream);border:2px solid var(--choc);border-radius:20px;padding:8px 14px;font-weight:800;font-size:14px;box-shadow:0 3px 0 var(--choc);opacity:clamp(0,calc(var(--wake) * 2 - 1),1);transform:translateY(calc((1 - var(--wake)) * 12px))}
.bubble.b1{top:8%;left:2%}
.bubble.b2{bottom:10%;right:0}

/* Sections */
section{padding:clamp(72px,10vw,128px) 0;position:relative}
.bg-cream{background:var(--cream)}
.bg-baby{background:var(--baby)}
.kicker{font:800 13px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--drift)}
.lede{font-size:clamp(18px,1.2vw + 10px,20px);max-width:38em}
.head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:var(--cream);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 4px 0 var(--choc);padding:clamp(22px,2.4vw,32px);transition:transform .35s var(--ease-bounce),box-shadow .35s var(--ease)}
.bg-cream .card{background:var(--white)}
@media (hover:hover){.card:not(.tap-card):hover{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc)}} /* v2.6: hover devices only; tap cards use the state block at the end */
.card .ico{width:52px;height:52px;border-radius:50%;background:var(--baby);border:2px solid var(--choc);display:grid;place-items:center;margin-bottom:16px;font:700 20px var(--font-display);transition:transform .4s var(--ease-bounce)}
@media (hover:hover){.card:hover .ico{transform:scale(1.1) rotate(-8deg)}}
.card p:last-child{margin-bottom:0}

.chat{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
@media (max-width:900px){.chat{grid-template-columns:1fr}}
.phone{background:var(--baby);border:var(--stroke) solid var(--choc);border-radius:36px;box-shadow:0 6px 0 var(--choc);padding:22px;position:relative}
.phone .tag{position:absolute;top:-14px;right:20px;background:var(--cream);border:2px solid var(--choc);border-radius:var(--r-pill);font-size:12px;font-weight:800;padding:3px 10px}
.msg{max-width:88%;border:2px solid var(--choc);border-radius:22px;padding:12px 16px;margin:10px 0;font-size:16px;background:var(--white)}
.msg.me{margin-left:auto;background:var(--cream);border-bottom-right-radius:6px}
.msg.drew{border-bottom-left-radius:6px}
.msg .who{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.draft-chip{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--cream);border:2px dashed var(--choc);border-radius:18px;padding:10px 12px 10px 16px;margin-top:12px;font-size:15px}
.approve{font:700 14px var(--font-display);background:var(--choc);color:var(--cream);border-radius:var(--r-pill);padding:8px 14px;border:0;box-shadow:0 3px 0 var(--drift)}
.reveal-seq .msg,.reveal-seq .draft-chip{opacity:1}
.js .reveal-seq:not(.in) .msg,.js .reveal-seq:not(.in) .draft-chip{opacity:0;transform:translateY(12px)}
.reveal-seq .msg,.reveal-seq .draft-chip{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-seq.in .msg:nth-child(2){transition-delay:.15s}
.reveal-seq.in .msg:nth-child(3){transition-delay:.55s}
.reveal-seq.in .draft-chip{transition-delay:.95s}

.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:12px}
.steps li{counter-increment:s}
.steps .step{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;background:var(--white);border:2px solid var(--choc);border-radius:22px;padding:12px 16px 12px 12px}

.steps .step::before{content:counter(s);width:48px;height:48px;border-radius:50%;background:var(--choc);color:var(--cream);display:grid;place-items:center;font:700 20px var(--font-display)}

/* Drift */
.drift{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:900px){.drift{grid-template-columns:1fr}}
.drift-art{position:relative;aspect-ratio:7/5}
.drift-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.drift-art .float{animation:bob 4.5s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ground{position:absolute;left:8%;right:8%;bottom:6%;height:8px;border-radius:50%;background:var(--choc-12)}

/* Trust */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);position:relative}
@media (max-width:900px){.trust{grid-template-columns:1fr}}
.level{display:flex;gap:6px;margin-bottom:18px}
.level span{height:10px;flex:1;border-radius:6px;border:2px solid var(--choc);background:transparent;transition:background .4s var(--ease)}

.level span.on{background:var(--choc)}
.trust .label{font:700 clamp(24px,2vw,30px)/1.1 var(--font-display);margin-bottom:10px}
.trust-note{margin-top:clamp(24px,3vw,36px);font-size:clamp(17px,1.1vw + 10px,19px)}
.quote{font-family:var(--font-display);font-weight:600}

/* Founding */
.perks{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:14px;max-width:720px}
.perks li{display:flex;gap:14px;align-items:flex-start;font-size:clamp(17px,1.1vw + 10px,20px)}
.perks li::before{content:"";flex:none;width:26px;height:26px;margin-top:2px;border-radius:50%;border:3px solid var(--choc);background:radial-gradient(circle at 60% 40%,var(--drift) 0 5px,transparent 5.5px)}
.founding{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:900px){.founding{grid-template-columns:1fr}}
.ticket{background:var(--cream);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 6px 0 var(--choc);padding:28px;text-align:center;transform:rotate(2deg);transition:transform .5s var(--ease-bounce)}
@media (hover:hover){.ticket:hover{scale:1.02}} /* v2.7: was transform:rotate(0) scale(1.02), dead on the landing ticket because .js .reveal.in{transform:none} out-ranks it; decorative, hover devices only (the card holds a link, so it is not a tap toggle) */
.ticket .num{font:700 clamp(46px,6vw,72px)/1 var(--font-display);margin:8px 0}
.ticket small{display:block;font-size:14px;color:var(--choc-70)}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.price-grid{grid-template-columns:1fr}}
.plan h3{margin-bottom:6px}
.plan .amt{font:700 clamp(28px,2.4vw,36px)/1.1 var(--font-display);margin:8px 0 4px}
.plan .per{font-size:14px;color:var(--choc-70);display:block;margin-bottom:14px}
.plan.feature{background:var(--baby)!important}
.fine{font-size:14px;color:var(--choc-70);margin-top:20px}
.noprice{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px}
@media (max-width:700px){.noprice{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:860px;display:grid;gap:12px}
.faq details{background:var(--cream);border:2px solid var(--choc);border-radius:24px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
@media (hover:hover){.faq details:hover{box-shadow:0 4px 0 var(--choc);transform:translateY(-2px)}} /* v2.7: hover devices only; tap opens it natively and [open] keeps the shadow */
.faq summary:active{background:rgba(198,228,246,.5);border-radius:22px}
.faq details[open]{box-shadow:0 4px 0 var(--choc)}
.faq summary{list-style:none;cursor:pointer;padding:18px 60px 18px 22px;font:700 clamp(18px,1.2vw + 10px,21px)/1.25 var(--font-display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;border:2px solid var(--choc);background:linear-gradient(var(--choc),var(--choc)) center/12px 2.5px no-repeat,linear-gradient(var(--choc),var(--choc)) center/2.5px 12px no-repeat;transition:transform .35s var(--ease-bounce),background-color .3s}
.faq details[open] summary::after{transform:rotate(135deg);background-color:var(--baby)}
.faq .ans{padding:0 22px 20px}
.faq .ans p:last-child{margin:0}
.js .faq details[open] .ans{animation:ans .45s var(--ease)}
@keyframes ans{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Final CTA */
.final{text-align:center}
.final .orbit-mini{width:64px;height:64px;margin:0 auto 18px}
.final p{margin-left:auto;margin-right:auto}

/* Footer: reversed-cream pill on chocolate (approved for dark backgrounds only) */
.site-foot{background:var(--choc);color:var(--cream);padding:56px 0 40px}
.site-foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.site-foot .pill-svg{height:46px;width:auto}
.site-foot .orbit-foot{width:32px;height:32px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0}
.foot-links a{color:var(--cream);text-decoration:none;font-weight:700;border-bottom:2px solid transparent;transition:border-color .25s}
@media (hover:hover){.foot-links a:hover{border-color:var(--drift)}}
.foot-links a:active{border-color:var(--drift)}
.legal{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,247,227,.25);font-size:14px;color:rgba(255,247,227,.8);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.site-foot .ph{border-color:rgba(255,247,227,.6);background:none}
.site-foot .flag{background:var(--choc)!important;color:var(--cream)!important;border-color:var(--cream)!important}

/* Confirmation pages */
.confirm-page{min-height:100vh;display:flex;flex-direction:column;background:var(--baby)}
.confirm-main{flex:1;display:flex;align-items:center;padding:clamp(40px,8vw,96px) 0}
.confirm-card{max-width:720px;margin:0 auto;background:var(--cream);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 8px 0 var(--choc);padding:clamp(28px,5vw,56px);text-align:center}
.confirm-card .orbit-state{width:96px;height:96px;margin:0 auto 22px}
.confirm-card .orbit-state.spin img{animation:orbit 2.4s linear infinite}
.confirm-card h1{font-size:clamp(32px,4.4vw,54px)}
.small-print{font-size:14px;color:var(--choc-70)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--choc);text-decoration:underline;text-decoration-style:dashed;cursor:pointer}
.movebox{text-align:left;background:var(--white);border:2px solid var(--choc);border-radius:24px;padding:22px;margin:26px 0}
.reflink{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}
.reflink code{flex:1 1 220px;font:700 15px var(--font-ui);background:var(--cream);border:2px dashed var(--choc);border-radius:var(--r-pill);padding:12px 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.milestones{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.milestones{grid-template-columns:1fr}}
.milestones li{border:2px solid var(--choc);border-radius:18px;padding:12px;background:var(--cream);font-size:15px}
.milestones b{display:block;font:700 22px var(--font-display)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.chip{font:700 15px var(--font-ui);color:var(--choc);background:var(--white);border:2px solid var(--choc);border-radius:var(--r-pill);padding:10px 16px;cursor:pointer;transition:transform .25s var(--ease-bounce),background .25s}
@media (hover:hover){.chip:hover{transform:translateY(-2px)}} /* v2.7: tap state is aria-pressed (already JS) */
.chip{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--choc);color:var(--cream)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--choc);color:var(--cream);padding:12px 18px;border-radius:var(--r-pill);font-weight:700;opacity:0;transition:opacity .3s,transform .3s var(--ease);pointer-events:none;z-index:90}
.toast.show{opacity:1;transform:translate(-50%,0)}
.pair-wake{display:block;width:min(100%,360px);height:auto;margin:16px auto 0}

/* Reveal on scroll (only hidden when JS is running) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .hero .intro>*{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
.js .hero .intro>*:nth-child(2){animation-delay:.08s}.js .hero .intro>*:nth-child(3){animation-delay:.16s}.js .hero .intro>*:nth-child(4){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}

/* Reduced motion: everything visible, no loops, no scroll-linked wake */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .reveal,.js .hero .intro>*,.js .reveal-seq:not(.in) .msg,.js .reveal-seq:not(.in) .draft-chip{opacity:1!important;transform:none!important}
  .stage{--wake:0!important}
  .orbit-spin img,.confirm-card .orbit-state.spin img{animation:none!important}
}
.ticket .num .ph{font-size:.62em;padding:.1em .3em;letter-spacing:0}
img{height:auto}

/* v2.2: 4-bubble Thursday chat mockup (concept) */
.phone-4{padding:22px 20px 18px}
.phone-4 .msg{font-size:15px;line-height:1.45;padding:10px 14px;margin:8px 0;max-width:86%}
.phone-4 .msg .who{font-size:11px}
.reply-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:10px}
.rchip{font:700 14px var(--font-display);background:var(--cream);color:var(--choc);border:2px solid var(--choc);border-radius:var(--r-pill);padding:7px 14px;box-shadow:0 3px 0 var(--choc)}
.reveal-seq .reply-chips{opacity:1;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal-seq:not(.in) .reply-chips{opacity:0;transform:translateY(12px)}
.reveal-seq.in .msg:nth-child(4){transition-delay:.95s}
.reveal-seq.in .msg:nth-child(5){transition-delay:1.35s}
.reveal-seq.in .reply-chips{transition-delay:1.75s}
@media (max-width:520px){.phone-4{padding:20px 14px 16px}.phone-4 .msg{max-width:92%}}

/* v2.2: loader v2 (Max SPIN morph). Lottie canvas is 1080 square; the Orbit fills ~56%, so the box is larger than the old 72/96 Orbit. */
.drew-loader{position:relative}
.drew-loader img,.drew-loader svg{width:100%!important;height:100%!important;animation:none!important;display:block}
.drew-loader picture{display:block;width:100%;height:100%}
.drew-loader.lottie-on picture{display:none}
.loading .orbit-spin.drew-loader{width:128px;height:128px;margin:-20px 0 -24px}
.confirm-card .orbit-state.drew-loader{width:168px;height:168px;margin:-24px auto -6px}
@media (prefers-reduced-motion: reduce){.js .reveal-seq:not(.in) .reply-chips{opacity:1!important;transform:none!important}}

/* ===== v2.3 (31 Oct 2026, Ash): motion only ===== */
/* 1) Hero wake is Drew only (no Drift). Big Drift idle master is 200x200 with the ground at y=180. */
.stage-drew img{width:min(74%,360px)}
/* Drew pill: gentle lift + squish on hover. The dot stays part of the pill; no character appears. */
.brand .pill-svg,.stage-pill .pill-svg{transform-origin:50% 100%;transition:transform .35s var(--ease-bounce)}
@media (hover:hover){.brand:hover .pill-svg{transform:translateY(-2px) scale(1.04,.96)}}
.brand:focus-visible .pill-svg,.brand:active .pill-svg{transform:translateY(-2px) scale(1.04,.96)}
@media (hover:hover){.stage-pill:hover .pill-svg{transform:translateY(-6px) scale(1.035,.965)}} /* v2.7: decorative hero art, not interactive; hover devices only */

/* 2) Meet Drift intro. 2.4 s, plays once on scroll-into-view, replay on hover/tap. */
.drift-art .float{position:absolute;inset:0}
.drift-intro-svg{display:block;width:100%;height:100%;overflow:visible}
.drift-intro .ld-move,.drift-intro .ld-spin,.drift-intro .ld-tilt,.drift-intro .ld-squash,.drift-intro .ld-pupils,.drift-intro .ld-lids,.drift-intro .ld-eyes{transform-box:view-box}
.drift-intro .ld-squash,.drift-intro .ld-tilt{transform-origin:100.5px 174px}   /* little Drift's feet, drift units */
.drift-intro .ld-spin{transform-origin:100.5px 108px}                          /* body centre */
.drift-intro .ld-lids{opacity:0}
.drift-hi{position:absolute;left:4%;right:4%;top:8%;bottom:4%;background:none;border:0;padding:0;margin:0;border-radius:var(--r-card);cursor:pointer;-webkit-tap-highlight-color:transparent}
.drift-hi:focus-visible{outline:3px solid var(--drift);outline-offset:4px}
.drift-intro.armed .ld-move  {animation:ld-move 2.4s linear both}
.drift-intro.armed .ld-squash{animation:ld-squash 2.4s linear both}
.drift-intro.armed .ld-spin  {animation:ld-spin 2.4s linear both}
.drift-intro.armed .ld-tilt  {animation:ld-tilt 2.4s linear both}
.drift-intro.armed .ld       {animation:ld-show 2.4s linear both}
.drift-intro.armed .ld-eyes  {animation:ld-eyes 2.4s linear both}
.drift-intro.armed .ld-lids  {animation:ld-lids 2.4s linear both}
.drift-intro.armed .ld-pupils{animation:ld-pupils 2.4s linear both}
.drift-intro.armed .bd-pupils{animation:bd-pupils 2.4s linear both}
.drift-intro.armed :is(.ld-move,.ld-squash,.ld-spin,.ld-tilt,.ld,.ld-eyes,.ld-lids,.ld-pupils,.bd-pupils){animation-play-state:paused}
.drift-intro.armed.play :is(.ld-move,.ld-squash,.ld-spin,.ld-tilt,.ld,.ld-eyes,.ld-lids,.ld-pupils,.bd-pupils){animation-play-state:running}
/* reduced motion: replay is a blink only (no movement) */
.drift-intro.blink-only .ld-eyes{animation:rm-eyes .5s linear both}
.drift-intro.blink-only .ld-lids{animation:rm-lids .5s linear both}
@keyframes rm-eyes{0%,20%{opacity:1}20.1%,70%{opacity:0}70.1%,100%{opacity:1}}
@keyframes rm-lids{0%,20%{opacity:0}20.1%,70%{opacity:1}70.1%,100%{opacity:0}}
/* Timeline (2.4 s): 0-8% hidden behind Big Drift; 8-28% peeks out over his shoulder and lands (squash, rebound);
   40-67% anticipation, hop and a full spin, land; 68-73% blink; 74-94% "wave" = tilt-wobble with little hops
   (Drift has no arms); 94-100% pupils slide back to Drew = the 47.4% pair master pose. */
@keyframes ld-show{0%,8%{opacity:0}11%,100%{opacity:1}}
@keyframes ld-move{
  0%,8%{transform:translate(-185px,0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  18%{transform:translate(-90px,-50px);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  28%,44%{transform:translate(0,0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  53%{transform:translate(0,-80px);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  60%,74%{transform:translate(0,0);animation-timing-function:cubic-bezier(.3,.6,.5,1)}
  77%{transform:translate(-3px,-9px);animation-timing-function:ease-in}
  80%{transform:translate(0,0);animation-timing-function:ease-out}
  83%{transform:translate(3px,-8px);animation-timing-function:ease-in}
  86%,100%{transform:translate(0,0)}}
@keyframes ld-squash{
  0%,8%{transform:scale(1,1)}
  11%{transform:scale(1.06,.92)}
  15%{transform:scale(.9,1.12)}
  24%{transform:scale(.97,1.04)}
  28%{transform:scale(1.18,.8)}
  33%{transform:scale(.94,1.07)}
  37%{transform:scale(1.03,.98)}
  40%{transform:scale(1,1)}
  44%{transform:scale(1.12,.86)}
  47%{transform:scale(.9,1.12)}
  53%{transform:scale(1,1)}
  58%{transform:scale(.94,1.07)}
  60%{transform:scale(1.16,.82)}
  64%{transform:scale(.96,1.04)}
  67%,100%{transform:scale(1,1)}}
@keyframes ld-spin{0%,46%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.4,1)}59%,100%{transform:rotate(360deg)}}
@keyframes ld-tilt{
  0%,74%{transform:rotate(0deg);animation-timing-function:ease-in-out}
  77%{transform:rotate(-11deg);animation-timing-function:ease-in-out}
  83%{transform:rotate(10deg);animation-timing-function:ease-in-out}
  88%{transform:rotate(-5deg);animation-timing-function:ease-in-out}
  92%{transform:rotate(2deg);animation-timing-function:ease-in-out}
  95%,100%{transform:rotate(0deg)}}
@keyframes ld-eyes{0%,67.9%{opacity:1}68%,73%{opacity:0}73.1%,100%{opacity:1}}
@keyframes ld-lids{0%,67.9%{opacity:0}68%,73%{opacity:1}73.1%,100%{opacity:0}}
/* little Drift looks at the visitor (master idle pupils, +4.8/+2.4) through the intro, then back to Drew (master look-sideways) */
@keyframes ld-pupils{0%,94%{transform:translate(4.8px,2.4px);animation-timing-function:ease-in-out}99%,100%{transform:translate(0,0)}}
/* Big Drift glances at Drift as he pops out, then looks ahead again */
@keyframes bd-pupils{0%,10%{transform:translate(0,0);animation-timing-function:ease-out}16%,64%{transform:translate(5px,0);animation-timing-function:ease-in-out}72%,100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.drift-intro.armed *{animation:none!important}}

/* ===== v2.4 (31 Oct 2026, Ash): founders race card + live leaderboard copy (test mode) ===== */
.ticket-race{padding:22px 22px 20px;text-align:center}
.live-eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;background:var(--baby);border:2px solid var(--choc);border-radius:var(--r-pill);padding:6px 12px;margin:0 0 10px}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--drift);box-shadow:0 0 0 0 rgba(26,130,204,.5);animation:livepulse 1.8s var(--ease) infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(26,130,204,.55)}70%,100%{box-shadow:0 0 0 8px rgba(26,130,204,0)}}
.race-line{font:700 clamp(19px,1.3vw + 10px,22px)/1.2 var(--font-display);margin:6px 0 6px}
.race-copy{font-size:15px;line-height:1.45;margin:0 auto 10px;max-width:30em}
.preview-note{display:inline-block;font-size:12.5px;font-weight:700;border:1.5px dashed var(--choc);border-radius:14px;padding:5px 10px;margin:0;background:var(--white)}
.ticket-confirmed{transform:none;margin:22px auto 4px;max-width:520px}
.ticket-confirmed:hover{transform:none;scale:none}

/* Max's Lottie stage: 1080x1080, shown rows y 90-930 (frame 1080:840). Badge in Max's safe zone x 50-85.2%, y 13.9-39.8%. */
.medal-race{position:relative;aspect-ratio:1080/840;min-width:0;margin:6px -6px 4px;border-radius:22px;background:var(--white);border:2px solid var(--choc);overflow:hidden}
.mr-stage{position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;transform:translateY(-8.3333%);container-type:inline-size}
.mr-still,.mr-apng,.mr-lottie{position:absolute;inset:0;width:100%;height:100%;display:block}
.mr-apng{background:var(--white)}
.mr-lottie{visibility:hidden}
.medal-race.lottie-on .mr-lottie{visibility:visible}
.medal-race.lottie-on .mr-still{visibility:hidden}
.mr-badge{position:absolute;left:50%;top:13.9%;width:35.2%;height:25.9%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;text-align:center;z-index:2}
.mr-badge-num{display:block;background:var(--cream);border:2.5px solid var(--choc);border-radius:16px;box-shadow:0 3px 0 var(--choc);padding:.08em .32em .12em;font:700 clamp(30px,13cqw,58px)/1 var(--font-display);transform:rotate(-3deg);white-space:nowrap;max-width:100%}
.mr-badge-tag{font:800 clamp(9px,2.6cqw,11.5px)/1.2 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--choc-70)}
.medal-race.is-demo .mr-badge-num{border-style:dashed}
.medal-race.is-demo .mr-badge-tag{color:var(--choc)}
@media (max-width:420px){.ticket-race{padding:18px 12px 16px}.medal-race{margin:6px -2px 4px}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* leaderboard preview (sample data, test mode) */
.sample-banner{background:var(--cream);border:2.5px dashed var(--choc);border-radius:16px;padding:10px 14px;font-size:14px;margin:0 0 18px}
.lb-card{max-width:820px;text-align:left}
.lb-card h1{margin-bottom:.4em}
.lb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:center;margin-bottom:18px}
@media (max-width:700px){.lb-grid{grid-template-columns:1fr}}
.ticket-lb{transform:none;padding:12px}
.ticket-lb:hover{transform:none;scale:none}
.lb-you{background:var(--white);border:2px solid var(--choc);border-radius:24px;padding:18px}
.lb-you-num{font:700 30px/1.1 var(--font-display);margin:0 0 6px}
.lb-you-move{display:inline-flex;align-items:center;gap:6px;font-weight:800;background:var(--baby);border:2px solid var(--choc);border-radius:var(--r-pill);padding:4px 12px;margin:0 0 10px}
.lb-you-move .up{color:var(--drift);font-weight:900}
.lb-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.lb-list li{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:var(--white);border:2px solid var(--choc);border-radius:18px;padding:9px 14px}
.lb-list li:first-child{background:var(--baby)}
.lb-pos{font:700 20px var(--font-display)}
.lb-name{font-weight:800}
.lb-sample{font:800 10px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;border:1.5px dashed var(--choc);border-radius:var(--r-pill);padding:2px 6px;margin-left:6px;vertical-align:middle}
.lb-friends{font-size:14px;color:var(--choc-70)}

/* ===== v2.6: tap / hover / active / focus-visible states for How it works steps and trust cards =====
   Why v2.4/v2.5 failed on iPhone: the only state was :hover on a plain <li>/<article> (no click listener, no cursor:pointer,
   not focusable), which iOS Safari never hovers on a tap; and on the trust cards `.js .reveal.in{transform:none}` (3 classes)
   out-ranked `.card:hover{transform:...}` (2), so the lift was dead even with a mouse.
   Fix: the state lives on .is-active (JS tap toggle) + :hover (hover devices only) + :active + :focus-visible.
   Movement uses the individual `translate`/`rotate`/`scale` properties so it can't clash with the reveal's `transform`. */
.card{transition:translate .35s var(--ease-bounce),rotate .35s var(--ease-bounce),box-shadow .35s var(--ease)}
@media (prefers-reduced-motion:reduce){.card:hover{translate:none!important;rotate:none!important}}
.tap-card{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:translate .35s var(--ease-bounce),rotate .35s var(--ease-bounce),scale .15s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.js .reveal.tap-card,.js .reveal.card{transition-property:opacity,transform,translate,rotate,scale,box-shadow,background-color;
  transition-duration:.8s,.8s,.35s,.35s,.15s,.3s,.3s;
  transition-timing-function:var(--ease),var(--ease),var(--ease-bounce),var(--ease-bounce),var(--ease),var(--ease),var(--ease);
  transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s,0s,0s}
.steps .step::before{transition:background-color .3s var(--ease)}
/* step: slides right, baby blue, Drift-blue number */
.steps .step.is-active{translate:6px 0;background:var(--baby);box-shadow:0 4px 0 var(--choc)}
.steps .step.is-active::before{background:var(--drift)}
/* trust card: lifts, the level bars light up Drift blue */
.trust .tap-card.is-active{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc);background:var(--baby)}
.trust .tap-card.is-active .level span.on{background:var(--drift)}
@media (hover:hover){
  .steps .step:hover{translate:6px 0;background:var(--baby)}
  .steps .step:hover::before{background:var(--drift)}
  .trust .tap-card:hover{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc)}
  .trust .tap-card:hover .level span.on{background:var(--drift)}
}
/* press feedback (fires on iOS because of the touchstart listener + cursor:pointer) */
.tap-card:active{scale:.98}
/* keyboard focus: ring only for keyboard, keeps the card radius */
.tap-card:focus{outline:none}
.steps .step:focus-visible{outline:3px solid var(--drift);outline-offset:3px;border-radius:22px}
.trust .tap-card:focus-visible{outline:3px solid var(--drift);outline-offset:4px;border-radius:var(--r-card)}
/* reduced motion: no movement, the colour/shadow state still shows */
@media (prefers-reduced-motion:reduce){.tap-card,.tap-card:hover,.tap-card:active,.tap-card.is-active{translate:none!important;rotate:none!important;scale:none!important}}

/* ===== v2.7: the same tap / hover / active / focus-visible pattern on the What Drew does cards and the plan cards =====
   Reveal check: these cards are .reveal, so `.js .reveal.in{transform:none}` (0,3,0) beat the old `.card:hover{transform}` (0,2,0)
   in v2.4/v2.5 and the lift never showed. v2.6 already moved card movement onto `translate`/`rotate`, which the reveal doesn't
   touch, and v2.7 keeps that, so the lift now shows on hover, tap and keyboard. The rest of the base .card hover is kept for any
   non-tap card (none left on the landing pages). */
/* What Drew does: lifts, card goes baby blue, the icon pops and wiggles */
.cards .tap-card.is-active{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc);background:var(--baby)}
.cards .tap-card.is-active .ico{transform:scale(1.1) rotate(-8deg);background:var(--white)}
/* plans: lift, baby blue, the price turns Drift blue */
.price-grid .tap-card.is-active,.noprice .tap-card.is-active{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc);background:var(--baby)}
.plan.tap-card .amt{transition:color .3s var(--ease)}
.plan.tap-card.is-active .amt{color:var(--drift)}
.plan.tap-card.is-active .flag,.noprice .tap-card.is-active .flag{background:var(--white)}
@media (hover:hover){
  .cards .tap-card:hover,.price-grid .tap-card:hover,.noprice .tap-card:hover{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc)}
  .plan.tap-card:hover .amt{color:var(--drift)}
}
.cards .tap-card:focus-visible,.price-grid .tap-card:focus-visible,.noprice .tap-card:focus-visible{outline:3px solid var(--drift);outline-offset:4px;border-radius:var(--r-card)}
@media (prefers-reduced-motion:reduce){.card .ico,.card:hover .ico,.card.is-active .ico{transform:none!important}}

/* v2.7 fix: v2.6's `.flag{white-space:nowrap}` made the long "Milestones: proposed, Fin to confirm" flag 253px wide inside the
   confirmed.html ticket, so that page was 410px wide at 390 (sideways scroll, iPhone zooms out, taps land ~44px off).
   A flag that sits alone on its line may wrap; every flag is capped to its container. Review mode only. */
body.review .flag{max-width:100%}
body.review .small-print>.flag{white-space:normal}

/* ===== v2.6: founders variant B (MOCKUP, not wired) ===== */
.mockup-bar{background:var(--choc);color:var(--cream);font-size:13px;text-align:center;padding:7px var(--pad);position:relative;z-index:60}
.mockup-bar a{color:var(--cream)}
.mockup-tag{display:inline-block;font:800 12px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;background:var(--cream);border:2px dashed var(--choc);border-radius:var(--r-pill);padding:6px 12px;margin:0 0 22px}
.fm-def{font-size:clamp(17px,1.1vw + 10px,20px);background:var(--cream);border:2px solid var(--choc);border-radius:22px;padding:12px 16px;margin:0 0 22px;max-width:720px}
.invite-panel{margin-top:clamp(32px,5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--cream);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 6px 0 var(--choc);padding:clamp(22px,3vw,36px)}
@media (max-width:900px){.invite-panel{grid-template-columns:1fr}}
.invite-panel h3{font:700 clamp(24px,2vw + 10px,32px)/1.15 var(--font-display);margin:0 0 10px}
.invite-panel .invite-copy p:last-child{margin-bottom:0}
.inv-count{font:700 clamp(22px,1.6vw + 10px,28px)/1.2 var(--font-display);margin:0 0 14px}
.inv-num{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;border-radius:50%;background:var(--drift);color:var(--white);border:2px solid var(--choc)}
.invite-slots{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.invite-slot{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--white);border:2px dashed var(--choc);border-radius:18px;padding:10px 12px}
.inv-ticket{position:relative;width:46px;height:32px;border-radius:8px;background:var(--baby);border:2px solid var(--choc)}
.inv-ticket::before,.inv-ticket::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--white);border:2px solid var(--choc)}
.inv-ticket::before{left:-7px}.inv-ticket::after{right:-7px}
.inv-ticket .inv-notch{position:absolute;left:50%;top:5px;bottom:5px;border-left:2px dashed var(--choc)}
.inv-text b{display:block;font:700 17px/1.2 var(--font-display)}
.inv-text span{font-size:14px;color:var(--choc-70)}
.btn-ghost{background:var(--cream);color:var(--choc);box-shadow:0 3px 0 var(--choc)}

/* ===== v2.8: founders FINAL (locked plan): tiers, badges, leaderboard lines, invites ===== */
.founding-final .fm-def{margin-bottom:18px}
.tiers{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;max-width:720px}
.tier{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;background:var(--cream);border:2px solid var(--choc);border-radius:22px;padding:12px 16px 12px 12px;text-align:left}
.tier-founders{background:var(--white)}
.tier-art{display:grid;place-items:center;width:64px;height:52px}
.tier-ico{width:64px;height:auto;overflow:visible}
.tier-ico-second{display:flex;gap:5px;align-items:center;justify-content:center;width:56px;height:40px;border:2px dashed var(--choc);border-radius:14px;background:var(--white)}
.tier-ico-second i{width:8px;height:8px;border-radius:50%;background:var(--choc-70)}
.tier-range{margin:0;font:800 12px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--choc-70)}
.tier-name{margin:2px 0 2px;font:700 clamp(20px,1.2vw + 12px,24px)/1.15 var(--font-display)}
.tier-body{margin:0;font-size:clamp(15px,.6vw + 12px,17px);line-height:1.45}
.tiers-compact{margin:12px 0 0;max-width:none}
.tiers-compact .tier{padding:10px 14px 10px 10px;grid-template-columns:54px 1fr}
.tiers-compact .tier-art{width:54px;height:44px}.tiers-compact .tier-ico{width:54px}
.tiers-compact .tier-name{font-size:20px}
.tiers-lead{margin:14px 0 0;font-weight:800}
.perks-head{font:700 clamp(19px,1vw + 12px,22px)/1.2 var(--font-display);margin:0 0 12px}
.founding-final .perks{margin-bottom:28px}
.founding-final .perks li>span{display:block}
.terms-link{font-size:14px;font-weight:800;white-space:nowrap}
.terms-wrap{white-space:nowrap}
.terms-wrap .flag{margin-left:.3em}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;background:var(--white);border:2px solid var(--choc);border-radius:var(--r-pill);padding:2px 10px 2px 4px;white-space:nowrap}
.badge .rosette,.badge .eb-ticket{width:30px;height:auto;flex:none;overflow:visible}
.badge-txt b{font:700 14px/1.1 var(--font-display)}
.badge-founders{background:var(--cream)}
.badge-early{background:var(--baby)}
.badge-second{border-style:dashed;padding:4px 10px;background:var(--cream)}
.badge-second .badge-txt b{font-weight:600}
.badge-lg{gap:12px;padding:6px 18px 6px 8px;border-width:2.5px;box-shadow:0 3px 0 var(--choc)}
.badge-lg .rosette,.badge-lg .eb-ticket{width:64px}
.badge-lg .badge-txt{display:flex;flex-direction:column;text-align:left}
.badge-lg .badge-txt b{font-size:22px}
.badge-lg .badge-txt span{font-size:13px;font-weight:800;color:var(--choc-70)}
.your-badge{margin:8px 0 12px}
.your-badge .small-print{margin:0 0 6px}
.your-badge-left{margin:4px 0 10px}

/* leaderboard lines (scaled demo) */
.lb-lines{margin:4px 0 14px;text-align:left;background:var(--white);border:2px solid var(--choc);border-radius:20px;padding:10px 12px;display:grid;gap:6px}
.lb-lines-tag{margin:0 0 2px;font:800 11px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--choc-70)}
.zone{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;border-radius:12px;padding:7px 10px;font-size:14px}
.zone-range{font:700 15px/1.2 var(--font-display);min-width:7.2em}
.zone-name{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.zone-ico{width:26px;height:auto;flex:none;overflow:visible}
.z-founders{background:var(--cream);border:2px solid var(--choc)}
.z-early{background:var(--baby);border:2px solid var(--choc)}
.z-second{background:var(--cream);border:2px dashed var(--choc-70)}
.zone-you{margin-left:auto;font-weight:800;background:var(--choc);color:var(--cream);border-radius:var(--r-pill);padding:2px 10px;font-size:13px;white-space:nowrap}
.zone-you .lb-sample{border-color:var(--cream);margin:0 2px}
.lb-line{position:relative;height:22px;display:grid;place-items:center}
.lb-line::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px dashed var(--choc)}
.lb-line span,.lb-divider span{position:relative;font:800 12px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 10px;border:2px solid var(--choc);white-space:nowrap}
.line-founders span{background:var(--choc);color:var(--cream)}
.line-beta span{background:var(--drift);color:var(--white)}
/* leaderboard-preview list: tiers, lines, gaps */
.lb-intro{margin:0 0 14px}
.lb-list li.lb-row{grid-template-columns:64px 1fr auto auto}
.lb-list li.lb-row:first-child{background:var(--baby)}
.lb-list li.lb-early{background:var(--baby)}
.lb-list li.lb-second{background:var(--cream);border-style:dashed}
.lb-list li.lb-gap,.lb-list li.lb-divider{display:grid;place-items:center;background:none;border:0;padding:0;border-radius:0}
.lb-gap span{font:700 20px/1 var(--font-display);color:var(--choc-70);letter-spacing:.2em}
.lb-list li.lb-divider{position:relative;height:30px}
.lb-list li.lb-divider::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px dashed var(--choc)}
.lb-badge{display:flex;justify-content:flex-end}
@media (max-width:560px){
  .lb-list li.lb-row{grid-template-columns:58px 1fr;grid-template-areas:"pos name" "pos meta" "pos badge";row-gap:4px}
  .lb-list li.lb-row .lb-pos{grid-area:pos;font-size:17px}
  .lb-list li.lb-row .lb-name{grid-area:name}
  .lb-list li.lb-row .lb-friends{grid-area:meta}
  .lb-list li.lb-row .lb-badge{grid-area:badge;justify-content:flex-start}
  .zone-range{min-width:0}
  .zone-you{margin-left:0}
  .tier{grid-template-columns:52px 1fr;gap:12px}
  .tier-art{width:52px}.tier-ico{width:52px}
}
/* invites panel (final) */
.invite-slot-extra{background:var(--baby);border-style:solid;grid-template-columns:auto 1fr}
.inv-extra-art{display:grid;place-items:center;width:46px}
.inv-eb{width:50px;height:auto;overflow:visible}
.invite-copy .small-print{margin-top:10px}
.btn-ghost:active{transform:translateY(2px);box-shadow:0 1px 0 var(--choc)}
/* v2.8 fix: divider/gap rows inherited the 3-column .lb-list grid, so the label sat in the 52px column and was clipped on mobile */
.lb-list li.lb-gap,.lb-list li.lb-divider{grid-template-columns:1fr;grid-template-areas:none;justify-items:center}
.lb-list li.lb-divider span{max-width:100%}

/* ===== v2.9 (31 Oct 2026 AEDT): Legal v2 alignment + teams teaser. Brand palette only (choc, baby, cream, Drift blue, white). ===== */
.free-note{margin:0 0 12px;font-weight:700}
.lines-note{margin:12px 0 6px;font-size:15px;background:var(--white);border:2px dashed var(--choc);border-radius:18px;padding:10px 14px}
.lines-note .terms-link,.small-print .terms-link{white-space:nowrap}
.badge-note{margin:0 0 14px}
.lb-lines-note{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--choc-70)}
.inv-legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 0;font-size:13px;font-weight:800}
.inv-legend span{border:1.5px solid var(--choc);border-radius:var(--r-pill);padding:2px 9px;background:var(--cream);font-weight:700}
.field-hint{margin:6px 0 10px;font-size:13.5px;line-height:1.45;color:var(--choc-70)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:14px;line-height:1.45;cursor:pointer;text-align:left}
.consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--drift)}
.consent input:focus-visible{outline:3px solid var(--drift);outline-offset:2px}

/* teams teaser (Fin-approved copy, verbatim). The CTA opens nothing: tap/click/Enter/Space reveal the placeholder chip. */
.teams-panel{margin:clamp(28px,4vw,44px) auto 0;max-width:820px;background:var(--baby);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 6px 0 var(--choc);padding:clamp(20px,3.4vw,36px);text-align:left}
.teams-panel h3{font-size:clamp(22px,2.2vw,30px);margin:0 0 .5em}
.teams-panel p{margin:0 0 12px}
.teams-close{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px!important}
.team-cta{-webkit-user-select:none;user-select:none;transition:transform .25s var(--ease-bounce),box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
.team-cta.is-active{background:var(--white);color:var(--choc);box-shadow:0 4px 0 var(--drift)}
@media (hover:hover){.team-cta:hover{background:var(--white);color:var(--choc)}}
.team-cta:active{outline:3px solid var(--drift);outline-offset:3px}
.team-cta:focus-visible{outline:3px solid var(--drift);outline-offset:4px}
body.review .team-chip,.team-chip{display:none!important}
body.review .team-cta.is-active ~ .team-chip{display:inline-block!important;margin:0;background:var(--white)}
.teams-price{font-family:var(--font-display);font-weight:700;font-size:17px;margin:4px 0 0!important}
@media (prefers-reduced-motion:reduce){.team-cta,.team-cta:hover,.team-cta:active,.team-cta.is-active{transform:none!important;scale:none!important;transition:background-color .2s linear,color .2s linear}}

/* local draft legal pages */
.legal-main{padding:calc(clamp(24px,4vw,48px)) 0 clamp(48px,6vw,80px)}
.legal-doc{max-width:780px;margin:0 auto;font-size:16px;overflow-wrap:anywhere}
.legal-doc h1{font-size:clamp(30px,4vw,46px)}
.legal-doc h2{font-size:clamp(21px,2.2vw,27px);margin:1.6em 0 .5em;scroll-margin-top:96px;padding:6px 10px;margin-left:-10px;border-radius:12px}
.legal-doc h2:target{background:var(--baby);outline:2px dashed var(--drift);outline-offset:2px}
.legal-doc .anchor-alias{position:relative;top:-96px}
.legal-doc .ph{white-space:normal}
.legal-banner{background:var(--white);border:2px dashed var(--choc);border-radius:16px;padding:10px 14px;font-size:14.5px}
.legal-toc ol{margin:0 0 8px;padding-left:0;list-style:none;columns:2 260px;font-size:15px}
.legal-toc li{margin:0 0 4px;break-inside:avoid}
.legal-toc a,.legal-doc a{color:var(--choc);text-decoration-color:var(--drift);text-underline-offset:3px}
.legal-doc blockquote{margin:12px 0;padding:8px 14px;border-left:4px solid var(--drift);background:var(--white);border-radius:0 12px 12px 0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
.table-wrap table{border-collapse:collapse;min-width:520px;font-size:14px}
.table-wrap th,.table-wrap td{border:1.5px solid var(--choc-12);padding:6px 8px;text-align:left;vertical-align:top}
.table-wrap th{background:var(--baby)}
.plan .amt.amt-chat{font-size:clamp(24px,2.4vw,30px);line-height:1.1}
h1 .ph{white-space:normal} /* v2.9: "leaderboard name" placeholder in the confirmed h1 must wrap at 390 */
@media (max-width:520px){.lb-line span,.lb-list li.lb-divider span{white-space:normal;text-align:center;line-height:1.25;max-width:100%}} /* v2.9: "· provisional" labels wrap instead of widening the 390 layout */
@media (max-width:520px){.lb-line{height:auto;min-height:22px}.lb-list li.lb-divider{height:auto;min-height:30px}.lb-line span,.lb-list li.lb-divider span{letter-spacing:.04em;padding:5px 12px}} /* v2.9: wrapped labels keep their own row height (no overlap with the zones) */
/* v2.10 perks trim + teams kicker + terms "at a glance" */
.perks-short{gap:10px;margin-bottom:18px}
.perks-short li{font-size:clamp(17px,1vw + 11px,20px);line-height:1.35}
.perks-short .terms-link{white-space:nowrap}
.perks-compact{margin:10px 0 6px;text-align:left}
.perks-compact li{font-size:16px}
.perks-compact li::before{width:20px;height:20px;border-width:2.5px;background:radial-gradient(circle at 60% 40%,var(--drift) 0 4px,transparent 4.5px)}
.see-details{margin:0 0 22px;font-weight:700}
.invite-copy .see-details{margin-top:4px}
.teams-panel .kicker{margin-bottom:12px}
.glance{margin:8px 0 26px;background:var(--white);border:var(--stroke) solid var(--choc);border-radius:22px;padding:16px clamp(14px,2.4vw,24px);scroll-margin-top:90px}
.glance h2{margin-top:0;font-size:clamp(20px,1.6vw + 12px,26px)}
.glance-list{margin:10px 0;padding-left:1.1em;display:grid;gap:10px}
.glance-src{display:block;font-size:14px;margin-top:2px}
.glance-jump{font-size:14.5px;line-height:1.6;margin:8px 0 0}
.glance:target{outline:3px solid var(--drift);outline-offset:4px}
/* v2.12: Option B beta waves panel (founders section). Same tap-card state pattern as the plan and trust cards. */
.waves-panel{margin-top:clamp(32px,5vw,56px)}
.waves-panel h3{font-size:clamp(24px,2vw + 12px,32px);margin-bottom:16px}
.waves{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.waves{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.waves{grid-template-columns:1fr}}
.wave-card h4{font:700 clamp(19px,1.2vw + 10px,22px)/1.15 var(--font-display);margin:0 0 8px}
.wave-card p{font-size:15.5px}
.wave-card .wave-n{width:36px;height:36px;border-radius:50%;background:var(--baby);border:2px solid var(--choc);display:grid;place-items:center;font:800 16px var(--font-display);margin:0 0 12px;transition:transform .4s var(--ease-bounce),background-color .3s var(--ease)}
.waves .tap-card.is-active{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc);background:var(--white)}
.waves .tap-card.is-active .wave-n{background:var(--drift);color:var(--white);transform:scale(1.1) rotate(-8deg)}
@media (hover:hover){.waves .tap-card:hover{translate:0 -6px;rotate:-.4deg;box-shadow:0 10px 0 var(--choc)}}
.waves .tap-card:focus-visible{outline:3px solid var(--drift);outline-offset:4px;border-radius:var(--r-card)}
.waves-foot{margin-top:14px}
/* v2.12: long "Fin to confirm" chips inside perk lists may wrap, so they never widen a 390px screen (confirmed page card). */
body.review .perks .flag{white-space:normal;max-width:100%}

/* v2.13 item 5 (Drew): waves layout. Cards 1-3 sit in one even row; the long paid card gets its own full-width row with a
   heading column, so the short cards no longer stretch to its height. Tap/hover/focus states unchanged. */
.waves{grid-template-columns:repeat(3,1fr);align-items:stretch}
.waves .wave-card--paid{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,300px) 1fr;column-gap:32px;align-items:start}
.waves .wave-card--paid .wave-head h4{margin:0}
.waves .wave-card--paid > p{margin:0;max-width:62ch}
@media (max-width:1000px){.waves{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.waves{grid-template-columns:1fr}.waves .wave-card--paid{display:block}.waves .wave-card--paid .wave-head h4{margin:0 0 8px}}
/* v2.14: invite switch (README_v8 item 10), status note (item 12), checkout stub (item 26) */
.inv-switch{display:inline-flex;gap:0;margin:0 0 12px;border:2px solid var(--choc);border-radius:var(--r-pill);overflow:hidden;background:var(--white)}
.inv-switch-btn{font:800 14px/1 var(--font-ui);padding:9px 14px;min-height:40px;border:0;background:transparent;color:var(--choc);cursor:pointer}
.inv-switch-btn+.inv-switch-btn{border-left:2px solid var(--choc)}
.inv-switch-btn[aria-pressed="true"]{background:var(--choc);color:var(--cream)}
.inv-switch-btn:focus-visible{outline:3px solid var(--drift);outline-offset:-3px}
.inv-ticket-free{background:var(--drift)}
.inv-kind{font-weight:800}
.inv-status-note{font-size:13px;line-height:1.45;margin:8px 0 0}
.co-card{max-width:720px;text-align:left}
.co-box{background:var(--white);border:3px solid var(--choc);border-radius:24px;padding:22px 22px 18px;margin:18px 0 24px}
.co-lead{font-size:clamp(18px,1vw + 12px,22px);line-height:1.35;margin:0 0 8px}
.co-list{margin:12px 0 16px;padding-left:1.2em;display:grid;gap:8px;font-size:16px;line-height:1.5}
.co-agree,.co-mkt{margin-top:8px}
.co-btn{width:100%;justify-content:center;margin-top:6px}
.co-variant{font-size:22px;margin:28px 0 0}
body.review .co-box .flag,.co-box .ph{white-space:normal;max-width:100%}
.co-box{overflow-wrap:anywhere}
/* v2.15 Drew decision 4: card-up-front placeholder slot */
.slot-pending{margin-top:14px;border:2px dashed var(--choc);border-radius:14px;padding:10px 14px;font:700 14px/1.4 var(--font-ui);color:var(--choc);background:rgba(255,255,255,.6)}
.waves .wave-card--paid > .slot-pending{grid-column:2;max-width:62ch}
/* v2.15 Fin 4:44am AEDT layout fix, Plans section ("Plans for one person, or the whole team."):
   the two cards are equal 1fr 1fr columns across the FULL content width (centred by .wrap, even 16px gutter),
   and the paragraph below and the "Coming to Drew for teams" box share that same width and left edge. Stacks at <=700px. */
#plans .noprice{max-width:none;width:100%;margin-left:0;margin-right:0;grid-template-columns:1fr 1fr;gap:16px}
#plans .noprice > .card{min-width:0}
#plans .noprice + .lede{max-width:none;margin-left:0;margin-right:0}
#plans .teams-panel{max-width:none;width:100%;margin-left:0;margin-right:0;box-sizing:border-box}
@media (max-width:700px){#plans .noprice{grid-template-columns:1fr}}

/* v2.16 (a)-(c): hero public line, tagline, pilot note, in-development tag; (b) pilot-invite status stub */
.hero .front-door{font:800 14px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.hero .front-door::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--drift);flex:none}
.hero .tagline{font:700 clamp(19px,1.2vw + 11px,23px)/1.3 var(--font-ui);margin:14px 0 12px;max-width:30em}
.pilot-note{margin-top:20px;max-width:560px;background:var(--white);border:2px solid var(--choc);border-radius:20px;padding:14px 18px}
.pilot-line{margin:0;font-size:17px;line-height:1.45;padding-left:20px;position:relative}
.pilot-dot{position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--drift);animation:stir 2.8s var(--ease) infinite}
.proto-claims{list-style:none;margin:10px 0 0 20px;padding:0;display:grid;gap:4px;font-size:15px}
.proto-claims li{padding-left:22px;position:relative}
.proto-claims li::before{content:"\2713";position:absolute;left:2px;font-weight:800}
.dev-tag{display:inline-block;vertical-align:middle;font:700 12px/1.2 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border:1.5px solid var(--choc);border-radius:var(--r-pill);background:var(--cream);margin:0 .3em}
.pilot-status{text-align:left;background:var(--white);border:2px dashed var(--choc);border-radius:24px;padding:20px 22px;margin:22px 0}
.pilot-status h2{font-size:clamp(22px,2vw + 10px,28px);margin:6px 0 10px}
.pilot-status .preview-note{font-size:13px;margin:0;opacity:.85}
.status-pill{display:inline-flex;align-items:center;gap:8px;font:800 14px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;background:var(--cream);border:2px solid var(--choc);border-radius:var(--r-pill);padding:8px 14px;margin:0 0 12px}
.status-dot{width:10px;height:10px;border-radius:50%;background:#E8A23A;animation:stir 2.8s var(--ease) infinite}

/* v2.21: explainer video (16:9, cream and chocolate, rounded) */
.explainer{padding:clamp(48px,6vw,88px) 0}
.explainer .head{margin-inline:auto;text-align:center;margin-bottom:clamp(20px,3vw,32px)}
.explainer .head .kicker{justify-content:center}
.video-frame{margin:0 auto;max-width:960px}
.video-box{position:relative;aspect-ratio:16/9;background:var(--cream);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 6px 0 var(--choc);overflow:hidden}
.video-box video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:var(--cream)}
.video-frame figcaption{text-align:center;margin:18px auto 0;max-width:40em}
@media (max-width:560px){.video-box{border-radius:20px;box-shadow:0 4px 0 var(--choc)}}

/* ===== v2.21b: teaser, How Drew works, Drift traits, founder offer, founder note ===== */
.teaser{margin:0;align-self:center;justify-self:center;width:min(100%,520px)}
.teaser-box{position:relative;aspect-ratio:3/2;background:var(--cream);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:6px 6px 0 var(--choc);overflow:hidden}
.teaser-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.teaser-toggle{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:2px solid var(--choc);background:var(--cream);color:var(--choc);cursor:pointer;display:grid;place-items:center;padding:0}
.teaser-toggle span{width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box}
.teaser-toggle[aria-pressed="true"] span{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.teaser-toggle:focus-visible{outline:3px solid var(--drift);outline-offset:2px}
.teaser-chip{margin-top:10px;text-align:center}
@media (max-width:900px){.hero .teaser{order:-1;width:min(100%,340px);margin:0 auto 6px}.teaser-toggle{width:36px;height:36px;right:10px;bottom:10px}}
.how3 .head{margin-inline:auto;text-align:center}
.how3-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.how3-step{background:var(--white,#fff);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);padding:24px 22px 26px;text-align:center;position:relative}
.how3-art{height:112px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.how3-art img{max-height:112px;width:auto}
.how3-pill{display:block;width:150px}.how3-pill svg{width:100%;height:auto}
.how3-num{position:absolute;top:14px;left:16px;margin:0;width:34px;height:34px;border-radius:50%;background:var(--choc);color:var(--cream);font:700 17px/34px var(--font-display,inherit)}
.how3-step h3{margin:.2em 0 .35em}
.how3-step p{margin:0}
.how3-note{text-align:center;margin-top:18px}
@media (max-width:900px){.how3-list{grid-template-columns:1fr}}
.drift-personality{margin:.9em 0 .6em;font-weight:700}
.drift-traits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.drift-traits li{background:var(--cream);border:2px solid var(--choc);border-radius:22px;padding:12px 10px;text-align:center;font-size:.92em;line-height:1.35}
.drift-traits img{display:block;margin:0 auto 6px;width:56px;height:56px}
.drift-traits b{display:block;color:var(--drift)}
@media (max-width:560px){.drift-traits{grid-template-columns:1fr}.drift-traits li{display:grid;grid-template-columns:56px 1fr;text-align:left;align-items:center;gap:0 12px}.drift-traits img{grid-row:span 2;margin:0}}
.offer-card{max-width:820px;margin:0 auto;background:var(--baby);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:6px 6px 0 var(--choc);padding:clamp(24px,4vw,44px);text-align:center}
.offer-price{font-size:clamp(24px,2.4vw,32px);margin:.4em 0 0;line-height:1.2}
.offer-month{font-size:clamp(20px,2vw,26px);margin:.2em 0 1em;line-height:1.25}
.offer-list{list-style:none;margin:0 auto 18px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left;max-width:680px}
.offer-list li{background:var(--cream);border:2px solid var(--choc);border-radius:18px;padding:10px 14px}
.offer-small{margin:0 0 18px}
@media (max-width:640px){.offer-list{grid-template-columns:1fr}}
.fnote{padding-top:0}
.fnote-card{max-width:680px;margin:0 auto;background:var(--white,#fff);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);padding:clamp(24px,4vw,40px)}
.fnote-card blockquote{margin:0;font-size:1.08em}
.fnote-card blockquote p{margin:0 0 .6em}
.fnote-card figcaption{font-weight:800;margin-top:.6em}
.flag-check{white-space:normal!important;text-transform:none!important}

/* v2.21c: three beats over the locked steps (replaces the separate .how3 section) */
.how3-beats{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.how3-beat{background:var(--baby);border:2px solid var(--choc);border-radius:22px;padding:10px 8px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.25}
.how3-beat .how3-art{height:64px;display:flex;align-items:center;justify-content:center}
.how3-beat .how3-art img{max-height:64px;width:auto}
.how3-beat .how3-pill{width:96px}
.how3-beat b{font-size:.95em}
.how3-beat small{font-size:.78em;opacity:.8}
@media (max-width:420px){.how3-beat b{font-size:.86em}.how3-beat .how3-pill{width:76px}}

/* v2.21: fix pre-existing 390px overflow when several FAQ items are open (nowrap chips widened the grid track) */
.faq{grid-template-columns:minmax(0,1fr)}
.faq .flag{white-space:normal;max-width:100%}

/* v2.22: one three-step strip (replaces .how3-beats + the six .steps) */
.steps3 .step3{grid-template-columns:48px 1fr 64px;align-items:start;padding:14px 16px 14px 12px}
.steps3 .step3::before{grid-column:1;grid-row:1}
.steps3 .how3-art{grid-column:3;grid-row:1;height:64px;display:flex;align-items:center;justify-content:center}
.steps3 .how3-art img{max-height:64px;width:auto}
.steps3 .how3-pill{display:block;width:64px}.steps3 .how3-pill svg{width:100%;height:auto}
.step3-body{grid-column:2;grid-row:1;min-width:0}
.step3-h{display:block;font:700 1.08em/1.25 var(--font-display);margin:.35em 0 .2em}
.step3-body p{margin:0}
.step-levels{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.step-levels li{background:var(--baby);border:2px solid var(--choc);border-radius:14px;padding:7px 10px;font-size:.94em}
.step-levels b{display:block}
@media (max-width:420px){.steps3 .step3{grid-template-columns:40px 1fr;padding:12px}.steps3 .step3::before{width:40px;height:40px}.steps3 .how3-art{display:none}}
/* v2.22: collapsed "How early access works" */
.ea-summary{max-width:760px;margin:28px auto 12px;text-align:center;font-weight:600}
.early-access{background:var(--cream);border:2px solid var(--choc);border-radius:24px;margin:0 auto;max-width:100%}
.early-access[open]{box-shadow:0 4px 0 var(--choc)}
.early-access>summary{list-style:none;cursor:pointer;padding:18px 60px 18px 22px;font:700 clamp(18px,1.2vw + 10px,21px)/1.25 var(--font-display);position:relative}
.early-access>summary::-webkit-details-marker{display:none}
.early-access>summary::after{content:"";position:absolute;right:20px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;border:2px solid var(--choc);background:linear-gradient(var(--choc),var(--choc)) center/12px 2.5px no-repeat,linear-gradient(var(--choc),var(--choc)) center/2.5px 12px no-repeat;transition:transform .35s var(--ease-bounce),background-color .3s}
.early-access[open]>summary::after{transform:rotate(135deg);background-color:var(--baby)}
.early-access>summary:focus-visible{outline:3px solid var(--drift);outline-offset:3px;border-radius:22px}
.ea-body{padding:0 clamp(12px,2vw,24px) clamp(16px,2vw,24px);min-width:0}
.ea-body>*:first-child{margin-top:0}
.step-levels li{counter-increment:none}
/* v2.22: invite panel inside the collapsed section must not force the 390 page wider */
.ea-body .invite-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.ea-body .invite-panel{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.ea-body{padding:0 8px 14px}.early-access>summary{padding:16px 54px 16px 16px}}
/* v2.22c: FAQ chips wrap at 390 (body.review .flag nowrap was overriding .faq .flag; the public "Referral ranking" chip clipped) */
body.review .faq .flag{white-space:normal;max-width:100%}
/* v2.23: referral placeholder chip (Drew 9:17am 2 Nov). Shown in full AND public builds (not tied to body.review). */
.ref-ph{display:inline-block;vertical-align:middle;margin:.15em 0 .15em .3em;font:700 11px/1.3 var(--font-ui);letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border:1.5px dashed var(--choc);border-radius:var(--r-pill);background:repeating-linear-gradient(-45deg,rgba(63,37,25,.07) 0 6px,transparent 6px 12px),var(--cream);color:var(--choc);white-space:normal;max-width:100%;box-sizing:border-box}
/* v2.23b: founders summary line, perks panel inside How early access works, trust permissions line */
.perks-summary{font-size:clamp(17px,1vw + 11px,20px);line-height:1.4;margin:0 0 14px;max-width:34em}
.ea-body .perks-panel{max-width:820px;margin:0 auto clamp(20px,3vw,32px)}
.ea-body .perks-panel .perks{margin-bottom:0}
.trust-perms{margin-top:clamp(18px,2.4vw,28px);font-size:clamp(16px,1vw + 10px,18px)}

/* v2.25 hero approval demo, position marker, calendar actions, video-soon card */
.hero-demo{margin:20px 0 4px;max-width:560px;background:var(--white);border:3px solid var(--choc);border-radius:24px;padding:16px 18px;box-shadow:5px 5px 0 var(--choc);display:grid;gap:8px}
.hero-demo .tag{justify-self:start;font-size:12px;font-weight:800;border:2px solid var(--choc);border-radius:999px;padding:2px 10px}
.hero-demo .msg{margin:0;padding:10px 14px;border-radius:18px;border:2px solid var(--choc);font-size:15px;line-height:1.4;max-width:92%}
.hero-demo .msg .who{display:block;font-size:12px;font-weight:800}
.hero-demo .msg.me{justify-self:end;background:#C6E4F6}
.hero-demo .msg.drew{justify-self:start;background:#FFF7E3}
.hd-actions{display:flex;flex-wrap:wrap;gap:8px}
.hd-btn{font:800 14px/1 var(--font-ui);padding:9px 14px;border-radius:999px;border:2px solid var(--choc);background:var(--white);color:var(--choc);cursor:pointer}
.hd-btn.hd-approve{background:var(--choc);color:#FFF7E3}
.hd-btn:focus-visible,.cal-actions .rchip:focus-visible{outline:3px solid #1A82CC;outline-offset:2px}
.hd-btn[aria-pressed="true"]{opacity:.65}
.hd-done{margin:0;font-weight:800;font-size:15px;background:#C6E4F6;border:2px solid var(--choc);border-radius:16px;padding:10px 14px;animation:v225fade .5s ease both}
.hd-tick{display:inline-block;width:1.4em;height:1.4em;line-height:1.4em;text-align:center;border-radius:50%;background:var(--choc);color:#FFF7E3;font-size:13px}
.pos-marker{margin:8px auto 8px;max-width:240px;background:var(--white);border:3px solid var(--choc);border-radius:22px;padding:16px 12px}
.pos-marker .pm-num{font:700 46px/1 var(--font-display);margin:0}
.pos-marker .pm-tag{font-size:13px;font-weight:700;margin:6px 0 0}
.pos-marker.is-demo .pm-num{border-bottom:2px dashed var(--choc);display:inline-block}
.cal-actions .rchip{cursor:pointer;font:inherit;color:inherit}
.cal-done{animation:v225fade .5s ease both}
.vs-card{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#FFF7E3;border:3px solid var(--choc);border-radius:24px}
.vs-pill svg{width:min(260px,50vw);height:auto;display:block}
.vs-line{font:700 clamp(17px,1.4vw + 10px,24px)/1.2 var(--font-display);margin:0}
/* s4 offer block nested inside .perks li */
.offer-block{min-width:0}
.offer-block p{margin:0 0 .6em}
.offer-block ul{list-style:disc;margin:.2em 0 .7em;padding-left:1.3em;display:block}
.offer-block ul li{display:list-item;font-size:inherit;margin:0 0 .35em}
.offer-block ul li::before{content:none;display:none}
@keyframes v225fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.hd-done,.cal-done{animation:none}}

/* v2.26b: hero In development label, same size as the sub-line (Fin 10:07) */
.hero .sub .dev-label{font-size:inherit;font-weight:800}

/* v2.29: referral credits line (copy v12 s4A) under the referral explainer */
.credits-line{font-size:14px;line-height:1.5;margin:10px 0 4px;color:var(--choc-70)}

/* v2.30 invitee line (consent v15 s1) */
.invitee-line{margin:0 0 14px;padding:12px 14px;border:2px solid var(--choc-70);border-radius:16px;background:rgba(255,255,255,.55);font-size:.95rem;line-height:1.5}
.invitee-line[hidden]{display:none}

/* v2.37 LIVE: confirmed-page board (anonymous neighbours) */
.cf-board{margin:16px auto 0;max-width:420px;text-align:left}
.cf-near{list-style:none;margin:8px 0;padding:0}
.cf-near li{background:var(--white);border:2px solid var(--choc-12);border-radius:14px;padding:8px 12px;margin:6px 0;font-weight:700;font-size:15px}
.cf-near li.is-you{border-color:var(--choc);background:var(--cream)}

/* ===== v2.39 (2 Nov 2026): public homepage board, anonymous top 25 ===== */
.pb-card{background:var(--white);border:var(--stroke) solid var(--choc);border-radius:var(--r-card);box-shadow:0 6px 0 var(--choc);padding:clamp(18px,2.6vw,32px);max-width:880px}
.pb-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.pb-eyebrow{margin:0}
.pb-meta{margin:0;font-size:15px;font-weight:700}
.pb-updated{color:var(--choc-70);font-weight:600}
.pb-head,.pb-row{display:grid;grid-template-columns:4.2em 1fr auto;align-items:center;gap:12px}
.pb-head{font:800 12px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--choc-70);padding:0 14px 8px}
.pb-head span:last-child{text-align:right}
.pb-list{list-style:none;margin:0;padding:0}
.pb-row{background:var(--cream);border:2px solid var(--choc-12);border-radius:14px;padding:9px 14px;margin:6px 0;font-weight:700;font-size:15px;min-height:44px}
.pb-rank{font:700 18px/1 var(--font-display)}
.pb-refs{text-align:right;white-space:nowrap;color:var(--choc-70)}
.pb-refs b{color:var(--choc);font-family:var(--font-display);font-size:17px}
.pb-row.pb-podium{border-color:var(--choc);background:var(--baby)}
.pb-skel span{display:block;height:14px;border-radius:8px;background:var(--choc-12)}
.pb-skel .pb-refs{width:60px;justify-self:end}
.js .pb-skel{animation:pbpulse 1.4s var(--ease) infinite alternate}
@keyframes pbpulse{from{opacity:.55}to{opacity:1}}
.pb-empty{text-align:center;padding:18px 8px 6px}
.pb-error{margin:10px 0 0}
.pb-foot{margin:14px 0 0}
.pb-cta{margin:18px 0 0}
@media (min-width:760px){.pb-list{columns:2;column-gap:18px}.pb-row{break-inside:avoid}}
@media (max-width:420px){.pb-head,.pb-row{grid-template-columns:3.2em 1fr auto;gap:8px}.pb-row{padding:8px 10px}.pb-head{padding:0 10px 8px}.pb-head span:last-child{font-size:0}.pb-head span:last-child::after{content:"Referrals";font-size:12px}}
@media (prefers-reduced-motion:reduce){.js .pb-skel{animation:none}}
@media (min-width:760px){.pb-head{display:none}}
.pb-card [hidden]{display:none!important}
.pb-row.pb-founder{border:2px dashed var(--choc);background:var(--white);column-span:all}
.pb-pin{color:var(--drift)}

/* ---- v2.40 (2 Nov 2026): optional display names + founder all-member share total ---- */
.field-name{margin-top:12px}
.field label .opt{font-weight:600;color:var(--choc-70)}
.field-name .field-hint{margin:6px 0 0}
.pb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-refs-all small{font-size:12px;font-weight:600;color:var(--choc-70)}
.pb-row.pb-founder .pb-refs{white-space:normal}
.cf-name{margin:18px 0 0;padding:16px;border:2px solid var(--choc-12);border-radius:14px;background:var(--cream)}
.cf-name .field input{width:100%}
.cf-name-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.cf-name .form-error{margin-top:10px}
.cf-name[hidden]{display:none!important}
.pb-row.pb-founder .pb-name{font-weight:800}
@media (max-width:640px){.pb-row.pb-founder{grid-template-columns:3.2em 1fr;row-gap:2px}.pb-row.pb-founder .pb-pin{grid-row:span 2}.pb-row.pb-founder .pb-refs{grid-column:2;text-align:left}}

/* v2.43: member log-in link, log-in page, member account bits */
@media (max-width:900px){.nav a.nl.nl-login{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;font-size:15px}}
@media (max-width:380px){.nav a.nl.nl-login{padding:8px 6px;font-size:14px}.nav .btn-sm{padding:11px 12px;font-size:14px}}
.acct-card{max-width:520px;margin-left:auto;margin-right:auto}
.acct-form{display:grid;gap:14px;max-width:420px;margin:0 auto;text-align:left}
.acct-form .btn{width:100%}
.acct-alt{text-align:center;margin:14px 0 0}
.acct-ok{font-weight:700;background:var(--cream);border:2px solid var(--choc-12);border-radius:14px;padding:14px 16px;margin:0 auto;max-width:420px}
.cf-acct{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:0 0 14px}
.cf-setpw{margin-bottom:10px}
.cf-code-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 6px;font-weight:700}
.cf-code-row code{font-size:18px;letter-spacing:.06em}
.cf-refcounts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0;font-weight:700}
.cf-name-next{font-weight:700}
.nav{flex-wrap:nowrap}