.secondary-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-md);
	background-color: var(--c-bg-md);
	text-align: center;

	> * {
		max-width: var(--w-xl);
		margin-inline: auto;
	}

	> h1:before {
		background: linear-gradient(90deg, var(--c-white), color-mix(in srgb, var(--c-white), transparent 50%) 85%);
	}

	> div {
		text-wrap: balance;
	}

	/* Long-form pages — policy, terms. These are for reading rather than
	   converting: left aligned, white, and held to a measure that does not run to
	   150 characters on a wide screen. */
	&.mod-layout-prose {
		background-color: var(--c-white);
		text-align: left;
		gap: var(--s-sm);

		> * {
			max-width: var(--w-md);
		}

		/* btw-h-lg tops out near 76px, which overwhelms a document heading. */
		> h1 {
			font-size: clamp(2rem, 5vw, 3rem);
		}

		/* The base gradient is white, for the tinted background above; on white it
		   would be invisible. */
		> h1:before {
			background: linear-gradient(90deg, var(--c-blue-dk), color-mix(in srgb, var(--c-blue-dk), transparent 50%) 35%);
		}

		/* balance is for short headings; it fights long prose. */
		> div {
			text-wrap: pretty;
		}
	}
}