:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #5d6873;
  --paper: #f7f5ef;
  --accent: #246b5a;
  --accent-dark: #17483d;
  --line: #d9d7cf;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top right, #dceee7, transparent 42%), var(--paper);
  color: var(--ink);
  font: 18px/1.65 Georgia, "Times New Roman", serif;
}

.shell {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 12vh 0 8vh;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font: 700 0.78rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2 { line-height: 1.15; }
h1 { max-width: 680px; margin: 0 0 1.25rem; font-size: clamp(2.7rem, 7vw, 5.2rem); }
h2 { margin-top: 2.5rem; font-size: 1.55rem; }
.intro { max-width: 590px; color: var(--muted); font-size: 1.25rem; }
.muted { color: var(--muted); font: 0.9rem system-ui, sans-serif; }
.actions { margin: 2.5rem 0 7rem; }
.button { display: inline-block; padding: 0.8rem 1.2rem; border-radius: 999px; background: var(--accent); color: white; font: 700 0.95rem system-ui, sans-serif; text-decoration: none; }
.button:hover { background: var(--accent-dark); }
.prose { max-width: 700px; }
.prose h1 { font-size: clamp(2.7rem, 7vw, 4.4rem); }
.prose p { max-width: 680px; }
a { color: var(--accent-dark); }
footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font: 0.82rem system-ui, sans-serif; }

@media (max-width: 520px) {
  body { font-size: 17px; }
  .shell { width: min(100% - 28px, 760px); padding-top: 8vh; }
  .actions { margin-bottom: 5rem; }
  footer { flex-direction: column; }
}