.mfb-hero {
	background: var(--mfb-section-bg, var(--mfb-color-cream));
	color: var(--mfb-section-text);
	/* The bottom gap is one spacing step larger than the gap inside the hero, so it reads as a section break. */
	padding-block: clamp(2.5rem, 1rem + 6vw, 7.5rem) var(--mfb-space-xl);
}

/* Pinned by hero.js so the next section slides over it; --mfb-cover runs 0–1 as it is covered.
   The negative z-index keeps it behind every later section, positioned or not. */
.mfb-hero.is-pinned {
	position: sticky;
	top: var(--mfb-hero-pin, 0px);
	z-index: -10;
}

.mfb-hero.is-pinned::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mfb-color-ink);
	opacity: calc(var(--mfb-cover, 0) * 0.2);
	pointer-events: none;
}

.mfb-hero.is-pinned .mfb-hero__inner {
	transform: scale(calc(1 - var(--mfb-cover, 0) * 0.06));
	transform-origin: 50% 100%;
}

.mfb-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Kept tight because the illustration has its own white space at the top. */
	gap: var(--mfb-space-md);
	max-width: 71.25rem;
}

.mfb-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mfb-space-xs);
	text-align: center;
}

.mfb-hero__text {
	max-width: 60ch;
	font-size: var(--mfb-text-lead);
}

.mfb-hero__media {
	display: block;
	width: 100%;
}

.mfb-hero__image {
	width: 100%;
	border-radius: var(--mfb-radius-lg);
}

@media (max-width: 47.999em) {
	/* Phone sizes follow the original homepage: the illustration comes first, inset. */
	.mfb-hero__media {
		order: -1;
		padding-inline: 1rem;
	}
}