/**
 * Component: Legal Page — styles
 * Scoped to .legal-page (BEM root). All rules confined to this component — no
 * global/site-wide selectors. Site-wide tokens from style.css via var(--*).
 *
 * Layout: a dark-bg prose container with a readable measure (max-width 760px,
 * centered). Body elements (h2/h3/p/ul/ol/a/strong) are styled under
 * .legal-page__content so editor-authored content reads cleanly on the dark
 * theme. Static — no motion, so no prefers-reduced-motion block.
 */

.legal-page {
	box-sizing: border-box;
	/* Fill at least the space between the global header and footer, so short
	   pages (e.g. an empty Terms page) still push the footer to the viewport
	   bottom instead of collapsing. Long content grows past this and scrolls. */
	min-height: calc(100dvh - var(--apt-chrome-h, 0px));
	background-color: var(--color-bg); /* #020216 */
	padding: clamp(64px, 10vh, 120px) clamp(24px, 8vw, 128px);
}

.legal-page__inner {
	max-width: 760px; /* readable measure */
	margin-inline: auto;
}

/* ── Title (h1) ───────────────────────────────────────────────── */
.legal-page__title {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-text-pri); /* white */
	margin: 0 0 var(--space-2xl); /* 0 0 32px */
}

/* ── Body prose ───────────────────────────────────────────────── */
.legal-page__content {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--text-body-lg); /* 1.125rem */
	line-height: 1.7;
	color: var(--color-text-sec); /* #b3b3b9 */
}

.legal-page__content > :first-child {
	margin-top: 0;
}

.legal-page__content h2 {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-text-pri);
	margin: 2em 0 0.6em;
}

.legal-page__content h3 {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--color-text-pri);
	margin: 1.6em 0 0.5em;
}

.legal-page__content p {
	margin: 0 0 1.2em;
}

.legal-page__content ul,
.legal-page__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.5em;
}

.legal-page__content li {
	margin-bottom: 0.5em;
}

.legal-page__content a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.legal-page__content a:hover {
	color: var(--color-brand-shade);
}

.legal-page__content a:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
	border-radius: 2px;
}

.legal-page__content strong {
	color: var(--color-text-pri);
	font-weight: 700;
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.legal-page {
		padding: 56px var(--space-xl); /* 56px 24px */
	}

	.legal-page__content {
		font-size: var(--text-body); /* 1rem */
	}
}