.crew-core-roadmap {
	--crew-core-roadmap-gap: 36px;
	--crew-core-roadmap-column-min: 220px;
	--crew-core-roadmap-line-color: #d9b200;
	--crew-core-roadmap-pill-text: #ffffff;
	--crew-core-roadmap-pill-bg: #2c292c;
	--crew-core-roadmap-pill-border-start: #d9b200;
	--crew-core-roadmap-pill-border-end: #d9b200;
	--crew-core-roadmap-pill-active-text: #ffffff;
	--crew-core-roadmap-pill-active-bg: #2c292c;
	--crew-core-roadmap-pill-active-border-start: #00f7f0;
	--crew-core-roadmap-pill-active-border-end: #ff004f;
	--crew-core-roadmap-heading-color: #ffffff;
	--crew-core-roadmap-body-color: rgba(255, 255, 255, 0.88);
	--crew-core-roadmap-bullet-color: #d9b200;
	--crew-core-roadmap-bullet-icon-size: 14px;
	width: 100%;
	padding: clamp(28px, 4vw, 44px);
	background-color: #2c292c;
	border-radius: 28px;
}

.crew-core-roadmap__track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--crew-core-roadmap-column-min), 100%), 1fr));
	gap: var(--crew-core-roadmap-gap);
	position: relative;
}

.crew-core-roadmap__track::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	right: 18px;
	height: 1px;
	background: var(--crew-core-roadmap-line-color);
	z-index: 0;
}

.crew-core-roadmap__track--single::before {
	display: none;
}

.crew-core-roadmap__item {
	position: relative;
	padding-top: 80px;
	min-width: 0;
}

.crew-core-roadmap__pill {
	position: absolute;
	top: 22px;
	left: 0;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 102px;
	padding: 9px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(var(--crew-core-roadmap-pill-bg), var(--crew-core-roadmap-pill-bg)) padding-box,
		linear-gradient(90deg, var(--crew-core-roadmap-pill-border-start), var(--crew-core-roadmap-pill-border-end)) border-box;
	color: var(--crew-core-roadmap-pill-text);
	font-size: 16px;
	line-height: 1;
	text-align: center;
}

.crew-core-roadmap__pill::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 1px;
	height: 22px;
	background: var(--crew-core-roadmap-line-color);
	transform: translateX(-50%);
}

.crew-core-roadmap__track--single .crew-core-roadmap__pill::before {
	display: none;
}

.crew-core-roadmap__item.is-highlighted .crew-core-roadmap__pill {
	background:
		linear-gradient(var(--crew-core-roadmap-pill-active-bg), var(--crew-core-roadmap-pill-active-bg)) padding-box,
		linear-gradient(90deg, var(--crew-core-roadmap-pill-active-border-start), var(--crew-core-roadmap-pill-active-border-end)) border-box;
	color: var(--crew-core-roadmap-pill-active-text);
}

.crew-core-roadmap__title {
	margin: 0 0 18px;
	max-width: 14ch;
	color: var(--crew-core-roadmap-heading-color);
	font-size: clamp(22px, 1.8vw, 30px);
	font-weight: 600;
	line-height: 1.18;
}

.crew-core-roadmap__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.crew-core-roadmap__point {
	position: relative;
	padding-left: 18px;
	color: var(--crew-core-roadmap-body-color);
	font-size: 17px;
	line-height: 1.45;
}

.crew-core-roadmap.has-custom-bullet-icon .crew-core-roadmap__point {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 10px;
	align-items: start;
	padding-left: 0;
}

.crew-core-roadmap__point::before {
	content: "\2197";
	position: absolute;
	left: 0;
	top: 0.1em;
	color: var(--crew-core-roadmap-bullet-color);
	font-size: 0.85em;
	line-height: 1;
}

.crew-core-roadmap.has-custom-bullet-icon .crew-core-roadmap__point::before {
	content: none;
}

.crew-core-roadmap__point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--crew-core-roadmap-bullet-icon-size);
	height: var(--crew-core-roadmap-bullet-icon-size);
	margin-top: 0.32em;
	flex-shrink: 0;
}

.crew-core-roadmap__point-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.crew-core-roadmap__point-text {
	min-width: 0;
}

@media (max-width: 1024px) {
	.crew-core-roadmap__track::before {
		display: none;
	}

	.crew-core-roadmap__item {
		padding-top: 0;
	}

	.crew-core-roadmap__pill {
		position: static;
		margin-bottom: 18px;
	}

	.crew-core-roadmap__pill::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.crew-core-roadmap {
		padding: 24px 20px;
	}

	.crew-core-roadmap__track {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.crew-core-roadmap__title {
		max-width: none;
		font-size: 24px;
	}

	.crew-core-roadmap__point {
		font-size: 16px;
	}
}
