/**
 * Feature Orbit — esalespage/feature-orbit.
 *
 * Mobile-first: base rules are the phone, 768px the tablet, 1024px the
 * computer. Sizes arrive as --fo-* custom properties from the block root;
 * everything private to this file is --_name.
 *
 * HOW THE RING WORKS. The stage is a square and a size container, so 1cqw is
 * one hundredth of its width at any size. Each feature carries --x and --y
 * (hundredths of the stage, from its centre): the server prints them, and
 * feature-orbit.js rewrites them on every frame. Nothing is ever rotated — a
 * feature is simply MOVED along the circle — which is why its words stay
 * upright. The 3D orbit adds --sc (scale), --op (opacity) and --z.
 *
 * Transforms: the ring position lives on .espt-fo-n (`transform`); the bob /
 * pulse loop on .espt-fo-nb (`translate` / `scale`); the entrance animates
 * .espt-fo-n FROM the centre (its "to" is whatever the transform is by then).
 *
 * A phone has no room for words round a 300px circle: below 768px every
 * feature style collapses to an icon bubble, only the focused title shows,
 * and the words live in the panel and the list.
 */

/* ------------------------------------------------------------------ root */

.espt-block-feature-orbit { margin-bottom: 24px; }

.espt-block-feature-orbit.is-bleed-full {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.espt-block-feature-orbit .espt-fo {
	--_a: var(--fo-accent, var(--bd-primary, #16a34a));
	--_a2: var(--fo-accent2, color-mix(in srgb, var(--_a) 55%, #f59e0b));
	--_bg: var(--fo-bg, #fff);
	--_ink: var(--fo-head-c, #0f172a);
	--_tx: var(--fo-text-c, #5b6577);
	--_node: var(--fo-node-bg, #fff);
	--_node-c: var(--fo-node-c, var(--_a));
	--_label: var(--fo-label-c, var(--_ink));
	--_ring: var(--fo-ring-c, color-mix(in srgb, var(--_a) 38%, transparent));
	--_line: rgba(15, 23, 42, .09);
	--_panel: var(--fo-panel-bg, #fff);
	--_ns: var(--fo-ns, 48px);

	background: var(--_bg);
	border-radius: var(--fo-r, 28px);
	color: var(--_tx);
	isolation: isolate;
	overflow: hidden;
	padding: var(--fo-py, 28px) 16px;
	position: relative;
}

.espt-block-feature-orbit.is-bleed-full .espt-fo { border-radius: 0; }
.espt-block-feature-orbit .espt-fo-in { margin: 0 auto; max-width: var(--espt-container, 1200px); min-width: 0; position: relative; z-index: 1; }
.espt-block-feature-orbit .espt-fo-bg { inset: 0; pointer-events: none; position: absolute; z-index: 0; }

/* ================================================================ SKINS */

.espt-block-feature-orbit.is-skin-soft .espt-fo { background: radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--_a) 13%, transparent), transparent 70%), var(--fo-bg, color-mix(in srgb, var(--_a) 4%, #fff)); }
.espt-block-feature-orbit.is-skin-light .espt-fo { border: 1px solid var(--_line); box-shadow: 0 16px 40px -24px rgba(15, 23, 42, .3); }
.espt-block-feature-orbit.is-skin-none .espt-fo { --_bg: var(--fo-bg, transparent); border-radius: 0; overflow: visible; padding-left: 0; padding-right: 0; }
.espt-block-feature-orbit.is-skin-outline .espt-fo { --_bg: var(--fo-bg, transparent); border: 1.5px solid var(--_line); }

.espt-block-feature-orbit.is-skin-dark .espt-fo,
.espt-block-feature-orbit.is-skin-space .espt-fo {
	--_bg: var(--fo-bg, #0b1220);
	--_ink: var(--fo-head-c, #fff);
	--_tx: var(--fo-text-c, #a3aec2);
	--_node: var(--fo-node-bg, #16213a);
	--_node-c: var(--fo-node-c, #fff);
	--_line: rgba(255, 255, 255, .12);
	--_panel: var(--fo-panel-bg, #131d33);
	--_ring: var(--fo-ring-c, color-mix(in srgb, var(--_a) 60%, transparent));
}

.espt-block-feature-orbit.is-skin-space .espt-fo { --_bg: var(--fo-bg, #050816); }

/* a few hand-placed stars, twice, at two sizes — no image, no script */
.espt-block-feature-orbit.is-skin-space .espt-fo-bg {
	background-image:
		radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #fff, transparent),
		radial-gradient(1.4px 1.4px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 61% 84%, #fff, transparent),
		radial-gradient(1.3px 1.3px at 77% 26%, #fff, transparent), radial-gradient(1px 1px at 90% 62%, #fff, transparent),
		radial-gradient(1px 1px at 6% 56%, #fff, transparent), radial-gradient(1.5px 1.5px at 52% 48%, rgba(255, 255, 255, .7), transparent),
		radial-gradient(1px 1px at 36% 38%, rgba(255, 255, 255, .8), transparent), radial-gradient(1.2px 1.2px at 84% 90%, #fff, transparent),
		radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--_a) 22%, transparent), transparent 70%);
	opacity: .9;
}

.espt-block-feature-orbit.is-skin-gradient .espt-fo {
	--_ink: var(--fo-head-c, #fff);
	--_tx: var(--fo-text-c, rgba(255, 255, 255, .88));
	--_node: var(--fo-node-bg, rgba(255, 255, 255, .95));
	--_label: var(--fo-label-c, #fff);
	--_ring: var(--fo-ring-c, rgba(255, 255, 255, .55));
	--_line: rgba(255, 255, 255, .3);
	--_panel: var(--fo-panel-bg, rgba(255, 255, 255, .14));
	--_focus: #fff;
	--_focus-c: var(--_a);

	background: var(--fo-bg, linear-gradient(140deg, var(--_a), var(--_a2)));
}

.espt-block-feature-orbit.is-skin-gradient .espt-fo-h strong,
.espt-block-feature-orbit.is-skin-gradient .espt-fo-eye { color: #fff; }
.espt-block-feature-orbit.is-skin-gradient .espt-fo-h strong { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: .18em; }
.espt-block-feature-orbit.is-skin-gradient .espt-fo-eye { background: rgba(255, 255, 255, .2); }
.espt-block-feature-orbit.is-skin-gradient .espt-fo-dt { color: #fff; }

.espt-block-feature-orbit.is-skin-paper .espt-fo {
	--_bg: var(--fo-bg, #fdf6e3);
	--_ink: var(--fo-head-c, #3b2f1e);
	--_tx: var(--fo-text-c, #7c6f57);
	--_node: var(--fo-node-bg, #fffaf0);
	--_line: #e7dcc3;
	--_panel: var(--fo-panel-bg, #fffaf0);
}

/* --------------------------------------------------------------- heading */

.espt-block-feature-orbit .espt-fo-head { margin: 0 auto 8px; max-width: 760px; min-width: 0; text-align: center; }
.espt-block-feature-orbit.is-text-align-left .espt-fo-head { margin-left: 0; text-align: left; }
.espt-block-feature-orbit.is-text-align-right .espt-fo-head { margin-right: 0; text-align: right; }

.espt-block-feature-orbit .espt-fo-eye {
	background: color-mix(in srgb, var(--_a) 13%, transparent);
	border-radius: 999px;
	color: var(--_a);
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 9px;
	padding: .42em 1.05em;
}

.espt-block-feature-orbit .espt-fo-h { color: var(--_ink); font-size: var(--fo-hs, 23px); font-weight: 800; line-height: 1.28; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.espt-block-feature-orbit .espt-fo-h strong { color: var(--_a); font-weight: inherit; }
.espt-block-feature-orbit .espt-fo-sub { color: var(--_tx); font-size: 15px; line-height: 1.6; margin: 7px 0 0; }

/* ================================================================= STAGE */

.espt-block-feature-orbit .espt-fo-body { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); min-width: 0; }

.espt-block-feature-orbit .espt-fo-stage {
	aspect-ratio: 1;
	container-type: inline-size;
	margin: 0 auto;
	max-width: 100%;
	position: relative;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	width: var(--fo-ss, 340px);
}

.espt-block-feature-orbit .espt-fo.is-grab .espt-fo-stage { cursor: grab; }
.espt-block-feature-orbit .espt-fo.is-grabbing .espt-fo-stage { cursor: grabbing; }

/* ---- rings ---- */
.espt-block-feature-orbit .espt-fo-rings { inset: 0; pointer-events: none; position: absolute; }
.espt-block-feature-orbit .espt-fo-rings i { border-radius: 50%; display: none; left: 50%; position: absolute; top: 50%; translate: -50% -50%; }

.espt-block-feature-orbit .espt-fo-rings i:nth-child(1) {
	aspect-ratio: 1;
	border: 1.5px dashed var(--_ring);
	display: block;
	width: calc(var(--rad, 39) * 2cqw);
}

.espt-block-feature-orbit.is-ring-style-solid .espt-fo-rings i:nth-child(1),
.espt-block-feature-orbit.is-ring-style-solid .espt-fo-rings i:nth-child(2) { border-style: solid; }
.espt-block-feature-orbit.is-ring-style-dotted .espt-fo-rings i:nth-child(1),
.espt-block-feature-orbit.is-ring-style-dotted .espt-fo-rings i:nth-child(2) { border-style: dotted; border-width: 2.5px; }
.espt-block-feature-orbit.is-ring-style-none .espt-fo-rings i:nth-child(1),
.espt-block-feature-orbit.is-ring-style-none .espt-fo-rings i:nth-child(2) { border-color: transparent; }

.espt-block-feature-orbit.is-ring-style-glow .espt-fo-rings i:nth-child(1) {
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	background: conic-gradient(from 0deg, var(--_a), var(--_a2), transparent 55%, var(--_a));
	border: 0;
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--_a) 70%, transparent));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

.espt-block-feature-orbit.is-ring-spin .espt-fo-rings i:nth-child(1) { animation: espt-fo-creep 60s linear infinite; }
.espt-block-feature-orbit.is-ring-spin.is-ring-style-glow .espt-fo-rings i:nth-child(1) { animation-duration: 9s; }
@keyframes espt-fo-creep { to { rotate: 360deg; } }

/* the inner ring of the two-ring layout — it needs the room a large image would take */
.espt-block-feature-orbit.is-template-double .espt-fo-stage { --_cs: min(var(--fo-cs, 42), 28); }

.espt-block-feature-orbit.is-template-double .espt-fo-rings i:nth-child(2) { animation: espt-fo-creep 80s linear infinite reverse; aspect-ratio: 1; border: 1.5px dashed var(--_ring); display: block; width: calc(var(--rad, 39) * 1.24cqw); }
.espt-block-feature-orbit.is-template-double:not(.is-ring-spin) .espt-fo-rings i:nth-child(2) { animation: none; }

/* the tilted orbit is an ellipse; a creeping dashed ellipse reads as a wobble, so it stays still */
.espt-block-feature-orbit.is-template-ellipse .espt-fo-rings i:nth-child(1) { animation: none; aspect-ratio: auto; height: calc(var(--rad, 39) * .84cqw); }
.espt-block-feature-orbit.is-template-arc .espt-fo-rings i:nth-child(1),
.espt-block-feature-orbit.is-template-flank .espt-fo-rings i:nth-child(1) { display: none; }

/* ripples from the image */
.espt-block-feature-orbit.is-ripples .espt-fo-rings i:nth-child(3),
.espt-block-feature-orbit.is-ripples .espt-fo-rings i:nth-child(4) {
	animation: espt-fo-ripple 4.5s ease-out infinite;
	aspect-ratio: 1;
	border: 1.5px solid color-mix(in srgb, var(--_a) 45%, transparent);
	display: block;
	left: calc(50% + var(--_cx, 0) * 1cqw);
	width: calc(var(--_cs, var(--fo-cs, 42)) * 1cqw);
}

.espt-block-feature-orbit.is-ripples .espt-fo-rings i:nth-child(4) { animation-delay: -2.25s; }
@keyframes espt-fo-ripple { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.85; } }

/* ---- spokes ---- */
.espt-block-feature-orbit .espt-fo-ln { display: none; }

.espt-block-feature-orbit.is-template-spokes .espt-fo-ln {
	border-top: 2px dashed var(--fo-ring-c, color-mix(in srgb, var(--_a) 60%, transparent));
	display: block;
	height: 0;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: rotate(var(--th, 0deg));
	transform-origin: 0 50%;
	width: calc(var(--len, 39) * 1cqw);
}

.espt-block-feature-orbit.is-template-spokes.is-ring-style-solid .espt-fo-ln { border-top-style: solid; }
.espt-block-feature-orbit.is-template-spokes .espt-fo-rings i:nth-child(1) { opacity: .45; }

/* ---- centre ---- */
.espt-block-feature-orbit .espt-fo-c {
	aspect-ratio: 1;
	left: calc(50% + var(--_cx, 0) * 1cqw);
	position: absolute;
	top: 50%;
	translate: var(--_ctx, -50%) var(--_cty, -50%);
	width: calc(var(--_cs, var(--fo-cs, 42)) * 1cqw);
	z-index: 5;
}

.espt-block-feature-orbit.is-halo .espt-fo-c::before {
	background: radial-gradient(closest-side, color-mix(in srgb, var(--_a) 42%, transparent), transparent);
	content: "";
	filter: blur(18px);
	inset: -22%;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.espt-block-feature-orbit .espt-fo-cf {
	background: var(--fo-centre-bg, color-mix(in srgb, var(--_a) 12%, #fff));
	border: 5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .55);
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
	width: 100%;
}

.espt-block-feature-orbit .espt-fo-cf picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.espt-block-feature-orbit .espt-fo-ci { display: block; height: 100%; inset: 0; max-width: none; object-fit: cover; pointer-events: none; position: absolute; width: 100%; }
.espt-block-feature-orbit.is-centre-fit-contain .espt-fo-ci { object-fit: contain; padding: 8%; }
.espt-block-feature-orbit .espt-fo-cph { align-items: center; color: color-mix(in srgb, var(--_a) 55%, #fff); display: flex; inset: 0; justify-content: center; position: absolute; }
.espt-block-feature-orbit .espt-fo-cphi svg { height: 38%; min-height: 40px; min-width: 40px; width: 38%; }

.espt-block-feature-orbit.is-centre-shape-rounded .espt-fo-cf { border-radius: 22%; }
.espt-block-feature-orbit.is-centre-shape-blob .espt-fo-cf { animation: espt-fo-blob 9s ease-in-out infinite; border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%; }
@keyframes espt-fo-blob { 0%, 100% { border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%; } 33% { border-radius: 44% 56% 58% 42% / 46% 58% 42% 54%; } 66% { border-radius: 52% 48% 40% 60% / 58% 42% 58% 42%; } }
.espt-block-feature-orbit.is-centre-shape-hexagon .espt-fo-cf { border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); filter: drop-shadow(0 18px 24px rgba(15, 23, 42, .35)); }
.espt-block-feature-orbit.is-centre-shape-free .espt-fo-cf { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.espt-block-feature-orbit.is-centre-shape-free .espt-fo-ci { filter: drop-shadow(0 22px 26px rgba(15, 23, 42, .4)); object-fit: contain; padding: 0; }

.espt-block-feature-orbit.is-centre-anim-float .espt-fo-c { animation: espt-fo-float 6s ease-in-out infinite; }
.espt-block-feature-orbit.is-centre-anim-pulse .espt-fo-c { animation: espt-fo-breathe 5s ease-in-out infinite; }
.espt-block-feature-orbit.is-centre-anim-spin .espt-fo-ci { animation: espt-fo-creep 70s linear infinite; }
.espt-block-feature-orbit.is-centre-anim-tilt .espt-fo-c { perspective: 800px; }
.espt-block-feature-orbit.is-centre-anim-tilt .espt-fo-cf { transform: rotateX(var(--_rx, 0deg)) rotateY(var(--_ry, 0deg)); transition: transform .2s ease-out; }
@keyframes espt-fo-float { 0%, 100% { translate: var(--_ctx, -50%) var(--_cty, -50%); } 50% { translate: var(--_ctx, -50%) calc(var(--_cty, -50%) - 9px); } }
@keyframes espt-fo-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }

.espt-block-feature-orbit .espt-fo-cb {
	background: var(--_a);
	border: 3px solid #fff;
	border-radius: 999px;
	bottom: 4%;
	box-shadow: 0 10px 22px -10px rgba(15, 23, 42, .6);
	color: #fff;
	font-size: clamp(10px, 3.2cqw, 14px);
	font-weight: 800;
	left: 50%;
	line-height: 1.15;
	max-width: 110%;
	padding: .42em 1em;
	position: absolute;
	text-align: center;
	translate: -50% 40%;
	white-space: nowrap;
	z-index: 2;
}

/* ============================================================== FEATURES */

.espt-block-feature-orbit .espt-fo-n {
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	left: 50%;
	margin: 0;
	opacity: var(--op, 1);
	padding: 0;
	position: absolute;
	top: 50%;
	/* moved, never rotated: that is what keeps the words upright */
	transform: translate(calc(var(--x, 0) * 1cqw - 50%), calc(var(--y, 0) * 1cqw - 50%)) scale(var(--sc, 1));
	z-index: var(--z, 8);
}

.espt-block-feature-orbit .espt-fo-n:focus-visible { outline: none; }
.espt-block-feature-orbit .espt-fo-n:focus-visible .espt-fo-nb { outline: 3px solid var(--_a); outline-offset: 3px; }

.espt-block-feature-orbit .espt-fo-nb {
	--_c: var(--_own, var(--_node-c));

	align-items: center;
	background: var(--_node);
	border: 1.5px solid color-mix(in srgb, var(--_own, var(--_a)) 22%, transparent);
	border-radius: 50%;
	box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .5);
	color: var(--_c);
	display: flex;
	height: var(--_ns);
	justify-content: center;
	overflow: hidden;
	position: relative;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, scale .45s cubic-bezier(.2, .7, .2, 1);
	width: var(--_ns);
}

.espt-block-feature-orbit .espt-fo-ic { display: inline-flex; line-height: 0; }
.espt-block-feature-orbit .espt-fo-ic svg { height: calc(var(--_ns) * .44); width: calc(var(--_ns) * .44); }
.espt-block-feature-orbit .espt-fo-nb picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.espt-block-feature-orbit .espt-fo-ni { display: block; height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; width: 100%; }
.espt-block-feature-orbit .espt-fo-num { display: none; font-size: calc(var(--_ns) * .38); font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; }

/* in focus */
.espt-block-feature-orbit .espt-fo-n.is-active .espt-fo-nb {
	background: var(--_focus, var(--_own, var(--_a)));
	border-color: transparent;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--_own, var(--_a)) 22%, transparent), 0 16px 30px -12px color-mix(in srgb, var(--_own, var(--_a)) 75%, transparent);
	color: var(--_focus-c, #fff);
	scale: 1.16;
}

.espt-block-feature-orbit .espt-fo-n.is-active.has-img .espt-fo-nb { background: var(--_node); }
.espt-block-feature-orbit .espt-fo-n.is-active { z-index: max(var(--z, 8), 9); }

/* title under the bubble — absolutely placed, so the bubble's CENTRE stays on the ring */
.espt-block-feature-orbit .espt-fo-nl {
	color: var(--_label);
	display: grid;
	font-size: var(--fo-ls, 11px);
	font-weight: 700;
	gap: 1px;
	left: 50%;
	line-height: 1.25;
	max-width: 120px;
	opacity: 0;
	overflow-wrap: anywhere;
	pointer-events: none;
	position: absolute;
	text-align: center;
	top: calc(100% + 7px);
	transition: opacity .35s ease;
	translate: -50% 0;
	width: max-content;
}

.espt-block-feature-orbit .espt-fo-nx { display: none; }
.espt-block-feature-orbit .espt-fo-n.is-active .espt-fo-nl { opacity: 1; }
.espt-block-feature-orbit.is-labels-all .espt-fo-nl { opacity: 1; }
.espt-block-feature-orbit.is-labels-never .espt-fo-nl { display: none; }

/* a little help reading a title that lies over a photo or a ring line */
.espt-block-feature-orbit .espt-fo-nt { text-shadow: 0 0 6px var(--_bg), 0 0 6px var(--_bg); }
.espt-block-feature-orbit.is-skin-gradient .espt-fo-nt,
.espt-block-feature-orbit.is-skin-soft .espt-fo-nt,
.espt-block-feature-orbit.is-skin-none .espt-fo-nt { text-shadow: none; }

/* ---- feature styles (the bubble part; pills and cards grow up at 768px) ---- */
/* only on the ring: the panel and the list keep their icons */
.espt-block-feature-orbit.is-node-style-number .espt-fo-nb .espt-fo-ic,
.espt-block-feature-orbit.is-node-style-number .espt-fo-nb .espt-fo-ni,
.espt-block-feature-orbit.is-node-style-number .espt-fo-nb picture { display: none; }
.espt-block-feature-orbit.is-node-style-number .espt-fo-nb .espt-fo-num { display: block; }

.espt-block-feature-orbit.is-node-style-outline .espt-fo-nb { background: transparent; border: 2px solid var(--_own, var(--_a)); box-shadow: none; color: var(--_own, var(--_a)); }
.espt-block-feature-orbit.is-node-style-dot .espt-fo-nb { --_ns: 16px; background: var(--_own, var(--_a)); border: 3px solid var(--_bg); box-shadow: 0 0 0 1.5px var(--_own, var(--_a)); }
.espt-block-feature-orbit.is-node-style-dot .espt-fo-nb > * { display: none; }
.espt-block-feature-orbit.is-node-style-dot .espt-fo-n.is-active .espt-fo-nb { scale: 1.5; }
.espt-block-feature-orbit.is-node-style-dot .espt-fo-n { padding: 12px; } /* a 16px dot is no target for a thumb */
.espt-block-feature-orbit.is-node-style-dot .espt-fo-nl { top: calc(100% - 4px); }

.espt-block-feature-orbit.is-node-anim-float .espt-fo-nb { animation: espt-fo-bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
.espt-block-feature-orbit.is-node-anim-pulse .espt-fo-n:not(.is-active) .espt-fo-nb { animation: espt-fo-npulse 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.5s); }
@keyframes espt-fo-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes espt-fo-npulse { 0%, 100% { box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .5), 0 0 0 0 color-mix(in srgb, var(--_a) 40%, transparent); } 50% { box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .5), 0 0 0 7px transparent; } }

@media (hover: hover) and (pointer: fine) {
	.espt-block-feature-orbit .espt-fo-n:hover .espt-fo-nb { scale: 1.1; }
	.espt-block-feature-orbit .espt-fo-n.is-active:hover .espt-fo-nb { scale: 1.2; }
	.espt-block-feature-orbit .espt-fo-n:hover .espt-fo-nl { opacity: 1; }
}

/* ========================================================== FOCUS PANEL */

.espt-block-feature-orbit .espt-fo-detail {
	background: var(--_panel);
	border: 1px solid var(--_line);
	border-radius: 20px;
	box-shadow: 0 16px 36px -24px rgba(15, 23, 42, .4);
	display: grid;
	gap: 10px;
	margin: 18px auto 0;
	max-width: 560px;
	min-width: 0;
	padding: 16px;
	width: 100%;
}

.espt-block-feature-orbit.is-detail-none:not(.is-template-spotlight) .espt-fo-detail { display: none; }
.espt-block-feature-orbit .espt-fo-dw { align-items: flex-start; display: flex; gap: 12px; min-height: 76px; min-width: 0; transition: opacity .25s ease, transform .25s ease; }
.espt-block-feature-orbit .espt-fo-detail.is-swap .espt-fo-dw { opacity: 0; transform: translateY(8px); }

.espt-block-feature-orbit .espt-fo-di {
	align-items: center;
	background: color-mix(in srgb, var(--_a) 13%, transparent);
	border-radius: 14px;
	color: var(--_a);
	display: flex;
	flex: none;
	height: 46px;
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: 46px;
}

.espt-block-feature-orbit .espt-fo-di .espt-fo-ic svg { height: 22px; width: 22px; }
.espt-block-feature-orbit .espt-fo-di img { height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; width: 100%; }
.espt-block-feature-orbit .espt-fo-dtx { min-width: 0; }
.espt-block-feature-orbit .espt-fo-dt { color: var(--_ink); font-family: var(--espt-heading-font, inherit); font-size: 17px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.espt-block-feature-orbit .espt-fo-dx { color: var(--_tx); font-size: 14.5px; line-height: 1.6; margin-top: 3px; overflow-wrap: anywhere; }

.espt-block-feature-orbit .espt-fo-dn { align-items: center; display: flex; gap: 10px; justify-content: flex-end; }
.espt-block-feature-orbit .espt-fo-dc { color: var(--_tx); font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 700; }
.espt-block-feature-orbit .espt-fo-dc b { color: var(--_a); }

.espt-block-feature-orbit .espt-fo-db {
	align-items: center;
	appearance: none;
	background: none;
	border: 1.5px solid var(--_line);
	border-radius: 50%;
	box-shadow: none;
	color: var(--_ink);
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	margin: 0;
	padding: 0;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
	width: 40px;
}

.espt-block-feature-orbit .espt-fo-db:hover { background: var(--_a); border-color: var(--_a); color: #fff; }
.espt-block-feature-orbit .espt-fo-db:focus-visible { outline: 3px solid var(--_a); outline-offset: 2px; }

.espt-block-feature-orbit.is-detail-style-plain .espt-fo-detail { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-detail { background: linear-gradient(135deg, var(--_a), var(--_a2)); border: 0; }
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-dt,
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-dc b,
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-db { color: #fff; }
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-dx,
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-dc { color: rgba(255, 255, 255, .88); }
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-di { background: rgba(255, 255, 255, .22); color: #fff; }
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-db { border-color: rgba(255, 255, 255, .45); }
.espt-block-feature-orbit.is-detail-style-accent .espt-fo-db:hover { background: #fff; border-color: #fff; color: var(--_a); }
.espt-block-feature-orbit.is-detail-style-glass .espt-fo-detail { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: color-mix(in srgb, var(--_panel) 60%, transparent); }
.espt-block-feature-orbit.is-detail-style-quote .espt-fo-detail { border-left: 4px solid var(--_a); border-radius: 6px 20px 20px 6px; }

/* ================================================================== LIST */

.espt-block-feature-orbit .espt-fo-list { display: grid; gap: 10px; grid-template-columns: repeat(var(--fo-lc, 1), minmax(0, 1fr)); list-style: none; margin: 18px 0 0; padding: 0; }
.espt-block-feature-orbit .espt-fo-li { align-items: flex-start; background: var(--_panel); border: 1px solid var(--_line); border-radius: 16px; display: flex; gap: 11px; list-style: none; margin: 0; min-width: 0; padding: 12px; }
.espt-block-feature-orbit .espt-fo-li::marker { content: none; }

.espt-block-feature-orbit .espt-fo-lb {
	align-items: center;
	background: color-mix(in srgb, var(--_own, var(--_a)) 13%, transparent);
	border-radius: 12px;
	color: var(--_own, var(--_a));
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: 40px;
}

.espt-block-feature-orbit .espt-fo-lb .espt-fo-ic svg { height: 20px; width: 20px; }
.espt-block-feature-orbit .espt-fo-lb .espt-fo-num { display: none; }
.espt-block-feature-orbit .espt-fo-lb img { height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; width: 100%; }
.espt-block-feature-orbit .espt-fo-lw { display: grid; gap: 2px; min-width: 0; }
.espt-block-feature-orbit .espt-fo-lt { color: var(--_ink); font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.espt-block-feature-orbit .espt-fo-lx { color: var(--_tx); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }

/* "never": still in the page for a screen reader, just not painted */
.espt-block-feature-orbit.is-list-mode-never .espt-fo-list { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/* ---------------------------------------------------------------- footer */

.espt-block-feature-orbit .espt-fo-foot { margin-top: 22px; text-align: center; }

.espt-block-feature-orbit .espt-fo-btn {
	align-items: center;
	background: var(--fo-btn-bg, var(--_a));
	border-radius: min(var(--espt-btn-radius, 999px), 30px);
	color: var(--fo-btn-c, #fff);
	display: inline-flex;
	font-family: var(--espt-heading-font, inherit);
	font-size: 16px;
	font-weight: 800;
	gap: 9px;
	justify-content: center;
	min-height: 52px;
	padding: 12px 28px;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.espt-block-feature-orbit .espt-fo-btn:hover { box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--_a) 85%, transparent); color: var(--fo-btn-c, #fff); filter: brightness(1.07); transform: translateY(-2px); }
.espt-block-feature-orbit .espt-fo-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--_a) 55%, #fff); outline-offset: 3px; }
.espt-block-feature-orbit .espt-fo-bi { display: inline-flex; line-height: 0; }
.espt-block-feature-orbit .espt-fo-bi svg { height: 18px; width: 18px; }
.espt-block-feature-orbit.is-skin-gradient .espt-fo-btn { background: var(--fo-btn-bg, #fff); color: var(--fo-btn-c, var(--_a)); }

/* ====================================================== LAYOUTS (phone) */

/* 03 tilted orbit: a flat ring needs a flat stage, and a smaller image set a little
   high, so the front feature passes before its lower edge rather than its middle */
.espt-block-feature-orbit.is-template-ellipse .espt-fo-stage { --_cs: min(var(--fo-cs, 42), 36); --_cty: -60%; aspect-ratio: 1 / .78; }

/* 05 arc: the image sits left, the features sweep down its right. The stage
   is taller than wide so the ends of the sweep stay inside it. */
.espt-block-feature-orbit.is-template-arc .espt-fo-stage { --_cx: -30; aspect-ratio: 1 / 1.24; }
.espt-block-feature-orbit.is-template-arc .espt-fo-stage { --_cs: min(var(--fo-cs, 42), 40); }

/* 07 flank — and "no ring on phones": the ring's parts go, the image stays,
   and the list does the talking */
@media (max-width: 767px) {
	/* two rings on a phone leave no room for words between them: the panel says them */
	.espt-block-feature-orbit.is-template-double .espt-fo-nl { display: none; }

	.espt-block-feature-orbit.is-template-flank .espt-fo-stage,
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-stage { aspect-ratio: auto; height: calc(var(--fo-cs, 42) * 2.1px + 60px); max-height: 300px; min-height: 200px; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-c,
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-c { --_cx: 0; height: 84%; left: 50%; width: auto; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-n,
	.espt-block-feature-orbit.is-template-flank .espt-fo-ln,
	.espt-block-feature-orbit.is-template-flank .espt-fo-rings i:nth-child(1),
	.espt-block-feature-orbit.is-template-flank .espt-fo-rings i:nth-child(2),
	.espt-block-feature-orbit.is-template-flank .espt-fo-detail,
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-n,
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-ln,
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-rings i:nth-child(1),
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-rings i:nth-child(2),
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-detail { display: none; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-rings i,
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-rings i { left: 50%; width: min(60%, 220px); }

	/* …which is why the list may not be hidden there, whatever was chosen */
	.espt-block-feature-orbit.is-template-flank .espt-fo-list,
	.espt-block-feature-orbit.is-mobile-mode-list .espt-fo-list { border: initial; clip: auto; height: auto; margin: 18px 0 0; overflow: visible; position: static; white-space: normal; width: auto; }
}

/* ============================================================= 768px + */

@media (min-width: 768px) {
	.espt-block-feature-orbit .espt-fo { padding-left: 24px; padding-right: 24px; }
	.espt-block-feature-orbit.is-skin-none .espt-fo { padding-left: 0; padding-right: 0; }
	.espt-block-feature-orbit .espt-fo-sub { font-size: 16px; }
	.espt-block-feature-orbit .espt-fo-head { margin-bottom: 14px; }
	.espt-block-feature-orbit .espt-fo-nl { max-width: 150px; }
	.espt-block-feature-orbit .espt-fo-dt { font-size: 19px; }
	.espt-block-feature-orbit .espt-fo-dx { font-size: 15.5px; }
	.espt-block-feature-orbit .espt-fo-detail { padding: 20px 22px; }

	/* room around the ring: titles hang outside the circle */
	.espt-block-feature-orbit .espt-fo-body { padding: 10px 0 34px; }

	.espt-block-feature-orbit.is-labels-always .espt-fo-nl { opacity: 1; }
	.espt-block-feature-orbit.is-list-mode-mobile .espt-fo-list { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

	/* ---- pill: icon and title in one chip, centred on the ring ---- */
	.espt-block-feature-orbit.is-node-style-pill .espt-fo-n {
		align-items: center;
		background: var(--_node);
		border: 1.5px solid color-mix(in srgb, var(--_own, var(--_a)) 22%, transparent);
		border-radius: 999px;
		box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .5);
		display: inline-flex;
		gap: 9px;
		padding: 5px 16px 5px 5px;
		transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
	}

	.espt-block-feature-orbit.is-node-style-pill .espt-fo-nb { --_ns: calc(var(--fo-ns, 68px) * .6); background: color-mix(in srgb, var(--_own, var(--_a)) 13%, transparent); border: 0; box-shadow: none; }
	.espt-block-feature-orbit.is-node-style-pill .espt-fo-nl,
	.espt-block-feature-orbit.is-node-style-card .espt-fo-nl { left: auto; max-width: 170px; opacity: 1; position: static; text-align: left; translate: none; }
	.espt-block-feature-orbit.is-node-style-pill .espt-fo-nt { text-shadow: none; white-space: nowrap; }
	.espt-block-feature-orbit.is-node-style-pill .espt-fo-n.is-active { background: var(--_focus, var(--_own, var(--_a))); border-color: transparent; box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--_own, var(--_a)) 75%, transparent); }
	.espt-block-feature-orbit.is-node-style-pill .espt-fo-n.is-active .espt-fo-nl { color: var(--_focus-c, #fff); }
	.espt-block-feature-orbit.is-node-style-pill .espt-fo-n.is-active .espt-fo-nb { background: rgba(255, 255, 255, .25); box-shadow: none; color: var(--_focus-c, #fff); scale: 1; }
	.espt-block-feature-orbit.is-skin-dark.is-node-style-pill .espt-fo-nl,
	.espt-block-feature-orbit.is-skin-space.is-node-style-pill .espt-fo-nl { color: var(--fo-label-c, #fff); }
	.espt-block-feature-orbit.is-skin-gradient.is-node-style-pill .espt-fo-nl,
	.espt-block-feature-orbit.is-skin-gradient.is-node-style-card .espt-fo-nl { color: var(--fo-label-c, #0f172a); }
	.espt-block-feature-orbit.is-labels-never.is-node-style-pill .espt-fo-nl,
	.espt-block-feature-orbit.is-labels-never.is-node-style-card .espt-fo-nl { display: grid; }

	/* chips and cards are wide: the image gives them room */
	.espt-block-feature-orbit.is-node-style-pill:not(.is-template-arc):not(.is-template-flank):not(.is-template-double) .espt-fo-stage,
	.espt-block-feature-orbit.is-node-style-card:not(.is-template-arc):not(.is-template-flank):not(.is-template-double) .espt-fo-stage { --_cs: min(var(--fo-cs, 42), 34); }

	/* ---- card: icon, title and a line of text ---- */
	.espt-block-feature-orbit.is-node-style-card .espt-fo-n {
		align-items: flex-start;
		background: var(--_node);
		border: 1.5px solid color-mix(in srgb, var(--_own, var(--_a)) 18%, transparent);
		border-radius: 18px;
		box-shadow: 0 16px 32px -18px rgba(15, 23, 42, .5);
		display: flex;
		gap: 10px;
		padding: 11px 13px;
		text-align: left;
		transition: border-color .4s ease, box-shadow .4s ease;
		width: 196px;
	}

	.espt-block-feature-orbit.is-node-style-card .espt-fo-nb { --_ns: calc(var(--fo-ns, 68px) * .58); background: color-mix(in srgb, var(--_own, var(--_a)) 13%, transparent); border: 0; border-radius: 12px; box-shadow: none; flex: none; }
	.espt-block-feature-orbit.is-node-style-card .espt-fo-nl { gap: 3px; max-width: none; }
	.espt-block-feature-orbit.is-node-style-card .espt-fo-nt { text-shadow: none; }
	.espt-block-feature-orbit.is-node-style-card .espt-fo-nx { color: var(--_tx); display: block; font-size: .86em; font-weight: 500; line-height: 1.4; }
	.espt-block-feature-orbit.is-skin-gradient.is-node-style-card .espt-fo-nx { color: #5b6577; }
	.espt-block-feature-orbit.is-node-style-card .espt-fo-n.is-active { border-color: var(--_own, var(--_a)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_own, var(--_a)) 18%, transparent), 0 20px 36px -16px color-mix(in srgb, var(--_own, var(--_a)) 60%, transparent); }
	.espt-block-feature-orbit.is-node-style-card .espt-fo-n.is-active .espt-fo-nb { scale: 1; }

	/* ---- 06 spotlight: the ring, and a large panel beside it ---- */
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-body { align-items: center; gap: 40px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-detail { align-content: center; margin: 0; max-width: none; min-height: 250px; padding: 30px; }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-dw { flex-direction: column; gap: 16px; min-height: 150px; }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-di { border-radius: 18px; height: 62px; width: 62px; }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-di .espt-fo-ic svg { height: 30px; width: 30px; }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-dt { font-size: 26px; }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-dx { font-size: 17px; margin-top: 8px; }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-dn { justify-content: flex-start; }
	.espt-block-feature-orbit.is-template-spotlight .espt-fo-stage { max-width: 100%; width: min(var(--fo-ss, 540px), 100%); }
	/* a chip or a card is centred ON the ring, so half of it hangs outside */
	.espt-block-feature-orbit.is-template-spotlight.is-node-style-pill .espt-fo-stage,
	.espt-block-feature-orbit.is-template-spotlight.is-node-style-card .espt-fo-stage { width: min(var(--fo-ss, 540px), 100% - 150px); }

	/* ---- 05 arc: the panel sits where the arc leaves room ---- */
	.espt-block-feature-orbit.is-template-arc .espt-fo-stage { --_cs: min(var(--fo-cs, 42) * 1.15, 50); }
	.espt-block-feature-orbit.is-template-arc .espt-fo-nl { gap: 3px; left: calc(100% + 14px); max-width: 230px; opacity: 1; text-align: left; top: 50%; translate: 0 -50%; width: 230px; }
	.espt-block-feature-orbit.is-template-arc .espt-fo-nt { font-size: 1.12em; }
	.espt-block-feature-orbit.is-template-arc .espt-fo-body { padding-top: 26px; }
	.espt-block-feature-orbit.is-template-arc .espt-fo-nx { color: var(--_tx); display: block; font-weight: 500; line-height: 1.45; }
	.espt-block-feature-orbit.is-template-arc.is-labels-never .espt-fo-nl { display: grid; }
	/* the words hang to the right of the arc: pull the whole figure left to keep it centred */
	.espt-block-feature-orbit.is-template-arc .espt-fo-stage { translate: -90px 0; }

	/* ---- 07 flank: two columns of features, the image between them ---- */
	.espt-block-feature-orbit.is-template-flank .espt-fo-stage {
		align-items: center;
		aspect-ratio: auto;
		column-gap: 34px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(180px, 34%) minmax(0, 1fr);
		row-gap: 22px;
		width: min(100%, 1040px);
	}

	.espt-block-feature-orbit.is-template-flank .espt-fo-rings { grid-column: 2; grid-row: 1 / span var(--rows, 3); inset: auto; position: relative; align-self: stretch; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-rings i { width: 100%; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-c { grid-column: 2; grid-row: 1 / span var(--rows, 3); --_ctx: 0px; --_cty: 0px; left: auto; position: relative; top: auto; width: 100%; }

	.espt-block-feature-orbit.is-template-flank .espt-fo-n {
		align-items: center;
		display: flex;
		flex-direction: row-reverse;
		gap: 14px;
		grid-column: var(--c, 1);
		grid-row: var(--rw, 1);
		left: auto;
		opacity: 1;
		position: relative;
		text-align: right;
		top: auto;
		transform: none;
		width: 100%;
	}

	.espt-block-feature-orbit.is-template-flank .espt-fo-n[style*="--c:3"] { flex-direction: row; text-align: left; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-nb { flex: none; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-nl { flex: 1 1 auto; gap: 3px; left: auto; max-width: none; opacity: 1; position: static; text-align: inherit; translate: none; width: auto; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-nt { font-size: 1.15em; text-shadow: none; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-nx { color: var(--_tx); display: block; font-weight: 500; line-height: 1.5; }
	.espt-block-feature-orbit.is-template-flank.is-labels-never .espt-fo-nl { display: grid; }

	/* a dashed tick from each bubble toward the image */
	.espt-block-feature-orbit.is-template-flank .espt-fo-n::after { border-top: 1.5px dashed var(--_ring); content: ""; position: absolute; right: -30px; top: 50%; width: 24px; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-n[style*="--c:3"]::after { left: -30px; right: auto; }
	.espt-block-feature-orbit.is-template-flank.is-ring-style-none .espt-fo-n::after { content: none; }

	/* the panel would only repeat what the columns already say */
	.espt-block-feature-orbit.is-template-flank .espt-fo-detail { display: none; }
	.espt-block-feature-orbit.is-template-flank .espt-fo-list { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
}

/* ============================================================= ENTRANCE
   Hidden until feature-orbit.js adds .is-in. A feature's keyframes have no
   "to": it lands on whatever its transform is by then — a moving target. */

.espt-block-feature-orbit:not(.is-anim-in-none) .espt-fo[data-fo-in] .espt-fo-head > *,
.espt-block-feature-orbit:not(.is-anim-in-none) .espt-fo[data-fo-in] .espt-fo-c,
.espt-block-feature-orbit:not(.is-anim-in-none) .espt-fo[data-fo-in] .espt-fo-rings,
.espt-block-feature-orbit:not(.is-anim-in-none) .espt-fo[data-fo-in] .espt-fo-ln,
.espt-block-feature-orbit:not(.is-anim-in-none) .espt-fo[data-fo-in] .espt-fo-n,
.espt-block-feature-orbit:not(.is-anim-in-none) .espt-fo[data-fo-in] .espt-fo-detail,
.espt-block-feature-orbit:not(.is-anim-in-none) .espt-fo[data-fo-in] .espt-fo-li { opacity: 0; }

.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-head > *,
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-detail,
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-li { animation: espt-fo-in-up .7s cubic-bezier(.2, .7, .2, 1) backwards; opacity: 1; }
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-head > :nth-child(2) { animation-delay: .07s; }
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-head > :nth-child(3) { animation-delay: .14s; }
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-detail { animation-delay: .7s; }
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-li { animation-delay: calc(.3s + var(--i, 0) * .06s); }

.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-c { animation: espt-fo-in-centre .9s cubic-bezier(.2, .7, .2, 1) backwards; opacity: 1; }
/* the float loop would be replaced by the entrance: chain them, one after the other */
.espt-block-feature-orbit.is-centre-anim-float .espt-fo[data-fo-in].is-in .espt-fo-c { animation: espt-fo-in-centre .9s cubic-bezier(.2, .7, .2, 1) backwards, espt-fo-float 6s ease-in-out .9s infinite; }
.espt-block-feature-orbit.is-centre-anim-pulse .espt-fo[data-fo-in].is-in .espt-fo-c { animation: espt-fo-in-centre .9s cubic-bezier(.2, .7, .2, 1) backwards, espt-fo-breathe 5s ease-in-out .9s infinite; }
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-rings,
.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-ln { opacity: 1; transition: opacity .9s ease .35s; }

.espt-block-feature-orbit .espt-fo[data-fo-in].is-in .espt-fo-n {
	animation: var(--_in, espt-fo-in-burst) .85s cubic-bezier(.2, .8, .2, 1) backwards;
	animation-delay: calc(.3s + var(--i, 0) * .08s);
	opacity: var(--op, 1);
}

.espt-block-feature-orbit.is-anim-in-fade .espt-fo { --_in: espt-fo-in-fade; }
.espt-block-feature-orbit.is-anim-in-burst .espt-fo { --_in: espt-fo-in-burst; }
.espt-block-feature-orbit.is-anim-in-pop .espt-fo { --_in: espt-fo-in-pop; }
.espt-block-feature-orbit.is-anim-in-zoom .espt-fo { --_in: espt-fo-in-fade; }
.espt-block-feature-orbit.is-anim-in-zoom .espt-fo[data-fo-in].is-in .espt-fo-stage { animation: espt-fo-in-zoom 1s cubic-bezier(.2, .7, .2, 1) backwards; }

@keyframes espt-fo-in-fade { from { opacity: 0; } }
@keyframes espt-fo-in-up { from { opacity: 0; transform: translateY(20px); } }
@keyframes espt-fo-in-centre { from { opacity: 0; scale: .7; } }
@keyframes espt-fo-in-zoom { from { opacity: 0; scale: .8; } }
/* from the very centre of the stage, tiny: the ring opens like a flower */
@keyframes espt-fo-in-burst { from { opacity: 0; transform: translate(-50%, -50%) scale(.15); } }
@keyframes espt-fo-in-pop { 0% { opacity: 0; scale: .3; } 70% { scale: 1.12; } 100% { scale: 1; } }

/* the flank columns do not sit on a ring: they simply rise */
@media (min-width: 768px) {
	.espt-block-feature-orbit.is-template-flank .espt-fo[data-fo-in].is-in .espt-fo-n { animation-name: espt-fo-in-up; opacity: 1; }
}

/* ======================================================= REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
	.espt-block-feature-orbit .espt-fo,
	.espt-block-feature-orbit .espt-fo *,
	.espt-block-feature-orbit .espt-fo *::before,
	.espt-block-feature-orbit .espt-fo *::after { animation: none !important; transition: none !important; }

	.espt-block-feature-orbit .espt-fo[data-fo-in] .espt-fo-head > *,
	.espt-block-feature-orbit .espt-fo[data-fo-in] .espt-fo-c,
	.espt-block-feature-orbit .espt-fo[data-fo-in] .espt-fo-rings,
	.espt-block-feature-orbit .espt-fo[data-fo-in] .espt-fo-ln,
	.espt-block-feature-orbit .espt-fo[data-fo-in] .espt-fo-detail,
	.espt-block-feature-orbit .espt-fo[data-fo-in] .espt-fo-li { opacity: 1 !important; }
	.espt-block-feature-orbit .espt-fo[data-fo-in] .espt-fo-n { opacity: var(--op, 1) !important; }
}

/* ============================================= "STRETCH THIS WIDGET"
   (Spacing & background → Stretch this widget.) The shared rule only pulls the
   wrapper out over the page's side space — a few pixels. On a rounded, bordered
   surface that reads as "nothing happened": the corners still float inside the
   edge. Stretched means FLUSH: square corners, no side borders. */
.espt-block-feature-orbit:is(.has-espt-box-full-container, .has-espt-box-full-browser) .espt-fo { border-left: 0; border-radius: 0; border-right: 0; }