/**
 * Keystone Theme — Diagnosis section component
 *
 * Full-width light-grey section with a 2×N text grid. No card borders —
 * colour hierarchy (bold lead + body) does the visual work.
 *
 * BEM: .keystone-diagnosis
 *        __inner  __eyebrow  __heading  __grid
 *        .keystone-diagnosis-item  __lead  __body
 *        __pivot
 */

.keystone-diagnosis {
	width: 100vw !important;
	max-width: none !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: #f5f6fa;
	padding-block: clamp(3rem, 6vw, 5rem);
	margin-block: 0;
}

.keystone-diagnosis__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50, clamp(20px, 4vw, 50px));
}

.keystone-diagnosis__eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #FF3B09;
	margin: 0 0 0.875rem;
}

.keystone-diagnosis__heading {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	color: #121e29;
	line-height: 1.2;
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
	max-width: 640px;
}

.keystone-diagnosis__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 5vw, 5rem);
}

.keystone-diagnosis-item__lead {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #121e29;
	margin: 0 0 0.5rem;
	line-height: 1.35;
}

.keystone-diagnosis-item__body {
	font-size: 0.9rem;
	color: #5a6b79;
	margin: 0;
	line-height: 1.65;
}

.keystone-diagnosis__pivot {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid #dde3ea;
	font-size: clamp(1rem, 2vw, 1.1875rem);
	font-weight: 700;
	color: #121e29;
	text-align: center;
}

@media (max-width: 680px) {
	.keystone-diagnosis__grid {
		grid-template-columns: 1fr;
	}
}

/* Absolution line — sits between the grid and the pivot kicker */
.keystone-diagnosis__absolution {
	text-align: center;
	font-size: 1rem;
	font-style: italic;
	color: #5a6b79;
	margin: 2.5rem auto 0;
	max-width: 560px;
}

/* How it works — 3-step numbered section */
.keystone-how-it-works {
	width: 100vw !important;
	max-width: none !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding-block: clamp(3rem, 6vw, 5rem);
	border-bottom: 1px solid #eef0f3;
}

.keystone-how-it-works__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50, clamp(20px, 4vw, 50px));
}

.keystone-how-it-works__heading {
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	font-weight: 900;
	color: #0a1828;
	margin: 0 0 2.5rem;
}

.keystone-how-it-works__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.keystone-how-it-works__step {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.keystone-how-it-works__num {
	font-size: 2.5rem;
	font-weight: 900;
	color: #FF3B09;
	line-height: 1;
}

.keystone-how-it-works__text {
	font-size: 1rem;
	line-height: 1.65;
	color: #121e29;
	margin: 0;
}

@media (max-width: 680px) {
	.keystone-how-it-works__steps {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}