.hmf-timeline.hmf-timeline--steps {
	position: relative;
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hmf-timeline.hmf-timeline--steps::before {
	content: "";
	position: absolute;
	inset-block: 28px;
	inset-inline-start: 27px;
	inline-size: 2px;
	background: repeating-linear-gradient(to bottom, var(--hc-gold) 0 8px, transparent 8px 14px);
}

.hmf-timeline.hmf-timeline--steps .hmf-timeline__item {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	min-block-size: 0;
	margin: 0 70px 0 0;
	margin-inline: 70px 0;
	padding: 20px;
	border: 1px solid var(--hc-line);
	border-radius: 24px;
	background: var(--hc-sky);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.hmf-timeline.hmf-timeline--steps .hmf-timeline__item::before,
.hmf-timeline.hmf-timeline--steps .hmf-timeline__item:hover::before {
	position: absolute;
	z-index: 1;
	inset-block-start: -1px;
	inset-inline-start: -71px;
	box-sizing: border-box;
	inline-size: 56px;
	block-size: 56px;
	padding-block-start: 2px;
	border: 4px solid var(--hc-white);
	border-radius: 50%;
	background: var(--hc-gold);
	color: var(--hc-ink-2);
	font-size: 19px;
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 10px 24px -10px rgb(251 172 2 / 0.8);
}

.hmf-timeline.hmf-timeline--steps .hmf-timeline__item::after {
	content: none;
}

.hmf-timeline.hmf-timeline--steps .hmf-timeline__title {
	display: grid;
	justify-items: start;
	gap: 10px;
	margin: 0;
	color: var(--hc-blue-deep);
	font-size: 20px;
	font-weight: 900;
	line-height: 1.75;
}

.hmf-timeline .hmf-timeline__icon {
	box-sizing: border-box;
	inline-size: 56px;
	block-size: 56px;
	padding: 11px;
	border-radius: 18px;
	background: var(--hc-white);
	box-shadow: 0 12px 24px -18px rgb(15 16 29 / 0.4);
}

.hmf-timeline.hmf-timeline--steps .hmf-timeline__note {
	color: var(--hc-slate);
	font-size: 16px;
	line-height: 2.1;
}

.hmf-timeline .hmf-timeline__note p {
	margin: 0;
	text-wrap: pretty;
}

@media (hover: hover) {
	.hmf-timeline.hmf-timeline--steps .hmf-timeline__item:hover {
		border-color: var(--hc-blue);
		transform: translateY(-3px);
		box-shadow: 0 30px 60px -36px rgb(4 107 210 / 0.35);
	}
}

@media (width >= 48rem) {

	.hmf-timeline.hmf-timeline--steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.hmf-timeline.hmf-timeline--steps::before {
		display: none;
	}

	.hmf-timeline.hmf-timeline--steps .hmf-timeline__item {
		margin: 78px 0 0;
		padding: 28px 26px;
		border-radius: 28px;
	}

	.hmf-timeline.hmf-timeline--steps .hmf-timeline__item::before,
	.hmf-timeline.hmf-timeline--steps .hmf-timeline__item:hover::before {
		inset-block-start: -79px;
		inset-inline-start: calc(50% - 30px);
		inline-size: 60px;
		block-size: 60px;
	}
}

@media (width >= 68.75rem) {

	.hmf-timeline.hmf-timeline--steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hmf-timeline.hmf-timeline--steps::before {
		display: block;
		inset-block: 29px auto;
		inset-inline: 12.5%;
		inline-size: auto;
		block-size: 2px;
		background: repeating-linear-gradient(to left, var(--hc-gold) 0 8px, transparent 8px 14px);
	}
}
/* Proposed: cards, white step cards for a tinted section. */
.hmf-timeline--cards .hmf-timeline--steps .hmf-timeline__item {
	background: var(--hc-white);
	box-shadow: var(--hc-shadow-card);
}

.hmf-timeline--cards .hmf-timeline--steps .hmf-timeline__note {
	font-size: 16px;
	line-height: 2.2;
}

@media (prefers-reduced-motion: reduce) {

	.hmf-timeline--cards .hmf-timeline--steps .hmf-timeline__item,
	.hmf-timeline--cards .hmf-timeline--steps .hmf-timeline__item:hover {
		transition: none;
		transform: none;
	}
}