/* ==========================================================================
   Solution Outcome Intelligence
   Figma: desktop 2594:23056 (1440, `mod3`) · tablet 2594:25060 (768) ·
   mobile 2594:24556 (375). Cross-checked: 2594:25532, 2594:28374, 2594:31326,
   2594:32781, 2594:34117, 2594:35420 — same stack, optional pills/statement/
   callout. Mobile frame duplicates the block; CSS cannot double it.

   Breakpoints: desktop >= 1200px · tablet 768–1199.98px · mobile < 768px.
   Pill chrome matches the hero pills (same Figma component). The 10px marker
   is design chrome, not an ACF image.
   ========================================================================== */

.solution-outcome {
	--outcome-statement-color: var(--color-green-800);
	--outcome-statement-measure: 796px;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--space-160);
	padding-inline: var(--space-128);
	background-color: var(--color-surface-default);
}

.solution-outcome--statement-tone-muted {
	--outcome-statement-color: var(--color-neutral-600);
}

.solution-outcome__inner {
	display: flex;
	width: 100%;
	max-width: 1184px;
	flex-direction: column;
	align-items: center;
	gap: var(--space-64);
}

.solution-outcome__header {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

.solution-outcome__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background-color: var(--color-bg-emphasis);
	color: var(--color-neutral-600);
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: var(--text-body-sm-lh);
}

.solution-outcome__eyebrow-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--color-neutral-600);
}

.solution-outcome__heading {
	margin: 0;
	color: var(--color-green-800);
	font-family: var(--font-family-display);
	font-size: var(--text-display-h1-alt-size);
	font-weight: 400;
	line-height: var(--text-display-h1-alt-lh);
	letter-spacing: 0;
	text-align: center;
}

.solution-outcome__intro {
	margin: 0;
	color: var(--solution-text-muted);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	text-align: center;
}

.solution-outcome__pills-block {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
}

.solution-outcome__pills-lead {
	max-width: 636px;
	margin: 0;
	color: var(--solution-text-muted);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	text-align: center;
}

.solution-outcome__pills {
	display: flex;
	width: 100%;
	max-width: 1160px;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-12) var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.solution-outcome__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-20);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
	background-color: var(--color-surface-default);
	box-shadow: 0 4px 2px rgb(151 135 102 / 8%);
}

.solution-outcome__pill-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--solution-marker-green);
}

.solution-outcome__pill-label {
	color: var(--color-text-default);
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: var(--text-body-sm-lh);
}

.solution-outcome__pills--three-two,
.solution-outcome__pills--three-three {
	row-gap: 0;
}

.solution-outcome__pills-break {
	flex-basis: 100%;
	height: var(--space-12);
}

.solution-outcome__statement {
	max-width: var(--outcome-statement-measure);
	margin: 0;
	color: var(--outcome-statement-color);
	font-family: var(--font-family-display);
	font-size: var(--text-display-h4-size);
	font-weight: 400;
	line-height: var(--text-display-h4-lh);
	letter-spacing: 0;
	text-align: center;
}

.solution-outcome__callout {
	width: 100%;
	margin: 0;
	padding: var(--space-12) var(--space-56);
	border-left: var(--space-8) solid var(--color-green-800);
	background-color: var(--color-bg-subtle);
	color: var(--color-green-800);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	letter-spacing: -0.0125rem;
}

@media (max-width: 74.99875rem) {
	.solution-outcome {
		padding-block: var(--space-64);
		padding-inline: var(--space-32);
	}

	.solution-outcome__inner {
		gap: var(--space-40);
	}

	.solution-outcome__heading {
		font-size: 2rem;
		line-height: normal;
	}

	.solution-outcome__pills-block {
		gap: var(--space-16);
	}

	.solution-outcome__pills-lead {
		max-width: none;
		color: var(--color-green-800);
		font-family: var(--font-family-display);
		font-size: 1.25rem;
		line-height: normal;
	}

	.solution-outcome__pills {
		gap: var(--space-12);
	}

	.solution-outcome__pills--three-two,
	.solution-outcome__pills--three-three {
		row-gap: 0;
	}

	.solution-outcome__statement {
		max-width: none;
		font-size: 1.25rem;
		line-height: normal;
	}

	.solution-outcome__callout {
		padding: var(--space-12) var(--space-28);
		border-left-width: var(--space-4);
	}
}

@media (max-width: 47.99875rem) {
	.solution-outcome {
		padding-inline: var(--space-20);
	}

	.solution-outcome__pills {
		flex-direction: column;
		align-items: center;
		row-gap: var(--space-12);
	}

	.solution-outcome__pills-break {
		display: none;
	}
}