/* ==========================================================================
   .leqa-steps — numbered "how it works" sequence (T-C)
   Composes with primitives from main.css. Tokens only.
   ========================================================================== */

.leqa-steps__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--leqa-space-4);
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: var(--leqa-space-8);
	text-align: center;
}

.leqa-steps__title {
	font-size: var(--leqa-fs-h2);
}

.leqa-steps__list {
	display: grid;
	gap: var(--leqa-space-5);
	grid-template-columns: repeat(3, 1fr);
	counter-reset: leqa-step;
	margin: 0;
	padding: 0;
	list-style: none;
}

.leqa-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--leqa-space-4);
	padding: var(--leqa-space-6);
	background: var(--leqa-bg-elev);
	border: var(--leqa-border-width) solid var(--leqa-border);
	border-radius: var(--leqa-radius-lg);
	box-shadow: var(--leqa-shadow-sm);
}

/* Connecting hairline between steps on wide layouts. */
.leqa-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--leqa-space-6) + 18px);
	right: calc(var(--leqa-space-5) * -0.5 - 1px);
	width: var(--leqa-space-5);
	height: var(--leqa-border-width);
	background: linear-gradient(90deg, var(--leqa-border-strong), transparent);
}

.leqa-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--leqa-radius-pill);
	border: var(--leqa-border-width) solid var(--leqa-border-strong);
	background: var(--leqa-bg);
	color: var(--leqa-accent);
	font-weight: var(--leqa-weight-bold);
	font-size: var(--leqa-fs-small);
}

.leqa-steps__body {
	display: flex;
	flex-direction: column;
	gap: var(--leqa-space-2);
}

.leqa-steps__item-title {
	font-size: var(--leqa-fs-h5);
	font-variation-settings: "opsz" 28;
}

.leqa-steps__item-copy {
	font-size: var(--leqa-fs-small);
	line-height: var(--leqa-lh-body);
}

.leqa-js .leqa-steps__item[data-reveal] {
	transition-delay: calc(var(--leqa-stagger) * var(--leqa-reveal-i, 0));
}

@media (max-width: 820px) {
	.leqa-steps__list {
		grid-template-columns: 1fr;
	}
	.leqa-steps__item:not(:last-child)::after {
		display: none;
	}
}