:root{
  --ink:#0E0D11;--surface:#17161B;--raised:#222027;--line:#2E2C33;
  --bone:#ECE5D8;--text:#F1ECE3;--muted:#A39D93;--brass:#D4A953;--brass-deep:#B98E3C;
  --fire:#B4553D;--water:#2F6670;--air:#6F8DA8;--earth:#56663E;
  --serif:"Instrument Serif",Georgia,serif;--sans:"Geist",system-ui,-apple-system,sans-serif;
  --wrap:1120px;--r-lg:24px;--r-md:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid var(--brass);background:var(--brass);color:#1A160D;font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.btn:hover{background:#E0B862;border-color:#E0B862}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface);border-color:#4A4750}
.btn-small{min-height:40px;padding:0 18px;font-size:14px}
.btn-block{width:100%}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(14,13,17,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 26px/1 var(--serif)}
.logo svg{width:28px;height:28px;color:var(--text)}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;color:var(--muted);font-size:14px;transition:color .2s}
.nav a:hover{color:var(--text)}
.top-actions{display:flex;align-items:center;gap:12px}
.lang{position:relative;display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.lang svg{width:16px;height:16px}
.lang select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--text);font:500 13px var(--sans);cursor:pointer;padding-right:2px}
.lang select option{background:var(--surface)}
.lang:focus-within{border-color:var(--brass)}

/* hero */
.hero{padding:88px 0 40px;overflow:hidden}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero h1{font-family:var(--serif);font-size:clamp(52px,9vw,112px);line-height:.95;letter-spacing:-.02em;max-width:11ch}
.lead{margin-top:24px;max-width:46ch;color:var(--muted);font-size:clamp(17px,1.6vw,19px)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.soon{margin-top:18px;font-size:13px;color:var(--muted)}
.fan{position:relative;width:min(760px,100%);height:clamp(300px,46vw,440px);margin-top:64px}
.fan-card{position:absolute;left:50%;bottom:0;width:clamp(140px,22vw,230px);transform-origin:50% 120%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card-art{width:100%;height:auto}
.fan-0{transform:translateX(-50%) translateX(-128%) rotate(-13deg) translateY(30px)}
.fan-1{transform:translateX(-50%) translateX(-44%) rotate(-4.5deg)}
.fan-2{transform:translateX(-50%) translateX(44%) rotate(4.5deg)}
.fan-3{transform:translateX(-50%) translateX(128%) rotate(13deg) translateY(30px)}
.fan-card{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.fan-1{animation-delay:.08s}.fan-2{animation-delay:.16s}.fan-3{animation-delay:.24s}
@keyframes rise{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
.fan-card:hover{z-index:2}
.fan-note{margin-top:40px;max-width:52ch;color:var(--muted);font-size:15px}

/* paths */
.paths{padding:120px 0}
.paths h2,.try h2,.readers h2,.waitlist h2{font-family:var(--serif);font-size:clamp(36px,5vw,56px);line-height:1.02;letter-spacing:-.01em}
.paths h2{max-width:16ch}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.path{display:flex;flex-direction:column;gap:14px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.path h3{display:flex;align-items:center;gap:10px;font:500 20px/1.2 var(--sans)}
.path p{color:var(--muted);flex:1}
.dot{width:10px;height:10px;border-radius:50%}
.dot-air{background:var(--air)}.dot-water{background:#4A8C97}.dot-fire{background:#D06A4F}
.tag{padding:3px 10px;border-radius:999px;background:var(--raised);color:var(--muted);font:500 12px/1.4 var(--sans)}
.path-link{align-self:flex-start;color:var(--brass);font-weight:500;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(212,169,83,.35);padding-bottom:2px}
.path-link:hover{border-bottom-color:var(--brass)}

/* try */
.try{padding:120px 0;background:var(--surface);border-block:1px solid var(--line)}
.try-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.try-copy>p{margin-top:16px;color:var(--muted);font-size:17px}
.outcome{margin-top:36px;min-height:150px}
.outcome-empty{color:var(--muted);font-size:15px}
.outcome-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.outcome-meta i{width:10px;height:10px;border-radius:50%;display:inline-block}
.outcome-name{margin-top:8px;font:400 34px/1.1 var(--serif)}
.outcome-q{margin-top:12px;font:italic 400 24px/1.3 var(--serif);color:var(--brass)}
#redraw{margin-top:8px}
.flips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.flip{padding:0;border:0;background:none;cursor:pointer;perspective:1200px;border-radius:14px;aspect-ratio:300/510}
.flip-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.8,.2,1)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden}
.flip-face svg{width:100%;height:100%}
.flip-front{transform:rotateY(180deg)}
.flip:not(.is-flipped):not(:disabled):hover .flip-inner{transform:translateY(-6px)}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flips.done .flip:not(.is-flipped){opacity:.35;cursor:default}
.flip:disabled{cursor:default}

/* readers */
.readers{padding:120px 0}
.readers-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.readers-copy p{margin-top:18px;color:var(--muted);font-size:17px;max-width:40ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{counter-increment:s;padding:24px;border:1px solid var(--line);border-radius:var(--r-md)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;margin-bottom:16px;border-radius:50%;border:1px solid var(--brass);color:var(--brass);font-size:13px}
.steps h3{font:400 24px/1.1 var(--serif)}
.steps p{margin-top:6px;color:var(--muted);font-size:15px}

/* waitlist */
.waitlist{padding:40px 0 120px}
.wait-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start;padding:56px;background:var(--bone);color:#1C1B20;border-radius:32px}
.wait-copy p{margin-top:18px;color:#57534C;font-size:17px;max-width:36ch}
.wait-copy .fine{margin-top:10px;font-size:14px;color:#77726A}
.form{display:flex;flex-direction:column;gap:20px}
.interests{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.interests legend{padding:0;margin-bottom:12px;font-size:14px;font-weight:500;color:#3A3732}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip>span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid #CFC6B5;border-radius:999px;background:#F5F0E6;font-size:14px;font-weight:500;transition:background .2s,border-color .2s,color .2s}
.chip svg{width:0;height:16px;transition:width .2s}
.chip input:checked+span{background:#1C1B20;border-color:#1C1B20;color:var(--bone)}
.chip input:checked+span svg{width:16px}
.chip input:focus-visible+span{outline:2px solid var(--brass-deep);outline-offset:2px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:#3A3732}
.field input{height:52px;padding:0 16px;border:1px solid #CFC6B5;border-radius:14px;background:#FBF8F2;color:#1C1B20;font:400 16px var(--sans);transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#9A9488}
.field input:focus{outline:none;border-color:var(--brass-deep);box-shadow:0 0 0 3px rgba(212,169,83,.25)}
.note{padding:12px 16px;border-radius:14px;background:#E3DACA;color:#4A463F;font-size:14px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#57534C;cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#1C1B20}
.consent a{color:#1C1B20}
.form .btn{background:#1C1B20;border-color:#1C1B20;color:var(--bone)}
.form .btn:hover{background:#000;border-color:#000}
.status{padding:12px 16px;border-radius:14px;background:#1C1B20;color:var(--bone);font-size:14px}
.honeypot{position:absolute;left:-9999px}

/* footer */
.footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:14px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.footer-brand{font:400 22px/1 var(--serif);color:var(--text)}
.footer-meta a{color:var(--muted)}

/* plain pages (thank-you, privacy) */
.plain-main{width:min(680px,100% - 40px);margin:80px auto 120px}
.plain-main h1{font-family:var(--serif);font-size:clamp(40px,6vw,64px);line-height:1}
.plain-main p{margin-top:18px;color:var(--muted)}
.plain-main a{color:var(--brass)}

/* responsive */
@media (max-width:900px){
  .nav{display:none}
  .path-grid{grid-template-columns:1fr}
  .try-inner,.readers-inner,.wait-inner{grid-template-columns:1fr;gap:40px}
  .wait-inner{padding:32px 24px;border-radius:24px}
}
@media (max-width:560px){
  .hero{padding-top:56px}
  .top-actions .btn{display:none}
  .fan{margin-top:48px;height:250px}
  .fan-card{width:118px}
  .fan-0{transform:translateX(-50%) translateX(-112%) rotate(-12deg) translateY(24px)}
  .fan-1{transform:translateX(-50%) translateX(-40%) rotate(-4deg)}
  .fan-2{transform:translateX(-50%) translateX(40%) rotate(4deg)}
  .fan-3{transform:translateX(-50%) translateX(112%) rotate(12deg) translateY(24px)}
  .flips{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px}
  .steps,.fields{grid-template-columns:1fr}
  .paths,.try,.readers{padding:88px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}