:root {
	--bg: #fafaf8;
	--surface: #ffffff;
	--ink: #1a1a18;
	--ink-muted: #5a5a56;
	--ink-faint: #9a9a94;
	--accent: #106fde;
	--accent-light: #e1eeff;
	--rule: #e8e8e2;
	--font-body: 'DM Sans', system-ui, sans-serif;
}

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.75;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

.page {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px 120px;
}

header {
	padding: 64px 0 48px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 56px;
}

header h1 {
	font-family: var(--font-display);
	font-size: clamp(36px, 6vw, 52px);
	font-weight: 400;
	line-height: 1.12;
	color: var(--ink);
	margin-bottom: 20px;
}

.meta {
	font-size: 13px;
	color: var(--ink-faint);
	font-weight: 400;
	letter-spacing: 0.01em;
}

.intro-box {
	background: var(--accent-light);
	padding: 24px 28px;
	margin-bottom: 56px;
	border-radius: 6px;
}

.intro-box p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink);
}

.intro-box strong {
	font-weight: 600;
}

section {
	margin-bottom: 52px;
	padding-bottom: 52px;
	border-bottom: 1px solid var(--rule);
}

section:last-of-type {
	border-bottom: none;
}

h2 {
	font-family: var(--font-display);
	font-size: clamp(22px, 3.5vw, 28px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
	margin-bottom: 20px;
}

h3 {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	margin: 28px 0 10px;
	letter-spacing: 0.01em;
}

p {
	font-size: 15.5px;
	color: var(--ink-muted);
	margin-bottom: 16px;
	font-weight: 300;
}

p:last-child {
	margin-bottom: 0;
}

p strong {
	font-weight: 600;
	color: var(--ink);
}

ul {
	list-style: none;
	margin: 16px 0;
	padding: 0;
}

ul li {
	font-size: 15.5px;
	color: var(--ink-muted);
	font-weight: 300;
	padding: 6px 0 6px 24px;
	position: relative;
	border-bottom: 1px solid var(--rule);
}

ul li:last-child {
	border-bottom: none;
}

ul li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--accent);
	font-size: 13px;
	top: 7px;
}

ul li strong {
	font-weight: 600;
	color: var(--ink);
}

.no-list li::before {
	content: '✕';
	font-size: 11px;
	top: 9px;
	color: var(--ink-faint);
}

a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	-webkit-transition: border-color 0.15s;
	transition: border-color 0.15s;
}

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

code {
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 13px;
	background: #f0f0eb;
	color: var(--ink);
	padding: 2px 7px;
	border-radius: 4px;
	white-space: nowrap;
}

.cookie-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: 0.92em;
}

.cookie-table th,
.cookie-table td {
	border: 1px solid #d0d0d0;
	padding: 0.6em 0.85em;
	text-align: left;
	vertical-align: top;
}

.cookie-table th {
	background: #f5f5f5;
	font-weight: 600;
}

@media (max-width: 600px) {
	header {
		padding: 40px 0 36px;
	}

	section {
		margin-bottom: 40px;
		padding-bottom: 40px;
	}
}