/* ==========================================================================
   Section: Terms / Legal hero. Ported verbatim from terms-styles.css.
   ========================================================================== */

.legal-hero { padding: 150px 0 0; background: var(--bg-alt); position: relative; overflow: hidden; }
.legal-hero::before {
	content:''; position: absolute; top: -140px; right: -90px; width: 520px; height: 520px;
	background: radial-gradient(circle, rgba(24,173,231,0.09), transparent 64%); pointer-events: none;
}
.legal-hero .container { position: relative; }
.legal-hero h1 { font-size: clamp(38px, 4.6vw, 60px); margin-top: 18px; }
.legal-updated {
	display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
	font-size: 13.5px; color: var(--muted); font-family: var(--body-font);
	background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 7px 16px; box-shadow: var(--shadow-sm);
}
.legal-updated::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.legal-intro {
	font-size: 19px; color: var(--body); max-width: 760px; margin-top: 28px; padding-bottom: 44px;
	line-height: 1.6;
}

@media (max-width: 560px) {
	.legal-hero { padding-top: 120px; }
}