@layer page {
	:root {
		--color-arrow: var(--color-dark-gray-1);
		--landmark-header-background-color: var(--color-light-gray-1);
		--landmark-header-foreground-color: var(--color-dark-gray-1);
		--nav-background-color: var(--color-light-gray-1);
		--nav-foreground-color: var(--color-dark-gray-1);
	}

	.legal-page article {
		padding-block-end: var(--space-2xl);
	}
	
	.legal-page article > header {
		background-color: var(--legal-header-background-color);
		color: var(--legal-header-foreground-color);
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
		padding-block-end: var(--space-xs);
	}
	
	.legal-page article section {
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
		padding-block: var(--legal-section-padding-block, var(--space-m));
	}

	.legal-page article section:first-of-type {
		padding-block-start: var(--space-xl);
	}
	
	.legal-page article > :not(section, header),
	.legal-page article > header > *,
	.legal-page article > section > *,
	.legal-page article > section > section > * {
		grid-column: var(--main-content-grid-column);
	}
	
	.legal-page article h1 {
		margin-block-end: 1rem;
	}
	
	.legal-page h2 {
		font-size: var(--step-2);
	}
}