/* billie. web — the board: dark, chalk text, ginger only for the brand. */
:root {
  --board: #17201D; --surface: #1C2622; --ink: #F1EFE6; --ink-2: rgba(241,239,230,.6); --ink-3: rgba(241,239,230,.32);
  --hairline: rgba(241,239,230,.12); --brand: #FF8A3D; --free: #F3D35B; --on-ink: #17201D;
  --orange: #2C1E17; --violet: #221C33; --green: #1B2A23; --pink: #2A1823; --blue: #18223A; --yellow: #29261A;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--board); color: var(--ink); -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: center; min-height: 100dvh; padding: 0 16px;
  transition: background .4s ease;
}
main { width: 100%; max-width: 440px; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0 32px; }
.wordmark { font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-weight: 900; font-size: 34px; letter-spacing: -.02em; margin: 0 0 40px; }
.wordmark span, .brand { color: var(--brand); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
h1 { font-family: system-ui, sans-serif; font-weight: 900; font-stretch: condensed; text-transform: uppercase; font-size: clamp(40px, 12vw, 58px); line-height: .95; letter-spacing: -.01em; margin: 0 0 14px; overflow-wrap: anywhere; }
.lead { font-size: 17px; line-height: 1.45; color: var(--ink-2); margin: 0 0 32px; }
.button { display: block; width: 100%; text-align: center; text-decoration: none; font-weight: 700; font-size: 17px; padding: 16px 20px; border-radius: 999px; min-height: 44px; }
.primary { background: var(--ink); color: var(--on-ink); }
.secondary { margin-top: 12px; color: var(--ink); border: 1.5px solid rgba(241,239,230,.22); }
.backup { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.code { display: inline-block; margin-top: 8px; font: 700 22px/1 ui-monospace, "SF Mono", monospace; letter-spacing: .14em; color: var(--ink); padding: 10px 14px; border-radius: 10px; background: rgba(241,239,230,.08); user-select: all; -webkit-user-select: all; }
footer { width: 100%; max-width: 440px; padding: 0 0 28px; color: var(--ink-3); font-size: 13px; }