/* Process Slider */
[data-steps-slider] {
	--steps-pin-safe-top: 96px;
	--steps-pin-safe-bottom: 32px;
	--steps-card-min-height: 569px;
	--steps-toggle-min-height: 101px;
	--steps-reveal-min-height: 254px;
	--steps-card-height: var(--steps-card-dynamic-height, var(--steps-card-min-height));
	--steps-toggle-height: var(--steps-toggle-dynamic-height, var(--steps-toggle-min-height));
	--steps-reveal-height: var(--steps-reveal-dynamic-height, var(--steps-reveal-min-height));
	--steps-summary-height: calc(var(--steps-card-height) - var(--steps-toggle-height) - var(--steps-closed-gap, 0px));
	--steps-summary-open-height: calc(var(--steps-card-height) - var(--steps-reveal-height) - var(--steps-open-gap, 0px));
	position: relative;
}

[data-steps-stage],
[data-steps-pin],
[data-steps-viewport],
[data-steps-track],
[data-steps-item],
[data-steps-card],
[data-steps-summary] {
	box-sizing: border-box;
}

[data-steps-stage] {
	position: relative;
	overflow: visible;
	width: 100%;
}

/* An empty Description prop still renders the block and its flex gap;
   drop it so the heading keeps the 60px rhythm to the rail (HWW §3). */
.process-slider .description:empty {
	display: none;
}

[data-steps-pin] {
	position: relative;
	width: 100%;
	overflow: visible;
}

[data-steps-slider] .pin-spacer:has(> [data-steps-pin]) {
	background: var(--_system-colors---dark);
	box-shadow: 0 1px 0 var(--_system-colors---dark);
}

/* Light variant sits on an ambient zone: keep the spacer clear so the rings show,
   and draw the mobile scroll indicator for a light background. The root keeps
   data-horizontal-scroll-dark because attributes cannot vary per variant. */
[data-wf--our-process--variant="light"] .pin-spacer:has(> [data-steps-pin]) {
	background: none;
	box-shadow: none;
}

[data-wf--our-process--variant="light"] [data-scroll-indicator="dark"] {
	--scroll-indicator-track: inherit;
	--scroll-indicator-thumb: inherit;
}

[data-steps-viewport] {
	overflow: visible;
	width: 100%;
}

[data-steps-track] {
	flex-wrap: nowrap;
	box-sizing: border-box;
	padding-inline: 0;
	will-change: transform;
}

[data-steps-slider][data-steps-mode="static"] [data-steps-track] {
	display: flex;
}

/* Three across, but min-width is deliberately left alone: it is the knob for the
   card's minimum width and belongs to the Designer. Setting it here would win on
   specificity and silently strike out whatever is set on the class. The track
   scrolls horizontally, so a larger min-width just shows fewer, wider cards. */
[data-steps-slider][data-steps-mode="static"] [data-steps-item] {
	flex: 0 0 calc((100% - 40px) / 3);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card],
[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle] {
	width: 100%;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card] {
	display: flex;
	flex-direction: column;
	height: var(--steps-card-height);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-summary] {
	flex: 0 0 var(--steps-summary-height);
	height: var(--steps-summary-height);
	transition: flex-basis 360ms cubic-bezier(0.16, 1, 0.3, 1),
	height 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card].is-open [data-steps-summary] {
	flex-basis: var(--steps-summary-open-height);
	height: var(--steps-summary-open-height);
}


/* No border reset here: Webflow's normalize already zeroes it, and a reset at this
   specificity would strike out the outline the Light variant sets in the Designer. */
[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle] {
	appearance: none;
	cursor: pointer;
	flex: 0 0 var(--steps-toggle-height);
	font: inherit;
	height: var(--steps-toggle-height);
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-toggle][hidden] {
	display: none !important;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-reveal] {
	display: grid;
	flex: 0 0 0;
	grid-template-rows: 0fr;
	height: 0;
	opacity: 0;
	transition: flex-basis 360ms cubic-bezier(0.16, 1, 0.3, 1),
	grid-template-rows 360ms cubic-bezier(0.16, 1, 0.3, 1),
	height 360ms cubic-bezier(0.16, 1, 0.3, 1),
	opacity 220ms ease;
}

/* The reveal height is the tallest panel across all steps, so a step without an
   outcome block centers its copy instead of leaving a gap at the bottom. */
[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-reveal] > * {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
}

[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card].is-open [data-steps-reveal] {
	flex-basis: var(--steps-reveal-height);
	grid-template-rows: 1fr;
	height: var(--steps-reveal-height);
	opacity: 1;
}

/* Keep this breakpoint in sync with MOTION_BREAKPOINT_PX in process-slider.js. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	/* Figma card height at 1440 (5719:2243); content still grows past it. Applied
	   to the used height, not --steps-card-min-height: the JS derives its fallback
	   summary heights from that variable, and 689 there inflates the open card.
	   The short-viewport block below redefines the height again. */
	[data-steps-slider]:not([data-steps-mode="static"]) {
		--steps-card-height: max(var(--steps-card-dynamic-height, var(--steps-card-min-height)), 689px);
	}

	[data-steps-slider].is-steps-ready [data-steps-intro] {
		will-change: transform, opacity;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-pin] {
		min-height: var(--steps-card-height);
	}

	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card] .steps-card-title,
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card] .steps-number {
		transition: font-size 360ms cubic-bezier(0.16, 1, 0.3, 1),
		line-height 360ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* No slider ancestor: the JS measuring clone lives in document.body. */
	[data-steps-card].is-open .steps-number {
		font-size: var(--_sizes---s--80);
	}
}

@media (min-width: 992px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
	[data-steps-slider]:not([data-steps-mode="static"]) {
		--steps-card-min-height: 580px;
		--steps-card-height: min(
			var(--steps-card-dynamic-height, 580px),
			calc(100vh - var(--steps-pin-safe-top) - var(--steps-pin-safe-bottom))
		);
		--steps-intro-stage-gap: 48px;
	}

	/* Short viewports: tighten the open card so summary and reveal fit the capped
	   height. Scoped from the card, not the slider: the JS measures a clone of the
	   card in document.body, and these rules must apply to that clone too. */
	/* Selectors carry a class so they match the three-class Designer combos
	   (.card-grid.dark.steps-grid, .label.mw-310.steps-reveal-note) and win on
	   source order. */
	[data-steps-card] .steps-grid[data-steps-summary] {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	[data-steps-card] .steps-card-title {
		margin-bottom: 12px;
	}

	[data-steps-card].is-open .steps-number {
		font-size: var(--_sizes---s--60);
		line-height: 1.15;
	}

	[data-steps-card] [data-steps-reveal] .steps-reveal-description {
		margin-top: 24px;
	}

	[data-steps-card] [data-steps-reveal] .steps-reveal-note {
		margin-top: 24px;
		margin-bottom: 24px;
	}

	[data-steps-card] .steps-reveal-outcome {
		margin-bottom: 24px;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-stage] {
		margin-top: var(--steps-intro-stage-gap);
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-pin] {
		padding-top: 0 !important;
		padding-bottom: 24px !important;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-track] {
		align-items: flex-start;
	}

	[data-steps-slider]:not([data-steps-mode="static"]).is-steps-ready [data-steps-item] {
		align-self: flex-start;
		height: var(--steps-card-height);
	}
}

@media (max-width: 991px), (prefers-reduced-motion: reduce) {
	[data-steps-pin] {
		min-height: 0;
	}

	/* Native-scroll strip: every card gets the measured height from the JS, same
	   as desktop, so the row stays level while a step opens. */
	[data-steps-track] {
		align-items: flex-start;
	}

	[data-steps-viewport] {
		overflow: visible;
	}

	[data-steps-track] {
		overflow-x: auto;
		overflow-y: hidden;
		padding-inline: 0;
		transform: none !important;
		width: 100%;
		will-change: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 991px) {
	[data-steps-slider][data-steps-mode="static"] [data-steps-item] {
		flex-basis: 330px;
		max-width: 100%;
	}

	/* Lower floor than desktop so the compact card is not padded back up. Still
	   non-zero: it is the pre-measure height and the fallback without the JS. */
	[data-steps-slider]:not([data-steps-mode="static"]) {
		--steps-card-min-height: 480px;
	}

	/* Spacing lives in the Designer classes (medium). The open number stays here:
	   it keys off the card state, which is all the measuring clone carries. */
	[data-steps-card].is-open .steps-number {
		font-size: var(--_sizes---s--60);
		line-height: 1.15;
		margin-bottom: 12px;
	}

	/* Transition only inside the slider: on the clone it would freeze the number
	   at its closed size while it is measured. */
	[data-steps-slider]:not([data-steps-mode="static"]) [data-steps-card] .steps-number {
		transition: font-size 360ms cubic-bezier(0.16, 1, 0.3, 1),
		margin-bottom 360ms cubic-bezier(0.16, 1, 0.3, 1);
	}
}

[data-steps-slider].is-steps-native-scroll [data-steps-pin] {
	min-height: 0;
}

[data-steps-slider].is-steps-native-scroll [data-steps-viewport] {
	overflow: visible;
}

[data-steps-slider].is-steps-native-scroll [data-steps-track] {
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	padding-inline: 0;
	transform: none !important;
	width: 100%;
	will-change: auto;
	-webkit-overflow-scrolling: touch;
}

/* End Process Slider */