/* ───────── v2: extended site, same original look ───────── */
:root{ --btn:#687594; --btn-ink:#FFFFFF; --hair:#E6E3DF; }
@media (prefers-color-scheme: dark){ :root{ --btn:#8C98B8; --btn-ink:#161922; --hair:#2E3342; } }
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* header */
.bar-inner{max-width:1040px}
.nav{align-items:center}
.nav .join{background:var(--slate-ink); color:var(--slate); border-radius:999px; padding:7px 14px; font-weight:500; opacity:1}
.nav .join:hover{text-decoration:none; filter:brightness(.97)}
@media (prefers-color-scheme: dark){ .nav .join{color:#2A3044} }
@media (max-width:640px){ .nav .opt{display:none} }

/* shared */
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.sec{max-width:1040px; margin:0 auto; padding:88px 0 0}
.sec h2{font-weight:500; font-size:clamp(28px,4vw,40px); line-height:1.15; letter-spacing:-.01em; margin:0 0 14px; max-width:22ch}
.sec .sub{color:var(--muted); font-size:17px; max-width:54ch; margin:0}
.hair{height:1px; background:var(--hair); border:0; max-width:1040px; margin:88px auto 0}
.btn{display:inline-block; border:0; cursor:pointer; font:inherit; font-weight:500; font-size:16px; background:var(--btn); color:var(--btn-ink); padding:13px 24px; border-radius:999px; text-decoration:none; white-space:nowrap}
.btn:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.6; cursor:default}
.link{font-weight:500; text-decoration:none}
.link:hover{text-decoration:underline}

/* hero */
.hero{max-width:1040px; padding-block:72px 24px}
.hero .lede{margin-bottom:26px}
.hero-note{font-size:13px; color:var(--muted); margin:12px 2px 0}
.pair .dot{transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.intro .dot.a{transform:translateX(-46px)}
.intro .dot.b{transform:translateX(46px)}
.reveal{transition:opacity .9s ease .9s, transform .9s cubic-bezier(.2,.8,.2,1) .9s}
.intro .reveal{opacity:0; transform:translateY(10px)}
.reveal .tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#B07A64; margin-bottom:4px}
@media (prefers-color-scheme: dark){ .reveal .tag{color:var(--terra)} }

/* waitlist form */
.wl{max-width:460px}
.wl-form{display:flex; gap:6px; background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:5px}
.wl-form:focus-within{border-color:var(--btn)}
.wl-form input[type=email]{flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:16px; color:var(--ink); padding:10px 16px; outline:none}
.wl-form input::placeholder{color:var(--muted); opacity:.75}
.wl-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.wl-city{display:block; width:100%; margin-top:10px; border:1px solid var(--hair); background:var(--surface); border-radius:999px; padding:12px 20px; font:inherit; font-size:16px; color:var(--ink); outline:none}
.wl-city:focus{border-color:var(--btn)}
.wl-msg{font-size:14px; margin:10px 4px 0; min-height:1.2em}
.wl-msg.err{color:#A5503A}
@media (prefers-color-scheme: dark){ .wl-msg.err{color:#E79A84} }
.wl-done{display:none; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:16px 18px}
.wl-done .ok{flex:none; width:34px; height:34px; border-radius:50%; background:var(--btn); color:var(--btn-ink); display:grid; place-items:center; font-weight:600}
.wl-done strong{display:block; font-weight:600}
.wl-done span{display:block; color:var(--muted); font-size:14px}
.is-done .wl-form, .is-done .wl-city, .is-done .hero-note, .is-done .wl-msg{display:none}
.is-done .wl-done{display:flex}
@media (max-width:480px){
  .wl-form{flex-direction:column; border-radius:22px; padding:6px}
  .wl-form .btn{width:100%}
}

/* steps (keep original cards) */
.steps{max-width:1040px; padding-block:24px 0}
.step .n{letter-spacing:.08em; text-transform:uppercase; font-size:12px}

/* vision */
.vision{background:var(--terra-soft); border-radius:28px; padding:clamp(32px,6vw,72px); display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center}
@media (max-width:820px){ .vision{grid-template-columns:1fr; gap:28px} }
.vision blockquote{margin:0; font-weight:500; font-size:clamp(26px,3.4vw,36px); line-height:1.25; letter-spacing:-.01em}
.vision p{margin:0 0 18px; color:var(--ink); opacity:.8}
.nots{list-style:none; margin:0; padding:0; border-top:1px solid rgba(30,34,48,.14)}
.nots li{display:flex; justify-content:space-between; padding:11px 0; margin:0; border-bottom:1px solid rgba(30,34,48,.14); font-size:15px}
.nots li span:last-child{color:var(--muted)}
@media (prefers-color-scheme: dark){ .nots, .nots li{border-color:rgba(255,255,255,.12)} }

/* privacy */
.two{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width:820px){ .two{grid-template-columns:1fr; gap:28px} }
.two > *{min-width:0}
.two .split{margin:0}
.two .token{margin-top:12px}

/* invites */
.tickets{position:relative; height:280px; max-width:420px; margin:0 auto}
.ticket{position:absolute; left:50%; top:50%; width:280px; margin-left:-140px; margin-top:-70px; height:140px; background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:18px 20px; box-shadow:0 8px 28px rgba(40,40,60,.07); display:flex; flex-direction:column; justify-content:space-between}
.ticket:nth-child(1){transform:translate(-64px,26px) rotate(-9deg)}
.ticket:nth-child(2){transform:translate(58px,-30px) rotate(7deg)}
.ticket:nth-child(3){transform:rotate(-1deg); box-shadow:0 14px 36px rgba(40,40,60,.12)}
.ticket .top{display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.ticket .mini{display:flex}
.ticket .mini i{width:14px; height:14px; border-radius:50%; background:var(--slate); display:block}
.ticket .mini i + i{background:var(--terra); margin-left:-5px}
.ticket .code{font-size:18px; align-self:flex-start}
.ticket small{color:var(--muted); font-size:12px}
@media (max-width:420px){ .ticket{width:240px; margin-left:-120px} }

/* faq */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--hair); padding:18px 0}
.faq details:first-of-type{border-top:1px solid var(--hair)}
.faq summary{cursor:pointer; list-style:none; font-weight:500; font-size:17px; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--muted); font-weight:400; font-size:22px; line-height:1; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted); margin:10px 0 0; max-width:62ch}

/* closing */
.closing{text-align:center; max-width:640px; margin:0 auto; padding:110px 0 30px}
.closing h2{font-weight:500; font-size:clamp(28px,4vw,40px); line-height:1.15; letter-spacing:-.01em; margin:0 auto 12px; max-width:none}
.closing .pair{margin-bottom:26px}
.closing .dot{width:64px; height:64px; font-size:18px; border-width:4px}
.closing .dot.a{margin-right:-12px}

/* footer v2 */
.foot2{max-width:1040px; margin:96px auto 0; border-top:1px solid var(--hair); padding:28px 0 40px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 28px; color:var(--muted); font-size:14px}
.foot2 nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.foot2 a{color:var(--muted); text-decoration:none}
.foot2 a:hover{color:var(--ink)}
.foot2 .wm{font-weight:600; color:var(--ink); font-size:17px; margin-right:10px}

/* long-form pages (about, faq) */
.page-hero{max-width:1040px; margin:0 auto; padding:72px 0 8px}
.page-hero h1{font-size:clamp(34px,5.5vw,52px); max-width:18ch}
.page-hero .lede{font-size:19px; color:var(--muted); max-width:52ch; margin:16px 0 0}
.story{max-width:680px; margin:0 auto; padding:48px 0 0; font-size:17.5px; line-height:1.75}
.story p{margin:0 0 20px}
.story .pull{font-weight:500; font-size:clamp(22px,3vw,28px); line-height:1.35; color:var(--ink); border-left:3px solid var(--terra); padding:4px 0 4px 22px; margin:36px 0}
.values{max-width:1040px; margin:0 auto; padding:72px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:760px){ .values{grid-template-columns:1fr} }
.values .step h3{margin-top:0}

/* reveal on scroll (subtle) */
.fade{opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.fade.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .fade{opacity:1; transform:none; transition:none}
  .pair .dot, .reveal{transition:none}
  .intro .dot.a, .intro .dot.b, .intro .reveal{transform:none; opacity:1}
}
@media (max-width:420px){ .ticket:nth-child(1){transform:translate(-30px,26px) rotate(-8deg)} .ticket:nth-child(2){transform:translate(26px,-28px) rotate(6deg)} }
.story{max-width:1040px}
.story > *{max-width:680px}
.closing .sub{color:var(--muted); font-size:17px}
.page-hero h1{max-width:20ch}