:root { --bg: #000; --fg: #f2f2f0; --dim: #a3a3a0; --line: #262626; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--fg); text-underline-offset: 3px; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; }
header { padding: 28px 0; }
header a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
header svg { width: 30px; height: 30px; }
.wordmark { font-size: 13px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
main { padding: 64px 0 80px; }
.hero svg { width: 88px; height: 88px; margin-bottom: 40px; }
h1 { margin: 0 0 24px; font-size: clamp(30px, 6vw, 44px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
h2 { margin: 56px 0 12px; font-size: 21px; line-height: 1.3; font-weight: 600; }
h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 600; }
p, li { color: #d9d9d6; }
.lead { font-size: 19px; color: var(--fg); }
ul { padding-left: 20px; }
.meta { color: var(--dim); font-size: 15px; }
footer { border-top: 1px solid var(--line); padding: 28px 0 44px; color: var(--dim); font-size: 14px; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; }
footer a { color: var(--dim); }