/* ========================================
   EDSTRUMENTS WIDGETS — STRUCTURAL CSS
   Layout/positioning only. All colors, typography, spacing, borders,
   shadows live in Elementor controls (Layer 1). Nothing here is a
   design token a designer should edit.
   ======================================== */

/* ---- Site Header ------------------------------------------------ */
.eds-header { width: 100%; }

.eds-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
	padding: 14px 30px 14px 30px;
}

.eds-header__logo { display: inline-flex; align-items: center; line-height: 0; }
.eds-header__logo img { height: auto; display: block; }

.eds-header__nav {
	display: flex;
	align-items: center;
}

.eds-nav__item {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.eds-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 999px;
	transition: color 0.2s ease, background-color 0.2s ease;
}
/* Default hover pill (magenta), per Figma. Elementor control values override these. */
.eds-nav__link:hover { background-color: #F5EDF4; color: #662756; }

.eds-nav__chevron { flex: 0 0 auto; transition: transform 0.2s ease; }

/* ---- Dropdown (desktop: inside inline nav, hover/focus driven) ---- */
.eds-header__nav .eds-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	flex-direction: column;
	z-index: 1000;
	overflow: hidden;
}

.eds-header__nav .eds-nav__item.has-dropdown:hover .eds-nav__dropdown,
.eds-header__nav .eds-nav__item.has-dropdown:focus-within .eds-nav__dropdown {
	display: flex;
}

.eds-header__nav .eds-nav__item.has-dropdown:hover .eds-nav__chevron,
.eds-header__nav .eds-nav__item.has-dropdown:focus-within .eds-nav__chevron {
	transform: rotate(180deg);
}

/* ---- Mega menu — wide grid panel of title + description items ---- */
.eds-header__nav .eds-nav__dropdown.eds-nav__mega {
	display: none;
	grid-template-columns: repeat(2, 1fr);
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
.eds-header__nav .eds-nav__item.has-dropdown:hover .eds-nav__dropdown.eds-nav__mega,
.eds-header__nav .eds-nav__item.has-dropdown:focus-within .eds-nav__dropdown.eds-nav__mega {
	display: grid;
}
.eds-nav__mega-item {
	display: block;
	text-decoration: none;
	padding: 14px 16px;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}
/* Inset each hover card from the panel edges + neighbours (space OUTSIDE the hover bg).
   Scoped to the desktop nav so the mobile overlay list is unaffected. */
.eds-header__nav .eds-nav__mega-item { margin: 6px; }
.eds-nav__mega-item:hover { background-color: #F7ECF4; }
.eds-nav__mega-title { display: block; font-family: 'Golos Text', system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; color: #0D0F11; }
.eds-nav__mega-desc { display: block; margin-top: 4px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 13px; line-height: 1.4; color: #4B5768; }

.eds-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.eds-header__signin {
	text-decoration: none;
	transition: color 0.2s ease;
}

.eds-header__cta {
	position: relative;
	z-index: 1; /* establish a stacking context so the pulse ::after sits behind */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Pulse ring — radiates from the CTA. ::after so the button keeps its shadow. */
.eds-header__cta--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--eds-pulse, rgba(170, 65, 144, 0.45));
	z-index: -1;
	animation: eds-cta-pulse var(--eds-pulse-dur, 2.2s) ease-out infinite;
}
@keyframes eds-cta-pulse {
	0%   { transform: scale(1); opacity: 0.55; }
	100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.eds-header__cta--pulse::after { animation: none; opacity: 0; }
}

/* Small phones: shrink the bar CTA so it doesn't crowd the hamburger. */
@media (max-width: 400px) {
	.eds-header__cta { padding: 10px 14px !important; font-size: 14px !important; }
}

/* ---- Hamburger -------------------------------------------------- */
.eds-header__burger {
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
}

/* ---- Mobile overlay --------------------------------------------- */
.eds-header__overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 88px 24px 40px;
	overflow-y: auto;
}

.eds-header__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.eds-header__overlay-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 360px;
}

.eds-header__overlay .eds-nav__link { justify-content: center; }

/* In the overlay, items stack and dropdowns render expanded inline (no hover). */
.eds-header__overlay .eds-nav__item {
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 12px;
}

.eds-header__overlay .eds-nav__dropdown {
	position: static;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: visible;
}

/* Overlay: mega collapses to a centered single-column list. */
.eds-header__overlay .eds-nav__mega { width: auto; left: auto; right: auto; transform: none; grid-template-columns: none; gap: 4px; }
.eds-header__overlay .eds-nav__mega-item { text-align: center; }

body.eds-menu-open { overflow: hidden; }

/* ================================================================
   FLUID INTERACTIVE BACKGROUND (reusable — .eds-fluidbg)
   A soft pastel gradient field (purple/pink/blue) + grain. Coloured blobs
   follow the mouse with a liquid trailing lag (initFluidBg in Layer 3).
   Render as the first child of a position:relative widget root; content
   should sit above z-index 0.
   ================================================================ */
.eds-fluidbg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--fbg-field, #E7DCF3);
}
/* Colour field UNDERNEATH the veil — always present, revealed on hover. */
.eds-fluidbg__color {
	position: absolute;
	inset: -6%;
	z-index: 0;
	filter: blur(50px);
	background:
		radial-gradient(46% 46% at 24% 32%, var(--fbg-c3, #6FA6EC) 0%, transparent 70%),
		radial-gradient(50% 50% at 80% 22%, var(--fbg-c1, #9E7BE0) 0%, transparent 72%),
		radial-gradient(52% 52% at 62% 82%, var(--fbg-c2, #E28FC5) 0%, transparent 72%),
		radial-gradient(60% 60% at 40% 60%, var(--fbg-c1, #9E7BE0) 0%, transparent 78%);
	animation: eds-fbg-drift 26s ease-in-out infinite alternate;
}
/* White/blue veil ON TOP — erased around the cursor (mask) to reveal colour.
   Two soft holes at different lag positions form an elongated, liquid drag;
   both grow from 0 with --fbg-reveal so at rest the veil stays mostly closed. */
.eds-fluidbg__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Translucent so the colour field shows through softened at rest (not plain
	   white); the hover mask erases it to full colour around the cursor. */
	opacity: var(--fbg-veil-op, 0.6);
	background-color: var(--fbg-base, #EEF3FA);
	/* Not flat white — a faint wash of the accent colours over the base so the
	   covered state still reads as soft colour (tint strength via --fbg-tint). */
	background-image:
		radial-gradient(46% 46% at 24% 32%, color-mix(in srgb, var(--fbg-c3, #6FA6EC) var(--fbg-tint, 16%), transparent) 0%, transparent 68%),
		radial-gradient(50% 50% at 80% 20%, color-mix(in srgb, var(--fbg-c1, #9E7BE0) var(--fbg-tint, 16%), transparent) 0%, transparent 70%),
		radial-gradient(54% 54% at 60% 84%, color-mix(in srgb, var(--fbg-c2, #E28FC5) var(--fbg-tint, 16%), transparent) 0%, transparent 72%);
	--fbg-h1: calc(var(--fbg-reveal, 0) * var(--fbg-rsize, 300px) * 0.28);
	--fbg-e1: calc(var(--fbg-reveal, 0) * var(--fbg-rsize, 300px));
	--fbg-h2: calc(var(--fbg-reveal, 0) * var(--fbg-rsize, 300px) * 0.18);
	--fbg-e2: calc(var(--fbg-reveal, 0) * var(--fbg-rsize, 300px) * 0.8);
	-webkit-mask-image:
		radial-gradient(circle at var(--fbg-mx, 50%) var(--fbg-my, 42%), transparent 0, transparent var(--fbg-h1), #000 var(--fbg-e1)),
		radial-gradient(circle at var(--fbg-mx2, 50%) var(--fbg-my2, 42%), transparent 0, transparent var(--fbg-h2), #000 var(--fbg-e2));
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(circle at var(--fbg-mx, 50%) var(--fbg-my, 42%), transparent 0, transparent var(--fbg-h1), #000 var(--fbg-e1)),
		radial-gradient(circle at var(--fbg-mx2, 50%) var(--fbg-my2, 42%), transparent 0, transparent var(--fbg-h2), #000 var(--fbg-e2));
	mask-composite: intersect;
}
/* Film grain over everything. */
.eds-fluidbg__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	opacity: 0.40;
	mix-blend-mode: overlay;
}
@keyframes eds-fbg-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-3%, 3%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
	.eds-fluidbg__color { animation: none !important; }
}

/* ================================================================
   HERO
   Layout/positioning + animation base states only. All colors,
   typography, spacing, sizes come from Elementor controls (Layer 1).
   ================================================================ */
.eds-hero {
	position: relative;
	width: 100%;
	overflow: hidden; /* laptop image bleeds past the bottom and is clipped */
	/* Fly-in distance (control overrides). Both signs precomputed so the
	   transform never needs calc() — avoids silent invalidation. */
	--eds-fly: 260px;
	--eds-fly-neg: -260px;
}

/* Full-width break-out: span the viewport even inside a narrower Elementor
   container, so the background + floating cards use the whole screen. The
   text/laptop stay centered and capped by their own max-widths. */
.eds-hero--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Layer holding text + floats — gets the scroll fade-up transform (JS). */
.eds-hero__layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none; /* let clicks fall through empty areas to laptop */
	will-change: transform, opacity;
}
.eds-hero__layer a,
.eds-hero__layer button { pointer-events: auto; }

.eds-hero__content {
	position: relative;
	z-index: 4;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	box-sizing: border-box;
}
/* Tablet + mobile: keep the copy/heading off the screen edges (24px). */
@media (max-width: 1180px) {
	.eds-hero__content { padding-left: 24px; padding-right: 24px; }
}

.eds-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}
.eds-hero__eyebrow-icon { display: block; height: auto; flex: 0 0 auto; }

.eds-hero__title { margin: 0; }
.eds-hero__desc { margin: 0; }

.eds-hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.eds-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.eds-hero__btn:hover { transform: translateY(-1px); }

.eds-hero__watch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s ease;
}
/* Hover/focus tint (icon follows via currentColor). Scoped + !important so it
   wins over the resting color control's generated style. */
.eds-hero .eds-hero__watch:hover,
.eds-hero .eds-hero__watch:focus { color: #662756 !important; }
.eds-hero__watch-icon { display: inline-flex; }

/* Laptop image — absolutely positioned, centered, rises on scroll (JS).
   Anchored to the BOTTOM (not top) so the intentional bottom bleed stays
   consistent at every screen size: as the image shrinks it no longer floats
   up and reveals its full height. Bleed amount comes from the control via
   --eds-laptop-b. top:auto !important defeats any stale generated `top`. */
.eds-hero__laptop {
	position: absolute;
	left: 50%;
	top: auto !important;
	bottom: var( --eds-laptop-b, -60px );
	/* Fixed px width (via control var) so the laptop keeps ONE size across the
	   desktop range instead of scaling with the viewport. !important beats any
	   stale generated `width: %` from the old control; the control still drives
	   it through --eds-laptop-w. max-width caps it on genuinely small screens. */
	width: var( --eds-laptop-w, 800px ) !important;
	transform: translateX(-50%);
	max-width: 100%;
	z-index: 2;
	will-change: transform;
}
.eds-hero__laptop-inner { position: relative; }
.eds-hero__laptop img { display: block; width: 100%; height: auto; }
/* Multi-image content switch: the base image sits in flow (defines the size); any
   additional images are stacked layers that cross-fade on top of it. */
.eds-hero__laptop-img--layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var( --eds-laptop-fade, 700ms ) ease;
	pointer-events: none;
}
.eds-hero__laptop-img--layer.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.eds-hero__laptop-img--layer { transition: none; }
}

/* drop-shadow follows the PNG's transparent shape (no white box corners).
   Values come from the widget's shadow controls via CSS custom props. */
.eds-hero__laptop.has-shadow img {
	filter: drop-shadow(
		var( --eds-ls-x, 0px ) var( --eds-ls-y, 24px ) var( --eds-ls-blur, 48px )
		var( --eds-ls-color, rgba( 13, 15, 17, 0.18 ) )
	);
}
.eds-hero__float.has-shadow img {
	filter: drop-shadow(
		0px var( --eds-fs-y, 12px ) var( --eds-fs-blur, 24px )
		var( --eds-fs-color, rgba( 13, 15, 17, 0.12 ) )
	);
}

/* Play button — centered over the laptop. */
.eds-hero__play {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, background-color 0.2s ease;
	z-index: 5;
}
.eds-hero__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.eds-hero__play svg { width: 46%; height: 46%; }

/* Pulse ring — a sonar halo radiating from the play button. Uses ::after so
   the button keeps its own box-shadow. */
.eds-hero__play--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--eds-pulse, rgba(102, 39, 86, 0.45));
	z-index: -1;
	animation: eds-play-pulse var(--eds-pulse-dur, 2.2s) ease-out infinite;
}
@keyframes eds-play-pulse {
	0%   { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.eds-hero__play--pulse::after { animation: none; opacity: 0; }
}

/* Floating-cards layer — sits over the laptop, NOT affected by the scroll
   fade-up (that only transforms .eds-hero__layer). Lets the fly-in be clean.
   Capped to a centered content band (--eds-floats-max) so the per-float
   positions stay locked to that band: on screens WIDER than the band it stays
   centered and the floats don't drift outward. Below the band width it fills
   the viewport (100%), so positions scale down normally toward the breakpoint. */
.eds-hero__floats {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var( --eds-floats-max, 1080px );
	z-index: 3;
	pointer-events: none;
}
.eds-hero__floats > * { pointer-events: auto; }

/* Floating elements — absolutely positioned via per-item controls. */
.eds-hero__float {
	position: absolute;
	line-height: 0;
}
.eds-hero__float img { display: block; width: 100%; height: auto; }

/* Entrance base states (smooth fade-up). Applied only when JS adds .is-anim. */
.eds-hero.is-anim [data-anim] {
	opacity: 0;
	transform: translate3d(0, var(--eds-enter, 32px), 0);
	transition: opacity var(--eds-dur, 800ms) cubic-bezier(0.16, 1, 0.3, 1),
		transform var(--eds-dur, 800ms) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * var(--eds-stagger, 120ms));
}
.eds-hero.is-anim.is-ready [data-anim] {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
/* Float entrance is driven by the Web Animations API in JS (CSS class-toggle
   transitions race on load). CSS only hides the cards until JS plays them:
   the rule needs .is-anim (added by JS), so with no JS the cards stay visible
   (graceful). Direction is read from the --from-* class in JS. */
.eds-hero.is-anim .eds-hero__float { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.eds-hero.is-anim [data-anim],
	.eds-hero.is-anim .eds-hero__float { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hide selected floats only BELOW 1180px (they stay visible at 1180 and up,
   matching the desktop-header range). */
@media (max-width: 1179px) {
	.eds-hero__float--hide-mobile { display: none !important; }
}

/* ---- Coded floating cards (shared) ---- */
.eds-hero__card {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 11px 14px;
	background: #fff;
	border-radius: 14px;
	line-height: normal;
	font-family: 'Golos Text', system-ui, sans-serif;
	box-shadow: 0 14px 34px rgba(13, 15, 17, 0.10), 0 2px 6px rgba(13, 15, 17, 0.05);
}

/* Approved Request card */
.eds-hero__card--approved .eds-card__avatar {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
}
.eds-hero__card--approved .eds-card__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.eds-hero__card--approved .eds-card__name { font-size: 14px; font-weight: 600; color: #0D0F11; }
.eds-hero__card--approved .eds-card__sub  { font-size: 13px; font-weight: 400; color: #4B5768; }
.eds-hero__card--approved .eds-card__badge {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}
.eds-card__badge--pulse { animation: eds-badge-pulse 2.2s ease-out infinite; }
@keyframes eds-badge-pulse {
	0%   { box-shadow: 0 0 0 0 var(--eds-pulse, rgba(30, 69, 40, 0.35)); }
	70%  { box-shadow: 0 0 0 9px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.eds-card__badge--pulse { animation: none; }
}

/* Budget Overview card — title + Live Sync pill + mini bar chart. */
.eds-hero__card--budget {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 14px 16px;
}
.eds-hero__card--budget .eds-bcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.eds-bcard__title { font-size: 13px; font-weight: 600; }
.eds-bcard__pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 500;
	white-space: nowrap;
}
.eds-bcard__pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.eds-hero__card--budget .eds-bcard__chart {
	display: flex;
	gap: 8px;
	height: 96px;
}
.eds-bcard__axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 0 auto;
	text-align: right;
	font-size: 7px;
	line-height: 1;
}
.eds-bcard__bars {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 100%;
	min-width: 0;
}
.eds-bcard__bar {
	flex: 1 1 0;
	min-width: 0;
	height: 50%;
	border-radius: 3px 3px 2px 2px;
	transition: height var(--bud-dur, 900ms) cubic-bezier(0.45, 0, 0.25, 1);
}

/* Head of Finance card — avatar photo + name/role, pulsing avatar ring. */
.eds-hero__card--finance .eds-card__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.eds-hero__card--finance .eds-card__name { font-size: 14px; font-weight: 600; }
.eds-hero__card--finance .eds-card__sub  { font-size: 13px; font-weight: 400; }
.eds-hero__card--finance .eds-card__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
}
.eds-hero__card--finance .eds-card__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eds-card__avatar--pulse { animation: eds-avatar-pulse 2.2s ease-out infinite; }
@keyframes eds-avatar-pulse {
	0%   { box-shadow: 0 0 0 0 var(--eds-pulse, rgba(116, 183, 236, 0.5)); }
	70%  { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Draft card — company + amount + a color-cycling status badge. */
.eds-hero__card--draft { gap: 8px; padding: 11px 13px; }
.eds-dcard__company { font-size: 12px; font-weight: 600; white-space: nowrap; }
.eds-dcard__amount  { font-size: 12px; font-weight: 500; margin-left: auto; white-space: nowrap; }
.eds-dcard__badge {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background-color 0.6s ease, color 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.eds-card__avatar--pulse { animation: none; }
}

/* ---- Video lightbox ---- */
.eds-hero__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.eds-hero__lightbox.is-open { display: flex; opacity: 1; }
.eds-hero__lightbox-backdrop { position: absolute; inset: 0; }
.eds-hero__lightbox-inner {
	position: relative;
	width: 100%;
	z-index: 1;
}
.eds-hero__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}
.eds-hero__video iframe,
.eds-hero__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.eds-hero__lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	background: none;
	border: 0;
	cursor: pointer;
}

/* ================================================================
   LOGO MARQUEE — fixed title + seamless infinite logo scroller.
   Pure CSS loop: two identical groups, animate the track -50%.
   ================================================================ */
.eds-marquee {
	display: flex;
	align-items: center;
	gap: 48px;
	width: 100%;
}
.eds-marquee__title {
	flex: 0 0 auto;
	margin: 0;
}
.eds-marquee__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	position: relative;
	-webkit-mask: linear-gradient( 90deg, transparent 0, #000 var( --eds-mq-fade, 0px ), #000 calc( 100% - var( --eds-mq-fade, 0px ) ), transparent 100% );
	mask: linear-gradient( 90deg, transparent 0, #000 var( --eds-mq-fade, 0px ), #000 calc( 100% - var( --eds-mq-fade, 0px ) ), transparent 100% );
}
.eds-marquee__track {
	display: flex;
	width: max-content;
	animation: eds-marquee var( --eds-mq-duration, 40s ) linear infinite;
	will-change: transform;
}
.eds-marquee__track--reverse {
	animation-direction: reverse;
}
.eds-marquee__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.eds-marquee__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.eds-marquee__logo img {
	display: block;
	height: 49px;
	width: auto;
	object-fit: contain;
}
.eds-marquee--pause .eds-marquee__viewport:hover .eds-marquee__track {
	animation-play-state: paused;
}

@keyframes eds-marquee {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

@media (prefers-reduced-motion: reduce) {
	.eds-marquee__track { animation: none; }
}

/* Mobile (project breakpoint 1180): title on top, centered. */
@media (max-width: 1180px) {
	.eds-marquee {
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}
	.eds-marquee__title { max-width: 100% !important; }
	.eds-marquee__viewport { width: 100%; }
}

/* ================================================================
   STAT CARD — gradient badge, count-up number, hover corner gradient.
   ================================================================ */
.eds-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover corner gradient — a ::before overlay that fades in (smoothly,
   unlike animating background-image). Direction + faraway color stop
   give the subtle tint in the top-right corner from the Figma. */
.eds-stat--hover-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Coral wash from the corner (per Figma). --eds-stat-white sets where white
	   ends — lower % = the corner color reaches further in = more prominent. */
	background-image: linear-gradient( 36deg, #ffffff var( --eds-stat-white, 41% ), var( --eds-stat-corner, #cf341f ) 275% );
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 0;
}
.eds-stat--hover-gradient:hover::before { opacity: 1; }

/* Keep content above the gradient overlay. */
.eds-stat__badge,
.eds-stat__body { position: relative; z-index: 1; }

.eds-stat__badge {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}
.eds-stat__badge img { display: block; width: 42px; height: auto; }
/* drop-shadow follows the transparent PNG shape (no white box corners). */
.eds-stat__badge.has-shadow img {
	filter: drop-shadow(
		0px var( --eds-bs-y, 4px ) var( --eds-bs-blur, 12px )
		var( --eds-bs-color, rgba( 13, 15, 17, 0.18 ) )
	);
}

.eds-stat__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}
.eds-stat__number {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;      /* keep prefix + number + suffix on ONE line */
	white-space: nowrap;
	max-width: 100%;
}
.eds-stat__label { width: 100%; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.eds-stat { transition: none; }
}

/* Tablet/down: each stat card fills its grid cell height so cards in a row are
   equal height (the content distributes via the card's justify-content:
   space-between — badge pinned top, number/label pinned bottom). Requires the
   Elementor container to stretch its items, which is the default. */
@media (max-width: 1180px) {
	.elementor-widget-eds_stat_card,
	.elementor-widget-eds_stat_card > .elementor-widget-container { height: 100%; }
	.eds-stat { height: 100%; }
	/* Keep the label on one line on smaller screens. */
	.eds-stat__label { white-space: nowrap; }
}

/* Mobile (≤767px): "simple card" — strip badge/bg/border/shadow/padding,
   leave number + label with a bottom divider. !important overrides the
   control-generated CSS at this breakpoint (Elementor quirk fix). */
@media (max-width: 767px) {
	/* Make each card fill its grid cell so the bottom divider lines up across
	   a row regardless of label length. Requires the Elementor container/column
	   to stretch items (the default). */
	.elementor-widget-eds_stat_card,
	.elementor-widget-eds_stat_card > .elementor-widget-container {
		height: 100%;
	}
	.eds-stat--mobile-simple {
		height: 100% !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid var( --eds-stat-divider, #d9dde3 ) !important;
		border-radius: 0 !important;
		padding: 0 0 24px 0 !important;
		min-height: 0 !important;
		box-shadow: none !important;
		transform: none !important;
		/* Content pinned to top, divider forced to the bottom edge. */
		justify-content: flex-start !important;
		gap: 8px !important;
	}
	.eds-stat--mobile-simple::before { display: none !important; }
	.eds-stat--mobile-simple:hover { box-shadow: none !important; transform: none !important; }
	.eds-stat--mobile-simple .eds-stat__badge { display: none !important; }
	.eds-stat--mobile-simple .eds-stat__number {
		font-size: 32px !important;
		line-height: 1.1 !important;
		letter-spacing: 0 !important;
	}
	.eds-stat--mobile-simple .eds-stat__label {
		font-size: 14px !important;
		line-height: 1.2 !important;
	}
}

/* ================================================================
   SPLIT CARDS — two stacked card images. On scroll-into-view the top
   card slides in from the left and the bottom from the right, both
   settling centered (resting positions set per card). JS adds .is-in.
   ================================================================ */
.eds-splitcards {
	position: relative;
	width: 100%;
	/* Scale the whole composition (control), anchored top-center so it stays
	   horizontally centered as it shrinks on tablet/mobile. Default 1 = no
	   change on desktop. */
	transform: scale( var( --eds-sc-scale, 1 ) );
	transform-origin: top center;
}
.eds-splitcards__card {
	position: absolute;
	display: block;
	will-change: transform, opacity;
	transition: transform var( --eds-sc-dur, 900ms ) var( --eds-sc-ease, cubic-bezier( 0.16, 1, 0.3, 1 ) ),
		opacity var( --eds-sc-dur, 900ms ) var( --eds-sc-ease, cubic-bezier( 0.16, 1, 0.3, 1 ) );
	transition-delay: var( --eds-sc-delay, 0ms );
}
.eds-splitcards__card img {
	display: block;
	width: 100%;
	height: auto;
}
.eds-splitcards__card.has-shadow img {
	filter: drop-shadow(
		0 var( --eds-sc-sy, 8px ) var( --eds-sc-sblur, 24px )
		var( --eds-sc-scolor, rgba( 13, 15, 17, 0.12 ) )
	);
}

/* Start position (pre-reveal): displaced toward each side. */
.eds-splitcards--animate .eds-splitcards__card--top {
	transform: translate( var( --eds-sc-top-x, -480px ), var( --eds-sc-top-y, 0px ) );
}
.eds-splitcards--animate .eds-splitcards__card--bottom {
	transform: translate( var( --eds-sc-bottom-x, 480px ), var( --eds-sc-bottom-y, 0px ) );
}
.eds-splitcards--animate.eds-splitcards--fade .eds-splitcards__card {
	opacity: 0;
}

/* Resting position (revealed). */
.eds-splitcards--animate.is-in .eds-splitcards__card--top,
.eds-splitcards--animate.is-in .eds-splitcards__card--bottom {
	transform: none;
}
.eds-splitcards--animate.is-in .eds-splitcards__card {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.eds-splitcards--animate .eds-splitcards__card {
		transform: none;
		opacity: 1;
		transition: none;
	}
}

/* Editor: show the cards at their resting position (the scroll-reveal only runs
   on the front end) so each card can be seen and positioned per breakpoint. */
body.elementor-editor-active .eds-splitcards--animate .eds-splitcards__card--top,
body.elementor-editor-active .eds-splitcards--animate .eds-splitcards__card--bottom {
	transform: none !important;
}
body.elementor-editor-active .eds-splitcards--animate .eds-splitcards__card {
	opacity: 1 !important;
	transition: none !important;
}

/* ================================================================
   ORBIT FEATURE — dark card, centre logo, rings, orbiting icons.
   Each icon: a wrapper sized to the orbit diameter rotates around the
   stage centre; the icon sits at 12 o'clock and counter-rotates to stay
   upright. % radius resolves against the stage.
   ================================================================ */
.eds-orbit {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.eds-orbit__text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.eds-orbit__title { margin: 0; }
.eds-orbit__desc { margin: 0; }
/* Fill the container's full height (e.g. equal-height cards in a grid/flex row).
   Needs the parent container to stretch its items, which is Elementor's default. */
.elementor-widget-eds_orbit_feature,
.elementor-widget-eds_orbit_feature > .elementor-widget-container { height: 100%; }
.eds-orbit { height: 100%; }

.eds-orbit__stage {
	position: absolute;
	top: 50%;
	right: -80px;
	transform: translateY( -50% );
	width: 560px;
	height: 560px;
	z-index: 1;
}

/* Single glow radiating from the centre, fading out by the outer ring. */
.eds-orbit__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: var( --eds-glow-size, 130% );
	height: var( --eds-glow-size, 130% );
	border-radius: 50%;
	background: radial-gradient( circle, var( --eds-glow-color, rgba( 116, 183, 236, 0.57 ) ) 0%, transparent 70% );
	z-index: 0;
	pointer-events: none;
}

.eds-orbit__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	border-style: solid;
	border-width: 1px;
	border-radius: 50%;
	z-index: 1;
}
.eds-orbit--fill .eds-orbit__ring {
	background-image: linear-gradient( 136deg, rgba( 255, 255, 255, 0.05 ) 3%, rgba( 153, 153, 153, 0.05 ) 98% );
}
.eds-orbit__ring--1 { width: 100%; height: 100%; }
.eds-orbit__ring--2 { width: 76%; height: 76%; }
.eds-orbit__ring--3 { width: 56.5%; height: 56.5%; }

/* Centre logo — flex-centred so it scales symmetrically about the centre
   point (no top/bottom drift as it grows). */
.eds-orbit__center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( calc( -50% + var( --eds-center-x, 0px ) ), calc( -50% + var( --eds-center-y, 0px ) ) );
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.eds-orbit__center img { display: block; width: 100%; height: auto; }

/* Orbit item: box sized to the diameter, centred in the stage, rotated. */
.eds-orbit__item {
	position: absolute;
	inset: 0;
	margin: auto;
	width: var( --o-diam, 76% );
	height: var( --o-diam, 76% );
	z-index: 4;
	transform: rotate( var( --o-angle, 0deg ) );
}
.eds-orbit__pos {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate( -50%, -50% );
}
.eds-orbit__icon {
	display: block;
	height: auto;
	transform: rotate( calc( -1 * var( --o-angle, 0deg ) ) );
}

/* Animated state — continuous orbit + counter-rotation keep icons upright. */
.eds-orbit--animate .eds-orbit__item {
	transform: none;
	animation: eds-orbit-spin var( --o-dur, 20s ) linear infinite;
	animation-direction: var( --o-dir, normal );
	animation-delay: var( --o-delay, 0s );
	will-change: transform;
}
.eds-orbit--animate .eds-orbit__icon {
	transform: none;
	animation: eds-orbit-spin-rev var( --o-dur, 20s ) linear infinite;
	animation-direction: var( --o-dir, normal );
	animation-delay: var( --o-delay, 0s );
	will-change: transform;
}
.eds-orbit--pause:hover .eds-orbit__item,
.eds-orbit--pause:hover .eds-orbit__icon { animation-play-state: paused; }

@keyframes eds-orbit-spin     { to { transform: rotate( 360deg ); } }
@keyframes eds-orbit-spin-rev { to { transform: rotate( -360deg ); } }

@media (prefers-reduced-motion: reduce) {
	.eds-orbit--animate .eds-orbit__item { animation: none; transform: rotate( var( --o-angle, 0deg ) ); }
	.eds-orbit--animate .eds-orbit__icon { animation: none; transform: rotate( calc( -1 * var( --o-angle, 0deg ) ) ); }
}

/* Mobile: orbit on top (centred, no bleed), text below. */
@media (max-width: 767px) {
	.eds-orbit { flex-direction: column; align-items: stretch; }
	.eds-orbit__stage {
		position: relative;
		right: auto !important;
		top: auto;
		transform: none;
		margin: 0 auto 24px;
		order: -1;
	}
	.eds-orbit__text { max-width: 100% !important; }
}

/* ================================================================
   LOGO WALL — two rows of white logo cards scrolling opposite ways.
   Seamless loop: two identical groups per row, animate track -50%.
   ================================================================ */
.eds-logowall {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}
.eds-logowall__row {
	overflow: hidden;
	-webkit-mask: linear-gradient( 90deg, transparent 0, #000 var( --lw-fade, 0px ), #000 calc( 100% - var( --lw-fade, 0px ) ), transparent 100% );
	mask: linear-gradient( 90deg, transparent 0, #000 var( --lw-fade, 0px ), #000 calc( 100% - var( --lw-fade, 0px ) ), transparent 100% );
}
.eds-logowall__track {
	display: flex;
	width: max-content;
	animation: eds-logowall-scroll var( --lw-dur, 40s ) linear infinite;
	will-change: transform;
}
.eds-logowall__track--reverse { animation-direction: reverse; }
.eds-logowall__group { display: flex; flex: 0 0 auto; }
.eds-logowall__card {
	flex: 0 0 auto;
	height: 73px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e7eaee;
	border-radius: 12px;
	padding: 0 16px;
	margin-right: 12px;
	text-decoration: none;
}
.eds-logowall__card img {
	display: block;
	height: 46px;
	width: auto;
	max-width: none;
	object-fit: contain;
}
.eds-logowall--pause .eds-logowall__row:hover .eds-logowall__track {
	animation-play-state: paused;
}

@keyframes eds-logowall-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

@media (prefers-reduced-motion: reduce) {
	.eds-logowall__track { animation: none; }
}

/* ================================================================
   CARD FLOW — vertical stack of card images that rise into a centered
   resting position on scroll-in, one after another (staggered).
   JS (initCardFlow) adds .is-in; cards transition up via --i delay.
   ================================================================ */
.eds-cardflow {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	/* Per-breakpoint scale (control). Uses `zoom` (not transform: scale) so it
	   REFLOWS the layout — no reserved whitespace / gap below the cards. */
	zoom: var( --cf-scale, 1 );
}
.eds-cardflow__card {
	display: block;
	width: 100%;
	line-height: 0;
}
.eds-cardflow__card img { display: block; width: 100%; height: auto; }

/* Staggered entrance: hidden + dropped, then rises to rest. */
.eds-cardflow--animate .eds-cardflow__card {
	opacity: 0;
	transform: translateY( var( --cf-rise, 64px ) );
	transition: opacity var( --cf-dur, 700ms ) ease,
		transform var( --cf-dur, 700ms ) cubic-bezier( 0.22, 1, 0.36, 1 );
	transition-delay: calc( var( --i, 0 ) * var( --cf-stagger, 180ms ) );
	will-change: opacity, transform;
}
.eds-cardflow--animate.is-in .eds-cardflow__card {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.eds-cardflow--animate .eds-cardflow__card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Editor: show the cards at rest (the scroll-reveal only runs on the front end)
   so the stack is visible/editable, including per-breakpoint previews. */
body.elementor-editor-active .eds-cardflow--animate .eds-cardflow__card {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ================================================================
   WORKFLOW TABS — 3-tab feature section with colored arc, fade-in
   header, gradient tab pill, per-tab left content + animated stage.
   (Phase 1: shell. Per-tab sequences added in later phases.)
   ================================================================ */
.eds-wtabs {
	position: relative;
	width: 100%;
	/* Clip the wide arc horizontally (no page h-scroll) but keep vertical
	   overflow visible so the arc's glow can show above the curve. */
	overflow-x: clip;
	overflow-y: visible;
	--wt-zoom: 0.97;
}
/* Widget is full-width (so the background spans edge-to-edge); content is
   contained + centered here. */
.eds-wtabs__inner {
	position: relative;
	z-index: 1;
	max-width: 1130px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Per-tab background ARC — a wide dome (ellipse) anchored at the top that
   fades downward to reveal the parent behind it. Its color changes per tab
   (--wt-arc, swapped by JS). An optional per-tab image (--wt-bg) is masked to
   the same dome. The root clips it so the extra width doesn't cause h-scroll. */
.eds-wtabs__bg {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 200%;
	height: 1200px;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	background-color: var( --wt-arc, transparent );
	background-image: var( --wt-bg, none );
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-mask: linear-gradient( 180deg, #000 0%, #000 var( --wt-arc-solid, 26% ), transparent var( --wt-arc-fade, 62% ) );
	mask: linear-gradient( 180deg, #000 0%, #000 var( --wt-arc-solid, 26% ), transparent var( --wt-arc-fade, 62% ) );
	/* drop-shadow follows the masked (faded) shape → a soft glow on the curve. */
	filter: drop-shadow( 0 0 var( --wt-arc-glow-blur, 30px ) var( --wt-arc-glow-color, rgba( 168, 205, 236, 0.55 ) ) );
	transition: background-color 0.5s ease;
}

/* Header — visible by default. The fade-in is progressive enhancement:
   JS adds `.wt-armed` (hides it) then `.is-in` on scroll-in (reveals). Without
   JS, or if the observer never fires, the header simply stays visible. */
.eds-wtabs__header {
	position: relative;
	z-index: 1;
	max-width: 830px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.eds-wtabs.wt-armed .eds-wtabs__title,
.eds-wtabs.wt-armed .eds-wtabs__subtitle {
	opacity: 0;
	transform: translateY( 28px );
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.eds-wtabs.wt-armed .eds-wtabs__subtitle { transition-delay: 0.14s; }
.eds-wtabs.wt-armed.is-in .eds-wtabs__title,
.eds-wtabs.wt-armed.is-in .eds-wtabs__subtitle { opacity: 1; transform: none; }
.eds-wtabs__title { margin: 0; }
.eds-wtabs .eds-wtabs__subtitle { margin: 0; font-size: 16px; line-height: 22px; }

/* Tab nav pill. */
.eds-wtabs__nav {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	margin: 32px auto 0;
	padding: 8px;
	border-radius: 9999px;
	background-image: linear-gradient( 84.9deg, var( --wt-pill-a, #74b7ec ) 0%, var( --wt-pill-b, #aa4190 ) 146% );
	box-shadow: 0 4px 11.65px rgba( 0, 0, 0, 0.08 );
}
.eds-wtabs__tab,
.eds-wtabs__tab:hover,
.eds-wtabs__tab:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	padding: 12px 16px;
	border-radius: 9999px;
	font-family: "Golos Text", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.eds-wtabs__tab svg,
.eds-wtabs__tab i { width: 20px; height: 20px; font-size: 20px; flex: 0 0 auto; }
/* Icons follow the tab text color: white when inactive, black when active.
   Recolor fill AND stroke, but only where actually set — so filled icons and
   stroke/outline icons both tint correctly and outline paths (fill:none) are
   not accidentally filled solid. */
.eds-wtabs__tab svg [fill]:not([fill="none"]) { fill: currentColor; }
.eds-wtabs__tab svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.eds-wtabs__tab:hover { background-color: rgba( 255, 255, 255, 0.18 ); }
.eds-wtabs__tab.is-active,
.eds-wtabs__tab.is-active:hover { background-color: rgba( 255, 255, 255, 0.6 ); color: #0d0f11; }
/* Lower-iPad range (768–835px): drop the tab font 2px so the labels don't
   overflow the pill nav (which keeps the desktop design on tablet). */
@media (min-width: 768px) and (max-width: 835px) {
	.eds-wtabs__tab,
	.eds-wtabs__tab:hover,
	.eds-wtabs__tab:focus { font-size: 14px; }
}

/* Panels. */
.eds-wtabs__panels {
	position: relative;
	z-index: 1;
	margin-top: 48px;
}
.eds-wtabs__panel {
	display: none;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 52px;
	align-items: center;
}
.eds-wtabs__panel.is-active {
	display: grid;
	animation: eds-wtabs-zoom 0.5s ease;
}
@keyframes eds-wtabs-zoom {
	from { opacity: 0; transform: scale( var( --wt-zoom, 0.97 ) ); }
	to   { opacity: 1; transform: none; }
}

/* Left content. */
.eds-wtabs__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	max-width: 535px;
	height: 100%;
}
.eds-wtabs__lead { margin: 0; }
.eds-wtabs__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}
.eds-wtabs__bullet {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: "Golos Text", sans-serif;
	font-size: 16px;
	line-height: 22px;
}
.eds-wtabs__check { flex: 0 0 auto; width: 24px; height: 24px; }
.eds-wtabs__btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	font-family: "Golos Text", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	padding: 16px 20px;
	border-radius: 100px;
	border: 0;
	transition: background-color 0.2s ease;
}
.eds-wtabs__testi {
	width: 100%;
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.eds-wtabs__testi-quote { margin: 0; font-family: "Golos Text", sans-serif; font-size: 16px; line-height: 22px; letter-spacing: 0.16px; }
.eds-wtabs__testi-author { display: flex; gap: 16px; align-items: flex-start; }
.eds-wtabs__testi-photo { width: 41px; height: 41px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.eds-wtabs__testi-meta { display: flex; flex-direction: column; font-size: 15px; line-height: 1.35; }
.eds-wtabs__testi-meta strong { color: #0d0f11; font-weight: 700; }
.eds-wtabs__testi-meta span { color: #0D0F11; }

/* Stage + image layers. */
.eds-wtabs__stage {
	position: relative;
	/* Locked to a 1:1 square on every breakpoint — height always tracks width,
	   including on layout shift (no JS needed for the box). Capped by the Stage
	   Max Size control (max-width). align-self:start opts out of grid stretch so
	   the aspect-ratio owns the height. */
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	align-self: start;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 12px;
	border: 0.5px solid rgba( 184, 192, 204, 0.5 );
}
/* Tab 2 self-hosted MP4: fills the 1:1 square stage, replacing the coded stage
   assets. Radius is driven by the per-breakpoint tab2_video_radius control (also
   set on the stage so its overflow clip matches). object-fit set via the Fit control. */
.eds-wtabs__stage--video {
	border: 0;
}
.eds-wtabs__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 2;
	border-radius: 12px;
}
/* Stacked backdrop layers (bottom → top): base image, gradient, noise. All sit
   below the dashboard image layers (z-index 1+). Per-tab gradient vars are set
   on .eds-wtabs__stage and inherit into .eds-wtabs__stage-grad. */
.eds-wtabs__stage-base,
.eds-wtabs__stage-grad,
.eds-wtabs__stage-noise {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.eds-wtabs__stage-base {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.eds-wtabs__stage-grad {
	background-image: linear-gradient( var( --wt-grad-angle, 180deg ), var( --wt-grad-a, transparent ), var( --wt-grad-b, transparent ) );
}
.eds-wtabs__stage-noise {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	mix-blend-mode: multiply;
	opacity: 0.5;
}
/* Assets canvas: on desktop it fills the stage (passthrough); on mobile JS scales
   it from the design size so every absolutely-positioned asset fits (no overflow). */
/* Assets canvas: a fixed design box (--wt-design-w × --wt-design-h) centered in
   the square stage and scaled by --wt-fit (JS) so the whole composition fits the
   1:1 box on every breakpoint / layout shift. */
.eds-wtabs__stage-canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc( var( --wt-design-w, 544 ) * 1px );
	height: calc( var( --wt-design-h, 549 ) * 1px );
	transform: translate( -50%, -50% ) scale( var( --wt-fit, 1 ) );
	transform-origin: center;
	z-index: 1;
}
.eds-wtabs__layer { position: absolute; z-index: 1; line-height: 0; }
.eds-wtabs__layer img { display: block; width: 100%; height: auto; }

/* Tab 1 — AI Forecast progress bar (coded module). */
.eds-wtabs__progress {
	position: absolute;
	z-index: 6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.9em 1.2em;
	background-color: #fff;
	border: 1px solid #e7eaee;
	border-radius: 8px;
	box-shadow: 0 4px 11px rgba( 0, 0, 0, 0.06 );
	font-family: "Golos Text", sans-serif;
	font-size: 9px;
	line-height: 1;
}
.eds-wtabs__progress-label {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var( --wt-accent, #aa4190 );
	font-weight: 700;
	white-space: nowrap;
}
.eds-wtabs__progress-label svg { width: 1.4em; height: 1.4em; flex: 0 0 auto; }
.eds-wtabs__progress-track {
	position: relative;
	flex: 1 1 auto;
	min-width: 40px;
	height: 0.35em;
	border-radius: 99px;
	background-color: var( --wt-track, #e7eaee );
	overflow: hidden;
}
.eds-wtabs__progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 99px;
	background: linear-gradient( 90deg, #74b7ec, var( --wt-accent, #aa4190 ) );
}
.eds-wtabs__progress-pct { color: var( --wt-accent, #aa4190 ); font-weight: 700; white-space: nowrap; }
.eds-wtabs__progress-trailing { color: #64748b; white-space: nowrap; }
/* Fades in (0 → 1) when the section scrolls in / the tab activates. */
.eds-wtabs.is-anim-ready .eds-wtabs__progress { opacity: 0; transition: opacity 0.7s ease; }
.eds-wtabs.is-anim-ready .eds-wtabs__progress.is-revealed { opacity: 1; }

/* Tab 1 — coded budget card(s). Absolutely positioned; the rise/fade and the
   bar fill are driven per-frame by JS off the top bar's value (no CSS
   transitions here). */
.eds-wtabs__card {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #d9dde3;
	border-radius: 7px;
	box-shadow: 0 9px 12px rgba( 27, 38, 46, 0.05 );
	padding: 0.9em 1.1em;
	font-family: "Golos Text", sans-serif;
	font-size: 13px;
	line-height: 1.2;
}
.eds-wtabs__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6em; }
.eds-wtabs__card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5em; }
.eds-wtabs__card-name { font-weight: 700; color: #4b5768; }
.eds-wtabs__card-code { background: #e5f3fc; color: #4b5768; border-radius: 0.3em; padding: 0.15em 0.5em; font-size: 0.92em; }
.eds-wtabs__card-total { color: #4b5768; font-size: 1em; align-self: center; text-align: center; white-space: nowrap; }
.eds-wtabs__card-note { color: #c0392b; font-size: 0.78em; font-weight: 600; margin-top: 0.4em; }
.eds-wtabs__card-bar {
	position: relative;
	margin-top: 0.8em;
	height: 16px;
	border-radius: 3px;
	background: #eef1f4;
	overflow: hidden;
}
.eds-wtabs__card-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #51ac65;
}
.eds-wtabs__card-fill span { color: #fff; font-weight: 700; font-size: 0.7em; white-space: nowrap; }

/* Cards 1, 2 & 3 — Budget Cards refreshed layout (Figma 9431-30771 / -30782 /
   -30797): name + code pill inline, "Total" right, a pill-shaped bar with value
   labels inside. Card 3 also carries an inline over-spent note. Animations
   (rise/fade/fill) are untouched. */
.eds-wtabs__card--c1 .eds-wtabs__card-top,
.eds-wtabs__card--c2 .eds-wtabs__card-top,
.eds-wtabs__card--c3 .eds-wtabs__card-top { align-items: center; }
.eds-wtabs__card--c1 .eds-wtabs__card-info,
.eds-wtabs__card--c2 .eds-wtabs__card-info,
.eds-wtabs__card--c3 .eds-wtabs__card-info { flex-direction: row; align-items: center; gap: 0.6em; flex: 0 0 auto; }
.eds-wtabs__card--c1 .eds-wtabs__card-name,
.eds-wtabs__card--c2 .eds-wtabs__card-name,
.eds-wtabs__card--c3 .eds-wtabs__card-name { font-weight: 600; white-space: nowrap; }
.eds-wtabs__card--c1 .eds-wtabs__card-code,
.eds-wtabs__card--c2 .eds-wtabs__card-code,
.eds-wtabs__card--c3 .eds-wtabs__card-code { border-radius: 8px; padding: 0.28em 0.62em; align-self: center; }
.eds-wtabs__card--c1 .eds-wtabs__card-total,
.eds-wtabs__card--c2 .eds-wtabs__card-total,
.eds-wtabs__card--c3 .eds-wtabs__card-total { align-self: center; font-weight: 600; flex: 0 0 auto; }
.eds-wtabs__card--c1 .eds-wtabs__card-bar,
.eds-wtabs__card--c2 .eds-wtabs__card-bar,
.eds-wtabs__card--c3 .eds-wtabs__card-bar { border-radius: 99px; }
.eds-wtabs__card--c1 .eds-wtabs__card-fill { border-radius: 99px; }
/* Cards 2 & 3 segmented bar: pill ends, labels centered. */
.eds-wtabs__card--c2 .eds-wtabs__card-segs,
.eds-wtabs__card--c3 .eds-wtabs__card-segs { border-radius: 99px; overflow: hidden; }
.eds-wtabs__card--c2 .eds-wtabs__card-seg,
.eds-wtabs__card--c3 .eds-wtabs__card-seg { display: flex; align-items: center; justify-content: center; }
/* Card 3 over-spent note — inline in the header between name/code and total. */
.eds-wtabs__card--c3 .eds-wtabs__card-note {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	color: #8D1000;
	font-family: 'Roboto', system-ui, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Segmented bar (card 2): segments laid out full-width, revealed L→R by JS. */
.eds-wtabs__card-segs {
	position: absolute;
	inset: 0;
	display: flex;
}
.eds-wtabs__card-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.7em;
	white-space: nowrap;
	overflow: hidden;
}

/* Armed (JS present): card starts hidden, off the bottom; JS drives the rest. */
.eds-wtabs.is-anim-ready .eds-wtabs__card {
	opacity: 0;
	transform: translateY( var( --card-rise, 220px ) );
}
.eds-wtabs.is-anim-ready .eds-wtabs__card-segs { clip-path: inset( 0 100% 0 0 ); }

/* ---- Tab 2: coded pills + approval cards ---- */
.eds-wtabs__pill {
	position: absolute;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	box-sizing: border-box;
	padding: 0.6em 0.9em;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba( 13, 15, 17, 0.08 );
	font-family: "Golos Text", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}
.eds-wtabs__pill-icon { display: inline-flex; align-items: center; }
.eds-wtabs__pill-icon svg,
.eds-wtabs__pill-icon i { width: 1.1em; height: 1.1em; font-size: 1.1em; }

.eds-wtabs__approvals {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.eds-wtabs__appr {
	display: flex;
	align-items: center;
	gap: 1em;
	box-sizing: border-box;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba( 13, 15, 17, 0.08 );
	padding: 1em 1.2em;
	font-family: "Golos Text", sans-serif;
	font-size: 16px;
}
.eds-wtabs__appr-name { flex: 1 1 auto; color: #0d0f11; }
.eds-wtabs__appr-amount { font-weight: 700; color: #0d0f11; white-space: nowrap; }
.eds-wtabs__appr-status {
	flex: 0 0 auto;
	padding: 0.45em 1em;
	border-radius: 6px;
	font-weight: 700;
	font-size: 0.85em;
	white-space: nowrap;
}

/* Tab 2 fade-up reveal (timeline-staggered by JS). */
.eds-wtabs.is-anim-ready .eds-wtabs__t2el {
	opacity: 0;
	transform: translateY( var( --t2-rise, 40px ) );
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.eds-wtabs.is-anim-ready .eds-wtabs__t2el.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-wtabs.is-anim-ready .eds-wtabs__t2el { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Tab 3: coded cards + chips (positioned over the Visa-card image) ---- */
.eds-wtabs__ts-card,
.eds-wtabs__tl-card {
	position: absolute;
	z-index: 4;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba( 13, 15, 17, 0.12 );
	padding: 1em 1.1em;
	font-family: "Golos Text", sans-serif;
	font-size: 13px;
	line-height: 1.2;
}
.eds-wtabs__tcard-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6em; }
.eds-wtabs__tcard-label { color: #4b5768; font-weight: 500; }
.eds-wtabs__ts-used { color: #4b5768; font-size: 0.8em; font-weight: 600; white-space: nowrap; }
.eds-wtabs__tl-sub { color: #4b5768; font-size: 0.8em; white-space: nowrap; }
.eds-wtabs__ts-amount,
.eds-wtabs__tl-amount { color: #0d0f11; font-weight: 700; line-height: 1; }
.eds-wtabs__ts-amount { font-size: 22px; }
.eds-wtabs__tl-amount { font-size: 26px; }

.eds-wtabs__usebar {
	position: relative;
	width: 100%;
	height: 4px;
	border-radius: 99px;
	overflow: hidden;
	background: #f0dec4;
}
.eds-wtabs__usebar-fill { height: 100%; width: 0; border-radius: 99px; background: #f5a623; }

.eds-wtabs__ts-suggest { display: flex; align-items: center; gap: 0.4em; font-size: 0.7em; line-height: 1.2; }
.eds-wtabs__ts-tag { display: inline-flex; align-items: center; gap: 0.25em; color: #8b5cf6; font-weight: 700; white-space: nowrap; }
.eds-wtabs__ts-tag svg { width: 1em; height: 1em; fill: currentColor; }
.eds-wtabs__ts-link { color: #4b5768; text-decoration: underline; }

.eds-wtabs__chips { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.eds-wtabs__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	box-sizing: border-box;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 18px rgba( 13, 15, 17, 0.1 );
	padding: 0.5em 0.8em;
	font-family: "Golos Text", sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #4b5768;
	white-space: nowrap;
}
.eds-wtabs__chip-icon { display: inline-flex; align-items: center; color: #c6248f; }
.eds-wtabs__chip-icon svg,
.eds-wtabs__chip-icon i { width: 1em; height: 1em; font-size: 1em; fill: currentColor; }

/* Bottom-center footer text (full width so the reveal translateY isn't
   clobbered by a centering translateX). */
.eds-wtabs__t3-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 4;
}
.eds-wtabs__t3-footer p {
	margin: 0 auto;
	max-width: 70%;
	text-align: center;
	color: #fff;
	font-size: 8px;
	font-family: "Golos Text", sans-serif;
	line-height: 1.4;
}

/* Reveal states — only active once JS arms the sequence (phases 2-4);
   without `.is-anim-ready`, layers are simply visible. */
.eds-wtabs.is-anim-ready .eds-wtabs__layer.is-reveal-fade { opacity: 0; transition: opacity 0.6s ease; }
.eds-wtabs.is-anim-ready .eds-wtabs__layer.is-reveal-fade.is-revealed { opacity: 1; }
.eds-wtabs.is-anim-ready .eds-wtabs__layer.is-reveal-fade-rise { opacity: 0; transform: translateY( 40px ); transition: opacity 0.6s ease, transform 0.6s ease; }
.eds-wtabs.is-anim-ready .eds-wtabs__layer.is-reveal-fade-rise.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-wtabs.wt-armed .eds-wtabs__title,
	.eds-wtabs.wt-armed .eds-wtabs__subtitle { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-wtabs__panel.is-active { animation: none; }
	.eds-wtabs.is-anim-ready .eds-wtabs__layer { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-wtabs.is-anim-ready .eds-wtabs__progress { opacity: 1 !important; transition: none !important; }
}

/* Mobile (≤1180): tabs become a swipeable scroll-snap carousel;
   each slide stacks stage on top, text below. */
@media (max-width: 1180px) {
	.eds-wtabs__panels {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		/* Cap the width so wide tablets don't blow the panel up too large; centered. */
		width: 100%;
		max-width: 766px;
		margin-left: auto;
		margin-right: auto;
	}
	.eds-wtabs__panels::-webkit-scrollbar { display: none; }
	.eds-wtabs__panel {
		display: flex !important;
		flex: 0 0 100%;
		flex-direction: column;
		align-items: stretch; /* fill width (override desktop center) */
		grid-template-columns: none;
		scroll-snap-align: center;
		animation: none !important;
	}
	.eds-wtabs__stage { order: 1; width: 100%; }
	/* JS scales the canvas from top-left (see scaleWtabsStages). Keep inset:0 as the
	   base so the canvas always has a valid size even before/without JS (e.g. in the
	   Elementor editor) — otherwise it collapses and the cards pile top-left. */
	.eds-wtabs__stage-canvas { will-change: transform; }
	.eds-wtabs__left { order: 2; max-width: 100%; }
	}
	/* The tab-row restyle below applies on MOBILE ONLY (<768); tablet keeps the
	   desktop gradient pill tabs. */
	@media (max-width: 767px) {
	/* Simplified mobile tabs (Figma 7842:12844): a smooth horizontal scroll row of
	   solid rounded-rect tabs — active uses the desktop gradient, inactive light
	   grey — no pill wrap. */
	.eds-wtabs__nav {
		width: auto;
		max-width: none;
		margin: 24px 0 0;
		padding: 2px;
		gap: 12px;
		/* Center the tabs (wide tablets no longer left-align); "safe" keeps the
		   first tab reachable when the row overflows and has to scroll. */
		justify-content: safe center;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		overflow-x: auto;
		scroll-behavior: smooth;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.eds-wtabs__nav::-webkit-scrollbar { display: none; }
	.eds-wtabs__tab,
	.eds-wtabs__tab:hover,
	.eds-wtabs__tab:focus {
		flex: 0 0 auto;
		padding: 16px !important;
		border-radius: 8px !important;
		background-color: #f9f9f9 !important;
		color: #969da6 !important;
		font-size: 14px;
		letter-spacing: 0.4px;
		scroll-snap-align: center;
	}
	.eds-wtabs__tab.is-active,
	.eds-wtabs__tab.is-active:hover {
		background-image: linear-gradient( 84.9deg, var( --wt-pill-a, #74b7ec ) 0%, var( --wt-pill-b, #aa4190 ) 146% );
		color: #fff !important;
	}
}

/* ----------------------------------------------------------------
   Reset-override: Hello Elementor's reset.css styles <button> like a
   pink outlined button, including `button:hover/:focus` at specificity
   (0,1,1) which beats single-class rules. These :hover/:focus selectors
   are (0,2,0) and win, so our unstyled buttons stay unstyled.
   ---------------------------------------------------------------- */
.eds-header__burger,
.eds-header__burger:hover,
.eds-header__burger:focus,
.eds-hero__watch,
.eds-hero__watch:hover,
.eds-hero__watch:focus,
.eds-hero__lightbox-close,
.eds-hero__lightbox-close:hover,
.eds-hero__lightbox-close:focus {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Play button: keep its control-driven background/size/shadow; just enforce the
   circle + kill reset's border/radius on every state. (No box-shadow:none here,
   so the play_shadow control can apply.) */
.eds-hero__play,
.eds-hero__play:hover,
.eds-hero__play:focus {
	border: 0;
	border-radius: 50%;
}

/* ================================================================
   IMPACT SECTION — centered header over three overlapping mockup
   cards (Smart invoice review / Credit card + spend / Purchase).
   Entrance = staggered fade-in on scroll (JS adds .is-in).
   ================================================================ */
.eds-imp {
	position: relative;
	width: 100%;
	padding: 56px 0 72px;
	font-family: 'Golos Text', system-ui, sans-serif;
}
.eds-imp__inner {
	position: relative;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 1;
}

/* Backdrop gradient panel + soft glow behind the header. */
.eds-imp__backdrop {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0; /* stretch the full section height */
	transform: translateX(-50%);
	width: 100%;
	/* !important on radius beats the old backdrop_radius control's cached value. */
	border-radius: var(--imp-rad, 12px) !important;
	border: 1px solid var(--imp-border, #E7EAEE);
	background: linear-gradient(292deg, var(--imp-grad-1, rgba(116, 183, 236, 0.58)) -1.39%, var(--imp-grad-2, rgba(170, 65, 144, 0.40)) 95.13%), #FFF;
	overflow: hidden;
	z-index: 0;
}
.eds-imp__glow {
	position: absolute;
	right: -10%;
	bottom: -40%;
	width: 70%;
	height: 120%;
	background: radial-gradient(closest-side, rgba(170, 65, 144, 0.18), transparent);
	pointer-events: none;
}

/* Header */
.eds-imp__head { text-align: center; max-width: 840px; margin: 0 auto; }
.eds-imp__logo img {
	width: 88px;
	height: 88px;
	display: block;
	margin: 0 auto;
	border-radius: 22px;
	box-shadow: 0 12px 30px rgba(13, 15, 17, 0.12);
}
.eds-imp__title { margin: 18px 0 0; line-height: 1.1; }
.eds-imp__subtitle { margin: 16px auto 0; max-width: 720px; line-height: 1.5; }

/* Mockup cluster — three overlapping cards. */
/* Cluster wrapper centers the (possibly wider-than-screen) cluster and clips
   the bleed — on mobile the side cards crop at the edges around the centered
   credit card, per the Figma mobile design. */
.eds-imp__mockwrap {
	display: flex;
	justify-content: center;
}
.eds-imp__mock {
	position: relative;
	width: max-content;
	margin: 44px 0 0; /* no auto margins — justify-content centers overflow evenly */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* JS (scaleImpStages) scales this to fit its wrapper on smaller screens,
	   anchored top-center so it stays centered. */
	transform-origin: top center;
}
.eds-imp__card {
	position: relative; /* enables per-card left/top offset controls */
	box-sizing: border-box;
	width: 323px;
	font-size: 14px; /* base 1em — inner text uses em so the per-card Typography control scales everything */
	background: #fff;
	border: 1px solid #E7EAEE;
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(13, 15, 17, 0.10);
}
.eds-imp__card--left  { margin-top: 70px; margin-right: -26px; z-index: 1; padding: 22px 18px; }
.eds-imp__card--center { z-index: 3; padding: 16px; }
.eds-imp__card--right { margin-top: 70px; margin-left: -26px; z-index: 1; padding: 18px; }
/* Cards 1 & 3 as flex columns so content fills the height. Card 3's height is
   set by its Height control (--imp-c3-h); rows spread to fill it. */
.eds-imp__card--left,
.eds-imp__card--right { display: flex; flex-direction: column; }
.eds-imp__card--left .eds-imp__scan { margin-top: auto; } /* scan bar pins to the bottom */
.eds-imp__card--right { min-height: var(--imp-c3-h, 270px); justify-content: space-between; }
/* Card 3: keep a divider under the last row (Payments) too. */
.eds-imp__card--right .eds-imp__prow:last-child { border-bottom: 1px solid #E7EAEE; }

.eds-imp__card-title { font-size: 1.07em; font-weight: 600; color: #0D0F11; padding: 2px 2px 8px; }
/* Cards 1 & 3 titles match Figma (9431-15816 / -15864): Roboto Bold, #18262F, larger. */
.eds-imp__card--left .eds-imp__card-title,
.eds-imp__card--right .eds-imp__card-title { font-size: 1.55em; font-weight: 700; color: #18262F; letter-spacing: -0.01em; }

/* Card 1 rows + scanning bar */
.eds-imp__row { display: flex; align-items: center; gap: 10px; padding: var(--imp-rowspace, 13px) 2px; }
.eds-imp__row-desc { font-size: 0.93em; color: #0D0F11; }
.eds-imp__row-amt { font-size: 0.93em; font-weight: 600; color: #0D0F11; }
.eds-imp__tag {
	margin-left: auto;
	font-size: 0.64em;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
}
.eds-imp__scan { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; }
.eds-imp__scan-label { font-size: 0.64em; font-weight: 600; flex: 0 0 auto; }
.eds-imp__scan-track { flex: 1 1 auto; height: 4px; border-radius: 99px; overflow: hidden; }
.eds-imp__scan-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--imp-scan-1, #AA4190), var(--imp-scan-2, #386276));
}
.eds-imp__scan-pct { font-size: 0.64em; color: #4B5768; flex: 0 0 auto; min-width: 24px; text-align: right; }

/* Card 1 — Reimbursements entries (Figma 9431-15815). Each entry: a tinted tag
   row (tag + status pill) over a white detail row (avatar + name/subtitle +
   amounts). em-based so it scales with the card. */
.eds-imp__reim { border: 1px solid #E7EAEE; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.eds-imp__reim:last-of-type { margin-bottom: 0; }
/* Tag row: white with a bottom divider; the tag itself is a rounded pill. */
.eds-imp__reim-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #E7EAEE; }
.eds-imp__reim-tag { display: inline-flex; align-items: center; gap: 4px; color: #AA4190; font-size: 0.72em; font-weight: 600; background: #F7ECF4; padding: 2px 4px; border-radius: 99px; }
.eds-imp__reim-tag span { line-height: 1px; }
.eds-imp__reim-spark { width: 1em; height: 1em; flex: 0 0 auto; }
.eds-imp__pill { padding: 3px 10px; border-radius: 99px; font-size: 0.78em; font-weight: 600; white-space: nowrap; }
.eds-imp__pill--paid { background: #EDFDF4; color: #084625; }
.eds-imp__pill--open { background: #E8F3FC; color: #1787E0; }
.eds-imp__pill--processing { background: #FEF5E7; color: #5C3B04; }
.eds-imp__reim-detail { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.eds-imp__reim-av { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #E7EAEE; }
.eds-imp__reim-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eds-imp__reim-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.eds-imp__reim-name { font-size: 1em; font-weight: 600; color: #0D0F11; line-height: 1.3; }
.eds-imp__reim-sub { font-size: 0.86em; color: #4B5768; line-height: 1.3; }
.eds-imp__reim-amt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.eds-imp__reim-amt1 { font-size: 1em; font-weight: 600; color: #0D0F11; line-height: 1.3; white-space: nowrap; }
.eds-imp__reim-amt2 { font-size: 0.86em; color: #4B5768; line-height: 1.3; white-space: nowrap; }

/* Card 2 — credit card + spend + anomaly */
.eds-imp__cc img { display: block; width: 100%; height: auto; border-radius: 12px; }
.eds-imp__disclaimer { font-size: 0.57em; line-height: 1.4; color: #BCC4CF; margin: 10px 0 0; }
.eds-imp__spend { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--imp-rowspace, 13px); font-size: 0.93em; color: #4B5768; }
.eds-imp__spend strong { color: #0D0F11; font-weight: 700; font-size: 1.07em; }
.eds-imp__spend-track { position: relative; height: 3px; border-radius: 99px; margin-top: 8px; overflow: hidden; }
.eds-imp__spend-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 99px; }
.eds-imp__anomaly { margin-top: var(--imp-rowspace, 13px); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.eds-imp__anomaly-title { display: flex; align-items: center; gap: 6px; font-size: 0.86em; font-weight: 600; }
.eds-imp__anomaly-text { font-size: 0.79em; line-height: 1.5; }

/* Card 3 — purchase rows + badges */
.eds-imp__prow { display: flex; align-items: center; padding: var(--imp-rowspace, 13px) 2px; border-bottom: 1px solid #E7EAEE; }
.eds-imp__prow:last-child { border-bottom: 0; }
.eds-imp__prow-label { font-size: 1em; color: #4B5768; }
.eds-imp__badge {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.64em;
	font-weight: 600;
	line-height: 1; /* hug the text height — no extra line box */
	padding: 4px 9px;
	border-radius: 99px;
	white-space: nowrap;
}
/* Icon scales with the badge text (was a fixed 12px, which made the badge
   too tall once the mobile text shrank). */
.eds-imp__spark { flex: 0 0 auto; width: 1em; height: 1em; }

/* Entrance — staggered fade-in on scroll. */
.eds-imp__mock--anim .eds-imp__card {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--imp-fade-dur, 700ms) ease,
		transform var(--imp-fade-dur, 700ms) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * var(--imp-stagger, 140ms));
}
.eds-imp__mock--anim.is-in .eds-imp__card { opacity: 1; transform: none; }

/* Badge pulse (Card 3). */
.eds-imp__badge--pulse { animation: eds-imp-pulse 2.2s ease-out infinite; }
@keyframes eds-imp-pulse {
	0%   { box-shadow: 0 0 0 0 var(--imp-pulse, rgba(170, 65, 144, 0.4)); }
	70%  { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.eds-imp__mock--anim .eds-imp__card { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-imp__badge--pulse { animation: none; }
}

/* In the Elementor editor, always show the cards (and bars filled) so assets
   can be designed regardless of scroll-reveal timing. */
body.elementor-editor-active .eds-imp__mock--anim .eds-imp__card {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}
body.elementor-editor-active .eds-imp__scan-fill { width: 32%; }
body.elementor-editor-active .eds-imp__spend-fill { width: 80%; }

/* Cluster scale uses `zoom` (driven by the Card Cluster Scale control) so it
   reflows layout — no reserved whitespace — and per-card width controls still
   take effect on every device. */
.eds-imp__mock { zoom: 1; }

/* Mobile/tablet: the cluster is scaled to fit by JS (scaleImpStages), so it no
   longer needs to bleed/clip — keep it centered within the content width. */
@media (max-width: 1180px) {
	.eds-imp__mockwrap { overflow: hidden; }
}
@media (max-width: 767px) {
	.eds-imp__row,
	.eds-imp__prow { height: 20px; box-sizing: border-box; }
	.eds-imp__anomaly-title { height: 5px; box-sizing: border-box; }
	.eds-imp__disclaimer { display: none; }
	.eds-imp { padding-bottom: 48px; }
	/* Card 1: compact the reimbursement entries so it scales down like the others
	   (its new markup isn't covered by the .eds-imp__row rule above). */
	.eds-imp__reim { margin-bottom: 4px; }
	.eds-imp__reim-top { padding: 3px 8px; }
	.eds-imp__reim-detail { padding: 4px 8px; gap: 6px; }
	.eds-imp__reim-av { width: 24px; height: 24px; }
	/* Give the bottom stage (mock cluster) the full width by cancelling the
	   inner's 20px side padding — only the stage, not the header — so it scales
	   larger on mobile. */
	.eds-imp__mockwrap { margin-left: -20px; margin-right: -20px; }
}

/* ================================================================
   CONNECTED SOURCES — card with title, wrapping colored pills, footer.
   All colors/spacing/typography come from widget controls.
   ================================================================ */
.eds-cs {
	box-sizing: border-box;
	width: 100%;
	font-family: 'Golos Text', system-ui, sans-serif;
}
.eds-cs__title { line-height: 1.2; }
.eds-cs__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.eds-cs__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	white-space: nowrap;
}
.eds-cs__footer { line-height: 1.2; }

/* Staggered pill fade-in on scroll (JS adds .is-in to the card). */
.eds-cs--anim .eds-cs__pill {
	opacity: 0;
	transform: translateY(var(--cs-rise, 14px));
	transition: opacity var(--cs-dur, 550ms) ease,
		transform var(--cs-dur, 550ms) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * var(--cs-stagger, 90ms));
}
.eds-cs--anim.is-in .eds-cs__pill { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-cs--anim .eds-cs__pill { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ================================================================
   CASE STUDY SLIDER — autoplaying fade slider; each slide = bg photo,
   logo, headline, description, dots, and 1–2 buttons. All visuals from
   widget controls; JS (initCaseSlider) drives autoplay + dot nav.
   ================================================================ */
.eds-slider { position: relative; width: 100%; --sld-speed: 600ms; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-slider__viewport { position: relative; width: 100%; overflow: hidden; display: grid; }

/* Slides stacked in a single grid cell so the viewport sizes to the TALLEST
   slide — the background always covers it (no bottom gap when a logo/long text
   makes a slide taller). Fade between them with opacity/visibility. */
.eds-slider__slide {
	grid-area: 1 / 1 / 2 / 2;
	position: relative;
	display: flex;            /* align-items set by control (vertical align) */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sld-speed, 600ms) ease, visibility 0s linear var(--sld-speed, 600ms);
}
.eds-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--sld-speed, 600ms) ease;
	z-index: 1;
}
.eds-slider__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.eds-slider__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--sld-ov-angle, 90deg), var(--sld-ov-1, rgba(13,15,17,0.78)), var(--sld-ov-2, rgba(13,15,17,0.15)));
}

.eds-slider__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
}
.eds-slider__logo { display: inline-flex; line-height: 0; }
.eds-slider__logo img { display: block; height: auto; }
.eds-slider__heading { margin: 0; }
.eds-slider__subtitle { margin: 0; }

.eds-slider__dots { display: flex; align-items: center; }
.eds-slider__dot {
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: 99px;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.eds-slider__buttons { display: flex; align-items: center; flex-wrap: wrap; }
.eds-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.eds-slider__watch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
	/* Reset native <button> chrome for the video-popup variant (matches the link). */
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.eds-slider__watch:hover,
.eds-slider__watch:focus,
.eds-slider__watch:focus-visible,
.eds-slider__watch:active { background: transparent; outline: none; box-shadow: none; }
.eds-slider__play { flex: 0 0 auto; }

/* Case Slider video lightbox (mirrors the Hero / CTA Stack lightbox). */
.eds-slider__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	background: var(--cs-lb-bg, rgba(15, 25, 31, 0.88));
	transition: opacity 0.3s ease;
}
.eds-slider__lightbox.is-open { display: flex; opacity: 1; }
.eds-slider__lightbox-backdrop { position: absolute; inset: 0; }
.eds-slider__lightbox-inner { position: relative; width: 100%; max-width: var(--cs-lb-max, 900px); z-index: 1; }
.eds-slider__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.eds-slider__video iframe,
.eds-slider__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eds-slider__lightbox-close,
.eds-slider__lightbox-close:hover,
.eds-slider__lightbox-close:focus {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Prev/next arrows — overlaid at the bottom-right of the slide. Prev is a
   translucent outline; next is a solid magenta circle (colours from controls). */
.eds-slider__nav {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 8px;
}
/* The button is just a 56px box holding the full circular SVG icon (circle +
   arrow are drawn in the SVG). A default (outline) and hover (filled) SVG are
   stacked and cross-faded on hover. The next button mirrors the left arrow. */
.eds-slider__arrow {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff; /* default outline + arrow (currentColor) */
	cursor: pointer;
}
/* Kill the hover/focus background Elementor's button reset adds — the circle is
   the SVG, the button itself must stay transparent in every state. */
.eds-slider__arrow,
.eds-slider__arrow:hover,
.eds-slider__arrow:focus,
.eds-slider__arrow:focus-visible,
.eds-slider__arrow:active { background: transparent !important; box-shadow: none !important; }
.eds-slider__arrow--next { transform: scaleX(-1); } /* mirror → right arrow */
.eds-slider__arrow .eds-slider__ic {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.eds-slider__ic--hover { opacity: 0; }
.eds-slider__ic-bg { fill: var(--arrow-hover-bg, #fff); }
.eds-slider__ic-fg { fill: var(--arrow-hover-ic, #662756); }
.eds-slider__arrow:hover .eds-slider__ic--default,
.eds-slider__arrow:focus-visible .eds-slider__ic--default { opacity: 0; }
.eds-slider__arrow:hover .eds-slider__ic--hover,
.eds-slider__arrow:focus-visible .eds-slider__ic--hover { opacity: 1; }
.eds-slider__arrow:disabled { opacity: 0.4; cursor: default; }

@media (prefers-reduced-motion: reduce) {
	.eds-slider__slide { transition: none; }
}

/* Mobile (per the mobile design): description hidden, dots hidden, buttons
   stacked full-width, and the prev/next nav drops below the card, centered —
   styled to match the Problem Cards nav (prev = magenta outline, next = filled). */
@media (max-width: 767px) {
	.eds-slider__buttons { flex-direction: column; align-items: stretch; width: 100%; }
	.eds-slider__btn { width: 100%; }
	.eds-slider__watch { justify-content: center; }
	.eds-slider__subtitle { display: none; }
	.eds-slider__dots { display: none; }
	.eds-slider__nav { position: static !important; right: auto !important; bottom: auto !important; display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
	/* On the page background the white icon would vanish — use magenta like Problem Cards. */
	.eds-slider__arrow { color: #662756 !important; }
	.eds-slider__arrow--next { --arrow-hover-bg: #662756 !important; --arrow-hover-ic: #FFFFFF !important; }
	.eds-slider__arrow--next .eds-slider__ic--default { opacity: 0; }
	.eds-slider__arrow--next .eds-slider__ic--hover { opacity: 1; }
}

/* ================================================================
   INTEGRATION ORBIT — dark section, left copy + button, right circular
   orbit of partner logos (one active, rest dimmed) around a centre hub.
   Logos placed via per-logo --angle; all visuals from widget controls.
   Phase 1 = static layout. JS cycling/scroll-pin added in later phases.
   ================================================================ */
.eds-iorb {
	--iorb-d: 760px;
	--iorb-logo: 78px;
	position: relative;
	width: 100%;
	font-family: 'Golos Text', system-ui, sans-serif;
}
/* The pin frame clips the bleeding orbit (NOT .eds-iorb — an overflow on the
   sticky's ancestor would break the pin). */
.eds-iorb__pin { position: relative; overflow: hidden; }

/* Content stays in a centred max-width container; the orbit is positioned
   absolutely and bleeds off the right (so it never pushes the layout). */
.eds-iorb__inner {
	position: relative;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	min-height: var(--iorb-d, 760px);
	display: flex;
	align-items: center;
}
.eds-iorb__text { position: relative; z-index: 3; flex: 0 0 auto; max-width: 485px; }

/* Backdrop behind the heading/text: a dark radial that fades out the orbit
   underneath (for legibility) + a soft glow. Sits above the orbit, below text. */
.eds-iorb__textglow {
	position: absolute;
	left: var(--iorb-tg-x, -6%);
	top: var(--iorb-tg-y, 50%);
	transform: translateY(-50%);
	width: var(--iorb-tg-w, 68%);
	height: var(--iorb-tg-h, 135%);
	z-index: 2;
	pointer-events: none;
	/* Centered radials so the fill fades to transparent on every side — no
	   hard cutoff when the backdrop is repositioned. */
	background:
		radial-gradient(ellipse 55% 55% at 50% 50%, var(--iorb-tg-glow, rgba(56, 98, 118, 0.30)) 0%, rgba(0, 0, 0, 0) 72%),
		radial-gradient(ellipse 58% 60% at 50% 50%, var(--iorb-tg-dark, #0F191F) 0%, var(--iorb-tg-dark, #0F191F) 32%, rgba(0, 0, 0, 0) 74%);
}
/* Film-grain overlay on the text backdrop glow — pure CSS SVG (feTurbulence)
   noise, no image upload. Masked to the glow ellipse so the grain fades out
   with the glow, and blended over it. Amount/size come from controls; 0% = off. */
.eds-iorb__textglow::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: var(--iorb-grain-size, 150px) var(--iorb-grain-size, 150px);
	opacity: var(--iorb-grain-op, 55%);
	mix-blend-mode: overlay;
	-webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 0%, rgba(0,0,0,0) 72%);
	mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 0%, rgba(0,0,0,0) 72%);
	pointer-events: none;
}
.eds-iorb__heading { margin: 0; }
/* Highlighted words: gradient text fill (colors/angle from controls).
   -webkit-text-fill-color wins over any stale `color` from the old control. */
.eds-iorb__hl {
	background: linear-gradient( var(--iorb-hl-ang, 90deg), var(--iorb-hl-1, #FFFFFF), var(--iorb-hl-2, #74B7EC) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.eds-iorb__desc { margin: 18px 0 0; }
.eds-iorb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
	border: 1px solid currentColor;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Stage — square; absolutely positioned and bleeding off the right edge.
   --iorb-d diameter, --iorb-logo circle size, --iorb-stage-x horizontal offset
   (negative = bleed further right) come from controls / .eds-iorb. */
.eds-iorb__stage {
	position: absolute;
	top: 50%;
	right: var(--iorb-stage-x, 0%);
	transform: translateY(-50%);
	z-index: 1; /* contain logo stacking below the text backdrop */
	width: var(--iorb-d);
	height: var(--iorb-d);
}
.eds-iorb__glow {
	position: absolute;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
}
/* Dashed orbit rings drawn as SVG strokes (thin line, long dashes). */
.eds-iorb__rings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.eds-iorb__ring {
	fill: none;
	stroke: var(--ring-color, rgba(255, 255, 255, 0.22));
	stroke-width: var(--ring-w, 0.16);
	stroke-dasharray: var(--ring-dash, 1.4) var(--ring-gap, 1.2);
	stroke-linecap: butt;
}

/* The whole ring rotates (JS sets its transform); logos ride around with it
   and each logo's image counter-rotates to stay upright. */
.eds-iorb__logos {
	position: absolute;
	inset: 0;
	z-index: 1;
	transform-origin: 50% 50%;
	transition: transform var(--iorb-step-speed, 0.5s) ease;
}
/* Coded dimmed circle: a solid dark gradient disc with a faint rim; the logo
   PNG is centered + faded inside (the circle itself stays solid). */
.eds-iorb__logo {
	--iorb-dim: 0.5;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--iorb-logo);
	height: var(--iorb-logo);
	margin: calc(var(--iorb-logo) / -2) 0 0 calc(var(--iorb-logo) / -2);
	/* place on the ring at --angle (box tilts with it; image counter-rotates).
	   --logo-scale grows the active logo. */
	transform: rotate(var(--angle, 0deg)) translateY(calc(var(--iorb-d) / -2 + var(--iorb-logo) / 2)) scale(var(--logo-scale, 1));
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	border: 1px solid rgba(231, 234, 238, 0.14);
	border-radius: 50%;
	background-color: #0F191F;
	overflow: hidden;
	transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.eds-iorb__logo-dim,
.eds-iorb__logo-on {
	position: absolute;
	top: 50%;
	left: 50%;
	/* cancel the logo's placement tilt so the image is upright; JS overrides
	   with -(angle + ring rotation) so it stays upright while the ring spins. */
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg)));
	width: 60%;
	height: 60%;
	object-fit: contain;
	z-index: 1;
	transition: transform var(--iorb-step-speed, 0.5s) ease, opacity 0.4s ease;
}
.eds-iorb__logo-dim { opacity: var(--iorb-dim, 0.5); }
.eds-iorb__logo-on { opacity: 0; }

.eds-iorb__logo.is-active {
	--iorb-glow: rgba(170, 65, 144, 0.55);
	--logo-scale: 1.22;
	background-color: #fff;
	border-color: #AA4190;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 22px var(--iorb-glow);
	z-index: 3;
}
.eds-iorb__logo:focus-visible { outline: 2px solid #74B7EC; outline-offset: 3px; }
.eds-iorb__logo.is-active .eds-iorb__logo-dim { opacity: 0; }
.eds-iorb__logo.is-active .eds-iorb__logo-on { opacity: 1; filter: none; }

/* Centre hub — Edstruments mark + active partner logo (capsule). */
/* Connector: a glass capsule from the orbit centre out to the active logo.
   Sits below the logos (so the active logo shows on top of its rounded end)
   and below the brand. Pivots at the centre, rotates to --active-angle. */
.eds-iorb__spoke {
	--hub-cap-h: 108px;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	height: var(--hub-cap-h, 108px);
	width: calc(var(--iorb-d) / 2 - var(--iorb-logo) / 2 + var(--hub-cap-h, 108px) / 2 + var(--cap-reach, 0px));
	margin-top: calc(var(--hub-cap-h, 108px) / -2);
	margin-left: calc(var(--hub-cap-h, 108px) / -2);
	transform-origin: calc(var(--hub-cap-h, 108px) / 2) 50%;
	transform: rotate(var(--active-angle, 0deg));
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(184, 192, 204, 0.30);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px rgba(116, 183, 236, 0.10);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform 0.5s ease;
}

/* Hub: brand mark anchored at the orbit centre, on top of the capsule. */
.eds-iorb__hub {
	--hub-brand: 88px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	z-index: 3;
}
.eds-iorb__brand {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hub-brand, 96px);
	height: var(--hub-brand, 96px);
	z-index: 1;
}
/* The uploaded mark already includes its own circle/border/glow. */
.eds-iorb__brand img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Mobile/tablet: orbit on top, text below (per the mobile design). */
@media (max-width: 1180px) {
	/* Orbit returns to normal flow on top, text below. */
	.eds-iorb__inner { flex-direction: column-reverse; align-items: flex-start; gap: 32px; min-height: 0; }
	.eds-iorb__stage { position: relative; top: auto; right: auto; transform: none; align-self: center; }
	.eds-iorb__text { flex: 1 1 auto; max-width: 100%; }
	/* Backdrop glow stays visible on tablet/mobile; its position/size stay driven by
	   the (responsive) Backdrop controls so they can be tuned per breakpoint. */
}
@media (prefers-reduced-motion: reduce) {
	.eds-iorb__logo { transition: none; }
}

/* ================================================================
   CTA STACK — rounded gradient card; left copy + buttons, right a fan
   of layered dashboard screenshots that stack up from the bottom on
   scroll-in (JS adds .is-in). All visuals come from widget controls.
   ================================================================ */
.eds-ctas { width: 100%; box-sizing: border-box; }
/* Full-width variant: break the section out to the viewport and let the card
   fill it edge to edge (overrides Card Max Width + outer horizontal padding).
   The copy stays aligned to a centered 1140px content zone; the art still bleeds
   off the right edge. */
.eds-ctas--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 0 !important; padding-right: 0 !important; }
.eds-ctas--full .eds-ctas__card {
	max-width: none;
	padding-left: max(24px, calc((100% - 1140px) / 2)) !important;
	padding-right: 0 !important;
}
.eds-ctas__card {
	position: relative;
	margin: 0 auto;
	max-width: 1140px;
	min-height: 439px;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: linear-gradient(var(--cta-angle, 110deg), var(--cta-bg1, #3E6E86), var(--cta-bg2, #2A4A5E));
	font-family: 'Golos Text', system-ui, sans-serif;
}
.eds-ctas__text { position: relative; z-index: 2; }
.eds-ctas__title { margin: 0; }
.eds-ctas__desc { margin: 18px 0 0; }
.eds-ctas__buttons { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.eds-ctas__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.eds-ctas__watch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	/* Reset native <button> chrome so the video-popup variant matches the link
	   (no theme background, border, or pink focus/hover). */
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.eds-ctas__watch:hover,
.eds-ctas__watch:focus,
.eds-ctas__watch:focus-visible,
.eds-ctas__watch:active { background: transparent; outline: none; box-shadow: none; }
.eds-ctas__play { flex: 0 0 auto; }

/* Layered key-art.
   Anchor the art's right edge to a centered content band (--cta-band, matches
   Card Max Width) instead of the card's raw right edge. In full-width mode the
   card is 100vw, so without this the art clung to the viewport edge — which
   differs between the editor preview and the real frontend. Locking to the
   centered band (the same band the copy aligns to) makes the placement
   identical in editor and frontend. */
.eds-ctas__art {
	position: absolute;
	right: max(0px, calc((100% - var(--cta-band, 1140px)) / 2));
	top: 50%;
	transform: translateY(-50%);
	width: 537px;
	height: 100%;
	z-index: 1;
	perspective: 1600px;
}
.eds-ctas__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--glow-size, 128%);
	height: var(--glow-size, 128%);
	transform: translate(-50%, -50%) translate(var(--glow-x, 0px), var(--glow-y, 0px));
	background: radial-gradient(ellipse at center, var(--glow-c, #9E488D) 0%, var(--glow-c2, rgba(158,72,141,0.45)) 42%, transparent 70%);
	filter: blur(var(--glow-blur, 70px));
	opacity: 0.55;
	z-index: 0;
	pointer-events: none;
}
.eds-ctas__layers {
	position: absolute;
	inset: 0;
	z-index: 1;
	transform-style: preserve-3d;
	transform: rotateX(var(--art-rx, 0deg)) rotateY(var(--art-ry, 0deg)) rotateZ(var(--art-rz, 0deg));
}
.eds-ctas__layer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))) scale(var(--ls, 1));
	opacity: var(--lo, 1);
}
.eds-ctas__layer img { display: block; width: 100%; height: auto; }

/* Stack-up entrance: each layer starts lower + hidden, rises into place,
   staggered bottom→top (--i). */
.eds-ctas--anim .eds-ctas__layer {
	opacity: 0;
	transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px) + var(--cta-rise, 120px))) scale(var(--ls, 1));
	transition: opacity var(--cta-dur, 800ms) ease,
		transform var(--cta-dur, 800ms) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * var(--cta-stagger, 160ms));
}
.eds-ctas--anim.is-in .eds-ctas__layer {
	opacity: var(--lo, 1);
	transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))) scale(var(--ls, 1));
}

/* Copy entrance: heading + subheading fade in, buttons fade up (staggered). */
.eds-ctas--anim .eds-ctas__title,
.eds-ctas--anim .eds-ctas__desc {
	opacity: 0;
	transition: opacity var(--cta-dur, 800ms) ease;
}
.eds-ctas--anim .eds-ctas__desc { transition-delay: 120ms; }
.eds-ctas--anim .eds-ctas__buttons {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--cta-dur, 800ms) ease, transform var(--cta-dur, 800ms) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 240ms;
}
.eds-ctas--anim.is-in .eds-ctas__title,
.eds-ctas--anim.is-in .eds-ctas__desc { opacity: 1; }
.eds-ctas--anim.is-in .eds-ctas__buttons { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-ctas--anim .eds-ctas__layer { opacity: var(--lo, 1) !important; transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))) scale(var(--ls, 1)) !important; transition: none !important; }
	.eds-ctas--anim .eds-ctas__title,
	.eds-ctas--anim .eds-ctas__desc,
	.eds-ctas--anim .eds-ctas__buttons { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* In the Elementor editor, show everything at its resting state so the fan +
   copy can be designed regardless of scroll-reveal timing. */
body.elementor-editor-active .eds-ctas--anim .eds-ctas__layer {
	opacity: var(--lo, 1) !important;
	transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))) scale(var(--ls, 1)) !important;
	transition: none !important;
}
body.elementor-editor-active .eds-ctas--anim .eds-ctas__title,
body.elementor-editor-active .eds-ctas--anim .eds-ctas__desc,
body.elementor-editor-active .eds-ctas--anim .eds-ctas__buttons {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Mobile/tablet: art drops below the copy; the card goes edge-to-edge with no
   rounded corners/border, and the CTA button spans full width (Figma 8044:10643). */
@media (max-width: 1180px) {
	.eds-ctas { padding-left: 0 !important; padding-right: 0 !important; }
	/* Neutralise the Full-Width 100vw breakout on mobile so the section fits inside
	   its parent container (the breakout overshoots padded/nested containers). */
	.eds-ctas--full { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	.eds-ctas--full .eds-ctas__card { padding-left: 24px !important; padding-right: 24px !important; }
	.eds-ctas__card { flex-direction: column; align-items: flex-start; max-width: 100% !important; box-sizing: border-box; border: 0 !important; border-radius: 0 !important; padding-left: 24px !important; padding-right: 24px !important; }
	.eds-ctas__art { position: relative; right: auto; top: auto; transform: none; width: 100%; height: var(--cta-art-mh, 360px); margin: 28px auto 0 !important; }
	/* Buttons share a line when they fit; the 2nd wraps to the next line if not
	   (gap is driven by the Space Between control). */
	.eds-ctas__buttons { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
}

/* Phone: keep the buttons at natural size (no shrinking that overflows the text);
   they wrap to two lines when there isn't room for both. */
@media (max-width: 767px) {
	.eds-ctas__btn { padding: 13px 16px !important; font-size: 14px !important; flex: 0 0 auto; }
	.eds-ctas__watch { font-size: 14px; gap: 6px; flex: 0 0 auto; }
}
@media (max-width: 400px) {
	.eds-ctas__btn { padding: 11px 13px !important; font-size: 13px !important; }
	.eds-ctas__watch { font-size: 13px; }
}

/* ============================================================
   PRODUCT HERO — coded floating cards (.eds-phc*)
   Reuses the .eds-hero shell (entrance, laptop, fly-in floats);
   background intentionally omitted (designed on the parent).
   ============================================================ */

/* Floats anchored to a centered, fixed-width stage (matches the dashboard
   design width) so card positions stay locked to the laptop at ANY screen
   width — instead of drifting with a full-bleed (100vw) container. Scoped to
   the product hero so the home hero is untouched. The hero's overflow:hidden
   clips the stage on narrower screens (no horizontal scroll). */
.eds-product-hero .eds-hero__floats {
	left: 50%;
	right: auto;
	width: var(--phc-stage, 1333px);
	max-width: none; /* opt out of the home hero's 1080px band cap */
	/* Scale the whole card stage down to fit the viewport (JS sets --phc-fit)
	   so nothing overflows/overlaps just before the tablet breakpoint. */
	transform: translateX(-50%) scale(var(--phc-fit, 1));
	transform-origin: center bottom;
}
/* The laptop scales by the same factor so it stays aligned with the cards. */
.eds-product-hero .eds-hero__laptop {
	transform: translateX(-50%) scale(var(--phc-fit, 1));
	transform-origin: center bottom;
}

/* Keep the centered copy clear of the viewport edges on small screens so the
   heading/subheading never overflow the full-bleed container. */
.eds-product-hero .eds-hero__content { box-sizing: border-box; max-width: 100%; }
.eds-product-hero .eds-hero__title { overflow-wrap: break-word; }
@media (max-width: 767px) {
	.eds-product-hero .eds-hero__content { padding-left: 24px; padding-right: 24px; }
}

/* Card base — override the row layout of .eds-hero__card with a column. */
.eds-phc {
	flex-direction: column;
	align-items: stretch;
	gap: 9px;
	padding: 14px 16px;
	border-radius: 14px;
	color: #0D0F11;
}

.eds-phc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eds-phc__row--mid { align-items: center; }
.eds-phc__k { font-size: 12px; font-weight: 500; color: #4B5768; }

/* ---- Spend Limit ---- */
.eds-phc--spend .eds-phc__amt { font-size: 13px; font-weight: 700; color: #0D0F11; }
.eds-phc--spend .eds-phc__amt em { font-size: 12px; font-weight: 400; color: #4B5768; font-style: normal; }
.eds-phc__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.eds-phc__bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: #EEF1F4;
	overflow: hidden;
}
.eds-phc__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: #2F6FB0;
	transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.eds-phc__minmax span { font-size: 11px; font-weight: 500; color: #8A93A2; }

/* ---- PTA Funds ---- */
.eds-phc--funds { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.eds-phc__funds-info { display: flex; flex-direction: column; gap: 4px; flex: 0 1 auto; min-width: 0; }
.eds-phc__funds-name { font-size: 13px; font-weight: 700; color: #0D0F11; }
.eds-phc__funds-meta { font-size: 11px; font-weight: 400; color: #4B5768; }
.eds-phc__funds-meta strong { color: #2F6FB0; font-weight: 700; }
.eds-phc__funds-alloc { font-size: 11px; font-weight: 500; color: #0D0F11; }
.eds-phc__funds-total { display: flex; flex-direction: row; align-items: baseline; gap: 5px; flex: 0 0 auto; }
.eds-phc__funds-total-k { font-size: 13px; font-weight: 500; color: #0D0F11; white-space: nowrap; }
.eds-phc--funds .eds-phc__count { font-size: 13px; font-weight: 700; color: #0D0F11; }
.eds-phc__ring-wrap { flex: 0 0 auto; width: 48px; height: 48px; }
.eds-phc__ring { width: 100%; height: 100%; display: block; }
.eds-phc__ring-track { stroke: #E7EAEE; }
.eds-phc__ring-arc { stroke: #2F6FB0; transition: stroke-dasharray 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.eds-phc__ring-seg--1 { stroke: #43B26A; }
.eds-phc__ring-seg--2 { stroke: #2E56E0; }
.eds-phc__ring-seg--3 { stroke: #F5C542; }

/* ---- Overdue ---- */
.eds-phc--overdue { gap: 6px; }
.eds-phc__ov-head { font-size: 12px; font-weight: 500; color: #4B5768; }
.eds-phc__ov-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eds-phc__ov-info { display: flex; flex-direction: column; gap: 1px; }
.eds-phc__ov-info strong { font-size: 14px; font-weight: 700; color: #0D0F11; }
.eds-phc__ov-info em { font-size: 12px; font-weight: 400; color: #4B5768; font-style: normal; }
.eds-phc__check {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #51AC65;
}
.eds-phc__check svg { display: block; width: 100%; height: 100%; }
/* Pulse halo — expanding box-shadow ring around the check (reuses the avatar
   pulse keyframe + --eds-pulse var set by the Check Color control). */
.eds-phc__check--pulse { border-radius: 50%; animation: eds-avatar-pulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.eds-phc__check--pulse { animation: none; }
}

/* ---- Reward Points ---- */
.eds-phc--reward .eds-phc__date { font-size: 10px; font-weight: 400; color: #8A93A2; }
.eds-phc__points { font-size: 20px; font-weight: 700; color: #0D0F11; line-height: 1; }
.eds-phc__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border: 1px solid #E7EAEE;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600;
	color: #386276;
	white-space: nowrap;
}

/* ============================================================
   PROBLEM CARDS — header + 4 cards, desktop pin-reveal, mobile slider
   ============================================================ */
.eds-prob { position: relative; width: 100%; }

/* Track owns the scroll length; JS sets its height when the pin is active.
   When not pinned (default / editor / mobile) it's just a normal wrapper. */
.eds-prob__track { position: relative; }
.eds-prob__pin { position: relative; }
.eds-prob__inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1374px;
	width: 100%;
	padding-left: 24px;
	padding-right: 24px;
}

/* Header */
.eds-prob__header { margin: 0 auto 48px; max-width: 720px; text-align: center; }
.eds-prob__title { margin: 0 0 16px; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-prob__subtitle { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }

/* Header entrance — staggered fade-up when the section scrolls into view
   (JS adds .is-in; CSS owns the transition). */
.eds-prob__rev {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 120ms);
}
.eds-prob__rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-prob__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Cards row */
.eds-prob__viewport { position: relative; }
.eds-prob__cards {
	display: flex;
	gap: 24px;
	align-items: stretch;
	will-change: transform;
}
.eds-prob__card {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #E7EAEE;
	border-radius: 20px;
	background:
		linear-gradient(35deg, #FFFFFF 52%, var(--tint, #FFFFFF) 340%),
		#FFFFFF;
}
.eds-prob__card-body { padding: 24px 24px 0; }
.eds-prob__card-title { margin: 0 0 8px; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-prob__card-text { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-prob__card-media {
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 14px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.eds-prob__card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	/* Per-card scale + vertical nudge (from the repeater controls), combined so
	   they don't overwrite each other. Scale is from the center. */
	transform: translateY( var(--cimg-y, 0px) ) scale( var(--cimg-s, 1) );
	transform-origin: center center;
}

/* Desktop pin-reveal: cards start off to the right + transparent. JS scrubs
   each card's transform/opacity as the section scrolls through the pin. The
   .is-scrub class is added by JS only when pinning is active, so without JS
   (or in the editor) the cards are simply visible. */
.eds-prob.is-scrub .eds-prob__pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.eds-prob.is-scrub .eds-prob__card { opacity: 0; will-change: transform, opacity; }
/* Autoplay: no pin — the section stays in normal flow; cards just start hidden
   and the JS timer flies them in once the section scrolls into view. */
.eds-prob.is-auto .eds-prob__card { opacity: 0; will-change: transform, opacity; }

/* Mobile slider nav — hidden on desktop. */
.eds-prob__nav { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.eds-prob__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid #662756;
	background: transparent;
	color: #662756;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.eds-prob__arrow svg { width: 42%; height: 42%; }
.eds-prob__arrow--next { background: #662756; border-color: #662756; color: #fff; }
.eds-prob__arrow:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 1180px) {
	/* Slider mode: the cards track slides horizontally; JS owns the transform.
	   Tablet shows 2 cards per slide (one 16px gap between them). */
	.eds-prob.is-slider .eds-prob__viewport { overflow: hidden; }
	.eds-prob.is-slider .eds-prob__cards { gap: 16px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
	.eds-prob.is-slider .eds-prob__card { flex: 0 0 calc((100% - 16px) / 2); min-height: 320px; }
	.eds-prob__nav { display: flex; }
}

/* Mobile shows 1 card per slide (full width). */
@media (max-width: 767px) {
	.eds-prob.is-slider .eds-prob__card { flex: 0 0 100%; }
}

/* ---- Elementor editor preview ----
   The pin/slider JS is skipped in the editor so the layout stays editable, so
   CSS provides the preview: the header is always shown, and the cards take
   their per-slide width (2-up on tablet, 1-up on mobile) and wrap into rows
   instead of sliding. Front end (no .elementor-editor-active) is unaffected. */
.elementor-editor-active .eds-prob__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
.elementor-editor-active .eds-prob.is-scrub .eds-prob__card,
.elementor-editor-active .eds-prob.is-auto .eds-prob__card { opacity: 1; transform: none; }
@media (max-width: 1180px) {
	.elementor-editor-active .eds-prob__viewport { overflow: visible; }
	.elementor-editor-active .eds-prob__cards { flex-wrap: wrap; gap: 16px; transform: none !important; }
	.elementor-editor-active .eds-prob__card { flex: 0 0 calc((100% - 16px) / 2); min-height: 320px; }
}
@media (max-width: 767px) {
	.elementor-editor-active .eds-prob__card { flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.eds-prob.is-scrub .eds-prob__card,
	.eds-prob.is-auto .eds-prob__card { opacity: 1 !important; transform: none !important; }
	.eds-prob.is-slider .eds-prob__cards { transition: none; }
}

/* ============================================================
   QUOTE REVEAL — "Hero Testimonial": big quote that types in word-by-word
   on scroll (JS-driven pin scrub), with a soft gradient glow behind it.
   ============================================================ */
.eds-quote { position: relative; width: 100%; }

/* Track owns the scroll length (JS sets its height when the reveal is active);
   the pin sticks to the viewport while the words type in. */
.eds-quote__track { position: relative; }
.eds-quote__pin {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var( --eds-q-minh, 506px ); /* Height control (per breakpoint) */
}
/* While the reveal is active the pin fills the viewport; JS toggles its
   position (fixed during the reveal) so it locks dead-center regardless of any
   overflow:hidden ancestor that would break position:sticky. !important so the
   full-viewport height wins over the Section "Min Height" control (whose
   generated CSS otherwise leaves the pin short, centering the quote near top). */
.eds-quote.is-reveal .eds-quote__pin { min-height: 100vh !important; }

.eds-quote__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Soft gradient glow behind the quote (two blurred radial blobs). */
.eds-quote__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--glow-size, 62%);
	aspect-ratio: 2 / 1;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(40% 60% at 30% 50%, var(--glow-1, rgba(158, 72, 141, 0.22)), transparent 70%),
		radial-gradient(40% 60% at 72% 60%, var(--glow-2, rgba(116, 183, 236, 0.28)), transparent 72%);
	filter: blur(36px);
}

/* Quote */
.eds-quote__quote {
	position: relative;
	margin: 0 auto;
	max-width: 920px;
	text-align: center;
	font-family: 'Golos Text', system-ui, sans-serif;
}
.eds-quote__w {
	display: inline;
	will-change: opacity, transform;
}

/* Attribution */
.eds-quote__attr { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.eds-quote__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.eds-quote__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eds-quote__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.eds-quote__name { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 600; }
.eds-quote__role { font-family: 'Golos Text', system-ui, sans-serif; line-height: normal; white-space: normal; }

@media (prefers-reduced-motion: reduce) {
	.eds-quote.is-reveal .eds-quote__w { opacity: 1 !important; transform: none !important; }
}

/* Editor preview: keep the section static + the full quote visible (the pin /
   word reveal only runs on the front end). */
.elementor-editor-active .eds-quote.is-reveal .eds-quote__pin { position: relative !important; min-height: var( --eds-q-minh, 506px ) !important; }
.elementor-editor-active .eds-quote__w { opacity: 1 !important; transform: none !important; }

/* ============================================================
   PRODUCT OVERVIEW — dark section: centered two-tone heading + button,
   over a 3D-tilted deck of dashboard images. The layer stack-up animation
   is reused from CTA Stack (.eds-ctas__layers / .eds-ctas__layer /
   .eds-ctas--anim + revealOnScroll); only layout lives here.
   ============================================================ */
.eds-pov {
	position: relative;
	width: 100%;
	overflow: hidden; /* tilted layers bleed past the edges; clip them */
	background-color: #0F191F;
}
/* Static so the absolutely-positioned art anchors to the section, not the
   stage — lets the Section Height control drive the height while the art
   bleeds off the bottom. */
.eds-pov__stage { position: static; }

.eds-pov__text {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

/* Two-tone heading: main part solid, accent part a gradient text fill. */
.eds-pov__title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-pov__title-main { color: #FFFFFF; }
.eds-pov__title-accent {
	background: linear-gradient( var(--acc-angle, 90deg), var(--acc-1, #8CC1EC), var(--acc-2, #4B5768) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.eds-pov__desc { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }

.eds-pov__actions { display: flex; justify-content: center; }
.eds-pov__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.eds-pov__btn:hover { transform: translateY(-1px); }

/* Art stage — centered; the reused .eds-ctas__layers fills it (position:
   absolute inset:0) and carries the perspective + tilt vars. */
.eds-pov__art {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 1;
	width: 1200px;
	max-width: 100%;
	height: 482px;
	perspective: 1600px;
}

/* Header entrance — title + subtitle + button fade up in sequence when the
   section scrolls into view. Shares the .eds-ctas--anim / .is-in trigger (and
   revealOnScroll) with the layer stack-up so both fire together. */
.eds-ctas--anim .eds-pov__title,
.eds-ctas--anim .eds-pov__desc,
.eds-ctas--anim .eds-pov__actions {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--cta-dur, 800ms) ease,
		transform var(--cta-dur, 800ms) cubic-bezier(0.16, 1, 0.3, 1);
}
.eds-ctas--anim .eds-pov__desc { transition-delay: 120ms; }
.eds-ctas--anim .eds-pov__actions { transition-delay: 240ms; }
.eds-ctas--anim.is-in .eds-pov__title,
.eds-ctas--anim.is-in .eds-pov__desc,
.eds-ctas--anim.is-in .eds-pov__actions { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-ctas--anim .eds-pov__title,
	.eds-ctas--anim .eds-pov__desc,
	.eds-ctas--anim .eds-pov__actions { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Editor: show the copy at rest so it can be designed. */
body.elementor-editor-active .eds-ctas--anim .eds-pov__title,
body.elementor-editor-active .eds-ctas--anim .eds-pov__desc,
body.elementor-editor-active .eds-ctas--anim .eds-pov__actions {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Mobile: full-width button + shorter art. */
@media (max-width: 767px) {
	.eds-pov__actions { align-self: stretch; }
	.eds-pov__btn { width: 100%; }
}

/* ============================================================
   FEATURE BENTO — dark section, 5 cards (top row 3 + bottom row 2),
   each a title/description over a coded mockup graphic.
   ============================================================ */
.eds-bento { width: 100%; box-sizing: border-box; background-color: #0F191F; }
.eds-bento__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px;
	max-width: 1220px;
	margin: 0 auto;
}
.eds-bento__card--top  { grid-column: span 2; }
.eds-bento__card--wide { grid-column: span 3; }

.eds-bento__card {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	font-family: 'Golos Text', system-ui, sans-serif;
	background: linear-gradient( var(--bg-angle, 145deg), var(--bg1, #fff) var(--bg-stop, 0%), var(--bg2, #eee) );
}
.eds-bento__text { position: relative; z-index: 3; }
.eds-bento__title { margin: 0 0 8px; }
.eds-bento__desc  { margin: 0; }
.eds-bento__graphic { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 16px; }

/* ---- Card 1: Unified data (brand mark image incl. rings + orbit pills) ---- */
.eds-bento__unified { overflow: visible; }
.eds-bento__brand {
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translate(-50%, -50%);
	width: 300px;
	max-width: 100%;
	z-index: 1; /* sits behind the pills as their backdrop */
}
.eds-bento__brand img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Orbit wrapper spins about the ring centre on hover; pills counter-rotate to
   stay upright. Uses the individual `translate`/`rotate` transform properties
   so centring and spin compose cleanly. z-index keeps the pills above the
   brand mark (the orbit's rotate makes it its own stacking context). */
.eds-bento__orbit { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 52%; }
.eds-bento__opill {
	position: absolute;
	translate: -50% -50%;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 8px 18px rgba(15, 25, 31, 0.18);
	z-index: 3;
}

/* ---- Card 2: Real-time visibility ---- */
.eds-bento__rt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.eds-bento__rt-total, .eds-bento__rt-spent {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	border-radius: 14px;
	padding: 14px 20px;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
	/* Per-pill position offsets (from the Card 2 position controls). */
	transform: translate( var(--rt-x, 0px), var(--rt-y, 0px) );
}
.eds-bento__rt-total { background: #fff; width: 100%; position: relative; z-index: 2; }
.eds-bento__rt-total .eds-bento__rt-k { color: #386276; font-weight: 600; font-size: 14px; }
.eds-bento__rt-total .eds-bento__rt-v { color: #386276; font-weight: 700; font-size: 24px; }
.eds-bento__rt-spent { background: #74B7EC; color: #fff; width: 92%; position: relative; z-index: 1; }
.eds-bento__rt-spent .eds-bento__rt-k { color: #fff; font-weight: 600; font-size: 14px; }
.eds-bento__rt-spent .eds-bento__rt-v { color: #fff; font-weight: 700; font-size: 24px; }

/* ---- Card 3: Fewer errors ("train" of pills) ----
   Each row is full width and split into a filled pill + a flexible empty pill,
   with the filled pill on alternating sides — so the row edges align into a
   train and nothing overflows the card. The whole train is positioned by the
   placement controls (--c3-pos-*). */
.eds-bento__errors {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	transform: translate( var(--c3-pos-x, 0px), var(--c3-pos-y, 0px) );
}
.eds-bento__err-row {
	display: flex;
	align-items: center;
	justify-content: center; /* main pill centred; fixed empties bleed both edges */
	gap: 12px;
	transition: transform var(--c3-move-dur, 2400ms) cubic-bezier(0.22, 1, 0.36, 1);
}
/* On scroll into view: odd rows drift right, even rows drift left — the whole
   row (main + both empties) moves together, so the counting figure slides in. */
.eds-bento__errors.is-in .eds-bento__err-row:nth-child(odd)  { transform: translateX( var(--c3-move, 40px) ); }
.eds-bento__errors.is-in .eds-bento__err-row:nth-child(even) { transform: translateX( calc( -1 * var(--c3-move, 40px) ) ); }

.eds-bento__apill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	white-space: nowrap;
	box-shadow: 0 8px 18px rgba(15, 25, 31, 0.12);
	z-index: 2;
}
.eds-bento__atag { font-weight: 500; color: #4B5768; }
.eds-bento__apill strong { font-weight: 700; }
/* Fixed-width elongated empty pills; they don't grow/shrink so they always read
   as pills (not circles) and run off the card edges (clipped by overflow). */
.eds-bento__epill {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 180px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 6px 14px rgba(15, 25, 31, 0.05);
}
@media (prefers-reduced-motion: reduce) {
	.eds-bento__err-row { transition: none !important; transform: none !important; }
}

/* ---- Card 4: Faster workflows (invoices table) ---- */
.eds-bento__wf { position: relative; display: flex; align-items: flex-end; justify-content: center; }
/* Soft glow behind the floating Invoices card (colors from controls). */
.eds-bento__wf-glow {
	position: absolute;
	left: 50%;
	top: 54%;
	width: 94%;
	height: 80%;
	transform: translate(-50%, -50%) rotate(-14deg);
	background:
		radial-gradient(ellipse 58% 58% at 38% 42%, var(--wf-glow, rgba(158,72,141,0.35)), transparent 70%),
		radial-gradient(ellipse 55% 55% at 72% 64%, var(--wf-glow2, rgba(116,183,236,0.28)), transparent 72%);
	filter: blur(34px);
	z-index: 0;
	pointer-events: none;
}
.eds-bento__wf-card {
	position: relative;
	z-index: 1;
	width: min(340px, 100%);
	background: #fff;
	border-radius: 12px;
	padding: 16px 18px 6px;
	box-shadow: 0 16px 40px rgba(27, 38, 46, 0.16);
}
.eds-bento__wf-title { display: block; font-size: 16px; font-weight: 700; color: #0D0F11; margin-bottom: 8px; }
.eds-bento__wf-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #EEF0F3; }
.eds-bento__wf-name { flex: 1 1 auto; font-size: 12px; color: #4B5768; }
.eds-bento__wf-amt  { font-size: 12px; font-weight: 600; color: #0D0F11; }
.eds-bento__badge   { padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }

/* ---- Card 5: Built-in accountability (PO table + action) ---- */
/* Colorful grainy overlay (blue-teal -> magenta + noise), per Figma. Sits above the
   card's base gradient bg but below the content. */
/* Faint pastel colour wash (blue-teal -> magenta), guarantees the Figma tint on top of
   whatever base gradient the bg_controls set. */
.eds-bento__card--accountability::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(200deg, rgba(56, 98, 118, 0.16) 0%, rgba(170, 65, 144, 0.20) 120%);
}
/* Visible film grain, its own layer so the speckle reads clearly (per Figma). */
.eds-bento__acc-grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	background-repeat: repeat;
	mix-blend-mode: overlay;
	opacity: 0.7;
}
.eds-bento__card--accountability > .eds-bento__text,
.eds-bento__card--accountability > .eds-bento__graphic { position: relative; z-index: 1; }
/* Card 5 — Built-in Accountability: an Audit History card that peeks up from the
   card's bottom edge (clipped) and slides up on reveal. acc is a bounded, clipped
   flex box bled to the card's bottom edge so the card's lower rows are hidden. */
.eds-bento__acc { flex: 1 1 0; min-height: 0; overflow: hidden; margin-bottom: -24px; display: flex; justify-content: center; align-items: flex-start; }
.eds-bento__audit {
	width: 100%;
	max-width: 532px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	text-align: left;
	box-shadow: 0 16px 40px rgba(27, 38, 46, 0.16);
	/* Sizes below use cqw so the whole card scales down to fit on narrow
	   (mobile) widths and holds full size at the 532px desktop width. */
	container-type: inline-size;
}
.eds-bento__audit-head { display: flex; align-items: center; gap: clamp(8px, 2.2cqw, 12px); padding: clamp(10px, 2.6cqw, 14px) clamp(12px, 3cqw, 16px); }
.eds-bento__audit-ic { flex: 0 0 auto; width: clamp(34px, 8.4cqw, 44px); height: clamp(34px, 8.4cqw, 44px); border-radius: 50%; background: var(--c5-icon-bg, #E8F3FC); color: var(--c5-icon-c, #1787E0); display: inline-flex; align-items: center; justify-content: center; }
.eds-bento__audit-ic svg { width: 50%; height: 50%; }
.eds-bento__audit-title { flex: 1 1 auto; min-width: 0; font-size: clamp(15px, 4.2cqw, 20px); font-weight: 600; color: #0D0F11; }
.eds-bento__audit-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--c5-more-c, #1787E0); font-size: clamp(11px, 2.9cqw, 14px); font-weight: 600; white-space: nowrap; cursor: default; }
.eds-bento__audit-more svg { width: clamp(10px, 2.6cqw, 12px); height: clamp(10px, 2.6cqw, 12px); }
.eds-bento__audit-table { width: 100%; }
.eds-bento__audit-row { display: grid; grid-template-columns: clamp(20px, 6cqw, 30px) minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(6px, 2.4cqw, 12px); align-items: center; padding: clamp(9px, 2.6cqw, 12px) clamp(12px, 3cqw, 16px); }
.eds-bento__audit-row--head { background: var(--c5-head-bg, #E7EAEE); padding-top: clamp(7px, 1.8cqw, 9px); padding-bottom: clamp(7px, 1.8cqw, 9px); }
.eds-bento__audit-row--head span { font-size: clamp(10px, 2.6cqw, 12px); font-weight: 600; color: #4B5768; }
.eds-bento__audit-row--body + .eds-bento__audit-row--body { border-top: 1px solid #E7EAEE; }
.eds-bento__audit-exp { display: inline-flex; align-items: center; color: #64748B; }
.eds-bento__audit-exp svg { width: clamp(12px, 3cqw, 14px); height: clamp(12px, 3cqw, 14px); }
.eds-bento__audit-action { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eds-bento__audit-sub { font-size: clamp(10px, 2.6cqw, 12px); color: #4B5768; font-style: normal; }
.eds-bento__audit-name { font-size: clamp(11px, 3cqw, 14px); font-weight: 600; color: #0D0F11; }
.eds-bento__audit-by { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eds-bento__audit-by strong { font-size: clamp(11px, 3cqw, 14px); font-weight: 600; color: #0D0F11; }
.eds-bento__audit-by em { font-size: clamp(10px, 2.6cqw, 12px); color: #4B5768; font-style: normal; }

/* Let the workflow mockup run off the card's bottom edge (clipped), as in the design.
   Tuned to the default 24px card padding. */
.eds-bento__wf-card { margin-bottom: -24px; }

/* ---- Card 1 animations: fade-in entrance + hover orbit ---- */
/* Entrance: graphic fades + settles when scrolled into view (JS adds .is-in). */
.eds-bento__reveal {
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.eds-bento__reveal.is-in { opacity: 1; transform: none; }
/* Card 4: fade in only — no upward movement. */
.eds-bento__reveal--fade { transform: none; transition: opacity 1s ease; }
.eds-bento__reveal--fade.is-in { transform: none; }
/* Card 5: the Audit History card slides up into its peeking position. */
.eds-bento__reveal--rise { opacity: 0; transform: translateY(var(--c5-rise, 70px)); transition: opacity 0.7s ease, transform var(--c5-rise-dur, 0.9s) cubic-bezier(0.16, 1, 0.3, 1); }
.eds-bento__reveal--rise.is-in { opacity: 1; transform: translateY(0); }

/* Pills rotate in by a set distance (--bento-spin) and settle into their
   resting layout when the card scrolls into view — a short flourish, not a
   continuous spin. Distance + duration come from controls; the orbit rotates
   from -distance→0 (and pills counter-rotate +distance→0 to stay upright), so
   they land exactly at their designed positions. Defined-but-paused → .is-in. */
.eds-bento__orbit { animation: eds-bento-orbit var(--bento-spin-dur, 1.2s) cubic-bezier(0.33, 0, 0.2, 1) 1 forwards; animation-play-state: paused; }
.eds-bento__opill { animation: eds-bento-orbit-rev var(--bento-spin-dur, 1.2s) cubic-bezier(0.33, 0, 0.2, 1) 1 forwards; animation-play-state: paused; }
.eds-bento__unified.is-in .eds-bento__orbit,
.eds-bento__unified.is-in .eds-bento__opill { animation-play-state: running; }
@keyframes eds-bento-orbit { from { rotate: calc(-1 * var(--bento-spin, 45deg)); } to { rotate: 0deg; } }
@keyframes eds-bento-orbit-rev { from { rotate: var(--bento-spin, 45deg); } to { rotate: 0deg; } }

@media (prefers-reduced-motion: reduce) {
	.eds-bento__reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-bento__orbit, .eds-bento__opill { animation: none !important; }
}
/* Editor: show the graphic + pills at their FINAL resting state (rotate:0 = the
   positions set via the controls), not the paused pre-spin frame — so what you
   place in the editor matches where the pills settle on the front end. */
body.elementor-editor-active .eds-bento__reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body.elementor-editor-active .eds-bento__orbit,
body.elementor-editor-active .eds-bento__opill { animation: none !important; rotate: 0deg !important; }

/* ---- Responsive: single column stack ---- */
@media (max-width: 1180px) {
	.eds-bento__grid { grid-template-columns: 1fr; }
	.eds-bento__card--top,
	.eds-bento__card--wide { grid-column: 1 / -1; }
}

/* ============================================================
   COMPARISON — header + light card with two checklist columns
   (Without / With) and a dashboard image bleeding off the right.
   ============================================================ */
.eds-cmp { width: 100%; box-sizing: border-box; }
.eds-cmp__inner { max-width: 1136px; margin: 0 auto; }

/* Header: text left, button right. */
.eds-cmp__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}
.eds-cmp__head-text { display: flex; flex-direction: column; gap: 10px; }
/* Centered header variant (no button) */
.eds-cmp__head--center { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.eds-cmp__head--center .eds-cmp__head-text { align-items: center; }
.eds-cmp__head--center .eds-cmp__title,
.eds-cmp__head--center .eds-cmp__desc { margin-left: auto; margin-right: auto; }
.eds-cmp__eyebrow { font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; }
.eds-cmp__title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-cmp__desc { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; }
.eds-cmp__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.eds-cmp__btn:hover { transform: translateY(-1px); }

/* Card */
.eds-cmp__card {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 56px;
	/* Soft blue-grey fade at the top over the card colour (from the Card
	   Background control). Matches Figma linear-gradient(...), #FFF. */
	background-image: linear-gradient( 180deg, #EAEFF7 0%, #FFFFFF 34.7% );
	box-shadow: 0 24px 60px rgba(27, 38, 46, 0.06);
}
.eds-cmp__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 60px;
	max-width: 640px; /* leaves room for the bleeding image on the right */
}
.eds-cmp__col-title {
	margin: 0 0 24px;
	font-family: 'Golos Text', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 600;
}
.eds-cmp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.eds-cmp__item { display: flex; align-items: flex-start; gap: 8px; }
.eds-cmp__icon { flex: 0 0 auto; width: 24px; height: 24px; line-height: 0; }
.eds-cmp__icon svg { width: 100%; height: 100%; display: block; }
.eds-cmp__item-body { display: flex; flex-direction: column; gap: 6px; }
.eds-cmp__item-text { font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; line-height: 1.35; }
.eds-cmp__item-sub { font-family: 'Golos Text', system-ui, sans-serif; font-size: 12px; line-height: 1.4; color: #4B5768; }

/* Dashboard image — bleeds off the right edge of the card. */
.eds-cmp__img { position: absolute; top: -40px; right: -40px; width: 720px; max-width: 70%; line-height: 0; z-index: 1; }
.eds-cmp__img img { display: block; width: 100%; height: auto; }

/* ---- Entrance (revealOnScroll adds .is-in; CSS owns the transitions) ---- */
.eds-cmp__rev {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.eds-cmp__rev.is-in { opacity: 1; transform: none; }
.eds-cmp__img-rev { opacity: 0; transform: translateX(60px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 200ms; }
.eds-cmp__img-rev.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-cmp__rev, .eds-cmp__img-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}
body.elementor-editor-active .eds-cmp__rev,
body.elementor-editor-active .eds-cmp__img-rev { opacity: 1 !important; transform: none !important; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
	.eds-cmp__card { padding: 32px 24px; }
	.eds-cmp__cols { max-width: none; gap: 20px 32px; }
	.eds-cmp__img--hide-mobile { display: none; }
}
@media (max-width: 600px) {
	.eds-cmp__head { flex-direction: column; }
	.eds-cmp__btn { width: 100%; }
	.eds-cmp__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIAL + STATS — quote + attribution + 3 stat metrics over an
   ascending bar graph with a glowing dot. (Phase 1: static layout.)
   ============================================================ */
.eds-ts { position: relative; width: 100%; overflow: hidden; }
.eds-ts__inner {
	position: relative;
	/* --ts-nostats-cut / --ts-quote-cut trim the reserved height when the stats
	   or quote are hidden. */
	min-height: calc( var(--ts-minh, 1000px) - var(--ts-nostats-cut, 0px) - var(--ts-quote-cut, 0px) ) !important; /* beat the Elementor element-scoped rule */
	margin: 0 auto;
	padding: 80px 20px;
	box-sizing: border-box;
}
.eds-ts--nostats { --ts-nostats-cut: 150px; }
.eds-ts--noquote { --ts-quote-cut: 160px; }
.eds-ts__content { position: relative; z-index: 2; }

/* Quote */
.eds-ts__quote { margin: 0; max-width: 1144px; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-ts__w { display: inline; }

/* Attribution */
.eds-ts__attr { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.eds-ts__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.eds-ts__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eds-ts__meta { display: flex; flex-direction: column; line-height: 1.3; }
.eds-ts__name { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 600; font-size: 15px; }
/* Case study link — same font + size as the author name, shown below it.
   Scoped + !important so theme/Elementor link styles don't inflate it. */
.eds-ts .eds-ts__case,
.eds-ts a.eds-ts__case {
	display: inline-block;
	margin-top: 14px;
	font-family: 'Golos Text', system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	color: #662756;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.eds-ts a.eds-ts__case:hover, .eds-ts a.eds-ts__case:focus { text-decoration: underline; opacity: 0.85; }
.eds-ts__role { font-family: 'Golos Text', system-ui, sans-serif; font-size: 13px; }

/* Stats */
.eds-ts__stats { display: flex; flex-wrap: wrap; gap: 24px 56px; margin-top: 44px; }
.eds-ts__stat { display: flex; align-items: flex-start; gap: 16px; }
.eds-ts__badge {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin-top: 10px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--b1, #C9B6E8), var(--b2, #8FB8E8));
	box-shadow: 0 6px 16px rgba(102, 39, 86, 0.18);
}
.eds-ts__badge img { width: 55%; height: 55%; object-fit: contain; display: block; }
.eds-ts__stat-body { display: flex; flex-direction: column; }
.eds-ts__num { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.eds-ts__stat-label { margin-top: 12px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; line-height: 1.25; }

/* Graph — bars pinned to the bottom, ascending left→right, dot on the last. */
.eds-ts__graph {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	height: 440px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	z-index: 1;
	pointer-events: none;
}
.eds-ts__bar {
	position: relative;
	width: 3px;
	height: var(--h, 50%);
}
/* The fill carries the gradient and is what scales up (so the dot on the last
   bar isn't squished). Fully rounded ends (pill caps). */
.eds-ts__bar-fill {
	position: absolute;
	inset: 0;
	border-radius: 99px;
	transform-origin: bottom;
	background: linear-gradient(to top, var(--bar-bottom, rgba(116,183,236,0.15)), var(--bar-top, #662756));
}
.eds-ts__dot {
	position: absolute;
	top: 0;
	left: 50%;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--dot, #662756);
	box-shadow: 0 0 0 6px rgba(102, 39, 86, 0.12);
	z-index: 2;
}

/* ---- Phase 2: scroll-pinned reveal ---- */
/* When JS enables the reveal (.is-anim), the inner fills the viewport (pinned
   by JS) and the bars/dot start hidden; JS drives words + bar scale by scroll
   progress. Without JS the section is static (graceful). */
/* Pinned: fill the viewport and push the content down to the lock position
   (--ts-lock, fraction of viewport) so it locks that far from the top while the
   sequence completes. */
.eds-ts.is-anim .eds-ts__inner { min-height: 100vh; padding-top: calc( var(--ts-lock, 0.2) * 100vh ); }
/* Editor mirrors the frontend locked layout so the content + graph sit the same. */
body.elementor-editor-active .eds-ts--reveal .eds-ts__inner { padding-top: calc( var(--ts-lock, 0.2) * 100vh ); }
.eds-ts.is-anim .eds-ts__bar-fill { transform: scaleY(0); }
.eds-ts.is-anim .eds-ts__dot { opacity: 0; }
/* Autoplay: no pin/lock — content stays in normal flow, bars/dot just start
   hidden and the JS timer fills them once the section scrolls into view. */
.eds-ts.is-auto .eds-ts__bar-fill { transform: scaleY(0); transform-origin: bottom; }
.eds-ts.is-auto .eds-ts__dot { opacity: 0; }

/* Dot pulse once the graph completes (JS adds .is-done) or in the editor. */
.eds-ts.is-done .eds-ts__dot,
body.elementor-editor-active .eds-ts__dot { animation: eds-ts-dot 1.9s ease-out infinite; }
@keyframes eds-ts-dot {
	0%   { box-shadow: 0 0 0 0 rgba(102, 39, 86, 0.45); }
	70%  { box-shadow: 0 0 0 16px rgba(102, 39, 86, 0); }
	100% { box-shadow: 0 0 0 0 rgba(102, 39, 86, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.eds-ts.is-anim .eds-ts__bar-fill,
	.eds-ts.is-auto .eds-ts__bar-fill { transform: none; }
	.eds-ts.is-anim .eds-ts__dot,
	.eds-ts.is-auto .eds-ts__dot { opacity: 1; }
	.eds-ts.is-done .eds-ts__dot, body.elementor-editor-active .eds-ts__dot { animation: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1180px) {
	.eds-ts__inner { padding: 56px 20px; }
	.eds-ts__stats { gap: 24px 40px; margin-top: 36px; }
	.eds-ts__graph { height: 340px; }
	.eds-ts__badge { width: 38px; height: 38px; }
}
@media (max-width: 767px) {
	.eds-ts__inner { padding: 44px 18px; }
	.eds-ts__stats { gap: 24px 28px; margin-top: 28px; }
	.eds-ts__stat { flex: 0 0 calc(50% - 14px); gap: 0; }
	.eds-ts__badge { display: none; } /* mobile: numbers only, per design */
	.eds-ts__stat-label { border-top: 1px solid #C7CDD6; padding-top: 10px; font-size: 14px; }
	.eds-ts__graph { height: 220px; left: 12px; right: 12px; }
	.eds-ts__attr { margin-top: 22px; }
	.eds-ts__dot { width: 14px; height: 14px; }
}

/* ============================================================
   INTEGRATION HUB — centered orbit; active logo at the top, connected to the
   hub by a line; name pill under the active logo. Auto counter-clockwise + click.
   ============================================================ */
.eds-ihub { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; }
.eds-ihub__inner { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.eds-ihub__head { text-align: center; }
.eds-ihub__heading { margin: 0 auto; font-family: 'Golos Text', system-ui, sans-serif; }
/* Highlighted words: gradient text fill (colors/angle from controls).
   -webkit-text-fill-color wins over any stale `color` from the old control. */
.eds-ihub__hl {
	display: inline;
	background: linear-gradient( var(--ihub-hl-ang, 90deg), var(--ihub-hl-1, #FFFFFF), var(--ihub-hl-2, #74B7EC) );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.eds-ihub__desc { margin: 16px auto 0; font-family: 'Golos Text', system-ui, sans-serif; }
/* "View All Integrations" — shown on tablet + mobile (hidden on desktop). */
.eds-ihub__btn { display: none; }
@media (max-width: 1180px) {
	.eds-ihub a.eds-ihub__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-top: 22px;
		padding: 14px 26px;
		border: 1.5px solid rgba(255, 255, 255, 0.55);
		border-radius: 999px;
		background: transparent;
		color: #fff;
		text-decoration: none;
		font-family: 'Golos Text', system-ui, sans-serif;
		font-weight: 600;
		font-size: 15px;
		line-height: 1;
		white-space: nowrap;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
	.eds-ihub a.eds-ihub__btn:hover,
	.eds-ihub a.eds-ihub__btn:focus { background: #fff; color: #0B1216; border-color: #fff; }
}
/* Mobile: header aligns left. */
@media (max-width: 767px) {
	.eds-ihub__head { text-align: left; align-self: stretch; }
	.eds-ihub__heading { margin-left: 0; margin-right: 0; }
	.eds-ihub__desc { margin-left: 0; margin-right: 0; }
}

/* Stage — square; active logo rides to the top. */
.eds-ihub__stage {
	position: relative;
	align-self: flex-start; /* opt out of the flex centering so left:50% + translateX centres it */
	left: 50%;
	width: var(--ihub-d, 420px);
	height: var(--ihub-d, 420px);
	/* --ihub-scale = manual control; --ihub-fit = JS auto-fit-to-width (≤1) so the
	   orbit never overflows and stays centred. left:50% + translateX(-50%) centres it
	   reliably even when it's wider than the screen (auto margins would left-align an
	   overflowing flex item). Scale pivots at the top-centre for the bleed design. */
	transform: translateX(-50%) scale(calc(var(--ihub-scale, 1) * var(--ihub-fit, 1)));
	transform-origin: center top;
	/* Pull up the orbit bottom-cut AND reclaim the gap left by scaling down. */
	margin: 40px 0 calc(-1 * var(--ihub-cut, 120px) - var(--ihub-d, 420px) * (1 - var(--ihub-scale, 1) * var(--ihub-fit, 1)));
}
.eds-ihub__glow { position: absolute; inset: -12%; z-index: 0; pointer-events: none; }
/* Repeating circle (dot) pattern behind the orbit — recreated from the Figma
   pattern fill. Dot size/spacing/color/opacity come from controls. */
.eds-ihub__pattern {
	position: absolute;
	inset: -20%;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient( circle, var(--ihub-pat-c, rgba(170,65,144,0.4)) 0, var(--ihub-pat-c, rgba(170,65,144,0.4)) var(--ihub-pat-dot, 3px), transparent calc(var(--ihub-pat-dot, 3px) + 0.5px) );
	background-size: var(--ihub-pat-gap, 24px) var(--ihub-pat-gap, 24px);
	background-position: center;
	opacity: 0.5;
}
.eds-ihub__pattern--fade {
	-webkit-mask-image: radial-gradient( circle at 50% 45%, #000 35%, transparent 72% );
	mask-image: radial-gradient( circle at 50% 45%, #000 35%, transparent 72% );
}
.eds-ihub__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.eds-ihub__ring {
	fill: none;
	stroke: rgba(255,255,255,0.14);
	stroke-width: var(--ring-w, 0.2);
	stroke-dasharray: var(--ring-dash, 0) var(--ring-gap, 0);
}

/* Line connector: hub → active logo (which is always at the top). */
.eds-ihub__line {
	position: absolute;
	left: 50%;
	top: calc(var(--ihub-logo, 72px) * 0.5);
	transform: translateX(-50%);
	width: 2px;
	/* Stop at the TOP of the hub/brand mark (hub centre − hub radius) so the line
	   never runs over the brand mark. */
	height: calc(50% + var(--hub-y, 60px) - var(--ihub-logo, 72px) * 0.5 - var(--hub-size, 104px) / 2 + 5px);
	background: linear-gradient(to bottom, var(--line-c1, rgba(170,65,144,0.7)), var(--line-c2, rgba(116,183,236,0.15)));
	z-index: 1;
	overflow: hidden;
}
/* Flow pulse: a bright segment travels up the line toward the new active logo. */
.eds-ihub__line::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 100%;
	height: 42%;
	background: linear-gradient(to top, transparent, var(--line-c1, rgba(170,65,144,0.9)) 55%, #fff);
	opacity: 0;
}
.eds-ihub__line.is-flow::after { animation: eds-ihub-flow var(--ihub-speed, 0.6s) cubic-bezier(0.4,0,0.2,1); }
@keyframes eds-ihub-flow {
	0%   { top: 100%; opacity: 0; }
	20%  { opacity: 1; }
	100% { top: -42%; opacity: 0; }
}

/* The ring rotates (JS sets transform); logos ride around, images stay upright. */
.eds-ihub__logos { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 50%; transition: transform var(--ihub-speed, 0.6s) ease; }
.eds-ihub__logo {
	--ihub-dim: 0.45;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ihub-logo, 72px);
	height: var(--ihub-logo, 72px);
	margin: calc(var(--ihub-logo, 72px) / -2) 0 0 calc(var(--ihub-logo, 72px) / -2);
	transform: rotate(var(--angle, 0deg)) translateY(calc(var(--ihub-d, 420px) / -2 + var(--ihub-logo, 72px) / 2)) scale(var(--logo-scale, 1));
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	border: 1px solid rgba(231,234,238,0.12);
	border-radius: 50%;
	background-color: #131E25;
	overflow: hidden;
	transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.eds-ihub__logo-dim, .eds-ihub__logo-on {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle, 0deg)));
	width: 58%;
	height: 58%;
	object-fit: contain;
	z-index: 1;
	transition: transform var(--ihub-speed, 0.6s) ease, opacity 0.4s ease;
}
.eds-ihub__logo-dim { opacity: var(--ihub-dim, 0.45); }
.eds-ihub__logo-on { opacity: 0; }
.eds-ihub__logo.is-active {
	--ihub-glow: rgba(170,65,144,0.55);
	--logo-scale: 1.28;
	/* Gradient ring: transparent border filled by a border-box gradient, with a
	   white face on the padding-box (colors/angle/width from controls). */
	border: var(--ihub-ring-w, 2px) solid transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient( var(--ihub-ring-ang, 135deg), var(--ihub-ring-1, #74B7EC), var(--ihub-ring-2, #AA4190) ) border-box;
	box-shadow: 0 0 0 5px rgba(255,255,255,0.05), 0 0 26px var(--ihub-glow);
	z-index: 4;
}
.eds-ihub__logo.is-active .eds-ihub__logo-dim { opacity: 0; }
.eds-ihub__logo.is-active .eds-ihub__logo-on { opacity: 1; }
.eds-ihub__logo:focus-visible { outline: 2px solid #74B7EC; outline-offset: 3px; }

/* Center hub (brand mark), sits slightly below centre via --hub-y. */
.eds-ihub__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--hub-size, 104px);
	height: var(--hub-size, 104px);
	transform: translate(-50%, -50%) translateY(var(--hub-y, 60px));
	border: 1px solid transparent;
	border-radius: 50%;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}
.eds-ihub__brand { display: flex; align-items: center; justify-content: center; width: 56%; height: 56%; }
.eds-ihub__brand img { width: 100%; height: 100%; object-fit: contain; }

/* Name pill under the active (top) logo. */
.eds-ihub__label {
	position: absolute;
	left: 50%;
	top: 110px;
	transform: translateX(-50%);
	z-index: 3;
	padding: 6px 14px;
	border: 0 solid transparent; /* width/color from controls */
	border-radius: 999px;
	font-family: 'Golos Text', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	background: #0B1216;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Bottom fade — the orbit bleeds off the section's bottom edge and fades into
   the background (section has overflow:hidden; the stage's negative margin
   clips the lower orbit). */
.eds-ihub__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 180px;
	z-index: 6;
	pointer-events: none;
	background: linear-gradient( to bottom, transparent, var(--fade-c, #0B1216) );
}

@media (prefers-reduced-motion: reduce) {
	.eds-ihub__logos, .eds-ihub__logo-dim, .eds-ihub__logo-on { transition: none !important; }
}

/* ============================================================
   SOLUTIONS HERO — reusable hero (K-12 / Public Agency / Non-Profit).
   Shared layout + two-phase fade entrance; variant swaps the coded floats.
   ============================================================ */
.eds-shero { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; background-color: #D9E4EF; }
/* Purple glow behind the laptop (position/size/color from controls). */
.eds-shero__glow { position: absolute; left: 62%; top: 42%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none; }
.eds-shero__inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.eds-shero__text { flex: 0 0 auto; max-width: 459px; }
.eds-shero__eyebrow { display: block; font-family: 'Golos Text', system-ui, sans-serif; font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.eds-shero__title { margin: 0 0 16px; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-shero__subtitle { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }

/* Stage — laptop + credit card + floats live in an inner design box so the
   whole assembly can scale as one unit on smaller screens (--shero-scale). */
.eds-shero__stage { position: relative; flex: 1 1 auto; height: var(--shero-inner-h, var(--shero-h, 470px)); margin-top: var(--shero-stage-mt, 0); }
.eds-shero__stage-inner { position: absolute; top: 0; left: 0; width: 100%; height: var(--shero-inner-h, var(--shero-h, 470px)); transform: scale(var(--shero-scale, 1)); transform-origin: top left; }
.eds-shero__laptop { position: absolute; left: 8%; top: 10%; width: 625px; max-width: 100%; line-height: 0; }
.eds-shero__laptop img { display: block; width: 100%; height: auto; }
/* Public Agency cross-fade: extra tablet images stack over the base and fade in
   one at a time (JS toggles .is-shown), same as the Hero laptop. */
.eds-shero__laptop-img--layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var( --eds-laptop-fade, 700ms ) ease; }
.eds-shero__laptop-img--layer.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.eds-shero__laptop-img--layer { transition: none; }
}
.eds-shero__cc { position: absolute; left: 60%; top: 56%; width: 261px; line-height: 0; z-index: 4; filter: drop-shadow(0 20px 40px rgba(27,38,46,0.28)); }
.eds-shero__cc img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* Floating coded cards (shared shell). */
.eds-shero__float {
	position: absolute;
	z-index: 5;
	box-sizing: border-box;
	background: #fff;
	border-radius: 14px;
	padding: 14px 16px;
	font-family: 'Golos Text', system-ui, sans-serif;
	box-shadow: 0 14px 34px rgba(27,38,46,0.14), 0 2px 6px rgba(27,38,46,0.06);
}
.eds-shero__pill { font-size: 10px; font-weight: 600; color: #386276; background: rgba(56,98,118,0.12); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.eds-shero__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; background: #E7EAEE; color: #4B5768; white-space: nowrap; }
.eds-shero__badge--ok { background: #DFF3E6; color: #1E4528; }

/* K-12 budget card */
.eds-shero__float--budget { display: flex; flex-direction: column; gap: 12px; }
.eds-shero__bud-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eds-shero__bud-title { font-size: 13px; font-weight: 600; color: #0D0F11; }
.eds-shero__bars { display: flex; align-items: flex-end; gap: 8px; height: 78px; }
.eds-shero__bars span { flex: 1; border-radius: 3px 3px 0 0; background: #74B7EC; }
/* K-12 approved card */
.eds-shero__float--appr { display: flex; align-items: center; gap: 10px; }
.eds-shero__avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #386276; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; overflow: hidden; }
.eds-shero__avatar--img { background: transparent; }
.eds-shero__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.eds-shero__appr-meta { display: flex; flex-direction: column; flex: 1; }
.eds-shero__appr-name { font-size: 13px; font-weight: 600; color: #0D0F11; }
.eds-shero__appr-sub { font-size: 12px; color: #4B5768; }

/* Public — due card */
.eds-shero__float--due { display: flex; align-items: center; gap: 12px; }
.eds-shero__due-label { font-size: 13px; font-weight: 500; color: #4B5768; flex: 1; }
.eds-shero__due-meta { display: flex; flex-direction: column; text-align: right; }
.eds-shero__due-meta strong { font-size: 13px; font-weight: 700; color: #51AC65; }
.eds-shero__due-meta em { font-size: 12px; font-style: normal; color: #4B5768; }
.eds-shero__check { width: 20px; height: 20px; flex: 0 0 auto; }
.eds-shero__check svg { width: 100%; height: 100%; display: block; }
/* Public — draft row */
.eds-shero__float--draft { display: flex; align-items: center; gap: 12px; }
.eds-shero__draft-name { flex: 1; font-size: 13px; color: #0D0F11; }
.eds-shero__draft-amt { font-size: 13px; font-weight: 600; color: #0D0F11; }
/* Public — spend card */
.eds-shero__float--spend { display: flex; flex-direction: column; gap: 6px; }
.eds-shero__spend-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eds-shero__spend-label { font-size: 12px; color: #4B5768; }
.eds-shero__spend-used { font-size: 10px; font-weight: 700; color: #4B5768; }
.eds-shero__spend-amt { font-size: 20px; font-weight: 700; color: #0D0F11; }
.eds-shero__spend-bar { display: block; height: 6px; border-radius: 999px; background: #EEF1F4; overflow: hidden; }
.eds-shero__spend-bar span { display: block; height: 100%; background: linear-gradient(90deg, #F0B429, #CF341F); border-radius: 999px; }
.eds-shero__spend-note { display: flex; align-items: center; gap: 8px; font-size: 9px; line-height: 1.2; }
.eds-shero__spend-sugg { display: inline-flex; align-items: center; gap: 3px; color: #AA4190; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.eds-shero__spend-ai { width: 11px; height: 11px; flex: 0 0 auto; display: block; }
.eds-shero__spend-realloc { color: #64748B; font-weight: 400; text-decoration: underline; white-space: nowrap; }

/* Non-Profit — PO card */
.eds-shero__float--po { display: flex; flex-direction: column; gap: 6px; }
.eds-shero__po-num { font-size: 11px; color: #4B5768; }
.eds-shero__po-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eds-shero__po-name { font-size: 14px; font-weight: 600; color: #0D0F11; }
.eds-shero__po-amt { font-size: 14px; font-weight: 700; color: #0D0F11; }
/* Non-Profit — allocation card */
/* Non-Profit allocation card (Figma 7487:17341): 3 colour-coded segments,
   Roboto text, Available value bold, "Resets" note right-aligned. */
.eds-shero__float--alloc { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; font-family: 'Roboto', system-ui, sans-serif; }
.eds-shero__alloc-cols { display: flex; align-items: flex-start; gap: 6px; }
.eds-shero__alloc-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eds-shero__alloc-col--avail { align-items: flex-end; text-align: right; }
/* Dot + label on one row, value below. */
.eds-shero__alloc-head { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 400; color: #18262F; white-space: nowrap; }
.eds-shero__alloc-head i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; }
.eds-shero__alloc-cols strong { font-size: 15px; font-weight: 400; color: #18262F; white-space: nowrap; }
.eds-shero__alloc-col--avail strong { font-weight: 700; }
.eds-shero__alloc-col--spent .eds-shero__alloc-head i { background: #1B262E; }
.eds-shero__alloc-col--assigned .eds-shero__alloc-head i { background: #386276; }
.eds-shero__alloc-col--avail .eds-shero__alloc-head i { background: #74B7EC; }
.eds-shero__alloc-bar { display: flex; height: 9px; border-radius: 4px; overflow: hidden; background: none; }
.eds-shero__alloc-seg { height: 100%; min-width: 0; }
.eds-shero__alloc-seg--spent { background: #1B262E; }
.eds-shero__alloc-seg--assigned { background: #386276; }
.eds-shero__alloc-seg--avail { background: #74B7EC; }
.eds-shero__alloc-note { font-size: 10px; color: #18262F; text-align: right; }

/* Logo carousel */
.eds-shero__logos { position: relative; z-index: 1; max-width: 1140px; margin: var(--shero-logos-mt, 40px) auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.eds-shero__logos-track { display: flex; align-items: center; gap: 72px; width: max-content; }
.eds-shero__logos.is-auto .eds-shero__logos-track { animation: eds-shero-marquee 36s linear infinite; }
.eds-shero__logo { flex: 0 0 auto; line-height: 0; }
.eds-shero__logo img { display: block; height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.25s ease, opacity 0.25s ease; }
.eds-shero__logo:hover img { filter: grayscale(0); opacity: 1; }
@keyframes eds-shero-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.eds-shero__logos.is-auto:hover .eds-shero__logos-track { animation-play-state: paused; }

/* ---- Card data animations (only when 'Animate Card Data' / .eds-shero--data) ----
   Mirrors the home hero: bars randomise, numbers count up (JS), badges pulse. */
.eds-shero--data .eds-shero__bars span { transition: height var(--sh-bud-dur, 1s) cubic-bezier(0.22, 1, 0.36, 1); }
.eds-shero--data .eds-shero__spend-bar span[data-w] { width: 0; transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
/* Pulsing badge / check (reuse the home hero keyframes). */
.eds-shero__badge--pulse { --eds-pulse: rgba(30, 69, 40, 0.4); }
.eds-shero--data .eds-shero__badge--pulse { animation: eds-badge-pulse 2s ease-out infinite; }
.eds-shero__check--pulse { border-radius: 50%; --eds-pulse: rgba(81, 172, 101, 0.5); }
.eds-shero--data .eds-shero__check--pulse { animation: eds-avatar-pulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.eds-shero--data .eds-shero__badge--pulse,
	.eds-shero--data .eds-shero__check--pulse { animation: none !important; }
	.eds-shero--data .eds-shero__spend-bar span[data-w] { width: auto; }
}

/* ---- Entrance: base assets fade first, floats fade after ---- */
.eds-shero--anim .eds-shero__b {
	opacity: 0;
	transform: translateY(var(--sh-rise, 20px));
	transition: opacity var(--sh-base-dur, 700ms) ease, transform var(--sh-base-dur, 700ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--i, 0) * var(--sh-base-stagger, 120ms));
}
.eds-shero--anim .eds-shero__f {
	opacity: 0;
	/* Slide in from the float's own side: left-half floats from the left
	   (--sh-dir -1), right-half floats from the right (+1). */
	transform: translateX( calc( var(--sh-dir, 0) * var(--sh-slide, 48px) ) );
	transition: opacity var(--sh-float-dur, 650ms) ease, transform var(--sh-float-dur, 650ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--sh-float-delay, 900ms) + var(--fi, 0) * var(--sh-float-stagger, 180ms));
}
.eds-shero--anim.is-in .eds-shero__b,
.eds-shero--anim.is-in .eds-shero__f { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-shero--anim .eds-shero__b, .eds-shero--anim .eds-shero__f { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-shero__logos.is-auto .eds-shero__logos-track { animation: none; }
}
body.elementor-editor-active .eds-shero--anim .eds-shero__b,
body.elementor-editor-active .eds-shero--anim .eds-shero__f { opacity: 1 !important; transform: none !important; }

/* ---- Responsive: stack (mobile design) ---- */
@media (max-width: 1180px) {
	.eds-shero__inner { flex-direction: column; align-items: flex-start; } /* gap comes from the Space control */
	.eds-shero__text { max-width: none; }
	/* Whole stage (laptop + card + floats) scales down uniformly to fit. The box
	   width uses the measured content width (--shero-dw, set by JS) so floats that
	   overflow the 657px design box aren't clipped. margin-top:0 — the space above
	   the stage is now the flex gap (Space: Copy ↔ Stage control). */
	.eds-shero__stage { flex: none; width: calc(var(--shero-dw, 657px) * var(--shero-scale, 1)); max-width: 100%; height: calc(var(--shero-inner-h, var(--shero-h, 470px)) * var(--shero-scale, 1)); margin: var(--shero-stage-mt, 0) auto 0; }
	.eds-shero__stage-inner { inset: auto; top: 0; left: 0; width: 657px; height: var(--shero-inner-h, var(--shero-h, 470px)); transform: scale(var(--shero-scale, 1)); transform-origin: top left; }
}

/* ============================================================
   FEATURE + TESTIMONIAL — left photo + coded fund cards, right copy +
   testimonial. Staggered entrance (right-top → testimonial → left media);
   the donut draws in.
   ============================================================ */
.eds-ftt { width: 100%; box-sizing: border-box; }
.eds-ftt__inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: stretch; gap: 68px; }
.eds-ftt__media { position: relative; flex: 0 0 46%; max-width: 555px; min-height: 480px; display: flex; }
.eds-ftt__content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 24px; }

/* Left image */
.eds-ftt__img { flex: 1 1 auto; width: 100%; border-radius: 16px; overflow: hidden; }
.eds-ftt__img img { width: 100%; height: 100% !important; object-fit: cover; display: block; }

/* Floats over the image */
/* Wrapper over the image holding all floating cards — scaled as one group via the
   Float Scale control (--ftt-float-scale), independent of each card's reveal. */
.eds-ftt__floats {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: scale(var(--ftt-float-scale, 1));
	transform-origin: center center;
}
.eds-ftt__pill {
	position: absolute;
	left: 24px;
	bottom: 150px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 10px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(27,38,46,0.16);
	font-family: 'Golos Text', system-ui, sans-serif;
}
.eds-ftt__pill-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #9E488D; }
.eds-ftt__pill-ic svg { width: 18px; height: 18px; }
.eds-ftt__pill-txt { font-size: 14px; font-weight: 600; color: #0D0F11; white-space: nowrap; }
/* Non-Profit pill (Figma 8047:12452): subtle white->magenta gradient, squared icon. */
.eds-ftt--nonprofit .eds-ftt__pill { background: linear-gradient(22deg, #FFFFFF 2%, #AA4190 351%); border: 1px solid #E7EAEE; border-radius: 9px; padding: 9px 10px; gap: 11px; box-shadow: 0 12px 16px rgba(27,38,46,0.05); font-family: 'Roboto', system-ui, sans-serif; }
.eds-ftt--nonprofit .eds-ftt__pill-ic { width: 31px; height: 31px; border-radius: 4px; }
.eds-ftt--nonprofit .eds-ftt__pill-ic svg { width: 24px; height: 24px; }
.eds-ftt--nonprofit .eds-ftt__pill-txt { font-size: 15px; font-weight: 500; color: #4B5768; }

/* Shared bottom card (positioned by card_x/card_y/card_w controls). */
.eds-ftt__card {
	position: absolute;
	left: 24px;
	width: calc(100% - 48px);
	bottom: 20px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #D9DDE3;
	border-radius: 13px;
	box-shadow: 0 18px 40px rgba(27,38,46,0.18);
	font-family: 'Golos Text', system-ui, sans-serif;
	box-sizing: border-box;
}
/* K-12: fund + donut row */
.eds-ftt__card--k12 { display: flex; align-items: center; gap: 16px; }
.eds-ftt__fund-info { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.eds-ftt__fund-name { font-size: 14px; font-weight: 700; color: #0D0F11; }
.eds-ftt__fund-meta { font-size: 12px; color: #4B5768; }
.eds-ftt__fund-meta strong { color: #386276; font-weight: 700; }
.eds-ftt__fund-alloc { font-size: 12px; font-weight: 600; color: #0D0F11; }
.eds-ftt__fund-chart { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.eds-ftt__fund-total { font-size: 12px; color: #4B5768; white-space: nowrap; }
.eds-ftt__fund-total strong { color: #0D0F11; font-weight: 700; }
.eds-ftt__donut { width: 62px; height: 62px; }
.eds-ftt__donut svg { width: 100%; height: 100%; display: block; }
.eds-ftt__donut-track { stroke: #EEF1F4; }
.eds-ftt__seg { transition: stroke-dasharray 0.9s cubic-bezier(0.16,1,0.3,1); }

/* Public Agency: Spent / Available spend card */
.eds-ftt__card--public { display: flex; flex-direction: column; gap: 8px; }
/* Labels: regular ~15px, dark navy, with a small colour dot (Figma). */
.eds-ftt__sp-head { display: flex; justify-content: space-between; font-size: 15px; font-weight: 400; color: #18262F; }
.eds-ftt__sp-head span { display: inline-flex; align-items: center; gap: 6px; }
.eds-ftt__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.eds-ftt__dot--spent { background: #18262F; }
.eds-ftt__dot--avail { background: #74B7EC; }
/* Amounts: ~26px navy. Spent is regular weight, Available is bold (Figma). */
.eds-ftt__sp-vals { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 26px; font-weight: 400; line-height: 1.1; color: #18262F; }
.eds-ftt__sp-vals strong { font-weight: 400; }
.eds-ftt__sp-vals strong:last-child { font-weight: 700; }
.eds-ftt__sp-bar { display: block; width: 100%; height: 15px; border-radius: 5px; background: #74B7EC; overflow: hidden; }
.eds-ftt__sp-bar em { display: block; height: 100%; width: 0; background: #1B262E; border-radius: 5px 0 0 5px; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); }

/* Non-Profit: PO row card + pulsing status badge (Figma 8047:12452) */
.eds-ftt__card--nonprofit { display: flex; align-items: center; gap: 12px; padding: 14px 26px; border-color: rgba(184,192,204,0.5); border-radius: 8px; box-shadow: 0 9px 12px rgba(27,38,46,0.05); font-family: 'Roboto', system-ui, sans-serif; }
.eds-ftt__po-name { flex: 1 1 0; font-size: 16px; font-weight: 400; color: #4B5768; min-width: 0; white-space: nowrap; }
.eds-ftt__po-amt { flex: 1 1 0; text-align: center; font-size: 14px; font-weight: 600; color: #0D0F11; white-space: nowrap; }
.eds-ftt__po-badge {
	flex: 0 0 auto;
	min-width: 100px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 4px;
	background: #FEF0C1;
	color: #0D0F11;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	white-space: nowrap;
}
.eds-ftt--anim .eds-ftt__po-badge--pulse { animation: eds-ftt-badge-pulse 1.9s ease-in-out infinite; }
@keyframes eds-ftt-badge-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(214,166,42,0.55); }
	50% { box-shadow: 0 0 0 6px rgba(214,166,42,0); }
}

/* Right copy */
.eds-ftt__top { display: flex; flex-direction: column; gap: 24px; }
.eds-ftt__title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-ftt__para { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; line-height: 22px; }
/* Win over the Elementor kit's global link/button styles. */
.eds-ftt .eds-ftt__btn,
.eds-ftt .eds-ftt__btn:hover,
.eds-ftt .eds-ftt__btn:focus {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	margin-top: 4px;
	border: 0;
	text-decoration: none !important;
	font-family: 'Golos Text', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.eds-ftt .eds-ftt__btn:hover { transform: translateY(-1px); }

/* Testimonial card */
.eds-ftt__quote-card { padding: 24px; border-radius: 16px; background: #DCE7F3; }
.eds-ftt__quote { margin: 0 0 16px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 15px; line-height: 1.45; font-weight: 500; }
.eds-ftt__author { display: flex; align-items: center; gap: 12px; }
.eds-ftt__author-img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; }
.eds-ftt__author-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eds-ftt__author-info { display: flex; flex-direction: column; }
.eds-ftt__author-name { font-family: 'Golos Text', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: #0D0F11; }
.eds-ftt__author-role { font-family: 'Golos Text', system-ui, sans-serif; font-size: 13px; line-height: normal; color: #4B5768; }

/* ---- Entrance: --o order fades up (JS adds .is-in) ---- */
.eds-ftt--anim .eds-ftt__rev {
	opacity: 0;
	transform: translateY(var(--ftt-rise, 24px));
	transition: opacity var(--ftt-dur, 700ms) ease, transform var(--ftt-dur, 700ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--o, 0) * var(--ftt-stagger, 240ms));
}
.eds-ftt--anim.is-in .eds-ftt__rev { opacity: 1; transform: none; }
/* Donut hidden until the fund card is in (JS draws the arcs). */
.eds-ftt--anim .eds-ftt__seg { --ftt-seg-delay: calc(var(--o, 4) * var(--ftt-stagger, 240ms) + 200ms); }
@media (prefers-reduced-motion: reduce) {
	.eds-ftt--anim .eds-ftt__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-ftt--anim .eds-ftt__po-badge--pulse { animation: none !important; }
	.eds-ftt--anim .eds-ftt__sp-bar em { transition: none !important; }
}
body.elementor-editor-active .eds-ftt--anim .eds-ftt__rev { opacity: 1 !important; transform: none !important; }

/* ---- Responsive: stack ---- */
@media (max-width: 1180px) {
	.eds-ftt__inner { flex-direction: column; gap: 32px; }
	.eds-ftt__media { flex: none; max-width: none; }
}

/* K-12 phone: scale the floating cards down to suit the smaller image (Figma
   8021:11015). Sized internally (not transform) so the entrance reveal still runs. */
@media (max-width: 767px) {
	.eds-ftt--k12 .eds-ftt__pill { left: 16px; bottom: 130px; padding: 7px 12px 7px 7px; gap: 7px; border-radius: 10px; }
	.eds-ftt--k12 .eds-ftt__pill-ic { width: 24px; height: 24px; border-radius: 6px; }
	.eds-ftt--k12 .eds-ftt__pill-ic svg { width: 14px; height: 14px; }
	.eds-ftt--k12 .eds-ftt__pill-txt { font-size: 12px; }
	.eds-ftt--k12 .eds-ftt__card { left: 16px; width: calc(100% - 32px); bottom: 16px; padding: 12px 14px; border-radius: 11px; }
	.eds-ftt--k12 .eds-ftt__card--k12 { gap: 12px; }
	.eds-ftt--k12 .eds-ftt__fund-name { font-size: 12px; }
	.eds-ftt--k12 .eds-ftt__fund-meta,
	.eds-ftt--k12 .eds-ftt__fund-alloc,
	.eds-ftt--k12 .eds-ftt__fund-total { font-size: 11px; }
	.eds-ftt--k12 .eds-ftt__donut { width: 48px; height: 48px; }
}

/* ============================================================
   LIFECYCLE OVERVIEW — hero card + two feature cards (orbit + budgets table).
   ============================================================ */
.eds-lov { width: 100%; box-sizing: border-box; }
.eds-lov__inner { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

/* Mobile: card 1 (hero) breaks out to the full viewport width, square corners. */
@media (max-width: 767px) {
	.eds-lov__hero {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		border-radius: 0 !important;
	}
}

/* Card 1 — hero */
.eds-lov__hero {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 40px 20px 0;
	text-align: center;
	background:
		linear-gradient(292deg, var(--bg1, rgba(116, 183, 236, 0.58)) -1.39%, var(--bg2, rgba(170, 65, 144, 0.40)) 95.13%),
		linear-gradient(0deg, #FFF 0%, #FFF 100%),
		linear-gradient(0deg, #0F191F 0%, #0F191F 100%),
		#386276;
}
/* Film-grain texture over the hero background (size + intensity via controls). */
.eds-lov__hero-grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	background-repeat: repeat;
	mix-blend-mode: overlay;
	opacity: 0.55;
}
/* Blue arc glow behind the dashboard image (Figma #74B7EC → #386276). */
.eds-lov__hero-glow {
	position: absolute;
	left: 50%;
	top: 120px;
	width: 96%;
	max-width: 940px;
	aspect-ratio: 5 / 3;
	transform: translateX(-50%);
	background: radial-gradient(52% 60% at 50% 42%, var(--glow1, #74B7EC) 0%, var(--glow2, #386276) 42%, rgba(56,98,118,0) 72%);
	filter: blur(46px);
	opacity: 0.55;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}
.eds-lov__hero-head, .eds-lov__hero-img { position: relative; z-index: 1; }
.eds-lov__hero-head { display: flex; flex-direction: column; align-items: center; }
.eds-lov__hero-icon { width: 72px; height: 72px; margin-bottom: 24px; display: inline-flex; }
.eds-lov__hero-icon img { width: 100%; height: 100%; object-fit: contain; }
.eds-lov__hero-title { margin: 0 auto 24px; max-width: 640px; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-lov__hero-img { margin: 8px auto 0; max-width: 1020px; line-height: 0; }
.eds-lov__hero-img img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; }

/* Buttons */
.eds-lov .eds-lov__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 16px 28px; border: 0; text-decoration: none !important;
	font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.eds-lov .eds-lov__btn:hover { transform: translateY(-1px); }

/* Feature row */
.eds-lov__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.eds-lov__card { position: relative; overflow: hidden; border-radius: 20px; padding: 24px; min-height: 314px; display: flex; flex-direction: column; }
.eds-lov__card-title { margin: 0 0 8px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.eds-lov__card-desc { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; line-height: 1.4; }

/* Card 2 — orbit */
.eds-lov__orbit-wrap { position: relative; flex: 1 1 auto; min-height: 170px; margin-top: 12px; }
/* Center graphic (the uploaded image the pills orbit around). The old CSS ring
   circles were removed — the image provides that design now. Spans the full
   card width by default: --lov-brand-w% of the content box + 48px cancels the
   card's 24px side padding so it bleeds to the card edges. */
.eds-lov__brand { position: absolute; left: 50%; top: var(--lov-brand-y, 62%); transform: translate(-50%, -50%); width: calc(var(--lov-brand-w, 100%) + 48px); max-width: none; z-index: 1; }
.eds-lov__brand img { display: block; width: 100%; height: auto; }
.eds-lov__orbit { position: absolute; inset: 0; z-index: 2; transform-origin: 50% var(--lov-brand-y, 62%); }
.eds-lov__opill {
	position: absolute; translate: -50% -50%; scale: var(--lov-pill-scale, 1);
	display: inline-flex; align-items: center; padding: 6px 12px;
	border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
	background: #0F191F; color: #fff; box-shadow: 0 8px 18px rgba(15,25,31,0.18);
}

/* Card 3 — budgets table */
/* Layered dashboard: "Allocated Budgets" back panel + front table card.
   Both cards are absolute so each has its own Left / Top / Width controls. */
.eds-lov__dash { position: relative; align-self: center; width: 100%; max-width: 494px; height: 150px; margin-top: 22px; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-lov__dash-back { position: absolute; left: 0; top: 0; bottom: 0; width: 462px; max-width: 100%; box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(27,38,46,0.08); padding: 12px 16px; }
.eds-lov__table-title { display: block; font-size: 12px; font-weight: 700; color: #0D0F11; }
.eds-lov__table { position: absolute; left: 30px; top: 40px; width: 462px; max-width: calc(100% - 6px); box-sizing: border-box; z-index: 2; background: #fff; border-radius: 8px; padding: 8px 16px; box-shadow: 0 18px 44px rgba(27,38,46,0.16); }
/* Column widths + gaps mirror the Figma: wide name, narrow code, a ~41%
   progress bar, then size / close-date on the right. */
.eds-lov__trow { display: grid; grid-template-columns: 1.6fr 0.45fr 2.5fr 0.65fr 0.6fr; gap: 8px; align-items: center; padding: 4.5px 0; font-size: 8.5px; line-height: 1.2; color: #0D0F11; }
.eds-lov__trow--head { color: #4B5768; font-weight: 600; padding: 2px 0 7px; border-bottom: 1px solid #E7EAEE; margin-bottom: 2px; }
.eds-lov__trow--head span:nth-child(4), .eds-lov__trow--head span:nth-child(5) { text-align: right; }
.eds-lov__t-name { font-weight: 600; color: #0D0F11; white-space: nowrap; }
.eds-lov__t-code { color: #4B5768; }
.eds-lov__t-size, .eds-lov__t-date { text-align: right; color: #4B5768; white-space: nowrap; }
.eds-lov__tbar { display: flex; align-items: stretch; height: 10px; border-radius: 2.5px; background: #E6E9ED; overflow: hidden; }
.eds-lov__tbar i { display: flex; align-items: center; justify-content: center; height: 100%; width: var(--sw, 0%); min-width: 0; overflow: hidden; }
.eds-lov__tbar i em { font-style: normal; font-size: 6.4px; font-weight: 600; letter-spacing: 0.1px; line-height: 1; color: #fff; white-space: nowrap; }

/* ---- Entrance (revealOnScroll adds .is-in per card) ---- */
.eds-lov--anim .eds-lov__rev {
	opacity: 0;
	transform: translateY(var(--lov-rise, 24px));
	transition: opacity var(--lov-dur, 700ms) ease, transform var(--lov-dur, 700ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--o, 0) * var(--lov-stagger, 220ms));
}
.eds-lov--anim .is-in .eds-lov__rev { opacity: 1; transform: none; }

/* Hero dashboard glides up slowly: bigger travel + longer duration than the generic reveal. */
.eds-lov--anim .eds-lov__hero-img {
	transform: translateY(var(--lov-hero-rise, 90px));
	transition: opacity var(--lov-hero-dur, 1500ms) ease, transform var(--lov-hero-dur, 1500ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--o, 1) * var(--lov-stagger, 220ms));
}
.eds-lov--anim .is-in .eds-lov__hero-img { transform: none; }

/* Card 2: pills spin once for ~3s then stop (counter-rotate to stay upright). */
.eds-lov--anim .eds-lov__card--unified .eds-lov__orbit,
.eds-lov--anim .eds-lov__card--unified .eds-lov__opill { rotate: 0deg; }
.eds-lov--anim .eds-lov__card--unified.is-in .eds-lov__orbit { animation: eds-lov-spin var(--lov-spin, 1.2s) cubic-bezier(0.33, 0, 0.2, 1) 1 forwards; }
.eds-lov--anim .eds-lov__card--unified.is-in .eds-lov__opill { animation: eds-lov-spin-rev var(--lov-spin, 1.2s) cubic-bezier(0.33, 0, 0.2, 1) 1 forwards; }
/* Rotate in by a set distance (--lov-spin-deg) and settle to 0 so the pills
   land at their designed positions (pills counter-rotate to stay upright). */
@keyframes eds-lov-spin { from { rotate: calc(-1 * var(--lov-spin-deg, 45deg)); } to { rotate: 0deg; } }
@keyframes eds-lov-spin-rev { from { rotate: var(--lov-spin-deg, 45deg); } to { rotate: 0deg; } }

/* Card 3: bars fill from 0 → their width when in view. */
.eds-lov--anim .eds-lov__card--rtv .eds-lov__tbar i { width: 0; transition: width 0.9s cubic-bezier(0.16,1,0.3,1); }
.eds-lov--anim .eds-lov__card--rtv.is-in .eds-lov__tbar i { width: var(--sw, 0%); }

@media (prefers-reduced-motion: reduce) {
	.eds-lov--anim .eds-lov__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-lov--anim .eds-lov__opill, .eds-lov--anim .eds-lov__orbit { animation: none !important; }
	.eds-lov--anim .eds-lov__card--rtv .eds-lov__tbar i { width: var(--sw, 0%); transition: none; }
}
body.elementor-editor-active .eds-lov--anim .eds-lov__rev { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .eds-lov--anim .eds-lov__card--rtv .eds-lov__tbar i { width: var(--sw, 0%); }

/* ---- Responsive ---- */
/* Keep cards 2 & 3 side-by-side down to 1024px (there's still room, like
   desktop); only stack to full width below 1024px. */
@media (max-width: 1023px) {
	.eds-lov__row { grid-template-columns: 1fr; }
}

/* ============================================================
   FEATURE ACCORDION — heading + 4-item accordion (left) with a
   per-item swapping dashboard panel (right). Phase 1: static.
   ============================================================ */
.eds-fa { width: 100%; box-sizing: border-box; }
.eds-fa__inner { max-width: 1144px; margin: 0 auto; }
.eds-fa__header { margin-bottom: 60px; }
.eds-fa__title { margin: 0 0 16px; max-width: 800px; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-fa__sub { margin: 0; max-width: 620px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; line-height: 22px; }

.eds-fa__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }

/* ---- Left: accordion ---- */
.eds-fa__list { flex: 1 1 auto; max-width: 480px; display: flex; flex-direction: column; gap: 20px; }
.eds-fa__item { --accent: #9E488D; border-left: 2px solid #D9DDE3; padding: 4px 0 4px 20px; transition: border-color 0.3s ease; }
.eds-fa__item.is-open { border-left-color: var(--accent); }
.eds-fa__item, .eds-fa__item:hover, .eds-fa__item.is-open { background: none; }
.eds-fa__head, .eds-fa__head:hover, .eds-fa__head:focus, .eds-fa__head:active { display: block; width: 100%; padding: 12px 0; margin: 0; border: 0; background: none !important; box-shadow: none; cursor: pointer; text-align: left; color: #0D0F11; font-family: 'Golos Text', system-ui, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.4; }
.eds-fa__panel-c { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.16,1,0.3,1); }
.eds-fa__item.is-open .eds-fa__panel-c { grid-template-rows: 1fr; }
.eds-fa__points { min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.eds-fa__pt { display: flex; align-items: flex-start; gap: 6px; padding: 8px 0; border-bottom: 1px solid #D9DDE3; }
.eds-fa__check { flex: 0 0 auto; width: 22px; height: 22px; color: #51AC65; display: inline-flex; align-items: center; justify-content: center; }
.eds-fa__check svg { width: 100%; height: 100%; }
.eds-fa__ptbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eds-fa__point { font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; line-height: 22px; color: #4B5768; }
.eds-fa__subtext { font-family: 'Golos Text', system-ui, sans-serif; font-size: 12px; line-height: 1.4; color: #9AA3B0; }

/* ---- Right: dashboard stage ---- */
/* Stage holds a fixed 557x424 design; --fa-scale shrinks the whole panel to fit
   smaller breakpoints (set by JS from the available width). */
.eds-fa__stage { --fa-scale: 1; position: relative; flex: 0 0 auto; width: calc(557px * var(--fa-scale)); height: calc(424px * var(--fa-scale)); }
.eds-fa__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 557px;
	height: 424px;
	transform-origin: top left;
	transform: scale(var(--fa-scale, 1));
	overflow: hidden;
	border: 0.5px solid rgba(184,192,204,0.5);
	border-radius: 12px;
	background-image: linear-gradient(148deg, var(--g1, #74B7EC) 3%, var(--g2, rgba(116,183,236,0.16)) 65%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
	font-family: 'Golos Text', system-ui, sans-serif;
}
.eds-fa__panel.is-active { opacity: 1; visibility: visible; }
.eds-fa__noise { position: absolute; inset: 0; opacity: 0.25; mix-blend-mode: multiply; pointer-events: none;
	background-image: radial-gradient(rgba(0,0,0,0.14) 0.5px, transparent 0.5px); background-size: 3px 3px; }

/* Shared floats: pills + badges */
.eds-fa__pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; background: #fff; border-radius: 10px; box-shadow: 0 10px 26px rgba(27,38,46,0.16); font-size: 14px; font-weight: 700; color: #4B5768; white-space: nowrap; }
.eds-fa__pill-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.eds-fa__pill-ic svg { width: 17px; height: 17px; }
.eds-fa__pill-ic--magenta { background: #9E488D; }
.eds-fa__pill-ic--green { background: #51AC65; }
.eds-fa__pill-ic--blue { background: #3B82C4; }
.eds-fa__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #662756; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.eds-fa__badge-ic { flex: 0 0 auto; width: 15px; height: 15px; display: inline-flex; }
.eds-fa__badge-ic svg { width: 100%; height: 100%; }

/* Panel 1 — budget cards + ERP synced */
.eds-fa__p1-tray { position: absolute; left: 55px; right: 30px; top: 62px; padding: 22px; border: 1px solid rgba(255,255,255,0.7); border-radius: 20px; background: linear-gradient(-6deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.34) 90%); display: flex; flex-direction: column; gap: 16px; }
.eds-fa__p1-card { display: flex; align-items: center; gap: 12px; padding: 18px 18px; background: #fff; border: 1.3px solid #D9DDE3; border-radius: 9px; box-shadow: 0 12px 16px rgba(27,38,46,0.05); }
.eds-fa__p1-name { flex: 1 1 auto; font-size: 16px; font-weight: 700; color: #4B5768; }
.eds-fa__p1-total { font-size: 16px; color: #4B5768; }
.eds-fa__p1-total b { font-weight: 700; }
.eds-fa__p1-ck { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; background: #51AC65; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.eds-fa__p1-ck svg { width: 20px; height: 20px; }
/* ERP pill sits centred on the tray's bottom edge (straddling it), per Figma.
   Position adjustable via controls (--p1pill-x horizontal, --p1pill-y bottom). */
.eds-fa__p1-pill { position: absolute; left: var(--p1pill-x, 50%); bottom: var(--p1pill-y, 0px); transform: translate(-50%, 50%); z-index: 5; }

/* Panel 2 — procurement flow: centered vertical pill · card · pill with dashed connectors */
.eds-fa__panel--2 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; }
.eds-fa__p2-line { flex: 0 0 auto; width: 0; height: 34px; border-left: 2px dashed rgba(158,72,141,0.55); }
.eds-fa__p2-po { position: relative; width: min(360px, 86%); padding: 18px 22px; background: #fff; border-radius: 14px; box-shadow: 0 16px 34px rgba(27,38,46,0.16); }
/* Budget-check badge: white pill, magenta square sparkle, grey text (Figma). */
.eds-fa__p2-badge { position: absolute; right: -6px; top: -16px; background: #fff; color: #4B5768; font-weight: 500; border-radius: 999px; padding: 5px 12px 5px 5px; gap: 7px; box-shadow: 0 8px 20px rgba(27,38,46,0.14); }
.eds-fa__p2-badge .eds-fa__badge-ic { width: 21px; height: 21px; border-radius: 5px; background: #9E488D; align-items: center; justify-content: center; }
.eds-fa__p2-badge .eds-fa__badge-ic svg { width: 13px; height: 13px; }
.eds-fa__p2-num { display: block; font-size: 14px; color: #4B5768; font-weight: 500; margin-bottom: 8px; }
.eds-fa__p2-num b { color: #0D0F11; font-weight: 700; }
.eds-fa__p2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eds-fa__p2-vendor { font-size: 18px; color: #0D0F11; }
.eds-fa__p2-amt { font-size: 22px; font-weight: 800; color: #0D0F11; white-space: nowrap; }
.eds-fa__p2-caption { margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.9); }
/* Fully-rounded pills with circular icons (Figma 7366-2658). */
.eds-fa__panel--2 .eds-fa__pill { border-radius: 999px; padding: 8px 18px 8px 8px; color: #0D0F11; font-size: 15px; }
.eds-fa__panel--2 .eds-fa__pill-ic { width: 26px; height: 26px; border-radius: 50%; }
.eds-fa__panel--2 .eds-fa__pill-ic svg { width: 15px; height: 15px; }
/* Film-grain overlay over the panel gradient (size + intensity via controls). */
.eds-fa__panel--2 .eds-fa__noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: 0.3; }

/* Panel 3 — AP automation: invoice card + full-width scan line */
.eds-fa__p3-fetched { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); z-index: 3; }
.eds-fa__p3-card { position: absolute; left: 40px; right: 40px; top: 62px; bottom: 26px; padding: 28px 30px; background: linear-gradient(180deg, #fff 68%, #F3F6FA 100%); border-radius: 12px; box-shadow: 0 18px 40px rgba(27,38,46,0.16); overflow: hidden; }
.eds-fa__p3-h { display: block; font-size: 28px; font-weight: 700; color: #24303B; margin-bottom: 20px; }
.eds-fa__p3-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.eds-fa__p3-name { font-size: 17px; color: #4B5768; }
.eds-fa__p3-amt { font-size: 19px; font-weight: 700; color: #0D0F11; white-space: nowrap; }
.eds-fa__p3-skels { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px 40px; }
.eds-fa__p3-skel { height: 12px; border-radius: 4px; background: #EDF1F5; }
.eds-fa__p3-skel--r { justify-self: end; width: 75%; }
.eds-fa__p3-skel--short { width: 48%; }
/* Scanner: white curtain + blue line start below the line item and descend,
   revealing the card content behind (document-scan effect). */
.eds-fa__panel--3 { --scan-start: 104px; --scan-travel: 200px; --scan-dur: 2.6s; }
.eds-fa__p3-mask { position: absolute; left: 0; right: 0; top: var(--scan-start); bottom: 0; background: #fff; z-index: 2; }
.eds-fa__p3-scanbar { position: absolute; left: 0; right: 0; top: var(--scan-start); height: 3px; background: #4F9BE0; box-shadow: 0 0 14px 2px rgba(79,155,224,0.55); z-index: 3; display: flex; align-items: center; justify-content: center; }
.eds-fa__p3-scanpill { padding: 6px 14px 6px 6px; border-radius: 999px; background: #4F9BE0; color: #fff; box-shadow: 0 6px 16px rgba(59,130,196,0.45); }
.eds-fa__p3-scanpill .eds-fa__pill-ic { background: rgba(255,255,255,0.22); width: 24px; height: 24px; }
.eds-fa.is-in .eds-fa__panel--3.is-active .eds-fa__p3-mask,
.eds-fa.is-in .eds-fa__panel--3.is-active .eds-fa__p3-scanbar {
	animation: eds-fa-scan var(--scan-dur, 2.6s) cubic-bezier(0.4,0,0.2,1) 0.6s forwards;
}
@keyframes eds-fa-scan { from { transform: translateY(0); } to { transform: translateY(var(--scan-travel, 200px)); } }
@media (prefers-reduced-motion: reduce) {
	.eds-fa__panel--3 .eds-fa__p3-mask, .eds-fa__panel--3 .eds-fa__p3-scanbar { display: none; }
}
body.elementor-editor-active .eds-fa__panel--3 .eds-fa__p3-mask,
body.elementor-editor-active .eds-fa__panel--3 .eds-fa__p3-scanbar { transform: translateY(var(--scan-travel, 200px)); animation: none; }

/* Panel 4 — Visa card (uploadable) + spend dashboard */
.eds-fa__p4-card { position: absolute; left: 50%; width: var(--p4cardw, 475px); margin-left: calc(var(--p4cardw, 475px) / -2); top: 22px; bottom: 20px; padding: 16px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(27,38,46,0.16); overflow: hidden; }
.eds-fa__p4-cc { position: relative; height: 156px; padding: 16px; border-radius: 12px; color: #fff; overflow: hidden; background: linear-gradient(115deg, #386276 0%, #2E3E8C 42%, #6C2A6E 100%); }
.eds-fa__p4-cc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.eds-fa__p4-brand { font-size: 16px; font-weight: 700; }
.eds-fa__p4-chip { position: absolute; left: 16px; top: 52px; width: 32px; height: 24px; border-radius: 4px; background: linear-gradient(135deg, #E6C878, #C9A24B); }
.eds-fa__p4-holder { position: absolute; left: 16px; bottom: 42px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.eds-fa__p4-org { position: absolute; left: 16px; bottom: 26px; font-size: 9px; opacity: 0.82; letter-spacing: 0.04em; }
.eds-fa__p4-visa { position: absolute; right: 16px; bottom: 20px; font-size: 22px; font-weight: 800; font-style: italic; }
.eds-fa__p4-fine { margin: 12px 2px 0; font-size: 9.5px; line-height: 1.35; color: #8A93A2; }
.eds-fa__p4-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.eds-fa__p4-mcol { display: flex; flex-direction: column; gap: 3px; }
.eds-fa__p4-mlabel { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 10px; color: #4B5768; }
.eds-fa__p4-dot { width: 6px; height: 6px; border-radius: 50%; }
.eds-fa__p4-dot--1 { background: #0D0F11; }
.eds-fa__p4-dot--2 { background: #386276; }
.eds-fa__p4-dot--3 { background: #74B7EC; }
.eds-fa__p4-mcol b { font-size: 16px; font-weight: 700; color: #0D0F11; }
.eds-fa__p4-bar { display: flex; align-items: stretch; height: 9px; border-radius: 5px; margin-top: 12px; background: #E6E9ED; overflow: hidden; }
.eds-fa__p4-bar i { display: block; height: 100%; width: 0; }
.eds-fa__p4-reset { display: block; text-align: right; font-size: 10px; color: #8A93A2; margin-top: 6px; }
.eds-fa__p4-cardname { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding: 12px 14px; border: 1px solid #EAEDF1; border-radius: 10px; }
.eds-fa__p4-cardname i { font-style: normal; font-size: 10px; color: #8A93A2; }
.eds-fa__p4-cardname b { font-size: 14px; color: #0D0F11; }
.eds-fa__p4-growth { position: absolute; left: 22px; top: 196px; gap: 5px; padding: 7px 12px; border-radius: 8px; background: #fff; color: #2E9B4E; font-size: 13px; box-shadow: 0 10px 22px rgba(27,38,46,0.16); }
.eds-fa__p4-growth-ic { display: inline-flex; width: 15px; height: 15px; }
.eds-fa__p4-growth-ic svg { width: 100%; height: 100%; }
.eds-fa__p4-tooltip { position: absolute; right: 10px; top: 92px; display: inline-flex; align-items: center; gap: 7px; max-width: 210px; padding: 8px 12px; background: #fff; border-radius: 9px; box-shadow: 0 10px 22px rgba(27,38,46,0.16); font-size: 11px; line-height: 1.3; color: #4B5768; }
.eds-fa__p4-tip-ic { flex: 0 0 auto; width: 16px; height: 16px; }
.eds-fa__p4-tip-ic svg { width: 100%; height: 100%; }
/* Bar fill: segments grow 0 → target when the panel is active. */
.eds-fa.is-in .eds-fa__panel--4.is-active .eds-fa__p4-bar i {
	width: var(--sw, 0%);
	transition: width 1s cubic-bezier(0.16,1,0.3,1);
	transition-delay: 0.5s;
}
body.elementor-editor-active .eds-fa__p4-bar i { width: var(--sw, 0%); }
@media (prefers-reduced-motion: reduce) { .eds-fa__p4-bar i { width: var(--sw, 0%); } }

/* ---- Entrance: heading → subtitle → items fade up with stagger ---- */
.eds-fa__rev { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(280ms + var(--o, 0) * 120ms); }
.eds-fa.is-in .eds-fa__rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-fa__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}
body.elementor-editor-active .eds-fa__rev { opacity: 1 !important; transform: none !important; }

/* ---- Panel entrance: fade-up with stagger (background → cards → pill).
   Plays when a panel is active and the section is in view; replays on switch. ---- */
.eds-fa__pa { opacity: 0; transform: translateY(20px); }
.eds-fa__pa--left { transform: translateX(-34px); }
.eds-fa__pa--right { transform: translateX(34px); }
.eds-fa__pa--up { transform: translateY(-22px); }
.eds-fa.is-in .eds-fa__panel.is-active .eds-fa__pa {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--pa, 0) * 150ms);
}
/* Fade-only entrance for elements that center themselves via transform. */
.eds-fa__paf { opacity: 0; }
.eds-fa.is-in .eds-fa__panel.is-active .eds-fa__paf { opacity: 1; transition: opacity 0.5s ease; transition-delay: calc(var(--pa, 0) * 150ms); }
@media (prefers-reduced-motion: reduce) { .eds-fa__paf { opacity: 1 !important; } }
body.elementor-editor-active .eds-fa__paf { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
	.eds-fa__pa { opacity: 1 !important; transform: none !important; }
}
body.elementor-editor-active .eds-fa__pa { opacity: 1 !important; transform: none !important; }

.eds-fa__pill-ic--pink { background: #E15C9C; }

/* ============ PUBLIC AGENCY panels ============ */
/* Panel 1 — Budget Overview + donuts + anomaly alert */
.eds-fa__pb1-bg { position: absolute; left: 40px; top: 78px; width: 483px; height: 250px; box-sizing: border-box; padding: 12px; background: rgba(246,246,251,0.55); border-radius: 14px; box-shadow: 0 18px 40px rgba(27,38,46,0.12); z-index: 1; }
.eds-fa__pb1-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.eds-fa__pb1-head b { font-size: 16px; color: #2A2340; }
.eds-fa__pb1-year { font-size: 11px; color: #4B5768; background: #fff; border: 1px solid #E1E4EA; border-radius: 6px; padding: 3px 9px; }
.eds-fa__pb1-front { position: absolute; left: 56px; top: 122px; width: 451px; box-sizing: border-box; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
/* Row order: fund info (left) → donut (middle) → total (right). */
.eds-fa__pb1-fund { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 13px 16px; box-shadow: 0 10px 12.7px rgba(27,38,46,0.05); }
.eds-fa__pb1-fmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.eds-fa__pb1-fname { font-size: 12px; font-weight: 700; color: #4B5768; }
.eds-fa__pb1-fcode { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.eds-fa__pb1-fpill { background: #E5F3FC; color: #0D0F11; border-radius: 4px; padding: 2px 8px; line-height: 1.5; }
.eds-fa__pb1-ftype { color: #BAC0CB; }
.eds-fa__pb1-fstat { font-size: 11px; color: #0D0F11; }
.eds-fa__pb1-fstat b { font-weight: 700; color: inherit; }
.eds-fa__pb1-sep { color: #0D0F11; }
/* Spent segment — colour comes from the per-fund control via --fspent. */
.eds-fa__pb1-spent { color: var(--fspent, #0D0F11); }
.eds-fa__pb1-donut { flex: 0 0 auto; width: 50px; height: 50px; }
.eds-fa__pb1-donut svg { width: 100%; height: 100%; display: block; }
.eds-fa__pb1-ftotal { flex: 0 0 auto; font-size: 12px; color: #0D0F11; white-space: nowrap; }
.eds-fa__pb1-ftotal b { font-weight: 700; color: #0D0F11; }
/* Reserved-width slot: the ghost holds the final value's width so the counting
   number (overlaid, absolute) can't reflow the row and shake the donut. */
.eds-fa__pb1-slot { position: relative; display: inline-block; }
.eds-fa__pb1-ghost { visibility: hidden; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; }
.eds-fa__pb1-slot b { position: absolute; right: 0; top: 0; font-variant-numeric: tabular-nums; }
.eds-fa__pbd-track { stroke: #E7EAEE; }
.eds-fa__pbd-seg { stroke: #2743E0; transition: stroke-dasharray 0.9s cubic-bezier(0.16,1,0.3,1); }
.eds-fa__pb1-anom { position: absolute; left: 56px; top: 34px; width: 405px; box-sizing: border-box; z-index: 4; padding: 6px 12px; background: var(--anom-bg, #FDF6E9); border-radius: 7px; box-shadow: 0 10px 12.7px rgba(27,38,46,0.05); }
.eds-fa__pb1-anom b { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--anom-title, #573D12); }
/* Uploaded PNG/SVG icon, sized by the Anomaly Icon Size control. The image
   shrink-wraps to its own size (no fixed square box reserving space) and the
   row's align-items:center keeps it vertically centered with the title text. */
.eds-fa__pb1-anom-ic { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; }
.eds-fa__pb1-anom-ic img { display: block; width: var(--anom-ic-size, 12px); height: auto; }
/* Detail indented under the title text (past the icon + gap). */
.eds-fa__pb1-anom span { display: block; margin-top: 2px; padding-left: 17px; font-size: 9px; line-height: 1.35; color: var(--anom-text, #4B5768); }

/* Panel 2 — PO approvals list + approver card */
.eds-fa__pb2-tray { position: absolute; left: 56px; top: 66px; width: 457px; box-sizing: border-box; padding: 14px; background: rgba(255,255,255,0.38); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.eds-fa__pb2-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 15px 18px; box-shadow: 0 8px 18px rgba(27,38,46,0.08); }
.eds-fa__pb2-name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #0D0F11; }
.eds-fa__pb2-amt { font-size: 14px; font-weight: 700; color: #0D0F11; white-space: nowrap; }
.eds-fa__pb2-status { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #2E9B4E; background: #E7F6EC; border: 1px solid #BFE6CB; border-radius: 999px; padding: 4px 12px; }
.eds-fa__pb2-pill { position: absolute; left: 203px; top: 38px; z-index: 4; }
.eds-fa__pb2-person { position: absolute; left: 176px; top: 344px; z-index: 4; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: 0 14px 28px rgba(27,38,46,0.18); }
.eds-fa__pb2-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.eds-fa__pb2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eds-fa__pb2-avatar--ph { background: linear-gradient(135deg, #C9A24B, #8A5B2A); }
.eds-fa__pb2-pinfo { display: flex; flex-direction: column; }
.eds-fa__pb2-pinfo b { font-size: 12px; color: #0D0F11; }
.eds-fa__pb2-pinfo i { font-style: normal; font-size: 10px; color: #8A93A2; }
.eds-fa__pb2-pstatus { font-size: 9px; font-weight: 700; color: #2E9B4E; background: #E7F6EC; border-radius: 999px; padding: 3px 8px; }

/* Panel 3 — My Approvals: translucent background card + overflowing front rows */
.eds-fa__pb3-bg { position: absolute; left: 95px; top: 52px; width: 360px; height: 332px; box-sizing: border-box; background: rgba(255,255,255,0.7); border: 0.73px solid #D9DDE3; border-radius: 10px; box-shadow: 0 1.5px 3px rgba(0,0,0,0.04); z-index: 1; }
.eds-fa__pb3-title { position: absolute; left: 18px; top: 17px; font-size: 12px; font-weight: 600; color: #0D0F11; }
.eds-fa__pb3-skel { position: absolute; border-radius: 999px; }
.eds-fa__pb3-skel--a { left: 162px; top: 16px; width: 180px; height: 15px; background: rgba(255,255,255,0.49); }
.eds-fa__pb3-skel--b { left: 18px; top: 40px; width: 326px; height: 16px; background: rgba(255,255,255,0.44); }
.eds-fa__pb3-skel--c { left: 21px; top: 123px; width: 326px; height: 16px; background: rgba(255,255,255,0.28); }
.eds-fa__pb3-front { position: absolute; left: 83px; top: 121px; width: 385px; box-sizing: border-box; z-index: 2; display: flex; flex-direction: column; gap: 11px; }
.eds-fa__pb3-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 0.77px solid #D9DDE3; border-radius: 11px; padding: 0 22px; height: 82px; box-shadow: 0 6.5px 13.5px rgba(0,0,0,0.09); }
.eds-fa__pb3-label { flex: 0 0 138px; font-size: 16px; font-weight: 700; color: #4B5768; }
.eds-fa__pb3-nums { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.eds-fa__pb3-nums b { font-size: 16px; font-weight: 700; color: #51AC65; }
.eds-fa__pb3-nums i { font-style: normal; font-size: 15px; color: #4B5768; }
.eds-fa__pb3-ck { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; background: #51AC65; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.eds-fa__pb3-ck svg { width: 20px; height: 20px; }
.eds-fa__pb3-pill { position: absolute; left: 355px; top: 40px; z-index: 5; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; background: #F7ECF4; color: #AA4190; font-size: 14px; font-weight: 700; box-shadow: 0 3px 2px rgba(27,38,46,0.09), 0 10px 6px rgba(27,38,46,0.04); white-space: nowrap; }
.eds-fa__pb3-spark { display: inline-flex; width: 15px; height: 15px; }
.eds-fa__pb3-spark svg { width: 100%; height: 100%; }
/* Panel 3 rows reveal bottom-to-top (last row first). */
.eds-fa.is-in .eds-fa__panel--3.is-active .eds-fa__pb3-row { transition-delay: calc(300ms + (3 - var(--pa, 0)) * 140ms); }

/* Panel 4 — stacked Visa cards */
.eds-fa--public .eds-fa__panel--4 { background-image: linear-gradient(179deg, var(--g1, #FFE6F9) 40%, var(--g2, #A5BFF7) 130%); }
.eds-fa__pb4-back, .eds-fa__pb4-front { position: absolute; border-radius: 10px; overflow: hidden; color: #fff; box-sizing: border-box; }
.eds-fa__pb4-back { left: 108px; top: 62px; width: 343px; height: 206px; background: linear-gradient(110deg, #3E5AC0 0%, #7B3F9E 100%); box-shadow: 0 8px 18px rgba(0,0,0,0.20); z-index: 1; }
.eds-fa__pb4-front { left: 86px; top: 124px; width: 384px; height: 240px; padding: 20px; background: linear-gradient(110deg, #141018 0%, #2A1030 42%, #7A1E52 80%, #A02C64 100%); box-shadow: 0 18px 34px rgba(0,0,0,0.28); z-index: 2; }
.eds-fa__pb4-back img, .eds-fa__pb4-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eds-fa__pb4-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.eds-fa__pb4-brand svg { width: 24px; height: 18px; }
/* Uploaded logo replaces the coded brand mark on either card. It's an <img>
   inside .eds-fa__pb4-brand, so it inherits the same anchored position; the
   full-card override below keeps it from being stretched like a full-card image. */
.eds-fa__pb4-brand .eds-fa__pb4-logo { position: static; inset: auto; width: auto; height: var(--pb4-logo-h, 22px); max-width: 180px; object-fit: contain; display: block; }
.eds-fa__pb4-back .eds-fa__pb4-brand { position: absolute; left: 20px; top: 18px; font-size: 18px; }
.eds-fa__pb4-chip { position: absolute; left: 22px; top: 74px; width: 42px; height: 32px; border-radius: 5px; background: linear-gradient(135deg, #E7D190, #B89238); }
.eds-fa__pb4-wave { position: absolute; left: 74px; top: 78px; width: 24px; height: 24px; color: rgba(255,255,255,0.85); }
.eds-fa__pb4-wave svg { width: 100%; height: 100%; }
.eds-fa__pb4-holder { position: absolute; left: 22px; bottom: 54px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.eds-fa__pb4-org { position: absolute; left: 22px; bottom: 34px; font-size: 11px; font-weight: 700; opacity: 0.9; letter-spacing: 0.06em; }
.eds-fa__pb4-visa { position: absolute; right: 22px; bottom: 28px; font-size: 26px; font-weight: 800; font-style: italic; letter-spacing: 0.02em; }
.eds-fa__pb4-growth { position: absolute; left: 40px; top: 326px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 7px; background: #EAFFF0; color: #51AC65; font-size: 13px; font-weight: 600; box-shadow: 0 10px 13px rgba(27,38,46,0.05); z-index: 5; white-space: nowrap; }
.eds-fa__pb4-growth-ic { display: inline-flex; width: 17px; height: 17px; }
.eds-fa__pb4-growth-ic svg { width: 100%; height: 100%; }
.eds-fa__pb4-fine { position: absolute; left: 50%; transform: translateX(-50%); top: 376px; width: 305px; margin: 0; font-size: 8px; line-height: 1.4; text-align: center; color: rgba(255,255,255,0.72); }

/* ============ NON-PROFIT panels ============ */
/* Panel 1 — FY26 Budget View + budget bars */
.eds-fa__np1-card { position: absolute; left: 90px; top: 96px; width: 380px; height: 220px; box-sizing: border-box; padding: 20px; background: rgba(255,255,255,0.73); border: 1.3px solid #D9DDE3; border-radius: 12px; box-shadow: 0 12px 15px rgba(27,38,46,0.05); z-index: 2; }
.eds-fa__np1-title { display: block; font-size: 15px; font-weight: 700; color: #4B5768; margin-bottom: 16px; }
.eds-fa__np1-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.eds-fa__np1-row ~ .eds-fa__np1-row { margin-top: 14px; }
.eds-fa__np1-name { font-size: 12px; font-weight: 600; color: #0D0F11; }
.eds-fa__np1-rev { font-size: 12px; color: #4B5768; }
.eds-fa__np1-bar { display: block; height: 12px; border-radius: 4px; background: rgba(120,140,160,0.22); overflow: hidden; }
.eds-fa__np1-bar i { display: block; height: 100%; width: 0; border-radius: 4px; }
.eds-fa__np1-skel { display: block; height: 13px; border-radius: 999px; background: rgba(255,255,255,0.5); margin-top: 14px; }
.eds-fa__np1-skel--a { width: 56%; }
.eds-fa__np1-skel--b { width: 92%; margin-top: 8px; }
.eds-fa.is-in .eds-fa__panel--1.is-active .eds-fa__np1-bar i { width: var(--sw, 0%); transition: width 1s cubic-bezier(0.16,1,0.3,1); transition-delay: 0.5s; }
body.elementor-editor-active .eds-fa__np1-bar i { width: var(--sw, 0%); }

/* Panel 2 — PO approvals (mint rows) */
.eds-fa__np2-tray { position: absolute; left: 60px; top: 66px; width: 440px; box-sizing: border-box; padding: 16px; background: rgba(255,255,255,0.30); border-radius: 16px; display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.eds-fa__np2-row { display: flex; align-items: center; gap: 14px; background: #EAF7EF; border-radius: 12px; padding: 18px 22px; box-shadow: 0 8px 18px rgba(27,38,46,0.06); }
.eds-fa__np2-name { flex: 0 0 130px; font-size: 15px; font-weight: 700; color: #0D0F11; }
.eds-fa__np2-amt { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: #0D0F11; }
.eds-fa__np2-status { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #2E9B4E; background: #fff; border: 1px solid #BFE6CB; border-radius: 999px; padding: 6px 16px; }
.eds-fa__np2-pill { position: absolute; left: 200px; top: 30px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 12px; background: #9E488D; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 10px 22px rgba(27,38,46,0.16); white-space: nowrap; }
.eds-fa__np2-pill-ic { display: inline-flex; width: 18px; height: 18px; }
.eds-fa__np2-pill-ic svg { width: 100%; height: 100%; }
.eds-fa__np2-person { position: absolute; left: 150px; top: 350px; z-index: 5; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 14px; box-shadow: 0 14px 28px rgba(27,38,46,0.18); }
.eds-fa__np2-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.eds-fa__np2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eds-fa__np2-avatar--ph { background: linear-gradient(135deg, #C9A24B, #8A5B2A); }
.eds-fa__np2-pinfo { display: flex; flex-direction: column; }
.eds-fa__np2-pinfo b { font-size: 13px; color: #0D0F11; }
.eds-fa__np2-pinfo i { font-style: normal; font-size: 11px; color: #8A93A2; }
.eds-fa__np2-pstatus { font-size: 10px; font-weight: 600; color: #2E9B4E; background: #E7F6EC; border-radius: 999px; padding: 4px 10px; }

/* Panel 3 — Pay Invoices */
.eds-fa--nonprofit .eds-fa__panel--3 { background-image: linear-gradient(179deg, var(--g1, #324DA1) 45%, var(--g2, #F3FFE5) 130%); }
.eds-fa__np3-card { position: absolute; left: 70px; top: 47px; width: 415px; height: 378px; box-sizing: border-box; padding: 26px 26px 0; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px rgba(27,38,46,0.16); overflow: hidden; z-index: 1; }
.eds-fa__np3-title { display: block; font-size: 25px; font-weight: 700; color: #4B5768; margin-bottom: 18px; }
.eds-fa__np3-list { display: flex; flex-direction: column; gap: 12px; }
.eds-fa__np3-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #fff; border: 1.4px solid rgba(184,192,204,0.5); border-radius: 9px; padding: 16px 22px; box-shadow: 0 11px 7px rgba(27,38,46,0.05); }
.eds-fa__np3-po { grid-column: 1; grid-row: 1; font-size: 14px; color: #386276; margin-bottom: 2px; }
.eds-fa__np3-po b { color: #386276; font-weight: 700; }
.eds-fa__np3-name { grid-column: 1; grid-row: 2; font-size: 19px; color: #4B5768; }
.eds-fa__np3-amt { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 23px; font-weight: 600; color: #0D0F11; white-space: nowrap; }
.eds-fa__np3-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(to top, #fff 24%, rgba(255,255,255,0) 96%); z-index: 3; pointer-events: none; }
/* Pay Now button. Position kept low-specificity so the Left/Top controls win;
   visual styles high-specificity + !important to beat the Elementor kit. */
.eds-fa__np3-btn { position: absolute; left: 150px; top: 300px; z-index: 5; }
.eds-fa a.eds-fa__np3-btn,
.eds-fa a.eds-fa__np3-btn:hover,
.eds-fa a.eds-fa__np3-btn:focus,
.eds-fa a.eds-fa__np3-btn:visited {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 16px 20px; border: 0; border-radius: 4px;
	background-color: #1987E0 !important; color: #ffffff !important;
	font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 1;
	text-decoration: none !important; box-shadow: 0 12px 22px rgba(25,135,224,0.4);
}

/* Panel 4 — Visa card + spend/limit */
.eds-fa--nonprofit .eds-fa__panel--4 { background-image: linear-gradient(179deg, var(--g1, #96B4C2) 45%, var(--g2, #BC9AB4) 130%); }
.eds-fa__np4-card { position: absolute; left: 78px; top: 40px; width: 358px; height: 232px; box-sizing: border-box; overflow: hidden; border-radius: 8px; color: #fff; padding: 22px; background: linear-gradient(120deg, #3E5AC0 0%, #7B3F9E 100%); box-shadow: 0 12px 24px rgba(0,0,0,0.22); z-index: 1; }
.eds-fa__np4-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eds-fa__np4-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.eds-fa__np4-brand svg { width: 24px; height: 18px; }
.eds-fa__np4-chip { position: absolute; left: 22px; top: 76px; width: 42px; height: 32px; border-radius: 5px; background: linear-gradient(135deg, #E7D190, #B89238); }
.eds-fa__np4-wave { position: absolute; left: 74px; top: 80px; width: 24px; height: 24px; color: rgba(255,255,255,0.85); }
.eds-fa__np4-wave svg { width: 100%; height: 100%; }
.eds-fa__np4-holder { position: absolute; left: 22px; bottom: 52px; font-size: 15px; font-weight: 700; letter-spacing: 0.05em; }
.eds-fa__np4-org { position: absolute; left: 22px; bottom: 34px; font-size: 10px; opacity: 0.85; letter-spacing: 0.05em; }
.eds-fa__np4-visa { position: absolute; right: 22px; bottom: 28px; font-size: 24px; font-weight: 800; font-style: italic; }
.eds-fa__np4-spend { position: absolute; left: 301px; top: 90px; width: 208px; box-sizing: border-box; padding: 12px 14px; border: 1.3px solid #E7EAEE; background: linear-gradient(74deg, #ffffff 55%, rgba(170,65,144,0.18) 135%); border-radius: 12px; box-shadow: 0 11px 14px rgba(255,255,255,0.14); z-index: 4; }
.eds-fa__np4-spend-top { display: flex; align-items: center; justify-content: space-between; }
.eds-fa__np4-spend-l { font-size: 12px; color: #4B5768; }
.eds-fa__np4-spend-u { font-size: 10px; font-weight: 700; color: #386276; }
.eds-fa__np4-spend-amt { display: block; font-size: 20px; font-weight: 800; color: #0D0F11; margin: 4px 0 8px; }
.eds-fa__np4-spend-bar { display: block; height: 6px; border-radius: 3px; background: #EEF1F4; overflow: hidden; }
.eds-fa__np4-spend-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #F59E0B, #74B7EC); }
/* Suggestion row — win over the Elementor kit's global text/link styles. */
.eds-fa .eds-fa__np4-suggest { display: flex !important; align-items: center; gap: 4px; margin-top: 8px; font-size: 9px !important; color: #4B5768 !important; }
.eds-fa .eds-fa__np4-suggest-ic { display: inline-flex; width: 11px; height: 11px; color: #9E488D; }
.eds-fa .eds-fa__np4-suggest-ic svg { width: 100%; height: 100%; }
.eds-fa .eds-fa__np4-suggest b { color: #9E488D !important; }
.eds-fa .eds-fa__np4-suggest a,
.eds-fa .eds-fa__np4-suggest a:hover,
.eds-fa .eds-fa__np4-suggest a:focus,
.eds-fa .eds-fa__np4-suggest a:visited { color: #386276 !important; text-decoration: underline !important; font-size: 9px !important; }
.eds-fa__np4-limit { position: absolute; left: 78px; top: 284px; width: 223px; box-sizing: border-box; padding: 12px 14px; border: 0.9px solid #E7EAEE; background: #fff; border-radius: 8px; box-shadow: 0 10px 12px rgba(27,38,46,0.05); z-index: 3; }
.eds-fa__np4-limit-top { display: flex; align-items: center; justify-content: space-between; }
.eds-fa__np4-limit-top span { font-size: 12px; color: #4B5768; }
.eds-fa__np4-limit-top i { font-style: normal; font-size: 10px; color: #8A93A2; }
.eds-fa__np4-limit b { display: block; font-size: 24px; font-weight: 800; color: #0D0F11; margin-top: 6px; }
.eds-fa__np4-pill { position: absolute; z-index: 4; box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; padding: 7px 8px; border: 0.9px solid #E7EAEE; border-radius: 7px; background: linear-gradient(22deg, #ffffff 40%, rgba(170,65,144,0.16) 135%); color: #4B5768; font-size: 12px; font-weight: 500; box-shadow: 0 9px 12px rgba(27,38,46,0.05); white-space: nowrap; overflow: hidden; }
.eds-fa__np4-pill-ic { flex: 0 0 auto; display: inline-flex; width: 24px; height: 24px; border-radius: 5px; background: #9E488D; color: #fff; align-items: center; justify-content: center; }
.eds-fa__np4-pill-ic--img { background: none; }
.eds-fa__np4-pill-ic--img img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 5px; }
.eds-fa__np4-pill-ic svg { width: 15px; height: 15px; }
.eds-fa__np4-pill--1 { left: 313px; top: 284px; }
.eds-fa__np4-pill--2 { left: 313px; top: 332px; }
.eds-fa__np4-fine { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: 340px; margin: 0; font-size: 8px; line-height: 1.4; text-align: center; color: rgba(255,255,255,0.72); }
.eds-fa.is-in .eds-fa__panel--4.is-active .eds-fa__np4-spend-bar i { width: var(--sw, 0%); transition: width 1s cubic-bezier(0.16,1,0.3,1); transition-delay: 0.6s; }
body.elementor-editor-active .eds-fa__np4-spend-bar i { width: var(--sw, 0%); }

/* ---- Editor: show every panel stacked is confusing, so keep active-only ---- */
body.elementor-editor-active .eds-fa__panel { position: absolute; }
body.elementor-editor-active .eds-fa__pbd-seg { transition: none; }

/* ---- Responsive: stack, panel above the accordion (stage scales via --fa-scale) ---- */
@media (max-width: 1180px) {
	.eds-fa__row { flex-direction: column; gap: 32px; align-items: center; }
	.eds-fa__stage { order: -1; margin: 0 auto; }
	.eds-fa__list { max-width: none; width: 100%; }
}

/* ============================================================
   HERO — ACCOUNTING. Dark hero: left copy + tilted, stacked dashboard
   mockup on a magenta glow. Mockup floats up on load (Layer-3 revealOnScroll).
   ============================================================ */
.eds-hacc { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; background-color: #1B262E; }
.eds-hacc__inner {
	position: relative;
	z-index: 2;
	max-width: 1140px;
	min-height: 640px;
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.eds-hacc__text { max-width: 560px; }
.eds-hacc__eyebrow { display: block; margin-bottom: 8px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 18px; line-height: 26px; color: #74B7EC; }
.eds-hacc__title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 52px; font-weight: 600; line-height: 1.08; letter-spacing: -1.2px; color: #fff; }
.eds-hacc__sub { margin: 24px 0 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 18px; line-height: 26px; color: rgba(255,255,255,0.8); }

/* Mockup — absolutely placed to the right, bleeds off the edge. */
.eds-hacc__art { position: absolute; z-index: 1; top: 96px; left: 50%; width: 900px; }
/* Glow — same treatment as the CTA Stack (ellipse, two colour stops, % of art). */
.eds-hacc__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--glow-size, 140%);
	height: var(--glow-size, 140%);
	transform: translate(-50%, -50%) translate(var(--glow-x, 0px), var(--glow-y, 0px));
	background: radial-gradient(ellipse at center, var(--glow-c, #9E488D) 0%, var(--glow-c2, rgba(158,72,141,0.45)) 42%, transparent 70%);
	filter: blur(80px);
	opacity: 0.6;
	z-index: 0;
	pointer-events: none;
}
/* Layered images — same logic as CTA Stack: grid-stacked, per-layer transform. */
.eds-hacc__layers { position: relative; z-index: 1; display: grid; transform: rotate(var(--tilt-rot, 3deg)) skewX(var(--tilt-skew, -5deg)); }
.eds-hacc__layer {
	grid-area: 1 / 1;
	justify-self: center;
	transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1));
	opacity: var(--lo, 1);
}
.eds-hacc__layer img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,0.4); }

/* ---- Copy entrance: fade up (JS adds .is-in) ---- */
.eds-hacc--anim .eds-hacc__rev {
	opacity: 0;
	transform: translateY(var(--hacc-rise, 44px));
	transition: opacity var(--hacc-dur, 900ms) ease, transform var(--hacc-dur, 900ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--o, 0) * var(--hacc-stagger, 180ms));
}
.eds-hacc--anim.is-in .eds-hacc__rev { opacity: 1; transform: none; }

/* ---- Mockup entrance: layers stack up from the bottom, staggered by --i ---- */
.eds-hacc--anim .eds-hacc__layer {
	opacity: 0;
	transform: translate(var(--lx, 0px), calc(var(--ly, 0px) + var(--hacc-rise, 44px))) scale(var(--ls, 1));
	transition: opacity var(--hacc-dur, 900ms) ease, transform var(--hacc-dur, 900ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(160ms + var(--i, 0) * var(--hacc-stagger, 180ms));
}
.eds-hacc--anim.is-in .eds-hacc__layer {
	opacity: var(--lo, 1);
	transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1));
}
@media (prefers-reduced-motion: reduce) {
	.eds-hacc--anim .eds-hacc__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-hacc--anim .eds-hacc__layer { opacity: var(--lo, 1) !important; transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1)) !important; transition: none !important; }
}
body.elementor-editor-active .eds-hacc--anim .eds-hacc__rev { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .eds-hacc--anim .eds-hacc__layer { opacity: var(--lo, 1) !important; transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1)) !important; }

/* ---- Responsive: stack copy over the mockup ---- */
@media (max-width: 1180px) {
	.eds-hacc__inner { justify-content: flex-start; padding-top: 48px; }
	.eds-hacc__text { max-width: none; }
}

/* ============================================================
   CTA OVERVIEW — centered card: brand mark + title + subtitle + button on a
   magenta ambient glow, with a framed dashboard bleeding off the bottom.
   Copy fades up; the mockup floats up on scroll (Layer-3 revealOnScroll).
   ============================================================ */
.eds-cov { width: 100%; box-sizing: border-box; background-color: #FFFFFF; }
.eds-cov__card {
	position: relative;
	max-width: 1140px;
	min-height: 648px;
	margin: 0 auto;
	border-radius: 24px;
	overflow: hidden;
	background-color: #F9F9F9;
	background-image: linear-gradient(var(--cov-angle, 160deg), var(--cov-bg1, #FBEAF2), var(--cov-bg2, #E7B6D3));
	box-sizing: border-box;
}
/* Film-grain overlay over the card gradient (size + intensity via controls). */
.eds-cov__grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	mix-blend-mode: multiply;
	opacity: 0.4;
}
/* Soft magenta ambient glow filling the card (approximates the Figma arcy glow). */
.eds-cov__bg {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 150%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 55% at 50% 8%, var(--amb-c, rgba(214,150,190,0.55)), transparent 70%),
		radial-gradient(70% 60% at 78% 40%, rgba(158,72,141,0.18), transparent 72%);
}
.eds-cov__content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 20px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}
.eds-cov__brand { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 18px; background: #fff; box-shadow: 0 3px 11px 7px rgba(255,255,255,0.65); overflow: hidden; }
.eds-cov__brand img { width: 54%; height: 54%; object-fit: contain; display: block; }
.eds-cov__title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 40px; font-weight: 600; line-height: 48px; color: #0D0F11; }
.eds-cov__sub { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 18px; line-height: 26px; color: #4B5768; }
.eds-cov .eds-cov__btn, .eds-cov .eds-cov__btn:hover, .eds-cov .eds-cov__btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	border: 0;
	border-radius: 999px;
	background-color: #662756;
	color: #fff;
	font-family: 'Golos Text', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.eds-cov .eds-cov__btn:hover { transform: translateY(-1px); }

/* Framed dashboard — bleeds off the card bottom. */
.eds-cov__art { position: absolute; left: 50%; top: 300px; width: 800px; max-width: 92%; transform: translateX(-50%); z-index: 1; }
.eds-cov__artglow {
	position: absolute;
	left: 50%;
	top: 46%;
	width: 120%;
	height: 120%;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, var(--ag-c, rgba(158,72,141,0.5)) 0%, transparent 68%);
	filter: blur(70px);
	opacity: 0.65;
	z-index: -1;
	pointer-events: none;
}
.eds-cov__frame { position: relative; border: 8px solid #386276; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(27,38,46,0.28); background: #386276; }
.eds-cov__frame img { display: block; width: 100%; height: auto; }

/* ---- Entrance: copy fades up, then the mockup floats up (JS adds .is-in) ---- */
.eds-cov--anim .eds-cov__rev {
	opacity: 0;
	transform: translateY(var(--cov-rise, 40px));
	transition: opacity var(--cov-dur, 800ms) ease, transform var(--cov-dur, 800ms) cubic-bezier(0.16,1,0.3,1);
	transition-delay: calc(var(--o, 0) * var(--cov-stagger, 140ms));
}
.eds-cov--anim .eds-cov__art { transform: translateX(-50%) translateY(var(--cov-rise, 40px)); }
.eds-cov--anim.is-in .eds-cov__rev { opacity: 1; transform: none; }
.eds-cov--anim.is-in .eds-cov__art { opacity: 1; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
	.eds-cov--anim .eds-cov__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-cov--anim .eds-cov__art { transform: translateX(-50%) !important; }
}
body.elementor-editor-active .eds-cov--anim .eds-cov__rev { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .eds-cov--anim .eds-cov__art { transform: translateX(-50%) !important; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
	.eds-cov__content { padding-top: 40px; }
}
@media (max-width: 767px) {
	.eds-cov__title { font-size: 32px; line-height: 1.15; }
	.eds-cov__content { gap: 20px; }
}

/* ============================================================
   FEATURE GRID — centered header, 2x2 icon cards + photo with floating stat
   cards. Mobile: photo on top, cards become a swipeable carousel w/ nav + dots.
   ============================================================ */
.eds-fg { width: 100%; box-sizing: border-box; background-color: #fff; }
.eds-fg__inner { max-width: 1140px; margin: 0 auto; }
.eds-fg__head { text-align: center; margin-bottom: 40px; }
.eds-fg__title { margin: 0 auto; max-width: 760px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 50px; font-weight: 600; line-height: 1.08; letter-spacing: -1.2px; color: #0D0F11; }
.eds-fg__sub { margin: 14px auto 0; max-width: 560px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 16px; line-height: 22px; color: #4B5768; }

.eds-fg__row { display: flex; align-items: stretch; gap: 24px; }
.eds-fg__grid { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eds-fg__card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 24px; background: #F9F9F9; border: 1px solid #E7EAEE; border-radius: 12px; box-sizing: border-box; }
.eds-fg__icon { display: inline-flex; align-items: center; justify-content: center; color: #662756; font-size: 24px; line-height: 1; }
.eds-fg__icon svg { width: 24px; height: 24px; display: block; }
.eds-fg__icon i { font-size: inherit; }
.eds-fg__card-title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.25; color: #0D0F11; }
.eds-fg__card-desc { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: #4B5768; }

/* Media + floating stat cards */
.eds-fg__media { position: relative; flex: 0 0 358px; align-self: stretch; min-height: 400px; }
.eds-fg__img { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; }
.eds-fg .eds-fg__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.eds-fg__stats { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: flex-end; gap: 12px; }
.eds-fg__stat { width: 122.122px; padding: 13.383px 16.729px; border-radius: 8.365px; background: #FFF; box-shadow: 0 4.891px 6.521px 0 rgba(27,38,46,0.09); font-family: 'Golos Text', system-ui, sans-serif; }
.eds-fg__stat > span { display: block; }
.eds-fg__stat > span + span { margin-top: 5.019px; }
.eds-fg__stat-label { font-size: 12px; color: #778393; }
.eds-fg__stat-value { font-size: 22px; font-weight: 700; color: #0D0F11; letter-spacing: -0.01em; }
.eds-fg__stat-delta { font-size: 12px; font-weight: 600; }
.eds-fg__stat--1 .eds-fg__stat-delta { color: #51AC65; }
.eds-fg__stat--2 .eds-fg__stat-delta { color: #E9A23B; }

/* Carousel nav (mobile only) */
.eds-fg__nav-wrap { display: none; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.eds-fg__nav { display: flex; gap: 16px; }
/* Arrow buttons — win over the Elementor kit / theme default button styles;
   colour comes from --fg-nav (set by the Arrow Color control). Outline by
   default; fill only on hover/focus. */
.eds-fg button.eds-fg__arrow {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 48px !important; height: 48px !important; padding: 0 !important;
	border: 1.5px solid var(--fg-nav, #662756) !important; border-radius: 50% !important;
	background: transparent !important; color: var(--fg-nav, #662756) !important;
	cursor: pointer; box-shadow: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.eds-fg button.eds-fg__arrow:hover,
.eds-fg button.eds-fg__arrow:focus { background: var(--fg-nav, #662756) !important; color: #fff !important; }
.eds-fg__arrow svg { width: 22px; height: 22px; }
.eds-fg__dots { display: flex; gap: 6px; }
.eds-fg__dot { width: 7px; height: 7px; border-radius: 50%; background: #CBD2DB; transition: background-color 0.2s ease, width 0.2s ease; }
.eds-fg__dot.is-on { width: 20px; border-radius: 4px; background: #662756; }

/* ---- Entrance: header + cards + media fade up, staggered ---- */
.eds-fg--anim .eds-fg__rev { opacity: 0; transform: translateY(24px); transition: opacity var(--fg-dur, 700ms) ease, transform var(--fg-dur, 700ms) cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--o, 0) * var(--fg-stagger, 110ms)); }
.eds-fg--anim.is-in .eds-fg__rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .eds-fg--anim .eds-fg__rev { opacity: 1 !important; transform: none !important; transition: none !important; } }
body.elementor-editor-active .eds-fg--anim .eds-fg__rev { opacity: 1 !important; transform: none !important; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
	.eds-fg__row { flex-direction: column; }
	.eds-fg__media { order: -1; flex: none; width: 100%; min-height: 360px; }
}
@media (max-width: 767px) {
	.eds-fg__title { font-size: 34px; }
	.eds-fg__media { min-height: 300px; }
	.eds-fg__grid { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.eds-fg__grid::-webkit-scrollbar { display: none; }
	.eds-fg__card { flex: 0 0 82%; scroll-snap-align: center; }
	.eds-fg__nav-wrap { display: flex; }
}

/* ============================================================
   TESTIMONIAL GALLERY — centered quote + attribution, photo strip below.
   Mobile: photos become an autoplaying, swipeable carousel.
   ============================================================ */
.eds-tg { width: 100%; box-sizing: border-box; background-color: #F4F7FB; }
.eds-tg__inner { max-width: 890px; margin: 0 auto 40px; text-align: center; }
.eds-tg__quote { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-size: 40px; font-weight: 600; line-height: 48px; color: #0D0F11; }
.eds-tg__attr { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; text-align: left; }
.eds-tg__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.eds-tg__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eds-tg__meta { display: flex; flex-direction: column; line-height: 1.3; }
.eds-tg__name { font-family: 'Golos Text', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: #0D0F11; }
.eds-tg__role { font-family: 'Golos Text', system-ui, sans-serif; font-size: 13px; color: #4B5768; }

/* Photo strip — even row on desktop */
.eds-tg__strip { display: flex; gap: 20px; max-width: 1440px; margin: 0 auto; }
.eds-tg__photo { flex: 1 1 0; min-width: 0; aspect-ratio: 1.27; border-radius: 12px; overflow: hidden; }
.eds-tg__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Entrance ---- */
.eds-tg--anim .eds-tg__rev { opacity: 0; transform: translateY(24px); transition: opacity var(--tg-dur, 700ms) ease, transform var(--tg-dur, 700ms) cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--o, 0) * var(--tg-stagger, 120ms)); }
.eds-tg--anim.is-in .eds-tg__rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .eds-tg--anim .eds-tg__rev { opacity: 1 !important; transform: none !important; transition: none !important; } }
body.elementor-editor-active .eds-tg--anim .eds-tg__rev { opacity: 1 !important; transform: none !important; }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
	.eds-tg__inner { text-align: left; }
	.eds-tg__attr { display: flex; }
}
@media (max-width: 767px) {
	.eds-tg__quote { font-size: 28px; line-height: 1.2; }
	.eds-tg__strip { gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.eds-tg__strip::-webkit-scrollbar { display: none; }
	.eds-tg__photo { flex: 0 0 calc(50% - 7px); scroll-snap-align: start; }
}

/* ============================================================
   IMAGE CAROUSEL — infinite marquee of team photos. Uniform height,
   proportionate widths (width:auto follows each image's ratio). JS
   (initImageCarousel) clones the set into two identical halves so the
   translateX(-50%) loop is seamless, and sets --icar-dur from the speed.
   ============================================================ */
.eds-icar {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.eds-icar__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: eds-icar-scroll var(--icar-dur, 40s) linear infinite;
}
/* Left→Right just reverses the same right→left keyframe. */
.eds-icar[data-dir="right"] .eds-icar__track { animation-direction: reverse; }
/* Pause on hover (only when enabled). */
.eds-icar[data-pause="1"]:hover .eds-icar__track { animation-play-state: paused; }

.eds-icar__item {
	flex: 0 0 auto;
	display: block;
	margin-right: var(--icar-gap, 16px); /* margin (not flex gap) so the two
	                                        halves stay identical → seamless loop */
	border-radius: var(--icar-radius, 5px);
	overflow: hidden;
	line-height: 0;
	background: #d9d9d9; /* placeholder tint while the photo loads */
}
.eds-icar__img {
	display: block;
	/* !important beats Elementor/Hello's generic image rules (e.g.
	   .elementor-widget-container img { height:auto }) which otherwise win on
	   specificity; the height itself still comes from the control via --icar-h. */
	height: var(--icar-h, 216px) !important;
	width: auto !important;   /* proportionate width from the image's own ratio */
	max-width: none !important;
	object-fit: cover;
	border-radius: inherit;
}

/* Optional soft edge fade (mask). 0px = off. */
.eds-icar {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--icar-fade, 0px), #000 calc(100% - var(--icar-fade, 0px)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--icar-fade, 0px), #000 calc(100% - var(--icar-fade, 0px)), transparent 100%);
}

@keyframes eds-icar-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Reduced motion: stop the loop, let the row scroll manually instead. */
@media (prefers-reduced-motion: reduce) {
	.eds-icar__track { animation: none; }
	.eds-icar { overflow-x: auto; scrollbar-width: none; }
	.eds-icar::-webkit-scrollbar { display: none; }
}
/* Editor: hold the marquee still so it can be inspected/designed. */
body.elementor-editor-active .eds-icar__track { animation-play-state: paused; }

/* ============================================================
   VALUE CARDS — centered heading + a row of icon cards. Desktop: 4-up wrap
   with a scroll-in fade+zoom reveal (Problem Cards pattern). Mobile (<=1180):
   swipeable card slider with optional prev/next nav (Problem Cards arrows).
   ============================================================ */
.eds-vc {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 80px 24px;
	/* Base white with a soft tint fading in at the top (per Figma). */
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 47%, var(--vc-glow, rgba(116, 183, 236, 0.20)) 103%), var(--vc-bg, #FFFFFF);
}
.eds-vc__inner {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}
.eds-vc__title {
	margin: 0 auto;
	text-align: center;
	font-family: 'Golos Text', system-ui, sans-serif;
}
.eds-vc__viewport { width: 100%; }
.eds-vc__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vc-gap, 24px);
}
.eds-vc__card {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	flex: 0 0 var(--vc-card-w, 262px);
	max-width: 100%;
	min-height: 251px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 24px;
	border: 1px solid #E7EAEE;
	border-radius: 12px;
	background-color: var(--vc-card-bg, #F9F9F9);
}
/* Hover: a soft gradient blooms in the top-right corner (per Figma annotation). */
.eds-vc__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: radial-gradient( 130% 130% at 100% 0%, var(--vc-hover-1, rgba(116, 183, 236, 0.28)) 0%, var(--vc-hover-2, rgba(158, 72, 141, 0.12)) 34%, transparent 62% );
	pointer-events: none;
}
.eds-vc__card:hover::before { opacity: 1; }
.eds-vc__icon,
.eds-vc__body { position: relative; z-index: 1; }
.eds-vc__icon { display: inline-flex; align-items: center; color: #662756; line-height: 0; }
.eds-vc__icon svg { width: var(--vc-icon-size, 30px); height: var(--vc-icon-size, 30px); fill: currentColor; }
.eds-vc__icon i { font-size: var(--vc-icon-size, 30px); }
.eds-vc__body { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.eds-vc__card-title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-vc__card-desc { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }

/* Entrance — same reveal as Problem Cards: fade up (+ slight zoom on cards)
   when the section scrolls in; JS adds .is-in, CSS owns the transition; --o
   staggers each item. */
.eds-vc--anim .eds-vc__rev {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--o, 0) * 110ms);
}
.eds-vc--anim .eds-vc__card.eds-vc__rev { transform: translateY(24px) scale(0.96); }
.eds-vc--anim .eds-vc__rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-vc--anim .eds-vc__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Mobile slider nav — hidden on desktop (mirrors Problem Cards). */
.eds-vc__nav { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.eds-vc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid #662756;
	background: transparent;
	color: #662756;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.eds-vc__arrow svg { width: 42%; height: 42%; }
.eds-vc__arrow--next { background: #662756; border-color: #662756; color: #fff; }
.eds-vc__arrow:disabled { opacity: 0.35; cursor: default; }

/* Mobile (<=1180): the cards row becomes a swipeable, snapping slider. */
@media (max-width: 1180px) {
	.eds-vc__cards {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.eds-vc__cards::-webkit-scrollbar { display: none; }
	.eds-vc__card { scroll-snap-align: start; }
	.eds-vc.is-nav .eds-vc__nav { display: flex; }
}

/* Editor: cards at rest (reveal + hover only run on the front end). */
body.elementor-editor-active .eds-vc__rev { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   TEAM GRID — "Meet the people behind the platform". Photo cards; on hover a
   white panel grows upward from the name bar to pull the bio into view. Load
   More reveals members beyond the initial count.
   ============================================================ */
.eds-team { position: relative; width: 100%; box-sizing: border-box; padding: 80px 24px; }
.eds-team__inner {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.eds-team__title { margin: 0; text-align: center; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	width: 100%;
	justify-items: center;
}

.eds-team__card {
	position: relative;
	width: 100%;
	max-width: 300px;
	height: calc(var(--team-photo-h, 280px) + var(--team-bar-h, 72px));
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.eds-team__photo { position: absolute; top: 0; left: 0; right: 0; height: var(--team-photo-h, 280px); }
.eds-team__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Bio panel anchored to the bottom: the name bar shows by default (its height
   follows the content, so a wrapped title is never clipped), and the bio
   reveals on hover — the panel grows UPWARD (bottom stays pinned). The bio uses
   a 0fr→1fr grid-rows animation so it works with any amount of text. */
.eds-team__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
}
.eds-team__reveal {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.eds-team__reveal-in { overflow: hidden; min-height: 0; }
.eds-team__card:hover .eds-team__reveal,
.eds-team__card:focus-within .eds-team__reveal { grid-template-rows: 1fr; }

.eds-team__head { position: relative; padding: 12px; box-sizing: border-box; min-height: var(--team-bar-h, 72px); }
.eds-team__meta { display: flex; flex-direction: column; gap: 4px; padding-right: 28px; }
.eds-team__name { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 24px; color: #0D0F11; }
.eds-team__role {
	font-family: 'Golos Text', system-ui, sans-serif;
	font-weight: 400;
	/* Slightly smaller + tight leading so a job title fits on one line where it
	   can, and wraps cleanly (no ellipsis) when it can't. */
	font-size: 13px;
	line-height: 1.25;
	letter-spacing: 0.14px;
	color: #4B5768;
}
.eds-team__li { position: absolute; top: 14px; right: 12px; width: 18px; height: 18px; display: inline-flex; color: #386276; transition: opacity 0.2s ease; }
.eds-team__li svg { display: block; width: 100%; height: 100%; }
.eds-team__li:hover { opacity: 0.7; }
.eds-team__divider { display: block; height: 1px; margin: 2px 12px 12px; background: #D9DDE3; }
.eds-team__bio { margin: 0; padding: 0 12px 16px; font-family: 'Golos Text', system-ui, sans-serif; font-size: 13px; line-height: 1.45; color: #4B5768; }

/* Card entrance — fade up, staggered (revealOnScroll adds .is-in). */
.eds-team--anim .eds-team__rev {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--o, 0) * 90ms);
}
.eds-team--anim .eds-team__rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-team--anim .eds-team__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-team__reveal { transition: none; }
}

/* Load More is MOBILE-ONLY — desktop/tablet show every member. The button and
   the card-hiding are both gated to the mobile breakpoint below. */
.eds-team__more-wrap { display: none; justify-content: center; }
@media (max-width: 767px) {
	.eds-team__card.is-hidden { display: none; }
	.eds-team__more-wrap { display: flex; }
}

/* Load More button (per Figma: outlined pill, fills dark on hover). */
.eds-team__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border: 1px solid #64748B;
	border-radius: 101px;
	background: transparent;
	color: #0F191F;
	font-family: 'Golos Text', system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.eds-team__more:hover { background-color: #0F191F; border-color: #0F191F; color: #fff; }

/* Editor: show every member at rest (Load More + reveal + hover run only on
   the front end) so the whole repeater is editable. */
body.elementor-editor-active .eds-team__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
body.elementor-editor-active .eds-team__card.is-hidden { display: block !important; }
body.elementor-editor-active .eds-team__more-wrap { display: none !important; }

/* ============================================================
   DONUT STATS — a row of donut charts (center amount + caption). Each ring
   segment fills in on scroll via an animated stroke-dasharray (progress-fill).
   ============================================================ */
.eds-dstat { width: 100%; box-sizing: border-box; }
.eds-dstat__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	justify-items: center;
	align-items: start;
}
.eds-dstat__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}
.eds-donut {
	position: relative;
	width: var(--dstat-size, 260px);
	max-width: 100%;
	aspect-ratio: 1 / 1;
}
.eds-donut__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.eds-donut__track { stroke: var(--dstat-track, #EEF0F2); stroke-width: var(--dstat-sw, 4); }
.eds-donut__seg { stroke-width: var(--dstat-sw, 4); stroke-linecap: butt; }
.eds-donut__amount {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: 'Golos Text', system-ui, sans-serif;
	font-weight: 700;
	color: var(--dstat-amt, #45535F);
	pointer-events: none;
}
.eds-dstat__label {
	text-align: center;
	font-family: 'Golos Text', system-ui, sans-serif;
	color: var(--dstat-lbl, #9AA3B0);
}

/* Progress-fill: segments start empty and grow to their value when the section
   scrolls into view (revealOnScroll adds .is-in). Item fade-up is staggered. */
.eds-dstat--anim .eds-donut__seg {
	stroke-dasharray: 0 100;
	transition: stroke-dasharray var(--dstat-dur, 1100ms) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--o, 0) * var(--dstat-stagger, 160ms) + 150ms);
}
.eds-dstat--anim.is-in .eds-donut__seg { stroke-dasharray: var(--val, 0) calc(100 - var(--val, 0)); }
.eds-dstat--anim .eds-dstat__rev {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--o, 0) * var(--dstat-stagger, 160ms));
}
.eds-dstat--anim.is-in .eds-dstat__rev { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.eds-dstat--anim .eds-donut__seg { stroke-dasharray: var(--val, 0) calc(100 - var(--val, 0)) !important; transition: none; }
	.eds-dstat--anim .eds-dstat__rev { opacity: 1 !important; transform: none !important; transition: none; }
}
/* Editor: show donuts filled + captions visible at rest. */
body.elementor-editor-active .eds-dstat--anim .eds-donut__seg { stroke-dasharray: var(--val, 0) calc(100 - var(--val, 0)) !important; }
body.elementor-editor-active .eds-dstat--anim .eds-dstat__rev { opacity: 1 !important; transform: none !important; }

/* ============================================================
   FADE CAROUSEL — full-width crossfade slideshow (JS: initFadeCarousel).
   Slides stack absolutely; only .is-active is opaque, crossfading via opacity.
   ============================================================ */
.eds-fadecar { position: relative; width: 100%; box-sizing: border-box; }
.eds-fadecar--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.eds-fadecar__viewport {
	position: relative;
	width: 100%;
	height: var(--fc-h, 520px);
	overflow: hidden;
	border-radius: var(--fc-radius, 0);
}
.eds-fadecar__track { position: absolute; inset: 0; }
.eds-fadecar__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--fc-dur, 800ms) ease;
	will-change: opacity;
	display: block;
}
.eds-fadecar__slide.is-active { opacity: 1; }
.eds-fadecar__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Arrows */
.eds-fadecar__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(13, 15, 17, 0.35);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.eds-fadecar__arrow:hover { background: rgba(13, 15, 17, 0.6); }
.eds-fadecar__arrow svg { width: 45%; height: 45%; }
.eds-fadecar__arrow--prev { left: 20px; }
.eds-fadecar__arrow--next { right: 20px; }

/* Dots */
.eds-fadecar__dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.eds-fadecar--full .eds-fadecar__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin-top: 0;
	z-index: 3;
}
.eds-fadecar__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.eds-fadecar__dot.is-active { background: #fff; transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
	.eds-fadecar__slide { transition: none; }
}
@media (max-width: 767px) {
	.eds-fadecar__arrow--prev { left: 10px; }
	.eds-fadecar__arrow--next { right: 10px; }
}

/* ============================================================
   FEATURE CARDS (eds_feature_cards) — Figma 7910-7224
   Grid of feature cards, each with a coded animated graphic + a top-right
   hover gradient. Grid → carousel at the chosen breakpoint. Graphics + their
   animations are added per-card in later phases; PHASE 1 = chrome/hover/
   reveal/carousel with placeholder graphics.
   ============================================================ */
.eds-fc {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.eds-fc__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: none; /* follow the parent container's full width */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.eds-fc__head { display: flex; flex-direction: column; gap: 12px; }
.eds-fc__heading { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-fc__subheading { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; max-width: 640px; }

.eds-fc__viewport { width: 100%; }
.eds-fc__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fc-gap, 24px);
	justify-items: center; /* a narrower card (Card Max Width) centers in its column */
}
.eds-fc__card { width: 100%; }
.eds-fc__card {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	min-height: 375px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border: 1px solid #E7EAEE;
	border-radius: 16px;
	background-color: var(--fc-card-bg, #FFFFFF);
	box-shadow: var(--fc-shadow, 0 12px 30px rgba(27, 38, 46, 0.06));
}
/* A soft gradient always shows in the top-right corner (per Figma). Colors are
   per-card (--fc-hover-1 / --fc-hover-2 set on each repeater item). */
.eds-fc__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 1;
	background: radial-gradient( 120% 110% at 100% 0%, var(--fc-hover-1, rgba(102, 39, 86, 0.16)) 0%, var(--fc-hover-2, rgba(116, 183, 236, 0.10)) 34%, transparent 66% );
	pointer-events: none;
	z-index: 0;
}
.eds-fc__text,
.eds-fc__graphic { position: relative; z-index: 1; }
.eds-fc__text { display: flex; flex-direction: column; gap: 12px; }
.eds-fc__card-title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
.eds-fc__card-desc { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; }
/* Graphic area sits below the text and fills the remaining card height. */
.eds-fc__graphic {
	margin-top: auto;
	min-height: 189px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* PHASE 1 placeholder — a dashed frame labelled with the card type. Removed as
   each card's real graphic lands. */
.eds-fc__placeholder {
	width: 100%;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	border: 1.5px dashed #CBD2DB;
	border-radius: 12px;
	color: #94A0AF;
	font: 500 13px/1.4 'Golos Text', system-ui, sans-serif;
}

/* Entrance — fade up (+ slight zoom on cards), staggered via --o. JS adds
   .is-in; CSS owns the transition (same pattern as Value Cards). */
.eds-fc--anim .eds-fc__rev {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--o, 0) * 110ms);
}
.eds-fc--anim .eds-fc__card.eds-fc__rev { transform: translateY(24px) scale(0.97); }
.eds-fc--anim .eds-fc__rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-fc--anim .eds-fc__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Carousel nav — hidden until the grid collapses to a carousel. */
.eds-fc__nav { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.eds-fc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid #662756;
	background: transparent;
	color: #662756;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.eds-fc__arrow svg { width: 42%; height: 42%; }
.eds-fc__arrow--next { background: #662756; border-color: #662756; color: #fff; }
.eds-fc__arrow:disabled { opacity: 0.35; cursor: default; }

/* Grid → carousel. Two variants by chosen breakpoint. The shared rules: */
.eds-fc__grid.is-carousel,
.eds-fc--carousel .eds-fc__grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	grid-template-columns: none;
}
.eds-fc--carousel .eds-fc__grid::-webkit-scrollbar { display: none; }
.eds-fc--carousel .eds-fc__card { flex: 0 0 100%; scroll-snap-align: center; }
.eds-fc--carousel.is-nav .eds-fc__nav { display: flex; }

@media (max-width: 1180px) {
	.eds-fc--bp1180 .eds-fc__grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		grid-template-columns: none;
	}
	.eds-fc--bp1180 .eds-fc__grid::-webkit-scrollbar { display: none; }
	.eds-fc--bp1180 .eds-fc__card { flex: 0 0 100%; scroll-snap-align: center; }
	.eds-fc--bp1180.is-nav .eds-fc__nav { display: flex; }
}
@media (max-width: 767px) {
	.eds-fc--bp767 .eds-fc__grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		grid-template-columns: none;
	}
	.eds-fc--bp767 .eds-fc__grid::-webkit-scrollbar { display: none; }
	.eds-fc--bp767 .eds-fc__card { flex: 0 0 100%; scroll-snap-align: center; }
	.eds-fc--bp767.is-nav .eds-fc__nav { display: flex; }
}

/* Editor: cards at rest (reveal + hover only run on the front end). */
body.elementor-editor-active .eds-fc__rev { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- Card 1: Real-time visibility — approval flow ------------------------
   Fixed 293×150 composition centered in the graphic area (matches Figma; does
   not stretch on wide cards). Chips positioned at the connector's side-midpoints
   by %, sized in cqw so the whole thing scales down cleanly on narrow cards. */
.eds-fc__flow {
	position: relative;
	width: 100%;
	max-width: 293px;
	margin: 0 auto;
	aspect-ratio: 293 / 150;
	container-type: inline-size;
}
.eds-fc__flow-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eds-fc__flow-path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s ease 0.1s; }
.eds-fc__flow-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.95em;
	background: #fff;
	border: 1px solid #EDEFF2;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
	font: 500 clamp(9px, 3.75cqw, 11px)/1 'Golos Text', system-ui, sans-serif;
	color: #0D0F11;
	white-space: nowrap;
	transform: translate(-50%, -50%) scale(0.85);
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--d, 0ms);
}
.eds-fc__flow-label { display: inline-block; }
.eds-fc__flow-ic { width: 1.05em; height: 1.05em; flex: 0 0 auto; color: var(--fc-flow-check, #14AE5C); }
.eds-fc__flow-chip--top    { left: 50%; top: 11%; }
.eds-fc__flow-chip--left   { left: 6%;  top: 52%; }
.eds-fc__flow-chip--right  { left: 94%; top: 52%; }
.eds-fc__flow-chip--bottom { left: 50%; top: 93%; }
.eds-fc__flow-chip--center {
	left: 50%;
	top: 52%;
	z-index: 2;
	padding: 0.55em 1em;
	font-size: clamp(11px, 4.4cqw, 13px);
	font-weight: 600;
	border-color: #E4E7EC; /* inner line */
	/* Double line + solid gap + glow, all as stacked outset shadows (painted
	   behind the pill, so the white face and inner border stay crisp):
	   1) solid white gap  2) outer gray line  3) depth  4) soft pink glow. */
	box-shadow:
		0 0 0 6px #fff,
		0 0 0 7px #E4E7EC,
		0 4px 12px rgba(16, 24, 40, 0.06),
		0 0 24px 12px var(--fc-flow-glow, rgba(191, 91, 160, 0.45));
}
.eds-fc__flow-chip--center .eds-fc__flow-ic { color: var(--fc-flow-hl, #662756); }
/* Reveal — driven by .is-in on the card (revealOnScroll). */
.eds-fc__card.is-in .eds-fc__flow-chip { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.eds-fc__card.is-in .eds-fc__flow-path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
	.eds-fc__flow-chip { opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none !important; }
	.eds-fc__flow-path { stroke-dashoffset: 0 !important; transition: none !important; }
}
/* Editor: show the finished graphic at rest. */
body.elementor-editor-active .eds-fc__flow-chip { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
body.elementor-editor-active .eds-fc__flow-path { stroke-dashoffset: 0 !important; }

/* ---- Card 2: Structured workflows — donut + caption -----------------------
   Reuses the shared .eds-donut* SVG markup. Same fill technique as Donut Stats
   (stroke-dasharray grows 0 → value), but keyed to the CARD's .is-in reveal.
   fc-scoped vars keep sizing/colors independent of the Donut Stats widget. */
.eds-fc__donut { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.eds-fc__graphic--donut .eds-donut { width: var(--fc-donut-size, 168px); max-width: 100%; aspect-ratio: 1 / 1; }
.eds-fc__graphic--donut .eds-donut__track { stroke: var(--fc-donut-track, #EEF0F2); stroke-width: var(--fc-donut-sw, 3.4); }
.eds-fc__graphic--donut .eds-donut__seg { stroke-width: var(--fc-donut-sw, 3.4); stroke-linecap: butt; }
.eds-fc__donut-cap { text-align: center; font-family: 'Golos Text', system-ui, sans-serif; color: #9AA3B0; }

/* Progress-fill: segments start empty and grow to value on card reveal. */
.eds-fc__graphic--donut .eds-donut__seg {
	stroke-dasharray: 0 100;
	transition: stroke-dasharray var(--fc-donut-dur, 1100ms) cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.15s;
}
.eds-fc__card.is-in .eds-donut__seg { stroke-dasharray: var(--val, 0) calc(100 - var(--val, 0)); }
@media (prefers-reduced-motion: reduce) {
	.eds-fc__graphic--donut .eds-donut__seg { stroke-dasharray: var(--val, 0) calc(100 - var(--val, 0)) !important; transition: none !important; }
}
/* Editor: donut filled at rest. */
body.elementor-editor-active .eds-fc__graphic--donut .eds-donut__seg { stroke-dasharray: var(--val, 0) calc(100 - var(--val, 0)) !important; }

/* ---- Card 3: Financial reporting — alert pills ----------------------------
   Three status pills (info/error/warning tones) stacked and centered; each
   fades up in a stagger on card reveal. Sized in cqw so they shrink on the
   narrow carousel cards. */
.eds-fc__alerts {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	container-type: inline-size;
}
.eds-fc__alert {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	max-width: 100%;
	padding: 0.6em 1.1em;
	border: 1px solid;
	border-radius: 999px;
	font: 600 clamp(9px, 3.4cqw, 12px)/1.1 'Golos Text', system-ui, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	/* Fade-up stagger — driven by .is-in on the card; --d set per pill. */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--d, 0ms);
}
.eds-fc__alert-ic { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.eds-fc__alert--info    { background: var(--fc-al-info-bg, #F1F8FD);  border-color: var(--fc-al-info-bd, #74B7EC);              color: var(--fc-al-info-tx, #3F87C4); }
.eds-fc__alert--error   { background: var(--fc-al-error-bg, #FFE6E3); border-color: var(--fc-al-error-bd, rgba(141, 16, 0, 0.35)); color: var(--fc-al-error-tx, #8D1000); }
.eds-fc__alert--warning { background: var(--fc-al-warn-bg, #FEF5E7);  border-color: var(--fc-al-warn-bd, rgba(247, 173, 48, 0.6));  color: var(--fc-al-warn-tx, #5C3B04); }
.eds-fc__card.is-in .eds-fc__alert { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-fc__alert { opacity: 1 !important; transform: none !important; transition: none !important; }
}
body.elementor-editor-active .eds-fc__alert { opacity: 1 !important; transform: none !important; }

/* ---- Card 4: Budget alignment — floating card + segmented bar -------------
   Inner rows fade up in a stagger; the 3-segment bar fills left→right via a
   clip-path sweep (labels stay crisp, no distortion); numbers count up (JS).
   cqw sizing keeps it fitting on narrow carousel cards. */
.eds-fc__bud { position: relative; width: 100%; max-width: var(--fc-bud-w, 293px); margin: 0 auto; padding-top: 18px; container-type: inline-size; }
.eds-fc__bud-stack { position: absolute; left: 50%; transform: translateX(-50%); height: 42px; border-radius: 12px; z-index: 0; }
.eds-fc__bud-stack--1 { top: 8px; width: 92%; background: var(--fc-bud-stack1, #E9ECF1); }
.eds-fc__bud-stack--2 { top: 0; width: 82%; background: var(--fc-bud-stack2, #F1F3F6); }
.eds-fc__bud-card {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--fc-bud-bg, #fff);
	border: 1px solid var(--fc-bud-bd, #EDEFF2);
	border-radius: var(--fc-bud-radius, 12px);
	box-shadow: var(--fc-bud-shadow, 0 10px 26px rgba(27, 38, 46, 0.08));
}
.eds-fc__bud-cat { color: var(--fc-bud-cat, #4B5768); font: 500 clamp(11px, 4cqw, 13px)/1.2 'Golos Text', system-ui, sans-serif; }
.eds-fc__bud-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eds-fc__bud-code { background: var(--fc-bud-code-bg, #EAF1FF); color: var(--fc-bud-code-tx, #3D5AF1); font: 600 clamp(11px, 4cqw, 13px)/1 'Golos Text', system-ui, sans-serif; padding: 5px 12px; border-radius: 6px; white-space: nowrap; }
.eds-fc__bud-total { color: var(--fc-bud-total, #0D0F11); font: 500 clamp(12px, 4.5cqw, 14px)/1 'Golos Text', system-ui, sans-serif; white-space: nowrap; }
.eds-fc__bud-total b { font-weight: 700; }
.eds-fc__bud-bar { position: relative; width: 100%; height: var(--fc-bud-bar-h, 18px); border-radius: 999px; overflow: hidden; background: var(--fc-bud-track, #EEF0F2); }
.eds-fc__bud-segs {
	position: absolute;
	inset: 0;
	display: flex;
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--fc-bud-fill-dur, 1s) cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.eds-fc__card.is-in .eds-fc__bud-segs { clip-path: inset(0 0 0 0); }
.eds-fc__bud-seg {
	flex: 0 0 var(--w, 33%);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow: hidden;
	color: var(--fc-bud-seg-tx, #fff);
	font: 600 clamp(8px, 3cqw, 10px)/1 'Golos Text', system-ui, sans-serif;
	white-space: nowrap;
}
/* Staggered fade-up of the card's rows (and the stacked cards behind). */
.eds-fc__bud-rev { opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); }
.eds-fc__card.is-in .eds-fc__bud-rev { opacity: 1; transform: none; }
/* Stacks must keep their translateX(-50%) centering while fading. */
.eds-fc__bud-stack.eds-fc__bud-rev { transform: translate(-50%, 12px); }
.eds-fc__card.is-in .eds-fc__bud-stack.eds-fc__bud-rev { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
	.eds-fc__bud-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-fc__bud-stack.eds-fc__bud-rev { transform: translate(-50%, 0) !important; }
	.eds-fc__bud-segs { clip-path: inset(0 0 0 0) !important; transition: none !important; }
}
body.elementor-editor-active .eds-fc__bud-rev { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .eds-fc__bud-stack.eds-fc__bud-rev { transform: translate(-50%, 0) !important; }
body.elementor-editor-active .eds-fc__bud-segs { clip-path: inset(0 0 0 0) !important; }

/* ---- Card 5: Procurement control — spend-limit card + faded back card -----
   Rows stagger in; the back "Suspended" card peeks below at lower opacity; the
   bar fills to its % (30) on reveal; amounts count up (JS). cqw sizing. */
.eds-fc__spend { position: relative; width: 100%; max-width: var(--fc-sp-w, 293px); margin: 0 auto; padding-bottom: 26px; container-type: inline-size; }
.eds-fc__spend-card {
	position: relative;
	z-index: 2;
	overflow: hidden;
	border: 1px solid var(--fc-sp-bd, #EDEFF2);
	border-radius: var(--fc-sp-radius, 12px);
	background: var(--fc-sp-bg, #fff);
	box-shadow: var(--fc-sp-shadow, 0 10px 26px rgba(27, 38, 46, 0.08));
}
.eds-fc__spend-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 14px;
	background: var(--fc-sp-head-bg, #F1F3F6);
}
.eds-fc__spend-title,
.eds-fc__spend-statuslabel { font: 600 clamp(10px, 4cqw, 12px)/1 'Golos Text', system-ui, sans-serif; color: var(--fc-sp-label, #6B7280); }
.eds-fc__spend-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.eds-fc__spend-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.eds-fc__spend-amts { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.eds-fc__spend-amt { font: 700 clamp(11px, 4.4cqw, 13px)/1 'Golos Text', system-ui, sans-serif; color: var(--fc-sp-amt, #0D0F11); white-space: nowrap; }
.eds-fc__spend-limit { font: 700 clamp(11px, 4.4cqw, 13px)/1 'Golos Text', system-ui, sans-serif; color: var(--fc-sp-amt, #0D0F11); white-space: nowrap; }
.eds-fc__spend-mo { font-weight: 500; color: var(--fc-sp-mo, #6B7280); }
.eds-fc__spend-bar { position: relative; width: 100%; height: var(--fc-sp-bar-h, 8px); border-radius: 999px; overflow: hidden; background: var(--fc-sp-track, #E7EAEE); }
.eds-fc__spend-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--fc-sp-fill, #3D5AF1); transition: width var(--fc-sp-dur, 1s) cubic-bezier(0.16, 1, 0.3, 1) 0.4s; }
.eds-fc__card.is-in .eds-fc__spend-fill { width: var(--p, 30%); }
.eds-fc__spend-scale { display: flex; justify-content: space-between; font: 500 clamp(8px, 3.2cqw, 10px)/1 'Golos Text', system-ui, sans-serif; color: var(--fc-sp-scale, #9AA3B0); }
.eds-fc__spend-status { flex: 0 0 auto; align-self: center; color: var(--fc-sp-status-tx, #14AE5C); background: var(--fc-sp-status-bg, rgba(20, 174, 92, 0.10)); font: 600 clamp(10px, 4cqw, 12px)/1 'Golos Text', system-ui, sans-serif; padding: 5px 12px; border-radius: 8px; white-space: nowrap; }

/* Faded back card, peeking below the front card. */
.eds-fc__spend-back {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 1;
	width: 88%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid #EEF0F2;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(27, 38, 46, 0.06);
	opacity: 0;
	transform: translate(-50%, 14px);
	transition: opacity 0.55s ease 0.1s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.eds-fc__card.is-in .eds-fc__spend-back { opacity: var(--fc-sp-back-op, 0.45); transform: translate(-50%, 0); }
.eds-fc__spend-backbar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--fc-sp-back-track, #FCE9C7); overflow: hidden; }
.eds-fc__spend-backbar span { display: block; height: 100%; width: var(--bp, 55%); border-radius: 999px; background: var(--fc-sp-back-c, #F5A623); }
.eds-fc__spend-backstatus { flex: 0 0 auto; font: 600 clamp(9px, 3.6cqw, 11px)/1 'Golos Text', system-ui, sans-serif; color: var(--fc-sp-back-c, #E8A33D); }

/* Staggered fade-up of the front rows. */
.eds-fc__spend-rev { opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); }
.eds-fc__card.is-in .eds-fc__spend-rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-fc__spend-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
	.eds-fc__spend-fill { width: var(--p, 30%) !important; transition: none !important; }
	.eds-fc__spend-back { opacity: var(--fc-sp-back-op, 0.45) !important; transform: translate(-50%, 0) !important; transition: none !important; }
}
body.elementor-editor-active .eds-fc__spend-rev { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .eds-fc__spend-fill { width: var(--p, 30%) !important; }
body.elementor-editor-active .eds-fc__spend-back { opacity: var(--fc-sp-back-op, 0.45) !important; transform: translate(-50%, 0) !important; }

/* ---- Card 6: Spend Management — receipt verification panel (Figma 9394:5181)
   Fills the graphic area. Simple entrance rides the card's fade-up; only the
   amount counts up. */
.eds-fc__rcpt {
	display: flex;
	gap: 16px;
	width: 100%;
	padding: var(--fc-rc-pad, 0);
	box-sizing: border-box;
	border-radius: var(--fc-rc-radius, 0);
	background: var(--fc-rc-bg, transparent);
	box-shadow: var(--fc-rc-shadow, none);
}
/* Receipt thumbnail */
.eds-fc__rcpt-thumb {
	flex: 0 0 auto;
	width: 72px;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 10px;
	border-radius: 8px;
	background: var(--fc-rc-thumb-bg, #F4F6F8);
}
.eds-fc__rcpt-tline { height: 4px; border-radius: 2px; background: var(--fc-rc-line, #DCE0E6); }
.eds-fc__rcpt-tline:first-child { height: 5px; }
.eds-fc__rcpt-jag {
	margin-top: 2px;
	height: 5px;
	background:
		linear-gradient(-45deg, transparent 50%, var(--fc-rc-line, #DCE0E6) 0) 0 0 / 8px 5px repeat-x,
		linear-gradient(45deg, transparent 50%, var(--fc-rc-line, #DCE0E6) 0) 0 0 / 8px 5px repeat-x;
}
/* Body */
.eds-fc__rcpt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.eds-fc__rcpt-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eds-fc__rcpt-name { font: 400 12px/1.2 'Golos Text', system-ui, sans-serif; color: var(--fc-rc-file, #4B5768); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eds-fc__rcpt-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--fc-rc-badge-bg, #EDFDF4);
	color: var(--fc-rc-badge-tx, #084625);
	font: 600 12px/1 'Golos Text', system-ui, sans-serif;
	white-space: nowrap;
}
.eds-fc__rcpt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fc-rc-dot, #14AE5C); }
.eds-fc__rcpt-rows { display: flex; flex-direction: column; }
.eds-fc__rcpt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.eds-fc__rcpt-row + .eds-fc__rcpt-row { border-top: 1px solid var(--fc-rc-divider, #EEF0F3); }
.eds-fc__rcpt-lbl { font: 400 12px/1.2 'Golos Text', system-ui, sans-serif; color: var(--fc-rc-lbl, #4B5768); }
.eds-fc__rcpt-val { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.2 'Golos Text', system-ui, sans-serif; color: var(--fc-rc-val, #0D0F11); white-space: nowrap; }
.eds-fc__rcpt-val .eds-fc__flow-ic { width: 16px; height: 16px; color: var(--fc-rc-check, #14AE5C); }
.eds-fc__rcpt-chip {
	align-self: flex-start;
	margin-top: 2px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--fc-rc-chip-bg, #E8F3FC);
	color: var(--fc-rc-chip-tx, #0E5186);
	font: 500 10px/1.3 'Golos Text', system-ui, sans-serif;
	white-space: nowrap;
}

/* ---- CTA Stack: video lightbox (mirrors the Hero lightbox) ---------------- */
.eds-ctas__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	background: var(--ctas-lb-bg, rgba(15, 25, 31, 0.88));
	transition: opacity 0.3s ease;
}
.eds-ctas__lightbox.is-open { display: flex; opacity: 1; }
.eds-ctas__lightbox-backdrop { position: absolute; inset: 0; }
.eds-ctas__lightbox-inner { position: relative; width: 100%; max-width: var(--ctas-lb-max, 900px); z-index: 1; }
.eds-ctas__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.eds-ctas__video iframe,
.eds-ctas__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eds-ctas__lightbox-close,
.eds-ctas__lightbox-close:hover,
.eds-ctas__lightbox-close:focus {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Loop animation (Card Flow, Donut Stats): while replaying, transitions are
   momentarily suppressed so the graphic snaps back to its start instead of
   rewinding, then animates in again (JS toggles .is-loop-reset + .is-in). */
.is-loop-reset,
.is-loop-reset * { transition: none !important; }

/* ============================================================
   FUND & GRANT MANAGEMENT (eds_fund_grants) — Figma 9430-10448
   Card + inner fund panel with progress bars + status pill. Bars fill and
   currency values count up on scroll-in (initFundGrants).
   ============================================================ */
.eds-fgm { display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; }
.eds-fgm__card {
	box-sizing: border-box;
	width: 100%;
	max-width: 457px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 32px 32px;
	background: #fff;
	border-radius: 20px;
}
.eds-fgm__head { display: flex; flex-direction: column; gap: 12px; }
.eds-fgm__title { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-weight: 600; font-size: 24px; line-height: 30px; color: #0D0F11; letter-spacing: -0.02em; }
.eds-fgm__desc { margin: 0; font-family: 'Golos Text', system-ui, sans-serif; font-weight: 400; font-size: 18px; line-height: 24px; color: #4B5768; }

.eds-fgm__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px;
	border: 1px solid #EEF0F3;
	border-radius: 12px;
	background: #F9FAFB;
}
.eds-fgm__row { display: flex; flex-direction: column; gap: 8px; }
.eds-fgm__labels,
.eds-fgm__sublabels { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.eds-fgm__sublabels { margin-top: -2px; }
.eds-fgm__name,
.eds-fgm__value { font-family: 'Roboto', system-ui, sans-serif; font-weight: 600; font-size: 14px; line-height: 16px; color: #0D0F11; }
.eds-fgm__value { white-space: nowrap; }
.eds-fgm__sub { font-family: 'Roboto', system-ui, sans-serif; font-weight: 400; font-size: 12px; line-height: 14px; color: #4B5768; white-space: nowrap; }

.eds-fgm__bar { position: relative; width: 100%; height: var(--fgm-bar-h, 6px); border-radius: 99px; overflow: hidden; background: var(--fgm-track, #E7EAEE); }
.eds-fgm__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: #1787E0;
	transition: width var(--fgm-fill-dur, 1.1s) cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.eds-fgm--anim.is-in .eds-fgm__bar-fill { width: var(--fgm-p, 0%); }

.eds-fgm__pill {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 99px;
	background: #EDFDF4;
	color: #14AE5C;
	font-family: 'Golos Text', system-ui, sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
	.eds-fgm__bar-fill { transition: none !important; }
}
/* Editor: show bars filled at rest (JS may not run in the editor). */
body.elementor-editor-active .eds-fgm__bar-fill { width: var(--fgm-p, 0%); }

/* ============================================================
   APPROVALS (eds_approvals) — Figma 9431-29187
   Header + color-toned approval-step cards. Fills the parent's width; if the
   parent constrains height, the content bleeds off the bottom (clipped) so the
   full width is always kept. Cards slide up in a stagger on scroll-in.
   ============================================================ */
/* Fill the parent's width AND height; overflow clips the bottom when the parent
   is shorter than the content. When the parent is auto-height, height:100%
   resolves to content height, so nothing is clipped. */
.elementor-widget-eds_approvals,
.elementor-widget-eds_approvals > .elementor-widget-container { height: 100%; }
.eds-appr { width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; font-family: 'Roboto', system-ui, sans-serif; font-size: var(--appr-base, 15px); }

.eds-appr__head { display: flex; align-items: center; gap: 1.07em; padding: 0.8em; flex: 0 0 auto; }
.eds-appr__head-ic { flex: 0 0 auto; width: 3.6em; height: 3.6em; border-radius: 50%; background: #E8F3FC; color: #1787E0; display: inline-flex; align-items: center; justify-content: center; }
.eds-appr__head-ic svg { width: 1.6em; height: 1.6em; }
.eds-appr__head-ic img { width: 1.6em; height: 1.6em; object-fit: contain; }
.eds-appr__title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.55em; font-weight: 600; color: #0D0F11; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eds-appr__head-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4em; color: #1787E0; font-size: 0.9em; font-weight: 500; text-decoration: none; white-space: nowrap; }
.eds-appr__head-link svg { width: 0.93em; height: 0.93em; }

.eds-appr__list { display: flex; flex-direction: column; gap: 12px; padding: 0 0.8em 0.8em; }
.eds-appr__card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--appr-bg, #EEF0F3);
}
.eds-appr__card--green { --appr-bg: #EDFDF4; --appr-node: #14AE5C; }
.eds-appr__card--amber { --appr-bg: #FEF5E7; --appr-node: #F59E0B; }
.eds-appr__card--blue  { --appr-bg: #E8F3FC; --appr-node: #459FE6; }
.eds-appr__card--gray  { --appr-bg: #EEF0F3; --appr-node: #B8C0CC; }
.eds-appr__node {
	flex: 0 0 auto;
	width: 2.13em;
	height: 2.13em;
	border-radius: 50%;
	background: var(--appr-node, #B8C0CC);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	font-weight: 600;
}
.eds-appr__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.66em; }
.eds-appr__ev { display: flex; align-items: flex-start; gap: 0.53em; }
.eds-appr__mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.06em; }
.eds-appr__mark--check { width: 1.06em; height: 1.06em; color: #14AE5C; }
.eds-appr__mark--check svg { width: 1.06em; height: 1.06em; }
.eds-appr__mark--circle { width: 1.06em; height: 1.06em; color: #64748B; }
.eds-appr__mark--circle svg { width: 0.8em; height: 0.8em; }
.eds-appr__ev-main { display: flex; flex-direction: column; gap: 0.26em; min-width: 0; }
.eds-appr__name { font-size: 0.93em; font-weight: 600; color: #0D0F11; line-height: 1.2; }
.eds-appr__meta { font-family: 'Inter', system-ui, sans-serif; font-size: 0.8em; color: #4B5768; line-height: 1.2; }
.eds-appr__sep { opacity: 0.7; }
.eds-appr__role { font-family: 'Inter', system-ui, sans-serif; font-size: 0.8em; color: #4B5768; line-height: 1.2; }
.eds-appr__ev--sub .eds-appr__name { font-weight: 400; color: #0D0F11; }

.eds-appr__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.53em; }
.eds-appr__btn { display: inline-flex; align-items: center; justify-content: center; width: 1.47em; height: 1.47em; border-radius: 0.4em; border: 1px solid #D9DDE3; background: #fff; }
.eds-appr__btn svg { width: 0.93em; height: 0.93em; }
.eds-appr__btn--add { color: #4B5768; }
.eds-appr__btn--del { color: #8D1000; border-color: rgba(141,16,0,0.35); }

/* Slide-up stagger entrance (revealOnScroll adds .is-in on each card). */
.eds-appr--anim .eds-appr__rev {
	opacity: 0;
	transform: translateY(var(--appr-rise, 26px));
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--o, 0) * var(--appr-stagger, 110ms));
}
.eds-appr--anim .eds-appr__rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.eds-appr--anim .eds-appr__rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}
body.elementor-editor-active .eds-appr--anim .eds-appr__rev { opacity: 1 !important; transform: none !important; }

/* Approvals — raise specificity + !important so the theme's h3/a/base styles
   can't override the widget's own sizing (scale is em-based off --appr-base). */
.eds-appr.eds-appr { font-size: var(--appr-base, 15px) !important; }
.eds-appr .eds-appr__title { font-size: 1.55em !important; line-height: 1.2 !important; margin: 0 !important; }
.eds-appr .eds-appr__head-link,
.eds-appr .eds-appr__head-link:hover,
.eds-appr .eds-appr__head-link:focus { font-size: 0.9em !important; text-decoration: none !important; }
.eds-appr .eds-appr__name { font-size: 0.93em !important; line-height: 1.2 !important; }
.eds-appr .eds-appr__ev--sub .eds-appr__name { font-size: 0.93em !important; }
.eds-appr .eds-appr__meta,
.eds-appr .eds-appr__role { font-size: 0.8em !important; line-height: 1.2 !important; }
.eds-appr .eds-appr__node { font-size: 0.8em !important; line-height: 1 !important; }

/* ============================================================
   SOCIAL ICONS (eds_social_icons)
   Inline brand SVGs (fill: currentColor) that recolour + lift/grow on hover.
   ============================================================ */
.eds-soc { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.eds-soc__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--soc-c, #BCC4CF);
	line-height: 0;
	text-decoration: none;
	transition: color 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}
.eds-soc__svg { height: var(--soc-size, 24px); width: auto; display: block; fill: currentColor; }
.eds-soc__link:hover,
.eds-soc__link:focus-visible { color: var(--soc-h, #662756); }
.eds-soc--lift .eds-soc__link:hover,
.eds-soc--lift .eds-soc__link:focus-visible { transform: translateY(-3px); }
.eds-soc--grow .eds-soc__link:hover,
.eds-soc--grow .eds-soc__link:focus-visible { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
	.eds-soc__link { transition: color 0.22s ease; }
	.eds-soc__link:hover, .eds-soc__link:focus-visible { transform: none; }
}