.ssct {
	--ssct-bg: #05070c;
	--ssct-container: 1480px;
	--ssct-intro-column: .9fr;
	--ssct-timeline-column: 1.1fr;
	--ssct-column-gap: 120px;
	--ssct-sticky-top: 128px;
	--ssct-step-gap: 132px;
	--ssct-marker-size: 58px;
	--ssct-line: rgba(255, 255, 255, .14);
	--ssct-fill: #079de3;
	--ssct-marker-bg: #0b0e14;
	--ssct-marker-border: rgba(255, 255, 255, .28);
	--ssct-marker-text: #fff;
	--ssct-marker-active-bg: #079de3;
	--ssct-marker-active-border: #079de3;
	--ssct-marker-active-text: #fff;
	--ssct-marker-current-bg: #f2ff3b;
	--ssct-marker-current-border: #f2ff3b;
	--ssct-marker-current-text: #05070c;
	--ssct-marker-glow: rgba(242, 255, 59, .16);
	--ssct-inactive-opacity: .28;
	--ssct-active-opacity: .58;
	background: var(--ssct-bg);
	color: #fff;
	font-size: var(--size-font, 16px);
	padding: 9em 2em 10em;
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.ssct,
.ssct * {
	box-sizing: border-box;
}

.ssct__ambient {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 12% 13%, rgba(7, 157, 227, .12), transparent 29em),
		radial-gradient(circle at 92% 78%, rgba(242, 255, 59, .055), transparent 28em),
		linear-gradient(115deg, transparent 0 48%, rgba(255, 255, 255, .018) 48% 48.08%, transparent 48.08% 100%);
}

.ssct__inner {
	display: grid;
	grid-template-columns: minmax(0, var(--ssct-intro-column)) minmax(0, var(--ssct-timeline-column));
	column-gap: var(--ssct-column-gap);
	align-items: start;
	width: 100%;
	max-width: min(var(--ssct-container), var(--size-container, var(--ssct-container)));
	margin-inline: auto;
}

.ssct__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
	margin: 0;
}

.ssct--sticky-intro .ssct__header {
	position: sticky;
	top: var(--ssct-sticky-top);
}

.ssct__eyebrow,
.ssct__context,
.ssct__period {
	display: block;
	font-family: inherit;
	font-size: .75em;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ssct__eyebrow {
	color: #f2ff3b;
	margin: 0 0 2em;
}

.ssct__heading {
	color: #fff;
	font-family: inherit;
	font-size: clamp(3em, 5vw, 6.25em);
	font-weight: 500;
	letter-spacing: -.055em;
	line-height: .94;
	margin: 0;
	max-width: 8.2ch;
	text-wrap: balance;
}

.ssct__context {
	color: #079de3;
	margin: 3em 0 0;
}

.ssct__intro {
	color: rgba(255, 255, 255, .68);
	font-size: clamp(1em, 1.2vw, 1.2em);
	font-weight: 400;
	line-height: 1.55;
	margin: 1.4em 0 0;
	max-width: 31em;
}

.ssct__intro > :first-child,
.ssct__description > :first-child {
	margin-top: 0;
}

.ssct__intro > :last-child,
.ssct__description > :last-child {
	margin-bottom: 0;
}

.ssct__timeline {
	min-width: 0;
	position: relative;
	padding-block: .4em;
}

.ssct__collection,
.ssct__list {
	min-width: 0;
}

.ssct__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ssct-step-gap);
	margin: 0;
	padding: 0;
}

.ssct__item {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5em, 3vw, 3em);
	min-width: 0;
	position: relative;
}

.ssct__line {
	pointer-events: none;
	background: var(--ssct-line);
	width: 2px;
	position: absolute;
	top: calc(var(--ssct-marker-size) / 2);
	bottom: calc(var(--ssct-marker-size) / 2);
	left: calc(var(--ssct-marker-size) / 2 - 1px);
	z-index: 0;
}

.ssct__fill {
	background: var(--ssct-fill);
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	transform: scaleY(1);
	transform-origin: 50% 0;
	will-change: transform;
}

.ssct__marker {
	color: var(--ssct-marker-text);
	background: var(--ssct-marker-bg);
	border: 1px solid var(--ssct-marker-border);
	border-radius: 50%;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--ssct-marker-size);
	height: var(--ssct-marker-size);
	font-family: inherit;
	font-size: .75em;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1;
	position: relative;
	z-index: 1;
	transition:
		color .4s cubic-bezier(.645, .045, .355, 1),
		background-color .4s cubic-bezier(.645, .045, .355, 1),
		border-color .4s cubic-bezier(.645, .045, .355, 1),
		box-shadow .4s cubic-bezier(.645, .045, .355, 1),
		transform .4s cubic-bezier(.645, .045, .355, 1);
}

.ssct [data-step-timeline-item][data-status="active"] .ssct__marker {
	color: var(--ssct-marker-active-text);
	background: var(--ssct-marker-active-bg);
	border-color: var(--ssct-marker-active-border);
}

.ssct [data-step-timeline-item][data-current] .ssct__marker {
	color: var(--ssct-marker-current-text);
	background: var(--ssct-marker-current-bg);
	border-color: var(--ssct-marker-current-border);
	box-shadow: 0 0 0 .65em var(--ssct-marker-glow);
	transform: scale(1.04);
}

.ssct__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
	max-width: 35em;
	padding-top: .3em;
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity .35s cubic-bezier(.645, .045, .355, 1),
		transform .4s cubic-bezier(.645, .045, .355, 1);
}

.ssct[data-ssct-ready="true"] [data-step-timeline-item] .ssct__content {
	opacity: var(--ssct-inactive-opacity);
}

.ssct[data-ssct-ready="true"] [data-step-timeline-item][data-status="active"] .ssct__content {
	opacity: var(--ssct-active-opacity);
}

.ssct[data-ssct-ready="true"] [data-step-timeline-item][data-current] .ssct__content,
.ssct[data-ssct-reduced="true"] [data-step-timeline-item] .ssct__content {
	opacity: 1;
}

.ssct[data-ssct-ready="true"] [data-step-timeline-item][data-current] .ssct__content {
	transform: translateY(-.2em);
}

.ssct__period {
	color: #079de3;
	margin: 0 0 1.15em;
}

.ssct__step-title {
	color: #fff;
	font-family: inherit;
	font-size: clamp(1.75em, 2.75vw, 3em);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: 1.04;
	margin: 0;
	max-width: 14ch;
	text-wrap: balance;
}

.ssct__description {
	color: rgba(255, 255, 255, .68);
	font-size: clamp(.98em, 1.1vw, 1.125em);
	font-weight: 400;
	line-height: 1.55;
	margin: 1.3em 0 0;
	max-width: 34em;
}

@media (max-width: 1024px) {
	.ssct {
		--ssct-column-gap: 64px;
		padding: 7em 1.5em 8em;
	}

	.ssct__inner {
		grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	}

	.ssct__heading {
		font-size: clamp(3em, 6.4vw, 5em);
	}
}

@media (max-width: 767px) {
	.ssct {
		--ssct-marker-size: 48px;
		--ssct-step-gap: 80px;
		padding: 5em 1em 6em;
	}

	.ssct__inner {
		display: block;
		max-width: none;
	}

	.ssct--sticky-intro .ssct__header {
		position: static;
	}

	.ssct__header {
		margin-bottom: 4.5em;
	}

	.ssct__eyebrow {
		margin-bottom: 1.5em;
	}

	.ssct__heading {
		font-size: clamp(2.85em, 14vw, 4.4em);
		max-width: 9ch;
	}

	.ssct__context {
		margin-top: 2.5em;
	}

	.ssct__intro {
		font-size: 1em;
		max-width: 35em;
	}

	.ssct__item {
		gap: 1.25em;
	}

	.ssct__step-title {
		font-size: clamp(1.65em, 8vw, 2.2em);
		max-width: 15ch;
	}

	.ssct__description {
		font-size: .98em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssct__fill,
	.ssct__marker,
	.ssct__content {
		transition: none !important;
	}

	.ssct__fill {
		transform: scaleY(1) !important;
	}
}

