/* Module: Steps — no approved slice section for this one; built from a
   controls spec (Layout/Heading/Content/Steps), not a design mockup. */
.steps { padding-top: 100px; padding-bottom: 100px; }

.steps__heading { text-align: center; }
.steps__desc { max-width: 720px; margin: 0 auto; text-align: center; }
.steps__heading + .steps__desc { margin-top: 24px; }

.steps__grid { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 64px; }
.steps__cta { display: flex; justify-content: center; margin-top: 48px; }

.steps__grid--cols-2 .step-item { flex: 0 0 50%; }
.steps__grid--cols-3 .step-item { flex: 0 0 33.3333%; }
.steps__grid--cols-4 .step-item { flex: 0 0 25%; }

.step-item {
	position: relative;
	text-align: center;
	padding: 0 24px;
}

/* Connecting line through the centre of the number circle, from each item
   to the next in its row. Hidden on the last item of every row (one rule
   per column count) and on the true last item. */
.step-item::after {
	content: '';
	position: absolute;
	top: 24px;
	left: 50%;
	width: 100%;
	height: 1px;
	background: var(--skin-grey-20);
	z-index: 0;
}
.steps__grid--cols-2 .step-item:nth-child(2n)::after,
.steps__grid--cols-3 .step-item:nth-child(3n)::after,
.steps__grid--cols-4 .step-item:nth-child(4n)::after,
.step-item:last-child::after {
	display: none;
}

.step-item__number {
	position: relative;
	z-index: 1;
	width: 48px;
	height: 48px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--skin-teal);
	color: var(--skin-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 18px;
}

.step-item__title { margin-bottom: 8px; }
.step-item__desc { font-size: 16px; line-height: 26px; }
.step-item__cta { margin-top: 16px; }

/* Theme */
.steps--theme-dark { background: var(--skin-dark-60); color: var(--skin-white); }
.steps--theme-dark .steps__heading,
.steps--theme-dark .step-item__title,
.steps--theme-dark h1, .steps--theme-dark h2, .steps--theme-dark h3, .steps--theme-dark h4 { color: var(--skin-white); }
.steps--theme-dark .step-item::after { background: rgba(255, 255, 255, 0.16); }

/* Display: vertical (always single column) — same step-item card, stacked
   top to bottom with a continuous vertical connecting line. */
.steps__grid--vertical {
	position: relative;
	flex-direction: column;
	align-items: center;
}
.steps__grid--vertical::before {
	content: '';
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 50%;
	width: 1px;
	background: var(--skin-grey-20);
	z-index: 0;
}
.steps--theme-dark .steps__grid--vertical::before { background: rgba(255, 255, 255, 0.16); }
.steps__grid--vertical .step-item {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 100%;
	max-width: 560px;
	padding: 0;
}
.steps__grid--vertical .step-item:not(:last-child) { margin-bottom: 40px; }
.steps__grid--vertical .step-item::after { display: none; }

@media (max-width: 991.98px) {
	.steps { padding-top: 60px; padding-bottom: 60px; }

	.steps__grid--cols-3 .step-item,
	.steps__grid--cols-4 .step-item {
		flex: 0 0 50%;
		margin-bottom: 40px;
	}
	.steps__grid--cols-3 .step-item:nth-child(2n)::after,
	.steps__grid--cols-4 .step-item:nth-child(2n)::after {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.steps__grid { margin-top: 40px; }

	.steps__grid--cols-2 .step-item,
	.steps__grid--cols-3 .step-item,
	.steps__grid--cols-4 .step-item {
		flex: 0 0 100%;
		margin-bottom: 32px;
	}
	.step-item:last-child { margin-bottom: 0; }
	.step-item::after { display: none; }
}