/*
 * TOS page + hero (spec §4.5 "TOS hero", §4.18) [M computed] [M js:e09c7623]. Page wrapper gray-50. Hero #222, white,
 * pt 96 / pb 64 at every width; glow opacity 0.7, radial(circle at top, orange/0.4, transparent 60%).
 * Plan fix 2: pt = max(96, header + 16), so the stripe and H1 are never under the fixed header (live clipped them;
 * without the notice bar 96 already clears the 64/80 header, with it the padding grows by exactly the overlap).
 */
.tos-page { background-color: var(--color-gray-50); }
.tos-hero {
	position: relative;
	overflow: hidden;
	padding-top: max(calc(var(--spacing) * 24), calc(var(--header-h) + 1rem));
	padding-bottom: calc(var(--spacing) * 16);
	background-color: var(--color-brand-dark);
	color: var(--color-white);
}
.tos-hero__glow { position: absolute; inset: 0; opacity: 0.7; background-image: radial-gradient(circle at top, var(--color-orange-40a), transparent 60%); }
.tos-hero__grid { position: relative; display: grid; gap: calc(var(--spacing) * 10); }
@media (min-width: 64rem) {
	.tos-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.tos-hero__main { grid-column: span 7 / span 7; }
	.tos-hero__aside { grid-column: span 5 / span 5; }
}
/* Left column space-y 24: stripe 64, H1 36 → 48 (768) bold leading-tight, lead 18/28 white/0.8 max-w 768, meta 14/20 white/0.7 */
.tos-hero__main > * + * { margin-top: calc(var(--spacing) * 6); }
.tos-hero__title { font-size: var(--text-4xl); line-height: var(--leading-tight); font-weight: var(--font-weight-bold); }
@media (min-width: 48rem) { .tos-hero__title { font-size: var(--text-5xl); } }
.tos-hero__lead { max-width: var(--container-3xl); font-size: var(--text-lg); line-height: var(--text-lg-lh); color: var(--color-white-80); }
.tos-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-white-70); }
.tos-hero__updated { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); }

/* Rechtspersoon card: white/0.1, border white/0.2, radius 16, p 24, blur 8. 430×206 at 1440 */
.tos-entity {
	padding: calc(var(--spacing) * 6);
	border: 1px solid var(--color-white-20);
	border-radius: var(--radius-2xl);
	background-color: var(--color-white-10);
	-webkit-backdrop-filter: blur(var(--blur-sm));
	backdrop-filter: blur(var(--blur-sm));
}
.tos-entity__head { display: flex; align-items: center; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 5); }
.tos-entity__shield { flex-shrink: 0; color: var(--color-bar-yellow); }
.tos-entity__title { font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: var(--font-weight-semibold); }
.tos-entity__list { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-white-80); }
.tos-entity__name { font-weight: var(--font-weight-semibold); color: var(--color-white); }
.tos-entity__row--address { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 1); }
.tos-entity__row--address .tos-entity__icon { flex-shrink: 0; margin-top: calc(var(--spacing) * 0.5); }
.tos-entity__dd { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
.tos-entity__icon--blue { color: var(--color-bar-blue); }
.tos-entity__icon--yellow { color: var(--color-bar-yellow); }
.tos-entity__link { text-decoration: underline; text-decoration-color: var(--color-white-30); transition: color var(--duration-fast) var(--ease-default); }
.tos-entity__link:hover { color: var(--color-white); }
/* Registration rows (new, BW 3:15d) [D: anchor = this card: its white/0.2 border as the divider, 14/20, labels at the
   lead's white/0.7, values white; label | value side by side like a receipt, wrapping when narrow]. */
.tos-entity__reg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 calc(var(--spacing) * 3); }
.tos-entity__reg--first { margin-top: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 4); border-top: 1px solid var(--color-white-20); }
.tos-entity__reg dt { color: var(--color-white-70); }
.tos-entity__reg dd { color: var(--color-white); }