/* ════════════════════════════════════════════════════════════
   Legal / Privacy page — long-form policy content.
   White page, brand red as the sole accent, generous editorial measure.
   Reuses the global tokens (base.css :root) so it matches the rest of the site.
   ════════════════════════════════════════════════════════════ */

.legal-page {
	--legal-ink: #16161a;
	--legal-body: rgba(22, 22, 26, 0.78);
	--legal-muted: #6b6b73;
	--legal-line: #e6e6ea;
	--legal-red: var(--primary-red, #dc1f3e);
	--legal-measure: 760px;
	background: #fff;
	color: var(--legal-ink);
	font-family: var(--font-family, "Inter", sans-serif);
	-webkit-font-smoothing: antialiased;
	padding-left: max(var(--section-padding, 100px), calc((100% - 1200px) / 2));
	padding-right: max(var(--section-padding, 100px), calc((100% - 1200px) / 2));
	padding-bottom: clamp(80px, 10vw, 140px);
}

/* ─── Header ──────────────────────────────────────── */
.legal-head {
	padding-top: calc(var(--header-h, 124px) + clamp(40px, 6vw, 80px));
	padding-bottom: clamp(32px, 4vw, 56px);
	border-bottom: 1px solid var(--legal-line);
	margin-bottom: clamp(40px, 5vw, 64px);
}

.legal-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--legal-red);
	margin-bottom: clamp(16px, 2vw, 22px);
}

.legal-title {
	font-size: clamp(38px, 6vw, 72px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--legal-ink);
	margin: 0;
}

.legal-subtitle {
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--legal-muted);
	margin: clamp(12px, 1.4vw, 18px) 0 0;
}

/* Meta row: effective date / last updated / website. */
.legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 64px);
	margin: clamp(28px, 3.5vw, 44px) 0 0;
}

.legal-meta__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.legal-meta dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--legal-muted);
}

.legal-meta dd {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--legal-ink);
}

/* ─── Body copy ───────────────────────────────────── */
.legal-body {
	max-width: var(--legal-measure);
}

.legal-lead {
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--legal-ink);
	margin: 0 0 clamp(40px, 5vw, 64px);
}

.legal-section {
	padding-top: clamp(28px, 3.2vw, 44px);
}

.legal-section + .legal-section {
	border-top: 1px solid var(--legal-line);
}

.legal-section h2 {
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--legal-ink);
	margin: 0 0 clamp(16px, 1.8vw, 22px);
}

.legal-section h3 {
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--legal-ink);
	margin: clamp(22px, 2.4vw, 30px) 0 clamp(10px, 1.2vw, 14px);
}

.legal-section p {
	font-size: clamp(15px, 1.15vw, 17px);
	font-weight: 400;
	line-height: 1.72;
	color: var(--legal-body);
	margin: 0 0 clamp(14px, 1.4vw, 18px);
}

.legal-section p:last-child {
	margin-bottom: 0;
}

.legal-section strong {
	font-weight: 600;
	color: var(--legal-ink);
}

/* Lists: red bullet dot to match the brand accent. */
.legal-section ul {
	list-style: none;
	margin: 0 0 clamp(14px, 1.4vw, 18px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(9px, 1vw, 12px);
}

.legal-section li {
	position: relative;
	padding-left: 1.4em;
	font-size: clamp(15px, 1.15vw, 17px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--legal-body);
}

.legal-section li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--legal-red);
}

/* Links: brand red with an underline on hover. */
.legal-page a {
	color: var(--legal-red);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.legal-page a:hover {
	border-bottom-color: var(--legal-red);
}

/* ─── Contact block (section 16) ──────────────────── */
.legal-contact {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.6vw, 18px);
}

.legal-contact__row {
	display: grid;
	grid-template-columns: minmax(120px, 160px) 1fr;
	gap: clamp(12px, 2vw, 28px);
	align-items: baseline;
	padding-bottom: clamp(14px, 1.6vw, 18px);
	border-bottom: 1px solid var(--legal-line);
}

.legal-contact__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.legal-contact dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--legal-muted);
}

.legal-contact dd {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.55;
	color: var(--legal-ink);
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
	.legal-contact__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}