/**
 * Structural layout: container, section rhythm, and the small set of
 * grid utilities individual components build on. Nothing here is a
 * generic 12-column framework — each grid is purpose-built in
 * components.css/home.css.
 */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.section {
	padding-block: var(--space-9);
}
.section--narrow .container,
.section--narrow.container {
	max-width: 880px;
}

@media (max-width: 768px) {
	.section { padding-block: var(--space-7); }
}

.section-heading {
	max-width: 640px;
	margin-bottom: var(--space-7);
}
.section-heading--left { margin-inline-end: auto; }
.section-heading__kicker {
	font-size: var(--fs-kicker);
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-700);
	margin-bottom: var(--space-2);
}
.section-heading__title { margin-bottom: var(--space-3); }
.section-heading__lede {
	font-size: var(--fs-body-lg);
	color: var(--color-text-muted);
}

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-2); }

.page-header { max-width: 760px; margin-bottom: var(--space-8); }
.page-header__kicker {
	font-size: var(--fs-kicker);
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-700);
	margin-bottom: var(--space-3);
}
.page-header__title { margin-bottom: var(--space-3); }
.page-header__lede { font-size: var(--fs-body-lg); color: var(--color-text-muted); }

.page-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}