/* The same printed-matter palette as the app: warm paper, ink, one red accent. */
:root {
  --paper: #fbf7f0;
  --paper-edge: #f4eee4;
  --ink: #1c1a17;
  --ink-soft: #6b645a;
  --ink-soft: #6b645b;
  --ink-faint: #a39a8d;
  --rule: #e4ddd0;
  --accent: #b23a2e;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 24px 64px;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 ui-serif, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 34rem; margin: 0 auto; }
header { text-align: center; padding: 56px 0 8px; }
h1 { font-size: 2.6rem; margin: 0; letter-spacing: -0.01em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 18px auto; width: 8rem; }
.tagline { color: var(--ink-soft); margin: 0; }
h2 { font-size: 1.25rem; margin: 40px 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--accent); }
.eyebrow {
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.card {
  background: var(--paper-edge); border-radius: 14px;
  padding: 22px; margin: 28px 0; text-align: center;
}
.code {
  font: 600 22px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em; word-break: break-all; margin: 10px 0 4px;
}
.button {
  display: inline-block; background: var(--ink); color: var(--paper);
  text-decoration: none; font: 600 16px/1 ui-sans-serif, system-ui, sans-serif;
  padding: 15px 22px; border-radius: 12px; margin-top: 10px;
}
.small { font-size: 13px; color: var(--ink-faint); }
footer {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule);
  font: 13px/1.6 ui-sans-serif, system-ui, sans-serif; color: var(--ink-faint);
}