:root {
  color-scheme: light dark;
  --canvas: #f7f4f2;
  --ink: #221b26;
  --panel: #ffffff;
  --push: #ff4d2e;
  --link: #b92812;
  --recover: #0d2f38;
  --recover-text: #dff3f7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

main {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 96px;
}

.eyebrow {
  color: #6e6870;
  font: 700 13px/1.2 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1 {
  margin: 12px 0 24px;
  font-size: clamp(42px, 8vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
}

h2 { margin-top: 40px; line-height: 1.2; }
a { color: var(--link); font-weight: 700; }

.card {
  margin: 32px 0;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 24px;
  background: var(--panel);
}

.action {
  display: inline-block;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--push);
  color: #171116;
  text-decoration: none;
}

nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; }
footer { margin-top: 64px; color: #6e6870; font-size: 14px; }

@media (prefers-color-scheme: dark) {
  :root { --canvas: #15111a; --ink: #f7f4f2; --panel: #1f1926; --link: #ff806a; }
  .eyebrow, footer { color: #aaa2ac; }
}