/* Home screen */
/* ---------- home ---------- */
.home{flex:1;display:grid;align-content:center;gap:56px;padding:48px 0 64px}
.home-grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.home-grid{grid-template-columns:1.15fr .85fr;gap:72px}}
.hero h1{font-size:clamp(44px,8vw,84px);line-height:.95;letter-spacing:-.045em;font-weight:700;margin:22px 0 22px}
.hero h1 .serif{display:block;font-size:1.08em;background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.tagline{font-size:17px;color:var(--muted);max-width:440px}
.ticker-card{margin-top:32px;display:flex;align-items:center;gap:20px;padding:18px 22px;max-width:480px}
.ticker{position:relative;width:88px;height:72px;flex:none;overflow:hidden;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center}
.ticker span{position:absolute;font-size:40px;font-weight:700}
.ticker span.in{animation:rollIn .55s var(--ease) both}
.ticker span.out{animation:rollOut .45s var(--ease) both}
.ticker-q{font-size:15px;line-height:1.4;min-height:42px}
.ticker-q.swap{animation:fadeUp .5s var(--ease) both}
.panel{padding:28px;display:grid;gap:16px}
.panel h2{font-size:20px;letter-spacing:-.02em}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.join-row{display:flex;gap:10px}
.code-input{text-transform:uppercase;letter-spacing:.3em;font-weight:700;text-align:center}
.code-input::placeholder{letter-spacing:.2em;font-weight:500}
.how{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{padding:20px}
.step b{display:block;font-size:12px;color:var(--accent);letter-spacing:.08em;margin-bottom:10px}
.step p{font-size:14px;color:var(--muted)}
.step p strong{color:var(--text);font-weight:600}