:root { --bg: #f5f6f7; --fg: #12161b; --muted: #5f6873; --line: #dde1e6; --field: #ffffff; --accent: #2f5bd3; --on-accent: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1216; --fg: #e8ebef; --muted: #8b95a1; --line: #232931; --field: #161a20; --accent: #7d9bf0; --on-accent: #0f1216; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  padding: 64px 20px 32px;
}
main, footer { max-width: 720px; margin: 0 auto; }
a { color: var(--fg); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.intro { display: flex; align-items: center; gap: 18px; }
.mark { flex: none; width: 56px; height: 56px; fill: none; stroke: var(--accent); stroke-width: 2.5; }
h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.role { color: var(--muted); margin-top: 6px; font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .02em; text-transform: uppercase; }

.lead { margin-top: 40px; font-size: clamp(1.15rem, 3.4vw, 1.35rem); line-height: 1.5; }

.offer { list-style: none; display: grid; gap: 28px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.offer h2 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.offer p { color: var(--muted); font-size: 15px; }
@media (min-width: 720px) { .offer { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.contact { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.contact h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.row { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .row { grid-template-columns: 1fr 1fr; } }
label { display: block; margin-top: 16px; font-size: 15px; color: var(--muted); }
.hint { font-size: 13px; }
input, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; color: var(--fg); background: var(--field);
  border: 1px solid var(--line); border-radius: 6px;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
textarea { resize: vertical; }
button {
  margin-top: 24px; padding: 12px 28px; font: inherit; font-weight: 500; cursor: pointer;
  color: var(--on-accent); background: var(--accent); border: 0; border-radius: 6px;
}
button:disabled, form[aria-busy] button { opacity: .5; cursor: progress; }
.error { margin-top: 16px; color: var(--accent); }

.page h1 { font-size: 2rem; margin-bottom: 24px; }
.page h2 { font-size: 1.1rem; margin: 28px 0 8px; }
.page p { color: var(--muted); }
.thanks { min-height: 60vh; display: grid; align-content: center; gap: 16px; }
.thanks p { color: var(--muted); }

footer { margin-top: 72px; font-size: 13px; color: var(--muted); }
footer a { color: var(--muted); }

/* Wordmark: "nu" bold, "age" thin. */
.brand { font-weight: 300; }
h1.brand { font-weight: 200; }
.brand b { font-weight: 700; }