@layer components {
	.legal-hero__content {
		padding-block-start: 46px;
		display: grid;
		gap: 16px;
	}
	.legal-hero__title {
		max-inline-size: 26ch;
		font-size: clamp(2rem, 1.7rem + 1.5cqi, 3.375rem);
	}
	.legal-hero__meta {
		display: flex;
		gap: 28px;
		flex-wrap: wrap;
		padding-block: 6px 30px;
		font-weight: 600;
		font-size: 12.5px;
		color: oklch(100% 0 0 / 50%);
	}
	.legal-tabs {
		display: flex;
		gap: 2px;
		align-items: flex-end;
	}
	.legal-tab {
		border: none;
		font-weight: 700;
		font-size: 14.5px;
		padding-inline: 24px;
		block-size: 52px;
		display: grid;
		place-items: center;
		background: oklch(100% 0 0 / 8%);
		color: oklch(100% 0 0 / 70%);

		&:hover {
			color: var(--on-dark);
		}
		&.legal-tab--active {
			background: var(--paper);
			color: var(--ink);
		}
	}

	.legal-body {
		padding-block: 52px 64px;
		display: grid;
		grid-template-columns: minmax(230px, 0.34fr) minmax(500px, 1fr);
		gap: 52px;
		align-items: start;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.legal-toc {
		position: sticky;
		inset-block-start: 20px;
		display: grid;
		gap: 14px;
		align-content: start;

		@media (width <= 1023px) {
			position: static;
		}
	}
	.legal-toc__label {
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ink-3);
		border-block-end: 1px solid var(--line);
		padding-block-end: 12px;
	}
	.legal-toc__list {
		display: grid;
	}
	.legal-toc__list a {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 12px;
		align-items: baseline;
		padding-block: 9px;
		color: var(--ink-2);
		font-size: 14.5px;
		line-height: 1.4;
		border-block-end: 1px solid var(--line);

		&:hover {
			color: var(--signal);
		}
	}
	.legal-toc__num {
		font-weight: 700;
		font-size: 12px;
		color: var(--signal);
		font-variant-numeric: tabular-nums;
	}
	.legal-toc__contact {
		background: var(--void);
		color: var(--on-dark);
		padding: 20px;
		display: grid;
		gap: 10px;
		margin-block-start: 8px;
	}
	.legal-toc__contact-label {
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--signal-l);
	}
	.legal-toc__contact a {
		color: var(--on-dark);

		&:hover {
			color: var(--signal-l);
		}
	}
	.legal-toc__phone {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 21px;
		letter-spacing: -0.02em;
	}

	.legal-sections {
		background: var(--card);
		border: 1px solid var(--line);
		padding: 8px 38px 34px;
		font-size: 16px;
		line-height: 1.75;
		color: var(--ink-2);

		@media (width <= 767px) {
			padding: 8px 20px 24px;
		}

		h2 {
			font-family: var(--disp);
			font-weight: 800;
			font-size: 25px;
			line-height: 1.1;
			letter-spacing: -0.03em;
			color: var(--ink);
			margin: 0;
			padding-block: 34px 14px;
			border-block-start: 1px solid var(--line);
			scroll-margin-block-start: 20px;
			text-wrap: pretty;

			&:first-child {
				border-block-start: none;
			}
		}
		.legal-num {
			display: inline-block;
			color: var(--signal);
			font-variant-numeric: tabular-nums;
			margin-inline-end: 16px;
		}
		p {
			margin: 0 0 1em;
			max-inline-size: 74ch;
		}
		ul {
			margin: 4px 0 1.2em;
			padding: 0;
			list-style: none;
			display: grid;
			gap: 10px;
			border-inline-start: 3px solid var(--signal);
			padding-inline-start: 20px;

			li {
				font-size: 15.5px;
				line-height: 1.65;
				max-inline-size: 70ch;
			}
		}
	}

	.legal-other {
		background: var(--card);
		border-block: 1px solid var(--line);
		padding-block: 48px;
	}
	.legal-other__note {
		font-weight: 600;
		font-size: 12.5px;
		color: var(--ink-3);
	}
	.legal-other__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: var(--line);
		border: 1px solid var(--line);

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}
	.legal-other__card {
		background: var(--card);
		padding: 24px;
		display: grid;
		gap: 9px;
		align-content: start;
		color: var(--ink);

		&:hover {
			background: var(--paper);
			color: var(--ink);
		}
		&.legal-other__card--active {
			background: var(--paper);
		}
	}
	.legal-other__meta {
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--signal);
	}
	.legal-other__label {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 21px;
		letter-spacing: -0.02em;
		color: var(--ink);
	}
}