.process {
	--process-card: var(--panel);
	--process-tunnel: var(--fill);
	--process-dot: var(--ink);
	position: relative;
	padding-block: var(--air-6);
}
.process .section-label {
	margin-top: var(--sp-5);
	margin-bottom: var(--air-6);
}
.process__stage {
	--card-w: 62%;
	--step-x: 12.2581%;
	--jump-x: 87.7419%;
	--line-y: calc(11.73 * var(--px));
	--line-h: calc(7 * var(--px));
	--rail-h: calc(40.35 * var(--px));
	--node-w: calc(54.62 * var(--px));
	--node-h: calc(42.6 * var(--px));
	--node-cx: calc(26.85 * var(--px));
	--pin-d: calc(18 * var(--px));
	--dot-d: calc(10 * var(--px));
	--bead-d: calc(14 * var(--px));
	--ray-h: calc(5 * var(--px));
	--pin-inset: calc(20 * var(--px));
	--pin-step: calc(20% - 8 * var(--px));
}
.process__rail {
	position: relative;
	height: var(--rail-h);
}
.process__line {
	position: absolute;
	inset-inline: 0;
	top: var(--line-y);
	height: var(--line-h);
	border-radius: var(--r-full);
	background: color-mix(in srgb, var(--ink) 18%, var(--field));
}
.process__pins {
	position: absolute;
	inset: 0;
}
.process__pin {
	position: absolute;
	top: calc(var(--line-y) + var(--line-h) / 2);
	left: calc(var(--pin-inset) + var(--i) * var(--pin-step));
	width: calc(40 * var(--px));
	height: calc(40 * var(--px));
	transform: translate(-50%, -50%);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.process__pin::before,
.process__pin::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	border-radius: var(--r-full);
	transition: transform var(--dur) var(--ease);
}
.process__pin::before {
	width: var(--pin-d);
	height: var(--pin-d);
	margin: calc(var(--pin-d) / -2);
	background: color-mix(in srgb, var(--ink) 23%, var(--field));
}
.process__pin::after {
	width: var(--dot-d);
	height: var(--dot-d);
	margin: calc(var(--dot-d) / -2);
	background: var(--ink);
}
.process__pin[aria-selected="true"],
.process__pin.is-live { z-index: 4; }
.process__pin[aria-selected="true"]::before,
.process__pin.is-live::before { background: var(--process-tunnel); }
.process__pin[aria-selected="true"]::after,
.process__pin.is-live::after { background: var(--process-dot); }
.process__pin:hover::before {
	transform: scale(1.18);
}
.process__pin:hover::after {
	transform: scale(1.14);
}
.process__pin:focus-visible {
	outline: calc(2 * var(--px)) solid var(--ember-60);
	outline-offset: calc(2 * var(--px));
	border-radius: var(--r-sm);
}
.process__node {
	position: absolute;
	top: 0;
	left: calc(var(--pin-inset) + var(--node-a) * var(--pin-step));
	z-index: 2;
	width: var(--node-w);
	height: var(--node-h);
	margin-inline-start: calc(var(--node-cx) * -1);
	color: var(--process-tunnel);
	pointer-events: none;
	transform-origin: var(--node-cx) calc(var(--line-y) + var(--line-h) / 2);
	transition: transform 220ms var(--ease);
}
.process__stage:not(.is-open) .process__node {
	transform: scale(0);
	transition-duration: 130ms;
}
.process__node-flip {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(var(--flip));
	transform-origin: var(--node-cx) 50%;
}
.process__node-shape {
	display: none;
	width: 100%;
	height: 100%;
}
.process__stage[data-shape="mid"] .process__node-shape--mid,
.process__stage[data-shape="end"] .process__node-shape--end {
	display: block;
}
.process__node svg {
	display: block;
	width: 100%;
	height: 100%;
}
.process__bead {
	position: absolute;
	z-index: 3;
	top: calc(var(--line-y) + var(--line-h) / 2);
	height: var(--bead-d);
	transform: translateY(-50%);
	left: calc(var(--pin-inset) + var(--a) * var(--pin-step) - var(--bead-d) / 2);
	right: calc(100% - var(--pin-inset) - var(--a) * var(--pin-step) - var(--bead-d) / 2);
	border-radius: var(--r-full);
	background: var(--process-dot);
	pointer-events: none;
}
.process__stage.is-travel .process__bead {
	height: var(--ray-h);
}
.process__stage[data-dir="right"] .process__bead {
	transition: right 190ms var(--ease), left 250ms var(--ease) 90ms,
		height 120ms var(--ease);
}
.process__stage[data-dir="left"] .process__bead {
	transition: left 190ms var(--ease), right 250ms var(--ease) 90ms,
		height 120ms var(--ease);
}
.process__deck {
	position: relative;
	aspect-ratio: 6.2634;
	container-type: inline-size;
	overflow: hidden;
	border-radius: var(--r-xl);
}
.process__card {
	--card-pad: clamp(1.25rem, 2.4vw, 2rem);
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--i);
	width: var(--card-w);
	height: 100%;
	border-radius: var(--r-xl);
	background: var(--process-card) center / cover no-repeat;
	box-shadow: calc(-18 * var(--px)) 0 calc(34 * var(--px)) calc(-16 * var(--px)) color-mix(in srgb, var(--ink) 20%, transparent);
	--gt: clamp(0, calc(var(--i) - var(--a)), 1);
	transform: translateX(calc(var(--i) * var(--step-x) + var(--gt) * var(--jump-x)));
	transition: transform var(--dur) var(--ease);
}
@media (min-width: 1024px) {
	.process {
		content-visibility: auto;
		contain-intrinsic-size: auto calc(520 * var(--px));
	}
	.process__card {
		background-image: image-set(var(--art-1x) 1x, var(--art-2x) 2x);
	}
	.process__card:last-child:not(.is-active) { background-image: none; }
}
.process__num {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--step-x);
	transform: translateY(-50%);
	text-align: center;
	color: var(--ink-2);
	font-size: var(--fs-num);
	font-weight: var(--fw-medium);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--tr-tight);
	line-height: var(--lh-flat);
	transition: color var(--dur) var(--ease);
}
.process__card.is-active .process__num {
	color: var(--ember-60);
}
.process__body {
	position: absolute;
	top: 50%;
	left: var(--step-x);
	width: calc(var(--open-x, 41%) - var(--step-x));
	max-width: 46ch;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.process__card.is-active .process__body {
	opacity: 1;
}
.process__name {
	margin: 0 0 0.4em;
	font-size: var(--fs-7);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	line-height: var(--lh-display);
}
.process__text {
	margin: 0;
	color: var(--ink-2);
	font-size: var(--fs-4);
	line-height: var(--lh-text);
}
@property --bullet-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --bullet-y-last { syntax: "<length>"; inherits: true; initial-value: 0px; }
@media (max-width: 1023px) {
	.process__stage {
		--k: 0.78;
		--process-card: var(--panel-hi);
		--process-tunnel: var(--process-card);
		--process-dot: var(--fill);
		--deck-pad: var(--gutter);
		--rail-x: calc(var(--gutter) - 12.8 * var(--px) * var(--k));
		--rail-w: calc(7 * var(--px) * var(--k));
		--bullet-y: calc(8.8 * var(--px) * var(--k));
		--bullet-y-last: calc(-2.2 * var(--px) * var(--k));
		--pin-d: calc(18 * var(--px) * var(--k));
		--dot-d: calc(10 * var(--px) * var(--k));
		--bead-d: calc(14 * var(--px) * var(--k));
		--ray-w: calc(5 * var(--px) * var(--k));
		--card-r: calc(var(--r-xl) * var(--k));
		position: relative;
		margin-inline-start: calc(var(--gutter) * -1);
	}
	.process { overflow-x: clip; }
	.process__rail {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
		margin: 0;
		z-index: 2;
		pointer-events: none;
	}
	.process__line,
	.process__pins { display: none; }
	.process__node {
		position: absolute;
		left: var(--rail-x);
		top: var(--node-y, 0px);
		width: calc(48.81 * var(--px));
		height: var(--node-h);
		margin: 0;
		transform-origin: var(--node-ox) var(--node-oy);
		transform: translate(calc(var(--node-ox) * -1), calc(var(--node-oy) * -1)) scale(var(--k));
		transition: transform 220ms var(--ease);
	}
	.process__stage:not(.is-open) .process__node {
		transform: translate(calc(var(--node-ox) * -1), calc(var(--node-oy) * -1)) scale(0);
		transition-duration: 130ms;
	}
	.process__node-flip { transform: none; }
	.process__node-shape { position: absolute; inset: 0; }
	.process__stage[data-shape] .process__node-shape--mid,
	.process__stage[data-shape] .process__node-shape--end { display: none; }
	.process__stage[data-vshape="first"] .process__node { --node-h: calc(55.56 * var(--px)); --node-oy: 51.12%; }
	.process__stage[data-vshape="mid"]   .process__node { --node-h: calc(72.23 * var(--px)); --node-oy: 62.40%; }
	.process__stage[data-vshape="last"]  .process__node { --node-h: calc(62.27 * var(--px)); --node-oy: 62.74%; }
	.process__node { --node-ox: 32.78%; --node-h: calc(72.23 * var(--px)); --node-oy: 62.40%; }
	.process__stage[data-vshape="first"] .process__node-shape--v-first,
	.process__stage[data-vshape="mid"] .process__node-shape--v-mid,
	.process__stage[data-vshape="last"] .process__node-shape--v-last { display: block; }
	.process__node-shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
	.process__bead {
		display: block;
		position: absolute;
		z-index: 3;
		left: var(--rail-x);
		width: var(--bead-d);
		top: calc(var(--bead-y, 0px) - var(--bead-d) / 2);
		bottom: calc(100% - var(--bead-y, 0px) - var(--bead-d) / 2);
		height: auto;
		right: auto;
		transform: translateX(-50%);
		border-radius: var(--r-full);
		pointer-events: none;
	}
	.process__stage.is-travel .process__bead { width: var(--ray-w); height: auto; }
	.process__stage[data-vdir="down"] .process__bead {
		transition: bottom 190ms var(--ease), top 250ms var(--ease) 90ms,
			width 120ms var(--ease);
	}
	.process__stage[data-vdir="up"] .process__bead {
		transition: top 190ms var(--ease), bottom 250ms var(--ease) 90ms,
			width 120ms var(--ease);
	}
	.process__deck {
		position: relative;
		aspect-ratio: auto;
		overflow: visible;
		border-radius: 0;
		display: grid;
		gap: calc(30 * var(--px) * var(--k));
		padding-inline-start: var(--deck-pad);
		background: none;
		border: 0;
	}
	.process__deck::before {
		content: "";
		position: absolute;
		top: var(--bullet-y);
		left: var(--rail-x);
		width: var(--rail-w);
		height: var(--rail-len, 0px);
		transform: translateX(-50%);
		border-radius: var(--r-full);
		background: color-mix(in srgb, var(--ink) 23%, var(--field));
	}
	.process__card::before,
	.process__card::after {
		content: "";
		position: absolute;
		top: var(--bullet-y);
		left: calc(var(--rail-x) - var(--deck-pad));
		border-radius: var(--r-full);
		transform: translate(-50%, -50%);
		transition: opacity 200ms var(--ease);
	}
	.process__card::before {
		width: var(--pin-d);
		height: var(--pin-d);
		background: color-mix(in srgb, var(--ink) 23%, var(--field));
	}
	.process__card::after {
		width: var(--dot-d);
		height: var(--dot-d);
		background: var(--ink);
	}
	.process__card:last-child::before,
	.process__card:last-child::after { top: var(--bullet-y-last); }
	.process__card.is-live::before,
	.process__card.is-live::after { opacity: 0; }
	.process__card {
		position: relative;
		display: grid;
		--num-size: calc(var(--fs-9) * 1.25);
		grid-template-columns: calc(var(--num-size) * 0.8) minmax(0, 1fr);
		align-items: stretch;
		column-gap: var(--sp-3);
		width: auto;
		height: auto;
		padding: var(--sp-3) var(--sp-4);
		background-image: image-set(var(--art-m-1x) 1x, var(--art-m-2x) 2x);
		background-position: center right;
		background-size: cover;
		background-repeat: no-repeat;
		padding-right: 6.25rem;
		border-radius: var(--card-r);
		background-color: var(--process-card);
		box-shadow: 0 calc(12 * var(--px)) calc(26 * var(--px)) calc(-14 * var(--px)) color-mix(in srgb, var(--ink) 22%, transparent);
		transform: none;
		transition: border-top-left-radius 220ms var(--ease);
	}
	.process__card.is-live { border-top-left-radius: 0; }
	.process__num,
	.process__card.is-active .process__num {
		position: static;
		display: grid;
		place-items: center;
		width: auto;
		height: 100%;
		transform: none;
		color: color-mix(in srgb, var(--ink) 26%, transparent);
		font-size: var(--num-size);
		font-weight: var(--fw-display);
		letter-spacing: var(--tr-display);
		line-height: var(--lh-flat);
		transition: color 420ms var(--ease);
	}
	.process__card.is-live .process__num { color: var(--ember-60); }
	.process__body {
		position: static;
		width: auto;
		transform: none;
		opacity: 1;
	}
	.process__name { font-size: var(--fs-7); }
	.process__text {
		margin-top: var(--sp-1);
		color: var(--ink-2);
		font-size: var(--fs-4);
		line-height: var(--lh-text);
		transition: color 420ms var(--ease);
	}
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.process__card {
			animation: process-card-in linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 55%;
		}
	}
}
@media (min-width: 1024px) {
	.process__card.is-peek {
		transform: translateX(calc(var(--i) * var(--step-x) + var(--gt) * var(--jump-x) - var(--jump-x) * 0.25));
	}
	.process__card.is-peek .process__body { opacity: 1; }
}
@keyframes process-card-in {
	from {
		opacity: 0;
		transform: translateY(calc(18 * var(--px)));
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.process__node,
	.process__bead,
	.process__card,
	.process__card::before,
	.process__card::after { transition: none; }
	.process__stage:not(.is-open) .process__node { transform: translate(calc(var(--node-ox) * -1), calc(var(--node-oy) * -1)); }
	.process__stage.is-travel .process__bead { width: var(--bead-d); height: auto; }
}