/*
 * Homepage How It Works
 *
 * Card has no distinct fill of its own (confirmed by pixel sampling —
 * its background matches the section's own --qehs-background-alt);
 * only its border distinguishes it. Circle color and border both reuse
 * existing tokens — no new colors introduced.
 */

.qehs-how-it-works {
	padding-block: var(--qehs-space-2xl);
	background-color: var(--qehs-background-alt);
}

.qehs-how-it-works__header {
	text-align: center;
	margin-bottom: var(--qehs-space-2xl);
}

.qehs-how-it-works__title {
	margin: 0 0 var(--qehs-space-sm);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-how-it-works__subtitle {
	margin: 0;
	font-size: 1.1rem;
	color: var(--qehs-text-muted);
}

.qehs-how-it-works__card {
	display: flex;
	align-items: flex-start;
	border: 1px solid var(--qehs-border);
	border-radius: var(--qehs-radius-lg);
	padding: var(--qehs-space-2xl) var(--qehs-space-xl);
}

.qehs-how-it-works__step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.qehs-how-it-works__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	margin-bottom: var(--qehs-space-md);
	background-color: var(--qehs-accent-blue);
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: 700;
}

.qehs-how-it-works__step-title {
	margin: 0 0 var(--qehs-space-sm);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--qehs-text);
}

.qehs-how-it-works__step-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--qehs-text-muted);
}

.qehs-how-it-works__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/* Vertically aligns with the step title row, matching the
	   reference — not centered on the whole step block. */
	margin-top: 88px;
	padding-inline: var(--qehs-space-sm);
	color: var(--qehs-text);
}

/* --- Tablet / mobile: stack steps vertically, rotate arrows to point
   downward. Matches the site's existing 1024px breakpoint. --- */
@media (max-width: 1024px) {
	.qehs-how-it-works__title {
		font-size: 1.875rem;
	}

	.qehs-how-it-works__card {
		flex-direction: column;
		align-items: stretch;
		padding: var(--qehs-space-xl) var(--qehs-space-lg);
	}

	.qehs-how-it-works__step {
		padding-block: var(--qehs-space-md);
	}

	.qehs-how-it-works__arrow {
		margin-top: 0;
		justify-content: center;
		transform: rotate(90deg);
		padding-block: var(--qehs-space-xs);
	}
}

@media (max-width: 480px) {
	.qehs-how-it-works {
		padding-block: var(--qehs-space-xl);
	}

	.qehs-how-it-works__header {
		margin-bottom: var(--qehs-space-xl);
	}

	.qehs-how-it-works__title {
		font-size: 1.5rem;
	}

	.qehs-how-it-works__subtitle {
		font-size: 1rem;
	}

	.qehs-how-it-works__step-title {
		font-size: 1.25rem;
	}
}