:root {
	color-scheme: light;
	--legal-ink: #0f172a;
	--legal-copy: #475569;
	--legal-line: #d7deea;
	--legal-blue: #1747b5;
	--legal-blue-soft: #edf6ff;
	--legal-surface: rgba(255, 255, 255, 0.96);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background:
		radial-gradient(circle at 12% 8%, rgba(96, 165, 250, 0.2), transparent 34%),
		radial-gradient(circle at 88% 18%, rgba(251, 191, 36, 0.15), transparent 30%),
		linear-gradient(135deg, #f7fbff, #fff8ed);
	color: var(--legal-ink);
	line-height: 1.7;
}

.legal-shell {
	width: min(100% - 32px, 920px);
	margin: 0 auto;
	padding: 36px 0 52px;
}

.legal-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	color: var(--legal-blue);
	font-weight: 800;
	text-decoration: none;
}

.legal-back:hover,
.legal-back:focus-visible {
	text-decoration: underline;
}

.legal-card {
	padding: clamp(24px, 5vw, 48px);
	background: var(--legal-surface);
	border: 1px solid var(--legal-line);
	border-radius: 22px;
	box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
}

.legal-header {
	max-width: 760px;
	margin: 0 auto 32px;
	text-align: center;
}

.legal-badge {
	display: inline-flex;
	padding: 6px 11px;
	border: 1px solid #bfdbfe;
	border-radius: 999px;
	background: var(--legal-blue-soft);
	color: var(--legal-blue);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

h1,
h2 {
	color: var(--legal-ink);
	text-wrap: balance;
}

h1 {
	margin: 14px 0 12px;
	font-size: clamp(2.25rem, 7vw, 3.25rem);
	line-height: 1.04;
}

.legal-intro {
	max-width: 68ch;
	margin: 0 auto;
	font-size: 1.05rem;
}

.legal-updated {
	margin: 12px 0 0;
	font-size: 0.86rem;
	font-weight: 700;
}

.legal-section {
	margin-top: 16px;
	padding: 22px 24px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
}

.legal-section h2 {
	margin: 0 0 8px;
	font-size: 1.2rem;
	line-height: 1.25;
}

.legal-section p,
.legal-section ul {
	margin-top: 8px;
	margin-bottom: 0;
	color: var(--legal-copy);
}

.legal-section ul {
	padding-left: 22px;
}

.legal-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid #e2e8f0;
	text-align: center;
}

.legal-footer a {
	color: var(--legal-blue);
	font-weight: 800;
}

@media (max-width: 560px) {
	.legal-shell {
		width: min(100% - 20px, 920px);
		padding-top: 20px;
	}

	.legal-card {
		border-radius: 16px;
	}

	.legal-section {
		padding: 18px;
	}
}