.why-hero-proof
{
	border-left: 1px solid var(--line-on-dark);
	padding: 1.5rem 0 1.5rem 2.5rem;
	max-width: 410px;
	justify-self: end
}

.why-hero-proof > strong
{
	display: block;
	font: 400 7rem/.95 var(--font-heading);
	color: var(--avato-blue-on-dark);
	margin: .8rem 0
}

.why-hero-proof h3
{
	font-size: 2rem;
	max-width: 18ch
}

.why-hero-proof p:not(.eyebrow)
{
	color: var(--text-on-dark-muted)
}

.why-hero-proof .text-link
{
	margin-top: 1.2rem
}

.decision-grid
{
	display: grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap: 2.2rem
}

.decision-grid article
{
	border-top: 2px solid var(--avato-blue);
	padding-top: 1.5rem
}

.decision-grid p
{
	color: var(--text-muted)
}

.outcome-rows
{
	display: grid;
	gap: 0
}

.outcome-row
{
	display: grid;
	grid-template-columns:55px 1.1fr 1fr;
	gap: 2rem;
	padding: 2.5rem 0;
	border-bottom: 1px solid var(--line);
	align-items: start
}

.outcome-row:first-child
{
	padding-top: 0
}

.outcome-row:last-child
{
	border: 0;
	padding-bottom: 0
}

.outcome-row h2
{
	font-size: clamp(2rem, 3vw, 2.7rem);
	max-width: 18ch
}

.outcome-row .lead
{
	font-size: 1.13rem;
	color: var(--text-muted)
}

.outcome-row > div:last-child
{
	padding-top: .15rem
}

.outcome-row > div:last-child p
{
	margin-top: 0;
	color: var(--text-muted)
}

.outcome-index
{
	font: 400 2.1rem/1.2 var(--font-heading);
	color: var(--avato-blue)
}

.outcome-row .text-link
{
	margin-top: 1.4rem
}

.fit-grid
{
	display: grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap: 2rem
}

.fit-grid article
{
	border-top: 1px solid var(--line-on-dark);
	padding-top: 1.5rem
}

.fit-grid p
{
	color: var(--text-on-dark-muted)
}

.page-why .hero h1
{
	max-width: 16ch
}

@media (max-width: 900px)
{
	.why-hero-proof
	{
		justify-self: start;
		max-width: 100%;
		padding: .5rem 0 .5rem 1.5rem
	}

	.why-hero-proof > strong
	{
		font-size: 5rem
	}

	.outcome-row
	{
		grid-template-columns:35px 1fr;
		gap: 1.3rem
	}

	.outcome-row > div:last-child
	{
		grid-column: 2
	}

	.outcome-row h2
	{
		max-width: none
	}

	.outcome-row .lead
	{
		margin-top: 1rem
	}
}

@media (max-width: 620px)
{
	.decision-grid, .fit-grid
	{
		grid-template-columns:1fr
	}

	.why-hero-proof h3
	{
		max-width: 100%
	}

	.outcome-row
	{
		grid-template-columns:28px 1fr;
		gap: 1rem
	}

	.outcome-row .text-link
	{
		margin-top: .8rem
	}
}