/* ==========================================================================
   Solution revenue-leak comparison table
   Figma: desktop 1:419 (1440) · tablet 1:4801 (768) · mobile 1:4296 (375)
   Cross-checked: 1:2909, 1:5735 — identical structure, different copy.

   Breakpoints: desktop >= 1200px · tablet 768–1199.98px · mobile < 768px,
   matching the hero. Figma keeps the card at its full 573px through tablet and
   only rebuilds it at mobile, so the tablet step changes page padding and the
   heading size but leaves the table alone.

   Geometry comes from four custom properties rather than repeated literals, so
   the mobile step only has to restate those four values. The dotted connector
   is a fixed decorative vector: it lives in the theme, is painted on the stage
   cell's ::after so it adds no DOM and no accessible-tree noise, and the cell
   reserves `connector + gutter` of padding so copy can never run under it.
   ========================================================================== */

.solution-revenue {
	--revenue-connector: 133px;
	--revenue-gutter: var(--space-20);
	--revenue-arrow-width: 93px;
	--revenue-arrow-height: 5.7735px;
	--revenue-connector-image: url("../../images/solutions/shared/revenue-connector.svg");
	/* 10px: Figma's row padding and card foot, no token on the 4px scale. */
	--revenue-row-padding: 0.625rem;

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

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

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

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

.solution-revenue__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-revenue__card {
	/* 533px table + the card's 20px side padding. */
	width: 100%;
	max-width: 573px;
	padding: 0 var(--space-20) var(--revenue-row-padding);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-raised);
}

.solution-revenue__table {
	/* `separate` keeps one hairline between rows (only bottoms are set), makes
	   `position: relative` on a cell dependable, and lets the transparent
	   border below carry the header gap. */
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

.solution-revenue__head {
	padding: var(--space-20);
	border-bottom: 1px solid var(--color-border-subtle);
	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);
	vertical-align: middle;
}

.solution-revenue__head--stage {
	width: 53%;
	text-align: left;
}

.solution-revenue__head--issue {
	width: 37.5%;
	text-align: right;
}

.solution-revenue__cell {
	padding-block: var(--revenue-row-padding);
	border-bottom: 1px solid var(--color-border-subtle);
	/* Excludes the transparent border below from the hover tint. */
	background-clip: padding-box;
	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);
	text-align: left;
	vertical-align: middle;
	overflow-wrap: break-word;
}

.solution-revenue__cell--stage {
	position: relative;
	width: 62.5%;
	padding-right: calc(var(--revenue-connector) + var(--revenue-gutter));
	padding-left: var(--revenue-gutter);
}

.solution-revenue__cell--issue {
	width: 37.5%;
	padding-inline: var(--revenue-gutter);
}

/* Figma leaves the final row unruled, so the card foot stays a clean 10px. */
.solution-revenue__row:last-child .solution-revenue__cell {
	border-bottom: 0;
}

/* Figma's 10px of card background between the header rule and the first row.
   A transparent border rather than padding, so the row keeps its own height and
   its hover tint starts below the gap. */
.solution-revenue__table thead + tbody .solution-revenue__row:first-child .solution-revenue__cell {
	border-top: var(--revenue-row-padding) solid transparent;
}

.solution-revenue__cell--stage::after {
	content: "";
	position: absolute;
	/* Against the padding box, so the transparent border above cannot skew it. */
	inset-block: 0;
	right: var(--revenue-gutter);
	width: var(--revenue-arrow-width);
	height: var(--revenue-arrow-height);
	margin-block: auto;
	background-image: var(--revenue-connector-image);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Row tint on hover: the two columns sit either side of a 133px gap, so a
   scanning aid earns its keep here. Colour only — no lift, shadow or cursor
   change that would imply the row is interactive. */
@media (hover: hover) and (pointer: fine) {
	.solution-revenue__cell {
		transition: background-color 0.2s ease;
	}

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

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

/* Tablet — page frame and heading shrink, the card is untouched. */
@media (max-width: 74.99875rem) {
	.solution-revenue {
		padding-block: var(--space-64);
		padding-inline: var(--space-32);
	}

	.solution-revenue__inner {
		gap: var(--space-64);
	}

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

/* Mobile — narrower card, per-column headings, taller rows and the compact
   arrow. Only the four geometry properties and the header change. */
@media (max-width: 47.99875rem) {
	.solution-revenue {
		--revenue-connector: 60px;
		--revenue-gutter: var(--space-16);
		--revenue-arrow-width: 20px;
		--revenue-arrow-height: 22px;
		--revenue-connector-image: url("../../images/solutions/shared/revenue-connector-compact.svg");

		padding-inline: var(--space-20);
	}

	.solution-revenue__card {
		/* 295px table + the card's 4px side padding. */
		max-width: 100%;
		padding-inline: var(--space-4);
	}

	.solution-revenue__head {
		padding: var(--space-20) var(--space-16);
		border-bottom: 0;
		text-align: left;
	}

	.solution-revenue__head--stage,
	.solution-revenue__cell--stage {
		width: 60%;
	}

	.solution-revenue__head--issue,
	.solution-revenue__cell--issue {
		width: 40%;
	}

	/* Figma sizes these rows for two lines and clips anything longer. On a table
	   cell `height` is a minimum, not a cap, so this holds the 64px while
	   letting longer copy grow the row instead of overflowing it. */
	.solution-revenue__cell {
		height: 64px;
	}

	/* No header rule at mobile, so no gap to carry beneath it. */
	.solution-revenue__table thead + tbody .solution-revenue__row:first-child .solution-revenue__cell {
		border-top: 0;
	}

	.solution-revenue__header {
		align-items: flex-start;
	}

	.solution-revenue__heading {
		text-align: left;
	}
}