/*
Theme Name: FinXP
Author: Benn Scott / Market Rocket
Description: Custom code-first theme for FinXP, the Malta-licensed EMI. Dark navy brand system built on ACF PRO block sections, with GSAP and Alpine interactions, Swiper carousels, and Polylang EN/DE multilingual support.
Version: 1.0.0
Text Domain: finxp
*/

/* ─── DESIGN TOKENS ─── */
:root {
  --navy-deep:    #020235;
  --navy-mid:     #07076D;
  --navy-light:   #0c0c8e;
  --magenta:      #FF2CEB;
  --violet:       #CE11DF;
  --cyan:         #00A1E9;
  --cyan-light:   #27D1FF;
  --white:        #FFFFFF;
  --off-white:    #F0EFFD;
  --body-text:    rgba(255, 255, 255, 0.82);
  --subtle:       rgba(255, 255, 255, 0.45);

  --grad-xp:      linear-gradient(135deg, #CE11DF 0%, #4848FF 50%, #27D1FF 100%);
  --grad-primary: linear-gradient(120deg, #00A1E9 0%, #0000F7 45%, #CE11DF 100%);
  --grad-text:    linear-gradient(120deg, #27D1FF 0%, #FF2CEB 100%);
  --grad-hero-bg: radial-gradient(ellipse at 30% 50%, #1a0a4d 0%, #020235 60%);
  --grad-card:    linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);

  --navy-black:     #020235;
  --surface-light:  #f5f4ff;
  --line-dark:      rgba(255, 255, 255, 0.12);
  --line-light:     rgba(2, 2, 53, 0.15);
  --ink-muted-dark: rgba(255, 255, 255, 0.65);
  --ink-on-light:   #020235;
  --ink-muted-light: rgba(2, 2, 53, 0.60);
  --radius-card:    12px;

  --font-display: 'Lato', sans-serif;
  --font-body:    'Roboto', sans-serif;
  --font-mono:    'Roboto Mono', monospace;

  --radius:       12px;
  --radius-lg:    20px;
  --max-w:        1680px;
  --section-pad:  96px 40px;
}

/* ─── INNER-PAGE RADIUS RULE (Benn, 2026-08-03): no corner over 9px. ───
   Scoped via body:not(.home) so the signed-off homepage keeps its
   original 12/20px language until told otherwise. Every inner block that
   uses the tokens inherits the squarer look automatically; hardcoded
   radii in the inner kit are being migrated onto the tokens. */
body:not(.home) {
  --radius-card: 8px;
  --radius:      8px;
  --radius-lg:   9px;
}

/* ─── RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--navy-black);
  /* Global 10% type scale-up: everything in rem keys off this. The vw
     midpoints in font-size clamp()s were bumped ×1.1 to match, since vw
     doesn't respond to root font-size. Layout boxes stay px-sized. */
  font-size: 110%;
}

/* ─── BASE ─── */
body {
  font-family: 'Roboto', sans-serif;
  background: transparent;
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Fixed atmospheric backdrop — subtle static ambient glow */
#atmo-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 35% at 78% 18%, rgba(39,209,255,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 50% 95%, rgba(206,17,223,0.10) 0%, transparent 100%);
}

h1, h2, h3, h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  line-height: 1.12;
  /* FIX 2026-08-10 (client: "line breaks on titles universally, so bottom
     lines get more words / design balance"). Token-level so every hero
     title, section heading and card title inherits it automatically —
     no per-block rules needed. `.cta-section__heading` already had its
     own explicit text-wrap: balance (2026-08-06 audit) which is now just
     redundant with this, left in place rather than removed mid-punch-list. */
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* ─── LAYOUT ─── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}

.site-main { padding: 0; }

/* ─── EYEBROW ─── */
.eyebrow {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--magenta);
  flex-shrink: 0;
}

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--magenta);
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 14px 28px;
  border-radius: 7px;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 30px rgba(255, 44, 235, 0.4);
  position: relative;
  isolation: isolate;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 40px rgba(255, 44, 235, 0.55);
}
/* Subliminal grain — a fine noise tile over the button surface (solid AND
   gradient primaries). z-index:-1 keeps it above the fill but behind the
   label so text stays crisp; isolation:isolate on .btn-primary contains the
   overlay blend to the button. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 13px 28px;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

/* Shared .btn base — used by hero and other sections alongside -primary / -ghost modifiers */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: 7px;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn.btn-primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 8px 24px rgba(206, 17, 223, 0.25);
}
.btn.btn-primary:hover { box-shadow: 0 12px 30px rgba(206, 17, 223, 0.4); }
.btn.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.btn.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.btn.btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.btn.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

/* ─── NAV ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 72px;
  background: rgba(2, 2, 53, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header__row {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 100%;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo image is 512x183 (2.8:1). Lock width to the true ratio so the
   hard-coded width/height attrs can't stretch it (~19% wide otherwise). */
.site-header__logo img {
  height: 40px;
  width: auto;
}
.drawer__head .site-header__logo img {
  height: 30px;
}

/* Nav wrap — flex row of nav-items and plain links */
.site-header__nav-wrap {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 4px;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Animated gradient border — register custom property for conic rotation */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes border-spin {
  to { --border-angle: 360deg; }
}

.nav-trigger {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--body-text);
  font-family: 'Roboto', sans-serif;
  font-size: 0.99rem;
  font-weight: 400;
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s;
  position: relative;
  isolation: isolate;
}
.nav-trigger:hover { color: var(--white); }

/* Hover: snake border — ::before is a 90° arc that travels the perimeter,
   ::after fills the interior so only the 1px edge is visible */
.nav-trigger:hover::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 9px;
  background: conic-gradient(
    from var(--border-angle),
    transparent       0deg,
    #CE11DF          15deg,
    #4848FF          50deg,
    #27D1FF          70deg,
    transparent      90deg,
    transparent     360deg
  );
  animation: border-spin 4s linear infinite;
  z-index: -1;
}
.nav-trigger:hover::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  background: var(--navy-deep);
  z-index: -1;
}

/* Hide chevrons */
.nav-trigger__chev { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-trigger:hover::before {
    animation: none;
    background: conic-gradient(
      from 45deg,
      transparent 0deg,
      #CE11DF 15deg,
      #4848FF 50deg,
      #27D1FF 70deg,
      transparent 90deg,
      transparent 360deg
    );
  }
}

/* Actions: lang + CTA + hamburger */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.site-header__cta {
  padding: 10px 20px;
  font-size: 0.88rem;
}

/* Burger morphs to an X while the full-page menu is open */
.nav-toggle rect {
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] rect:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] rect:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] rect:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }

/* Polylang language switcher — a compact code chip that sits to the right of
   the CTA. It TRIGGERS a drop panel (.mega-panel--lang) that slides down from
   the header via the shared mega-panel machinery, so the whole thing reads as
   part of the same header system. The panel styles live in the MEGA PANELS
   section below (.mega-panel__inner--lang / .lang-panel__* / .lang-option). */
.nav-item--lang { display: inline-flex; }
/* Matches the .site-header__cta outline button exactly (transparent fill,
   1.5px white border, 7px radius) and the same box height — 10px vertical
   padding + 1.5px border, so chip and CTA sit as an equal-height pair. */
.lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  color: var(--white);
  font-family: 'Roboto Mono', monospace;
  /* Same font-size + line-height + padding as .site-header__cta so the two
     boxes are exactly the same height. */
  font-size: 0.88rem;
  line-height: 1.6;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-chip:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.lang-chip[aria-expanded="true"] {
  border-color: var(--cyan);
  background: rgba(255, 255, 255, 0.06);
}
.lang-chip__globe { display: inline-flex; flex-shrink: 0; color: rgba(255, 255, 255, 0.55); transition: color 0.2s ease; }
.lang-chip[aria-expanded="true"] .lang-chip__globe { color: var(--cyan); }
.lang-chip__code { letter-spacing: 0.06em; }
.lang-chip__chev {
  font-size: 0.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease, color 0.2s ease;
}
.lang-chip[aria-expanded="true"] .lang-chip__chev { transform: rotate(180deg); color: var(--cyan); }

/* ─── MEGA SCRIM (blurs page content behind open panel) ─── */
/* Timing is deliberately mirrored 1:1 with .mega-panel below (same close/open
   durations + easings) so the backdrop never visibly lags the panel in either
   direction — a desync there was the "conflict" Benn flagged. */
.mega-scrim {
  position: fixed;
  inset: 72px 0 0;
  z-index: 140;
  background: rgba(2, 2, 53, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Closing: faster, ease-in */
  transition: opacity 0.16s ease-in, visibility 0.16s;
}
.mega-scrim.is-open {
  opacity: 1;
  visibility: visible;
  /* Opening: slightly slower, gentle ease-out — matches .mega-panel.is-open */
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}

/* ─── MEGA PANELS ─── */
/* Slight slide-down + fade on open, reversed and a touch faster on close.
   Asymmetric transition is intentional: the *target* state's `transition`
   governs the animation (base class governs closing since that's the state
   being animated TO when .is-open is removed; .is-open governs opening).
   `pointer-events` flips the instant the class changes (it isn't animatable),
   so the closing panel stops accepting clicks/hover immediately even while
   still visually fading out — it can never trap a click or shadow the links
   beneath it. `visibility` rides the same transition list as opacity/transform
   so the panel only becomes display-relevant/hidden from AT once the fade has
   actually finished (discrete property swaps at the end of a transition to
   "hidden", and at the start of a transition to "visible" — standard CSS
   visibility-interpolation behaviour), never display:none mid-animation. */
.mega-panel {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  z-index: 150;
  /* Closing: faster, ease-in */
  transition: opacity 0.16s ease-in, transform 0.16s ease-in, visibility 0.16s;
}
.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* Opening: slightly slower, gentle ease-out */
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}

.mega-panel__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 40px 44px;
  display: grid;
  gap: 40px;
  /* Solutions: 3 content groups + 1 promo column */
  grid-template-columns: repeat(3, 1fr) 260px;
}

.mega-panel__inner--industries {
  /* Industries: 5 equal columns */
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
}

.mega-panel__inner--tiles {
  /* Resources / Company / Support: simple 3-column tile grid */
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 16px;
}

/* Language panel: a lightweight two-part row — context on the left so the
   full-width drop doesn't read as empty, language options on the right under
   the chip that opened it. */
.mega-panel__inner--lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 30px 40px 32px;
}
.lang-panel__eyebrow {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-light);
  margin-bottom: 8px;
}
.lang-panel__copy {
  margin: 0;
  font-size: 0.95rem;
  color: var(--body-text);
}
.lang-panel__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
  padding: 14px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.lang-option:hover {
  border-color: var(--cyan);
  background: rgba(39, 209, 255, 0.06);
}
.lang-option__code {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--white);
}
.lang-option__name {
  font-size: 0.95rem;
  color: var(--subtle);
}
.lang-option:hover .lang-option__name { color: var(--white); }
.lang-option__mark {
  display: inline-flex;
  margin-left: auto;
  color: var(--cyan);
}
.lang-option.is-current {
  border-color: rgba(39, 209, 255, 0.4);
  background: rgba(39, 209, 255, 0.05);
}
.lang-option.is-current .lang-option__name { color: var(--white); }

.mega-panel__footer {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.mega-panel__view-all {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--body-text);
  text-decoration: none;
  transition: color 0.15s;
}
.mega-panel__view-all:hover { color: var(--cyan-light); }

/* Group headers. UPDATED 2026-08-07 (Benn: remove the gradient dot bullet) —
   the label now reads as a sectioning separator: mono-cased cyan text
   followed by a hairline rule that fades out across the remaining column
   width, rather than a bullet point in front of it. */
.mega-group__label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-light);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mega-group__label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  min-width: 16px;
  background: linear-gradient(90deg, var(--line-dark) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Mega links */
.mega-link-list { display: grid; gap: 4px; }

.mega-link {
  display: block;
  position: relative;
  isolation: isolate;
  padding: 10px 10px 10px 0;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, padding-left 0.15s;
}
.mega-link:hover,
.mega-link:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  padding-left: 10px;
}
.mega-link__title {
  display: block;
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--white);
}
.mega-link__desc {
  display: block;
  font-size: 0.78rem;
  color: var(--subtle);
  margin-top: 2px;
}

/* Promo column */
.mega-promo {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* SWEEP 2026-08-06: rim removed → inset top highlight. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mega-promo__eyebrow {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 10px;
}
.mega-promo__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  font-family: 'Lato', sans-serif;
}
.mega-promo__body {
  font-size: 0.82rem;
  color: var(--subtle);
  margin-top: 8px;
  line-height: 1.5;
}
.mega-promo__cta {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--cyan-light);
  text-decoration: none;
  transition: color 0.15s;
}
.mega-promo__cta:hover { color: var(--white); }

/* Industry tiles */
.industry-tile {
  display: block;
  position: relative;
  isolation: isolate;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.industry-tile:hover,
.industry-tile:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.industry-tile__title {
  display: block;
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--white);
}
.industry-tile__desc {
  display: block;
  font-size: 0.78rem;
  color: var(--subtle);
  margin-top: 6px;
  line-height: 1.4;
}

/* Sub-menu snake border — 90° arc travels perimeter on hover, parent trigger border hides */
.mega-link::before,
.industry-tile::before {
  content: '';
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  background: conic-gradient(
    from var(--border-angle),
    transparent       0deg,
    #CE11DF          15deg,
    #4848FF          50deg,
    #27D1FF          70deg,
    transparent      90deg,
    transparent     360deg
  );
  /* animation lives on :hover only (below) — the border is opacity:0 until
     hover, so spinning it at idle was invisible wasted GPU on every tile. */
}
.mega-link::before     { inset: -1px; border-radius: 9px; }
.industry-tile::before { inset: -1px; border-radius: 13px; }

.mega-link::after,
.industry-tile::after {
  content: '';
  position: absolute;
  background: var(--navy-deep);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.mega-link::after     { inset: 1px; border-radius: 7px; }
.industry-tile::after { inset: 1px; border-radius: 11px; }

.mega-link:hover::before,
.mega-link:focus-visible::before,
.industry-tile:hover::before,
.industry-tile:focus-visible::before,
.mega-link:hover::after,
.mega-link:focus-visible::after,
.industry-tile:hover::after,
.industry-tile:focus-visible::after { opacity: 1; }

/* Spin only while the border is actually visible (hover/focus) — zero idle cost. */
.mega-link:hover::before,
.mega-link:focus-visible::before,
.industry-tile:hover::before,
.industry-tile:focus-visible::before { animation: border-spin 4s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .mega-link:hover::before,
  .mega-link:focus-visible::before,
  .industry-tile:hover::before,
  .industry-tile:focus-visible::before { animation: none; }
}

/* Digital Commerce cluster — inherits .industry-tile card skin; only children layout overrides */
.industry-cluster__children {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}
.industry-cluster__children a {
  display: block;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--white);
  text-decoration: none;
  transition: background 0.15s;
}
.industry-cluster__children a:hover,
.industry-cluster__children a:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}
.industry-cluster__children a::before {
  content: '→ ';
  color: var(--magenta);
  font-weight: 700;
}

/* Responsive: hide promo + collapse to 3-col at narrower viewport */
@media (max-width: 1180px) {
  .mega-panel__inner { grid-template-columns: repeat(3, 1fr); }
  .mega-promo { display: none; }
  .mega-panel__inner--industries { grid-template-columns: repeat(3, 1fr); }
  .mega-panel__inner--tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .mega-panel__inner--tiles { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: hide desktop nav, show hamburger */
@media (max-width: 940px) {
  .site-header__nav-wrap { display: none; }
  .nav-item--lang { display: none; }
  .site-header__cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ─── MOBILE DRAWER ─── */
/* Doubles as the full-page menu backdrop: it's a separate fixed layer under
   the drawer, so it never scrolls with the menu content and never repaints
   mid-scroll — the drawer itself stays transparent. */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 35% at 85% 0%, rgba(39, 209, 255, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 90% 45% at 15% 100%, rgba(206, 17, 223, 0.13) 0%, transparent 70%),
    var(--navy-deep);
  z-index: 190;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* Full-page menu — fades and rises in over the whole viewport */
.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 195;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.3s ease, transform 0.35s ease, visibility 0.35s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Contents stagger up as the page settles */
.drawer__body > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.drawer.is-open .drawer__body > * { opacity: 1; transform: none; }
.drawer.is-open .drawer__body > *:nth-child(1) { transition-delay: 0.06s; }
.drawer.is-open .drawer__body > *:nth-child(2) { transition-delay: 0.10s; }
.drawer.is-open .drawer__body > *:nth-child(3) { transition-delay: 0.14s; }
.drawer.is-open .drawer__body > *:nth-child(4) { transition-delay: 0.18s; }
.drawer.is-open .drawer__body > *:nth-child(5) { transition-delay: 0.22s; }
.drawer.is-open .drawer__body > *:nth-child(6) { transition-delay: 0.26s; }
.drawer.is-open .drawer__body > *:nth-child(7) { transition-delay: 0.30s; }
.drawer.is-open .drawer__body > *:nth-child(8) { transition-delay: 0.34s; }

/* The fixed site header stays on top of the full-page menu and its burger
   toggles the menu closed, so the drawer's own head is redundant — a
   spacer keeps content clear of the header bar */
.drawer__head { display: none; }
.drawer { padding-top: 72px; }
.drawer__close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.drawer__close:hover { background: rgba(255, 255, 255, 0.08); }

.drawer__body { padding: 16px 40px 48px; }

/* Accordions */
.accordion-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  color: var(--white);
  padding: 22px 4px;
  font-family: 'Lato', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.accordion-trigger__chev {
  font-size: 0.65rem;
  color: var(--subtle);
  transition: transform 0.2s;
}
.accordion-trigger[aria-expanded="true"] .accordion-trigger__chev {
  transform: rotate(180deg);
}
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-panel__inner { padding: 4px 4px 18px; }
.accordion-panel__inner a {
  display: block;
  padding: 11px 8px;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--subtle);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.accordion-panel__inner a:hover { background: rgba(255, 255, 255, 0.05); color: var(--white); }

/* "View all Solutions/Industries →" links — sit above the group labels,
   bolder/brighter than the ordinary panel links so they read as the
   section's summary CTA. Specificity note: must beat `.accordion-panel__inner a`
   (class+tag, 0,1,1) so the compound selector below matches it. */
.accordion-panel__inner a.accordion-panel__view-all {
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.mobile-group-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-light);
  margin: 14px 0 6px;
}
.mobile-group-label:first-child { margin-top: 0; }

.mobile-cluster {
  margin-top: 6px;
  border-left: 2px dashed rgba(255, 44, 235, 0.35);
  padding-left: 12px;
}
.mobile-cluster__label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 4px;
  display: block;
}

.drawer__cta {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer__cta .btn { justify-content: center; }

.drawer__lang-switcher {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.drawer__lang-switcher ul { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; }
.drawer__lang-switcher a {
  color: var(--subtle);
  font-size: 0.85rem;
  font-family: 'Roboto Mono', monospace;
  text-decoration: none;
  transition: color 0.2s;
}
.drawer__lang-switcher a:hover,
.drawer__lang-switcher .current-lang a { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .mega-panel,
  .mega-scrim,
  .drawer,
  .drawer-scrim,
  .drawer__body > *,
  .accordion-panel { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ═══════════════════════════════════════════
   BLOCK SECTIONS
═══════════════════════════════════════════ */

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--grad-hero-bg);
  overflow: hidden;
  padding-top: 72px;
}

.hero::before {
  content: '';
  position: absolute;
  top: 10%; right: -5%;
  width: 55%; height: 70%;
  background: radial-gradient(ellipse, rgba(78, 0, 180, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -10%; left: 20%;
  width: 40%; height: 50%;
  background: radial-gradient(ellipse, rgba(0, 161, 233, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 100px 40px 120px;
  width: 100%;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 44, 235, 0.12);
  border: 1px solid rgba(255, 44, 235, 0.3);
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #FF71FF;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.hero__tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  flex-shrink: 0;
}

.hero__title {
  font-size: clamp(2.6rem, 4.95vw, 4rem);
  color: var(--white);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero__title em {
  font-style: normal;
  white-space: nowrap;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__title em.tw-cursor::after {
  content: '|';
  margin-left: 2px;
  -webkit-text-fill-color: var(--magenta);
  color: var(--magenta);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  animation: tw-blink 0.65s step-end infinite;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Hero flair: a single-line pull-quote under the H1 (2026-08-17) — an
   understated strapline of the value props with a decorative gradient
   opening quote mark. "yes" keeps the gradient accent (no scramble). */
.hero__flair {
  position: relative;
  margin: -6px 0 24px;
  /* DEMO (hero-flair decrypt): speech mark removed, so no left padding for it. */
  padding-left: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
}
/* One line at the design widths; wraps safely below (no horizontal overflow). */
@media (min-width: 1400px) {
  .hero__flair { white-space: nowrap; }
}
/* DEMO (hero-flair decrypt): decorative opening quote removed. To revert,
   restore the ::before quote rule + padding-left:22px above and drop the
   looping-decrypt block in js/main.js (or just `git revert` that commit). */
.hero__flair em {
  font-style: normal;
  color: #fff;
}

.hero__facets {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  width: 100%; height: 100%;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 32px;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 0.75rem;
  color: var(--ink-muted-dark, rgba(255,255,255,0.55));
}
.hero__meta span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero__meta span::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan-light);
  flex-shrink: 0;
}

.hero__sub {
  font-size: 1.125rem;
  color: var(--body-text);
  max-width: 480px;
  margin-bottom: 40px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Hero visual — IBAN4U mockup + globe layer */
.hero__visual { position: relative; }

.hero__mockup-wrap {
  position: relative;
  width: 100%;
  transform-origin: center center;
}

.hero__globe {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

#hero-globe-canvas {
  width: min(600px, 100%, 62vh);
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  cursor: grab;
}
#hero-globe-canvas:active { cursor: grabbing; }

.hero__globe-stat {
  position: absolute;
  background: rgba(2,2,53,0.78);
  border: 1px solid rgba(39,209,255,0.20);
  border-radius: 12px;
  padding: 10px 16px;
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.hero__globe-stat--countries { bottom: 14%; left: 4%; }
.hero__globe-stat--currencies { top: 18%; right: 4%; }
.hero__globe-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--grad-xp);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__globe-label {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 0.60rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-top: 3px;
}

/* Hero dashboard — polished finXP PLUS dashboard image (transparent webp, own shadow) */
.hero__mockup-wrap { position: relative; display: flex; justify-content: center; }

.hero__dash {
  position: relative;
  z-index: 1;
  display: block;
  width: min(820px, 100%);
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.55));
}

/* Give the dashboard column more room on wide screens so the tablet reads larger */
@media (min-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr 1.3fr; gap: 64px; }
}

/* brand halo behind the card */
.hero__mockup-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 118%; height: 112%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background:
    radial-gradient(46% 40% at 28% 26%, rgba(206, 17, 223, 0.42), transparent 70%),
    radial-gradient(46% 42% at 76% 72%, rgba(39, 209, 255, 0.30), transparent 72%);
  filter: blur(50px);
  opacity: 0.8;
  pointer-events: none;
}

/* ─── TRUST MARQUEE (Swiper) ─── */
/* Credential chips ride a Swiper marquee (auto-drift + grab/flick, pause on hover).
   Press logos hidden until hover/tap, then revealed once (no loop). Squared chips. */
.trust-marquee {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  padding: 16px 0;
  overflow: hidden;
}

/* Swiper viewport: edge fade + grab affordance */
.trust-marquee__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  cursor: grab;
}
.trust-marquee__viewport:active { cursor: grabbing; }
.trust-marquee .swiper-slide { width: auto; display: flex; align-items: center; }
.trust-marquee .swiper-wrapper { transition-timing-function: linear !important; } /* continuous drift, not eased */

/* Credential chips — squared, not pill */
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  /* SWEEP 2026-08-06: chip rim removed → slightly stronger fill carries it. */
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  user-select: none;
}
.trust-chip svg { width: 15px; height: 15px; opacity: 0.6; flex-shrink: 0; }
.trust-chip__logo { height: 15px; width: auto; flex-shrink: 0; } /* mastercard/swift already white */
.trust-chip__label { white-space: nowrap; }

/* Press logos — revealed on hover (desktop) or .is-revealed tap-toggle (mobile) */
.trust-press {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.4s ease;
}
/* Hover reveal only on hover-capable devices (mouse); touch uses the .is-revealed
   tap-toggle so :hover can't stick open after a tap. */
@media (hover: hover) {
  .trust-marquee:hover .trust-press {
    max-height: 60px;
    margin-top: 18px;
    opacity: 1;
  }
}
.trust-marquee.is-revealed .trust-press {
  max-height: 60px;
  margin-top: 18px;
  opacity: 1;
}
.trust-press__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.trust-press__logo {
  /* Per-logo height (via --logo-h) equalises VISUAL height, not px box height —
     tuned from measured ink extent so caps/wordmarks read the same size.
     --logo-scale lets responsive shrink the whole set with one value. */
  height: calc(var(--logo-h, 26px) * var(--logo-scale, 1));
  width: auto;
  max-width: 210px;
  object-fit: contain;
  opacity: 0.82; /* uniform tone, prominent — marks are pre-normalised to opaque white */
  flex-shrink: 0;
}
.trust-press__logo--bezinga       { --logo-h: 23px; }
.trust-press__logo--finextra      { --logo-h: 29px; }
.trust-press__logo--fintech-times { --logo-h: 23px; }
.trust-press__logo--the-paypers   { --logo-h: 28px; }
.trust-press__logo--sifted        { --logo-h: 25px; }
/* Press logos link to their coverage (opens in a new tab). The anchor wraps
   the img as a flex item so the row layout/sizing is unchanged; brighten on
   hover for affordance. */
.trust-press__link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.trust-press__link:hover .trust-press__logo,
.trust-press__link:focus-visible .trust-press__logo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .trust-marquee .swiper-wrapper { transition-timing-function: ease; }
}

/* ─── STATS ─── */
.stats {
  padding: var(--section-pad);
  background: linear-gradient(180deg, rgba(12, 12, 142, 0.15) 0%, transparent 100%);
}

.stats__eyebrow { justify-content: center; margin-bottom: 16px; }

.stats__heading {
  font-size: clamp(2rem, 3.85vw, 2.8rem);
  text-align: center;
  margin-bottom: 64px;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* SWEEP 2026-08-06: outer box rim removed — the internal hairline dividers
     (kept, canon spec-row language) structure the figures on their own. */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stats__item {
  padding: 40px 20px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.stats__item:last-child { border-right: none; }

.stats__number {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 3.85vw, 3.2rem);
  background: var(--grad-xp);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}

.stats__label {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.stats__sub { font-size: 0.72rem; color: var(--subtle); }

/* ─── INDUSTRY HORIZONTAL SCROLL ─── */
/* overflow:visible so the hover spotlight (inset:-400px layer) can bloom past the
   grid's bottom edge instead of being hard-cut at the section box. Horizontal
   containment is handled globally by html/body overflow-x:clip, and the next
   section (.audience) is transparent, so the glow fades naturally into the navy. */
.industries { position: relative; background: transparent; height: 100vh; min-height: 620px; overflow: visible; display: flex; flex-direction: column; }
/* (removed) top navy fade scrim — it hard-cut the signature box's drop-shadow that
   bleeds down into this section's top padding. The shadow now fades over this
   section's empty top-padding navy instead, which lets the gap between signature
   and industries stay tight (no extra spacer padding needed on .signature). */
.industries__inner { max-width: var(--max-w); width: 100%; margin: 0 auto; height: 100%; display: flex; flex-direction: column; padding: 104px 40px 56px; box-sizing: border-box; }
.industries__header { flex-shrink: 0; margin-bottom: 24px; position: relative; z-index: 1; }
.industries__heading { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.52vw,2.6rem); color: #fff; margin-top: 14px; letter-spacing: -0.01em; line-height: 1.15; }
.industries__scroller { flex: 1; position: relative; min-height: 0; }
/* Section-background hover spotlight: ONE soft cyan+purple glow that blooms in
   the backdrop BEHIND the hovered card (not clipped inside it), spilling through
   the grid gaps like the #atmo-bg atmosphere. Covers the whole grid area and
   sits below the cards (track is z-index:1). --sx/--sy are the glow centre (set
   by JS to the hovered card's centre; default mid-grid so it degrades safely).
   Themeable via --spot-cyan / --spot-purple / --spot-size / --spot-strength. */
.industries__spotlight { --spot-cyan: 39,209,255; --spot-purple: 206,17,223; --spot-size: 480px; --spot-strength: 0.9; --sx: 50%; --sy: 50%; position: absolute; inset: -400px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.45s ease; background: radial-gradient(circle var(--spot-size) at var(--sx) var(--sy), rgba(var(--spot-cyan),calc(0.20 * var(--spot-strength))) 0%, transparent 72%), radial-gradient(circle calc(var(--spot-size) * 1.5) at var(--sx) var(--sy), rgba(var(--spot-purple),calc(0.15 * var(--spot-strength))) 0%, transparent 76%); }
.industries__scroller.is-spot .industries__spotlight { opacity: 1; }
.industries__scroller:focus-within .industries__spotlight { opacity: 1; }
.industries__track { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; height: 100%; position: relative; z-index: 1; }
/* SWEEP 2026-08-06: resting rim + hover border-lighten removed — the gradient
   top bar (::before, brightens on hover) + spotlight already carry the states. */
.industries__card { width: 100%; height: 100%; position: relative; border-radius: var(--radius-card); padding: 22px 22px 18px; text-decoration: none; display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(7,7,109,0.55) 0%, rgba(2,2,53,0.92) 100%); overflow: hidden; clip-path: inset(0 round var(--radius-card)); }
.industries__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan-light)); opacity: 0.45; transition: opacity 0.3s; }
.industries__card:hover::before { opacity: 1; }
.industries__card-num { font-family: var(--font-display); font-weight: 900; font-size: 6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.07); position: absolute; top: 14px; right: 18px; letter-spacing: -0.03em; pointer-events: none; user-select: none; }
.industries__card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 10px; }
.industries__card-icon { width: 44px; height: 44px; margin-bottom: 16px; color: var(--cyan-light); opacity: 0.75; flex-shrink: 0; transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.industries__card-icon svg { width: 100%; height: 100%; display: block; }
.industries__card:hover .industries__card-icon { opacity: 1; transform: scale(1.4); }
.industries__card-name,
.industries__card-desc { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.industries__card:hover .industries__card-name,
.industries__card:hover .industries__card-desc { transform: translateY(10px); }
.industries__card-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 1.65vw,1.4rem); color: #fff; line-height: 1.2; letter-spacing: -0.01em; }
.industries__card-desc { font-size: 0.9rem; color: var(--ink-muted-dark); line-height: 1.55; margin-top: 10px; }
.industries__card-footer { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px; }
.industries__card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.industries__card-tag { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(39,209,255,0.65); border: 1px solid rgba(39,209,255,0.18); border-radius: 3px; padding: 3px 8px; }
.industries__card-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; padding: 5px 13px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.22); transition: border-color 0.25s, color 0.25s; }
.industries__card:hover .industries__card-cta { border-color: var(--cyan-light); color: var(--cyan-light); }

/* ─── BAAS ─── */
.baas {
  padding: var(--section-pad);
  background: linear-gradient(180deg, transparent 0%, rgba(7, 7, 109, 0.1) 100%);
}

.baas__header { max-width: 640px; margin-bottom: 56px; }

.baas__heading {
  font-size: clamp(2rem, 3.3vw, 2.6rem);
  margin: 16px 0 20px;
}

.baas__intro { color: var(--body-text); font-size: 1.05rem; line-height: 1.7; }

.baas__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.baas__features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.baas__feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.baas__feature-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 44, 235, 0.1);
  border: 1px solid rgba(255, 44, 235, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.baas__feature-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 4px;
}

.baas__feature-desc {
  font-size: 0.85rem;
  color: var(--body-text);
  line-height: 1.6;
}

.baas__cta { margin-top: 8px; }

/* API code preview */
.baas__api-preview {
  background: #0a0a1a;
  /* SWEEP 2026-08-06: rim removed → inset top highlight + ambient shadow. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.78rem;
}

.baas__api-topbar {
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.baas__api-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.baas__api-dot:nth-child(1) { background: #FF5F57; }
.baas__api-dot:nth-child(2) { background: #FEBC2E; }
.baas__api-dot:nth-child(3) { background: #28C840; }

.baas__api-filename { margin-left: 8px; font-size: 0.72rem; color: var(--subtle); }

.baas__api-code { padding: 20px; line-height: 1.8; }

.api-comment  { color: #4a4a6a; }
.api-method   { color: #FF71FF; font-weight: 600; }
.api-endpoint { color: var(--cyan-light); }
.api-key      { color: #FFD580; }
.api-value    { color: #4FF7A0; }
.api-brace    { color: #888; }

/* ─── TESTIMONIAL ─── */
.testimonial {
  position: relative;
  padding: var(--section-pad);
  background:
    radial-gradient(ellipse 50% 60% at 85% 30%, rgba(255,44,235,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 15% 75%, rgba(72,72,255,0.14)  0%, transparent 65%),
    var(--navy-deep);
}
.testimonial::before,
.testimonial::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 1;
}
.testimonial::before {
  top: 0;
  background: linear-gradient(to bottom, var(--navy-deep) 0%, transparent 100%);
}
.testimonial::after {
  bottom: 0;
  background: linear-gradient(to top, var(--navy-deep) 0%, transparent 100%);
}

.testimonial__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}

.testimonial__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial__eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--magenta);
  flex-shrink: 0;
}

/* ── Swiper: long primary card + preview-tab peek of the next one ──
   The frame owns the clip + the padding: overflow:hidden clips at the
   *padding* edge, so padding here is breathing room for the primary card's
   own box-shadow/glow to bleed into before anything is actually cropped.
   Negative margin cancels the padding's effect on layout, so the visible
   card track still lines up with the rest of the section's content width —
   only the clip boundary moves outward. */
.testimonial__slider-frame {
  overflow: hidden;
  padding: 56px 24px 72px;
  margin: 0 -24px;
}
.testimonial__slider.swiper {
  /* compound selector, not just .testimonial__slider: Swiper's own bundled
     CSS sets .swiper{overflow:hidden} and loads after style.css, so at equal
     specificity it silently wins and re-hides this unless we out-specify it */
  overflow: visible; /* frame clips now — this only needs room to paint past its own edge */
}
.testimonial__slider .swiper-slide {
  position: relative;
  width: 100%; /* one full card at a time on narrow screens, no peek */
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: #030347;
  /* SWEEP 2026-08-06: rim removed → hairline inset top highlight; the featured
     card's managed shadow (below) still carries the depth. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: row;
}
.testimonial__slider .swiper-slide--featured {
  /* JS-managed class (see main.js), not Swiper's own .swiper-slide-active —
     only the settled primary card carries the shadow/glow. The peek card
     sits right at the frame's clip edge, so its own shadow would just get
     cropped, and Swiper's built-in active class updates live mid-drag,
     which made a plain CSS rule jump the shadow before a drag even settled. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) {
  /* From here there's room for the "peek" layout: a long primary card with
     the next one's edge showing as a preview tab on the right. */
  .testimonial__slider-frame {
    padding: 80px 64px 100px;
    margin: 0 -64px;
  }
  .testimonial__slider .swiper-slide {
    width: calc(100% - 160px); /* primary fills the frame; the next card starts right after (72px gap) and peeks in */
  }
  .testimonial__slider .swiper-slide-next::after {
    /* The peek card is ~152px visible before the frame's own clip boundary
       cuts it off (88px from the width formula above + the 64px of frame
       padding it also bleeds into). The fade lives on the card itself, from
       its own left edge (where the visible slice starts) out to that cut
       point, so it travels with the card and fades exactly where the real
       crop happens — not a fixed overlay guessing at the frame's geometry. */
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 180px;
    background: linear-gradient(to right, transparent, var(--navy-deep) 90%);
    pointer-events: none;
  }
  /* No equivalent mask is needed on the previous card: its spaceBetween gap
     (72px, set in main.js) is kept >= this padding (64px), so the previous
     slide's trailing edge always sits fully outside the clip boundary —
     nothing of it is ever in the frame's visible bleed zone to begin with. */
}
.testimonial__card { width: 100%; height: 100%; display: flex; flex-direction: row; } /* now just a layout wrapper inside swiper-slide */

.testimonial__card-photo {
  flex: 0 0 38%;
  overflow: hidden;
  position: relative;
}
.testimonial__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.testimonial__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(206, 17, 223, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(72, 72, 255, 0.2) 0%, transparent 60%),
    #030347;
}

.testimonial__quote-mark {
  font-family: 'Lato', sans-serif;
  font-size: 4rem;
  line-height: 0.7;
  color: var(--magenta);
  margin-bottom: 12px;
  font-weight: 900;
}

.testimonial__quote {
  font-size: clamp(0.82rem, 1.16vw, 0.96rem);
  font-style: italic;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
  border: none;
  padding: 0;
}

.testimonial__attr { display: flex; flex-direction: column; gap: 4px; }

.testimonial__name {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}
.testimonial__role {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ── Controls ── */
.testimonial__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
}

.testimonial__pagination.swiper-pagination {
  position: static;
  display: flex;
  gap: 8px;
  align-items: center;
  width: auto;
}
.testimonial__pagination .swiper-pagination-bullet {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
  margin: 0;
  transition: background 0.25s, transform 0.25s;
}
.testimonial__pagination .swiper-pagination-bullet-active {
  background: var(--magenta);
  transform: scale(1.4);
}

.testimonial__nav { display: flex; gap: 10px; }

/* ── Carousel nav button — shared language (Benn, 2026-08-05):
   testimonial / finxp-slider / audience-carousel all use this exact
   surface + chevron + hover treatment, unified at 9px radius. Sitewide
   home for the shared rule lives here since testimonial is the reference;
   .finxp-slider__btn and .audience__arrow keep their own wrapper/position
   rules in their own sections, but the button surface itself is shared. ── */
.testimonial__nav-btn,
.finxp-slider__btn,
.audience__arrow,
.feature-grid__rail-btn,
.blog-pagination .prev.page-numbers,
.blog-pagination .next.page-numbers {
  width: 44px; height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.testimonial__nav-btn::after,
.finxp-slider__btn::after,
.audience__arrow::after,
.feature-grid__rail-btn::after {
  content: '';
  display: block;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
}
.testimonial__nav-btn--prev::after,
.finxp-slider__btn--prev::after,
.audience__arrow--prev::after,
.feature-grid__rail-btn--prev::after { transform: rotate(-135deg); }
.testimonial__nav-btn--next::after,
.finxp-slider__btn--next::after,
.audience__arrow--next::after,
.feature-grid__rail-btn--next::after { transform: rotate(45deg); }
.testimonial__nav-btn:hover,
.finxp-slider__btn:hover:not(.swiper-button-disabled),
.audience__arrow:hover,
.feature-grid__rail-btn:hover:not(:disabled),
.blog-pagination .prev.page-numbers:hover,
.blog-pagination .next.page-numbers:hover {
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 6px 20px rgba(255, 44, 235, 0.35);
  transform: scale(1.08);
}

@media (max-width: 768px) {
  .testimonial__slider .swiper-slide { height: auto; min-height: 420px; }
  .testimonial__card, .testimonial__slider .swiper-slide { flex-direction: column; }
}

/* ── Brands strip ── */
.testimonial__brands {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.testimonial__brands-group { display: flex; flex-direction: column; gap: 14px; }

.testimonial__brands-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.38);
}

.testimonial__brands-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* "As seen in" press logos — small, subtle white marks */
.testimonial__press-logo {
  height: 20px;
  width: auto;
  align-self: center;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.testimonial__press-logo:hover {
  opacity: 0.9;
}

.t-chip {
  display: inline-block;
  padding: 8px 16px;
  /* SWEEP 2026-08-06: resting rim → transparent + bg fill; hover magenta border
     and the Mastercard tint (deliberate accents) stay. */
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
  cursor: default;
}
.t-chip:hover {
  border-color: var(--magenta);
  color: #fff;
  transform: translateY(-2px);
}
.t-chip--mc {
  border-color: rgba(235, 0, 27, 0.3);
  color: #FF5555;
}


/* ─── CTA SECTION ─── */
.cta-section { padding: var(--section-pad); background: var(--navy-black); }

.cta-section__inner {
  position: relative;
  background: linear-gradient(135deg, rgba(206, 17, 223, 0.15) 0%, rgba(72, 72, 255, 0.15) 50%, rgba(0, 161, 233, 0.08) 100%);
  border-radius: 24px;
  padding: 72px 80px;
  overflow: hidden;
  text-align: center;
  /* SWEEP 2026-08-06: rim removed → inset top highlight + soft ambient depth;
     the gradient wash already separates the panel from the flat navy. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px rgba(2, 2, 53, 0.35);
}

.cta-section__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 44, 235, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.cta-section__inner > * { position: relative; z-index: 1; }

.cta-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 247, 160, 0.08);
  border: 1px solid rgba(79, 247, 160, 0.2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 0.75rem;
  color: #4FF7A0;
  font-weight: 600;
  margin-bottom: 24px;
}

.cta-section__badge::before { content: '✓'; font-weight: 900; }

.cta-section__heading {
  font-size: clamp(2rem, 3.85vw, 3rem);
  margin-bottom: 20px;
  /* CTA AUDIT 2026-08-06 (Benn: "no odd looking line breaks"): balance multi-
     line headings so no orphan last word (e.g. why-finxp's "…your model"). */
  text-wrap: balance;
}

.cta-section__sub {
  color: var(--body-text);
  font-size: 1.05rem;
  /* CTA AUDIT 2026-08-06: 480px forced 5-line stacks with one-word last lines
     on the longer inner-page subs (trust-and-compliance, payment-gateway,
     industries). Slightly wider measure + `pretty` (avoids orphan last lines)
     keep the block compact and clean; short subs are unaffected.
     WIDENED 2026-08-10 (Benn: wants a wider sub) 560px -> 720px; re-verified
     the same three longest-sub pages still wrap cleanly with `pretty`. */
  max-width: 720px;
  text-wrap: pretty;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* FIX 2026-08-10 (client: "career pages should have buttons line up with
   content" — single-job.php reuses .cta-section__actions for its
   Apply-now/All-openings row, but that class is built for the CTA block's
   CENTERED panel; nested inside the job single's left-aligned prose
   column it rendered the buttons centered under left-aligned body copy.
   Compound selector (not a bare class) so it beats the shared rule below
   regardless of source order; doesn't touch the CTA block/guide/case-study
   reuses of the shared class. */
.cta-section__actions.job-single__actions { justify-content: flex-start; }

.cta-section__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ─── LINK ARROW ─── */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--magenta);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.link-arrow::after { content: '→'; transition: transform 0.2s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stats__item:nth-child(3) { border-right: none; }
  .baas__grid { grid-template-columns: 1fr; gap: 40px; }
  .testimonial__track { margin: 0 60px; height: 440px; }
  .testimonial__controls { margin: 24px 60px 0; }
  .testimonial__brands { gap: 40px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  /* Override the row's 40px directly — padding .site-header itself stacked
     onto it and pushed the logo to 60px, off the 20px content gutter */
  .site-header__row { padding: 0 20px; }
  .container { padding: 0 20px; }
  .drawer__head { padding: 0 20px; }
  .drawer__body { padding: 16px 20px 48px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(2) { border-right: none; }
  .cta-section__inner { padding: 48px 24px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
  .site-footer__legal a { margin: 0 10px; }
}

@media (max-width: 480px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stats__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* ─── FOOTER ─── */
.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 64px 0 0;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}

.site-footer__brand p {
  margin: 16px 0 24px;
  font-size: 0.88rem;
  color: var(--subtle);
  max-width: 260px;
  line-height: 1.7;
}

.site-footer__contact {
  display: block;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 420px;
  margin-bottom: 14px;
}

.site-footer__emi-badge {
  display: block;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 420px;
  font-weight: 400;
}

.site-footer__social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: var(--subtle);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.2s, background 0.2s;
}

.site-footer__social-link:hover {
  color: #27D1FF;
  background: rgba(255, 255, 255, 0.08);
}

.site-footer__social-link svg {
  width: 20px;
  height: 20px;
  display: block;
}

.site-footer__col h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--subtle);
  margin-bottom: 20px;
}

.site-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__col a {
  color: var(--body-text);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s;
}
.site-footer__col a:hover { color: var(--white); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-w);
  margin: 48px auto 0;
  padding: 24px 40px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  color: var(--subtle);
}

.site-footer__legal a {
  color: var(--subtle);
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.2s;
}
.site-footer__legal a:hover { color: var(--white); }

/* ─── BLOCK EDITOR ADMIN TOOLBAR OFFSET ─── */
.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ── SOLUTIONS STACK (scroll-pinned card stack replacing product-tabs) ── */
.solutions-stack {
  background: var(--navy-deep);
  padding-top: 96px;
  padding-bottom: 0;
  position: relative;
}
@property --glow-x-l {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 6%;
}
@property --glow-x-r {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 94%;
}
.solutions-stack__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.solutions-stack__glow::before,
.solutions-stack__glow::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* Left magenta: slides in from left edge, dwells, slides back out */
.solutions-stack__glow::before {
  background: radial-gradient(ellipse 18% 45% at var(--glow-x-l) 42%, rgba(206,17,223,0.66) 0%, rgba(206,17,223,0) 100%);
  animation: driftLeft 12s ease-in-out infinite alternate;
}
/* Right cyan: mirrors left exactly — same duration, no delay offset */
.solutions-stack__glow::after {
  background: radial-gradient(ellipse 18% 40% at var(--glow-x-r) 38%, rgba(39,209,255,0.63) 0%, rgba(39,209,255,0) 100%);
  animation: driftRight 12s ease-in-out infinite alternate;
}
@keyframes driftLeft {
  0%   { --glow-x-l: 6%; }
  100% { --glow-x-l: 22%; }
}
@keyframes driftRight {
  0%   { --glow-x-r: 94%; }
  100% { --glow-x-r: 78%; }
}
/* Each frame repaints a large radial-gradient layer — halt it when the
   solutions section is off-screen (JS toggles .is-paused via IntersectionObserver). */
.solutions-stack__glow.is-paused::before,
.solutions-stack__glow.is-paused::after { animation-play-state: paused; }
.solutions-stack__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 80px;
}
.solutions-stack__intro .eyebrow { justify-content: center; }
.solutions-stack__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.85vw, 3rem);
  color: var(--white);
  margin-top: 14px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.solutions-stack__lead {
  color: var(--ink-muted-dark);
  font-size: 1.05rem;
  margin-top: 16px;
  line-height: 1.65;
}
.solutions-stack__rail { position: relative; }
.solutions-card {
  position: sticky;
  /* Centre the pinned card at any viewport height; 700px cards clipped on <780px-tall laptops */
  top: calc((100vh - min(700px, 90vh)) / 2);
  width: 1400px;
  max-width: calc(100% - 48px);
  height: min(700px, 90vh);
  /* No bottom margin: sticky travel is constrained by the element's own
     margins, so a margin here makes cards unpin 50vh before the next card
     covers them — .solutions-stack__gap divs carry the spacing instead */
  margin: 0 auto;
  z-index: calc(10 + var(--n));
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #07076D 0%, #020235 100%);
  /* SWEEP 2026-08-06: rim removed → inset top highlight + ambient depth (the
     stacked cards need edge separation as they pin over one another). */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 60px rgba(0, 0, 0, 0.40);
  transform-origin: top center;
}
/* Fixed dwell after the last pinned card. Was 80vh paired with margin-top:-650px
   on #journey-cards — that pair only balanced at ~1080px-tall screens and made
   the journey heading slide behind the pinned card on shorter laptops. */
.solutions-stack__end { height: 200px; }
/* Scroll room between cards (replaces the old margin-bottom: 50vh) */
.solutions-stack__gap { height: 50vh; }
.solutions-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.solutions-card__left {
  padding: 60px 48px 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.solutions-card__num {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.12em;
  margin-bottom: 20px;
  display: block;
}
.solutions-card__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 2.86vw, 2.6rem);
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 12px;
  margin-bottom: 20px;
}
.solutions-card__desc {
  color: var(--ink-muted-dark);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 420px;
}
.solutions-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 36px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.solutions-card__features li {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
.solutions-card__features li::before {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cyan-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23020235' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
/* i18n belt-and-braces: non-English product copy runs longer and can push the
   CTA out of the fixed-height pinned card (e.g. DE #04 SEPA-Lastschrift). For
   non-English languages only, tighten the left-column rhythm and let it scroll
   as a last resort so the CTA is always reachable. English is untouched. */
html:not([lang^="en"]) .solutions-card__left {
  padding-top: 40px;
  padding-bottom: 40px;
  min-height: 0;
  overflow-y: auto;
}
html:not([lang^="en"]) .solutions-card__heading { margin-bottom: 14px; }
html:not([lang^="en"]) .solutions-card__desc { margin-bottom: 18px; line-height: 1.55; }
html:not([lang^="en"]) .solutions-card__features { margin-bottom: 22px; row-gap: 8px; }

.solutions-card__right { position: relative; overflow: hidden; }
.solutions-card__visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.solutions-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.solutions-card__frost {
  position: absolute; inset: 0;
  background: rgba(5, 5, 45, 0.12);
  z-index: 1;
}
.solutions-card__visual-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 50%, var(--grad-a, #CE11DF) 0%, transparent 70%),
              radial-gradient(ellipse 60% 80% at 30% 70%, var(--grad-b, #4848FF) 0%, transparent 70%);
  opacity: 0.2;
  z-index: 2;
}
.solutions-card__pills {
  position: absolute; inset: 0; z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 40px;
  gap: 10px;
  pointer-events: none;
}
.solutions-card__pill {
  background: rgba(255,255,255,0.10);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  width: fit-content;
  opacity: 0;
}
.solutions-card__pill:nth-child(even) { margin-left: 32px; }
@media (max-width: 860px) {
  .solutions-card { position: relative; top: auto; width: 100%; max-width: 100%; height: auto; min-height: 0; border-radius: 16px; margin: 0 auto; }
  .solutions-stack__gap { height: 24px; }
  .solutions-card__inner { grid-template-columns: 1fr; }
  .solutions-card__left { padding: 40px 28px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .solutions-card__right { min-height: 280px; }
  .solutions-stack__rail { padding: 0 20px 40px; }
  .solutions-stack__end { height: 0; }

  /* Pills float here like desktop, but anchored to the bottom of the panel
     and kept small so they sit over foregrounds, not faces */
  .solutions-card__pills { justify-content: flex-end; padding: 16px 16px 18px; gap: 8px; }
  .solutions-card__pill { font-size: 0.72rem; padding: 7px 13px; }
  .solutions-card__pill:nth-child(even) { margin-left: 20px; }

  /* Radial brand halo breathing behind each card (uses the card's own
     gradient pair). The card's transform (scroll recede) creates a stacking
     context, so a z:-1 pseudo can only get behind the card surface if that
     surface lives on the inner wrapper — the card itself goes transparent
     and un-clipped, the inner takes over background/border/clipping. */
  .solutions-card { overflow: visible; background: none; border: none; box-shadow: none; }
  .solutions-card__inner {
    background: linear-gradient(160deg, #07076D 0%, #020235 100%);
    /* SWEEP 2026-08-06: rim removed (matches the desktop card treatment). */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    overflow: hidden;
  }
  .solutions-card::before {
    content: '';
    position: absolute;
    inset: -56px -32px;
    z-index: -1;
    /* Ellipses sized/placed so alpha reaches 0 inside the box — a radial
       still visible at the box edge prints a hard crop line */
    background:
      radial-gradient(ellipse 55% 45% at 38% 32%, var(--grad-a, #CE11DF) 0%, transparent 68%),
      radial-gradient(ellipse 55% 45% at 62% 70%, var(--grad-b, #4848FF) 0%, transparent 68%);
    animation: card-halo 9s ease-in-out infinite alternate;
  }

  /* Glow: the desktop side pillars don't read at stacked widths — replace
     with one seamless brand wash that pans slowly up the whole section */
  .solutions-stack__glow { overflow: hidden; }
  .solutions-stack__glow::before {
    inset: 0;
    height: 200%;
    background: linear-gradient(180deg,
      rgba(206, 17, 223, 0.10) 0%,
      rgba(72, 72, 255, 0.06) 12.5%,
      rgba(39, 209, 255, 0.08) 25%,
      rgba(72, 72, 255, 0.06) 37.5%,
      rgba(206, 17, 223, 0.10) 50%,
      rgba(72, 72, 255, 0.06) 62.5%,
      rgba(39, 209, 255, 0.08) 75%,
      rgba(72, 72, 255, 0.06) 87.5%,
      rgba(206, 17, 223, 0.10) 100%);
    animation: solutions-glow-pan 26s linear infinite;
  }
  .solutions-stack__glow::after { display: none; }
}
/* Gradient repeats every 50% of the layer, so translating -50% loops seamlessly */
@keyframes solutions-glow-pan {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
@keyframes card-halo {
  from { opacity: 0.16; transform: scale(0.97); }
  to   { opacity: 0.34; transform: scale(1.03); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .solutions-stack__glow::before { animation: none; }
  .solutions-card::before { animation: none; opacity: 0.24; }
}

/* =====================================================================
   JOURNEY CARDS (Nium-style)
   ===================================================================== */
.journey-cards { background: var(--navy-black); padding: 96px 0; }
.journey-cards__head { max-width: 560px; margin-bottom: 48px; }
.journey-cards__heading { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.52vw,2.6rem); color: #fff; margin-top: 14px; letter-spacing: -0.01em; }
.journey-cards__track { display: flex; gap: 16px; min-height: 480px; }
.journey-card { position: relative; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); cursor: pointer; transition: flex 0.7s cubic-bezier(0.4,0,0.2,1); flex: 0.65; min-width: 0; }
.journey-card.is-active { flex: 5; cursor: default; }
.journey-card__collapsed { position: absolute; inset: 0; transition: opacity 0.2s; }
.journey-card.is-active .journey-card__collapsed { opacity: 0; pointer-events: none; }
.journey-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(6px); transform: scale(1.1); z-index: 0; }
.journey-card__overlay-1 { position: absolute; inset: 0; background: #07076D; mix-blend-mode: multiply; opacity: 0.76; z-index: 1; }
.journey-card__overlay-2 { position: absolute; inset: 0; background: linear-gradient(180deg, #07076D 0%, var(--navy-black) 100%); opacity: 0.85; z-index: 2; }
.journey-card__collapsed-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding: 28px 12px; }
.journey-card__step-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--cyan-light); text-transform: uppercase; white-space: nowrap; }
.journey-card__vertical-title { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; writing-mode: vertical-lr; transform: rotate(180deg); white-space: nowrap; text-align: center; }
.journey-card__expand-icon { color: rgba(255,255,255,0.4); font-size: 1.4rem; line-height: 1; }
.journey-card__expanded { position: absolute; inset: 0; display: flex; flex-direction: row; background: linear-gradient(135deg, #07076D 0%, #040442 100%); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
.journey-card.is-active .journey-card__expanded { opacity: 1; pointer-events: auto; }
.journey-card__expanded-inner { flex: 1; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.journey-card__step-eyebrow { margin-bottom: 8px; justify-content: flex-start; }
.journey-card__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 1.98vw,1.7rem); color: #fff; margin-top: 12px; line-height: 1.25; letter-spacing: -0.01em; }
.journey-card__desc { color: var(--ink-muted-dark); margin-top: 14px; font-size: 0.95rem; line-height: 1.6; max-width: 360px; }
.journey-card__expanded-inner .btn { margin-top: 28px; align-self: flex-start; }
.journey-card__visual { flex: 1; position: relative; overflow: hidden; display: flex; align-items: stretch; }
.journey-card__visual-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.journey-progress { display: flex; gap: 8px; margin-top: 20px; }
.journey-progress__seg { position: relative; flex: 1; height: 3px; background: rgba(255,255,255,0.12); border: none; padding: 0; cursor: pointer; border-radius: 2px; overflow: hidden; }
.journey-progress__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--magenta) 0%, var(--violet) 50%, var(--cyan-light) 100%); transform: scaleX(0); transform-origin: left; border-radius: 2px; }
.journey-progress__seg.is-active .journey-progress__fill { animation: journeyFill 5s linear forwards; }
.journey-progress__seg.is-done .journey-progress__fill { transform: scaleX(1); animation: none; }
@keyframes journeyFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.journey-cards__licence { margin-top: 20px; font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.6; }
.journey-cards__licence a { color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset: 2px; }
.journey-cards__licence a:hover { color: #fff; }
@media (max-width: 860px) {
  .journey-cards__track { flex-direction: column; min-height: auto; gap: 12px; }
  /* Cards are all expanded here — the auto-advance progress bar drives nothing */
  .journey-progress { display: none; }
  .journey-card { flex: none !important; min-height: 320px; }
  .journey-card__collapsed { display: none; }
  .journey-card__expanded { opacity: 1 !important; pointer-events: auto; position: relative; min-height: 320px; flex-direction: column; }
  .journey-card__visual { display: none; }
  .journey-card__expanded-inner { padding: 32px 24px; }
}

/* =====================================================================
   INDUSTRIES — mobile fallback
   ===================================================================== */
@media (max-width: 767px) {
  .industries { height: auto; min-height: unset; overflow: visible; }
  .industries__spotlight { inset: 0; }
  .industries__inner { padding: 56px 20px 40px; }
  .industries__track { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; height: auto; gap: 12px; padding-right: 0; }
  .industries__card { height: auto; min-height: 220px; padding: 20px 18px 16px; }
  .industries__card-num { font-size: 3.5rem; }
}

/* =====================================================================
   AUDIENCE — split panel with tabbed segments and image panel
   ===================================================================== */

.audience { background: transparent; }

.audience__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px 40px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: stretch;
  min-height: 680px;
}

.audience__left { display: flex; flex-direction: column; justify-content: center; }

.audience__heading { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.52vw, 44px); color: var(--white); line-height: 1.12; letter-spacing: -0.02em; margin-top: 12px; }
.audience__lead { font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin-top: 18px; max-width: 380px; }

/* Tabs */
.audience__tabs { display: flex; flex-direction: column; gap: 2px; margin-top: 44px; }

.audience__tab {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 14px 16px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  position: relative;
  border-radius: 0 10px 10px 0;
  transition: background 0.2s;
}
.audience__tab::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  transition: background 0.3s, top 0.3s, bottom 0.3s;
}
.audience__tab:hover { background: rgba(255,255,255,0.03); }
.audience__tab.is-active { background: rgba(255,255,255,0.04); }
.audience__tab.is-active::before { background: var(--grad-xp); top: 0; bottom: 0; }

.tab-num { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.3); flex-shrink: 0; width: 20px; transition: color 0.25s; }
.audience__tab.is-active .tab-num { color: var(--cyan-light); }

.tab-content { flex: 1; min-width: 0; }

.tab-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: rgba(255,255,255,0.45); line-height: 1.3; transition: color 0.25s; }
.audience__tab.is-active .tab-title { color: var(--white); }

.tab-desc { display: none; }

.tab-arrow { width: 6px; height: 6px; border-right: 1.5px solid rgba(255,255,255,0.2); border-bottom: 1.5px solid rgba(255,255,255,0.2); transform: rotate(-45deg); flex-shrink: 0; transition: border-color 0.25s, transform 0.3s; }
.audience__tab.is-active .tab-arrow { border-color: var(--cyan-light); transform: rotate(45deg); }

.audience__progress { display: flex; gap: 5px; margin-top: 28px; margin-left: 20px; }
.audience__progress-seg { flex: 1; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.audience__progress-fill { height: 100%; width: 0%; background: rgba(255,255,255,0.65); border-radius: 2px; }
.audience__progress-fill.is-done { width: 100%; }
.audience__progress-fill.is-running { animation: seg-progress var(--seg-dur, 5s) linear forwards; }

@keyframes seg-progress { from { width: 0%; } to { width: 100%; } }

/* Right panel */
.audience__panel {
  position: relative;
  border-radius: 20px;
  clip-path: inset(0 round 20px);
  min-height: 620px;
  isolation: isolate;
}

/* Image groups — deck of cards stack */
.audience__img-group { position: absolute; inset: 0; z-index: 1; }
.audience__img-group.is-active   { z-index: 10; }
.audience__img-group.is-exiting  { z-index: 5; }
.audience__img-group.is-entering { z-index: 11; animation: card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

.audience__img-group::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(2,2,53,0.35) 0%,
    transparent 25%,
    transparent 42%,
    rgba(2,2,53,0.78) 68%,
    rgba(2,2,53,0.97) 100%
  );
  z-index: 2;
  pointer-events: none;
}

@keyframes card-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.audience__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 25%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.audience__img.is-active { opacity: 1; }

/* Dots */
.audience__img-dots { position: absolute; top: 20px; right: 20px; z-index: 20; display: none; gap: 6px; align-items: center; pointer-events: none; }
.audience__img-dots.is-active { display: flex; }
.audience__img-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: background 0.35s, transform 0.35s; }
.audience__img-dot.is-active { background: rgba(255,255,255,0.88); transform: scale(1.3); }

/* Arrows — surface/chevron/hover come from the shared carousel-nav-btn
   rule (see TESTIMONIAL section); only the corner placement + backdrop
   blur + hidden-state live here. */
.audience__arrows { position: absolute; bottom: 36px; right: 36px; z-index: 20; display: flex; gap: 8px; align-items: center; }
.audience__arrow {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.audience__arrow.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* Feature content — lives inside each img-group, moves with the card */
.audience__feature {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 40px 40px;
  z-index: 3;
}

.feature-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-light); display: block; margin-bottom: 10px; }
.feature-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 2.64vw, 2.2rem); color: var(--white); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; }
.feature-desc { font-size: 0.9rem; color: rgba(255,255,255,0.72); line-height: 1.65; max-width: 480px; margin-bottom: 20px; }

.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.feature-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(39,209,255,0.75); border: 1px solid rgba(39,209,255,0.2); border-radius: 3px; padding: 4px 10px; }

.feature-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.feature-cta:hover { background: rgba(39,209,255,0.1); border-color: rgba(39,209,255,0.5); color: var(--cyan-light); }

@media (max-width: 1100px) {
  .audience__inner { grid-template-columns: 360px 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .audience__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .audience__inner { grid-template-columns: 1fr; padding: 64px 20px 48px; min-height: auto; }
  .audience__panel { min-height: 480px; }
  .audience__left { justify-content: flex-start; }
}

/* =====================================================================
   CASE STUDY SCROLLER (Mollie-style)
   ===================================================================== */
.case-study-scroller { background: var(--navy-black); padding: 96px 0 0; }
.case-study-scroller__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; }
.case-study-scroller__header-left { max-width: 640px; }
.case-study-scroller__heading { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.1vw,2.35rem); color: #fff; margin-top: 14px; letter-spacing: -0.01em; }
.case-study-scroller__view-all { font-size: 0.9rem; font-weight: 700; color: var(--cyan-light); white-space: nowrap; padding-bottom: 4px; flex-shrink: 0; }
.case-study-scroller__viewport {
  overflow: hidden;
  padding: 0 0 64px;
  margin-top: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.case-study-scroller__track { display: flex; gap: 20px; will-change: transform; }
.case-study-card { min-width: 360px; height: 500px; border-radius: var(--radius-card); overflow: hidden; position: relative; flex-shrink: 0; text-decoration: none; display: block; }
.case-study-card__media { position: absolute; inset: 0; }
.case-study-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; display: block; }
.case-study-card:hover .case-study-card__img { transform: scale(1.06); }
.case-study-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,2,53,0.88) 0%, rgba(2,2,53,0.2) 50%, transparent 100%); }
.case-study-card__meta { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 1; }
.case-study-card__category { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan-light); display: block; margin-bottom: 8px; }
.case-study-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; line-height: 1.3; }
@media (max-width: 640px) { .case-study-card { min-width: 280px; height: 400px; } }

/* =====================================================================
   REDUCED MOTION — new sections
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .journey-card { transition: none; }
  .journey-card__expanded, .journey-card__collapsed { transition: none; }
  .sig-state { transition: none; }
}

/* =====================================================================
   SIGNATURE SECTION — framed 16:9 feature box scroll-scrub + trust text + stats
   Full-bleed was rejected (uncontrolled crop across viewports, subject too
   large). The sequence now lives in a fixed-aspect 16:9 panel, centred in
   the 100vh pin — rounded, glass-bordered, deep-shadowed. Fixed aspect means
   the canvas is never cropped: the box shrinks with the viewport instead
   (width-bound on wide screens, height-bound on squat ones). Section bg is
   site navy — a framed screen doesn't need to blend with the render's
   background. Left text scrim keeps copy legible over the box's left edge.
   ===================================================================== */
.signature {
  background: var(--navy-deep, #020235);
  padding: 0;
  /* No overflow:hidden — it clipped the canvas box's bottom drop-shadow at the
     section boundary. The canvas itself is already clipped to the rounded box by
     .signature-canvas-wrap's own overflow:hidden, and body has overflow-x:hidden,
     so letting this be visible only frees the shadow to bleed into the next section. */
}
/* The framed box's deep drop-shadow (0 34px 90px) bleeds below the pin into the
   top of .industries. That section's opaque top-fade scrim used to hard-cut it;
   the scrim is now removed, so the shadow fades over industries' empty top padding
   and no spacer is needed here — keeping the signature→industries gap tight. */
.signature-pin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  /* Center the canvas in the area BELOW the fixed 72px .site-header, not the
     full viewport — otherwise it reads as sitting high, more so on tall screens.
     padding-top sits inside the 100vh (border-box) so the pin stays exactly one
     viewport tall and adds no extra scroll. */
  box-sizing: border-box;
  padding-top: 72px;
  /* no max-width — full bleed split */
}
.signature-canvas-wrap {
  position: relative;
  z-index: 0;
  /* height clamp subtracts the header (72) too so the box fits below it */
  width: min(calc(100% - 64px), calc((100vh - 72px - 64px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 24px;
  /* SWEEP 2026-08-06: rim removed — the existing inset top highlight + deep
     shadow already carried this box; the border was doubling it cheaply. */
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
#sig-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#sig-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
/* Scrim: text legibility over the box's left edge */
.signature-scrim {
  position: absolute;
  pointer-events: none;
}
.signature-scrim--text {
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 6, 45, 0.88) 0%, rgba(4, 6, 45, 0.60) 32%, transparent 62%);
}
.signature-text {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  max-width: 560px;
  padding: 100px 40px 100px clamp(40px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}
.signature__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 3.85vw, 3.2rem);
  color: #fff;
  margin-top: 14px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sig-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  margin-bottom: 28px;
}
.sig-progress__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.4s ease, transform 0.4s ease;
}
.sig-progress__dot.is-active {
  background: #27D1FF;
  transform: scale(1.4);
}
.sig-states {
  position: relative;
  min-height: 120px;
}
.sig-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  font-size: 1.2rem;
  line-height: 1.7;
}
.sig-state.is-active { opacity: 1; transform: translateY(0); }
.signature-stats {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
.signature-stats .stat-num {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 3.3vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.signature-stats .stat-label {
  font-size: 0.82rem;
  color: var(--ink-muted-dark);
  margin-top: 7px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Laptop-short: keep the pin exactly 100vh — the text column otherwise outgrows
   squat viewports (e.g. 620px) and the overflow is invisible while pinned */
@media (min-width: 941px) and (max-height: 700px) {
  .signature-text { padding-top: 48px; padding-bottom: 48px; }
  .signature__heading { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
  .sig-progress { margin-top: 18px; margin-bottom: 18px; }
  .sig-states { min-height: 96px; }
  .sig-state { font-size: 1.05rem; }
  .signature-stats { margin-top: 26px; gap: 20px 28px; }
  .signature-stats .stat-num { font-size: clamp(1.9rem, 2.6vw, 2.3rem); }
}
@media (max-width: 940px) {
  .signature-pin {
    display: block;
    min-height: auto;
    align-items: start;
  }
  /* No media on mobile/tablet: the scrub canvas is desktop-only and the
     static fallback poster is only needed for desktop reduced-motion / no-ScrollTrigger cases.
     .signature-text now lives inside .signature-canvas-wrap (desktop anchor fix) — the wrap
     itself must stay visible and reset to a plain static container here, otherwise hiding it
     would take the text down with it. Only the visual media children are hidden. */
  .signature-canvas-wrap {
    display: block;
    position: static;
    width: auto;
    aspect-ratio: auto;
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  #sig-canvas { display: none; }
  #sig-fallback { display: none; }
  .signature-scrim { display: none; }
  .signature-text {
    position: static;
    max-width: 100%;
    padding: 40px 20px 72px;
  }
  /* No scroll scrub on mobile — show all three text states as static copy */
  .sig-progress { display: none; }
  .sig-states { min-height: 0; }
  .sig-state {
    position: static;
    opacity: 1;
    transform: none;
    font-size: 1.05rem;
    margin: 0 0 16px;
  }
}
/* Trim the seam facing the signature pin: the pin itself already carries built-in
   top/bottom slack from centering the 16:9 box in 100vh, so the neighbour's own
   full section rhythm (96px) on this one edge reads as extra dead space on top
   of that. Desktop-only — mobile signature has no pin/box and keeps its normal 56px. */
@media (min-width: 941px) {
  .journey-cards { padding-bottom: 64px; }
}

/* =====================================================================
   RESPONSIVE LAYER — consolidated breakpoint overrides.
   Must stay at the END of this file: several section base rules were
   appended after the mid-file RESPONSIVE block and silently override
   its media queries (equal specificity, later in cascade).
   ===================================================================== */

/* Off-canvas drawer + hidden mega-panels leak into scroll width */
html, body { overflow-x: clip; }

/* ── ≤1024 tablet ── */
@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ── ≤940 (hamburger nav point) ── */
@media (max-width: 940px) {
  .hero__inner { gap: 48px; }
  .solutions-stack__intro { padding-left: 24px; padding-right: 24px; }
}

/* ── ≤768 mobile ── */
@media (max-width: 768px) {
  .container { padding: 0 20px; }

  /* Hero */
  .hero { min-height: auto; }
  .hero__inner { padding: 72px 20px 56px; gap: 0; }

  /* Trust marquee */
  .trust-marquee { padding: 14px 0; }
  .trust-chip { font-size: 0.72rem; padding: 6px 12px; gap: 7px; }
  .trust-chip svg { width: 13px; height: 13px; }
  .trust-chip__logo { height: 13px; }
  .trust-press { gap: 28px; --logo-scale: 0.72; }
  .trust-press__label { display: none; }
  .trust-press__logo { max-width: 130px; }

  /* Audience panel — darker scrim so feature copy reads over photos */
  .audience__panel { min-height: 560px; }
  .audience__img-group::after {
    background: linear-gradient(to bottom,
      rgba(2,2,53,0.35) 0%,
      rgba(2,2,53,0.12) 20%,
      rgba(2,2,53,0.55) 45%,
      rgba(2,2,53,0.92) 68%,
      rgba(2,2,53,0.99) 100%);
  }
  .audience__feature { padding: 0 24px 28px; }
  /* Mobile: segment arrows sat bottom-right, on top of the full-width feature
     CTA. Move them to the top-right corner (over the clear upper image) so they
     never collide with the CTA; shift the per-image dots to the top-left so the
     two corner controls don't clash. */
  .audience__arrows { top: 16px; right: 16px; bottom: auto; }
  .audience__img-dots { top: 18px; left: 20px; right: auto; }

  /* Testimonial — stacked card layout, full-width track */
  .testimonial__inner { padding: 0 20px; }
  .testimonial__card-photo {
    flex: 0 0 auto;
    /* Was a fixed 190px, short/wide enough on a narrow phone card to crop
       into people's heads with object-fit:cover. A square keeps enough
       height to stop that regardless of how wide the phone actually is,
       without going as tall as a portrait ratio would. */
    aspect-ratio: 1 / 1;
  }
  .testimonial__card-body { padding: 24px; justify-content: flex-start; }
  .testimonial__quote { font-size: 0.86rem; }
  .testimonial__controls { margin: 20px 0 0; }
  .testimonial__brands { gap: 28px; margin-top: 40px; }

  /* Case studies */
  .case-study-scroller__header { flex-direction: column; align-items: flex-start; }

  /* CTA */
  .cta-section__inner { padding: 48px 20px; }
  .cta-section__heading { font-size: clamp(1.7rem, 7.7vw, 2.4rem); }

  /* Footer — base rules live after the old responsive block; re-assert */
  .site-footer__inner { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; }
  .site-footer__bottom { flex-direction: column; gap: 14px; text-align: center; padding: 24px 24px 32px; }
  .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
  .site-footer__legal a { margin: 0; }
}

/* ── ≤560 small phones ── */
@media (max-width: 560px) {
  .industries__track { grid-template-columns: 1fr; }
  .industries__card { min-height: 180px; }
  .solutions-card__left { padding: 32px 20px; }
  .solutions-card__features { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.1rem, 9.9vw, 2.6rem); }
  .feature-title { font-size: 1.5rem; }
  .testimonial__track { height: 560px; }
}

/* ── ≤768 global mobile spacing pass ──
   Reduce the shared section padding token once, instead of per-section
   overrides; explicit per-section mobile paddings above still win. */
@media (max-width: 768px) {
  :root { --section-pad: 56px 20px; }
  .journey-cards { padding: 56px 0; }
}

/* ── ≤480 small-phone fixes ── */
@media (max-width: 480px) {
  /* Gradient keywords in the hero title force horizontal overflow if kept on one line */
  .hero__title em { white-space: normal; }
}

/* ── <768 ambient backdrop drift ──
   The JS spotlight system is desktop-only, which left the mobile backdrop
   frozen. Move the two static glows onto pseudo-elements and let them
   breathe — transform/opacity only, so it stays compositor-cheap. */
@media (max-width: 767px) {
  #atmo-bg { background: none; overflow: hidden; }
  #atmo-bg::before,
  #atmo-bg::after {
    content: '';
    position: absolute;
    inset: -25%;
    will-change: transform, opacity;
  }
  #atmo-bg::before {
    background: radial-gradient(ellipse 45% 35% at 78% 18%, rgba(39,209,255,0.15) 0%, transparent 100%);
    animation: atmo-drift-a 14s ease-in-out infinite alternate;
  }
  #atmo-bg::after {
    background: radial-gradient(ellipse 50% 40% at 50% 95%, rgba(206,17,223,0.18) 0%, transparent 100%);
    animation: atmo-drift-b 18s ease-in-out infinite alternate;
  }
  @keyframes atmo-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
    to   { transform: translate3d(-7%, 5%, 0) scale(1.22); opacity: 1; }
  }
  @keyframes atmo-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.15); opacity: 1; }
    to   { transform: translate3d(6%, -4%, 0) scale(1); opacity: 0.5; }
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #atmo-bg::before,
  #atmo-bg::after { animation: none; }
}

/* ── Laptop: short viewports (1366×768-class screens) ──
   Pinned sections size to 100vh, so tall fixed paddings overflow
   or cramp content when the viewport is under ~820px tall. */
/* ── Laptop-width screens: solution cards shouldn't span edge-to-edge ── */
@media (min-width: 861px) and (max-width: 1440px) {
  .solutions-card { width: min(1060px, calc(100% - 180px)); }
  .solutions-card__left { padding: 40px 36px 40px 44px; }

  /* Laptop band: headline/desc/features are tuned for the full-width card; in
     the narrowed laptop card (≈370px left-column content box) they read
     oversized/cramped (esp. #04 SEPA). Scale the shared type down. Affects all
     five cards (shared .solutions-card); off single-column mobile (≤860) and
     off ≥1600. */
  .solutions-card__heading { font-size: clamp(1.4rem, 2.1vw, 1.85rem); margin-bottom: 16px; }
  .solutions-card__desc    { font-size: 0.92rem; line-height: 1.6; margin-bottom: 22px; }
  .solutions-card__features li { font-size: 0.8rem; }
}

@media (min-width: 941px) and (max-height: 820px) {
  /* Short viewports: pull the card height in so it floats, not fills */
  .solutions-card {
    height: min(550px, 76vh);
    top: calc((100vh - min(550px, 76vh)) / 2);
  }

  .hero__inner { padding: 40px 40px 64px; gap: 56px; }
  .hero__title { font-size: clamp(2.3rem, 3.96vw, 3.2rem); margin-bottom: 18px; }
  .hero__sub { margin-bottom: 28px; }
  .hero__meta { margin-top: 24px; }
  #hero-globe-canvas { width: min(600px, 100%, 58vh); }

  /* Industries pins to 100vh — compress the 4×2 grid so 8 full cards fit
     short viewports (incl. zoomed laptops) instead of clipping mid-text */
  .industries__inner { padding: 84px 40px 28px; }
  .industries__header { margin-bottom: 16px; }
  .industries__heading { font-size: clamp(1.5rem, 2.42vw, 2rem); margin-top: 10px; }
  .industries__track { gap: 12px; }
  .industries__card { padding: 14px 16px 12px; }
  .industries__card-icon { width: 30px; height: 30px; margin-bottom: 8px; }
  .industries__card-num { font-size: 3.6rem; top: 10px; right: 14px; }
  .industries__card-name { font-size: clamp(0.95rem, 1.26vw, 1.15rem); }
  .industries__card-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .industries__card-body { padding-bottom: 6px; }
  .industries__card-tags { display: none; }
  .industries__card-footer { padding-top: 8px; }
  .industries__card-cta { font-size: 0.65rem; padding: 4px 10px; }

  .signature-text { padding: 64px 60px 64px 48px; }
  .signature-stats { margin-top: 36px; gap: 24px 32px; }
}

/* ── Laptop band (941–1599): keep signature copy clear of the centred phone box ──
   .signature-text is a fixed-max-width overlay pinned to the box's LEFT edge
   (inset:0 auto 0 0). The 16:9 box is height-bound, so on laptops it shrinks
   while the 560px column does not — the column's share grows from ~33% to ~66%
   and the copy/stat grid slide under the centred render. Narrowing max-width
   pulls the column's right edge left (app reads to its right); type scales down
   per client. Upper bound 1599 covers 15" laptops at 1536 too; ≥1600 (the
   "large monitor" band the client is happy with) is untouched. Placed after all
   other signature media rules so it wins. */
@media (min-width: 941px) and (max-width: 1599px) {
  .signature-text {
    max-width: 460px;
    padding: 64px 28px 64px clamp(36px, 4.5vw, 60px);
  }
  .signature__heading { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
  .sig-states { min-height: 108px; }
  .sig-state { font-size: 1.05rem; line-height: 1.6; }
  .signature-stats { margin-top: 32px; gap: 22px 28px; }
  .signature-stats .stat-num { font-size: clamp(1.9rem, 2.5vw, 2.3rem); }
  .signature-stats .stat-label { font-size: 0.78rem; }
}

/* ── Laptop @125% zoom (short + narrow, ~1093×614): tighten further ──
   Worst case: box ≈ 850px wide, so 460px still crosses centre. Pull the column
   to ~380px (~44% of the box) and shrink type/stat sizes so copy stays in the
   left ~45% and fits the ~614px height. Later than the width block above and the
   max-height:700 block so it wins where all match. */
@media (min-width: 941px) and (max-height: 700px) {
  .signature-text {
    max-width: 380px;
    padding: 48px 24px 48px clamp(28px, 3.5vw, 44px);
  }
  .signature__heading { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
  .sig-states { min-height: 88px; }
  .sig-state { font-size: 0.98rem; line-height: 1.55; }
  .signature-stats { margin-top: 22px; gap: 16px 24px; }
  .signature-stats .stat-num { font-size: clamp(1.6rem, 2.1vw, 1.95rem); }
  .signature-stats .stat-label { font-size: 0.74rem; }
}


/* ═══════════════════════════════════════════════════════════════
   INNER PAGE BLOCK KIT
   page-hero · feature-grid · split-feature · steps · faq · prose ·
   contact-panel · post-grid — responsive throughout.
   ═══════════════════════════════════════════════════════════════ */

/* ── PAGE HERO ── */
.page-hero {
  position: relative;
  /* Streamlined but with breathing room (Benn 2026-08-04): shorter than the
     original full-height hero, yet tall enough to flex across different page
     environments (varying copy length, imagery, meta rows). Top clears the header. */
  padding: clamp(128px, 15vh, 168px) 40px clamp(60px, 8vh, 92px);
  overflow: hidden;
}
.page-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 50% -10%, rgba(12, 12, 142, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 82% 15%, rgba(39, 209, 255, 0.10) 0%, transparent 100%),
    radial-gradient(ellipse 34% 38% at 12% 70%, rgba(206, 17, 223, 0.12) 0%, transparent 100%);
}
.page-hero__inner { position: relative; }
.page-hero--center .page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 940px;
}
.page-hero--left .page-hero__inner { max-width: var(--max-w); }
.page-hero--left .page-hero__title,
.page-hero--left .page-hero__sub { max-width: 820px; }
.page-hero__title {
  /* Trimmed down from 3.4rem cap — the hero heading was reading too blown-up
     (compounded by the +18% root scale at >=1600). Streamlined (Benn 2026-08-04). */
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  margin: 16px 0 18px;
  letter-spacing: -0.01em;
}
.page-hero__title em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero__sub {
  font-size: clamp(1rem, 1.32vw, 1.15rem);
  color: var(--body-text);
  max-width: 720px;
  margin-bottom: 34px;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.page-hero--center .page-hero__actions { justify-content: center; }
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 38px;
}
.page-hero--center .page-hero__meta { justify-content: center; }
.page-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}
.page-hero__meta-item svg { width: 14px; height: 14px; color: var(--cyan-light); flex-shrink: 0; }

/* ── PAGE HERO · VISUAL: SIDE (framed photo panel beside the copy) ── */
.page-hero--visual-side .page-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
  max-width: var(--max-w);
  text-align: left;
}
.page-hero--visual-side .page-hero__copy { min-width: 0; }
.page-hero--visual-side .page-hero__actions,
.page-hero--visual-side .page-hero__meta { justify-content: flex-start; }
.page-hero__visual { position: relative; }
.page-hero__panel {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* SWEEP 2026-08-06: rim removed — inset highlight + deep shadow already here. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.page-hero__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── PAGE HERO · VISUAL: BACKDROP (full-bleed photo behind the copy) ──
   Section already has position:relative + overflow:hidden from the base rule
   above, so the absolutely-positioned backdrop and its mask stay clipped to it.
   The <img> itself carries a bottom mask-fade (edge-feather) so the photo melts
   into the navy page background instead of ending on a hard line; the scrim on
   top of it is a separate top-down navy wash purely for text contrast. */
.page-hero__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero__backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.page-hero__backdrop-scrim {
  position: absolute;
  inset: 0;
  /* Left-aligned copy over a full-bleed photo: the scrim is primarily a
     LEFT->RIGHT navy fade — dense on the left where the title/sub/meta live so
     contrast holds over anything in the photo, easing to a light tint on the
     right so the people stay clearly visible. A gentler vertical layer adds
     header legibility at the top and blends into the navy page at the bottom
     (where the image's own mask-fade already eases the photo out). */
  background:
    linear-gradient(90deg,
      rgba(2, 2, 53, 0.97) 0%,
      rgba(2, 2, 53, 0.9) 27%,
      rgba(2, 2, 53, 0.62) 50%,
      rgba(2, 2, 53, 0.33) 72%,
      rgba(2, 2, 53, 0.2) 100%),
    linear-gradient(180deg,
      rgba(2, 2, 53, 0.5) 0%,
      rgba(2, 2, 53, 0) 24%,
      rgba(2, 2, 53, 0) 66%,
      rgba(2, 2, 53, 0.5) 100%);
}
/* backdrop: keep the copy in the dense left zone, clear of the people */
.page-hero--visual-backdrop .page-hero__title,
.page-hero--visual-backdrop .page-hero__sub { max-width: 680px; }

/* ── FEATURE GRID ── */
.feature-grid { padding: var(--section-pad); }
.feature-grid--light {
  background: var(--surface-light);
  color: var(--ink-on-light);
}
.feature-grid__header {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.feature-grid__header .eyebrow { justify-content: center; }
.feature-grid__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.feature-grid__sub {
  margin-top: 14px;
  font-size: 0.98rem;
  color: var(--body-text);
}
.feature-grid--light .feature-grid__sub { color: var(--ink-muted-light); }
.feature-grid__grid { display: grid; gap: 20px; }
.feature-grid__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
.feature-grid__grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid__grid--4 { grid-template-columns: repeat(4, 1fr); }
.feature-grid__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  padding: 30px 28px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* SWEEP 2026-08-06 (Benn: remove solid rims sitewide): border-free recipe —
     hairline inset top highlight + soft ambient shadow define the card. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(2, 2, 53, 0.22);
}
.feature-grid--light .feature-grid__card {
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(2, 2, 53, 0.05);
}
.feature-grid__card--link { cursor: pointer; }
/* hover: magenta rim swapped for a magenta glow ring (approved 2026-08-06) */
.feature-grid__card--link:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(2, 2, 53, 0.5), 0 0 28px rgba(255, 44, 235, 0.22);
}
.feature-grid--light .feature-grid__card--link:hover {
  box-shadow: 0 14px 34px rgba(2, 2, 53, 0.12);
}
.feature-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-card);
  background: rgba(39, 209, 255, 0.08);
  border: 1px solid rgba(39, 209, 255, 0.25);
  color: var(--cyan-light);
  margin-bottom: 20px;
}
.feature-grid--light .feature-grid__icon {
  background: rgba(0, 161, 233, 0.08);
  border-color: rgba(0, 161, 233, 0.3);
  color: var(--cyan);
}
.feature-grid__icon svg { width: 22px; height: 22px; }
.feature-grid__card-title {
  font-size: 1.12rem;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.feature-grid__card-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--body-text);
  flex-grow: 1;
}
.feature-grid--light .feature-grid__card-text { color: var(--ink-muted-light); }
.feature-grid__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
  /* Keep label + arrow on one line at every width — the rail cards get narrow
     (clamp 270px) and a longer link_label would otherwise wrap/split the arrow
     (Benn 2026-08-28, feature-grid rail as used on guides). */
  white-space: nowrap;
}
.feature-grid__card-cta svg { flex: 0 0 auto; width: 14px; height: 14px; transition: transform 0.25s ease; }
.feature-grid__card--link:hover .feature-grid__card-cta svg { transform: translateX(4px); }
.feature-grid__card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

/* ─── FEATURE GRID · LIGHT "NAVY BLOCKS" (Benn, 2026-08-04) ───
   Reverted from bright gradient tints (they fought the rest of the page's
   navy assets) to NAVY cards sitting on the off-white section: a subtle depth
   gradient + soft shadow at rest, LIGHT text inside, and the bright Lottie icon
   popping on the navy. On HOVER they take the SAME animated gradient outline as
   the header menu items — the conic "snake" border spinning on --border-angle
   (see the ::before rule further down + the shared @keyframes border-spin).
   --gbox is the marker class; render.php still stamps --fg-i/--fg-n (a dynamic
   per-card hook, currently unused by the navy treatment). */
.feature-grid--light .feature-grid__card--gbox {
  background: radial-gradient(125% 135% at 50% -12%, #0b0b5c 0%, #050540 46%, #020235 100%);
  border: 0;
  /* PROTO 2026-08-06 (border-free sweep): resting 1px rim removed (Benn). The
     canon hover treatment is the conic gradient outline (::before, untouched);
     at rest the navy block now reads on the off-white section via a hairline
     inset top highlight + the existing ambient shadow instead of a cheap rim. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 34px rgba(2, 2, 53, 0.16), 0 2px 8px rgba(2, 2, 53, 0.10);
  color: var(--body-text);
}
.feature-grid--light .feature-grid__card--gbox .feature-grid__card-title { color: var(--white); }
.feature-grid--light .feature-grid__card--gbox .feature-grid__card-text  { color: var(--ink-muted-dark); }
.feature-grid--light .feature-grid__card--gbox .feature-grid__card-cta   { color: var(--magenta); }
/* non-lottie icon: cyan glyph on the navy (lottie cards override below) */
.feature-grid--light .feature-grid__card--gbox .feature-grid__icon {
  background: rgba(39, 209, 255, 0.08);
  border-color: rgba(39, 209, 255, 0.25);
  color: var(--cyan-light);
}
/* Animated Lottie icon — LARGER + prominent, NO box housing (Benn 2026-08-04):
   drop the chip bg/border/fixed 46px for the lottie variant and let the player
   svg fill a big square. The inline SVG fallback (reduced-motion / no-JS)
   inherits the same size so it stays prominent too. */
.feature-grid--light .feature-grid__card--gbox .feature-grid__icon--lottie,
.feature-grid__icon--lottie {
  width: 84px;
  height: 84px;
  background: none;
  border: 0;
  border-radius: 0;
  margin-bottom: 14px;
}
.feature-grid__icon--lottie svg { width: 100% !important; height: 100% !important; }

/* ── FEATURE GRID · BENTO VARIANT ── */
.feature-grid__grid--bento {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}
.feature-grid__grid--bento .feature-grid__card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  padding: 40px 38px;
  overflow: hidden;
  /* Client revision (2026-08-10): copy anchors bottom-left of the card
     rather than top-left. Card height is UNCHANGED (a follow-up correction
     dropped the earlier height-reduction ask) - .feature-grid__card-body is
     this flex column's only in-flow child (the globe/image layer is
     position:absolute, out of flow), so flex-end on the cross axis is
     enough to push it to the bottom; it was already left-aligned by
     default. */
  justify-content: flex-end;
}
.feature-grid__grid--bento .feature-grid__card:first-child .feature-grid__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
}
.feature-grid__grid--bento .feature-grid__card:first-child .feature-grid__icon svg { width: 26px; height: 26px; }
/* ...but an ANIMATED (lottie) icon on the bento feature card keeps its full
   housing-free 84px. The 56px sizing above is tuned for the boxed inline-SVG
   glyph; forcing a housing-free animation down to 56px was rendering it tiny
   and illegible (Benn 2026-08-05: the fraud lock on trust-and-compliance). */
.feature-grid__grid--bento .feature-grid__card:first-child .feature-grid__icon--lottie {
  width: 84px;
  height: 84px;
}
.feature-grid__grid--bento .feature-grid__card:first-child .feature-grid__card-title {
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
}
.feature-grid__grid--bento .feature-grid__card:first-child .feature-grid__card-text {
  font-size: 1rem;
  max-width: 48ch;
  flex-grow: 0;
}
.feature-grid__grid--bento .feature-grid__card:first-child .feature-grid__card-body { flex-grow: 0; }
/* Bento feature card image: sits at the TOP of the card, bleeding to the top/
   side edges, and FADES DOWNWARD into the card surface with the content below
   (Benn 2026-08-04: image top then fade — never content-then-image). */
.feature-grid__feature-img {
  display: block;
  position: relative;
  order: -1; /* image before the card body regardless of source order */
  flex-grow: 1;
  min-height: 190px;
  margin: -40px -38px 24px;
}
.feature-grid__feature-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fade the image's lower edge into the card so content sits on clean navy */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* Bento feature card: Wave 4a arc globe. COMPOSITION REVISION (client sketch,
   2026-08-10): corner-cropped, not contained-and-centred. The wrap is pulled
   out of the flex flow and bleeds to the CARD's full outer edge (all four
   sides, not just the old top image band) so the oversized sphere can be
   clipped by the card's own top+right edges — the card's existing
   overflow:hidden + radius (`.feature-grid__grid--bento
   .feature-grid__card:first-child`) does the actual cropping, this layer just
   supplies the oversized, offset composition. Canvas + poster share the exact
   size/position (percentages of this wrap, which now equals the card box) so
   the crossfade between them never pops. Poster is the pre-boot placeholder
   and the mobile/no-WebGL/context-lost/reduced-motion fallback - visible by
   default, crossfaded out once js/feature-grid-globe.js marks the wrapper
   .is-ready. Card copy (title/text/CTA) is re-stacked above this layer via
   z-index below. */
.feature-grid__feature-img--globe {
  position: absolute;
  /* NOTE: unlike the old flex-flow image band (which needed negative margins
     to cancel the card's own 40px/38px padding), an absolutely positioned
     child's inset is measured against the ancestor's PADDING BOX already -
     inset:0 alone fills the card's full outer box, padding included. */
  inset: 0;
  margin: 0;
  min-height: 0;
  flex-grow: 0;
  order: 0;
  overflow: hidden; /* self-contained even if the card's own clip is ever loosened */
  z-index: 0;
  background:
    radial-gradient(60% 60% at 62% 30%, rgba(39, 209, 255, 0.16) 0%, transparent 70%),
    radial-gradient(50% 50% at 75% 50%, rgba(206, 17, 223, 0.12) 0%, transparent 70%);
}
/* Card copy needs to sit above the full-card globe layer now that it's no
   longer confined to a top band. */
.feature-grid__grid--bento .feature-grid__card:first-child > .feature-grid__card-body {
  position: relative;
  z-index: 1;
}
/* Readability scrim (brief: "only if genuinely needed" - it is: the copy
   sits over live animated arcs, and some destinations' grow-phase sweeps
   close enough to graze the text). REVISION (2026-08-10): copy moved from
   top-left to BOTTOM-left (see .feature-grid__grid--bento
   .feature-grid__card:first-child above), so the darkening is now anchored
   to the bottom-left corner (radial, not the old full-height 90deg
   left-to-right fade) - protects just the copy's actual footprint and
   leaves the top-left of the globe/arc disc uncovered. Sits above
   canvas/poster (later in source order, no z-index needed) and below
   nothing - copy remains a plain sibling that's already stacked above via
   z-index. */
.feature-grid__feature-img--globe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(85% 75% at 0% 100%, rgba(2, 2, 53, 0.9) 0%, rgba(2, 2, 53, 0.78) 32%, rgba(2, 2, 53, 0.4) 52%, transparent 72%);
  pointer-events: none;
}
.feature-grid__feature-img--globe canvas {
  position: absolute;
  left: auto;
  bottom: auto;
  /* Oversized box (~1.5x the card's own width, ~1.3x its height, once the
     wrap fills the card) anchored off the top-right so the sphere's centre
     sits near that corner - client sketch: visible disc ~= card height,
     entering the top edge ~40% across and exiting the right edge around the
     bottom third. Tuned by screenshot (2026-08-10), not pure geometry - see
     globe-arcs.js for the matching camera re-aim. */
  width: 150%;
  height: 130%;
  top: -27%;
  right: -52%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.feature-grid__feature-img--globe.is-ready canvas { opacity: 1; }
/* Poster is a pre-baked screenshot of the SAME corner-crop composition above,
   captured already cropped to the card's exact box - unlike the live canvas
   it doesn't need the oversized/offset geometry, a plain full-bleed cover
   reproduces the identical crop (and this is what mobile/no-WebGL/
   context-lost visitors see permanently, so it needs to hold up at any card
   aspect ratio on its own, not just mirror the desktop canvas box). */
.feature-grid__feature-img--globe .finxp-globe-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.feature-grid__feature-img--globe.is-ready .finxp-globe-poster { opacity: 0; }

/* fill trailing holes left by the 2×2 feature card in a 3-col flow */
.feature-grid__grid--bento .feature-grid__card:last-child:nth-child(3n + 2):not(:first-child) { grid-column: span 2; }
.feature-grid__grid--bento .feature-grid__card:last-child:nth-child(3n + 1):not(:first-child) { grid-column: span 3; }

/* ── FEATURE GRID · NUMBERED VARIANT ── */
.feature-grid__rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 72px;
  border-top: 1px solid var(--line-dark);
}
.feature-grid--light .feature-grid__rows { border-color: var(--line-light); }
.feature-grid__row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 22px;
  align-items: start;
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--line-dark);
  transition: border-color 0.25s ease;
}
.feature-grid--light .feature-grid__row { border-color: var(--line-light); }
.feature-grid__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.7rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: var(--grad-xp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
}
.feature-grid__row .feature-grid__card-title { font-size: 1.15rem; margin-bottom: 8px; }
.feature-grid__row .feature-grid__card-text { flex-grow: 0; }
.feature-grid__row--link:hover { border-bottom-color: rgba(255, 44, 235, 0.5); }
.feature-grid__row--link:hover .feature-grid__card-title { color: var(--cyan-light); }
.feature-grid--light .feature-grid__row--link:hover .feature-grid__card-title { color: var(--cyan); }
/* Rows are list entries, not cards. render.php stamps them with the shared
   feature-grid__card--link class for link semantics, which drags in the card
   hover box-chrome (lift + shadow). Rows must NOT read as boxes: strip the
   lift/shadow and keep only the lightweight underline + title colour shift
   above (Benn 2026-08-05: rows like digital-assets-web3 don't need the border
   shadow on hover). Source order + matching specificity override the card rule. */
.feature-grid__row--link:hover { transform: none; box-shadow: none; }
.feature-grid--light .feature-grid__row--link:hover { box-shadow: none; }

/* ── FEATURE GRID · IMAGE-BACKED VARIANT ── */
.feature-grid__grid--photo .feature-grid__card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 3.5;
  min-height: 340px;
  padding: 26px 24px;
  justify-content: flex-end;
}
.feature-grid__photo {
  position: absolute;
  inset: 0;
  /* GPU-clip fix (Benn 2026-08-07, industries grid): while the img's scale
     transition runs composited, the card's radius+overflow clip rasterizes
     square and the photo corners flash outside the radius. clip-path clips
     in the compositor, so the rounding holds during the animation — same
     remedy as the retired stack layers. Radius mirrors the card's. */
  clip-path: inset(0 round var(--radius-lg));
}
.feature-grid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s ease;
}
.feature-grid__card--link:hover .feature-grid__photo img { transform: scale(1.08); }
.feature-grid__photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 2, 53, 0.3) 0%, rgba(2, 2, 53, 0.58) 42%, rgba(2, 2, 53, 0.94) 80%);
}
.feature-grid__grid--photo .feature-grid__card-body {
  position: relative;
  flex-grow: 0;
  margin-top: auto;
}
.feature-grid__grid--photo .feature-grid__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  background: rgba(2, 2, 53, 0.45);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.feature-grid--light .feature-grid__grid--photo .feature-grid__card-title,
.feature-grid__grid--photo .feature-grid__card-title { color: #ffffff; }
.feature-grid--light .feature-grid__grid--photo .feature-grid__card-text,
.feature-grid__grid--photo .feature-grid__card-text { color: rgba(255, 255, 255, 0.82); }

/* ── INDUSTRIES HUB HOVER-REVEAL (item 9, 2026-08-10) — client: "should
   just be industry titles, on hover the feature-grid__card-text gets
   revealed". Scoped to .feature-grid--v-image, the section-level variant
   class the industries hub's grid renders (currently the only spec using
   `variant: image` — if a future page reuses the image variant it will
   inherit this too; give it a dedicated modifier then instead of widening
   this selector). The card's aspect-ratio is fixed (3/3.5, set above) and
   was already sized to fit this copy at rest, so revealing it never
   changes the card's box height — no layout jump, just a fade/grow of the
   text itself. Keyboard focus (the whole card is the <a>) and touch both
   get the content unconditionally, per accessibility requirement. */
.feature-grid--v-image .feature-grid__card-text {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.35s ease;
}
.feature-grid--v-image .feature-grid__card:hover .feature-grid__card-text,
.feature-grid--v-image .feature-grid__card:focus .feature-grid__card-text,
.feature-grid--v-image .feature-grid__card:focus-within .feature-grid__card-text {
  opacity: 1;
  max-height: 220px;
}
/* Touch/no-hover devices never get a hover state to reveal with — show the
   copy unconditionally rather than trapping it behind an unreachable
   interaction. */
@media (hover: none) {
  .feature-grid--v-image .feature-grid__card-text {
    opacity: 1;
    max-height: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feature-grid--v-image .feature-grid__card-text { transition: none; }
}

/* ── FEATURE GRID · HORIZONTAL RAIL VARIANT ── */
.feature-grid--v-rail .feature-grid__header {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  text-align: left;
  margin-bottom: 44px;
}
.feature-grid--v-rail .feature-grid__header .eyebrow { justify-content: flex-start; }
.feature-grid--v-rail .feature-grid__header-copy { max-width: 720px; }
.feature-grid__rail-nav { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 6px; }
/* Rail nav buttons use the sitewide shared carousel-nav language
   (rule lives with .testimonial__nav-btn) — only theme/disabled
   adjustments belong here. */
.feature-grid--light .feature-grid__rail-btn { border-color: var(--line-light); color: var(--ink-on-light); }
.feature-grid--light .feature-grid__rail-btn:hover:not(:disabled) { color: #fff; }
.feature-grid__rail-btn:disabled { opacity: 0.3; cursor: default; }
.feature-grid__rail-btn:disabled:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.15); box-shadow: none; transform: none; }
.feature-grid__rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 64px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  /* FIX 2026-08-10 v2 (client: crop is on the TOP of the cards AND the
     BOTTOM of the hover shadows; "consistent issue with carousels"). Root
     cause: overflow-x:auto forces overflow-y to a clipping value (CSS
     Overflow spec, a UA can't mix visible with a scrolling value per axis),
     so this scroller vertically clips anything the cards paint outside their
     box. The gbox hover lifts translateY(-3px) and casts a 0 24px 54px
     shadow that reaches roughly 78px BELOW the card and roughly 30px above
     it; the earlier top-only pad never gave the bottom shadow any room. Fix:
     pad both edges and cancel each pad with an equal negative margin, so the
     rail's LAYOUT box is unchanged (nothing shifts) while its clip box grows.
     The lift and shadow now paint into that padding, which sits inside the
     section's own 96px vertical whitespace, so nothing collides with
     neighbours. Audited the other rails: case-study scroller, solutions and
     audience clip their hover INSIDE the card by design (scale within an
     overflow:hidden frame), cast no escaping shadow, so they are left as-is.

     FIX 2026-08-10 v3 (Benn: rail also hard-cuts the shadow on the LEFT of
     the first card and the RIGHT of the last card — same clip-box cause,
     just the horizontal axis). Mirror the vertical fix: add horizontal
     padding cancelled by an equal negative margin so the layout box is
     unchanged but the clip box gains ~48px of paint room each side (fits
     inside the ~80px section gutter at 1440). The mask-image opaque stops
     (56px) are already wider than the gbox shadow's own x-reach (0-offset
     shadow, ~54px), and the rail rests at .is-start (left fully opaque), so
     the first/last card's side shadow paints into this new gutter room
     without needing the mask stops shifted.

     GOTCHA found in-browser: padding-left alone silently breaks the rest
     position. With scroll-snap-type:x mandatory + scroll-snap-align:start
     (on .feature-grid__card), the snapport is measured from the padding
     edge, so the browser snaps PAST the new left padding on load/settle
     (verified: resting scrollLeft became 48 instead of 0, and the first
     card visibly shifted 48px left of the header copy — scrollLeft=0 was
     provably unreachable while snapping was active). That also defeats the
     JS `atStart = scrollLeft <= 1` check (main.js), so `.is-start` never
     applied. `scroll-padding-inline` insets the snapport by the same 48px,
     which restores scrollLeft:0 at rest and first-card alignment.

     FIX 2026-08-10 v4 (Benn: "the mask is not the issue, the container is").
     Correct. At the scroll extremes the .is-start/.is-end variants make the
     resting edge's mask fully opaque, so for the first/last cards (the ones
     actually hovered) the mask never touches the shadow — the container's
     scroll clip does. And horizontal padding ON THE SCROLL CONTAINER does NOT
     fix it: a scroll container drops its padding-inline-end from the scroll
     range and mandatory snap jams the last card against the box edge, so the
     trailing shadow stayed clipped no matter how large the pad (measured: 1px
     of room at scroll-end with 64px pad). The room must live on the CONTENT
     instead: `.feature-grid__rail-track` carries `padding-inline` (real
     scrollable content, kept at both ends), while the rail keeps only the
     vertical pad and the horizontal negative margin that bleeds the clip box
     into the section gutter so the shadow has somewhere to paint.
     scroll-padding-inline keeps the snap rest aligned to the first card. */
  padding: 40px 0 88px;
  margin: -40px -64px -88px;
}
.feature-grid__rail::-webkit-scrollbar { display: none; }
.feature-grid__rail.is-start {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
}
.feature-grid__rail.is-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 100%);
}
.feature-grid__rail.is-start.is-end { -webkit-mask-image: none; mask-image: none; }
.feature-grid__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.feature-grid__rail.is-drag .feature-grid__card { pointer-events: none; }
/* Horizontal shadow room for the gbox hover (Benn 2026-08-10). The LEADING
   edge is handled by the track's padding-inline-start (honoured). The TRAILING
   edge needs a real spacer CHILD, not padding: a flex scroll container drops
   its trailing padding-inline-end/margin from the scroll range, so container-
   or track-padding left the last card butted against the box edge (measured
   1px of room). An empty `::after` flex item IS counted in scroll overflow, so
   the real last card gets a 64px sibling (44px + the 20px flex gap) to sit
   against, and its shadow paints into that room instead of being clipped. */
.feature-grid__rail-track { display: flex; gap: 20px; padding-inline-start: 64px; }
.feature-grid__rail-track::after { content: ''; flex: 0 0 44px; align-self: stretch; }
.feature-grid--v-rail .feature-grid__card {
  flex: 0 0 clamp(270px, 26vw, 360px);
  scroll-snap-align: start;
}

/* ── SPLIT FEATURE ── */
.split-feature { padding: var(--section-pad); }
.split-feature--light {
  background: var(--surface-light);
  color: var(--ink-on-light);
}
.split-feature__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.split-feature--reverse .split-feature__copy { order: 2; }
.split-feature--reverse .split-feature__visual { order: 1; }
.split-feature--no-visual .split-feature__inner {
  grid-template-columns: 1fr;
  max-width: 860px;
}
.split-feature__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin: 16px 0 20px;
  letter-spacing: -0.01em;
}
.split-feature__body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--body-text);
  margin-bottom: 16px;
}
.split-feature--light .split-feature__body { color: var(--ink-muted-light); }
.split-feature__list {
  list-style: none;
  margin: 26px 0 0;
  display: grid;
  gap: 13px;
}
.split-feature__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--body-text);
}
.split-feature--light .split-feature__list li { color: var(--ink-muted-light); }
.split-feature__list svg {
  width: 17px;
  height: 17px;
  color: var(--cyan-light);
  flex-shrink: 0;
  margin-top: 4px;
}
.split-feature--light .split-feature__list svg { color: var(--cyan); }
.split-feature__actions { margin-top: 32px; }
.split-feature__visual { position: relative; }
.split-feature__panel {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* PROTO 2026-08-06 (border-free sweep): the 1px --line-dark rim read cheap and
     its arc mis-registered against the clipped image at subpixel offsets. Depth
     now comes from a hairline inset TOP highlight (a light catch on the top edge,
     not a full outline) + a soft ambient shadow. overflow:hidden keeps the image
     clipped; the outer shadow is unaffected (only clip-path would clip a shadow). */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(2, 2, 53, 0.30);
}
.split-feature--light .split-feature__panel {
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 30px rgba(2, 2, 53, 0.08);
}
.split-feature__panel-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 75% 20%, rgba(39, 209, 255, 0.13) 0%, transparent 100%),
    radial-gradient(ellipse 55% 55% at 20% 85%, rgba(206, 17, 223, 0.16) 0%, transparent 100%);
  pointer-events: none;
}
/* Stat panel imagery (canon rule 5): photo fills the box behind a heavy navy
   scrim so the gradient stat number stays the subject; the brand glow sits on
   top of the scrim to keep the panel's signature colour wash. */
.split-feature__panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-feature__panel-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 55%, rgba(2, 2, 53, 0.82) 0%, rgba(2, 2, 53, 0.9) 100%);
}
.split-feature__stat {
  position: relative;
  text-align: center;
  padding: 32px;
}
.split-feature__stat-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 5.5vw, 4.4rem);
  line-height: 1;
  background: var(--grad-xp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.split-feature__stat-label {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--subtle);
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.split-feature--light .split-feature__stat-label { color: var(--ink-muted-light); }
/* 2026-08-10 (Benn): imaged stat panels are ALWAYS dark (photo under a heavy
   navy scrim), so the light-theme ink override above must not reach inside
   them — it painted the label near-black on the dark image (open-account). */
.split-feature--light .split-feature__panel--imaged .split-feature__stat-label { color: var(--subtle); }
.split-feature__imgwrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* SWEEP 2026-08-06: rim removed — the image defines the box; soft ambient
     shadow keeps it lifted (both themes). */
  box-shadow: 0 18px 42px rgba(2, 2, 53, 0.30);
}
.split-feature--light .split-feature__imgwrap { box-shadow: 0 10px 30px rgba(2, 2, 53, 0.10); }
.split-feature__imgwrap img { width: 100%; height: 100%; object-fit: cover; }
/* Height governor (Benn 2026-08-07): with visual splits now full-band, a
   portrait source (Stefan, trust-and-compliance) rendered ~270px taller
   than its copy column. Cap the image box itself (a max-height on the
   wrap alone doesn't resolve the img's percentage height) and bias the
   cover-crop upward so faces survive; landscape sources sit well under
   the cap and are unaffected. */
.split-feature__imgwrap img {
  max-height: 640px;
  /* 45%: sits the subject higher in the cropped frame (Benn 2026-08-07). */
  object-position: center 45%;
}
/* Optional muted caption under a visual:image photo (Benn 2026-08-06 — Stefan
   Haenel on trust-and-compliance). Same quiet language as the payment-flow
   footnote: small, subtle, centered under the figure. */
.split-feature__caption {
  margin: 14px auto 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--subtle);
}
.split-feature--light .split-feature__caption { color: var(--ink-muted-light); }

/* ── SPLIT FEATURE · EDITORIAL DUO ──────────────────────────────────────
   Replaces the rotated 3-photo fan (client decision, 2026-08-07 — see
   DESIGN-CHOICES.md). One large anchor image + ONE offset stat chip
   overlapping its corner. Two layers only, no rotation. Border-free box
   language throughout: hairline inset top highlight + ambient shadow.
   FULL WIDTH (Benn, 2026-08-07): no max-width cap — the duo fills its
   visual column edge-to-edge (the prototype's 560px review cap left the
   column feeling empty against the 1680 band and read unbalanced). */
.split-feature__duo {
  position: relative;
  width: 100%;
  padding: 0 40px 46px 0;
}
.split-feature--reverse .split-feature__duo {
  padding: 0 0 46px 40px;
}
.split-feature__duo-anchor {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* No ambient drop shadow (client direction 2026-08-07) — the inset rim
     alone carries the edge; the photo sits flat on the navy band. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.split-feature__duo-anchor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-feature__duo-chip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(220px, 58%);
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #07076D 0%, #020235 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(2, 2, 53, 0.5);
}
.split-feature--reverse .split-feature__duo-chip { right: auto; left: 0; }
.split-feature__duo-chip-number {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  background: var(--grad-xp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.split-feature__duo-chip-label {
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--subtle);
  line-height: 1.4;
}
.split-feature--light .split-feature__duo-chip-label { color: rgba(255, 255, 255, 0.65); }
/* Fallback when a stack instance has no stat data: a plain caption chip
   (no gradient number) instead of the number+label pairing. */
.split-feature__duo-chip--caption { padding: 14px 20px; }
.split-feature__duo-chip--caption .split-feature__duo-chip-label {
  margin-top: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 640px) {
  /* Chip drops below the frame instead of hanging off it; duo stays full
     width of the (single) column — no cap (Benn 2026-08-07: wideness). */
  .split-feature__duo { padding: 0; }
  .split-feature__duo-chip {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 14px;
  }
}

/* ── SPLIT FEATURE · FLOW DIAGRAM ── */
.split-feature__panel--diagram { align-items: stretch; }
.split-feature__diagram {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px);
  gap: 18px;
}
.split-feature__diagram-line {
  position: absolute;
  top: clamp(44px, 6vw, 60px);
  bottom: clamp(44px, 6vw, 60px);
  left: calc(clamp(28px, 4vw, 48px) + 7px);
  width: 2px;
  background: linear-gradient(180deg, rgba(39, 209, 255, 0.7) 0%, rgba(206, 17, 223, 0.7) 100%);
  transform: scaleY(0);
  transform-origin: top;
}
.split-feature__node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.split-feature__node-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  border: 2px solid var(--cyan-light);
  background: var(--navy-deep);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.split-feature--light .split-feature__node-dot { background: #ffffff; border-color: var(--cyan); }
.split-feature__node.is-active .split-feature__node-dot {
  background: var(--cyan-light);
  box-shadow: 0 0 0 5px rgba(39, 209, 255, 0.18), 0 0 18px rgba(39, 209, 255, 0.55);
}
.split-feature--light .split-feature__node.is-active .split-feature__node-dot { background: var(--cyan); }
.split-feature__node-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.split-feature__node-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.3s ease;
}
.split-feature--light .split-feature__node-label { color: var(--ink-muted-light); }
.split-feature__node.is-active .split-feature__node-label { color: #ffffff; }
.split-feature--light .split-feature__node.is-active .split-feature__node-label { color: var(--ink-on-light); }
.split-feature__node-detail { font-size: 0.85rem; color: var(--subtle); }
.split-feature--light .split-feature__node-detail { color: var(--ink-muted-light); }

/* ── STEPS ── */
.steps { padding: var(--section-pad); }
.steps__header {
  max-width: 780px;
  margin: 0 auto 64px;
  text-align: center;
}
.steps__header .eyebrow { justify-content: center; }
.steps__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.steps__sub { margin-top: 14px; font-size: 0.98rem; color: var(--body-text); }
.steps__track {
  list-style: none;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 36px;
  position: relative;
  padding-top: 26px;
}
.steps__track::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: linear-gradient(90deg, rgba(39, 209, 255, 0.4) 0%, rgba(206, 17, 223, 0.4) 100%);
}
.steps__item { position: relative; }
.steps__item::before {
  content: '';
  position: absolute;
  top: -26px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy-deep);
  border: 2.5px solid var(--cyan-light);
  box-shadow: 0 0 12px rgba(39, 209, 255, 0.55);
}
.steps__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--magenta);
  margin-bottom: 12px;
}
.steps__item-title {
  font-size: 1.08rem;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.steps__item-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--body-text);
}
.steps__item-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
}
.steps__item-link svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.steps__item-link:hover svg { transform: translateX(4px); }

/* ── FAQ ── */
.faq { padding: var(--section-pad); }
.faq__inner { max-width: 880px; }
.faq__header { margin-bottom: 36px; }
.faq__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.faq__item { border-bottom: 1px solid var(--line-dark); }
.faq__item:first-child { border-top: 1px solid var(--line-dark); }
.faq__q { margin: 0; }
.faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  line-height: 1.35;
  transition: color 0.2s ease;
}
.faq__toggle:hover { color: var(--cyan-light); }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--magenta);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a-inner p {
  padding: 0 40px 24px 4px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--body-text);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__guide-link {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--body-text);
}
.faq__guide-link a {
  color: var(--cyan-light);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(39, 209, 255, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
  /* FIX 2026-08-10 (client: "faq__guide-link should be uppercase with
     letter spacing") — matches the sitewide uppercase-label CTA-link
     token (.feature-grid__card-cta's 0.14em tracking / 0.74rem size), not
     a new value. Explicit font-size here since the parent .faq__guide-link
     p's 0.85rem reads too large once uppercase+tracked (client follow-up). */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
}
.faq__guide-link a:hover { text-decoration-color: var(--cyan-light); }

/* ── PROSE ── */
.prose { padding: var(--section-pad); }
.prose__inner { max-width: 800px; }
.prose__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin: 16px 0 28px;
  letter-spacing: -0.01em;
}
/* Coherent prose heading scale (Benn 2026-08-24): imported blog/CPT content
   mixes h2/h3(/h4), and each was rendering from a different place (h2 = the
   oversized base heading, h3 = 1.28rem) with an inner <strong> pulling in the
   body-strong weight/spacing — so headings read as unrelated systems. Give
   them ONE family + weight treatment, differentiated by size, so the hierarchy
   reads as a single scale. */
.prose__content h2,
.prose__section-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 48px 0 16px;
  letter-spacing: -0.01em;
  color: var(--white);
}
.prose__content h3,
.prose__section-body h3 {
  font-size: 1.28rem;
  font-weight: 800;
  margin: 40px 0 14px;
  letter-spacing: -0.005em;
  color: var(--white);
}
.prose__content h4,
.prose__section-body h4 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 32px 0 12px;
  letter-spacing: 0;
  color: var(--white);
}
.prose__content :is(h2, h3, h4):first-child,
.prose__section-body :is(h2, h3, h4):first-child { margin-top: 0; }
/* Imported headings are wrapped in <strong>; keep the heading's own weight and
   spacing instead of the body-strong treatment, so every heading matches. */
.prose__content :is(h2, h3, h4) strong,
.prose__section-body :is(h2, h3, h4) strong {
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.prose__content p,
.prose__section-body p {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--body-text);
  margin-bottom: 16px;
}
.prose__content p:last-child,
.prose__section-body p:last-child { margin-bottom: 0; }
.prose__content ul,
.prose__content ol,
.prose__section-body ul,
.prose__section-body ol {
  margin: 18px 0 22px 4px;
  display: grid;
  gap: 10px;
  list-style: none;
}
.prose__content ol,
.prose__section-body ol { counter-reset: prose-ol; }
.prose__content ul li,
.prose__content ol li,
.prose__section-body ul li,
.prose__section-body ol li {
  position: relative;
  padding-left: 30px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--body-text);
}
.prose__content ul li::before,
.prose__section-body ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--cyan-light);
  border-bottom: 2.5px solid var(--cyan-light);
  transform: rotate(-45deg) translateY(-2px);
}
.prose__content ol li,
.prose__section-body ol li { counter-increment: prose-ol; }
.prose__content ol li::before,
.prose__section-body ol li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--magenta);
}
.prose__content a,
.prose__section-body a {
  color: var(--cyan-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose__content strong,
.prose__section-body strong { color: var(--white); }
/* Inline content images (imported blog/CPT bodies) — give them consistent
   breathing room and a subtle radius so they read as intentional (Benn
   2026-08-24). */
.prose__content img,
.prose__section-body img,
.blog-post__content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 28px 0;
}

/* Post body (blog + case study) type tweaks — Benn 2026-08-17: medium-weight,
   letter-spaced bold, and 20px breathing room under every heading. Scoped to
   .blog-post__content so page prose blocks / guides are unaffected. */
.blog-post__content strong,
.blog-post__content b {
  font-weight: 500;
  letter-spacing: 1px;
}
.blog-post__content h2,
.blog-post__content h3,
.blog-post__content h4,
.blog-post__content h5,
.blog-post__content h6 {
  padding-bottom: 20px;
}

/* Structured sections (client feedback 2026-08-07): the compact editorial
   flow stays — the client kept it over a spread-out numbered-row take —
   but each h3 topic is an atomic heading+body unit, which is what
   guarantees EQUAL heading rhythm: every section carries one uniform
   margin, and in the ultrawide magazine columns a section cannot split,
   so an h3 can never strand at a column bottom or lose its top margin at
   a column top (the original unevenness). */
.prose__content--lead { margin-bottom: 40px; }
.prose__section { margin: 0 0 40px; }
.prose__section:last-child { margin-bottom: 0; }
.prose__section-heading {
  font-size: 1.28rem;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
.prose__note {
  display: flex;
  gap: 14px;
  margin-top: 44px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.04);
  /* SWEEP 2026-08-06: neutral rim removed; the magenta accent bar (deliberate
     design element) + tinted background carry the callout on their own. */
  border-left: 3px solid var(--magenta);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose__note svg { width: 18px; height: 18px; color: var(--magenta); flex-shrink: 0; margin-top: 2px; }
.prose__note p { font-size: 0.85rem; line-height: 1.65; color: var(--subtle); }

/* ── CONTACT PANEL ── */
.contact-panel { padding: var(--section-pad); }
.contact-panel__header {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}
.contact-panel__header .eyebrow { justify-content: center; }
.contact-panel__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.contact-panel__sub { margin-top: 14px; font-size: 0.98rem; color: var(--body-text); }
.contact-panel__routes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.contact-panel__route {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 18px 16px;
  background: var(--grad-card);
  /* SWEEP 2026-08-06: resting rim softened to transparent (state channel kept —
     hover/selected borders below still fire; transparent keeps layout stable). */
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.contact-panel__route:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.contact-panel__route.is-selected {
  border-color: var(--magenta);
  background: linear-gradient(145deg, rgba(255, 44, 235, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: 0 0 20px rgba(255, 44, 235, 0.15);
}
.contact-panel__route-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.3;
  color: var(--white);
}
.contact-panel__route-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--subtle);
}
.contact-panel__form {
  margin-top: 40px;
  padding: clamp(24px, 4vw, 44px);
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  /* SWEEP 2026-08-06: rim removed → border-free recipe. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 36px rgba(2, 2, 53, 0.26);
}
.contact-panel__form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.contact-panel__field { display: flex; flex-direction: column; gap: 8px; }
.contact-panel__field--full { grid-column: 1 / -1; }

/* Multi-route v2 (2026-08-18) --------------------------------------------- */
/* Dial code sits next to mobile as one combined phone cell (dial compact). */
.contact-panel__field-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.contact-panel__field-row .contact-panel__field { gap: 8px; }
/* Dial is a wider share of the phone row so the country-name options in its
   dropdown (panel = pill width, canon rule 19) fit on one line rather than
   breaking. Compact trigger still shows the concise "+356". */
.contact-panel__field--dial { flex: 0 0 42%; min-width: 128px; }
.contact-panel__field--mobile { flex: 1 1 auto; min-width: 0; }
/* The compact dial dropdown is WIDER than its pill (so every country name fits
   on one line — the standard international phone-picker pattern). Because the
   panel and pill widths differ, the sitewide "merged box" (squared join between
   pill + panel) can't line up, so the compact variant instead uses a clean,
   self-contained pill + a detached, fully-rounded floating menu. */
.finxp-listbox--compact .finxp-listbox__panel,
.finxp-listbox--compact .finxp-listbox__panel--up {
  min-width: 330px;
  right: auto;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--cyan);
  border-radius: 8px;
}
.finxp-listbox--compact .finxp-listbox__panel { top: calc(100% + 6px); bottom: auto; }
.finxp-listbox--compact .finxp-listbox__panel--up { top: auto; bottom: calc(100% + 6px); }
/* Keep the compact trigger a self-contained rounded pill when open (no merge). */
.finxp-listbox--compact .finxp-listbox__trigger.is-open,
.finxp-listbox--compact.finxp-listbox:has(.finxp-listbox__panel--up) .finxp-listbox__trigger.is-open {
  border: 1px solid var(--cyan);
  border-radius: 8px;
}
/* Mobile: the dial pill only shows "+356", so make it smaller and give the
   mobile-number field more room; and keep its (desktop-330px) dropdown inside
   the viewport — the panel is left-anchored at the field's offset, so its
   desktop max-width couldn't prevent the right-edge overflow (Benn 2026-08-24). */
@media (max-width: 600px) {
  .contact-panel__field--dial { flex: 0 0 auto; min-width: 96px; }
  .finxp-listbox--compact .finxp-listbox__panel,
  .finxp-listbox--compact .finxp-listbox__panel--up {
    min-width: 0;
    width: calc(100vw - 96px);
    max-width: calc(100vw - 96px);
  }
}
/* Collapse the phone row when both its fields are hidden (e.g. support set). */
.contact-panel__field-row:not(:has(.contact-panel__field:not([hidden]))) { display: none; }

/* Selection summary bar — chosen routes as chips + Clear all. */
.contact-panel__selection {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 22px;
  padding: 13px 16px;
  background: var(--grad-card);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(2, 2, 53, 0.18);
}
.contact-panel__selection-label {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--white);
}
.contact-panel__selection.is-empty .contact-panel__selection-label { color: var(--white); }
.contact-panel__selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-panel__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: linear-gradient(145deg, rgba(255, 44, 235, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 44, 235, 0.4);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--white);
}
.contact-panel__chip-text { line-height: 1.2; }
.contact-panel__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.contact-panel__chip-remove:hover { background: rgba(255, 44, 235, 0.55); }
.contact-panel__selection-clear {
  margin-left: auto;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  color: var(--subtle);
  font-family: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.contact-panel__selection-clear:hover { border-color: var(--magenta); color: var(--white); }
.contact-panel__selection-clear[hidden] { display: none; }

/* D48 dynamic field-sets (2026-08-17): fields outside the active route's group
   are REMOVED from the grid, not just dimmed. Needed because the display:flex
   above outranks the UA [hidden]{display:none}, so js/main.js's wrap.hidden
   toggle wasn't hiding anything. This rule (specificity 0,2,0) wins. */
.contact-panel__field[hidden] { display: none; }

/* Route switch = brief loading ring, then fade. js/main.js adds .is-switching
   to the form while it swaps the field-set: the grid fades out + goes inert, a
   cyan ring (shared finxp-blog-spin) rides on top, then the class is removed and
   the new field-set fades back in. Reduced-motion skips the whole thing (JS
   swaps instantly, class never added). */
.contact-panel__form { position: relative; }
.contact-panel__form-grid { transition: opacity 0.22s ease; }
.contact-panel__form.is-switching .contact-panel__form-grid {
  opacity: 0;
  pointer-events: none;
}
.contact-panel__form.is-switching::after {
  content: "";
  position: absolute;
  top: 130px;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--cyan-light, #27D1FF);
  animation: finxp-blog-spin 0.7s linear infinite;
  z-index: 3;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .contact-panel__form-grid { transition: none; }
}
.contact-panel__field span,
.contact-panel__field > label {
  /* The 2026-08-10 custom-listbox fields (rule 19) use a <div class="contact-panel__field">
     wrapping an explicit <label for="..."> instead of the plain-input fields'
     <label class="contact-panel__field"><span>...</span> wrap — same caption look either way. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.contact-panel__field input,
.contact-panel__field textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}
.contact-panel__field input:focus,
.contact-panel__field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.18);
}
/* Extend the field-input treatment to <select> (cancellation-form is the first
   block to use a native select). Form-field borders are functional — kept per
   the 2026-08-06 sweep rulings.
   2026-08-07: stripped native appearance (OS chevron + light dropdown were
   the last "unstyled" tell) and drew a custom thin-stroke chevron matching
   the sitewide carousel-nav chevron language (see .testimonial__nav-btn::after
   — 2px stroke, currentColor-equivalent). Vertical padding is unchanged from
   the input rule above so select height still matches text inputs exactly;
   only right padding grew to clear the chevron. */
.contact-panel__field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23FFFFFF' stroke-opacity='0.45' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 13px 44px 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
  width: 100%;
  color-scheme: dark; /* renders the native OPTION popup dark, not blinding white */
}
.contact-panel__field select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2300A1E9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Fallback for engines that ignore color-scheme on the popup itself. */
.contact-panel__field select option {
  background-color: var(--navy-deep);
  color: var(--white);
}
/* Placeholder-option tone: all three real selects (cancellation-form's
   "reason", open-account-form's "product"/"volume") use an empty-value
   first option as a placeholder. While it's selected, render the closed
   select's text in the same muted tone as input placeholders instead of
   solid white. Progressive enhancement only (:has() support) — selects
   simply keep --white text in browsers without it, no functional loss. */
.contact-panel__field select:has(option[value=""]:checked) {
  color: var(--subtle);
}

/* ═══ FINXP LISTBOX — custom-built dropdown panel (design canon rule 19,
   DESIGN-CHOICES.md, 2026-08-10) ═══
   Native OS select popups render detached from the styled closed pill —
   Benn rejected that as unfinished. js/finxp-listbox.js's Alpine.data
   component progressively enhances the <select> rules above into this:
   a trigger button with the EXACT same pill metrics (so form rows never
   shift when JS takes over) + a panel that extends flush from it. The
   [x-cloak] global rule (below, sitewide) keeps the trigger/panel hidden
   until Alpine actually initialises; the native select (styled by the
   rules just above) is the no-JS fallback and stays fully usable.
   Shared by cancellation-form, open-account-form (inc/listbox.php) and
   the guide-gate segment select (js/guide-gate.js builds the same shape
   at runtime). */
.finxp-listbox { position: relative; }
/* Hidden once Alpine confirms it's running (init() adds this class) — a
   visually-hidden clip, not display:none, so native `required` constraint
   validation still fires correctly if a consumer ever needs it. */
.finxp-listbox.is-enhanced .finxp-listbox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.finxp-listbox__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
  width: 100%;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-radius 0.15s ease;
}
.finxp-listbox__trigger:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.18);
}
/* Open = the top half of ONE expanded box (Benn 2026-08-10: "one box that
   looks expanded instead of two"): fill adopts the panel surface, bottom
   corners square off and the bottom border drops so the panel below
   continues the same cyan outline seamlessly. No ring while open — the
   merged box's outline IS the open indicator (a ring would trace the
   trigger alone and re-split the two halves). Must stay AFTER the
   :focus-visible rule above (equal specificity; open wins while open). */
.finxp-listbox__trigger.is-open {
  outline: none;
  background-color: var(--navy-deep);
  border-color: var(--cyan);
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
}
.finxp-listbox__trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finxp-listbox__trigger-label.is-placeholder { color: var(--subtle); }
.finxp-listbox__chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.2s ease, color 0.2s ease;
}
.finxp-listbox__trigger.is-open .finxp-listbox__chevron {
  color: var(--cyan);
  transform: rotate(180deg);
}

/* Panel — near-opaque navy surface flush below the pill ("extends FROM
   the form pill itself", never a detached popup). Reuses the mega-panel
   surface language (var(--navy-deep) fill + hairline + soft ambient
   shadow, style.css ~L442) so it reads as one design system with the
   header dropdowns. */
.finxp-listbox__panel {
  position: absolute;
  left: 0;
  right: 0;
  /* Flush attach, 1px overlap swallowing the trigger's (transparent)
     bottom border — trigger + panel read as one continuous box. */
  top: calc(100% - 1px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--navy-deep);
  border: 1px solid var(--cyan);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  max-height: 280px;
  overflow-y: auto;
  z-index: 30;
  /* 2026-08-10 review: the stock white scrollbar was the one OS-default
     tell left on the panel (rule 19 spirit) — thin dark thumb instead. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.finxp-listbox__panel::-webkit-scrollbar { width: 8px; }
.finxp-listbox__panel::-webkit-scrollbar-track { background: transparent; }
.finxp-listbox__panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
.finxp-listbox__panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
/* Flips upward when the panel would overflow the viewport bottom (the
   guide-gate select sits mid-page and can land near the fold; any field
   can on short mobile viewports) — .openUpward is computed in JS. */
.finxp-listbox__panel--up {
  top: auto;
  bottom: calc(100% - 1px);
  border-top: 1px solid var(--cyan);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
/* Mirror the merged-box corners when the panel opens upward. */
.finxp-listbox:has(.finxp-listbox__panel--up) .finxp-listbox__trigger.is-open {
  border-radius: 0 0 8px 8px;
  border-bottom-color: var(--cyan);
  border-top-color: transparent;
}
.finxp-listbox-enter,
.finxp-listbox-leave { transition: opacity 0.15s ease, transform 0.15s ease; }
.finxp-listbox-enter-start,
.finxp-listbox-leave-end { opacity: 0; transform: translateY(-6px); }
.finxp-listbox__panel--up.finxp-listbox-enter-start,
.finxp-listbox__panel--up.finxp-listbox-leave-end { transform: translateY(6px); }
.finxp-listbox-enter-end,
.finxp-listbox-leave-start { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .finxp-listbox-enter,
  .finxp-listbox-leave { transition: none; }
}

.finxp-listbox__option {
  padding: 11px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--white);
  cursor: pointer;
  /* Long options (cancel-SEPA's ~70-char "already contacted" row) wrap,
     never truncate. */
  white-space: normal;
  overflow-wrap: break-word;
  transition: background 0.15s ease, color 0.15s ease;
}
.finxp-listbox__option.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
/* Selected state: same magenta tint/border language as .is-selected
   elsewhere sitewide (.solution-finder__option.is-selected,
   .contact-panel__route.is-selected — style.css ~L4138/5469). */
.finxp-listbox__option.is-selected {
  background: rgba(255, 44, 235, 0.14);
  color: var(--magenta);
}
.finxp-listbox__option.is-selected.is-active {
  background: rgba(255, 44, 235, 0.2);
}
/* Consent checkbox row (cancellation-form; reusable for any agreement box). */
.contact-panel__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  cursor: pointer;
}
/* 2026-08-09 sweep: accent-color alone still left the OS-default white/grey
   box outline visible pre-check (Windows Chromium only tints the checked
   fill, not the box chrome) — the one raw-looking control across all three
   Forminator-pattern forms. Rebuilt as a real custom box, same recipe as
   the select treatment above: appearance:none + thin-stroke SVG (this time
   a checkmark, not a chevron) + the shared cyan focus ring. */
.contact-panel__consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 9px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-panel__consent input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.contact-panel__consent input[type="checkbox"]:checked {
  background-color: var(--magenta);
  border-color: var(--magenta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5L4 7.5L10 1' stroke='%23FFFFFF' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contact-panel__consent input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.18);
}
.contact-panel__consent .contact-panel__disclaimer { max-width: none; }
.contact-panel__field ::placeholder { color: rgba(255, 255, 255, 0.3); }
.contact-panel__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.contact-panel__disclaimer {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--subtle);
  max-width: 460px;
}
.contact-panel__disclaimer a { color: var(--cyan-light); text-decoration: underline; text-underline-offset: 2px; }
.contact-panel__disclaimer a:hover { color: #fff; }

/* ── POST GRID ── */
.post-grid { padding: var(--section-pad); }
.post-grid__header {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}
.post-grid__header .eyebrow { justify-content: center; }
.post-grid__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.post-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.post-grid__card {
  display: flex;
  flex-direction: column;
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* SWEEP 2026-08-06: rim removed → border-free recipe; hover cyan rim swapped
     for a cyan glow ring. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(2, 2, 53, 0.22);
}
.post-grid__card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(2, 2, 53, 0.5), 0 0 28px rgba(39, 209, 255, 0.20);
}
.post-grid__media { aspect-ratio: 16 / 9; overflow: hidden; }
.post-grid__media img { width: 100%; height: 100%; object-fit: cover; }
.post-grid__media-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 30% 50%, #1a0a4d 0%, #020235 75%);
}
.post-grid__media-fallback span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.04em;
  background: var(--grad-xp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.65;
}
.post-grid__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 24px 26px;
}
.post-grid__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.post-grid__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--magenta);
}
.post-grid__date { font-size: 0.78rem; color: var(--subtle); }
.post-grid__title {
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-grid__excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--body-text);
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-grid__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-light);
}
.post-grid__cta svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.post-grid__card:hover .post-grid__cta svg { transform: translateX(4px); }
.post-grid__empty { text-align: center; color: var(--subtle); }

/* Category label became a link (circular blog nav) — keep the exact look. */
.post-grid__cat {
  text-decoration: none;
  transition: color 0.2s ease;
}
.post-grid__cat:hover { color: var(--cyan-light); }

/* Small inline tag list under the excerpt on cards that have tags. */
.post-grid__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.post-grid__tag {
  font-size: 0.72rem;
  color: var(--subtle);
  letter-spacing: 0.01em;
}

/* AJAX loading state — blog-ajax.js toggles .is-loading on the swappable
   region (filter row + grid + pagination) while a fetch is in flight; the
   JS also skips the class entirely under prefers-reduced-motion. During a
   fetch the grid + pagination dim and go non-interactive while a spinner ring
   rides on top of the region (the region itself is never dimmed, so the
   spinner stays full-opacity). */
.blog-region { position: relative; }
.blog-region .post-grid__grid,
.blog-region .blog-pagination { transition: opacity 0.2s ease; }
.blog-region.is-loading .post-grid__grid,
.blog-region.is-loading .blog-pagination {
  opacity: 0.4;
  pointer-events: none;
}
.blog-region.is-loading::after {
  content: "";
  position: absolute;
  top: 120px;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--cyan-light, #27D1FF);
  animation: finxp-blog-spin 0.7s linear infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes finxp-blog-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-region .post-grid__grid,
  .blog-region .blog-pagination { transition: none; }
}

/* ── BLOG FILTERS ── category + tag nav row above the grid, shared by the
   post-grid block (paginate+show_filters) and archive.php. Chips follow the
   2026-08-06 border-free language: bg fill at rest, state border on hover. */
.blog-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 40px;
}
.blog-filters__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-dark); /* functional divider — kept */
}
.blog-filters__cat {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
  text-decoration: none;
  padding-bottom: 10px;
  transition: color 0.2s ease;
}
.blog-filters__cat::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--grad-xp);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.blog-filters__cat:hover { color: #fff; }
.blog-filters__cat.is-active { color: #fff; }
.blog-filters__cat.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}
.blog-filters__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.blog-filters__tag {
  font-size: 0.74rem;
  color: var(--subtle);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.blog-filters__tag:hover {
  color: #fff;
  border-color: rgba(39, 209, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

/* ── BLOG PAGINATION ── numbers via paginate_links(); prev/next share the
   sitewide carousel-nav button ruleset (see .testimonial__nav-btn group). */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
}
.blog-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--subtle);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.2s ease, background 0.2s ease;
}
.blog-pagination a.page-numbers:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.blog-pagination .page-numbers.current {
  color: #fff;
  background: var(--grad-xp);
}
.blog-pagination .page-numbers.dots { color: var(--subtle); }
.blog-pagination__chev {
  display: block;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
}
.blog-pagination__chev--prev { transform: rotate(-135deg); }
.blog-pagination__chev--next { transform: rotate(45deg); }

/* ── SINGLE POST ── (single.php) compact post opener + term links. */
.blog-post-hero.page-hero {
  padding-top: clamp(88px, 11vh, 120px);
  padding-bottom: clamp(40px, 5vh, 56px);
}
.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--subtle);
}
.blog-post-meta__sep { opacity: 0.5; }
.blog-post-thumb {
  margin: 0 auto 8px;
  max-width: 1240px;
}
.blog-post-thumb__img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.blog-post-terms {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark); /* functional divider — kept */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-post-terms__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.blog-post-terms__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-right: 4px;
}
.blog-post-terms__pill {
  font-size: 0.8rem;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  color: var(--body-text);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.blog-post-terms__pill--cat:hover,
.blog-post-terms__pill--tag:hover {
  color: #fff;
  border-color: rgba(39, 209, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

/* End-of-article newsletter band (single.php). Thin single-line pitch +
   subscribe link, constrained to the 800px reading column so it reads as the
   tail of the article; a hairline brand accent gives it character without bulk. */
.blog-cta {
  margin-top: 24px;
}
.blog-cta__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  border-radius: var(--radius);
  background: var(--grad-card);
}
.blog-cta__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.blog-cta__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-light);
}
.blog-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
}
.blog-cta__btn { flex-shrink: 0; }
.blog-cta__btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .blog-cta__band {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px 22px 24px;
  }
  .blog-cta__btn { width: 100%; justify-content: center; }
}

/* ─── Complianz cookie widgets ([cmplz-cookies] table + [cmplz-manage-consent]
   toggles) on the Cookie Policy, restyled to the dark brand. Scoped to
   .prose__section-body so the site-wide cookie banner (Complianz's own themed
   component) is untouched. Complianz ships CSS with high specificity + some
   inline styles, so key paint props use !important. ─── */
.prose__section-body #cmplz-cookies-overview,
.prose__section-body #cmplz-manage-consent-container {
  margin-top: 10px;
  color: var(--body-text);
}
/* Collapsible wrappers → dark glass cards, squared */
.prose__section-body .cmplz-dropdown,
.prose__section-body .cmplz-category {
  border: 1px solid var(--line-dark) !important;
  border-radius: var(--radius) !important;
  background: var(--grad-card) !important;
  margin: 0 0 10px !important;
  overflow: hidden;
}
/* Header bars (were light grey) */
.prose__section-body .cmplz-service-header,
.prose__section-body .cmplz-category-header {
  background: transparent !important;
  color: var(--white) !important;
  padding: 13px 18px !important;
  list-style: none;
  cursor: pointer;
}
.prose__section-body .cmplz-service-header::-webkit-details-marker { display: none; }
/* Titles */
.prose__section-body #cmplz-cookies-overview h3,
.prose__section-body .cmplz-category-title {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin: 0 !important;
}
/* Sub-labels: Usage / Sharing data / Name / Expiration / Function / Purpose */
.prose__section-body #cmplz-cookies-overview h4,
.prose__section-body #cmplz-cookies-overview h5 {
  color: var(--cyan-light) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 12px 0 4px !important;
}
/* Body text: purposes, cookie names/values, descriptions, "Always active" */
.prose__section-body #cmplz-cookies-overview p,
.prose__section-body #cmplz-cookies-overview .name,
.prose__section-body #cmplz-cookies-overview .retention,
.prose__section-body #cmplz-cookies-overview .function,
.prose__section-body .cmplz-always-active,
.prose__section-body .cmplz-description,
.prose__section-body .cmplz-description span { color: var(--body-text) !important; }
/* Open panels: keep content padded inside the card */
.prose__section-body .cmplz-service-description,
.prose__section-body .cmplz-sharing-data,
.prose__section-body .cookies-per-purpose,
.prose__section-body .cmplz-description { padding: 0 18px 14px !important; }
/* Toggle button + chevron */
.prose__section-body .cmplz-category-toggle {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}
.prose__section-body .cmplz-category-toggle svg { fill: var(--cyan-light) !important; }
/* Consent checkboxes → brand accent */
.prose__section-body .cmplz-consent-checkbox { accent-color: var(--cyan); width: 18px; height: 18px; }

/* ── BLOCK KIT RESPONSIVE ── */
@media (max-width: 1100px) {
  .feature-grid__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .contact-panel__routes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .feature-grid__grid--3 { grid-template-columns: repeat(2, 1fr); }
  .post-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  /* bento drops to 2-col: feature card goes full-width single row */
  .feature-grid__grid--bento { grid-template-columns: repeat(2, 1fr); }
  .feature-grid__grid--bento .feature-grid__card:first-child { grid-column: span 2; grid-row: auto; }
  .feature-grid__grid--bento .feature-grid__card:last-child:nth-child(3n + 2):not(:first-child),
  .feature-grid__grid--bento .feature-grid__card:last-child:nth-child(3n + 1):not(:first-child) { grid-column: auto; }
  .feature-grid__grid--bento .feature-grid__card:last-child:nth-child(2n + 2) { grid-column: span 2; }
  .feature-grid__feature-img { min-height: 150px; }
}
@media (max-width: 900px) {
  .feature-grid__rows { grid-template-columns: 1fr; border-top: none; }
  .feature-grid__row:first-child { border-top: 1px solid var(--line-dark); }
  .feature-grid--light .feature-grid__row:first-child { border-color: var(--line-light); }
  .feature-grid__row { grid-template-columns: 58px 1fr; gap: 18px; padding: 26px 0 30px; }
  .feature-grid__index { font-size: 2.1rem; }
  .feature-grid--v-rail .feature-grid__header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .feature-grid--v-rail .feature-grid__card { flex-basis: min(78vw, 320px); }
  .split-feature__inner { grid-template-columns: 1fr; gap: 40px; }
  .split-feature--reverse .split-feature__copy { order: 1; }
  .split-feature--reverse .split-feature__visual { order: 2; }
  .split-feature__panel { aspect-ratio: 16 / 10; max-width: 560px; }
  .steps__track {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 0;
    padding-left: 30px;
  }
  .steps__track::before {
    top: 6px;
    bottom: 6px;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(39, 209, 255, 0.4) 0%, rgba(206, 17, 223, 0.4) 100%);
  }
  .steps__item::before {
    top: 4px;
    left: -30px;
  }
}
@media (max-width: 768px) {
  .blog-filters__cats { justify-content: flex-start; overflow-x: auto; padding-bottom: 16px; }
  .blog-post-thumb__img { aspect-ratio: 16 / 10; }
  .page-hero { padding-left: 20px; padding-right: 20px; }
  /* Side visual: stack the photo below the copy at a shorter, banner-like
     aspect rather than the desktop 4:3 portrait-ish panel, and drop it
     beneath the copy in reading order. */
  .page-hero--visual-side .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero--visual-side .page-hero__visual { order: 2; margin-top: 4px; }
  .page-hero--visual-side .page-hero__panel { aspect-ratio: 16 / 10; }
}
@media (max-width: 700px) {
  .feature-grid__grid--2,
  .feature-grid__grid--3 { grid-template-columns: 1fr; }
  .feature-grid__grid--bento { grid-template-columns: 1fr; }
  .feature-grid__grid--bento .feature-grid__card:first-child,
  .feature-grid__grid--bento .feature-grid__card:last-child:nth-child(2n + 2) { grid-column: auto; }
  .feature-grid__grid--photo .feature-grid__card { min-height: 300px; aspect-ratio: auto; }
  .post-grid__grid { grid-template-columns: 1fr; }
  /* minmax(0,1fr), not 1fr: a bare 1fr track's implicit auto-minimum is pinned
     to the phone-dial row's min-width (128px), forcing the column wider than its
     container and pushing every field off-screen on mobile (Benn 2026-08-24). */
  .contact-panel__form-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-panel__field--full { grid-column: auto; }
  .contact-panel__form-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .feature-grid__grid--4 { grid-template-columns: 1fr; }
  .contact-panel__routes { grid-template-columns: 1fr; }
  .page-hero__actions { flex-direction: column; align-items: stretch; }
  .page-hero--center .page-hero__actions { align-items: center; }
  .page-hero__actions .btn { justify-content: center; }
  .faq__a-inner p { padding-right: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   DYNAMIC BLOCK KIT — wireframe interactive patterns
   tabbed-features · pinned-features · logo-marquee · quote-cards ·
   stat-tiles · job-list
   ═══════════════════════════════════════════════════════════════ */

/* ── TABBED FEATURES ── */
.tabbed-features { padding: var(--section-pad); }
.tabbed-features__header {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.tabbed-features__header .eyebrow { justify-content: center; }
.tabbed-features__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.tabbed-features__sub { margin-top: 14px; font-size: 0.98rem; color: var(--body-text); }
.tabbed-features__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.tabbed-features__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tabbed-features__tab {
  display: flex;
  gap: 18px;
  padding: 20px 18px 20px 0;
  background: none;
  border: none;
  border-top: 1px solid var(--line-dark);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: opacity 0.25s ease;
  opacity: 0.45;
}
.tabbed-features__tab:last-child { border-bottom: 1px solid var(--line-dark); }
.tabbed-features__tab.is-active { opacity: 1; }
.tabbed-features__tab:hover { opacity: 0.8; }
.tabbed-features__tab.is-active:hover { opacity: 1; }
.tabbed-features__tab-bar {
  position: relative;
  flex-shrink: 0;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.tabbed-features__tab-bar i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--cyan-light), var(--magenta));
  border-radius: 2px;
}
.tabbed-features__tab.is-active .tabbed-features__tab-bar i { height: 100%; }
.tabbed-features__tab[data-autoplay] .tabbed-features__tab-bar i { transition: none; }
.tabbed-features__tab-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--white);
}
.tabbed-features__tab-text {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.tabbed-features__tab-text > span {
  overflow: hidden;
  min-height: 0;
  display: block;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--body-text);
}
.tabbed-features__tab.is-active .tabbed-features__tab-text { grid-template-rows: 1fr; }
.tabbed-features__tab.is-active .tabbed-features__tab-text > span { padding-top: 8px; }
.tabbed-features__stage {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--grad-card);
  /* SWEEP 2026-08-06: rim removed — imagery defines the stage; inset top
     highlight + ambient shadow keep it lifted off the navy. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(2, 2, 53, 0.32);
}
.tabbed-features__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tabbed-features__panel.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.tabbed-features__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tabbed-features__panel-stat {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Per-tab stat backdrop image (`stat_image`, TEXT field): fills the whole
   stage behind the frosted stat band, sitting visually ABOVE/behind the
   number+label the way rule 5's split-feature stat imagery works. A soft
   top-to-bottom navy wash keeps the photo calm near the top and blends
   cleanly into the frosted band at the bottom; empty field = no image, no
   markup emitted (graceful fallback), panel reads exactly as before. */
.tabbed-features__panel-stat-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tabbed-features__panel-stat-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 2, 53, 0.18) 0%, rgba(2, 2, 53, 0.1) 38%, rgba(2, 2, 53, 0.8) 100%);
}
.tabbed-features__panel-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 75% 20%, rgba(39, 209, 255, 0.13) 0%, transparent 100%),
    radial-gradient(ellipse 55% 55% at 20% 85%, rgba(206, 17, 223, 0.16) 0%, transparent 100%);
}
.tabbed-features__panel-number {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: 1;
  background: var(--grad-xp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tabbed-features__panel-label {
  position: relative;
  font-size: 0.92rem;
  color: var(--subtle);
}
/* Stats-only panels (no image — pure figure): frosted band anchored to the
   bottom of the panel, imitating the homepage solutions-card__pill glass
   treatment (translucency + blur) adapted to the inner-page canon (<=9px
   radius tokens). The ambient glow keeps filling the panel above the band,
   so the box still earns its figure per the boxes-are-for-figures rule. */
.tabbed-features__panel--stats .tabbed-features__panel-stat {
  position: absolute;
  inset: auto 0 0 0;
  width: auto;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 24px clamp(24px, 4vw, 36px) 26px;
  background: rgba(4, 4, 40, 0.42);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.tabbed-features__panel--stats .tabbed-features__panel-number {
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
}

/* ── PINNED FEATURES ── */
.pinned-features { padding: var(--section-pad); }
.pinned-features__header {
  max-width: 780px;
  margin-bottom: 64px;
}
.pinned-features__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.pinned-features__intro { margin-top: 14px; font-size: 0.98rem; color: var(--body-text); }
.pinned-features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.pinned-features__items {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 14vh, 130px);
  padding: 4vh 0 10vh;
}
.pinned-features__item {
  position: relative;
  padding-left: 34px;
  border-left: 2px solid rgba(255, 255, 255, 0.10);
  transition: border-color 0.3s ease, opacity 0.3s ease;
  opacity: 0.45;
}
.pinned-features__item.is-active {
  opacity: 1;
  border-left-color: var(--magenta);
}
.pinned-features__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--magenta);
  margin-bottom: 10px;
}
.pinned-features__item-title {
  font-size: 1.35rem;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.pinned-features__item-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 460px;
}
.pinned-features__item-media { display: none; }
.pinned-features__stage { position: sticky; top: calc(50vh - min(24vw, 260px)); }
.pinned-features__stage-inner {
  position: relative;
  aspect-ratio: 4 / 3.3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--grad-card);
  /* PROTO 2026-08-06 (border-free sweep): image+overlay figure box — 1px rim
     removed. The crossfading imagery defines the box; a hairline inset top
     highlight + soft ambient shadow keep it lifted off the navy without a rim. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(2, 2, 53, 0.32);
}
/* Stage swap: layered crossfade, no translate (canon rule 4). The incoming
   visual is stamped with an ever-increasing inline z-index (main.js) so it
   always paints above whatever was showing, then fades in over it; the
   outgoing visual only loses `is-active` (opacity) once fully covered, so
   it stays on screen the whole time instead of vanishing to reveal the
   plain stage background mid-swap. */
.pinned-features__visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.pinned-features__visual.is-active { opacity: 1; }
.pinned-features__visual img { width: 100%; height: 100%; object-fit: cover; }
.pinned-features__visual-stat {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pinned-features__visual-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 70% 25%, rgba(39, 209, 255, 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 55% 55% at 25% 80%, rgba(206, 17, 223, 0.17) 0%, transparent 100%);
}
.pinned-features__visual-stat span {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  background: var(--grad-xp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .tabbed-features__panel,
  .pinned-features__visual { transition: none; }
}

/* ── LOGO MARQUEE ── */
.logo-marquee { padding: 64px 0; overflow: hidden; }
.logo-marquee__head { text-align: center; margin-bottom: 34px; }
.logo-marquee__head .eyebrow { justify-content: center; }
.logo-marquee__viewport {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
  width: max-content;
  /* Speed math: translateX(-50%) moves the track by exactly ONE HALF.
     render.php builds each half from $sets_per_half (=5) copies of the logo
     set (~540px each ≈ 2655px/half) so a half stays wider than the widest
     desktop viewport (~2560px) — no gap before the loop point.
     Perceived speed = distance per set. Historically one 5-logo set/half ran
     in 32s. With 5 sets/half we scale duration ×5 → 160s so a single set
     still crosses the screen in ~32s. KEEP IN SYNC with $sets_per_half. */
  animation: logo-marquee-scroll 160s linear infinite;
  padding-right: clamp(48px, 7vw, 110px);
}
.logo-marquee__viewport:hover .logo-marquee__track { animation-play-state: paused; }
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-marquee__item { flex-shrink: 0; }
.logo-marquee__item img {
  height: var(--mq-logo-h, 30px);
  width: auto;
  opacity: 0.55;
  filter: brightness(0) invert(1);
  transition: opacity 0.25s ease;
}
/* Equalise by INK height (visible mark), not image-box height — each
   publisher's mark fills a different share of its file. Ratios carried
   over from the homepage trust-press --logo-h tuning (ink ≈ 26px here). */
.logo-marquee__item--finextra img         { --mq-logo-h: 33px; }
.logo-marquee__item--the-paypers img      { --mq-logo-h: 32px; }
.logo-marquee__item--sifted img           { --mq-logo-h: 28px; }
.logo-marquee__item--benzinga img         { --mq-logo-h: 26px; }
.logo-marquee__item--the-fintech-times img { --mq-logo-h: 26px; }
.logo-marquee__item:hover img { opacity: 1; }
/* Publication logos link to their coverage (opens in a new tab); anchor wraps
   the img without changing the marquee item's layout/sizing. */
.logo-marquee__link { display: inline-flex; align-items: center; }
.logo-marquee__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ── LOGO MARQUEE — FLAGS VARIANT ──
   Country-flag ticker "who we service" (Europe + key markets). render.php
   emits .logo-marquee--flags with 33 flag chips per half (one set/half — a
   33-item set already ≈ 3000px, wider than any viewport, so no gap before
   the -50% seam). Full-colour flags (no invert), chip = flag + country name. */
/* Country ticker: no chips — just the flag + country name on the navy section,
   unboxed. Small radius + hairline border so white flag areas (Poland,
   Switzerland) don't bleed into the navy. */
.logo-marquee--flags .logo-marquee__track {
  /* Speed: translateX(-50%) moves ONE HALF. No chips, wider gutter; ~100s keeps
     a calm drift. One set/half (33 items > any viewport). */
  animation-duration: 100s;
  gap: clamp(26px, 2.6vw, 44px);
  padding-right: clamp(26px, 2.6vw, 44px);
}
.logo-marquee--flags .logo-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.logo-marquee--flags .logo-marquee__item img,
.logo-marquee--flags .logo-marquee__flag {
  height: 26px;
  width: auto; /* 4:3 flag ratio */
  opacity: 1;
  filter: none;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: block;
}
.logo-marquee--flags .logo-marquee__flag-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--body-text);
  white-space: nowrap;
}

/* ── QUOTE CARDS ── */
.quote-cards { padding: var(--section-pad); }
.quote-cards__header {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}
.quote-cards__header .eyebrow { justify-content: center; }
.quote-cards__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.quote-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.quote-cards__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px 28px;
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  /* SWEEP 2026-08-06: rim removed → border-free recipe. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(2, 2, 53, 0.22);
}
.quote-cards__stars {
  display: flex;
  gap: 4px;
  color: var(--magenta);
  margin-bottom: 18px;
}
.quote-cards__stars svg { width: 15px; height: 15px; }
.quote-cards__quote {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--body-text);
  flex-grow: 1;
  margin: 0 0 22px;
}
.quote-cards__who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quote-cards__who img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.quote-cards__who span { display: flex; flex-direction: column; }
.quote-cards__who strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--white);
}
.quote-cards__who em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--subtle);
}

/* ── STAT TILES ── */
.stat-tiles { padding: var(--section-pad); }
.stat-tiles__header {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}
.stat-tiles__header .eyebrow { justify-content: center; }
.stat-tiles__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.stat-tiles__sub { margin-top: 14px; font-size: 0.98rem; color: var(--body-text); }
.stat-tiles__grid { display: grid; gap: 0; }
.stat-tiles__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
.stat-tiles__grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-tiles__grid--4 { grid-template-columns: repeat(4, 1fr); }
.stat-tiles__grid--5 { grid-template-columns: repeat(5, 1fr); }
/* Unboxed + purposeful (Benn 2026-08-04): no card chrome. The stats sit in one
   row separated by hairline dividers, each led by a short gradient accent tick,
   so the numbers read as a deliberate spec row rather than boxed tiles. */
.stat-tiles__tile {
  position: relative;
  padding: 4px clamp(28px, 3.2vw, 48px);
}
.stat-tiles__tile + .stat-tiles__tile { border-left: 1px solid var(--line-dark); }
.stat-tiles__tile:first-child { padding-left: 0; }
.stat-tiles__tile:last-child { padding-right: 0; }
.stat-tiles__tile::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-xp);
  margin-bottom: 22px;
}
.stat-tiles__number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 4.4vw, 3.8rem);
  line-height: 1;
  background: var(--grad-xp);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.stat-tiles__label {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
}
.stat-tiles__text {
  margin-top: 8px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--subtle);
}

/* ── JOB LIST ── */
.job-list { padding: var(--section-pad); }
.job-list__inner { max-width: 980px; }
.job-list__header { margin-bottom: 40px; }
.job-list__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.job-list__sub { margin-top: 14px; font-size: 0.98rem; color: var(--body-text); }
.job-list__rows { display: flex; flex-direction: column; }
.job-list__row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 8px;
  border-top: 1px solid var(--line-dark);
  transition: background 0.2s ease, padding 0.2s ease;
}
.job-list__row:last-child { border-bottom: 1px solid var(--line-dark); }
.job-list__row:hover { background: rgba(255, 255, 255, 0.03); padding-left: 16px; }
.job-list__role { flex-grow: 1; display: flex; flex-direction: column; gap: 5px; }
.job-list__role strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
}
.job-list__role em { font-style: normal; font-size: 0.88rem; color: var(--body-text); }
.job-list__meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.job-list__chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  /* SWEEP 2026-08-06: rim → subtle background fill; 100px pill squared to 8px
     (Benn's standing anti-pill steer). */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 5px 12px;
  white-space: nowrap;
}
.job-list__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--magenta);
  transition: transform 0.25s ease;
}
.job-list__row:hover .job-list__arrow { transform: translateX(5px); }
.job-list__empty {
  padding: 44px 40px;
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  /* SWEEP 2026-08-06: rim removed → border-free recipe. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(2, 2, 53, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.job-list__empty p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 560px;
}

/* ── DYNAMIC KIT RESPONSIVE ── */
@media (max-width: 1000px) {
  .stat-tiles__grid--4,
  .stat-tiles__grid--5 { grid-template-columns: repeat(2, 1fr); }
  /* 2-col wrap: divider only before the right column, row gap between rows */
  .stat-tiles__grid { row-gap: 44px; }
  .stat-tiles__tile { padding: 0 clamp(20px, 3vw, 40px); }
  .stat-tiles__tile:nth-child(odd)  { border-left: 0; padding-left: 0; }
  .stat-tiles__tile:nth-child(even) { border-left: 1px solid var(--line-dark); }
  .quote-cards__grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .tabbed-features__grid { grid-template-columns: 1fr; gap: 36px; }
  .tabbed-features__stage { max-width: 560px; }
  /* pinned-features degrades to a stacked list: stage hidden, per-item media shown */
  .pinned-features__grid { grid-template-columns: 1fr; }
  .pinned-features__stage { display: none; }
  .pinned-features__items { gap: 44px; padding: 0; }
  /* Mobile reveal: line + number sit white/muted until the item scrolls into
     view, then tween to magenta (JS adds `.is-inview`, one-way). The desktop
     `.is-active` never toggles on mobile (its scroll activation is disabled
     <=900px), so neutralise its magenta here and let `.is-inview` drive colour.
     `.is-inview` is declared last so it wins when an item is both. */
  .pinned-features__item { opacity: 1; border-left-color: rgba(255, 255, 255, 0.22); transition: border-color 0.6s ease; }
  .pinned-features__item.is-active { border-left-color: rgba(255, 255, 255, 0.22); }
  .pinned-features__item .pinned-features__num { color: rgba(255, 255, 255, 0.5); transition: color 0.6s ease; }
  .pinned-features__item.is-inview { border-left-color: var(--magenta); }
  .pinned-features__item.is-inview .pinned-features__num { color: var(--magenta); }
  .pinned-features__item-media {
    display: block;
    margin-top: 18px;
    border-radius: var(--radius);
    overflow: hidden;
    /* SWEEP 2026-08-06: rim removed — image defines the box. */
    box-shadow: 0 12px 30px rgba(2, 2, 53, 0.30);
  }
  .pinned-features__item-media img { width: 100%; height: auto; }
}
@media (max-width: 640px) {
  .stat-tiles__grid--2,
  .stat-tiles__grid--3,
  .stat-tiles__grid--4,
  .stat-tiles__grid--5 { grid-template-columns: 1fr; }
  /* stacked: drop the vertical dividers, space the rows */
  .stat-tiles__grid { row-gap: 36px; }
  .stat-tiles__tile,
  .stat-tiles__tile:nth-child(even) { border-left: 0; padding: 0; }
  .job-list__row { flex-wrap: wrap; }
  .job-list__meta { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   SIGNATURE INTERACTIVE COMPONENTS (7c)
   solution-finder (Alpine) · finxp-slider (Swiper) · payment-flow (DrawSVG)
   ═══════════════════════════════════════════════════════════════ */

[x-cloak] { display: none !important; }

/* ── SOLUTION FINDER ── */
.solution-finder { padding: var(--section-pad); }
.solution-finder__header {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}
.solution-finder__header .eyebrow { justify-content: center; }
.solution-finder__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.solution-finder__sub {
  margin-top: 14px;
  font-size: 0.98rem;
  color: var(--body-text);
}
.solution-finder__panel {
  position: relative;
  /* Full container width (Benn 2026-08-07) — was an 880px centered card. */
  max-width: none;
  margin: 0 auto;
  padding: clamp(32px, 4.5vw, 52px) clamp(24px, 4.5vw, 56px) clamp(26px, 3.5vw, 40px);
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* SWEEP 2026-08-06: rim removed → border-free recipe. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 36px rgba(2, 2, 53, 0.26);
}
.solution-finder__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 85% 0%, rgba(39, 209, 255, 0.1) 0%, transparent 100%),
    radial-gradient(ellipse 50% 55% at 10% 100%, rgba(206, 17, 223, 0.12) 0%, transparent 100%);
}
.solution-finder__progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.solution-finder__progress-count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  white-space: nowrap;
}
.solution-finder__progress-track {
  flex-grow: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.solution-finder__progress-bar {
  display: block;
  height: 100%;
  background: var(--grad-xp);
  transform: scaleX(0.333);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.solution-finder__step,
.solution-finder__result { position: relative; }
.solution-finder__q {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
}
.solution-finder__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.solution-finder__options--stack { grid-template-columns: 1fr; max-width: 520px; }
.solution-finder__option {
  padding: 16px 18px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--body-text);
  background: rgba(255, 255, 255, 0.04);
  /* SWEEP 2026-08-06: resting rim softened to transparent (hover/selected
     state borders below kept — the interaction channel stays). */
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.solution-finder__option:hover {
  border-color: rgba(39, 209, 255, 0.5);
  transform: translateY(-2px);
}
.solution-finder__option.is-selected {
  border-color: var(--magenta);
  background: rgba(255, 44, 235, 0.08);
  color: #ffffff;
}
.solution-finder__result-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-light);
  margin-bottom: 12px;
}
.solution-finder__result-title {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.solution-finder__result-blurb {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 56ch;
}
.solution-finder__result-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--subtle);
  max-width: 56ch;
}
.solution-finder__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
/* The primary result CTA label is "Explore " + a long product-name span (two
   flex items). Left as-is, on a narrow button the product name wraps to 2-3
   lines while "Explore" stays centred beside the stacked block — a jumbled
   read. Let the button wrap its items and centre them so the label reads as
   clean centred lines instead (Benn 2026-08-24). */
.solution-finder__result-actions .btn {
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.solution-finder__result-industry {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--body-text);
}
.solution-finder__result-industry a {
  color: var(--cyan-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(39, 209, 255, 0.4);
}
.solution-finder__controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  min-height: 24px;
}
.solution-finder__back,
.solution-finder__restart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  cursor: pointer;
  transition: color 0.25s ease;
}
.solution-finder__back:hover,
.solution-finder__restart:hover { color: #ffffff; }
.solution-finder__back svg { width: 15px; height: 15px; }

/* step swap: transform-led enter */
.sf-enter { transition: transform 0.35s ease, opacity 0.35s ease; }
.sf-enter-start { transform: translateX(42px); opacity: 0; }
.sf-enter-end { transform: translateX(0); opacity: 1; }

/* ── FINXP SLIDER ── */
.finxp-slider { padding: var(--section-pad); overflow: hidden; }
.finxp-slider--light {
  background: var(--surface-light);
  color: var(--ink-on-light);
}
.finxp-slider__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}
.finxp-slider__header-copy { max-width: 720px; }
.finxp-slider__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.finxp-slider__sub {
  margin-top: 14px;
  font-size: 0.98rem;
  color: var(--body-text);
}
.finxp-slider--light .finxp-slider__sub { color: var(--ink-muted-light); }
.finxp-slider__nav { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 6px; }
/* Surface/chevron/hover come from the shared carousel-nav-btn rule (see
   TESTIMONIAL section) — only the light-theme override + disabled state
   live here. */
.finxp-slider--light .finxp-slider__btn { border-color: var(--line-light); color: var(--ink-on-light); }
.finxp-slider__btn.swiper-button-disabled { opacity: 0.3; cursor: default; }
.finxp-slider__stage .swiper { overflow: visible; }
.finxp-slider__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* SWEEP 2026-08-06: rim removed → border-free recipe. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(2, 2, 53, 0.22);
}
.finxp-slider--light .finxp-slider__card {
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(2, 2, 53, 0.05);
}
.finxp-slider__card--quote { padding: 32px 30px; }
.finxp-slider__stars { display: flex; gap: 4px; color: var(--magenta); margin-bottom: 20px; }
.finxp-slider__stars svg { width: 15px; height: 15px; }
.finxp-slider__quote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--body-text);
  flex-grow: 1;
}
.finxp-slider--light .finxp-slider__quote { color: var(--ink-muted-light); }
.finxp-slider__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.finxp-slider__who img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  /* SWEEP 2026-08-06: avatar rim removed. */
}
.finxp-slider__who span { display: flex; flex-direction: column; }
.finxp-slider__who strong { font-family: var(--font-display); font-size: 0.95rem; }
.finxp-slider__who em { font-style: normal; font-size: 0.8rem; color: var(--subtle); }
.finxp-slider__media { display: block; aspect-ratio: 16 / 10; }
.finxp-slider__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.finxp-slider__card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 26px 26px;
}
.finxp-slider__card-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 8px; }
.finxp-slider__card-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--body-text);
  flex-grow: 1;
}
.finxp-slider--light .finxp-slider__card-text { color: var(--ink-muted-light); }
.finxp-slider__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
}
.finxp-slider__card-cta svg { width: 14px; height: 14px; }
.finxp-slider__card--link { text-decoration: none; color: inherit; }

/* coverflow: fixed slide width, non-active slides recede */
.finxp-slider--coverflow .swiper-slide { width: min(560px, 82vw); height: auto; }
.finxp-slider--cards .swiper-slide { height: auto; display: flex; }
.finxp-slider--cards .swiper-slide .finxp-slider__card { width: 100%; }
.finxp-slider--coverflow .finxp-slider__card { transition: filter 0.4s ease; }
.finxp-slider--coverflow .swiper-slide:not(.swiper-slide-active) .finxp-slider__card {
  filter: brightness(0.55) saturate(0.85);
}
.finxp-slider .swiper-pagination {
  position: static;
  margin-top: 34px;
}
.finxp-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  opacity: 1;
  transition: background 0.25s ease, transform 0.25s ease;
}
.finxp-slider--light .swiper-pagination-bullet { background: rgba(2, 2, 53, 0.2); }
.finxp-slider .swiper-pagination-bullet-active {
  background: var(--magenta);
  transform: scale(1.25);
}

@media (max-width: 900px) {
  .solution-finder__options { grid-template-columns: 1fr; }
  .finxp-slider__header { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 560px) {
  /* Stack the two result CTAs full-width on phones so the long product-name
     button has room to read on its own line (Benn 2026-08-24). */
  .solution-finder__result-actions { flex-direction: column; align-items: stretch; }
  .solution-finder__result-actions .btn { width: 100%; }
}

/* ── PAYMENT FLOW ── */
.payment-flow { padding: var(--section-pad); overflow: hidden; }
.payment-flow__header {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.payment-flow__header .eyebrow { justify-content: center; }
.payment-flow__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.payment-flow__sub {
  margin-top: 14px;
  font-size: 0.98rem;
  color: var(--body-text);
}

.payment-flow__diagram {
  --pf-marker: 62px;
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

/* rails — one horizontal (desktop), one vertical (mobile); the hidden one is
   never animated. Straight paths, non-scaling-stroke keeps them crisp under
   preserveAspectRatio="none". CSS default = fully drawn (completed state). */
.payment-flow__rail { position: absolute; pointer-events: none; overflow: visible; z-index: 0; }
.payment-flow__rail-path {
  fill: none;
  stroke: var(--cyan-light);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(39, 209, 255, 0.45));
}
.payment-flow__rail--h {
  left: 0;
  right: 0;
  width: 100%;
  height: 24px;
  top: calc(var(--pf-marker) / 2 - 12px);
}
.payment-flow__rail--v {
  display: none;
  width: 24px;
  left: calc(var(--pf-marker) / 2 - 12px);
  top: calc(var(--pf-marker) / 2);
  height: calc(100% - var(--pf-marker));
}

/* nodes — gap:0 so the four column centres land exactly at 12.5/37.5/62.5/87.5%,
   matching the rail path endpoints (125→875 in a 1000-unit viewBox). */
.payment-flow__nodes {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.payment-flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}
.payment-flow__marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pf-marker);
  height: var(--pf-marker);
  border-radius: 50%;
  background: var(--navy-deep);
  border: 1px solid var(--line-dark);
  color: var(--subtle);
  transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.payment-flow__marker-icon svg { width: 26px; height: 26px; }
.payment-flow__node.is-active .payment-flow__marker {
  border-color: var(--cyan-light);
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(39, 209, 255, 0.12), 0 0 22px rgba(39, 209, 255, 0.45);
}
.payment-flow__copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 18px;
}
.payment-flow__step {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--subtle);
}
.payment-flow__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
  transform: translateY(4px);
  transition: color 0.4s ease, transform 0.4s ease;
}
.payment-flow__node.is-active .payment-flow__label { color: #ffffff; transform: translateY(0); }
.payment-flow__note {
  margin: 0 auto;
  max-width: 24ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--subtle);
  transition: color 0.4s ease;
}
.payment-flow__node.is-active .payment-flow__note { color: var(--body-text); }
.payment-flow__footnote {
  margin: 44px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--subtle);
}

/* mobile: vertical stacked flow — rail runs down the left through the markers */
@media (max-width: 767px) {
  .payment-flow__diagram { --pf-marker: 52px; max-width: 460px; }
  .payment-flow__rail--h { display: none; }
  .payment-flow__rail--v { display: block; }
  .payment-flow__nodes { grid-template-columns: 1fr; row-gap: 30px; }
  .payment-flow__node { flex-direction: row; align-items: flex-start; text-align: left; padding: 0; gap: 18px; }
  .payment-flow__marker { flex-shrink: 0; }
  .payment-flow__copy { margin-top: 0; align-items: flex-start; padding-top: 4px; }
  .payment-flow__note { margin: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .payment-flow__marker,
  .payment-flow__label,
  .payment-flow__note { transition: none; }
  .payment-flow__label { transform: none; }
}

/* ─── DESIGN CANON — established on why-finxp, 2026-08-03 ───
   1. XP watermark: the brand's XP mark ghosted behind the post-hero
      section (Benn's concept) — the universal "distinct first section"
      identity marker. Content stays above via the z-indexed container.
   2. Post-hero decrypt entrance: the eyebrow's accent line grows in as
      the section enters (text scramble runs in main.js; .js-gated so
      no-JS visitors always see the line).
   3. Light feature cards: pointer-chasing gradient-sweep border ring;
      GSAP owns transform on these cards (tilt), so the CSS hover lift
      is disabled when JS is present. */
.page-hero + section { position: relative; }
.page-hero + section > .container { position: relative; z-index: 1; }
.page-hero + section::after {
  content: '';
  position: absolute;
  top: clamp(32px, 6vw, 72px);
  right: max(28px, calc((100vw - var(--max-w)) / 2));
  width: min(30vw, 430px);
  aspect-ratio: 2 / 1;
  background: url('images/brand/xp-watermark-gradient.svg') no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
}
.js .page-hero + section .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.js .page-hero + section .eyebrow.xp-decrypted::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js .page-hero + section .eyebrow::before { transform: none; transition: none; }
}

/* ITEM 2 (2026-08-10, client fix): "marquee is stopping the correct
   section from getting the watermark" + "trust-marquee's should not have
   XP watermark". Marquees (.trust-marquee from trust-bar, .logo-marquee)
   are scrolling press/logo strips, not the "first real content section"
   the mark is meant to identify — but because the base rule above matches
   the LITERAL next sibling of .page-hero, a marquee sitting directly
   under the hero was both catching the mark itself AND starving the
   actual first section after it. Audited via specs (blocks order): 7
   pages run a trust-bar directly post-hero — banking-as-a-service,
   bin-sponsorship, closed-loop-payments, cross-border-payments,
   ecommerce-merchants, payment-gateway, sepa-direct-debit-processing.
   No page currently runs logo-marquee post-hero, but it's covered too so
   this holds if that ever changes. Fix: strip the mark off the marquee,
   then chain the exact same treatment onto whatever follows it — same
   chaining pattern the width-tier rules use below (search
   `.page-hero + .trust-marquee +`). */
.page-hero + .trust-marquee::after,
.page-hero + .logo-marquee::after { display: none; }
.page-hero + .trust-marquee + section,
.page-hero + .logo-marquee + section { position: relative; }
.page-hero + .trust-marquee + section > .container,
.page-hero + .logo-marquee + section > .container { position: relative; z-index: 1; }
.page-hero + .trust-marquee + section::after,
.page-hero + .logo-marquee + section::after {
  content: '';
  position: absolute;
  top: clamp(32px, 6vw, 72px);
  right: max(28px, calc((100vw - var(--max-w)) / 2));
  width: min(30vw, 430px);
  aspect-ratio: 2 / 1;
  background: url('images/brand/xp-watermark-gradient.svg') no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
}

/* ITEM 4 (2026-08-07): on pages where the split-feature directly under the
   hero renders an imaged stat panel (`.split-feature__panel--imaged` — a
   photo + heavy navy scrim, canon rule 5), that panel sits inside the same
   z-index:1 container the section watermark is drawn behind, so the photo
   covers all but a sliver of the mark. Audited all 31 inner pages for a
   LITERAL `.page-hero + section` match (the selector above has no
   trust-marquee chaining, unlike the Item 1 width-tier rules — pages where
   a trust-marquee sits between hero and split-feature never trigger this,
   since the watermark lands on the marquee band instead): affected pages
   are euro-iban-account, why-finxp, partners, card-issuing,
   industries/fintechs-psps, industries/payroll-contractors,
   industries/affiliates. Fix: suppress the section-level mark on just those
   sections, and give the panel its own watermark instead, drawn ABOVE the
   scrim (not behind it, or the scrim's 0.82-0.9 opacity would erase it
   again) at a slightly higher opacity than the section version so it still
   reads against the busier photo, but below the brand glow wash and the
   stat number/label so nothing competes with the actual figure.
   REPOSITIONED bottom-right (client direction, 2026-08-07): the stat
   number/label sit centered in the panel (flex-centered), so the bottom
   corner clears them; sized to stay clear of the centered stat block on
   the narrower end of the panel's real widths. */
.page-hero + .split-feature:has(.split-feature__panel--imaged)::after { display: none; }
/* Scoped to the post-hero panel specifically — other imaged stat panels
   further down a page never had a competing section watermark to lose, so
   they keep their plain figure treatment (no new decoration added there). */
.page-hero + .split-feature .split-feature__panel--imaged::after {
  content: '';
  position: absolute;
  bottom: 6%;
  right: 6%;
  width: min(40%, 180px);
  aspect-ratio: 2 / 1;
  background: url('images/brand/xp-watermark-gradient.svg') no-repeat center / contain;
  opacity: 0.16;
  z-index: 2;
  pointer-events: none;
}
.page-hero + .split-feature .split-feature__panel--imaged .split-feature__panel-scrim { z-index: 1; }
.page-hero + .split-feature .split-feature__panel--imaged .split-feature__panel-glow { z-index: 3; }
.page-hero + .split-feature .split-feature__panel--imaged .split-feature__stat { z-index: 4; }

/* Same clipping fix for the post-hero editorial duo (2026-08-07): at full
   width the duo image covers the section watermark just like the imaged
   stat panels did. Move the mark onto the image — in the bottom corner
   OPPOSITE the stat chip (chip sits right normally, left on --reverse),
   so mark and chip never collide. */
.page-hero + .split-feature:has(.split-feature__duo)::after { display: none; }
/* Post-hero image-variant splits (portrait photography — Stefan on
   trust-and-compliance): the full-band figure clips the section mark the
   same way, but a brand mark over a person reads wrong (Benn 2026-08-07)
   — suppress the watermark on these sections entirely, no replacement. */
.page-hero + .split-feature:has(.split-feature__imgwrap)::after { display: none; }
.page-hero + .split-feature .split-feature__duo-anchor::after {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: min(38%, 170px);
  aspect-ratio: 2 / 1;
  background: url('images/brand/xp-watermark-gradient.svg') no-repeat center / contain;
  opacity: 0.16;
  pointer-events: none;
}
.page-hero + .split-feature--reverse .split-feature__duo-anchor::after {
  left: auto;
  right: 5%;
}


/* Light feature (navy) cards, hover: a STATIC brand-gradient outline fades in
   (full conic wheel so all four edges light evenly, in the header's cyan→blue→
   violet→magenta palette), masked to the 1px padded edge so the card interior
   stays navy. Paired with a lifted shadow below. Idle = no border (opacity 0). */
.feature-grid--light .feature-grid__card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 220deg,
    #27D1FF, #4848FF, #CE11DF, #FF2CEB, #4848FF, #27D1FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.feature-grid--light .feature-grid__card:hover::before { opacity: 1; }
/* hover lift: deeper shadow + a small rise (Benn 2026-08-04) */
.feature-grid--light .feature-grid__card--gbox:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px rgba(2, 2, 53, 0.26), 0 6px 16px rgba(2, 2, 53, 0.16);
}

/* ── GUIDE (single-guide.php) — teaser + hard gate ──
   Border-free per canon: surfaces get an inset top highlight + ambient
   shadow, never a rim. Radii stay on the tokens (≤9px on inner pages).
   Below-hero sections here deliberately stay on flat navy (canon rule 3) —
   no per-section background changes, so nothing new to theme against.
   GATING MODEL v3 (client revision, pre-launch): guide-who, guide-outline,
   the open body and the gate band all share ONE measure (800px, matching
   .prose__inner — the guide body's own column) so the page reads as a
   single flowing column rather than a stack of independently-sized
   sections. Only the gate band's OUTER surface goes full-bleed; its
   content stays on the shared measure like everything else. */

/* WHO THIS GUIDE IS FOR — plain content, no box (canon rule 5). Horizontal
   inset comes from the nested .container alone (padding-inline:0 here) —
   the section itself stays full-bleed, same pattern as .guide-gate below.
   Without this, --section-pad's own horizontal component stacked with
   .container's, insetting the text ~20-40px further than guide-gate's
   content at any viewport where max-width:800 isn't already the binding
   constraint (below ~880px) — breaking the "one shared measure" goal. */
.guide-who { padding: var(--section-pad); padding-inline: 0; text-align: left; }
.guide-who__inner { max-width: 800px; }
.guide-who__text {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body-text);
  /* FIX 2026-08-10 (client: guide-who/guide-outline "should be left
     aligned, to line up with below content" — the shared 800px measure).
     Explicit now rather than relying on the block-level default. */
  text-align: left;
}

/* WHAT THIS GUIDE COVERS — unboxed outline rows, same spirit as the
   stat-tiles spec-row treatment: hairline dividers, no card chrome. */
.guide-outline { padding: var(--section-pad); padding-top: 0; padding-inline: 0; text-align: left; }
.guide-outline__inner { max-width: 800px; }
.guide-outline__header { margin-bottom: 8px; text-align: left; }
.guide-outline__heading {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
  /* FIX 2026-08-10 (client: guide-who/guide-outline "should be left
     aligned, to line up with below content"). Explicit now rather than
     relying on the block-level default. */
  text-align: left;
}
.guide-outline__rows { display: flex; flex-direction: column; margin-top: 24px; }
.guide-outline__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 4px;
  border-top: 1px solid var(--line-dark);
}
.guide-outline__row:last-child { border-bottom: 1px solid var(--line-dark); }
.guide-outline__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--cyan-light);
  flex-shrink: 0;
  width: 28px;
}
.guide-outline__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--white);
}
/* Gating model v2 — rows at/after guide_locked_from carry a thin-stroke
   lock glyph so the open/locked split is visible upfront, before the
   reader ever reaches the gate section itself. */
.guide-outline__row--locked .guide-outline__label { color: var(--subtle); }
.guide-outline__lock {
  width: 15px;
  height: 15px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--subtle);
}

/* OPEN general/definitional layer — same prose/blog-post shell the gated
   body used under the old all-or-nothing model (canon: unboxed running
   copy, no card chrome). Horizontal inset from the nested .container alone
   (padding-inline:0 here) — see the guide-who comment above for why. */
.guide-open { padding: var(--section-pad); padding-top: 0; padding-inline: 0; }

/* GATE BAND (v3, client revision) — full-width on-brand interstitial
   between the open teaser and the PDF download, replacing the old boxed
   panel. The band is the one deliberate full-bleed surface on this
   template (canon rule 3 is about content sections; this is UI chrome —
   same exemption class as .cta-section) — a wash + hairline top/bottom
   edge, no rim, no floating box. Its CONTENT stays on the shared 800px
   measure (see the file-header note above) so it still reads as part of
   the one flowing column, just with a wider stage behind it. */
.guide-gate {
  position: relative;
  width: 100%;
  padding: clamp(56px, 7vw, 88px) 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%), var(--navy-black);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.guide-gate__inner { max-width: 800px; text-align: center; }
.guide-gate__eyebrow { justify-content: center; }
.guide-gate__copy { margin-bottom: 28px; }
.guide-gate__heading {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-top: 14px;
  letter-spacing: -0.01em;
}
.guide-gate__sub {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 620px;
  margin-inline: auto;
}
/* Locked-items list — advertises what's in the PDF by heading, not just in
   the abstract. Unboxed rows again (canon rule 17: rows, not boxes). */
.guide-gate__locked-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 28px auto 0;
  padding: 18px 20px;
  max-width: 480px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.guide-gate__locked-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--body-text);
}
.guide-gate__locked-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--cyan-light);
}
/* ONE button in the band, on-brand claims-safe microcopy; the returning-
   visitor "download again" affordance swaps in via [hidden] toggling —
   never both states visible at once. */
.guide-gate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
/* .btn-primary/.btn-outline set `display: inline-flex` unconditionally —
   an author rule, which beats the UA stylesheet's default [hidden] {
   display: none } regardless of specificity (author always wins over UA
   origin). Both states are toggled via the [hidden] attribute in JS, so
   both need an explicit override or they'd show at once. */
.guide-gate__trigger[hidden],
.guide-gate__again[hidden] { display: none; }
.guide-gate__trigger[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.guide-gate__trigger[disabled]:hover { transform: none; }

/* MODAL — the form itself never sits inline in the page; it opens in an
   on-brand dialog (navy surface, scrim, focus trap — see js/guide-gate.js).
   Scroll happens on the fixed overlay, NOT inside the dialog: the dialog
   stays overflow:visible on purpose so the listbox panel (rule 19) is
   never re-clipped the way Hustle's own inline overflow:hidden clipped it
   inline (see the #guide-gate-form .hustle-layout-body fix above) — the
   same failure mode would reappear here if the dialog scrolled internally. */
.guide-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 8vh, 72px) 20px;
  overflow-y: auto;
}
.guide-modal[hidden] { display: none; }
.guide-modal__scrim {
  position: fixed;
  inset: 0;
  background: rgba(2, 2, 53, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.guide-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: auto 0;
  padding: clamp(32px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%), var(--navy-mid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.guide-modal.is-open .guide-modal__dialog { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .guide-modal__dialog { transition: none; transform: none; }
}
.guide-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--subtle);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.guide-modal__close:hover,
.guide-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}
.guide-modal__close svg { width: 16px; height: 16px; }
.guide-modal__header { text-align: center; margin-bottom: 28px; }
.guide-modal__eyebrow { justify-content: center; }
.guide-modal__title {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-top: 12px;
  letter-spacing: -0.01em;
}
.guide-modal__sub {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--body-text);
}
@media (max-width: 600px) {
  .guide-modal__dialog { max-width: 100%; }
}
/* Hustle's own module chrome (title/subtitle) is redundant with the copy
   above — module content is set with empty visual weight but still present
   in the DOM for entries/validation, so hide its duplicate heading only.
   NOTE ON SPECIFICITY: Hustle prints a per-module inline <style> block
   scoped to `.hustle-ui.module_id_<n> ...` compound selectors (its own
   Appearance/palette settings, editable in wp-admin) — 3-4 classes deep,
   which beats plain class selectors like `.guide-gate__form .hustle-input`
   every time regardless of source order. Every override below is anchored
   on `#guide-gate-form` (the wrapper's real id) instead of the class: one
   ID always outranks any number of classes, so this wins no matter what
   palette a future admin picks in Hustle's own UI, with zero !important. */
#guide-gate-form .hustle-group-title { display: none; }
#guide-gate-form .hustle-main-wrapper { padding: 0; }
#guide-gate-form .hustle-layout-body,
#guide-gate-form .hustle-layout-content,
#guide-gate-form .hustle-content,
#guide-gate-form .hustle-layout-form,
#guide-gate-form .hustle-form-options {
  background-color: transparent;
  padding: 0;
  margin: 0;
}
/* Hustle's own per-module inline <style> sets `overflow: hidden` on
   .hustle-layout-body, which clips the custom listbox panel (rule 19) —
   the panel is an absolutely-positioned child that extends below the
   field. This ID-anchored override already beats that inline block's
   class-only selector (one ID always outranks any number of classes), so
   restoring visibility here is enough; no !important needed. */
#guide-gate-form .hustle-layout-body { overflow: visible; }
#guide-gate-form .hustle-layout-form { width: 100%; }
#guide-gate-form .hustle-form-fields { display: flex; flex-direction: column; gap: 16px; margin: 0; }
#guide-gate-form .hustle-field { position: relative; flex: none; margin: 0; }
#guide-gate-form .hustle-input {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
}
#guide-gate-form .hustle-input:hover,
#guide-gate-form .hustle-input:focus {
  outline: none;
  border-color: var(--cyan);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.18);
}
#guide-gate-form .hustle-input-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#guide-gate-form .hustle-input-label [class*="hustle-icon-"] { display: none; }
#guide-gate-form .hustle-input:focus + .hustle-input-label,
#guide-gate-form .hustle-input:not([value=""]) + .hustle-input-label { opacity: 0; }
#guide-gate-form .hustle-button-submit {
  margin-top: 4px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--magenta);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  /* Match every other primary button site-wide (.btn, style.css ~199):
     uppercase + tracked. Hustle's label ships sentence-case; the site's
     button language is uppercase, so transform it in CSS rather than
     retitling the Hustle field (client: "button text capitalised"). */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: normal;
  padding: 14px 28px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#guide-gate-form .hustle-button-submit:hover,
#guide-gate-form .hustle-button-submit:focus {
  background-color: var(--magenta);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 44, 235, 0.3);
}
#guide-gate-form .hustle-error-message {
  margin-top: 10px;
  background-color: transparent;
  box-shadow: none;
  font-size: 0.82rem;
}
#guide-gate-form .hustle-error-message p { color: var(--cyan-light); }
/* The custom <select> overlay guide-gate.js inserts in place of Hustle's
   plain-text "segment" field — reuses the contact-panel select language
   (2026-08-07 sweep) so it reads identically to every other dropdown site-
   wide, just scoped locally since this markup lives outside contact-panel. */
.guide-gate__select-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guide-gate__select-label {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--subtle);
}
.guide-gate__select-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23FFFFFF' stroke-opacity='0.45' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 13px 44px 13px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
  width: 100%;
  color-scheme: dark;
}
.guide-gate__select-field select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2300A1E9' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.guide-gate__select-field select option { background-color: var(--navy-deep); color: var(--white); }
.guide-gate__select-field select:has(option[value=""]:checked) { color: var(--subtle); }

/* GATED BODY — v3: the professional layer is delivered as a PDF, not an
   on-page reveal. The <template id="guide-body-template"> single-guide.php
   still prints stays exactly that — inert, unrendered, never indexed —
   there's no visible target for js/guide-gate.js to clone it into any
   more, so no CSS is needed for it here (the old .guide-body-target rules
   are gone along with the markup they targeted). */

/* NEXT STEP CTA reuses .cta-section verbatim (single-case_study.php
   pattern) — no new rules needed there.

   RELATED GUIDES — rows-not-boxes (canon rule 17): link affordance is the
   magenta underline + title colour shift only, no lift/shadow/outline. */
.guide-related { padding: var(--section-pad); padding-top: 0; }
.guide-related__inner { max-width: 980px; }
.guide-related__header { margin-bottom: 8px; }
.guide-related__heading {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.guide-related__rows { display: flex; flex-direction: column; margin-top: 16px; }
.guide-related__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  border-top: 1px solid var(--line-dark);
  text-decoration: none;
  transition: padding 0.2s ease;
}
.guide-related__row:last-child { border-bottom: 1px solid var(--line-dark); }
.guide-related__row:hover { padding-left: 12px; }
.guide-related__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.guide-related__cat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-light);
}
.guide-related__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  transition: color 0.2s ease;
}
.guide-related__row:hover .guide-related__title { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.guide-related__arrow { width: 20px; height: 20px; color: var(--subtle); flex-shrink: 0; }

/* ABOUT FINXP strip — plain text band, single-sourced copy
   (inc/guides.php finxp_guide_about_strip_copy()), no box. */
.guide-about { padding: 48px 40px var(--section-pad); border-top: 1px solid var(--line-dark); }
.guide-about__inner { max-width: 900px; }
.guide-about__text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--subtle);
}

@media (max-width: 600px) {
  .guide-gate { padding: 44px 0; }
  .guide-modal__dialog { padding: 28px 22px; }
}

/* ─── 404 / PAGE NOT FOUND ───
   Reuses the .page-hero centred treatment; only the recovery-link list needs
   bespoke styling. (Benn 2026-08-24) */
.error-404 .page-hero__inner {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.error-404__links {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.error-404__links-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--subtle);
}
.error-404__links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.error-404__links-list a {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--body-text);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.error-404__links-list a:hover,
.error-404__links-list a:focus-visible {
  color: #fff;
  border-color: var(--cyan-light);
  background: rgba(39, 209, 255, 0.08);
}

/* ─── LARGE VIEWPORT SCALE-UP (≥1600px) ───
   --max-w now gives containers more room than the type/measurements below
   were tuned for. Most heading sizes are clamp() with rem caps, so bumping
   the root font-size here scales the whole type system coherently without
   touching a single clamp(). Everything else in this block is a targeted
   fix for a handful of components that hit a hard px cap and would
   otherwise leave visible dead space in the wider container. Nothing here
   should affect layout below 1600px. Placed at the end of the file (rather
   than beside the token block) so it wins the cascade against the
   unconditional base rules for the same selectors defined earlier on. */
@media (min-width: 1600px) {
  html { font-size: 118%; }
  :root { --section-pad: 112px 56px; }

  /* Hero: tablet dashboard image cap no longer binds against the wider
     1.3fr column — let it grow with the column instead of stopping short. */
  .hero__dash { width: min(940px, 100%); }

  /* Globe: scale up alongside the 940px dashboard cap so the crossfaded
     visual stays proportional at wide viewports. */
  #hero-globe-canvas { width: min(680px, 100%, 62vh); }

  /* Product cards: base rule pins width to 1400px regardless of viewport,
     which was tuned against the old 1440px container. Scale proportionally
     with the new 1680px container so the sticky rail fills it. Width/margin
     only — do not touch top/height/position (sticky travel range) or the
     .solutions-stack__gap spacing system. */
  .solutions-card { width: min(1600px, calc(100% - 64px)); }

  /* Journey accordion: fixed min-height read squat once the flex rails
     had more horizontal room to spread into. */
  .journey-cards__track { min-height: 530px; }

  /* Split feature: 1.05fr/1fr column pair has no upper cap, so it stretches
     to the full 1680px container and the copy column reads too wide.
     --no-visual variant already caps at 860px via a more specific selector
     (two classes beats one), so it keeps winning and is untouched here.
     UPDATED 2026-08-07 (Benn: every split-feature with a visual column
     should read full width, not just the one directly under the hero) —
     the cap now only applies to the no-visual editorial reading variant;
     every visual variant (stat/image/stack/diagram) fills the container
     the way the post-hero adjacency rules used to grant selectively. */
  .split-feature:not(.split-feature--no-visual) .split-feature__inner { max-width: var(--max-w); }
  /* Body measure follows the band-width shells (Benn 2026-08-07: "some
     __bodys need the increased width to suit"): with every split now
     filling the band, the grid columns themselves are the measure
     (~700-780px ≈ 70-75ch) — a tighter ch cap inside them left the wider
     copy columns half-empty (cross-border-payments). Columns govern. */
  .split-feature__body { max-width: none; }

  /* EXTENDED 2026-08-05 (Benn: "payment gateway section below the hero isn't
     full width, check for other strays"). payment-gateway's hero is followed
     by the trust-bar block (rendered class .trust-marquee — a full-bleed
     marquee, no width cap of its own, already compliant) THEN .split-feature.
     split-feature's width AND body measure are both unconditional now
     (2026-08-07, columns govern the measure — see above), so the two old
     adjacency-scoped 68ch body relaxations are gone. Repeat the
     inner-container-only pattern (never the text measure) for every other
     block type a 31-spec sweep found sitting directly below the hero
     somewhere sitewide:
       pinned-features → platforms-marketplaces (direct)
       steps           → open-account (direct), cross-border-payments (via trust-marquee)
       stat-tiles      → about-us (direct)
       post-grid       → blog (direct)
       prose           → cancel-sepa-debit-payments (direct), bin-sponsorship (via trust-marquee)
     Deliberately NOT touched: contact-panel (excluded by design — stays
     centred like solution-finder); solution-finder and feature-grid's
     `rail` variant (help.json) already have no ≥1600 tier cap to override —
     both fill the container as-is, so there is nothing to fix.
     tabbed-features (networks: direct page-hero adjacency) picked back up
     2026-08-05 — the earlier file-fence exclusion no longer applies; it
     follows the same *separate*-.container pattern as pinned-features/
     steps/stat-tiles/post-grid below, so it gets the `none` treatment. */

  /* pinned-features/steps/stat-tiles/post-grid each wrap their grid in a
     *separate* .container div (unlike split-feature/prose, where .container
     lands on the same element as the __inner) — the grid is a plain child of
     that container, so it can never physically exceed the container's own
     1600px content-box (1680 max-width minus its 40px×2 gutter) no matter
     what max-width is asserted here. `none` says that honestly: drop the
     tighter 1340/1240/1200px tier cap and let the grid fill all the room its
     container actually has, rather than implying a literal 1680px that the
     parent would clip anyway. */
  /* pinned-features and tabbed-features were previously only granted
     `none` when directly post-hero (platforms-marketplaces and networks
     were literally the only pages that qualified) — client asked for the
     full-width treatment universally, so it's promoted into the general
     rules below (search `.pinned-features__grid` / `.tabbed-features__grid`
     under PRIMARY band). This section-scoped adjacency grant is gone. */
  .page-hero + .steps .steps__track,
  .page-hero + .trust-marquee + .steps .steps__track { max-width: none; }

  .page-hero + .stat-tiles .stat-tiles__grid { max-width: none; }

  .page-hero + .post-grid .post-grid__grid { max-width: none; }

  /* prose keeps its two-column reading measure guarded even though the
     section band widens — .prose__content/.prose__note get the standard
     1240px reading-tier cap explicitly re-applied since the wider
     .prose__inner would otherwise stretch the columns past a sane measure. */
  .page-hero + .prose .prose__inner,
  .page-hero + .trust-marquee + .prose .prose__inner { max-width: var(--max-w); }
  /* Content and notes share the band's LEFT edge with the eyebrow/heading
     (Benn 2026-08-07 — auto-centering left the first paragraph and notes
     indented relative to the heading); 1240 stays as a line-length cap. */
  .page-hero + .prose .prose__content,
  .page-hero + .trust-marquee + .prose .prose__content,
  .page-hero + .prose .prose__note,
  .page-hero + .trust-marquee + .prose .prose__note { max-width: 1240px; }

  /* Page hero (side visual): 1.1fr/1fr pair, same uncapped-stretch issue. */
  .page-hero--visual-side .page-hero__inner { max-width: 1240px; margin-inline: auto; }

  /* Tabbed features (2026-08-10, client: "tabbed-features__grid also full
     width" — universal, was platforms-marketplaces/networks-only via
     post-hero adjacency). EASY REVERT: swap `none` back to
     `1240px; margin-inline: auto;` to restore the PRIMARY-band cap. */
  .tabbed-features__grid { max-width: none; }

  /* Pinned features (2026-08-10, client: "pinned-features__grid should be
     fullwidth universally" — was platforms-marketplaces-only via post-hero
     adjacency; both grids sit in their own child .container so `none` can
     never exceed that container's real 1600px content-box). */
  .pinned-features__grid { max-width: none; }

  /* Contact panel: route tiles (4-up) and the form card both had no
     upper cap and spread edge-to-edge of the wider container. Form matches
     the route grid's width (Benn 2026-08-06: "same width as the route grid"). */
  .contact-panel__routes { max-width: 1160px; margin-inline: auto; }
  .contact-panel__form { max-width: 1160px; margin-inline: auto; }
  /* Keep the selection summary bar aligned to the same capped width as the
     routes + form (it otherwise spans the full 1553px container at >=1600). */
  .contact-panel__selection { max-width: 1160px; margin-inline: auto; }

  /* Steps: column-flow track has no upper cap on the row width. */
  .steps__track { max-width: 1200px; margin-inline: auto; }

  /* ── INNER-PAGE WIDTH SYSTEM ──
     One page was running 940/1000/1240/1521/1601/980/880 sections down a
     single scroll — no rhythm. At ≥1600 every inner block now lands on
     one of three deliberate tiers:
       FEATURE band 1340px — card rows (3-up grids, stat tile rows)
       PRIMARY band 1240px — structural 2-col sections (splits, tabs,
                             pinned, comparison*, feature pairs)
       READING tier <=1140px, centred — long-form / row-list blocks
     Full-bleed marquees (logo/trust) and the shared homepage blocks
     (testimonial) stay at container width by design.
     *comparison caps inside its own per-block comparison.css, which
      enqueues after this file and would beat an override here. */

  /* FEATURE band: 3-up card grids were uncapped repeat(3,1fr); the
     4/5-tile stat rows self-capped per-tile but summed past 1500px and
     read as width outliers between 1240px sections. */
  .quote-cards__grid,
  .post-grid__grid,
  .feature-grid__grid--3,
  .stat-tiles__grid--3,
  .stat-tiles__grid--4,
  .stat-tiles__grid--5 { max-width: 1340px; margin-inline: auto; }

  /* PRIMARY band additions (splits/tabs/pinned/steps capped above). */
  .feature-grid__grid--2 { max-width: 1240px; }
  .stat-tiles__grid--2 { max-width: 1100px; }

  /* Pinned features: the 460px item cap left a skinny text rail inside
     its wider ≥1600 column — relax toward the column width. */
  .pinned-features__item-text { max-width: 560px; }

  /* READING blocks: narrow centred columns read as unfinished design on
     the wide canvas (Benn). Instead of inflating line length, each block
     fills the FULL 1240 band with designed structure and guards its text
     measure internally:
     - faq / job-list: the row furniture (borders, toggles) spans the
       band; answer copy is measure-capped inside.
     - prose: magazine two-column body — band-width section, ~60ch
       columns.
     - no-visual split: rendered as a full-band glass panel (the
       comparison-table language) with copy at measure inside. */
  .faq__inner { max-width: 1240px; margin-inline: auto; }
  .faq__a-inner { max-width: 75ch; }
  .job-list__inner { max-width: 1240px; margin-inline: auto; }

  .prose__inner { max-width: 1240px; margin-inline: auto; }
  .prose__content:not(.prose__content--lead) { columns: 2; column-gap: 64px; }
  .prose__content:not(.prose__content--lead) > * { break-inside: avoid; }
  /* Keep a heading attached to the block that follows it, so it never orphans
     at the foot of one column while its paragraph starts the next (Benn
     2026-08-24). break-inside above only protects a single element from
     splitting; break-after glues the heading to its body across the break. */
  .prose__content:not(.prose__content--lead) > :is(h2, h3, h4) { break-after: avoid; }
  .prose__note { max-width: none; }
  /* Structured sections: the same magazine two-column flow as the legacy
     blob above, but the column unit is the whole section — heading+body
     can't split across columns, so with one uniform section margin the
     headings land on an even rhythm in both columns (the client's fix). */
  .prose__sections { columns: 2; column-gap: 64px; }
  .prose__section { break-inside: avoid; }

  /* ALL splits fill the band at >=1600 (Benn 2026-08-07 — sticky/no-visual
     splits included, not just visual variants): the editorial grid's own
     columns keep the text measure, so the band-width shell costs nothing. */
  .split-feature--no-visual .split-feature__inner {
    max-width: var(--max-w);
    margin-inline: auto;
  }
  /* Editorial two-column: heading block left, running copy right —
     fills the band without stretching the measure. Uses the __head /
     __flow wrappers in render.php (inert for visual variants). The
     heading column is sticky so it tracks the reader down the longer
     right-hand copy (72px header + breathing room). */
  .split-feature--no-visual .split-feature__copy {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 88px;
    align-items: start;
  }
  .split-feature--no-visual .split-feature__head {
    position: sticky;
    top: 108px;
  }
  .split-feature--no-visual .split-feature__heading { margin-bottom: 0; }
}