.hvl-milestones {
	--ms-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--ms-cycle: 12s;
	--ms-bg: #1d1d1f;
	--ms-ink: #f5f5f7;
	--ms-ink-2: #a1a1a6;
	--ms-muted: #86868b;
	--ms-line: rgba(245, 245, 247, 0.16);
	--ms-node-line: rgba(245, 245, 247, 0.4);
	--ms-dim: rgba(245, 245, 247, 0.55);
	--ms-packet: var(--e-global-color-accent, #38b0db);
	--ms-bleed: 44px;
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 28px;
	padding: 28px 22px 24px;
	color: var(--ms-ink);
	background: var(--ms-bg);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;
}

.hvl-milestones *,
.hvl-milestones *::before,
.hvl-milestones *::after {
	box-sizing: border-box;
}

.hvl-milestones .hvl-milestones__label {
	margin: 0 0 32px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--ms-muted);
}

.hvl-milestones__track {
	position: relative;
}

.hvl-milestones__track::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 7px;
	bottom: 30px;
	width: 2px;
	background: var(--ms-line);
}

.hvl-milestones__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hvl-milestones__stop {
	position: relative;
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	gap: 0 20px;
	padding-bottom: 32px;
	align-items: start;
}

.hvl-milestones__node {
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
	border-radius: 99px;
	background: var(--ms-bg);
	box-shadow: inset 0 0 0 2px var(--ms-node-line);
}

.hvl-milestones .hvl-milestones__tag {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 14px;
	color: var(--ms-muted);
}

.hvl-milestones .hvl-milestones__name {
	display: block;
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ms-ink);
}

.hvl-milestones .hvl-milestones__text {
	margin: 8px 0 0;
	max-width: 36ch;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--ms-ink-2);
}

.hvl-milestones.is-on .hvl-milestones__node,
.hvl-milestones.is-on .hvl-milestones__name {
	animation-duration: var(--ms-cycle);
	animation-timing-function: var(--ms-ease);
	animation-iteration-count: infinite;
	animation-delay: calc(var(--ms-cycle) * var(--i, 0) * 0.25);
}

.hvl-milestones.is-on .hvl-milestones__node {
	animation-name: hvl-ms-hit;
}

.hvl-milestones.is-on .hvl-milestones__name {
	animation-name: hvl-ms-name;
	color: var(--ms-dim);
}

@keyframes hvl-ms-hit {
	0%,
	25%,
	100% {
		background: var(--ms-bg);
		box-shadow: inset 0 0 0 2px var(--ms-node-line);
	}

	4%,
	20% {
		background: var(--ms-ink);
		box-shadow: inset 0 0 0 2px var(--ms-ink);
	}
}

@keyframes hvl-ms-name {
	0%,
	25%,
	100% {
		color: var(--ms-dim);
	}

	4%,
	20% {
		color: var(--ms-ink);
	}
}

.hvl-milestones__trav {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hvl-milestones__pkt {
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 99px;
	background: var(--ms-packet);
	opacity: 0;
}

.hvl-milestones.is-on.is-measured .hvl-milestones__pkt {
	animation: hvl-ms-pkt var(--ms-cycle) var(--ms-ease) infinite;
}

@keyframes hvl-ms-pkt {
	0% {
		opacity: 0;
		transform: translate(var(--p0x), var(--p0y));
	}

	3%,
	15% {
		opacity: 0;
		transform: translate(var(--p0x), var(--p0y));
	}

	17% {
		opacity: 1;
	}

	25%,
	40% {
		transform: translate(var(--p1x), var(--p1y));
	}

	50%,
	65% {
		transform: translate(var(--p2x), var(--p2y));
	}

	73% {
		opacity: 1;
	}

	75%,
	100% {
		opacity: 0;
		transform: translate(var(--p3x), var(--p3y));
	}
}

@media (min-width: 768px) {
	.hvl-milestones {
		padding: 40px 44px 32px;
	}

	.hvl-milestones .hvl-milestones__label {
		margin-bottom: 44px;
	}

	.hvl-milestones__track::before {
		left: 7px;
		right: calc(var(--ms-bleed) * -1);
		top: 6px;
		bottom: auto;
		width: auto;
		height: 2px;
	}

	.hvl-milestones__list {
		display: grid;
		grid-template-columns: repeat(var(--ms-count, 4), minmax(0, 1fr));
	}

	.hvl-milestones__stop {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px 0;
		align-content: start;
		padding: 0 32px 40px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hvl-milestones.is-on .hvl-milestones__node,
	.hvl-milestones.is-on .hvl-milestones__name {
		animation: none;
	}

	.hvl-milestones.is-on .hvl-milestones__name {
		color: var(--ms-ink);
	}

	.hvl-milestones__pkt {
		display: none;
	}
}