/* H-Lead Steps Section ("Our Proven Approach").
 * Figma: 'approach' frame, 01. H-lead_homepage_desktop_v1 (3 columns,
 * gap 152, section gap 56) and mobile (stacked, gap 32, section gap 40). */

.hl-steps-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hl-space-56);
}

.hl-steps-section__title {
	margin: 0;
	color: var(--hl-color-brand-700);
	font-weight: 700;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.hl-steps-section__title {
		font-size: 36px;
		line-height: 44px;
	}
}

.hl-steps-section__steps {
	display: flex;
	justify-content: center;
	gap: 152px;
	/* Figma 'text' row gap=152; no --hl-space token this large */
}

.hl-steps-section__step {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--hl-space-32);
	max-width: 382px;
}

@media screen and (max-width:1024px) {
	.hl-steps-section__step {
		align-items: center;
	}

	.hl-steps-section__step-text {
		text-align: center !important;
	}
}

.hl-steps-section__icon {
	width: 100px;
	height: 100px;
	object-fit: contain;
}

.hl-steps-section__step-text {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-8);
	text-align: left;
}

.hl-steps-section__heading {
	margin: 0;
	color: var(--hl-color-brand-700);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.hl-steps-section__body {
	margin: 0;
	color: var(--hl-color-grey-600);
	font-size: 20px;
	line-height: 30px;
}

@media (max-width: 991px) {
	.hl-steps-section {
		gap: var(--hl-space-40);
	}

	.hl-steps-section__steps {
		flex-direction: column;
		align-items: center;
		gap: var(--hl-space-32);
	}

	.hl-steps-section__title {
		font-size: 24px;
		line-height: 32px;
	}

	.hl-steps-section__heading {
		font-size: 20px;
		line-height: 30px;
	}

	.hl-steps-section__body {
		font-size: 18px;
		line-height: 28px;
	}
}