/**
 * Then and Now section.
 *
 * @package Fundamento
 */

.then-now {
	background-color: var(--color-bg-default);
	padding: var(--space-160) var(--space-160);
	text-align: center;
}

.then-now__container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

@media (min-width: 1025px) {
	.then-now__container {
		max-width: 72.5rem;
	}
}

.then-now__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: var(--space-16);
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: var(--text-body-sm-lh);
	color: var(--color-text-subtle);
	background-color: var(--color-neutral-200);
}

.then-now__eyebrow-dot {
	flex-shrink: 0;
	width: var(--space-8);
	height: var(--space-8);
	background-color: var(--color-text-muted);
}

.then-now__heading {
	max-width: 100%;
	margin: 0 auto var(--space-16);
	font-family: var(--font-family-display);
	font-size: var(--text-display-h1-alt-size);
	font-weight: 400;
	line-height: var(--text-display-h2-lh);
	letter-spacing: var(--text-body-md-ls);
	color: var(--color-text-brand);
}

.then-now__cta {
	margin-bottom: var(--space-64);
}

.then-now__table {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.then-now__row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.75rem;
}

.then-now__line {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	z-index: 0;
	border-top: 1px dashed var(--color-neutral-400);
	transform: translateY(-50%);
	pointer-events: none;
}

.then-now__before,
.then-now__after {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-20);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-sm-lh);
	white-space: nowrap;
}

.then-now__before {
	color: var(--color-neutral-400);
	background-color: var(--color-neutral-100);
	border: none;
}

.then-now__after {
	color: var(--color-neutral-900);
	background-color: var(--color-accent-subtle);
}

.then-now__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: var(--radius-full);
	line-height: 1;
}

.then-now__icon--before {
	font-size: var(--space-8);
	color: var(--color-text-inverse);
	background-color: var(--color-neutral-400);
}

.then-now__icon--after {
	color: var(--color-text-inverse);
	background-color: var(--color-accent-default);
}

.then-now__icon--after svg {
	display: block;
}

/* Staggered pill offsets — Figma layout */
.then-now__row--1 .then-now__before {
	margin-inline-start: var(--space-128);
}

.then-now__row--1 .then-now__after {
	margin-inline-end: var(--space-112);
}

.then-now__row--2 .then-now__before {
	margin-inline-start: var(--space-224);
}

.then-now__row--2 .then-now__after {
	margin-inline-end: var(--space-128);
}

.then-now__row--3 .then-now__before {
	margin-inline-start: var(--space-28);
}

.then-now__row--3 .then-now__after {
	margin-inline-end: var(--space-192);
}

.then-now__row--4 .then-now__before {
	margin-inline-start: var(--space-192);
}

.then-now__row--4 .then-now__after {
	margin-inline-end: var(--space-128);
}

.then-now__row--5 .then-now__before {
	margin-inline-start: var(--space-224);
}

.then-now__row--5 .then-now__after {
	margin-inline-end: var(--space-192);
}

.then-now__quote {
	max-width: 42.5rem;
	margin: var(--space-64) auto 0;
	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: var(--text-body-lg-ls);
	text-align: center;
}

.then-now__quote-muted {
	color: #17584499;
}

.then-now__quote-accent {
	color: var(--color-text-brand);
}

/* Tablet */
@media (max-width: 1024px) {
	.then-now__heading {
		font-size: var(--text-display-h3-size);
		line-height: var(--text-display-h3-lh);
		letter-spacing: var(--text-display-h3-ls);
	}

	.then-now__before,
	.then-now__after {
		white-space: normal;
	}

	.then-now__row--2 .then-now__before {
		margin-inline-start: var(--space-24);
	}

	.then-now__row--2 .then-now__after {
		margin-inline-end: var(--space-32);
	}

	.then-now__row--3 .then-now__before {
		margin-inline-start: var(--space-48);
	}

	.then-now__row--3 .then-now__after {
		margin-inline-end: var(--space-48);
	}

	.then-now__row--4 .then-now__before {
		margin-inline-start: var(--space-32);
	}

	.then-now__row--4 .then-now__after {
		margin-inline-end: var(--space-24);
	}

	.then-now__row--5 .then-now__before {
		margin-inline-start: var(--space-16);
	}

	.then-now__row--5 .then-now__after {
		margin-inline-end: var(--space-8);
	}
}

/* Mobile */
@media (max-width: 768px) {
	.then-now {
		padding: var(--space-64) var(--space-24);
		text-align: left;
	}

	.then-now__heading {
		margin-left: 0;
		margin-right: 0;
		font-size: var(--text-display-h4-size);
		line-height: var(--text-display-h4-lh);
		letter-spacing: var(--text-display-h4-ls);
		text-align: left;
	}

	.then-now__table {
		gap: var(--space-12);
	}

	.then-now__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
		min-height: 0;
	}

	.then-now__line {
		display: none;
	}

	.then-now__before,
	.then-now__after {
		padding: var(--space-8) var(--space-12);
		font-size: var(--text-body-sm-size);
		white-space: normal;
		margin-inline: 0 !important;
	}

	.then-now__quote {
		text-align: center;
		font-size: var(--text-body-md-size);
		line-height: var(--text-body-md-lh);
	}
}