/*
 * The two shared CTA bands rendered by template-parts/cta-band.php and
 * template-parts/family-band.php. design/PAGE-STRUCTURE.md §5.2 and §7.
 *
 * Added here (rather than left to a page agent) because this ticket owns the two
 * partials; every other component stylesheet is still open.
 */

/* --------------------------------------------------- generic CTA band (§7) */

.sp-band-cta__kicker {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-kicker);
	text-transform: uppercase;
	color: var(--sp-text-muted-d);
}

.sp-band-cta__title {
	margin-top: var(--sp-2);
	font-size: var(--sp-fs-display-lg);
	line-height: var(--sp-lh-display);
}

.sp-band-cta__btn {
	margin-top: var(--sp-heading-gap);
}

/* --------------------------------------------------- SIMPulse Family (§5.2) */

.sp-family__grid {
	--sp-grid-min: 300px;
	gap: clamp(20px, 3vw, 40px);
}

.sp-family__kicker {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(20px, 2.6vw, 38px);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text-muted-l);
}

.sp-family__lockup {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(12px, 1.6vw, 24px);
	margin-top: var(--sp-5);
}

.sp-family__logo {
	width: clamp(180px, 20vw, 300px);
	height: auto;
}

.sp-family__word {
	font-size: var(--sp-fs-wordmark);
	font-weight: 800;
	line-height: var(--sp-lh-display);
	color: var(--sp-text);
}

.sp-family__btn {
	margin-top: var(--sp-heading-gap);
}

.sp-family__art {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.sp-family__art img {
	width: min(1200px, 150%);
	max-width: none;
	height: auto;
	margin-right: -16%;
	filter: var(--sp-shadow-render);
}