/* Layout: intro-statement. The site header overlays the top. */
.sw-intro-statement {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--header-height) + var(--gap-l)) var(--gap-xl);
	background: var(--color-bg-alt);
}

/* Plus pattern: tablet and up only (on phones it sits behind the text) */
.sw-intro-statement__pattern {
	display: none;
	position: absolute;
	inset-inline: 50% 0;
	inset-block-end: 0;
	block-size: 26rem;
	overflow: hidden;
}

/* Inline SVG plusses at their natural 40px grid, anchored top-left like the old CSS pattern */
.sw-intro-statement__plusses {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	max-inline-size: none;
}

.sw-intro-statement__plusses .sw-plus-pattern__plus { transition: stroke 400ms ease; }

/* Lit by IntroStatementPattern: plusses near the cursor turn fully white */
.sw-intro-statement__plusses .sw-plus-pattern__plus--lit {
	stroke: var(--color-heading);
	transition-duration: 150ms;
}

.sw-intro-statement__inner { position: relative; display: grid; gap: var(--space-4); }
.sw-intro-statement__title { max-inline-size: 38rem; }

@media (min-width: 48em) {
	.sw-intro-statement__pattern { display: block; }
}

@media (min-width: 62em) {
	.sw-intro-statement { padding-block: calc(var(--header-height) + var(--space-64)) var(--space-80); }
}