/* Page frame, sections, grids and the type roles shared across blocks. */

.ae-wrap {
	width: 100%;
	max-width: calc(var(--ae-content-max) + 2 * var(--ae-gutter));
	margin-inline: auto;
	padding-inline: var(--ae-gutter);
}

.ae-section {
	padding-block: var(--ae-section-pad);
}

.ae-section--muted {
	background: var(--ae-surface-muted);
}

.ae-section--inverse {
	background: var(--ae-surface-inverse);
	color: var(--ae-text-inverse);
}

/* Grids: desktop column count, collapsing on tablet/mobile. */

.ae-cols-2,
.ae-cols-3,
.ae-cols-4 {
	display: grid;
	gap: 16px;
}

.ae-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ae-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ae-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Heading + intro paragraph pair: "1.1fr 0.9fr" / "1fr" / "1fr". */
.ae-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--ae-split-gap, 44px);
	align-items: end;
	margin-bottom: var(--ae-section-gap);
}

/* Inner pages use a single gap scale (desktop / tablet / mobile: 64 / 44 / 36) for splits and section titles. */
.ae-page--inner {
	--ae-section-gap: 64px;
	--ae-split-gap: 64px;
}

@media (max-width: 1279px) {
	.ae-page--inner {
		--ae-section-gap: 44px;
		--ae-split-gap: 44px;
	}
}

@media (max-width: 640px) {
	.ae-page--inner {
		--ae-section-gap: 36px;
		--ae-split-gap: 36px;
	}
}

.ae-section--flush-top {
	padding-top: 0;
}

.ae-section--flush-bottom {
	padding-bottom: 0;
}

/* FAQ and legal pages use a tighter vertical rhythm: section padding desktop / tablet / mobile: 120 / 80 / 48. */
.ae-page--compact {
	--ae-section-pad: 120px;
}

@media (max-width: 1279px) {
	.ae-page--compact {
		--ae-section-pad: 80px;
	}
}

@media (max-width: 640px) {
	.ae-page--compact {
		--ae-section-pad: 48px;
	}
}

/* Section heading without an intro paragraph. */
.ae-section__title {
	max-width: 1100px;
	margin-bottom: var(--ae-section-gap);
}

@media (max-width: 1279px) {
	.ae-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ae-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.ae-cols-2,
	.ae-cols-3,
	.ae-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Type roles */

.ae-display-home,
.ae-display-program,
.ae-display-about,
.ae-display-page,
.ae-h2,
.ae-h2-small {
	font-weight: 300;
	text-transform: uppercase;
	text-wrap: pretty;
}

.ae-display-home {
	font-size: var(--ae-fs-display-home);
	line-height: 1;
}

.ae-display-program {
	font-size: var(--ae-fs-display-program);
	line-height: 1;
}

.ae-display-about {
	font-size: var(--ae-fs-display-about);
	line-height: 1.02;
}

.ae-display-page {
	font-size: var(--ae-fs-display-page);
	line-height: 1.03;
}

.ae-h2 {
	font-size: var(--ae-fs-h2);
	line-height: 1.05;
}

.ae-h2-small {
	font-size: var(--ae-fs-h2-small);
	line-height: 1.1;
}

.ae-h3 {
	font-size: var(--ae-fs-h3);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

.ae-num {
	font-size: var(--ae-fs-num);
	font-weight: 300;
	line-height: 1;
}

.ae-lead {
	font-size: var(--ae-fs-lead);
	line-height: 1.45;
}

.ae-body {
	font-size: 16px;
	line-height: 24px;
}

.ae-small {
	font-size: 14px;
	line-height: 20px;
}

/* Inner-page modifiers of the roles above. */
.ae-h2--inner {
	font-size: var(--ae-fs-h2-inner);
}

.ae-h3--inner {
	font-size: var(--ae-fs-h3-inner);
}

.ae-lead--inner {
	font-size: var(--ae-fs-lead-inner);
	line-height: 1.4;
}

/* 12px caps label, e.g. "/ Loan programs". */
.ae-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
	color: var(--ae-text-secondary);
}

/* Navigation-scale caps: 16px, weight 400, tight tracking. */
.ae-caps {
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
}