/**
 * ER High-Tech Hero Slider CSS — Fullcast Engine
 * Open Spacious Design, Split Duo Columns, Ken Burns Zoom, Plan-to-Pay Interactive Rail & Flat Line SVGs
 */

:root {
	--bg-deep: #050914;
	--bg-raise: #0A1224;
	--ink: #E8EEFC;
	--ink-dim: #93A1C4;
	--line: rgba(120, 150, 255, 0.14);
	--radius-pill: 100px;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--acc: 253, 64, 0;
	--acc-2: 255, 138, 80;
}

.er-hero-slider-wrap {
	position: relative;
	width: 100%;
	min-height: var(--hero-height, 760px);
	background: var(--bottom-fade-col, var(--bg-deep));
	overflow: hidden;
	color: var(--ink);
	font-family: 'Inter', system-ui, sans-serif;
	box-sizing: border-box;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
}

.er-hero-slider-wrap * {
	box-sizing: border-box;
}

.er-hero-slider-inner {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	min-height: var(--hero-height, 760px);
}

/* Background Aurora Drift */
.er-hero-aurora {
	position: absolute;
	inset: -20%;
	z-index: 0;
	pointer-events: none;
	filter: blur(90px);
	opacity: .5;
}

/* Bottom Fade Mask for Seamless Infinite Section Transition */
.er-hero-bottom-fade {
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--bottom-fade-height, 140px);
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to top, var(--bottom-fade-col, #050914) 0%, rgba(5, 9, 20, 0.95) 26%, rgba(5, 9, 20, 0.45) 65%, transparent 100%);
}

.er-hero-aurora::before,
.er-hero-aurora::after {
	content: "";
	position: absolute;
	width: 55vw;
	height: 55vw;
	border-radius: 50%;
}

.er-hero-aurora::before {
	background: radial-gradient(circle, rgba(var(--acc), .26), transparent 65%);
	top: -8%;
	left: -6%;
	animation: er-driftA 26s ease-in-out infinite alternate;
}

.er-hero-aurora::after {
	background: radial-gradient(circle, rgba(var(--acc-2), .16), transparent 65%);
	bottom: -14%;
	right: -8%;
	animation: er-driftB 32s ease-in-out infinite alternate;
}

@keyframes er-driftA {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(9vw, 7vh) scale(1.15); }
}

@keyframes er-driftB {
	from { transform: translate(0, 0) scale(1.1); }
	to { transform: translate(-8vw, -6vh) scale(.95); }
}

/* Slide Base State & Dynamic Auto-Height Grid Transitions */
.er-hero-slide {
	grid-area: 1 / 1;
	width: 100%;
	height: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .6s var(--ease-out), visibility 0s .6s;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.er-hero-slide.is-active {
	height: auto;
	max-height: none;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 3;
	transition: opacity .6s var(--ease-out);
}

.er-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(var(--acc), .32), transparent 55%, rgba(var(--acc), .14));
	mix-blend-mode: overlay;
}

/* Vignette gradient overlay to maintain high text contrast over motion canvas */
.er-hero-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(5,9,20,.55), transparent 30%, transparent 65%, rgba(5,9,20,.75)),
		radial-gradient(ellipse 70% 70% at 30% 50%, rgba(5,9,20,.35), transparent 70%);
}

.er-hero-slide.align-center::after {
	background:
		linear-gradient(to bottom, rgba(5,9,20,.55), transparent 30%, transparent 65%, rgba(5,9,20,.75)),
		radial-gradient(ellipse 60% 65% at 50% 50%, rgba(5,9,20,.45), transparent 75%);
}

/* Background Layers & Textures */
.er-hero-bg-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.er-hero-bg-layer.photo {
	filter: saturate(.85) contrast(1.05) brightness(.85);
	animation: er-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes er-kenburns {
	from { transform: scale(1.03) translate(0, 0); }
	to { transform: scale(1.13) translate(-2.5%, -1.5%); }
}

.er-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.er-hero-overlay.photo-grade {
	background: linear-gradient(90deg, rgba(5, 9, 20, .96) 0%, rgba(5, 9, 20, .82) 30%, rgba(5, 9, 20, .38) 58%, rgba(5, 9, 20, .10) 100%);
}

.er-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

/* Slide Container & Alignments (High Specificity to defeat external overrides) */
html body .er-hero-slider-wrap .er-hero-container,
html body.home .er-hero-slider-wrap .er-hero-container,
body .er-hero-container,
.er-hero-container {
	position: relative;
	z-index: 5;
	min-height: 100%;
	height: auto;
	width: var(--hero-width, 85%) !important;
	max-width: var(--hero-max-width, 1600px) !important;
	margin: 0 auto;
	padding-top: var(--hero-padding-top, clamp(60px, 8vh, 90px)) !important;
	padding-right: var(--hero-padding-sides, clamp(24px, 4vw, 60px)) !important;
	padding-bottom: var(--hero-padding-bottom, clamp(130px, 15vh, 175px)) !important;
	padding-left: var(--hero-padding-sides, clamp(24px, 4vw, 60px)) !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
}

.er-hero-slide.align-left .er-hero-container { align-items: flex-start; text-align: left; }
.er-hero-slide.align-center .er-hero-container { align-items: center; text-align: center; }

.er-hero-slide .content { max-width: 760px; width: 100%; min-width: 0; }
.er-hero-slide.align-center .content { max-width: 860px; margin: 0 auto; min-width: 0; }

/* Split Layout (2 Column Duo Grid) */
.duo {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	width: 100%;
}

.er-hero-slide.split .content { max-width: none; }
.er-hero-slide.flip .visual { order: -1; }

.visual {
	position: relative;
	margin: 0;
}

.visual::before {
	content: "";
	position: absolute;
	inset: -6%;
	background: radial-gradient(ellipse at 50% 55%, rgba(var(--acc), .22), transparent 70%);
	filter: blur(30px);
	z-index: 0;
}

.visual:not(.visual-shortcode) img, 
.visual:not(.visual-shortcode) video,
.visual > img,
.visual > video {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	border-radius: 20px;
	border: 1px solid rgba(150, 170, 230, .25);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .6);
	object-fit: cover;
	display: block;
}

/* Custom Shortcode Media Container */
.visual.visual-shortcode {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
}

.visual.visual-shortcode > * {
	position: relative;
	z-index: 1;
}

.visual.visual-shortcode .fc-wrap {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.visual.visual-shortcode img {
	border-radius: initial;
	border: none;
	box-shadow: none;
}

.logo-chip {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	background: rgba(10, 18, 36, .75);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .15);
	padding: 10px 16px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}

.logo-chip img {
	height: 22px;
	width: auto;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

/* Typography & Content Spacing */
.badge {
	display: inline-block;
	font-size: clamp(11px, 1.2vw, 13px);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.title {
	font-size: clamp(34px, 4.5vw, 56px);
	line-height: 1.12;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 20px 0;
}

.er-hero-slide.split .title {
	font-size: clamp(30px, 3.8vw, 48px);
}

.title .highlight {
	color: var(--er-highlight-col, rgb(var(--acc)));
	background: linear-gradient(135deg, var(--er-highlight-col, rgb(var(--acc))), rgb(var(--acc-2)));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.desc {
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.6;
	color: var(--ink-dim);
	margin: 0 0 36px 0;
	max-width: 650px;
}

.er-hero-slide.align-center .desc {
	margin-left: auto;
	margin-right: auto;
}

/* Compact spacing between text & orbit when centered */
.er-hero-slide.align-center:has(.g2-orbit-center) .desc {
	margin-bottom: 14px;
}
.er-hero-slide.align-center .desc + .g2-orbit-slot {
	margin-top: 0;
}

/* Action Buttons (Pill Buttons) */
.actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 4px;
}

.er-hero-slide.align-center .actions {
	justify-content: center;
}

.slot + .actions {
	margin-top: 30px;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border-radius: var(--radius-pill);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .3s var(--ease-out), box-shadow .3s, background .3s, border-color .3s;
	position: relative;
	overflow: hidden;
}

.btn-primary, .btn-style-orange_primary, .btn-style-cyan_glow, .btn-style-green_primary, .btn-style-blue_primary, .btn-style-purple_gradient {
	background: linear-gradient(135deg, rgb(var(--acc)), rgb(var(--acc-2)));
	color: #ffffff;
	box-shadow: 0 10px 25px -5px rgba(var(--acc), .4);
	border: 1px solid rgba(255, 255, 255, .2);
}

.btn-primary:hover, .btn-style-orange_primary:hover, .btn-style-cyan_glow:hover, .btn-style-green_primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -4px rgba(var(--acc), .55);
}

.btn-ghost, .btn-style-translucent, .btn-style-outline {
	background: rgba(232, 238, 252, .04);
	border: 1px solid rgba(150, 170, 230, .28);
	backdrop-filter: blur(6px);
	color: #ffffff;
}

.btn-ghost:hover, .btn-style-translucent:hover, .btn-style-outline:hover {
	background: rgba(232, 238, 252, .09);
	border-color: rgba(var(--acc-2), .45);
	transform: translateY(-2px);
}

/* Component Slot (Plan-to-Pay Slide 7) */
.slot {
	width: 100%;
	max-width: 1040px;
	margin: 24px auto 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	box-sizing: border-box;
	min-width: 0;
}

.p2p-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	position: relative;
	min-width: 0;
}

.p2p-steps.count-3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.p2p-steps.count-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.p2p-steps::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, #3FD9E8, #fd4000, #d8c94e, #c9a03f);
	opacity: .55;
}

.p2p-steps.count-3::before {
	left: 16%;
	right: 16%;
	background: linear-gradient(90deg, #3FD9E8, #fd4000, #d8c94e);
}

.p2p-steps.count-2::before {
	left: 25%;
	right: 25%;
	background: linear-gradient(90deg, #3FD9E8, #fd4000);
}

.p2p-step { text-align: center; position: relative; min-width: 0; }

.p2p-step .num {
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 600;
	background: var(--bg-deep);
	border: 1.5px solid var(--c);
	color: var(--c);
}

.p2p-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: #fff; line-height: 1.25; }
.p2p-step-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-bottom: 8px;
}
.p2p-step-logo-img {
	max-height: 48px;
	max-width: 170px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
	transition: transform .25s ease;
}
.p2p-step:hover .p2p-step-logo-img {
	transform: translateY(-1px) scale(1.03);
}
.p2p-step p { font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); max-width: 22ch; margin: 0 auto; }

.p2p-divider {
	height: 1px;
	background: rgba(150, 170, 230, .18);
	margin: 32px 0 28px;
}

.p2p-toggle {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 26px;
	padding: 4px;
	border-radius: var(--radius-pill);
	background: rgba(10, 18, 36, .6);
	border: 1px solid rgba(150, 170, 230, .2);
	backdrop-filter: blur(8px);
	box-sizing: border-box;
}

.p2p-toggle .tg {
	border: none;
	cursor: pointer;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-dim);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	transition: background .3s, color .3s;
	box-sizing: border-box;
}

.p2p-toggle .tg.active { background: #ffffff; color: #0A1224; }

.p2p-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 0;
	min-width: 0;
}

.p2p-stats .stat { display: none; text-align: center; min-width: 0; }

.p2p-stats[data-view="cost"] .stat[data-for="cost"],
.p2p-stats[data-view="upside"] .stat[data-for="upside"] {
	display: block;
	animation: er-statIn .45s var(--ease-out);
}

@keyframes er-statIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.p2p-stats .stat b {
	display: block;
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 600;
	margin-bottom: 5px;
}

.p2p-stats .stat[data-for="cost"] b { color: #ff6a3c; }
.p2p-stats .stat[data-for="upside"] b { color: #d8c94e; }
.p2p-stats .stat span { font-size: 13.5px; color: var(--ink-dim); }

/* 3D Rotating Orbit Badges (G2 / Awards / Logos) */
.g2-orbit {
	position: relative;
	width: 100%;
	height: var(--orbit-h-desktop, clamp(320px, 34vw, 460px));
	perspective: 1200px;
	transform-style: preserve-3d;
	opacity: 0;
	margin: 0 auto;
}

.g2-orbit.is-logos {
	height: var(--orbit-h-desktop, clamp(250px, 26vw, 320px));
}

.g2-orbit-center {
	max-width: 620px;
	height: var(--orbit-h-desktop, clamp(220px, 24vw, 300px));
	margin: 0 auto;
}

.g2-orbit-center.is-logos {
	height: var(--orbit-h-desktop, clamp(200px, 22vw, 260px));
}

.g2-orbit-slot {
	width: 100%;
	max-width: 660px;
	margin: 8px auto 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	box-sizing: border-box;
}

.g2-card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--orbit-w-desktop, min(52%, 230px));
	will-change: transform, filter, opacity;
	cursor: pointer;
	text-decoration: none;
}

.g2-orbit.is-logos .g2-card {
	width: var(--orbit-w-desktop, min(62%, 310px));
}

.g2-card a {
	display: block;
	text-decoration: none;
}

.g2-card img {
	display: block;
	width: 100%;
	height: auto;
	border: none;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 28px 44px rgba(0,0,0,.55));
	pointer-events: auto;
	transition: filter .3s ease;
}

.g2-card:hover img {
	filter: drop-shadow(0 32px 50px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(var(--acc-2), .45));
}

.g2-card-desc {
	display: block;
	font-size: 13px;
	line-height: 1.35;
	color: #93a1c4;
	text-align: center;
	margin-top: 8px;
	letter-spacing: -0.01em;
	font-weight: 500;
	pointer-events: auto;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
	transition: color .3s ease;
	max-width: 100%;
	word-wrap: break-word;
}

.g2-card:hover .g2-card-desc {
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(var(--acc-2), 0.6);
}

/* Bi-chromatic ambient floor reflection / shadow halo */
.g2-orbit::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: var(--orbit-shadow-bottom, 6%);
	width: 82%;
	height: 64px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(var(--acc-2), .35) 0%, rgba(var(--acc), .20) 45%, transparent 75%);
	filter: blur(20px);
	pointer-events: none;
	border-radius: 50%;
}

.g2-orbit.is-logos::after {
	bottom: var(--orbit-shadow-bottom, 15%);
	height: 54px;
	width: 88%;
}

/* Calibrated shadow specifically for centered orbit layout */
.g2-orbit-center::after {
	bottom: var(--orbit-shadow-bottom, 1%);
	width: 72%;
	height: 44px;
	filter: blur(15px);
}

.g2-orbit-center.is-logos::after {
	bottom: var(--orbit-shadow-bottom, 6%);
}

/* Animation Choreography */
.badge, .title, .desc, .actions, .visual, .slot, .g2-orbit {
	opacity: 0;
	transform: translateY(26px);
}

.visual { transform: translateY(30px) scale(.97); }

.er-hero-slide.is-active .slot { transition: opacity .9s var(--ease-out) .6s, transform .9s var(--ease-out) .6s; opacity: 1; transform: none; }
.er-hero-slide.is-active .visual { transition: opacity 1s var(--ease-out) .45s, transform 1s var(--ease-out) .45s; opacity: 1; transform: none; }
.er-hero-slide.is-active .g2-orbit { transition: opacity 1.1s var(--ease-out) .4s, transform 1.1s var(--ease-out) .4s; opacity: 1; transform: none; }
.er-hero-slide.is-active .badge { transition: opacity .8s var(--ease-out) .15s, transform .8s var(--ease-out) .15s; opacity: 1; transform: none; }
.er-hero-slide.is-active .title { transition: opacity .9s var(--ease-out) .28s, transform .9s var(--ease-out) .28s; opacity: 1; transform: none; }
.er-hero-slide.is-active .desc { transition: opacity .9s var(--ease-out) .42s, transform .9s var(--ease-out) .42s; opacity: 1; transform: none; }
.er-hero-slide.is-active .actions { transition: opacity .9s var(--ease-out) .56s, transform .9s var(--ease-out) .56s; opacity: 1; transform: none; }

/* Flat Line SVG Controls (Navigation & Pagination) */
.controls {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 36px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
}

.arrow {
	position: absolute;
	z-index: 5;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(150, 170, 230, .26);
	background: rgba(10, 18, 36, .5);
	backdrop-filter: blur(8px);
	color: var(--ink);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .3s, border-color .3s, transform .3s var(--ease-out);
}

#prev, .er-hero-prev { left: clamp(16px, 3vw, 44px); }
#next, .er-hero-next { right: clamp(16px, 3vw, 44px); }

.arrow:hover {
	background: rgba(var(--acc), .16);
	border-color: rgba(var(--acc-2), .5);
	transform: translateY(-50%) scale(1.08);
}

.arrow svg {
	width: 20px;
	height: 20px;
	stroke-width: 2px;
}

.dots { display: flex; gap: 14px; }

.dot {
	position: relative;
	width: 44px;
	height: 4px;
	border-radius: 4px;
	background: rgba(150, 170, 230, .22);
	border: none;
	cursor: pointer;
	overflow: hidden;
	transition: background .3s;
}

.dot .fill {
	position: absolute;
	inset: 0;
	transform-origin: left;
	transform: scaleX(0);
	background: linear-gradient(90deg, rgb(var(--acc)), rgb(var(--acc-2)));
	border-radius: 4px;
}

.dot.done .fill, .dot.is-active .fill { transform: scaleX(1); }

.dot.running .fill { animation: er-progress var(--dur, 6s) linear forwards; }

@keyframes er-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
	.er-hero-slider-wrap {
		min-height: var(--hero-height, auto);
		height: auto;
	}
	.er-hero-slider-inner {
		min-height: var(--hero-height, auto);
		height: auto;
	}
	.er-hero-slide {
		height: auto;
		min-height: 100%;
		align-items: flex-start;
		justify-content: center;
	}
	.er-hero-bottom-fade {
		height: var(--bottom-fade-height, 120px) !important;
		z-index: 2;
	}
	html body .er-hero-slider-wrap .er-hero-container,
	html body.home .er-hero-slider-wrap .er-hero-container,
	body .er-hero-container,
	.er-hero-container {
		height: auto;
		min-height: 100%;
		justify-content: flex-start;
		width: var(--hero-mob-width, 88%) !important;
		max-width: var(--hero-mob-width, 88%) !important;
		margin-left: auto;
		margin-right: auto;
		padding-top: var(--hero-mob-padding-top, clamp(65px, 9vh, 95px)) !important;
		padding-right: var(--hero-mob-padding-sides, 20px) !important;
		padding-bottom: var(--hero-mob-padding-bottom, clamp(90px, 12vh, 130px)) !important;
		padding-left: var(--hero-mob-padding-sides, 20px) !important;
		box-sizing: border-box;
	}
	.duo { 
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
	}
	.visual, .flip .visual, .duo .visual, .duo.flip .visual, .er-hero-slide.flip .visual { 
		max-width: 480px; 
		order: -1; 
		margin: clamp(14px, 2.5vh, 22px) auto clamp(18px, 3vh, 26px);
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.g2-orbit, .duo .g2-orbit { 
		height: var(--orbit-h-mobile, 200px); 
		max-width: 310px; 
		margin: clamp(10px, 1.8vh, 16px) auto clamp(14px, 2.2vh, 20px); 
		width: 100%; 
		order: -1; 
	}
	.g2-orbit.is-logos, .duo .g2-orbit.is-logos {
		height: var(--orbit-h-mobile, 160px);
		max-width: min(92vw, 360px);
	}
	.duo .content {
		order: 1;
		width: 100%;
	}

	/* Mobile Column Order: Content Top / Media Bottom */
	.er-hero-slide.media-mobile-bottom .duo .content {
		order: 1 !important;
	}
	.er-hero-slide.media-mobile-bottom .visual,
	.er-hero-slide.media-mobile-bottom .flip .visual,
	.er-hero-slide.media-mobile-bottom .duo .visual,
	.er-hero-slide.media-mobile-bottom .duo.flip .visual,
	.er-hero-slide.media-mobile-bottom.flip .visual,
	.er-hero-slide.media-mobile-bottom .g2-orbit,
	.er-hero-slide.media-mobile-bottom .duo .g2-orbit {
		order: 2 !important;
		margin-top: clamp(18px, 3.2vh, 28px);
		margin-bottom: clamp(10px, 1.8vh, 16px);
	}

	.er-hero-slide .content {
		display: flex;
		flex-direction: column;
	}
	.er-hero-slide .content .g2-orbit-slot {
		order: -1;
		margin: clamp(10px, 1.8vh, 16px) auto clamp(14px, 2.2vh, 20px);
		width: 100%;
	}
	.er-hero-slide .content .badge { order: 1; }
	.er-hero-slide .content .title { order: 2; }
	.er-hero-slide .content .desc { order: 3; margin-bottom: 24px; }
	.er-hero-slide .content .slot:not(.g2-orbit-slot) { order: 4; }
	.er-hero-slide .content .actions { order: 5; margin-top: 6px; }

	.g2-card { width: var(--orbit-w-mobile, min(34%, 105px)); }
	.g2-orbit.is-logos .g2-card {
		width: var(--orbit-w-mobile, min(78%, 280px));
	}
	.g2-card-desc { font-size: 10.5px; margin-top: 5px; line-height: 1.25; }
	.logo-chip { left: 12px; bottom: 12px; padding: 8px 12px; }
	.logo-chip img { height: 18px; }
	.er-hero-slide.split .title { font-size: clamp(26px, 6vw, 40px); }
}

@media (max-width: 640px) {
	.er-hero-slider-wrap { min-height: clamp(620px, 90vh, 780px); }
	.er-hero-bottom-fade {
		height: var(--bottom-fade-height, 100px) !important;
		z-index: 2;
	}
	html body .er-hero-slider-wrap .er-hero-container,
	html body.home .er-hero-slider-wrap .er-hero-container,
	body .er-hero-container,
	.er-hero-container {
		width: var(--hero-mob-width, 88%) !important;
		max-width: var(--hero-mob-width, 88%) !important;
		margin-left: auto;
		margin-right: auto;
		padding-top: var(--hero-mob-padding-top, clamp(60px, 8.5vh, 90px)) !important;
		padding-right: var(--hero-mob-padding-sides, 18px) !important;
		padding-bottom: var(--hero-mob-padding-bottom, clamp(85px, 12vh, 120px)) !important;
		padding-left: var(--hero-mob-padding-sides, 18px) !important;
		box-sizing: border-box;
		min-width: 0;
	}
	.badge {
		font-size: 10.5px;
		letter-spacing: 1.5px;
		margin-bottom: 6px;
	}
	.title {
		font-size: clamp(22px, 5.5vw, 30px);
		line-height: 1.18;
		margin: 0 0 10px 0;
	}
	.er-hero-slide.align-center .title {
		font-size: clamp(22px, 5.5vw, 30px);
		margin-bottom: 10px;
	}
	.desc {
		font-size: clamp(13px, 3vw, 15px);
		line-height: 1.46;
		margin-bottom: clamp(20px, 3vh, 26px);
		max-width: 100%;
	}
	.er-hero-slide.align-center .desc {
		margin-bottom: clamp(20px, 3vh, 26px);
	}

	/* Slot Plan-to-Pay Architecture on Mobile */
	.slot {
		margin: 8px auto 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.p2p-steps,
	.p2p-steps.count-3,
	.p2p-steps.count-2,
	.p2p-steps.count-4 {
		width: 100%;
		max-width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px 20px;
		min-width: 0;
		margin-bottom: 8px;
	}
	.p2p-steps.count-3 .p2p-step:last-child {
		grid-column: 1 / -1;
		max-width: 320px;
		width: 100%;
		margin: 4px auto 0;
		padding-bottom: 14px;
	}
	.p2p-steps::before { display: none; }
	.p2p-step {
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.p2p-step .num {
		width: 32px;
		height: 32px;
		margin: 0 auto 6px;
		font-size: 11px;
	}
	.p2p-step h3 {
		font-size: 13px;
		margin-bottom: 4px;
	}
	.p2p-step-logo-wrap {
		min-height: 36px;
		margin-bottom: 4px;
	}
	.p2p-step-logo-img {
		max-height: 36px;
		max-width: 140px;
	}
	.p2p-step p {
		font-size: 11px;
		line-height: 1.3;
		max-width: 22ch;
	}

	/* Generous padding for divider line */
	.p2p-divider {
		margin: 18px 0 16px;
	}

	/* Generous margin between toggle tabs and stats */
	.p2p-toggle {
		width: 100%;
		max-width: 320px;
		margin: 0 auto 16px;
		padding: 3px;
		box-sizing: border-box;
	}
	.p2p-toggle .tg {
		flex: 1 1 50%;
		min-width: 0;
		padding: 6px 8px;
		font-size: clamp(10px, 2.6vw, 11.5px);
		line-height: 1.2;
		white-space: normal;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.p2p-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 12px;
		min-width: 0;
	}
	.p2p-stats .stat {
		min-width: 0;
	}
	.p2p-stats .stat b {
		font-size: clamp(15px, 3.8vw, 18px);
		margin-bottom: 2px;
	}
	.p2p-stats .stat span {
		font-size: 11px;
		line-height: 1.25;
	}

	.visual, .flip .visual, .duo .visual, .duo.flip .visual { 
		max-width: 100%; 
		order: -1;
		margin: clamp(12px, 2.2vh, 18px) auto clamp(16px, 2.8vh, 24px);
		display: flex;
		justify-content: center;
	}
	.visual img, .visual video { 
		border-radius: 16px;
		max-height: 38vh;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		margin: 0 auto;
	}

	/* Smaller Badges on Mobile */
	.g2-orbit { 
		height: var(--orbit-h-mobile, 145px); 
		max-width: 245px; 
		order: -1;
		margin: clamp(6px, 1.2vh, 10px) auto clamp(10px, 1.8vh, 16px); 
	}
	.g2-orbit.is-logos, .duo .g2-orbit.is-logos {
		height: var(--orbit-h-mobile, 150px);
		max-width: min(92vw, 350px);
	}
	.g2-orbit-center { 
		height: var(--orbit-h-mobile, 135px); 
		max-width: 230px; 
		margin: clamp(4px, 1vh, 8px) auto clamp(10px, 1.8vh, 16px); 
	}
	.g2-card { width: var(--orbit-w-mobile, clamp(65px, 19vw, 82px)); }
	.g2-orbit.is-logos .g2-card {
		width: var(--orbit-w-mobile, min(80%, 270px));
	}
	.g2-orbit::after { height: 20px; width: 55%; bottom: var(--orbit-shadow-bottom, 2%); }
	.g2-orbit.is-logos::after { height: 24px; width: 75%; bottom: var(--orbit-shadow-bottom, 8%); }

	.btn { padding: 12px 24px; font-size: 14px; width: 100%; text-align: center; }
	.actions { width: 100%; flex-direction: column; margin-top: 8px; gap: 12px; }
	.er-hero-slide.align-center .actions { align-items: center; }

	.slot + .actions {
		margin-top: 22px;
		width: 100%;
	}
	.slot + .actions .btn {
		padding: 8px 20px;
		font-size: 12.5px;
		width: auto;
		min-width: 160px;
		max-width: 240px;
		margin: 0 auto;
	}

	.controls { bottom: 18px; z-index: 10; }
	.dot { width: 30px; height: 3px; }
	.arrow { display: none; }
}

@media (max-width: 380px) {
	.er-hero-slider-wrap { min-height: 560px; }
	.er-hero-bottom-fade { height: var(--bottom-fade-height, 85px) !important; z-index: 2; }
	html body .er-hero-slider-wrap .er-hero-container,
	html body.home .er-hero-slider-wrap .er-hero-container,
	body .er-hero-container,
	.er-hero-container { 
		width: var(--hero-mob-width, 90%) !important; 
		max-width: var(--hero-mob-width, 90%) !important; 
		padding-top: var(--hero-mob-padding-top, 55px) !important;
		padding-right: var(--hero-mob-padding-sides, 14px) !important;
		padding-bottom: var(--hero-mob-padding-bottom, 80px) !important;
		padding-left: var(--hero-mob-padding-sides, 14px) !important;
	}
	.title, .er-hero-slide.align-center .title { font-size: 20px; margin-bottom: 8px; }
	.desc, .er-hero-slide.align-center .desc { font-size: 12px; line-height: 1.35; margin-bottom: 16px; }
	.actions { margin-top: 6px; }
	.visual, .flip .visual, .duo .visual { margin: 8px auto 14px; }
	.visual img, .visual video { max-height: 32vh; }
	.p2p-step .num { width: 24px; height: 24px; font-size: 9.5px; margin-bottom: 2px; }
	.p2p-step h3 { font-size: 11.5px; }
	.p2p-step-logo-wrap { min-height: 28px; margin-bottom: 3px; }
	.p2p-step-logo-img { max-height: 28px; max-width: 110px; }
	.p2p-step p { font-size: 9.5px; line-height: 1.18; max-width: 18ch; }
	.p2p-steps.count-3 .p2p-step:last-child {
		padding-bottom: 14px;
	}
	.p2p-divider { margin: 14px 0 12px; }
	.p2p-toggle { max-width: 280px; margin-bottom: 14px; }
	.p2p-toggle .tg { font-size: 9px; padding: 4px 3px; }
	.p2p-stats { gap: 8px 8px; }
	.p2p-stats .stat b { font-size: 13.5px; }
	.p2p-stats .stat span { font-size: 9.5px; line-height: 1.15; }
	.slot + .actions { margin-top: 28px !important; }
	.slot + .actions .btn { padding: 6px 16px; font-size: 11.5px; min-width: 140px; }
	.g2-orbit { height: var(--orbit-h-mobile, 125px); max-width: 210px; }
	.g2-orbit.is-logos { height: var(--orbit-h-mobile, 140px); max-width: min(94vw, 320px); }
	.g2-orbit-center { height: var(--orbit-h-mobile, 115px); max-width: 200px; }
	.g2-card { width: var(--orbit-w-mobile, 62px); }
	.g2-orbit.is-logos .g2-card { width: var(--orbit-w-mobile, min(82%, 250px)); }
	.g2-card-desc { font-size: 8.5px; margin-top: 2px; line-height: 1.15; }
	.controls { bottom: 14px; }
	.dot { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.er-hero-aurora::before, .er-hero-aurora::after { animation: none; }
	.er-hero-bg-layer.photo { animation: none; }
	.badge, .title, .desc, .actions, .visual, .slot, .g2-orbit { opacity: 1; transform: none; transition: none; }
	.er-hero-slide { transition: opacity .2s; }
	.dot.running .fill { animation: none; transform: scaleX(1); }
}