/**
 * Scroll Story — sticky split storytelling
 * Desktop: wheel = one step | Mobile: scrub + swipe, dvh-safe
 */

.ss-section {
	--ss-gap: clamp(28px, 4vw, 72px);
	--ss-nav-width: 72px;
	--ss-sticky-offset: 0px;
	--ss-step-min-height: 100vh;
	--ss-image-duration: 1100ms;
	--ss-text-duration: 700ms;
	--ss-image-scale: 1.02;
	--ss-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ss-slide-out-ease: cubic-bezier(0.33, 0, 0.2, 1);
	--ss-fade-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ss-mobile-fade: 700ms;
	--ss-image-radius: 18px;
	--ss-rail-color: rgba(0, 0, 0, 0.12);
	--ss-rail-fill: #c62828;
	--ss-accent: #4f5d2e;
	--ss-inactive-opacity: 0.28;
	--ss-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ss-surface: #fff;
	--ss-mobile-image-height: 42vh;
	--ss-mobile-step-size: 100vh;
	--ss-mobile-stack-gap: 24px;
	--ss-mobile-media-gap: 12px;
	--ss-nav-gap: 22px;
	--ss-nav-size: 1.125rem;
	--ss-title-color: #141414;
	--ss-text-color: #6a6a6a;
	--ss-rail-width: 2px;
	--ss-rail-gap: 10px;

	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: visible !important;
	color: inherit;
	background: transparent;
	isolation: isolate;
}

.ss-section *,
.ss-section *::before,
.ss-section *::after {
	box-sizing: border-box;
}

/* Kill theme list markers / stray bullets */
.ss-section ol,
.ss-section ul,
.ss-nav-list,
.ss-nav-item {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.ss-nav-item::marker,
.ss-nav-list::marker {
	content: none !important;
	display: none !important;
}

.ss-section .ss-step::before,
.ss-section .ss-step::after,
.ss-section .ss-step-inner::before,
.ss-section .ss-step-inner::after,
.ss-section .ss-title::before,
.ss-section .ss-title::after,
.ss-section .ss-description::before,
.ss-section .ss-description::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Critical: stretch both columns so sticky/pin has full section height */
.ss-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ss-gap);
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

/* DESKTOP: tall scrub track so sticky text can freeze */
.ss-col-copy {
	display: grid;
	grid-template-columns: var(--ss-nav-width) minmax(0, 1fr);
	gap: 4px;
	min-width: 0;
	align-items: stretch;
	min-height: calc(var(--ss-steps, 3) * var(--ss-step-min-height, 100vh));
}

/* -------- NAV / RAIL -------- */
.ss-nav-wrap {
	position: relative;
	min-width: 0;
	/* NEVER overflow:hidden here — it kills position:sticky on the numbers */
	overflow: visible;
	/* Must span full scrub height so sticky numbers stay for the whole story */
	align-self: stretch;
}

.ss-nav-sticky {
	position: sticky;
	top: var(--ss-sticky-offset, 0px);
	height: calc(100vh - var(--ss-sticky-offset, 0px));
	display: flex;
	align-items: center;
	justify-content: flex-start;
	z-index: 3;
	width: 100%;
}

.ss-nav-cluster {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ss-nav-gap);
	/* Room for tracking line on the LEFT of numbers */
	padding: 10px 0 10px calc(var(--ss-rail-width) + var(--ss-rail-gap));
	margin: 0;
}

/* Tracking line — left of step numbers */
.ss-progress {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	width: var(--ss-rail-width);
	min-width: 2px;
	transform: none;
	background: var(--ss-rail-color);
	border-radius: 999px;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	display: block;
	opacity: 1;
	visibility: visible;
}

.ss-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background: var(--ss-rail-fill);
	border-radius: inherit;
	transition: height 0.7s var(--ss-ease);
}

.ss-section.ss-hide-nav-line .ss-progress {
	display: none;
}

.ss-section.ss-hide-nav-line .ss-nav-cluster {
	padding-left: 0;
	align-items: center;
}

.ss-navigation {
	position: relative;
	z-index: 1;
}

.ss-nav-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ss-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.ss-nav-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-nav-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 2em;
	margin: 0;
	padding: 2px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #1a1a1a;
	font-family: inherit;
	font-size: var(--ss-nav-size);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	opacity: 0.32;
	cursor: default;
	transition: opacity 0.55s var(--ss-ease), color 0.55s var(--ss-ease),
		transform 0.55s var(--ss-ease);
}

.ss-section.ss-nav-clickable .ss-nav-btn {
	cursor: pointer;
}

.ss-nav-btn:hover,
.ss-nav-btn:focus-visible {
	opacity: 0.72;
}

.ss-nav-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.ss-nav-btn.is-active {
	opacity: 1;
	font-weight: 700;
	color: #111;
	transform: translateX(1px);
}

button.ss-nav-btn {
	appearance: none;
	-webkit-appearance: none;
}

.ss-section.ss-hide-numbers .ss-navigation {
	display: none;
}

/* -------- STEPS / TEXT (sticky stage, fade in place) -------- */
.ss-steps {
	position: sticky;
	top: var(--ss-sticky-offset, 0px);
	height: calc(100vh - var(--ss-sticky-offset, 0px));
	max-height: calc(100vh - var(--ss-sticky-offset, 0px));
	align-self: start;
	min-width: 0;
	width: 100%;
	overflow: hidden;
	display: block;
}

.ss-step {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	min-height: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 20px 0 0;
	margin: 0;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 0, 0);
	filter: none;
	pointer-events: none;
	z-index: 0;
	/* WAAPI drives motion; keep CSS transitions off so they don't fight sequence */
	transition: none;
	will-change: opacity, transform, filter;
	backface-visibility: hidden;
}

.ss-step.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

.ss-step.is-leaving {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	z-index: 2;
}

.ss-step-inner {
	width: 100%;
	max-width: 34rem;
	margin: 0;
	text-align: center;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
	/* Padding comes from Bricks Style → Content → Padding (applied here + .ss-step) */
	box-sizing: border-box;
}

.ss-step.is-active .ss-step-index,
.ss-step.is-active .ss-title,
.ss-step.is-active .ss-description {
	animation: none;
}

/* CSS fallbacks when WAAPI is unavailable */
.ss-section.ss-text-animation-fade-up .ss-step,
.ss-section.ss-text-animation-fade-slide .ss-step {
	transform: translate3d(0, 24px, 0);
	transition:
		opacity var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease),
		transform var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease);
}

.ss-section.ss-text-animation-fade-up .ss-step.is-active,
.ss-section.ss-text-animation-fade-slide .ss-step.is-active {
	transform: translate3d(0, 0, 0);
}

.ss-section.ss-text-animation-fade-up .ss-step.is-leaving,
.ss-section.ss-text-animation-fade-slide .ss-step.is-leaving {
	transform: translate3d(0, -18px, 0);
}

.ss-section.ss-text-animation-fade-down .ss-step {
	transform: translate3d(0, -24px, 0);
	transition:
		opacity var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease),
		transform var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease);
}

.ss-section.ss-text-animation-fade-down .ss-step.is-active {
	transform: translate3d(0, 0, 0);
}

.ss-section.ss-text-animation-fade-down .ss-step.is-leaving {
	transform: translate3d(0, 18px, 0);
}

.ss-section.ss-text-animation-slide .ss-step {
	transform: translate3d(36px, 0, 0);
	transition:
		opacity var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease),
		transform var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease);
}

.ss-section.ss-text-animation-slide .ss-step.is-active {
	transform: translate3d(0, 0, 0);
}

.ss-section.ss-text-animation-slide .ss-step.is-leaving {
	transform: translate3d(-32px, 0, 0);
}

.ss-section.ss-text-animation-scale .ss-step {
	transform: scale(0.94);
	transition:
		opacity var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease),
		transform var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease);
}

.ss-section.ss-text-animation-scale .ss-step.is-active {
	transform: scale(1);
}

.ss-section.ss-text-animation-scale .ss-step.is-leaving {
	transform: scale(1.03);
}

.ss-section.ss-text-animation-blur .ss-step {
	transform: translate3d(0, 12px, 0);
	filter: blur(10px);
	transition:
		opacity var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease),
		transform var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease),
		filter var(--ss-text-duration, 700ms) var(--ss-fade-ease, ease);
}

.ss-section.ss-text-animation-blur .ss-step.is-active {
	transform: translate3d(0, 0, 0);
	filter: blur(0);
}

.ss-section.ss-text-animation-blur .ss-step.is-leaving {
	transform: translate3d(0, -10px, 0);
	filter: blur(8px);
}

.ss-section.ss-text-animation-none .ss-step {
	transition-duration: 0.01ms !important;
	filter: none !important;
	transform: none !important;
}

/* Dots removed from UI — keep rules inert if old markup exists */
.ss-dots,
.ss-dot {
	display: none !important;
}

.ss-step-index {
	display: none;
	margin: 0 auto 10px;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.5;
	text-align: center;
}

.ss-section.ss-show-step-index .ss-step-index {
	display: block;
}

.ss-title {
	margin: 0 auto 14px;
	padding: 0;
	font-size: clamp(1.55rem, 2.6vw, 2.35rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--ss-title-color);
	text-align: center;
}

.ss-description {
	margin: 0 auto;
	padding: 0;
	max-width: 38ch;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--ss-text-color);
	text-align: center;
}

.ss-description p {
	margin: 0;
}

/* Per-step image — mobile/tablet only */
.ss-step-media {
	display: none;
	margin: 20px 0 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--ss-image-radius);
	background: #e9e9e9;
	aspect-ratio: 16 / 10;
	max-height: var(--ss-mobile-image-height);
}

.ss-step-media img,
.ss-step-media .ss-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* -------- MEDIA / FROZEN IMAGE -------- */
.ss-col-media {
	position: relative;
	min-width: 0;
	align-self: stretch;
	height: 100%;
	min-height: inherit;
}

.ss-media-pin {
	position: sticky;
	top: var(--ss-sticky-offset);
	height: calc(100vh - var(--ss-sticky-offset));
	width: 100%;
	display: flex;
	align-items: center;
	z-index: 1;
	will-change: transform;
}

.ss-media-pin.is-fixed {
	position: fixed;
	right: auto;
	bottom: auto;
	margin: 0;
}

.ss-media-pin.is-bottom {
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
}

.ss-media-frame {
	position: relative;
	width: 100%;
	height: min(calc(100vh - var(--ss-sticky-offset) - 48px), 820px);
	aspect-ratio: 4 / 5;
	max-height: calc(100vh - var(--ss-sticky-offset) - 48px);
	overflow: hidden;
	border-radius: var(--ss-image-radius);
	background: #e9e9e9;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

.ss-image-overlay {
	display: none !important;
}

.ss-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: translate3d(30%, 0, 0);
	transition:
		transform var(--ss-image-duration) var(--ss-slide-ease),
		opacity var(--ss-image-duration) var(--ss-fade-ease),
		clip-path var(--ss-image-duration) var(--ss-slide-ease);
	z-index: 0;
	animation: none;
	will-change: transform, opacity;
	pointer-events: none;
	backface-visibility: hidden;
}

.ss-image img,
.ss-image .ss-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Default = smooth slide */
.ss-image.is-active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	z-index: 2;
	pointer-events: auto;
}

.ss-image.is-leaving {
	opacity: 0;
	transform: translate3d(-30%, 0, 0);
	z-index: 1;
	transition:
		transform var(--ss-image-duration) var(--ss-slide-out-ease),
		opacity var(--ss-image-duration) var(--ss-fade-ease);
}

/* Fade mode overrides slide defaults */
.ss-section.ss-image-transition-fade .ss-image {
	transform: scale(var(--ss-image-scale));
	transition:
		opacity var(--ss-image-duration) var(--ss-fade-ease),
		transform var(--ss-image-duration) var(--ss-fade-ease);
}

.ss-section.ss-image-transition-fade .ss-image.is-active {
	transform: scale(1);
	opacity: 1;
}

.ss-section.ss-image-transition-fade .ss-image.is-leaving {
	transform: scale(1);
	opacity: 0;
}

.ss-section.ss-image-transition-curtain .ss-image {
	clip-path: inset(0 100% 0 0);
	opacity: 1;
	transform: none;
}

.ss-section.ss-image-transition-curtain .ss-image.is-active {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	transform: none;
}

.ss-section.ss-image-transition-curtain .ss-image.is-leaving {
	clip-path: inset(0 0 0 100%);
	z-index: 1;
	transform: none;
	opacity: 1;
}

/* Builder preview: stacked relative steps, not sticky scrub */
.ss-section[data-ss-builder="true"] .ss-col-copy {
	min-height: 0;
	height: auto;
}

.ss-section[data-ss-builder="true"] .ss-steps {
	position: relative;
	height: auto;
	overflow: visible;
	display: block;
}

.ss-section[data-ss-builder="true"] .ss-step {
	position: relative;
	inset: auto;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	min-height: 280px;
	height: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	padding: 16px 0;
}

.ss-section[data-ss-builder="true"] .ss-step-inner {
	opacity: 1;
	transform: none;
}

.ss-section[data-ss-builder="true"] .ss-step-media {
	opacity: 1;
	transform: none;
}

.ss-section[data-ss-builder="true"] .ss-nav-sticky,
.ss-section[data-ss-builder="true"] .ss-media-pin {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	height: auto;
	min-height: 320px;
}

.ss-section[data-ss-builder="true"] .ss-media-frame {
	height: 420px;
	max-height: none;
}

@media (prefers-reduced-motion: reduce) {
	.ss-step-inner,
	.ss-step-media,
	.ss-image,
	.ss-progress-fill,
	.ss-nav-btn,
	.ss-dot,
	.ss-step {
		transition-duration: 0.01ms !important;
		animation: none !important;
	}

	.ss-step-inner,
	.ss-step-media,
	.ss-image,
	.ss-step {
		transform: none !important;
	}

	.ss-section.ss-image-transition-curtain .ss-image {
		clip-path: none;
	}
}

/* Mobile / tablet: sticky scrub — per-step media, hide desktop nav/media col */
@media (max-width: 991px) {
	.ss-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ss-col-media {
		display: none !important;
	}

	.ss-nav-wrap {
		display: none !important;
	}

	/* Tall scrub track = one viewport per step (dvh + JS --ss-mobile-step-size) */
	.ss-col-copy {
		display: block;
		width: 100%;
		height: calc(var(--ss-steps, 3) * 100vh);
		height: calc(var(--ss-steps, 3) * 100dvh);
		height: calc(var(--ss-steps, 3) * var(--ss-mobile-step-size, 100dvh));
		min-height: 0;
		position: relative;
		touch-action: pan-y;
	}

	/* Frozen viewport — content swaps here */
	.ss-steps {
		position: sticky;
		top: var(--ss-sticky-offset, 0px);
		height: calc(100vh - var(--ss-sticky-offset, 0px));
		height: calc(100dvh - var(--ss-sticky-offset, 0px));
		height: calc(var(--ss-mobile-step-size, 100dvh) - var(--ss-sticky-offset, 0px));
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		display: block;
		align-self: auto;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.ss-step {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: 0;
		height: 100%;
		padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, 0, 0);
		pointer-events: none;
		z-index: 0;
		transition: none;
		animation: none !important;
		will-change: opacity, transform;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
	}

	/* Image first without column-reverse (keeps content at top) */
	.ss-section.ss-mobile-image-content .ss-step-media {
		order: -1;
		margin: 0 0 12px;
		flex: 0 1 auto;
	}

	.ss-section.ss-mobile-image-content .ss-step-inner {
		order: 1;
		margin-top: 0;
		flex: 1 1 auto;
	}

	.ss-step.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		z-index: 2;
	}

	.ss-step.is-leaving {
		opacity: 1;
		visibility: visible;
		pointer-events: none;
		z-index: 2;
		overflow: hidden; /* no scroll during leave */
	}

	/* Children stay solid — fade lives on .ss-step only */
	.ss-step .ss-step-inner {
		opacity: 1;
		transform: none;
		transition: none;
		visibility: visible;
		max-width: none;
		width: 100%;
		flex: 0 0 auto;
	}

	.ss-step .ss-step-media {
		display: block;
		order: 0;
		width: 100%;
		flex: 0 1 auto;
		margin-top: 12px;
		opacity: 1;
		transform: none;
		transition: none;
		aspect-ratio: 16 / 10;
		max-height: min(var(--ss-mobile-image-height, 42vh), 360px);
		min-height: 160px;
		overflow: hidden;
		border-radius: var(--ss-image-radius, 16px);
		will-change: auto;
	}

	.ss-step-media img,
	.ss-step-media .ss-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ss-step-index {
		display: block;
		margin: 0 auto 10px;
		font-size: clamp(1.4rem, 6.5vw, 2rem);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.04em;
		line-height: 1;
		opacity: 1;
		color: #111;
		text-transform: none;
		text-align: center;
	}

	.ss-step-inner {
		max-width: none;
		width: 100%;
		pointer-events: inherit;
	}

	.ss-title {
		font-size: clamp(1.35rem, 5.5vw, 1.85rem);
		margin-bottom: 10px;
	}

	.ss-description {
		max-width: 36ch;
		font-size: 0.98rem;
		line-height: 1.55;
	}

	/* Default mobile text center (beats Bricks left-align) */
	.ss-section.ss-mobile-align-center .ss-step-inner,
	.ss-section.ss-mobile-align-center .ss-title,
	.ss-section.ss-mobile-align-center .ss-description,
	.ss-section.ss-mobile-align-center .ss-step-index {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.ss-section.ss-mobile-align-left .ss-step-inner,
	.ss-section.ss-mobile-align-left .ss-title,
	.ss-section.ss-mobile-align-left .ss-description,
	.ss-section.ss-mobile-align-left .ss-step-index {
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.ss-section.ss-mobile-align-right .ss-step-inner,
	.ss-section.ss-mobile-align-right .ss-title,
	.ss-section.ss-mobile-align-right .ss-description,
	.ss-section.ss-mobile-align-right .ss-step-index {
		text-align: right !important;
		margin-left: auto !important;
		margin-right: 0 !important;
	}

	.ss-section.ss-text-animation-none .ss-step {
		transition-duration: 0.01ms;
		transform: none;
	}

	.ss-section.ss-text-animation-none .ss-step.is-active .ss-step-index,
	.ss-section.ss-text-animation-none .ss-step.is-active .ss-title,
	.ss-section.ss-text-animation-none .ss-step.is-active .ss-description {
		animation: none !important;
	}

	.ss-section[data-ss-builder="true"] .ss-col-copy {
		height: auto;
		min-height: 0;
	}

	.ss-section[data-ss-builder="true"] .ss-steps {
		position: relative;
		height: auto;
		overflow: visible;
	}

	.ss-section[data-ss-builder="true"] .ss-step {
		position: relative;
		inset: auto;
		height: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		padding: 16px 0;
		overflow: visible;
	}

	.ss-section[data-ss-builder="true"] .ss-nav-wrap {
		display: none !important;
	}

	/* -------- SIMPLE MOBILE: normal stack, image above text, no animation -------- */
	.ss-section.ss-mobile-mode-simple .ss-col-copy {
		display: block !important;
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		position: relative;
	}

	.ss-section.ss-mobile-mode-simple .ss-steps {
		position: relative !important;
		top: auto !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column;
		gap: var(--ss-mobile-stack-gap, 24px);
		padding: 0;
	}

	.ss-section.ss-mobile-mode-simple .ss-step,
	.ss-section.ss-mobile-mode-simple .ss-step.is-active,
	.ss-section.ss-mobile-mode-simple .ss-step.is-leaving {
		position: relative !important;
		inset: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 auto;
		padding: 0 14px;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		filter: none !important;
		pointer-events: auto !important;
		z-index: auto !important;
		overflow: visible !important;
		will-change: auto;
		animation: none !important;
		transition: none !important;
		text-align: center;
		gap: 0;
	}

	.ss-section.ss-mobile-mode-simple .ss-step-inner {
		order: 2;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		max-width: 36rem;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.ss-section.ss-mobile-mode-simple .ss-step-media {
		display: block !important;
		order: 1;
		width: 100%;
		max-width: 100%;
		flex: 0 0 auto;
		margin: 0 auto var(--ss-mobile-media-gap, 12px);
		aspect-ratio: 16 / 10;
		max-height: min(var(--ss-mobile-image-height, 42vh), 420px);
		min-height: 160px;
		overflow: hidden;
		border-radius: var(--ss-image-radius, 16px);
		opacity: 1 !important;
		transform: none !important;
	}

	.ss-section.ss-mobile-mode-simple .ss-title,
	.ss-section.ss-mobile-mode-simple .ss-description,
	.ss-section.ss-mobile-mode-simple .ss-step-index {
		display: block;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.ss-section.ss-mobile-mode-simple .ss-nav-wrap,
	.ss-section.ss-mobile-mode-simple .ss-col-media {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.ss-section.ss-mobile-mode-simple .ss-step {
		padding-left: 12px;
		padding-right: 12px;
	}

	.ss-section.ss-mobile-mode-simple .ss-steps {
		gap: var(--ss-mobile-stack-gap, 20px);
	}

	.ss-section:not(.ss-mobile-mode-simple) .ss-step {
		padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.ss-section:not(.ss-mobile-mode-simple) .ss-step .ss-step-media {
		aspect-ratio: 16 / 10;
		max-height: min(var(--ss-mobile-image-height, 40vh), 300px);
		min-height: 140px;
	}

	.ss-title {
		font-size: clamp(1.28rem, 6vw, 1.7rem);
	}

	.ss-description {
		max-width: 34ch;
		font-size: 0.95rem;
	}
}