/* ==========================================================================
   Embed Next V2  —  page-specific styles (.en-*)
   Depends on home-v2.css for @font-face, .hv2, .hv-shell.
   All values sourced from Figma 18:26224 (desktop) / 18:29028 (mobile).
   ========================================================================== */

/* ---- shared bits ---------------------------------------------------------- */
.en-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	padding: 8px 20px 8px 16px;
}
.en-tag__dot { width: 8px; height: 8px; border-radius: 1px; background: #2ad9c4; flex: none; }
.en-tag__label { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.16px; color: #fff; }

.en-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 2px;
	background: #2ad9c4;
	color: #0a0a0a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.en-btn:hover { background: #24c3b0; }

/* reusable centered section header */
.en-head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	padding: 80px 0 48px;
	overflow: hidden;
}
.en-head--bordered {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.en-light .en-head--bordered { border-color: rgba(17, 17, 17, 0.2); }
.en-head > * { position: relative; z-index: 1; }
.en-head__eyebrow {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.en-head__title {
	margin: 0;
	max-width: min(1050px, 100%);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.72px;
	color: #fff;
}
.en-head__sub {
	margin: 0;
	max-width: min(1104px, 100%);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: rgba(255, 255, 255, 0.7);
}
.en-light .en-head__eyebrow { color: rgba(0, 0, 0, 0.7); }
.en-light .en-head__title { color: #111; }
.en-light .en-head__sub { color: rgba(0, 0, 0, 0.7); }

/* ==========================================================================
   1. HERO  (Figma 18:26225)
   ========================================================================== */
.en-hero {
	background: #0e0e0e;
	padding: 100px 0 0;
}
.en-hero__inner {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: min(1720px, 100%);
	margin: 0 auto;
}
.en-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	/* Figma splits the 1720 hero row 720 copy / 1000 visual. Held at a
	   fixed 720 with flex:none, the copy kept its full width at every
	   viewport and the visual absorbed the entire shortfall — it fell to
	   230px by 1280, under a third of the animation's natural size. Both
	   sides now carry their Figma width as a basis and shrink together, so
	   the split holds at the design ratio. Same fix as .rp-hero__copy. */
	flex: 1 1 720px;
	min-width: 0;
}
.en-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.en-hero__title {
	margin: 0;
	max-width: 799px;
	font-size: 64px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.28px;
	color: #fff;
}
.en-hero__lede {
	margin: 0;
	max-width: 679px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.56px;
	color: rgba(255, 255, 255, 0.6);
}
.en-hero__visual { flex: 1 1 1000px; min-width: 0; }
.en-hero__visual img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   2. PLATFORM CAPABILITIES BENTO  (Figma 18:26744, dark)
   ========================================================================== */
.en-cap { background: #0e0e0e; padding: 100px 0 0; }
.en-cap__grid { max-width: min(1600px, 100%); margin: 56px auto 0; }
.en-cap__bento { position: relative; width: 100%; }
.en-cap__bento-img { width: 100%; height: auto; display: block; }
.en-cap__mobile { display: none; }

/* Center preview viewport. The bento image (s2-bento-frame.png) has its static
   center erased, so this overlay is transparent and inset just inside the frame
   border — it never paints over the frame's top/bottom border lines. */
.en-cap__viewport {
	position: absolute;
	top: 2%;                  /* stay inside the frame's top/bottom border lines */
	bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
	width: 30%;               /* matches the 414px-wide stack; inside the frame verticals */
	overflow: hidden;
	background: transparent;
}
/* Fade content to transparent near the top/bottom so screens entering/leaving
   the frame dissolve into the (erased) #0e0e0e center instead of showing a hard
   clipped sliver. True alpha fade — no dark overlay, so no visible band. */
.en-cap__reel-mask {
	position: absolute;
	inset: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.en-cap__reel {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: en-cap-scroll 24s linear infinite;
	will-change: transform;
}
.en-cap__screen {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 3.5%;      /* inter-screen gap; on every item (incl. last) for a clean seam */
}
/* Two identical sets stacked → -50% is exactly one set → seamless, jump-free loop. */
@keyframes en-cap-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.en-cap__reel { animation: none; }
}

/* ==========================================================================
   3. ONE INTEGRATION  (Figma 18:27175, dark)
   ========================================================================== */
.en-how {
	position: relative;
	background: #0e0e0e;
	overflow: hidden;
	padding: 100px 0 280px;
}
.en-how > * { position: relative; z-index: 1; }
.en-how .hv-section-glow { position: absolute; z-index: 0; }
.en-how__row {
	display: flex;
	align-items: stretch;
	gap: 64px;
	max-width: min(1600px, 100%);
	margin: 56px auto 0;
}
.en-how__steps {
	width: 372px;
	flex: none;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	overflow: hidden;
}
.en-how__step {
	flex: 1;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	padding: 16px 24px;
	position: relative;
	width: 100%;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	text-align: left;
	font: inherit;
	color: rgba(255, 255, 255, 0.2);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.3s ease, background 0.3s ease;
}
.en-how__step:last-child { border-bottom: none; }
.en-how__step.is-active { color: #fff; background: rgba(255, 255, 255, 0.05); }
/* Accent bar on the right edge of the active step (Figma "Line 287"). */
.en-how__step.is-active::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 3px;
	background: #2ad9c4;
}
.en-how__step-num {
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.48px;
	color: inherit;
	transition: font-size 0.3s ease;
}
.en-how__step.is-active .en-how__step-num { font-size: 28px; letter-spacing: -0.56px; }
.en-how__step-title {
	margin: 0;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.56px;
	color: inherit;
	transition: font-size 0.3s ease;
}
.en-how__step.is-active .en-how__step-title { font-size: 32px; letter-spacing: -0.64px; }
/* Right visual: stacked images cross-faded per active step. */
.en-how__visual { flex: 1 1 0; min-width: 0; position: relative; }
.en-how__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}
/* The ACTIVE image is the only one in flow, so it sets the panel's height — and
   step 1 is 1164x800 (ratio 1.455) while steps 2-4 are 1150x800 (1.4375). Once
   the panel grew taller than the steps column (from ~1800px up) the row, the
   section and the whole document changed height every time the step advanced:
   a 10px jog at 1920, repeating every 3s because the stepper auto-advances, so
   everything below it kept nudging up and down.

   Pinning the box to the shared 1150/800 ratio makes all four compute the same
   height, so the panel is stable whichever step is showing. object-fit: contain
   is already set, so step 1's slightly wider artwork just letterboxes by ~1%
   rather than being cropped or distorted. */
.en-how__img.is-active {
	position: relative;
	height: auto;
	aspect-ratio: 1150 / 800;
	opacity: 1;
	pointer-events: auto;
}
.en-how__mobile { display: none; }

/* ==========================================================================
   4. CO-BRAND INTEGRATION  (Figma 18:27377, light)
   ========================================================================== */
/* The glow section above ends in the arc, and that arc IS the transition into
   this section — stacking a top padding on it as well read as one huge gap.
   Zeroed here (not in home-v2.css, which this sheet loads after). */
.en-cobrand { background: #f6f6f6; padding: 0 0 64px; }
.en-cobrand .en-head { padding: 80px 0; }
.en-cobrand__diagram { max-width: min(1560px, 100%); margin: 40px auto 0; }

/* Diagram rebuilt from Figma 18:27388 (HTML/CSS; only icons are assets). */
.encb { position: relative; }

/* -- Experience layer (teal band) -- */
.encb__exp {
	position: relative;
	padding: 0 20px 20px;
	background-color: #dbedeb;
	background-image: repeating-linear-gradient(135deg, rgba(9, 65, 62, 0.035) 0 1px, transparent 1px 22px);
}
.encb__corner { position: absolute; width: 10px; height: 10px; background: #2ad9c4; }
.encb__corner--tl { top: 0; left: 0; }
.encb__corner--tr { top: 0; right: 0; }
.encb__corner--bl { bottom: 0; left: 0; }
.encb__corner--br { bottom: 0; right: 0; }
.encb__title {
	margin: 0;
	padding: 20px 8px;
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.64px;
	text-transform: uppercase;
}
.encb__title--exp { color: #2ad9c4; border-bottom: 1px solid rgba(17, 17, 17, 0.1); }
.encb__cards { display: flex; gap: 20px; padding: 20px 20px 0; }
.encb__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: #fff;
}
.encb__icon {
	flex: none;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.encb__icon svg { width: 36px; height: 36px; display: block; }
.encb__icon--exp { background: #09413e; border: 1px solid rgba(42, 217, 196, 0.2); }
.encb__icon--bank { background: rgba(17, 17, 17, 0.1); border: 1px solid rgba(17, 17, 17, 0.2); }
.encb__card-title {
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.4px;
	color: #111;
}
.encb__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.encb__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.32px;
	color: rgba(17, 17, 17, 0.7);
}
.encb__dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 1px; background: #2ad9c4; }

/* -- Connectors + centre node -- */
.encb__mid { position: relative; height: 72px; }
/* Dashed connector; the dashes themselves march downward (experience -> bank)
   as the subtle signal. Dash period is 12px, so one 12px step loops seamlessly. */
.encb__link {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;              /* centre on the connector (left set inline) */
	background-image: repeating-linear-gradient(to bottom, rgba(42, 217, 196, 0.7) 0 6px, transparent 6px 12px);
	background-size: 2px 12px;
	background-repeat: repeat-y;
	animation: encb-flow 1s linear infinite;
}
.encb__link:nth-child(2) { animation-delay: 0.25s; }
.encb__link:nth-child(3) { animation-delay: 0.5s; }
.encb__link:nth-child(4) { animation-delay: 0.75s; }
@keyframes encb-flow {
	from { background-position-y: 0; }
	to   { background-position-y: 12px; }
}
.encb__node {
	position: absolute;
	/* 58%, not 50%: centred on the 72px connector band the node's bottom landed
	   7px above the bank title's BOX, but that box is 70px tall and the words sit
	   ~20px into it, so the plus read as floating well clear of "STANDARD BANK
	   INTEGRATION". Nudging it down closes that visual gap without moving the
	   title. It still overlaps the band's dashed links, and being positioned it
	   paints above .encb__bank. */
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 90 -> 120, with the white ring and the plus glyph scaled to match so the
	   proportions are unchanged. */
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 16px solid #fff;
	background: linear-gradient(to bottom, #2ad9c4, #044b47);
	box-shadow: 0 7px 7px rgba(28, 4, 3, 0.2);
}
.encb__node::before, .encb__node::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	border-radius: 2px;
}
.encb__node::before { width: 34px; height: 6px; transform: translate(-50%, -50%); }
.encb__node::after { width: 6px; height: 34px; transform: translate(-50%, -50%); }

/* -- Standard bank integration -- */
.encb__bank { background: #fff; border-radius: 2px 2px 0 0; padding: 16px 0; }
.encb__title--bank { color: #111; border-bottom: 1px solid rgba(17, 17, 17, 0.2); }
.encb__apis { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 56px; padding: 20px 40px 0; }
.encb__api { display: flex; align-items: center; gap: 20px; padding: 8px 0; }
.encb__api-label { font-size: 24px; font-weight: 500; line-height: 1.2; color: #111; white-space: nowrap; }

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

/* ==========================================================================
   5. ZERO ROADBLOCKS ON COMPLIANCE  (Figma 18:27643, light)
   ========================================================================== */
.en-trust { background: #f6f6f6; padding: 100px 0 0; }
.en-trust__card {
	position: relative;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	min-height: 564px;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 56px;
}
.en-trust__copy { display: flex; flex-direction: column; gap: 20px; width: 771px; max-width: 55%; flex: none; }
.en-trust__eyebrow {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.7);
}
.en-trust__title {
	margin: 0;
	font-size: 56px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -1.12px;
	color: #111;
}
.en-trust__title em {
	font-style: normal;
	background: linear-gradient(90deg, #1d403c, #2ad9c4);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.en-trust__desc {
	margin: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: rgba(17, 17, 17, 0.7);
}
.en-trust__visual { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.en-trust__visual img { width: 100%; max-width: 527px; height: auto; display: block; }

/* ==========================================================================
   6. FAQ  (Figma 18:27708, light)
   ========================================================================== */
.en-faq { background: #f6f6f6; padding: 100px 0; }
.en-faq .en-head { padding: 80px 0; }
.en-faq__card {
	width: 100%;
	max-width: min(1234px, 100%);
	margin: 56px auto 0;
	border: 1px solid rgba(17, 17, 17, 0.2);
	padding: 0 40px;
}
.en-faq__item { border-bottom: 1px solid rgba(17, 17, 17, 0.2); }
.en-faq__item:last-child { border-bottom: none; }
.en-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 0;
	cursor: pointer;
	list-style: none;
}
.en-faq__q::-webkit-details-marker { display: none; }
.en-faq__q-text { font-size: 20px; font-weight: 400; line-height: 26px; color: #111; }
.en-faq__chev { flex: none; width: 24px; height: 24px; color: #111; transition: transform 0.2s ease; }
.en-faq__item[open] .en-faq__chev { transform: scaleY(-1); }
/* Native <details> snaps open; ::details-content is the wrapper the browser puts
   around the panel, so its height can be animated. interpolate-size is what lets
   `auto` take part in the transition, and content-visibility has to transition
   with allow-discrete or the panel would pop in fully on frame one and only its
   height would move. Browsers without ::details-content open instantly, as before. */
.en-faq__item { interpolate-size: allow-keywords; }
.en-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
.en-faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
	.en-faq__item::details-content { transition: none; }
}
.en-faq__a {
	margin: 0;
	padding: 0 0 40px;
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
	color: rgba(17, 17, 17, 0.6);
}

/* ==========================================================================
   7. CTA BANNER  (Figma 18:27760)
   ========================================================================== */
.en-cta { background: #0e0e0e; padding: 100px 0; }
.en-cta__banner {
	position: relative;
	width: 100%;
	max-width: min(1600px, 100%);
	margin: 0 auto;
	min-height: 520px;
	border-radius: 32px;
	overflow: hidden;
	background: #0a1614 url("../img/en-v2/cta-bg.webp") center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
}
.en-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	max-width: min(1123px, 100%);
	text-align: center;
}
.en-cta__copy { display: flex; flex-direction: column; gap: 12px; }
.en-cta__title { margin: 0; font-size: 59px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.en-cta__title em { font-style: normal; color: #2ad9c4; }
.en-cta__sub { margin: 0; font-size: 27px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.en-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 2px;
	background: #fff;
	color: #0a0a0a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.16px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.en-cta__btn:hover { opacity: 0.9; }

/* ==========================================================================
   RESPONSIVE  (mobile ref: Figma 18:29028)
   ========================================================================== */
@media (max-width: 1200px) {
	.en-trust__copy { max-width: 50%; }
}

@media (max-width: 900px) {
	.hv-shell { padding-inline: 24px; }
	.hv2 main { overflow-x: hidden; }

	/* rhythm */
	.en-hero { padding: 48px 0 56px; }
	.en-cap, .en-how, .en-cobrand, .en-trust, .en-faq, .en-cta { padding: 56px 0; }
	.en-how { padding-bottom: 56px; }

	/* mobile section glow uses the mobile arc, matching the home page */
	.en-head { padding: 40px 0 28px; }
	.en-cobrand .en-head, .en-faq .en-head { padding: 40px 0 28px; }

	/* shared type */
	.en-head__title { font-size: 26px; letter-spacing: -0.5px; }
	.en-head__sub { font-size: 17px; letter-spacing: -0.3px; }

	/* 1. hero — stack */
	.en-hero__visual { flex: 0 1 auto; }
	.en-hero__inner { flex-direction: column; align-items: stretch; gap: 32px; max-width: 100%; }
	.en-hero__copy { flex: 0 1 auto; width: 100%; gap: 28px; }
	.en-hero__title { font-size: 34px; letter-spacing: -0.68px; }
	.en-hero__lede { font-size: 18px; letter-spacing: -0.36px; }
	.en-hero__visual { max-width: 100%; }

	/* 2. capabilities — animation reel on top, feature cards below (Figma 18:29541) */
	.en-cap__grid { display: none; }
	.en-cap__mobile { display: block; margin-top: 40px; }
	/* top: auto-scrolling preview reel */
	.en-cap__mreel-vp { position: relative; height: 340px; overflow: hidden; background: #0e0e0e; }
	.en-cap__mreel { display: flex; flex-direction: column; align-items: center; animation: en-cap-scroll 34s linear infinite; }
	.en-cap__mscreen { width: 100%; height: auto; display: block; margin-bottom: 16px; }
	/* bottom: 6 feature cards */
	.en-cap__mcards { margin-top: 32px; border: 1px solid #333; }
	.en-cap__mcard { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; }
	.en-cap__mcard + .en-cap__mcard { border-top: 1px solid #333; }
	.en-cap__micon {
		flex: none; width: 40px; height: 40px;
		display: flex; align-items: center; justify-content: center;
		background: #09413e; border: 1px solid rgba(255, 255, 255, 0.2);
	}
	.en-cap__micon svg { width: 24px; height: 24px; display: block; }
	.en-cap__mtext { display: flex; flex-direction: column; gap: 8px; }
	.en-cap__mtitle { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.36px; color: #fff; }
	.en-cap__mdesc { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.2px; color: rgba(255, 255, 255, 0.7); }
	.en-cap__mtags { display: flex; flex-wrap: wrap; gap: 8px; }
	.en-cap__mtag {
		padding: 6px 12px; border-radius: 100px;
		background: rgba(42, 217, 196, 0.1); border: 1px solid rgba(42, 217, 196, 0.15);
		font-size: 12px; letter-spacing: -0.2px; color: #2ad9c4; white-space: nowrap;
	}

	/* 4. co-brand diagram — compact 2x2 card grid (Figma mobile 18:30913) */
	.encb__exp { padding: 0 10px 10px; }
	.encb__title { padding: 14px 8px; }
	.encb__title--exp { font-size: 14px; letter-spacing: -0.2px; }
	.encb__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
	.encb__card { padding: 14px 10px; gap: 12px; }
	.encb__icon { width: 40px; height: 40px; }
	.encb__icon svg { width: 22px; height: 22px; }
	.encb__card-title { font-size: 13px; letter-spacing: -0.2px; line-height: 1.3; }
	.encb__bullets { gap: 7px; }
	.encb__bullets li { font-size: 11px; letter-spacing: -0.1px; line-height: 1.25; }
	.encb__dot { width: 6px; height: 6px; margin-top: 3px; }
	.encb__mid { height: 48px; }
	.encb__node { width: 56px; height: 56px; border-width: 8px; }
	.encb__node::before { width: 19px; height: 4px; }
	.encb__node::after { width: 4px; height: 19px; }
	.encb__title--bank { font-size: 14px; }
	/* single left-aligned column so icons line up (no staggered wrap) */
	.encb__apis { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 14px; padding: 16px 40px 4px; }
	.encb__api { width: 100%; gap: 14px; padding: 0; }
	.encb__api-label { font-size: 15px; white-space: normal; }

	/* 3. how — hide the desktop stepper, show stacked cards (Figma 18:29874) */
	.en-how__row { display: none; }
	.en-how__mobile { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }
	.en-how__mcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
	/* Header block: number + title, tinted bg, 4 corner squares (Figma 18:29876) */
	.en-how__mhead {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 8px 20px;
		background: rgba(255, 255, 255, 0.05);
	}
	.en-how__mcorner {
		position: absolute;
		width: 8px;
		height: 8px;
		background: #2a2a2b;
		border: 1px solid #414141;
		border-radius: 1px;
	}
	.en-how__mcorner--tl { top: -4px; left: -4px; }
	.en-how__mcorner--tr { top: -4px; right: -4px; }
	.en-how__mcorner--bl { bottom: -4px; left: -4px; }
	.en-how__mcorner--br { bottom: -4px; right: -4px; }
	.en-how__mnum { font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.36px; color: #fff; }
	.en-how__mtitle { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.36px; color: #fff; white-space: nowrap; }
	/* Connector line down to the visual (Figma Line 294) */
	.en-how__mline { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.25); }
	.en-how__mimg { width: 100%; height: auto; display: block; margin-top: 16px; }

	/* 5. trust — stack copy over visual */
	.en-trust__card { flex-direction: column; align-items: flex-start; gap: 28px; padding: 32px 24px; }
	.en-trust__copy { width: 100%; max-width: 100%; }
	.en-trust__title { font-size: 32px; letter-spacing: -0.6px; }
	.en-trust__desc { font-size: 17px; }
	.en-trust__visual { width: 100%; }

	/* 6. faq */
	.en-faq__card { padding: 0 20px; max-width: 100%; }
	.en-faq__q { padding: 24px 0; gap: 16px; }
	.en-faq__q-text { font-size: 16px; }
	.en-faq__a { font-size: 15px; padding-bottom: 28px; }

	/* 7. cta */
/* cover, not `100% 100%`: the mobile artwork is portrait (1059x1479) and the
	   panel is landscape, so stretching squashed it AND pulled the artwork's own
	   baked black corners (48px radius, filled black rather than transparent)
	   onto the panel corners — the black blocks reported at all four corners.
	   cover keeps the aspect and crops the baked corners out of frame. */
		/* padding-top 48 -> 100: the mobile artwork puts a logo tile with corner
		   markers at the top-centre of the panel, and the title started at 48px —
		   right where those markers sit, so "See Embed Next in action." collided
		   with them and the words were hard to read. Dropping the copy clears the
		   tile; only the top changes, the sides and foot keep their 48/24. */
		.en-cta__banner { min-height: 0; padding: 100px 24px 48px; border-radius: 20px;background: #0a1614 url("../img/en-v2/cta-bg-mobile.webp") center / cover no-repeat; }
	.en-cta__title { font-size: 30px; line-height: 1.35; }
	.en-cta__sub { font-size: 18px; }
}

@media (max-width: 480px) {
	.en-hero__title { font-size: 30px; }
	.en-head__title { font-size: 22px; }
	.en-trust__title { font-size: 26px; }
	.en-cta__title { font-size: 24px; }
}

/* =========================================================================
   FLUID DESKTOP BAND (901-1919) — see the long note in rewards-plus.css.
   Max = 1920 design value (1920+ byte-identical), min = this file's own <=900
   value, coefficient = design/19.2vw. Body copy and small UI stay fixed.

   .en-how's 280px foot is NOT scaled — .hv-section-glow arc clearance.
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1919px) {
	/* Hero */
	.en-hero { padding-block: clamp(48px, 5.208vw, 100px) 0; }
	.en-hero__title { font-size: clamp(34px, 3.333vw, 64px); letter-spacing: -0.02em; }
	.en-hero__lede { font-size: clamp(18px, 1.458vw, 28px); }
	.en-hero__copy { gap: clamp(28px, 2.5vw, 48px); }

	/* Dotted section heads */
	.en-head { padding-block: clamp(40px, 4.167vw, 80px) clamp(28px, 2.5vw, 48px); }
	.en-cobrand .en-head,
	.en-faq .en-head { padding-block: clamp(40px, 4.167vw, 80px); }
	.en-head__title { font-size: clamp(26px, 1.875vw, 36px); letter-spacing: -0.02em; }
	.en-head__sub { font-size: clamp(17px, 1.25vw, 24px); }

	/* Section rhythm (glow foot on .en-how deliberately untouched) */
	.en-cap,
	.en-trust { padding-block: clamp(56px, 5.208vw, 100px) 0; }
	.en-how { padding-block: clamp(56px, 5.208vw, 100px) 280px; }
	.en-faq,
	.en-cta { padding-block: clamp(56px, 5.208vw, 100px); }

	/* How-it-works stepper */
	.en-how__row { gap: clamp(32px, 3.333vw, 64px); }
	.en-how__step-num { font-size: clamp(17px, 1.25vw, 24px); }
	.en-how__step.is-active .en-how__step-num,
	.en-how__step-title { font-size: clamp(19px, 1.458vw, 28px); }
	.en-how__step.is-active .en-how__step-title { font-size: clamp(22px, 1.667vw, 32px); letter-spacing: -0.02em; }

	/* Co-brand APIs */
	.encb__title { font-size: clamp(22px, 1.667vw, 32px); letter-spacing: -0.02em; }
	.encb__apis { gap: clamp(14px, 1.042vw, 20px) clamp(14px, 2.917vw, 56px); }
	.encb__api-label { font-size: clamp(15px, 1.25vw, 24px); }

	/* Trust */
	.en-trust__card { gap: clamp(28px, 2.083vw, 40px); }
	.en-trust__title { font-size: clamp(32px, 2.917vw, 56px); letter-spacing: -0.02em; }
	.en-trust__desc { font-size: clamp(17px, 1.25vw, 24px); }

	/* Closing CTA */
	.en-cta__title { font-size: clamp(30px, 3.073vw, 59px); }
	.en-cta__sub { font-size: clamp(18px, 1.406vw, 27px); }
}

/* =========================================================================
   Experience Layer cards: align every row across the four cards.

   The cards were independent flex columns, so only the icon and title lined
   up — the bullet list started wherever each card's title happened to end.
   "Configurable Customer Value Proposition" wraps to 4 lines at 1024, 3 at
   1440 and 2 at 1920 while its neighbours take 1-2, so the lists sat 25-50px
   apart. It was misaligned at the 1920 design width too, not just narrow ones.

   Subgrid rather than a min-height on the title, because the number of lines
   the long title needs changes with width — the shared row track is always as
   tall as the tallest card's title, whatever that is at the current width.
   Row map: 1 icon | 2 title | 3 bullets.

   Desktop only: below 901 the cards are a 2-up grid with their own spacing.
   Wrapped in @supports so without subgrid the original flex layout stands.
   ========================================================================= */
@media (min-width: 901px) {
	@supports (grid-template-rows: subgrid) {
		.encb__cards {
			display: grid;
			/* auto-flow column keeps this independent of the card count */
			grid-auto-flow: column;
			grid-auto-columns: minmax(0, 1fr);
			grid-template-rows: auto auto auto;
			column-gap: 20px;
			/* was the card's own `gap: 20px`; with subgrid the rows are spaced
			   by the parent, so it has to live here to keep the same rhythm */
			row-gap: 20px;
		}
		.encb__card {
			grid-row: 1 / span 3;
			display: grid;
			grid-template-rows: subgrid;
			grid-template-columns: minmax(0, 1fr);
			/* replaces the flex `align-items: center` for the cross axis */
			justify-items: center;
			/* start, not the default stretch/centre: the shared title track is as
			   tall as the longest title, and without this a 1-line title floated
			   to the middle of it (tops 104/129/117/129) and each list centred in
			   its own track too. Start-aligning pins every row to its track top,
			   which is what actually lines the four cards up. */
			align-items: start;
		}
	}
}

/* =========================================================================
   Experience Layer cards on mobile: same row alignment as the desktop block.

   Mobile lays the four cards out 2-up, and within each pair the bullet lists
   still started at different heights (17px apart) whenever one title wrapped
   to more lines than its neighbour — "Configurable Customer Value Proposition"
   takes 3 lines at 375 where "Analytics & Insights" takes 1.

   Six tracks, i.e. three (icon | title | bullets) per card-row, and each card
   spans its row's three. Auto-placement then puts cards 1-2 in tracks 1-3 and
   cards 3-4 in tracks 4-6, so each PAIR shares its own tracks.

   row-gap has to live on the parent because a subgrid takes its row spacing
   from the parent, not from its own `gap` — 12px keeps the card's internal
   rhythm (the between-pair gap picks up the same value, from 8px).
   ========================================================================= */
@media (max-width: 900px) {
	@supports (grid-template-rows: subgrid) {
		.encb__cards {
			grid-template-rows: repeat(2, auto auto auto);
			row-gap: 12px;
		}
		.encb__card {
			grid-row: span 3;
			display: grid;
			grid-template-rows: subgrid;
			grid-template-columns: minmax(0, 1fr);
			justify-items: center;
			/* start, not centre — see the desktop block */
			align-items: start;
		}
	}
}