:root {
  --paper: #fbf8f3;
  --ink: #23201c;
  --dim: #6f675c;
  --line: #e2dcd2;
  --accent: #c2572b;
  --accent-ink: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1c1a17; --ink: #ece6dc; --dim: #a39886; --line: #3a352e; --accent: #e08a5e; --accent-ink: #1c1a17; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 system-ui, sans-serif; }
main { max-width: 36rem; margin: 0 auto; padding: 4rem 1rem; }
h1 { font-size: 2.25rem; line-height: 1.2; margin: 0 0 1rem; }
.lead { font-size: 1.25rem; color: var(--dim); margin: 0 0 2rem; }
.points { padding-left: 1.2rem; margin: 0 0 2rem; }
.points li { margin-bottom: .5rem; }
a { color: var(--accent); }
.button { display: inline-block; padding: .65rem 1.25rem; border-radius: 6px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.signup { margin-top: 2.5rem; }
.signup label { display: block; color: var(--dim); margin-bottom: .5rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row input { flex: 1 1 14rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; }
.row button { padding: .6rem 1.1rem; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.away { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }