/* Do10 invite page. Look: docs/DESIGN.md (dark-first, the ring, color belongs to people). */
/* The brand fonts, served from this site (SIL Open Font License; see fonts/LICENSE.txt). */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url('/fonts/BricolageGrotesque_800ExtraBold.ttf') format('truetype'); }
@font-face { font-family: Figtree; font-weight: 400; font-display: swap; src: url('/fonts/Figtree_400Regular.ttf') format('truetype'); }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url('/fonts/Figtree_700Bold.ttf') format('truetype'); }
:root {
  --ground: #0e0f14;
  --surface: #181a22;
  --line: #2a2d3a;
  --text: #f5f6fa;
  --muted: #a6abbd;
  --you: #3EE6A8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--text);
  font: 400 1.1875rem/1.45 Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
}
main {
  width: 100%;
  max-width: 35rem;
  padding: 2rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* The do1o wordmark, as in the app (src/ui/Wordmark.tsx): the ring is the final "o", sized to
   the letters' x-height and sitting on their baseline. */
.brand { display: flex; align-items: baseline; font: 800 2.25rem/1.1 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -0.02em; }
.brand svg { width: 0.56em; height: 0.56em; margin-left: 0.03em; }
.hero { display: flex; justify-content: center; padding: 1rem 0 0.25rem; }
.hero svg { width: 9.5rem; height: 9.5rem; }
h1 { margin: 0; font: 800 2.25rem/1.15 'Bricolage Grotesque', system-ui, sans-serif; text-align: center; text-wrap: balance; }
p { margin: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 2rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.card h2 { margin: 0; font: 800 1.6rem/1.2 'Bricolage Grotesque', system-ui, sans-serif; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 0.9rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; align-items: start; }
.steps li::before { content: counter(step); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--line); display: grid; place-items: center; font-weight: 700; }
.code { font: 800 2.25rem/1.2 'Bricolage Grotesque', ui-monospace, monospace; letter-spacing: 0.08em; text-align: center; padding: 0.25rem 0; user-select: all; }
.button { display: flex; align-items: center; justify-content: center; min-height: 4rem; padding: 1rem 1.5rem; border-radius: 1.5rem; font: 800 1.3125rem/1.2 'Bricolage Grotesque', system-ui, sans-serif; text-decoration: none; text-align: center; }
.button.primary { background: var(--you); color: var(--ground); }
.button.secondary { background: #22252f; color: var(--text); }
.button:focus-visible { outline: 3px solid #5bb8ff; outline-offset: 3px; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.spacer { flex: 1; }
footer { color: var(--muted); font-size: 1rem; text-align: center; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .hero svg { animation: settle 0.6s ease-out both; }
  @keyframes settle { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
}