/**
 * Hero Showcase — esalespage/hero-showcase.
 *
 * Mobile-first: base rules are the phone, 768px the tablet, 1024px the
 * computer. Sizes arrive as --hs-* custom properties from the block root;
 * everything private to this file is --_name.
 *
 * Axes (classes on the root): is-skin-* sets colour tokens and the backdrop,
 * is-template-* arranges the two sides, is-slider-style-* draws the cards.
 *
 * THE SLIDER. Every card sits in the same grid cell and carries two numbers:
 *   --o  its signed distance from the active card (…-2, -1, 0, 1, 2…)
 *   --a  the absolute value of that
 * hero-showcase.js only rewrites those numbers; each style below is one
 * `transform` / `opacity` formula over them, and the transition does the rest.
 * opacity: calc(N - var(--a)) is a free clamp — opacity saturates at 0 and 1.
 *
 * Transforms: the slider owns .espt-hs-card; the float loop uses `translate`
 * on .espt-hs-cf; hover uses `transform` on .espt-hs-cf / .espt-hs-ci; the
 * entrance animates the copy's children and .espt-hs-media.
 */

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

.espt-block-hero-showcase { margin-bottom: 24px; }

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

.espt-block-hero-showcase .espt-hs {
	--_a: var(--hs-accent, #ff6a00);
	--_a2: var(--hs-accent2, color-mix(in srgb, var(--_a) 55%, #fbbf24));
	--_bg: var(--hs-bg, #fff);
	--_ink: var(--hs-title-c, #0f172a);
	--_tx: var(--hs-text-c, #5b6577);
	--_price: var(--hs-price-c, var(--_a));
	--_btn: var(--hs-btn-bg, #0f172a);
	--_btn-c: var(--hs-btn-c, #fff);
	--_line: rgba(15, 23, 42, .09);
	--_card: var(--hs-logo-bg, #fff);
	--_gap: var(--hs-gap, 22px);
	--_sp: var(--hs-sp, .7s);

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

.espt-block-hero-showcase.is-bleed-full .espt-hs { border-radius: 0; }

.espt-block-hero-showcase .espt-hs-in {
	display: flex;
	flex-direction: column;
	gap: var(--_gap);
	margin: 0 auto;
	max-width: var(--espt-container, 1200px);
	min-width: 0;
	position: relative;
	z-index: 1;
}

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

.espt-block-hero-showcase .espt-hs-bg { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 0; }
.espt-block-hero-showcase .espt-hs-bg i { border-radius: 50%; display: none; filter: blur(70px); position: absolute; }

/* soft glow — the design in the brief: white, warmed at two corners */
.espt-block-hero-showcase.is-skin-glow .espt-hs { background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--_a) 13%, transparent), transparent 62%), radial-gradient(70% 80% at 100% 100%, color-mix(in srgb, var(--_a2) 12%, transparent), transparent 60%), var(--_bg); }
.espt-block-hero-showcase.is-skin-soft .espt-hs { --_bg: var(--hs-bg, color-mix(in srgb, var(--_a) 8%, #fff)); }

.espt-block-hero-showcase.is-skin-mesh .espt-hs { --_bg: var(--hs-bg, #fffaf5); }
.espt-block-hero-showcase.is-skin-mesh .espt-hs-bg i,
.espt-block-hero-showcase.is-skin-midnight .espt-hs-bg i { display: block; }
.espt-block-hero-showcase .espt-hs-bg i:nth-child(1) { background: var(--_a); height: 46%; left: -8%; opacity: .34; top: -14%; width: 38%; }
.espt-block-hero-showcase .espt-hs-bg i:nth-child(2) { background: var(--_a2); bottom: -20%; height: 52%; opacity: .32; right: -6%; width: 40%; }
.espt-block-hero-showcase .espt-hs-bg i:nth-child(3) { background: #ec4899; height: 34%; left: 42%; opacity: .16; top: 30%; width: 26%; }

.espt-block-hero-showcase.is-skin-grid .espt-hs-bg {
	-webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
	background-image: linear-gradient(var(--_line) 1px, transparent 1px), linear-gradient(90deg, var(--_line) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}

.espt-block-hero-showcase.is-skin-dark .espt-hs,
.espt-block-hero-showcase.is-skin-midnight .espt-hs {
	--_bg: var(--hs-bg, #0b1220);
	--_ink: var(--hs-title-c, #fff);
	--_tx: var(--hs-text-c, #a3aec2);
	--_btn: var(--hs-btn-bg, #fff);
	--_btn-c: var(--hs-btn-c, #0f172a);
	--_line: rgba(255, 255, 255, .12);
	--_card: var(--hs-logo-bg, rgba(255, 255, 255, .95));
}

.espt-block-hero-showcase.is-skin-midnight .espt-hs { --_bg: var(--hs-bg, #060913); }
.espt-block-hero-showcase.is-skin-midnight .espt-hs-bg i:nth-child(1),
.espt-block-hero-showcase.is-skin-midnight .espt-hs-bg i:nth-child(2) { opacity: .42; }

.espt-block-hero-showcase.is-skin-gradient .espt-hs {
	--_ink: var(--hs-title-c, #fff);
	--_tx: var(--hs-text-c, rgba(255, 255, 255, .88));
	--_price: var(--hs-price-c, #fff);
	--_btn: var(--hs-btn-bg, #fff);
	--_btn-c: var(--hs-btn-c, var(--_a));
	--_line: rgba(255, 255, 255, .28);
	--_t2: #fff3c4;

	background: var(--hs-bg, linear-gradient(135deg, var(--_a), var(--_a2)));
}

.espt-block-hero-showcase.is-skin-none .espt-hs { --_bg: var(--hs-bg, transparent); border-radius: 0; overflow: visible; padding-left: 0; padding-right: 0; }

/* ================================================================== COPY */

.espt-block-hero-showcase .espt-hs-copy { align-items: flex-start; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* pill label */
.espt-block-hero-showcase .espt-hs-eye {
	align-items: center;
	background: var(--hs-eye-bg, #fff);
	border: 1.5px solid color-mix(in srgb, var(--_a) 55%, transparent);
	border-radius: 999px;
	box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--_a) 70%, transparent);
	color: var(--hs-eye-c, #0f172a);
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 700;
	gap: 8px;
	line-height: 1.2;
	max-width: 100%;
	padding: 7px 15px;
}

.espt-block-hero-showcase .espt-hs-dot { background: currentColor; border-radius: 50%; flex: none; height: 7px; width: 7px; }
.espt-block-hero-showcase .espt-hs-eye-ic { color: var(--_a); display: inline-flex; line-height: 0; }
.espt-block-hero-showcase .espt-hs-eye-ic svg { height: 15px; width: 15px; }
.espt-block-hero-showcase.is-eyebrow-style-soft .espt-hs-eye { background: var(--hs-eye-bg, color-mix(in srgb, var(--_a) 13%, transparent)); border-color: transparent; box-shadow: none; color: var(--hs-eye-c, var(--_a)); }
.espt-block-hero-showcase.is-eyebrow-style-solid .espt-hs-eye { background: var(--hs-eye-bg, var(--_a)); border-color: transparent; color: var(--hs-eye-c, #fff); }
.espt-block-hero-showcase.is-eyebrow-style-solid .espt-hs-eye-ic { color: inherit; }
.espt-block-hero-showcase.is-eyebrow-style-plain .espt-hs-eye { background: none; border: 0; box-shadow: none; color: var(--hs-eye-c, var(--_a)); letter-spacing: .04em; padding: 0; }
.espt-block-hero-showcase.is-eyebrow-style-glass .espt-hs-eye { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: var(--hs-eye-bg, rgba(255, 255, 255, .16)); border-color: rgba(255, 255, 255, .4); box-shadow: none; color: var(--hs-eye-c, var(--_ink)); }
.espt-block-hero-showcase.is-skin-dark.is-eyebrow-style-outline .espt-hs-eye,
.espt-block-hero-showcase.is-skin-midnight.is-eyebrow-style-outline .espt-hs-eye { background: var(--hs-eye-bg, rgba(255, 255, 255, .06)); color: var(--hs-eye-c, #fff); }

/* headline */
.espt-block-hero-showcase .espt-hs-t {
	color: var(--_ink);
	font-size: var(--hs-ts, 29px);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.28;
	margin: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 0;
}

.espt-block-hero-showcase .espt-hs-t1,
.espt-block-hero-showcase .espt-hs-t2 { display: block; }
.espt-block-hero-showcase .espt-hs-t2 { color: var(--_t2, var(--_a)); margin-top: .12em; }

.espt-block-hero-showcase.is-title-fx-gradient .espt-hs-t2i { -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, var(--_a), var(--_a2)); color: transparent; }
.espt-block-hero-showcase.is-skin-gradient.is-title-fx-gradient .espt-hs-t2i { background-image: linear-gradient(100deg, #fff, #fff3c4); }

.espt-block-hero-showcase.is-title-fx-underline .espt-hs-t2i {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-6 62-7 98-4s66 5 98-1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .32em;
	padding-bottom: .22em;
}

/* the squiggle is an <svg> in black; a mask lets it take the accent colour */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
	.espt-block-hero-showcase.is-title-fx-underline .espt-hs-t2i { background: none; position: relative; }
	.espt-block-hero-showcase.is-title-fx-underline .espt-hs-t2i::after {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-6 62-7 98-4s66 5 98-1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
		background: currentColor;
		bottom: 0;
		content: "";
		height: .3em;
		left: 0;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-6 62-7 98-4s66 5 98-1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
		opacity: .75;
		position: absolute;
		right: 0;
	}
	.espt-block-hero-showcase.is-title-fx-underline .espt-hs-t2i { display: inline-block; }
}

.espt-block-hero-showcase.is-title-fx-marker .espt-hs-t2 { color: var(--_ink); }
.espt-block-hero-showcase.is-title-fx-marker .espt-hs-t2i { -webkit-box-decoration-break: clone; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--_a) 45%, transparent) 55%); box-decoration-break: clone; padding: 0 .12em; }
.espt-block-hero-showcase.is-title-fx-outline .espt-hs-t2 { -webkit-text-stroke: .03em var(--_t2, var(--_a)); color: transparent; }

/* text, bullets */
.espt-block-hero-showcase .espt-hs-tx { color: var(--_tx); font-size: var(--hs-xs, 15px); line-height: 1.65; margin: 0; max-width: 34em; overflow-wrap: anywhere; }
.espt-block-hero-showcase .espt-hs-tx strong { color: var(--_ink); }
.espt-block-hero-showcase .espt-hs-bl { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.espt-block-hero-showcase .espt-hs-bl li { align-items: flex-start; color: var(--_ink); display: flex; font-size: 15px; font-weight: 600; gap: 8px; line-height: 1.45; list-style: none; margin: 0; padding: 0; }
.espt-block-hero-showcase .espt-hs-bl li::marker { content: none; }
.espt-block-hero-showcase .espt-hs-bi { color: var(--_a); display: inline-flex; flex: none; line-height: 0; margin-top: .12em; }
.espt-block-hero-showcase .espt-hs-bi svg { height: 17px; width: 17px; }

/* price */
.espt-block-hero-showcase .espt-hs-pr { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* The HEADING font, not the body's: a shop's body font is often a single
   regular weight (Mukti here), and a price that cannot be bold reads as thin
   as the text around it. */
.espt-block-hero-showcase .espt-hs-pv { color: var(--_price); font-family: var(--espt-heading-font, inherit); font-size: var(--hs-ps, 30px); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: -.01em; line-height: 1.1; }
.espt-block-hero-showcase .espt-hs-po { color: var(--_tx); font-size: calc(var(--hs-ps, 30px) * .5); font-weight: 600; opacity: .75; text-decoration-thickness: 2px; }
.espt-block-hero-showcase .espt-hs-pb { align-self: center; background: color-mix(in srgb, #dc2626 12%, transparent); border-radius: 999px; color: #dc2626; font-size: 12.5px; font-weight: 800; line-height: 1; padding: 6px 10px; }
.espt-block-hero-showcase.is-skin-dark .espt-hs-pb,
.espt-block-hero-showcase.is-skin-midnight .espt-hs-pb { background: rgba(248, 113, 113, .18); color: #fca5a5; }
.espt-block-hero-showcase.is-skin-gradient .espt-hs-pb { background: rgba(255, 255, 255, .22); color: #fff; }

/* rating: five grey stars, the coloured copy clipped to --w */
.espt-block-hero-showcase .espt-hs-rt { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.espt-block-hero-showcase .espt-hs-stars { color: color-mix(in srgb, var(--_tx) 30%, transparent); display: inline-block; font-size: 17px; letter-spacing: 3px; line-height: 1; position: relative; white-space: nowrap; }
.espt-block-hero-showcase .espt-hs-stars::after { color: var(--hs-star, #fbbf24); content: "★★★★★"; inset: 0 auto 0 0; overflow: hidden; position: absolute; width: var(--w, 100%); }
.espt-block-hero-showcase .espt-hs-rtx { color: var(--_tx); font-size: 14px; font-weight: 500; }

/* buttons */
.espt-block-hero-showcase .espt-hs-cta { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 4px; max-width: 100%; }

.espt-block-hero-showcase .espt-hs-btn {
	align-items: center;
	font-family: var(--espt-heading-font, inherit);
	background: var(--_btn);
	border: 2px solid transparent;
	border-radius: 999px;
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--_btn) 80%, transparent);
	color: var(--_btn-c);
	display: inline-flex;
	font-size: var(--hs-bs, 16px);
	font-weight: 800;
	gap: 10px;
	justify-content: center;
	line-height: 1.2;
	max-width: 100%;
	min-height: 52px;
	overflow: hidden;
	padding: 12px 28px;
	position: relative;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease, background-color .3s ease, color .3s ease;
}

.espt-block-hero-showcase .espt-hs-btn:hover { box-shadow: 0 20px 36px -14px color-mix(in srgb, var(--_btn) 90%, transparent); color: var(--_btn-c); filter: brightness(1.08); transform: translateY(-2px); }
.espt-block-hero-showcase .espt-hs-btn:focus-visible,
.espt-block-hero-showcase .espt-hs-btn2:focus-visible { outline: 3px solid color-mix(in srgb, var(--_a) 60%, #fff); outline-offset: 3px; }
.espt-block-hero-showcase .espt-hs-bic { display: inline-flex; flex: none; line-height: 0; }
.espt-block-hero-showcase .espt-hs-bic svg { height: 1.1em; width: 1.1em; }
.espt-block-hero-showcase.is-btn-icon-pos-before .espt-hs-btn .espt-hs-bic { order: -1; }
.espt-block-hero-showcase .espt-hs-bsh { display: none; }

.espt-block-hero-showcase.is-btn-shape-rounded .espt-hs-btn,
.espt-block-hero-showcase.is-btn-shape-rounded .espt-hs-btn2 { border-radius: 14px; }
.espt-block-hero-showcase.is-btn-shape-square .espt-hs-btn,
.espt-block-hero-showcase.is-btn-shape-square .espt-hs-btn2 { border-radius: 0; }

.espt-block-hero-showcase.is-btn-style-accent .espt-hs { --_btn: var(--hs-btn-bg, var(--_a)); --_btn-c: var(--hs-btn-c, #fff); }
.espt-block-hero-showcase.is-btn-style-gradient .espt-hs { --_btn: var(--hs-btn-bg, var(--_a)); --_btn-c: var(--hs-btn-c, #fff); }
.espt-block-hero-showcase.is-btn-style-gradient .espt-hs-btn { background: linear-gradient(100deg, var(--_btn), var(--_a2)); }
.espt-block-hero-showcase.is-btn-style-outline .espt-hs-btn { background: transparent; border-color: var(--_btn); box-shadow: none; color: var(--_btn); }
.espt-block-hero-showcase.is-btn-style-outline .espt-hs-btn:hover { background: var(--_btn); color: var(--_btn-c); }
.espt-block-hero-showcase.is-btn-style-3d .espt-hs { --_btn: var(--hs-btn-bg, var(--_a)); --_btn-c: var(--hs-btn-c, #fff); }
.espt-block-hero-showcase.is-btn-style-3d .espt-hs-btn { box-shadow: 0 6px 0 color-mix(in srgb, var(--_btn) 66%, #000); }
.espt-block-hero-showcase.is-btn-style-3d .espt-hs-btn:hover { box-shadow: 0 3px 0 color-mix(in srgb, var(--_btn) 66%, #000); transform: translateY(3px); }
.espt-block-hero-showcase.is-btn-style-glass .espt-hs-btn { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--_ink) 10%, transparent); border-color: color-mix(in srgb, var(--_ink) 28%, transparent); box-shadow: none; color: var(--_ink); }
.espt-block-hero-showcase.is-skin-gradient.is-btn-style-accent .espt-hs,
.espt-block-hero-showcase.is-skin-gradient.is-btn-style-gradient .espt-hs,
.espt-block-hero-showcase.is-skin-gradient.is-btn-style-3d .espt-hs { --_btn: var(--hs-btn-bg, #fff); --_btn-c: var(--hs-btn-c, var(--_a)); }
.espt-block-hero-showcase.is-skin-gradient.is-btn-style-gradient .espt-hs-btn { background: linear-gradient(100deg, #fff, #fff3c4); }

.espt-block-hero-showcase .espt-hs-btn2 {
	align-items: center;
	border: 1.5px solid var(--_line);
	border-radius: 999px;
	color: var(--_ink);
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	gap: 8px;
	min-height: 50px;
	padding: 10px 20px;
	text-decoration: none;
	transition: border-color .3s ease, color .3s ease;
}

.espt-block-hero-showcase .espt-hs-btn2:hover { border-color: #25d366; color: #128c7e; }
.espt-block-hero-showcase.is-skin-dark .espt-hs-btn2:hover,
.espt-block-hero-showcase.is-skin-midnight .espt-hs-btn2:hover,
.espt-block-hero-showcase.is-skin-gradient .espt-hs-btn2:hover { color: #86efac; }

.espt-block-hero-showcase .espt-hs-note { align-items: center; color: var(--_tx); display: inline-flex; font-size: 14.5px; font-weight: 600; gap: 7px; }
.espt-block-hero-showcase .espt-hs-nic { color: var(--_ink); display: inline-flex; line-height: 0; }
.espt-block-hero-showcase .espt-hs-nic svg { height: 18px; width: 18px; }

.espt-block-hero-showcase.is-btn-anim-nudge .espt-hs-btn .espt-hs-bic { animation: espt-hs-b-nudge 1.4s ease-in-out infinite; }
.espt-block-hero-showcase.is-btn-anim-pulse .espt-hs-btn { animation: espt-hs-b-pulse 2s infinite; }
.espt-block-hero-showcase.is-btn-anim-bounce .espt-hs-btn { animation: espt-hs-b-bounce 2.4s infinite; }
.espt-block-hero-showcase.is-btn-anim-glow .espt-hs-btn { animation: espt-hs-b-glow 2.2s ease-in-out infinite; }
.espt-block-hero-showcase.is-btn-anim-shine .espt-hs-bsh { animation: espt-hs-b-shine 3s ease-in-out infinite; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); display: block; inset: 0; pointer-events: none; position: absolute; transform: translateX(-120%); }
.espt-block-hero-showcase .espt-hs-btn:hover { animation-play-state: paused; }

@keyframes espt-hs-b-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@keyframes espt-hs-b-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_btn) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes espt-hs-b-bounce { 0%, 62%, 100% { translate: 0 0; } 72% { translate: 0 -7px; } 82% { translate: 0 0; } 90% { translate: 0 -3px; } }
@keyframes espt-hs-b-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 30px 2px color-mix(in srgb, var(--_a) 70%, transparent); } }
@keyframes espt-hs-b-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* certification logos */
.espt-block-hero-showcase .espt-hs-trust { margin-top: 8px; max-width: 100%; width: 100%; }
.espt-block-hero-showcase .espt-hs-tl { color: var(--_tx); font-size: 12.5px; font-weight: 600; margin-bottom: 9px; opacity: .85; }
.espt-block-hero-showcase .espt-hs-lgs { display: grid; gap: 10px; grid-template-columns: repeat(var(--hs-lc, 3), minmax(0, 1fr)); list-style: none; margin: 0; max-width: 540px; padding: 0; }

.espt-block-hero-showcase .espt-hs-lg {
	align-items: center;
	background: var(--_card);
	border: 1px solid var(--_line);
	border-radius: 14px;
	box-shadow: 0 8px 22px -16px rgba(15, 23, 42, .35);
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 12px 10px;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.espt-block-hero-showcase .espt-hs-lg::marker { content: none; }
.espt-block-hero-showcase .espt-hs-lg img { display: block; height: var(--hs-lh, 44px); max-width: 100%; object-fit: contain; transition: filter .35s ease, opacity .35s ease; width: auto; }
.espt-block-hero-showcase .espt-hs-lg picture { display: contents; }
.espt-block-hero-showcase.is-logo-style-plain .espt-hs-lg { background: none; border: 0; box-shadow: none; justify-content: flex-start; padding: 0; }
.espt-block-hero-showcase.is-logo-style-plain .espt-hs-lgs { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.espt-block-hero-showcase.is-logo-style-gray .espt-hs-lg img { filter: grayscale(1); opacity: .7; }
.espt-block-hero-showcase.is-logo-style-pill .espt-hs-lg { aspect-ratio: 1; border-radius: 50%; padding: 14%; }
.espt-block-hero-showcase.is-logo-style-pill .espt-hs-lg img { height: 100%; width: 100%; }
.espt-block-hero-showcase.is-logo-style-pill .espt-hs-lgs { max-width: 360px; }

@media (hover: hover) and (pointer: fine) {
	.espt-block-hero-showcase .espt-hs-lg:hover { box-shadow: 0 14px 26px -16px rgba(15, 23, 42, .45); transform: translateY(-3px); }
	.espt-block-hero-showcase.is-logo-style-plain .espt-hs-lg:hover { box-shadow: none; }
	.espt-block-hero-showcase.is-logo-style-gray .espt-hs-lg:hover img { filter: none; opacity: 1; }
}

/* ================================================================= MEDIA */

/* The far cards of a coverflow or a slide would wander over the text: the
   card side is clipped to its own column — generously above and below (the
   float, the shadows), barely at the sides. clip-path, not overflow: it takes
   negative insets, and it does not make this box a scroll container. */
.espt-block-hero-showcase .espt-hs-media { clip-path: inset(-14% -3% -14% -3%); min-width: 0; position: relative; }

.espt-block-hero-showcase .espt-hs-glow {
	background: radial-gradient(closest-side, color-mix(in srgb, var(--_a) 46%, transparent), color-mix(in srgb, var(--_a2) 22%, transparent) 55%, transparent 100%);
	display: none;
	filter: blur(28px);
	height: 96%;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 46%;
	translate: -50% -50%;
	width: 92%;
	z-index: 0;
}

.espt-block-hero-showcase.is-glow .espt-hs-glow { display: block; }
.espt-block-hero-showcase.is-glow.is-glow-anim .espt-hs-glow { animation: espt-hs-breathe 6s ease-in-out infinite; }
@keyframes espt-hs-breathe { 0%, 100% { opacity: .8; scale: 1; } 50% { opacity: 1; scale: 1.07; } }

/* every card in ONE cell: the stage is as tall as a card plus room to fan */
.espt-block-hero-showcase .espt-hs-stage {
	--_cr: 4 / 5;

	display: grid;
	outline: none;
	padding: 7% 0 9%;
	place-items: center;
	position: relative;
	touch-action: pan-y;
	z-index: 1;
}

.espt-block-hero-showcase.is-card-ratio-3-4 .espt-hs-stage { --_cr: 3 / 4; }
.espt-block-hero-showcase.is-card-ratio-1-1 .espt-hs-stage { --_cr: 1 / 1; }
.espt-block-hero-showcase.is-card-ratio-9-16 .espt-hs-stage { --_cr: 9 / 16; }
.espt-block-hero-showcase.is-card-ratio-4-3 .espt-hs-stage { --_cr: 4 / 3; }
.espt-block-hero-showcase .espt-hs-stage:focus-visible { outline: 3px solid color-mix(in srgb, var(--_a) 60%, transparent); outline-offset: 4px; border-radius: 18px; }

.espt-block-hero-showcase .espt-hs-card {
	aspect-ratio: var(--_cr);
	grid-area: 1 / 1;
	min-width: 0;
	opacity: calc(3 - var(--a, 0));
	pointer-events: none;
	transition: transform var(--_sp) cubic-bezier(.22, .7, .2, 1), opacity var(--_sp) ease, filter var(--_sp) ease;
	width: var(--hs-cw, 58%);
	will-change: transform;
	z-index: calc(20 - var(--a, 0));
}

/* only what can be seen can be pressed: the front card and its two neighbours */
.espt-block-hero-showcase .espt-hs-card.is-active,
.espt-block-hero-showcase .espt-hs-card.is-near { pointer-events: auto; }
.espt-block-hero-showcase .espt-hs-card.is-near,
.espt-block-hero-showcase .espt-hs-card[data-href].is-active { cursor: pointer; }
.espt-block-hero-showcase .espt-hs.is-dragging .espt-hs-card { transition-duration: .15s; }

.espt-block-hero-showcase .espt-hs-cf {
	background: #fff;
	border-radius: var(--hs-cr, 22px);
	box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .55), 0 10px 22px -14px rgba(15, 23, 42, .3);
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
	width: 100%;
}

.espt-block-hero-showcase.is-card-frame-white .espt-hs-cf { border: 5px solid #fff; }
.espt-block-hero-showcase.is-card-frame-glass .espt-hs-cf { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255, 255, 255, .3); border: 5px solid rgba(255, 255, 255, .55); }
.espt-block-hero-showcase.is-card-frame-accent .espt-hs-cf { border: 4px solid var(--_a); }
.espt-block-hero-showcase.is-card-frame-phone .espt-hs-cf { border: 7px solid #0b0f19; border-radius: calc(var(--hs-cr, 22px) + 10px); box-shadow: 0 0 0 1.5px #334155, 0 30px 60px -28px rgba(15, 23, 42, .6); }
.espt-block-hero-showcase.is-card-frame-phone .espt-hs-cf::before { background: #0b0f19; border-radius: 0 0 10px 10px; content: ""; height: 13px; left: 50%; position: absolute; top: 0; translate: -50% 0; width: 34%; z-index: 3; }

.espt-block-hero-showcase .espt-hs-cm { display: block; inset: 0; position: absolute; }
.espt-block-hero-showcase .espt-hs-cm picture { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
.espt-block-hero-showcase .espt-hs-ci { display: block; height: 100%; inset: 0; max-width: none; object-fit: cover; position: absolute; transition: transform .8s cubic-bezier(.2, .7, .2, 1); width: 100%; }
.espt-block-hero-showcase .espt-hs-ph { align-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--_a) 22%, #fff), color-mix(in srgb, var(--_a2) 30%, #fff)); color: color-mix(in srgb, var(--_a) 60%, #fff); display: flex; inset: 0; justify-content: center; position: absolute; }
.espt-block-hero-showcase .espt-hs-phi svg { height: 54px; width: 54px; }
.espt-block-hero-showcase .espt-hs-cfx { display: none; }

.espt-block-hero-showcase .espt-hs-cap {
	background: linear-gradient(0deg, color-mix(in srgb, var(--hs-cap-sh, #000) 72%, transparent), transparent);
	bottom: 0;
	color: var(--hs-cap-c, #fff);
	display: grid;
	gap: 2px;
	left: 0;
	padding: 34% 12px 14px;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: center;
	z-index: 2;
}

.espt-block-hero-showcase.no-captions .espt-hs-cap { display: none; }
.espt-block-hero-showcase .espt-hs-ct { font-family: var(--espt-heading-font, inherit); font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.espt-block-hero-showcase .espt-hs-cs { font-size: 12.5px; font-weight: 500; opacity: .9; overflow-wrap: anywhere; }
/* a product's name can be a paragraph: two lines of title, one of small print */
.espt-block-hero-showcase .espt-hs-ct { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; line-clamp: 2; overflow: hidden; }
.espt-block-hero-showcase .espt-hs-cs { -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; line-clamp: 1; overflow: hidden; }

/* float: the whole hand breathes, each card a little out of step */
.espt-block-hero-showcase.is-float .espt-hs-cf { animation: espt-hs-float 6s ease-in-out infinite; animation-delay: calc(var(--o, 0) * -1.3s); }
@keyframes espt-hs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

@media (hover: hover) and (pointer: fine) {
	.espt-block-hero-showcase.is-card-hover-zoom .espt-hs-card.is-active:hover .espt-hs-ci { transform: scale(1.07); }
	.espt-block-hero-showcase.is-card-hover-lift .espt-hs-card.is-active:hover .espt-hs-cf { box-shadow: 0 40px 70px -28px rgba(15, 23, 42, .6); transform: translateY(-8px) scale(1.015); }
	.espt-block-hero-showcase.is-card-hover-shine .espt-hs-cfx { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); display: block; inset: 0; pointer-events: none; position: absolute; transform: translateX(-120%); z-index: 1; }
	.espt-block-hero-showcase.is-card-hover-shine .espt-hs-card.is-active:hover .espt-hs-cfx { transform: translateX(120%); transition: transform .9s ease; }
	.espt-block-hero-showcase .espt-hs-card.is-near:hover .espt-hs-cf { transform: translateY(-5px); }
}

/* -------------------------------------------------------- slider styles */

/* 01 fan — three cards on show, as in the brief: the front one and a
   neighbour at each side. The rest wait, invisible, in the wings. */
.espt-block-hero-showcase.is-slider-style-fan .espt-hs-card {
	opacity: calc(2 - var(--a, 0));
	filter: saturate(calc(1 - var(--a, 0) * .18)) brightness(calc(1 - var(--a, 0) * .04));
	transform: translateX(calc(var(--o, 0) * 46%)) translateY(calc(var(--a, 0) * 4.5%)) rotate(calc(var(--o, 0) * 10deg)) scale(calc(1 - var(--a, 0) * .11));
	transform-origin: 50% 110%;
}

/* 02 coverflow */
.espt-block-hero-showcase.is-slider-style-coverflow .espt-hs-stage { perspective: 1300px; }
.espt-block-hero-showcase.is-slider-style-coverflow .espt-hs-card {
	filter: brightness(calc(1 - var(--a, 0) * .16));
	transform: translateX(calc(var(--o, 0) * 54%)) rotateY(calc(var(--o, 0) * -40deg)) scale(calc(1 - var(--a, 0) * .13));
}

/* 03 deck: the cards to come wait behind, the one that left slips away left */
.espt-block-hero-showcase.is-slider-style-deck .espt-hs-card {
	opacity: min(calc(1 + min(var(--o, 0), 0) * 2), calc(4 - var(--a, 0)));
	transform: translateX(calc(max(var(--o, 0), 0) * 9% + min(var(--o, 0), 0) * 120%)) translateY(calc(max(var(--o, 0), 0) * -5%)) rotate(calc(min(var(--o, 0), 0) * 14deg)) scale(calc(1 - max(var(--o, 0), 0) * .07));
	z-index: calc(20 - var(--a, 0) - max(var(--o, 0), 0));
}

/* 04 slide */
.espt-block-hero-showcase.is-slider-style-slide .espt-hs-stage { overflow: hidden; }
.espt-block-hero-showcase.is-slider-style-slide .espt-hs-card { opacity: calc(2 - var(--a, 0)); transform: translateX(calc(var(--o, 0) * 116%)); }

/* 05 fade */
.espt-block-hero-showcase.is-slider-style-fade .espt-hs-card { opacity: calc(1 - var(--a, 0)); transform: scale(calc(1 + var(--a, 0) * .05)); }

/* 06 flip */
.espt-block-hero-showcase.is-slider-style-flip .espt-hs-stage { perspective: 1200px; }
.espt-block-hero-showcase.is-slider-style-flip .espt-hs-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: calc(1.5 - var(--a, 0)); transform: rotateY(calc(var(--o, 0) * 180deg)); }

/* 07 orbit: the others shrink and take their place on a ring around the front card */
.espt-block-hero-showcase.is-slider-style-orbit .espt-hs-stage { padding: 16% 0; }
.espt-block-hero-showcase.is-slider-style-orbit .espt-hs-card {
	--_on: min(var(--a, 0), 1);
	--_ang: calc(var(--o, 0) * 360deg / var(--n, 5));

	opacity: 1;
	transform: rotate(calc(var(--_on) * var(--_ang))) translateY(calc(var(--_on) * -66%)) rotate(calc(var(--_on) * var(--_ang) * -1)) scale(calc(1 - var(--_on) * .7));
	z-index: calc(20 - var(--_on) * 10);
}

.espt-block-hero-showcase.is-slider-style-orbit .espt-hs-card:not(.is-active) { pointer-events: auto; cursor: pointer; }
.espt-block-hero-showcase.is-slider-style-orbit .espt-hs-card:not(.is-active) .espt-hs-cap { display: none; }
.espt-block-hero-showcase.is-slider-style-orbit .espt-hs-card:not(.is-active) .espt-hs-cf { border-radius: 50%; border-width: 10px; }

/* one card: nothing to slide */
.espt-block-hero-showcase .espt-hs.is-single .espt-hs-card { opacity: 1; transform: none; }

/* ---- floating chips ---- */
.espt-block-hero-showcase .espt-hs-chip {
	align-items: center;
	animation: espt-hs-chip 5s ease-in-out infinite;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .5);
	color: #0f172a;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
	line-height: 1.2;
	max-width: 46%;
	padding: 7px 12px;
	pointer-events: none;
	position: absolute;
	z-index: 30;
}

.espt-block-hero-showcase .espt-hs-chi { color: var(--_a); display: inline-flex; flex: none; line-height: 0; }
.espt-block-hero-showcase .espt-hs-chi svg { height: 15px; width: 15px; }
.espt-block-hero-showcase .espt-hs-chip.is-c0 { left: 0; top: 9%; }
.espt-block-hero-showcase .espt-hs-chip.is-c1 { animation-delay: -2.5s; bottom: 20%; right: 0; }
.espt-block-hero-showcase .espt-hs-chip.is-c2 { animation-delay: -1.2s; right: 2%; top: 4%; }
.espt-block-hero-showcase .espt-hs-chip.is-c3 { animation-delay: -3.6s; bottom: 16%; left: 2%; }
@keyframes espt-hs-chip { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* ---- arrows, dots ---- */
.espt-block-hero-showcase .espt-hs-nav {
	align-items: center;
	appearance: none;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 8px 22px -8px rgba(15, 23, 42, .45);
	color: #0f172a;
	cursor: pointer;
	display: none;
	height: 42px;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 46%;
	transition: transform .3s ease, background-color .3s ease, color .3s ease;
	translate: 0 -50%;
	width: 42px;
	z-index: 31;
}

.espt-block-hero-showcase.is-arrows .espt-hs-nav { display: flex; }
.espt-block-hero-showcase .espt-hs-nav.is-prev { left: 2px; }
.espt-block-hero-showcase .espt-hs-nav.is-next { right: 2px; }
.espt-block-hero-showcase .espt-hs-nav:hover { background: var(--_a); color: #fff; transform: scale(1.08); }
.espt-block-hero-showcase .espt-hs-nav:focus-visible { outline: 3px solid var(--_a); outline-offset: 2px; }

.espt-block-hero-showcase .espt-hs-dots { align-items: center; display: flex; gap: 4px; justify-content: center; margin-top: -2%; position: relative; z-index: 31; }

/* a 24px target around a small dot: big enough for a thumb, quiet to look at */
.espt-block-hero-showcase .espt-hs-dotb { align-items: center; appearance: none; background: none; border: 0; box-shadow: none; cursor: pointer; display: inline-flex; height: 24px; justify-content: center; margin: 0; min-width: 16px; padding: 0 3px; }
.espt-block-hero-showcase .espt-hs-dotb i { background: color-mix(in srgb, var(--_ink) 22%, transparent); border-radius: 999px; display: block; height: 7px; overflow: hidden; position: relative; transition: width .45s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; width: 7px; }
.espt-block-hero-showcase .espt-hs-dotb.is-on i { background: var(--_ink); }
.espt-block-hero-showcase .espt-hs-dotb:focus-visible { outline: 3px solid var(--_a); outline-offset: 0; border-radius: 8px; }
.espt-block-hero-showcase.is-dots-pill .espt-hs-dotb.is-on i,
.espt-block-hero-showcase.is-dots-progress .espt-hs-dotb.is-on i { width: 26px; }
.espt-block-hero-showcase.is-dots-line .espt-hs-dotb i { border-radius: 2px; height: 3px; width: 20px; }
.espt-block-hero-showcase.is-dots-progress .espt-hs-dotb.is-on i { background: color-mix(in srgb, var(--_ink) 22%, transparent); }
.espt-block-hero-showcase.is-dots-progress .espt-hs-dotb.is-on i::after { animation: espt-hs-fill var(--_wait, 3.5s) linear forwards; background: var(--_a); border-radius: inherit; content: ""; inset: 0; position: absolute; transform: scaleX(0); transform-origin: 0 50%; }
.espt-block-hero-showcase.is-dots-progress .espt-hs.is-paused .espt-hs-dotb.is-on i::after { animation-play-state: paused; }
@keyframes espt-hs-fill { to { transform: scaleX(1); } }

/* ============================================================= PHONES */

@media (max-width: 767px) {
	.espt-block-hero-showcase.is-text-align-center .espt-hs-copy { align-items: center; text-align: center; }
	.espt-block-hero-showcase.is-text-align-center .espt-hs-cta,
	.espt-block-hero-showcase.is-text-align-center .espt-hs-pr,
	.espt-block-hero-showcase.is-text-align-center .espt-hs-rt { justify-content: center; }
	.espt-block-hero-showcase.is-text-align-center .espt-hs-lgs { margin-left: auto; margin-right: auto; }
	.espt-block-hero-showcase.is-text-align-right .espt-hs-copy { align-items: flex-end; text-align: right; }

	.espt-block-hero-showcase.is-mobile-media-top .espt-hs-media { order: -1; }

	/* "after the headline": the copy's children join the column as equals, so
	   the cards can take a place among them */
	.espt-block-hero-showcase.is-mobile-media-middle .espt-hs-copy { display: contents; }
	.espt-block-hero-showcase.is-mobile-media-middle .espt-hs-in { align-items: flex-start; gap: 14px; }
	.espt-block-hero-showcase.is-mobile-media-middle.is-text-align-center .espt-hs-in { align-items: center; text-align: center; }
	.espt-block-hero-showcase.is-mobile-media-middle .espt-hs-eye { order: 1; }
	.espt-block-hero-showcase.is-mobile-media-middle .espt-hs-t { order: 2; }
	.espt-block-hero-showcase.is-mobile-media-middle .espt-hs-media { align-self: stretch; order: 3; }
	.espt-block-hero-showcase.is-mobile-media-middle .espt-hs-copy > :not(.espt-hs-eye):not(.espt-hs-t) { order: 4; }

	.espt-block-hero-showcase .espt-hs-btn { flex: 1 1 auto; }
	.espt-block-hero-showcase .espt-hs-chip { font-size: 11px; padding: 6px 10px; }
}

/* ============================================================ TEMPLATES */

@media (min-width: 768px) {
	.espt-block-hero-showcase .espt-hs { padding-left: 24px; padding-right: 24px; }
	.espt-block-hero-showcase.is-skin-none .espt-hs { padding-left: 0; padding-right: 0; }
	.espt-block-hero-showcase .espt-hs-copy { gap: 18px; }
	.espt-block-hero-showcase .espt-hs-ct { font-size: 17px; }
	.espt-block-hero-showcase .espt-hs-cs { font-size: 13.5px; }
	.espt-block-hero-showcase .espt-hs-chip { font-size: 13px; padding: 8px 14px; }
	.espt-block-hero-showcase .espt-hs-eye { font-size: 14.5px; }

	/* 01 / 02 side by side */
	.espt-block-hero-showcase.is-template-right .espt-hs:not(.no-media) .espt-hs-in,
	.espt-block-hero-showcase.is-template-left .espt-hs:not(.no-media) .espt-hs-in,
	.espt-block-hero-showcase.is-template-panel .espt-hs:not(.no-media) .espt-hs-in {
		align-items: center;
		display: grid;
		grid-template-columns: minmax(0, var(--hs-cpw, 48%)) minmax(0, 1fr);
	}

	.espt-block-hero-showcase.is-template-left .espt-hs:not(.no-media) .espt-hs-in { grid-template-columns: minmax(0, 1fr) minmax(0, var(--hs-cpw, 48%)); }
	.espt-block-hero-showcase.is-template-left .espt-hs-media { order: -1; }

	/* 04 the text on a floating panel that leans over the cards */
	.espt-block-hero-showcase.is-template-panel .espt-hs-copy {
		background: color-mix(in srgb, var(--_bg) 86%, transparent);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border: 1px solid var(--_line);
		border-radius: 26px;
		box-shadow: 0 30px 70px -36px rgba(15, 23, 42, .5);
		margin-right: -8%;
		padding: 34px;
		position: relative;
		z-index: 40;
	}

	.espt-block-hero-showcase.is-skin-gradient.is-template-panel .espt-hs-copy { background: rgba(0, 0, 0, .2); }
	.espt-block-hero-showcase.is-skin-none.is-template-panel .espt-hs-copy { background: #fff; }

	/* 05 wide: big cards take the larger share. The two sides share ONE cell so
	   the hand can lean a little way under the text's edge — but the widths are
	   kept apart (40% + 58%): cards running under the words made them unreadable. */
	.espt-block-hero-showcase.is-template-wide .espt-hs:not(.no-media) .espt-hs-in { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr); }
	.espt-block-hero-showcase.is-template-wide .espt-hs:not(.no-media) .espt-hs-copy,
	.espt-block-hero-showcase.is-template-wide .espt-hs:not(.no-media) .espt-hs-media { grid-area: 1 / 1; }
	.espt-block-hero-showcase.is-template-wide .espt-hs:not(.no-media) .espt-hs-copy { max-width: 40%; position: relative; z-index: 40; }
	.espt-block-hero-showcase.is-template-wide .espt-hs:not(.no-media) .espt-hs-media { justify-self: end; width: 58%; }
	.espt-block-hero-showcase.is-template-wide .espt-hs-card { width: min(calc(var(--hs-cw, 52%) * 1.12), 70%); }
}

/* 03 centred — at every width */
.espt-block-hero-showcase.is-template-center .espt-hs-copy { align-items: center; margin: 0 auto; max-width: 780px; text-align: center; }
.espt-block-hero-showcase.is-template-center .espt-hs-cta,
.espt-block-hero-showcase.is-template-center .espt-hs-pr,
.espt-block-hero-showcase.is-template-center .espt-hs-rt { justify-content: center; }
.espt-block-hero-showcase.is-template-center .espt-hs-tx,
.espt-block-hero-showcase.is-template-center .espt-hs-lgs { margin-left: auto; margin-right: auto; }
.espt-block-hero-showcase.is-template-center .espt-hs-media { margin: 0 auto; max-width: 720px; width: 100%; }
.espt-block-hero-showcase.is-template-center .espt-hs-bl { justify-items: center; }

@media (min-width: 768px) {
	/* in so wide a row the cards are a share of a narrower side */
	.espt-block-hero-showcase.is-template-center .espt-hs-card { width: calc(var(--hs-cw, 52%) * .72); }
}

/* ============================================================= ENTRANCE
   Hidden until hero-showcase.js adds .is-in. `backwards`: once it has
   played, hover and the float own the transforms again. */

.espt-block-hero-showcase:not(.is-anim-in-none) .espt-hs[data-hs-in] .espt-hs-copy > *,
.espt-block-hero-showcase:not(.is-anim-in-none) .espt-hs[data-hs-in] .espt-hs-media { opacity: 0; }

.espt-block-hero-showcase:not(.is-anim-in-none) .espt-hs[data-hs-in].is-in .espt-hs-copy > *,
.espt-block-hero-showcase:not(.is-anim-in-none) .espt-hs[data-hs-in].is-in .espt-hs-media {
	animation: var(--_in, espt-hs-in-up) .8s cubic-bezier(.2, .7, .2, 1) backwards;
	animation-delay: calc(.05s + var(--i, 0) * .09s);
	opacity: 1;
}

.espt-block-hero-showcase .espt-hs[data-hs-in].is-in .espt-hs-media { animation-delay: .25s; animation-duration: 1s; animation-name: var(--_inm, espt-hs-in-media); }

.espt-block-hero-showcase.is-anim-in-fade .espt-hs { --_in: espt-hs-in-fade; --_inm: espt-hs-in-fade; }
.espt-block-hero-showcase.is-anim-in-up .espt-hs { --_in: espt-hs-in-up; }
.espt-block-hero-showcase.is-anim-in-left .espt-hs { --_in: espt-hs-in-left; --_inm: espt-hs-in-right; }
.espt-block-hero-showcase.is-anim-in-zoom .espt-hs { --_in: espt-hs-in-zoom; }
.espt-block-hero-showcase.is-anim-in-blur .espt-hs { --_in: espt-hs-in-blur; --_inm: espt-hs-in-blur; }

@keyframes espt-hs-in-fade { from { opacity: 0; } }
@keyframes espt-hs-in-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes espt-hs-in-left { from { opacity: 0; transform: translateX(-34px); } }
@keyframes espt-hs-in-right { from { opacity: 0; transform: translateX(44px); } }
@keyframes espt-hs-in-zoom { from { opacity: 0; transform: scale(.9); } }
@keyframes espt-hs-in-blur { from { filter: blur(14px); opacity: 0; } }
@keyframes espt-hs-in-media { from { opacity: 0; transform: translateY(30px) scale(.94); } }

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

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

	.espt-block-hero-showcase .espt-hs[data-hs-in] .espt-hs-copy > *,
	.espt-block-hero-showcase .espt-hs[data-hs-in] .espt-hs-media { opacity: 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-hero-showcase:is(.has-espt-box-full-container, .has-espt-box-full-browser) .espt-hs { border-left: 0; border-radius: 0; border-right: 0; }