:root {
	color-scheme: light dark;
	--bg: #f8f5f1;
	--surface: #fffdf9;
	--text: #1f1d1a;
	--muted: #6e6a64;
	--border: #e8e2da;
	--accent: #2e4b43;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #131313;
		--surface: #1b1b1b;
		--text: #f1efe9;
		--muted: #a7a29b;
		--border: #2c2c2c;
		--accent: #cfe1da;
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family:
		"SF Pro Text",
		"SF Pro Display",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}

a {
	color: var(--accent);
}

.page {
	width: min(780px, 100%);
	margin: 0 auto;
	padding: 32px 20px 56px;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 28px;
	padding: 24px;
}

.eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

h1 {
	margin: 0;
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1.1;
}

.subtitle {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 17px;
}

.meta {
	margin-top: 10px;
	color: var(--muted);
	font-size: 13px;
}

section {
	margin-top: 22px;
}

h2 {
	margin: 0 0 8px;
	font-size: 18px;
}

p,
li {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

section > p + p {
	margin-top: 8px;
}

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