/* ==========================================================================
   Solution Why Fundamento comparison board
   Figma: desktop 2594:23016 (1440) · tablet 2594:25015 (768) · mobile 2594:24511 (375)
   Cross-checked: 2594:25493, 2594:28335 — identical structure, different copy.

   Breakpoints: desktop >= 1200px · tablet 768–1199.98px · mobile < 768px,
   matching the hero and revenue table. Figma keeps two columns side-by-side
   through mobile; only padding, radius and type change.

   Geometry lives on custom properties so the tablet/mobile step restates
   those values instead of rewriting the grid.
   ========================================================================== */

.solution-why {
	--why-board-bg: var(--color-surface-raised);
	--why-board-padding: var(--space-20);
	--why-board-gap: var(--space-20);
	--why-board-radius: var(--radius-lg);
	/* 12px: Figma cell radius, between --radius-sm (8) and --radius-md (16). */
	--why-cell-radius: 0.75rem;
	--why-cell-padding: var(--space-20);
	--why-head-align: left;
	--why-icon: 1.5rem;

	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-why__inner {
	display: flex;
	width: 100%;
	max-width: 1184px;
	flex-direction: column;
	align-items: center;
	gap: var(--space-80);
}

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

.solution-why__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-why__eyebrow-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--color-neutral-600);
}

.solution-why__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-why__board {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: var(--why-board-gap);
	padding: var(--why-board-padding);
	border-radius: var(--why-board-radius);
	background-color: var(--why-board-bg);
}

.solution-why__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--why-board-gap);
	align-items: stretch;
}

.solution-why__head {
	color: var(--color-text-default);
	font-family: var(--font-family-body);
	font-size: var(--text-body-xl-size);
	font-weight: 500;
	line-height: var(--text-body-xl-lh);
	text-align: var(--why-head-align);
}

.solution-why__system {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--space-12);
	padding: var(--why-cell-padding);
	border: 1px solid var(--color-border-default);
	border-radius: var(--why-cell-radius);
	background-color: var(--color-surface-default);
}

.solution-why__icon {
	flex-shrink: 0;
	width: var(--why-icon);
	height: var(--why-icon);
	max-width: var(--why-icon);
	object-fit: contain;
}

.solution-why__system-label {
	min-width: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
/* 	overflow-wrap: break-word; */
}

.solution-why__limit {
	display: flex;
	min-width: 0;
	align-items: center;
	margin: 0;
	padding: var(--why-cell-padding);
	border: 1px solid var(--color-border-default);
	border-radius: var(--why-cell-radius);
	background-color: var(--color-surface-default);
	color: var(--color-neutral-600);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	overflow-wrap: break-word;
}

.solution-why__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;
}

/* Card tint on hover: colour only, matching Homepage .service-tabs__card and
   the revenue table. No lift, shadow or cursor change — the row is not a
   control. Keyboard equivalent is :focus-within if a child is focused. */
@media (hover: hover) and (pointer: fine) {
	.solution-why__system,
	.solution-why__limit {
		transition:
			background-color 0.2s ease,
			border-color 0.2s ease;
	}

	.solution-why__system:hover,
	.solution-why__system:focus-within,
	.solution-why__limit:hover,
	.solution-why__limit:focus-within {
		background-color: var(--color-bg-subtle);
	}
}

@media (prefers-reduced-motion: reduce) {
	.solution-why__system,
	.solution-why__limit {
		transition: none;
	}
}

/* Tablet + the 1024 step — two columns stay, chrome compresses. */
@media (max-width: 74.99875rem) {
	.solution-why {
		--why-board-bg: var(--color-bg-subtle);
		--why-board-padding: var(--space-12) var(--space-4) var(--space-4);
		--why-board-gap: var(--space-4);
		--why-board-radius: 0.75rem;
		--why-cell-radius: var(--radius-sm);
		--why-cell-padding: var(--space-32) var(--space-16);
		--why-head-align: center;

		padding-block: var(--space-64);
		padding-inline: var(--space-32);
	}

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

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

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

	.solution-why__row--head {
		padding-bottom: var(--space-16);
	}
}

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