/* Legal / policy pages — Privacy Policy (Figma 33535-18603 desktop, 33538-19239 mobile).
 * The section root carries cmp-aero-twocol for the archetype's mobile rhythm
 * (60px vertical / spacing-40 = 20px horizontal at 430 — exactly the mobile
 * artboard's 60/20). Only the deltas the mobile artboard specifies live here;
 * desktop is fully expressed by block attributes. */
@media (max-width: 781px) {
	/* Mobile artboard has no 48px column inset (33538:19241 starts at x=20) */
	.cmp-legal .cmp-legal-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Heading -> body gap 24 (33538:19240 itemSpacing), desktop is 32 */
	.cmp-legal .cmp-legal-inner > * + * {
		margin-block-start: 24px !important;
	}
	/* Headline mobile: 700 / letter-spacing 0 (33538:19246); desktop 600 / -0.03em */
	.cmp-legal h1 {
		font-weight: 700 !important;
		letter-spacing: 0 !important;
	}
	/* Body strong mobile: line-height 1.4 (33538:19248); the blank-line paragraph
	 * gap is one line, so the em-based blockGap follows the line-height */
	.cmp-legal .cmp-legal-body p {
		line-height: 1.4 !important;
	}
	.cmp-legal .cmp-legal-body > * + * {
		margin-block-start: 1.4em !important;
	}
}

/* External markup round pin 90 (2026-09-10) — "this is too bright /
 * distracting" on the cookie policy's link runs.
 *
 * The links ship in theme-03 (#0F5B99). On the near-black panel the hue, not
 * the brightness, is what pulls the eye: a legal page carries several bare
 * URLs inside dense paragraphs, so every one of them reads as a saturated blue
 * interruption. Dropping the hue and keeping the underline leaves the
 * affordance intact and the paragraph calm. The bright blue moves to hover, so
 * the accent still appears on interaction — same #1897FF the eyebrows and the
 * timeline years use (cmp-accents.css).
 *
 * Scoped to .cmp-legal, so privacy policy, terms and cookie policy all follow
 * and no other page's links change.
 */
.cmp-legal .cmp-legal-body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 160ms ease;
}

.cmp-legal .cmp-legal-body a:hover,
.cmp-legal .cmp-legal-body a:focus-visible {
	color: var(--cmp-accent-blue, #1897ff);
}

/* Mobile audit 2026-09-15, H7: the CCPA disclosure table has four columns, so
 * at 390px the browser squeezed each to ~80px and broke words mid-way
 * ("Categor / y"), running the table to ~7,800px tall. Core's figure already
 * scrolls sideways; the table just needs a floor width so the columns keep
 * their shape. Two-column tables still fit and are left alone. */
@media (max-width: 781px) {
	.cmp-legal .cmp-legal-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-color: var(--cmp-accent-blue, #1897ff) transparent;
	}

	.cmp-legal .cmp-legal-table table:has(tr > :nth-child(4)) {
		min-width: 640px;
	}

	.cmp-legal .cmp-legal-table:has(tr > :nth-child(4))::before {
		content: "Scroll sideways to see every column";
		display: block;
		margin-bottom: 8px;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		text-transform: uppercase;
		color: var(--cmp-accent-blue, #1897ff);
	}
}