/* ==========================================================================
   Expereon 2026 design layer
   --------------------------------------------------------------------------
   Loaded after the Webflow stylesheets on every page (scripts/postprocess.mjs
   injects the <link>), so it survives a Webflow re-export. It restyles the
   existing Webflow markup; it does not change content.

   Source of the design language:
   - 2026 company presentation (Oct): dark teal canvas, rounded cards, jade
     glow gradients, light serif display type, mono uppercase eyebrows.
   - expereon-fe (packages/tokens): palette (cyan-14 canvas, jade accents,
     jade-5 primary action), radii, hairlines, "ledger" rules: one accent per
     view, elevation by luminance not shadow.

   Fonts (self-hosted in /fonts):
   - Satoshi (body; brand sans used by the app, docs and deck)
   - Newsreader (display serif; the app's display face), Google Fonts' files: Light 300,
     +0.03em letter-spacing (see --x-serif-tracking), optical sizing auto
   - Fragment Mono (labels; closest open match to the deck's mono)

   Inline <style> blocks in the pages come after this file, so selectors that
   must beat them are prefixed with :root for extra specificity.
   ========================================================================== */

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Newsreader v1.003 (normal, latin-ext), from Google Fonts: wght 200-800, opsz 6-72 */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader v1.003 (normal, latin), from Google Fonts: wght 200-800, opsz 6-72 */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader v1.003 (italic, latin-ext), from Google Fonts: wght 200-800, opsz 6-72 */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader v1.003 (italic, latin), from Google Fonts: wght 200-800, opsz 6-72 */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fragment Mono';
  src: url('/fonts/FragmentMono-Regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* surfaces */
  --x-canvas: #00191d;
  --x-canvas-rgb: 0, 25, 29;
  --x-canvas-raised: #021d22;
  --x-card: #0c2227;
  --x-card-hover: #0f282d;
  --x-panel: #0a2a33;
  --x-panel-rgb: 10, 42, 51;
  --x-panel-deep: #082229;

  /* white tints for fills on the dark canvas (controls, rows, tracks) */
  --x-tint-1: rgba(255, 255, 255, 0.025);
  --x-tint-2: rgba(255, 255, 255, 0.04);
  --x-tint-3: rgba(255, 255, 255, 0.06);
  --x-tint-4: rgba(255, 255, 255, 0.1);
  --x-tint-5: rgba(255, 255, 255, 0.12);
  --x-popover: #0d272c;

  /* ink (contrast on --x-canvas: ink 19:1, ink-2 10:1, ink-3 5.8:1, ink-4 4:1) */
  --x-ink: #fbfcfd;
  --x-ink-2: rgba(251, 252, 253, 0.74);
  --x-ink-3: rgba(251, 252, 253, 0.54);
  /* ink-4 is for display text (24px and up) only; smaller text needs ink-3 or stronger. */
  --x-ink-4: rgba(251, 252, 253, 0.42);

  /* status */
  --x-danger: #fdbdbe;
  --x-danger-rgb: 253, 189, 190;

  /* accent */
  --x-jade: #8eceaa;
  --x-jade-rgb: 142, 206, 170;
  --x-mint: #c3e9d7;
  --x-mint-rgb: 195, 233, 215;
  --x-mint-hi: #dcf3e8;
  --x-on-mint: #0d3c48;
  --x-glow-rgb: 77, 132, 114;

  /* lines */
  --x-line: rgba(255, 255, 255, 0.075);
  --x-line-2: rgba(255, 255, 255, 0.13);
  --x-line-3: rgba(255, 255, 255, 0.2);
  --x-line-jade: rgba(var(--x-jade-rgb), 0.28);

  /* header: translucent glass over the page (full-width bar), tinted with
     the page background so it matches the body once scrolled. */
  --x-nav-rgb: var(--x-canvas-rgb);
  --x-nav-alpha: 0.32;
  --x-nav-alpha-scrolled: 0.68;
  --x-nav-line: var(--x-line);
  --x-nav-sheet: var(--x-canvas-raised); /* mobile menu sheet: opaque so links stay readable */

  /* radii */
  --x-r-xs: 8px;
  --x-r-sm: 12px;
  --x-r: 20px;
  --x-r-lg: 28px;
  --x-r-pill: 999px;

  /* type */
  --x-sans: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --x-serif: 'Newsreader', 'Lyontext', Georgia, 'Times New Roman', serif;
  --x-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Newsreader Light. At heading sizes optical sizing picks the Display design (opsz 72),
     whose fitting is tight and uneven on screen, and Light is fitted tighter than Regular.
     Untracked Light had "tu", "ru", "tr" ~0.017em apart against a ~0.08em median, which read
     as broken spacing. +0.03em gives the tightest pairs 0.045em and evens the rhythm
     (measured tightest/median 0.40 at +0.01em -> 0.54 at +0.03em). */
  --x-serif-weight: 300;
  --x-serif-tracking: 0.03em;
  /* Newsreader's space is ~0.23em (+0.03em tracking); this keeps word gaps near 0.27em,
     in line with the Satoshi body text. */
  --x-serif-word: 0.01em;

  /* gradients */
  --x-grad-panel:
    radial-gradient(ellipse 62% 85% at 0% 0%, rgba(var(--x-glow-rgb), 0.78) 0%, rgba(var(--x-glow-rgb), 0.28) 38%, rgba(var(--x-glow-rgb), 0) 72%),
    linear-gradient(160deg, #0f3239 0%, #0a2a33 55%, #092630 100%);
  --x-grad-highlight:
    radial-gradient(ellipse 80% 55% at 22% 0%, rgba(var(--x-glow-rgb), 0.7) 0%, rgba(var(--x-glow-rgb), 0.18) 45%, rgba(var(--x-glow-rgb), 0) 75%),
    linear-gradient(180deg, #0c2e36 0%, #0a2a33 100%);
  --x-grad-card:
    linear-gradient(180deg, var(--x-tint-1) 0%, rgba(255, 255, 255, 0) 9rem),
    var(--x-card);
  --x-grad-action: linear-gradient(180deg, var(--x-mint-hi) 0%, var(--x-mint) 70%);
  --x-action-edge: rgba(255, 255, 255, 0.35);
  --x-action-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.55);

  --x-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --x-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --x-gutter: clamp(16px, 4vw, 40px);

  /* Vertical rhythm inside a section, by relationship rather than by value:
     block   - between the distinct groups of a section (heading, panel, table, ...)
     sub     - a subheading or control row to the content it introduces
     pair    - a closing statement to its own action
     note    - a footnote or caption to the thing it annotates */
  --x-space-block: clamp(40px, 5vw, 64px);
  --x-space-sub: clamp(24px, 2.5vw, 32px);
  --x-space-pair: 24px;
  --x-space-note: clamp(14px, 1.5vw, 20px);
  --x-section: clamp(80px, 9vw, 128px);

  /* Webflow variables re-pointed to the dark palette */
  --dark-grey: var(--x-canvas);
  --font-primary: var(--x-sans);
  --text-dark-muted: var(--x-ink-3);
  --text-light-muted: var(--x-ink-2);
  --slate-8: var(--x-ink-3);
}

/* ---------- Base --------------------------------------------------------- */

html {
  background-color: var(--x-canvas);
  scroll-padding-top: 96px;
  /* Native controls, select menus and scrollbars render dark to match the canvas. */
  color-scheme: dark;
  scrollbar-color: var(--x-line-3) var(--x-canvas);
}

input,
textarea {
  caret-color: var(--x-jade);
}

.body {
  background-color: var(--x-canvas);
  color: var(--x-ink);
  font-family: var(--x-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* No one-word last lines in copy ("business.", "scale."); headings balance (below). */
  text-wrap: pretty;
}

::selection {
  background: rgba(var(--x-jade-rgb), 0.35);
  color: var(--x-ink);
}

:focus-visible {
  outline: 2px solid var(--x-jade);
  outline-offset: 3px;
}

.container,
.w-layout-blockcontainer.container {
  max-width: 1200px;
  padding-left: var(--x-gutter);
  padding-right: var(--x-gutter);
  box-sizing: border-box;
}

.container-md,
.w-layout-blockcontainer.container-md {
  max-width: 880px;
  padding-left: var(--x-gutter);
  padding-right: var(--x-gutter);
}

.container-3,
.container-md-copy-copy {
  max-width: 1200px;
  padding-left: var(--x-gutter);
  padding-right: var(--x-gutter);
}

/* Every section sits on the dark canvas, as in the deck. */
.section,
.section.section-dark,
.section.section-light,
.section-2,
.section-calculator,
.section-calculator.section-dark {
  background-color: transparent;
  color: var(--x-ink);
  padding-top: var(--x-section);
  padding-bottom: var(--x-section);
}

.section.section-dark.section-top-padding-0,
.section.section-dark.secttion-top-padding-0 {
  padding-top: 0;
}

.section {
  position: relative;
  isolation: isolate;
}

/* ---------- Type --------------------------------------------------------- */

/* :not(#x) adds ID-level specificity, so the family/weight here beat Webflow's
   compound selectors such as .heading-h2.heading-light.text-center. */
:is(.heading-h1, .heading-h1-md, .heading-h2, .heading-h3, .heading-2, .heading-calculator,
    .cta-heading-h2, .legal-h1, .legal-h2, .text-intro, .text-block-11, .form-heading-title,
    .benefit-number, .cta-banner-number, .cta-banner-heading, .footer-company-title,
    .mode-item-title, .mode-item-dark-title, .mode-item-stat-dark-title,
    .x-step-num, .x-note-title):not(#x) {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  text-transform: none;
  /* The longhand: the text-wrap shorthand also resets the wrap mode, which overrode
     white-space: nowrap on the stat numbers ("20-40 bps" broke onto two lines). */
  text-wrap-style: balance;
}

.heading-h1,
.heading-h1-md,
.heading-h2,
.heading-h3,
.heading-2,
.heading-calculator,
.cta-heading-h2,
.legal-h1,
.text-intro,
.text-block-11 {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-optical-sizing: auto;
  letter-spacing: var(--x-serif-tracking);
  text-transform: none;
  color: var(--x-ink);
}

.heading-h1:not(#x) {
  font-size: clamp(3rem, 1.6rem + 5.2vw, 6rem);
  line-height: 1.02;
  letter-spacing: var(--x-serif-tracking);
}

.heading-h1-md:not(#x),
.heading-calculator:not(#x) {
  font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: var(--x-serif-tracking);
}

.heading-h2:not(#x) {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  line-height: 1.04;
}

.heading-h2.heading-h2-xl:not(#x) {
  font-size: clamp(2.75rem, 1.6rem + 4vw, 5.5rem);
  line-height: 1.04;
}

.heading-h2.heading-light.text-centered,
.heading-h2.heading-light {
  color: var(--x-ink);
}

.heading-h3,
.heading-2,
.cta-banner-heading,
.footer-company-title {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.text-dark-muted {
  color: var(--x-ink-3);
}

/* The muted second line of display headings; ink-4 is for display sizes only. */
.heading-h2 .text-dark-muted,
.heading-h2 .text-light-muted {
  color: var(--x-ink-4);
}

.text-light-muted { color: var(--x-ink-2); }
.text-white { color: var(--x-ink); }
.text-primary,
.text-green { color: var(--x-jade); }

.heading-text,
.heading-text.text-centered,
.heading-text.text-white.text-centered,
.hero-text {
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--x-ink-2);
}

/* Eyebrows: mono, uppercase, jade (deck: "THE PROBLEM", "CAPABILITIES"). */
.pre-title,
.pre-title.text-centered,
.pre-title.text-light-muted,
.pre-title.text-centered.text-light-muted,
.pre-title-copy {
  font-family: var(--x-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-jade);
}

/* Statement lines: emphasis from size, not colour effects. */
.text-intro,
.text-block-11,
.text-intro.text-intro-muted {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 3rem);
  line-height: 1.12;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.text-intro.text-intro-muted {
  color: var(--x-ink-2);
}

/* Section headings: the deck's split layout (title left, copy right). */
.content > .heading,
.container-md-content > .heading,
.content > .heading.heading-centered {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 18px;
  align-items: end;
  align-self: stretch;
  justify-content: stretch;
  width: 100%;
  max-width: none;
  text-transform: none;
}

.content > .heading > *,
.container-md-content > .heading > * {
  grid-column: 1;
  text-align: left;
  max-width: 16ch;
}

.content > .heading > .pre-title,
.container-md-content > .heading > .pre-title,
.content > .heading > .btn,
.content > .heading > .cta-wrapper {
  max-width: none;
}

.content > .heading > .btn {
  justify-self: start;
  white-space: nowrap;
}

.content > .heading > .cta-wrapper.cta-wrapper-centered {
  justify-content: flex-start;
  padding-top: 8px;
}

.content > .heading > .heading-h2 {
  max-width: 15ch;
}

.content > .heading > .heading-text,
.container-md-content > .heading > .heading-text {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 34rem;
  padding-bottom: 0.4em;
}

.content > .heading:not(:has(.heading-text)) > .heading-h2 {
  max-width: 20ch;
}

.content {
  grid-row-gap: var(--x-space-block);
}

/* Rhythm. .content spaces every child by --x-space-block, so footnotes floated as far from
   their panel as from the next group, and supporting copy read as a group of its own.
   Pull the dependent pieces in to their role's interval. */
.content > .footnote-wrapper {
  margin-top: calc(var(--x-space-note) - var(--x-space-block));
}

/* The virtual-card stats band summarises the three modes above it. */
.content > .mode-items-one-row + .mode-items-stats {
  margin-top: calc(var(--x-space-sub) - var(--x-space-block));
}

/* ---------- Buttons ------------------------------------------------------ */

.btn,
.w-button.btn {
  border-radius: var(--x-r-pill);
  padding: 14px 24px;
  font-family: var(--x-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  gap: 8px;
  background-color: var(--x-tint-3);
  color: var(--x-ink);
  border: 1px solid var(--x-line-2);
  box-shadow: var(--x-highlight);
  transition: background-color 0.3s var(--x-ease), border-color 0.3s var(--x-ease), box-shadow 0.3s var(--x-ease), transform 0.3s var(--x-ease), color 0.3s var(--x-ease);
}

/* Frosting only where a translucent button sits over a photo or video. */
:is(.section-hero, .section-hero-calculator) .btn {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn:hover,
.btn.btn-secondary:hover,
.btn.btn-secondary._w-100:hover,
.btn.btn-secondary.btn-min-width:hover {
  background-color: var(--x-tint-5);
  border-color: var(--x-line-3);
  color: var(--x-ink);
  transform: translateY(-1px);
}

.btn.btn-secondary,
.btn.btn-secondary._w-100 {
  background-color: var(--x-tint-3);
  color: var(--x-ink);
}

.btn.btn-primary,
.btn.btn-primary._w-100,
.btn.btn-primary.btn-min-width {
  background-color: var(--x-mint);
  background-image: var(--x-grad-action);
  color: var(--x-on-mint);
  border-color: var(--x-action-edge);
  box-shadow: var(--x-action-sheen), 0 8px 24px -12px rgba(var(--x-jade-rgb), 0.55);
}

.btn.btn-primary:hover,
.btn.btn-primary._w-100:hover,
.btn.btn-primary.btn-min-width:hover {
  background-color: var(--x-mint-hi);
  color: var(--x-on-mint);
  box-shadow: var(--x-action-sheen), 0 14px 32px -12px rgba(var(--x-jade-rgb), 0.7);
  transform: translateY(-1px);
}

.btn.btn-min-width,
.btn.btn-primary.btn-min-width,
.btn.btn-secondary.btn-min-width {
  width: auto;
  min-width: 0;
  padding: 16px 28px;
}

/* ---------- Header ------------------------------------------------------- */
/* Full-width glass bar: the translucent blue surface is on .header-wrapper
   (the Webflow .w-nav), so the mobile dropdown attaches flush below it. */

:root .header,
:root .header.header-scrolling,
:root .header.is-active {
  top: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-sizing: border-box;
}

.header .header-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background-color: rgba(var(--x-nav-rgb), var(--x-nav-alpha));
  border: 0;
  border-bottom: 1px solid var(--x-nav-line);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: none;
  transition: background-color 0.35s var(--x-ease), border-color 0.35s var(--x-ease), box-shadow 0.35s var(--x-ease);
}

:root .header.header-scrolling .header-wrapper,
:root .header.is-active .header-wrapper {
  background-color: rgba(var(--x-nav-rgb), var(--x-nav-alpha-scrolled));
  border-bottom-color: var(--x-nav-line);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55);
}

.header .container {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: var(--x-gutter);
  padding-right: var(--x-gutter);
}

.header .navbar-wrapper {
  padding: 12px 0;
  gap: 16px;
}

.navbar-logo {
  height: 28px;
}

.navbar-nav {
  gap: 2px;
  align-items: center;
}

.navbar-nav .nav-item {
  display: flex;
}

.navbar-nav .nav-item.hide-all,
.section.hide-all {
  display: none;
}

.nav-link,
.nav-link.w--current,
.nav-link.w-nav-link {
  color: var(--x-ink-2);
  font-family: var(--x-sans);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 9px 14px;
  border-radius: var(--x-r-pill);
  transition: color 0.25s var(--x-ease), background-color 0.25s var(--x-ease);
}

.nav-link:hover {
  opacity: 1;
  color: var(--x-ink);
  background-color: var(--x-tint-3);
}

.nav-link.w--current {
  color: var(--x-ink);
}

.nav-item-cta {
  border-radius: var(--x-r-pill);
  padding: 11px 16px 11px 20px;
  gap: 8px;
  background-color: var(--x-mint);
  background-image: var(--x-grad-action);
  box-shadow: var(--x-action-sheen), 0 6px 18px -10px rgba(var(--x-jade-rgb), 0.6);
  transition: box-shadow 0.3s var(--x-ease), transform 0.3s var(--x-ease), background-color 0.3s var(--x-ease);
}

.nav-item-cta .btn-text {
  color: var(--x-on-mint);
  font-size: 14.5px;
  font-weight: 500;
}

.nav-item-cta .btn-icon {
  color: var(--x-on-mint);
  width: 18px;
  height: 18px;
}

:root .header .nav-item-cta:hover {
  background-color: var(--x-mint-hi);
  box-shadow: var(--x-action-sheen), 0 10px 26px -10px rgba(var(--x-jade-rgb), 0.75);
  transform: translateY(-1px);
}

:root .header .nav-item-cta:hover .btn-text,
:root .header .nav-item-cta:hover .btn-icon {
  color: var(--x-on-mint);
}

/* Burger: a 44px pill with an 18x14 icon centred by flex. The open state (an X) is
   drawn from Webflow's own .w--open class, which it toggles on every open/close path
   (tap, Enter/Space, a nav-link tap, resize): the Webflow IX2 click animation on the
   icon was bound to the 20px icon wrapper rather than the button, so a tap on the rest
   of the button opened the menu without changing the icon, and the two states drifted
   apart. postprocess.mjs strips its data-w-id hooks so IX2 no longer writes inline
   transforms here. The 2px lines sit on integer offsets (0/6/12 in a 14px box, 15px
   from the pill's edge) so they stay crisp at every device pixel ratio. */
@media screen and (max-width: 991px) {
  :root .header .menu-button.w-nav-button {
    display: flex;
  }
}

.menu-button.w-nav-button,
.menu-button.w-nav-button.w--open {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  border-radius: var(--x-r-pill);
  background-color: var(--x-tint-3);
  border: 1px solid var(--x-line-2);
  color: var(--x-ink);
  transition: background-color 0.25s var(--x-ease), border-color 0.25s var(--x-ease);
}

.menu-button.w-nav-button:hover {
  background-color: var(--x-tint-4);
}

.menu-button.w-nav-button.w--open {
  background-color: var(--x-tint-5);
  border-color: var(--x-line-3);
}

.menu-button.w-nav-button:focus-visible {
  outline: 2px solid var(--x-mint);
  outline-offset: 2px;
}

.burger-btn-wrapper-4 {
  box-sizing: content-box;
  position: relative;
  width: 18px;
  height: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  transform: none;
  flex: 0 0 auto;
}

.burger-line-4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 2px;
  margin: 0;
  border-radius: 1px;
  background-color: currentColor;
  transform-origin: 50% 50%;
  transition: transform 0.3s var(--x-ease), opacity 0.2s var(--x-ease);
}

.burger-line-4:nth-child(2) {
  top: 6px;
}

.burger-line-4:nth-child(3) {
  top: 12px;
}

.menu-button.w--open .burger-line-4:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-button.w--open .burger-line-4:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.menu-button.w--open .burger-line-4:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-button.w-nav-button,
  .burger-line-4 {
    transition: none;
  }
}

/* Mobile dropdown (Webflow moves .navbar-nav into .w-nav-overlay): a
   full-width sheet flush under the bar, same blue glass, square corners. */
.header .w-nav-overlay {
  top: 100%;
  border-radius: 0;
  overflow: hidden;
}

.header .w-nav-overlay .navbar-nav,
.header .w-nav-overlay [data-nav-menu-open] {
  background-color: var(--x-nav-sheet);
  background-image: none;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0;
  border-bottom: 1px solid var(--x-nav-line);
  border-radius: 0;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  padding: 10px var(--x-gutter) 14px;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.header .w-nav-overlay .nav-item {
  flex-direction: column;
}

.header .w-nav-overlay .nav-link {
  display: block;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  padding: 14px 16px;
  font-size: 17px;
  border-radius: var(--x-r-sm);
}

/* ---------- Cards & panels (shared vocabulary) ---------------------------- */

.x-card,
.mode-item-default,
.mode-item-dark {
  border-radius: var(--x-r);
}

/* ---------- Footer ------------------------------------------------------- */

.footer {
  background: transparent;
  padding: 0 12px 12px;
}

.footer > .container {
  max-width: none;
  padding: 0;
}

.footer > .container,
.footer > .w-layout-blockcontainer {
  position: relative;
  overflow: hidden;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  background:
    radial-gradient(ellipse 50% 70% at 0% 0%, rgba(var(--x-glow-rgb), 0.45) 0%, rgba(var(--x-glow-rgb), 0) 70%),
    linear-gradient(180deg, #0a262d 0%, #071f25 100%);
  box-shadow: var(--x-highlight);
  padding: 0 clamp(20px, 5vw, 64px);
}

.footer-top {
  position: relative;
  z-index: 1;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.footer-company-title {
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.08;
}

.footer-links-heading-h5,
.footer-links-heading-h5.text-primary {
  font-family: var(--x-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--x-jade);
}

.navbar-nav-footer {
  gap: 12px;
}

.navbar-nav-footer-nav-link,
.navbar-nav-footer-nav-link.w--current {
  /* Webflow pads these 8px on phones, which set them in from their column headings. */
  padding-left: 0;
  padding-right: 0;
  color: var(--x-ink-2);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.25s var(--x-ease);
}

.navbar-nav-footer-nav-link:hover {
  opacity: 1;
  color: var(--x-ink);
}

.navbar-nav-social {
  gap: 10px;
  justify-content: flex-start;
}

.navbar-nav-social-link {
  display: flex;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--x-r-pill);
  border: 1px solid var(--x-line-2);
  background-color: var(--x-tint-2);
  color: var(--x-ink-2);
  transition: background-color 0.25s var(--x-ease), border-color 0.25s var(--x-ease);
}

.navbar-nav-social-link:hover {
  opacity: 1;
  background-color: var(--x-tint-4);
  border-color: var(--x-line-3);
}

.navbar-nav-social-icon {
  width: 18px;
  height: 18px;
  color: var(--x-ink-2);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--x-line);
}

.footer-copyright {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.footer-copyright-text.footer-disclaimer {
  max-width: 72ch;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}

.footer-copyright-text {
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--x-ink-3);
}

.footer-logo {
  position: relative;
  z-index: 0;
  display: block;
  opacity: 0.07;
  margin-bottom: -2.2%;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
}

/* ==========================================================================
   Home
   ========================================================================== */

/* Hero: framed photo, as on the deck cover. */
.section-hero.section-no-zoom {
  box-sizing: border-box;
  margin: 12px 12px 0;
  height: calc(100svh - 12px);
  min-height: 720px;
  max-height: 1100px;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  isolation: isolate;
  background-color: var(--x-panel-deep);
}

.section-hero .image-13 {
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(0.82) contrast(1.04);
}

.section-hero .bg-linear-gradient {
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(var(--x-canvas-rgb), 0.88) 0%, rgba(var(--x-canvas-rgb), 0.55) 38%, rgba(var(--x-canvas-rgb), 0.12) 72%, rgba(var(--x-canvas-rgb), 0.25) 100%),
    linear-gradient(180deg, rgba(var(--x-panel-rgb), 0.35), rgba(var(--x-panel-rgb), 0.35));
}

.section-hero .linear-gradient-top {
  z-index: -1;
  height: 30%;
  background-image: linear-gradient(180deg, rgba(var(--x-canvas-rgb), 0.7), rgba(var(--x-canvas-rgb), 0));
}

.section-hero .linear-gradient-bottom {
  z-index: -1;
  height: 62%;
  background-image: linear-gradient(180deg, rgba(var(--x-canvas-rgb), 0), rgba(var(--x-canvas-rgb), 0.6) 45%, rgba(var(--x-canvas-rgb), 0.94) 100%);
}

.section-hero .section-hero-content-copy {
  align-items: flex-end;
  padding-bottom: clamp(64px, 10vh, 112px);
  box-sizing: border-box;
}

.section-hero .hero-home--content {
  justify-content: flex-start;
  width: 100%;
}

.section-hero .hero-homepage-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 28px;
  align-items: end;
  width: 100%;
  padding-right: 0;
}

.section-hero .div-block-36 {
  display: contents;
}

.section-hero .heading-h1 {
  grid-column: 1;
  grid-row: 1 / span 2;
  max-width: 11ch;
  margin: 0;
  text-align: left;
}

.section-hero .hero-text {
  grid-column: 2;
  grid-row: 1;
  max-width: 26rem;
  margin: 0;
  text-align: left;
  font-size: 17px;
  color: var(--x-ink-2);
}

.section-hero .hero-cta {
  grid-column: 2;
  grid-row: 2;
  gap: 10px;
  flex-wrap: wrap;
}

/* Intro: statement + dashboard in a gradient frame (deck: "The Expereon platform · Web"). */
.div-block-30 {
  gap: var(--x-space-block);
}

.div-block-30 .text-intro {
  max-width: 22ch;
  margin: 0 auto;
}

.div-block-30 > .animation-top:last-child,
.container-md-content > .image-dashboard-mockup {
  border-radius: var(--x-r-lg);
}

.div-block-30 > .animation-top:last-child {
  padding: clamp(16px, 3.5vw, 44px) clamp(16px, 3.5vw, 44px) 0;
  background: var(--x-grad-panel);
  border: 1px solid var(--x-line-jade);
  box-shadow: var(--x-highlight), 0 40px 80px -40px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.image-dashboard-mockup {
  display: block;
  height: auto;
  border: 1px solid var(--x-line-2);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.div-block-30 .image-dashboard-mockup {
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

/* Quantified impact: one gradient stats panel (deck p2 / p13). */
.benefit-cards {
  gap: 0;
  border-radius: var(--x-r-lg);
  background: var(--x-grad-panel);
  border: 1px solid var(--x-line-jade);
  box-shadow: var(--x-highlight);
  overflow: hidden;
}

.benefit-cards .benefit-card,
.benefit-cards .benefit-card.benefit-card-border-left-light-no-padding {
  justify-content: flex-start;
  gap: 10px;
  padding: clamp(96px, 11vw, 150px) clamp(20px, 2.4vw, 32px) 32px;
  border-left: 1px solid var(--x-line);
  box-sizing: border-box;
}

.benefit-cards .benefit-card:first-child {
  border-left: 0;
}

.benefit-number {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  white-space: nowrap;
  font-size: clamp(2.4rem, 1.5rem + 2.1vw, 3.6rem);
  line-height: 1;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
  margin-bottom: 10px;
}

.benefit-card-title,
.benefit-card-title.text-white {
  font-family: var(--x-sans);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--x-ink);
}

.benefit-cards .benefit-card-title {
  font-family: var(--x-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--x-ink-2);
}

.benefit-card-text,
.benefit-card-text.text-light-muted {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--x-ink-2);
}

.benefit-cards .benefit-card-text {
  color: var(--x-ink-3);
}

.footnote-wrapper {
  width: 100%;
}

.text-block-14 {
  font-size: 13px;
  font-weight: 300;
  color: var(--x-ink-3);
  text-align: left;
}

/* Net financial impact banner */
.cta-banner {
  position: relative;
  box-sizing: border-box;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-end;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--x-r-lg);
  /* Same section as the lit stats panel and the calculator result, so this one stays unlit. */
  background: var(--x-grad-card);
  border: 1px solid var(--x-line-jade);
  box-shadow: var(--x-highlight);
}

.div-block-31 {
  width: auto;
  flex: 0 0 auto;
}

.div-block-32 {
  width: auto;
  flex: 1;
  max-width: 34rem;
  margin-left: auto;
}

.cta-banner-number {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(3.5rem, 2.2rem + 4vw, 6rem);
  line-height: 0.95;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.cta-banner-number-text {
  margin-top: 12px;
  font-family: var(--x-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-ink-2);
}

.cta-banner-content {
  gap: 10px;
}

.cta-banner-heading {
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem);
}

.cta-banner-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--x-ink-2);
}

/* Architecture diagram (deck p5) */
.mode-items-copy {
  max-width: 1040px;
}

.mode-item-copy {
  gap: 16px;
  padding: 20px;
  border-radius: var(--x-r);
  background: var(--x-grad-card);
  border: 1px solid var(--x-line);
  box-shadow: var(--x-highlight);
  box-sizing: border-box;
}

.mode-item-copy.item-expereon {
  gap: 28px;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
  border-radius: var(--x-r-lg);
  background: var(--x-grad-panel);
  border-color: var(--x-line-jade);
}

.mode-item-title.mode-item-title-white {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.item-expereon .mode-item-title.mode-item-title-white {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}

.div-block-40 {
  align-items: center;
  gap: 16px;
}

.div-block-39 {
  gap: 10px;
}

/* Counterparty chips wrap instead of running out of the card (the Expereon bar is a grid). */
.mode-item-copy:not(.item-expereon) .div-block-39 {
  flex-wrap: wrap;
}

.mode-item-copy:not(.item-expereon) .diagram-label {
  flex: 1 1 0;
  width: auto;
  min-width: max-content;
}

.diagram-label {
  gap: 6px;
  padding: 14px 12px;
  border-radius: var(--x-r-sm);
  background-color: var(--x-tint-1);
  border: 1px solid var(--x-line);
  color: var(--x-ink);
  font-size: 15px;
  font-weight: 400;
}

.text-block-16,
.text-block-17,
.text-block-18,
.text-block-19 {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: 1.3rem;
  letter-spacing: var(--x-serif-tracking);
}

.diagram-label-label,
.legend-text,
.text-block-20 {
  font-family: var(--x-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-ink-3);
}

/* The Expereon layer's capabilities read as one segmented bar. When it runs out of room
   it wraps into full rows; each cell draws its dividers as outside shadows on its left and
   top, and the bar's overflow clips the ones on its outer edges, so the grid lines stay
   right however the cells wrap. */
.item-expereon .div-block-39 {
  flex-flow: row wrap;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--x-line-2);
  background-color: rgba(var(--x-canvas-rgb), 0.35);
  overflow: hidden;
}

.diagram-label.diagram-label-green {
  flex: 1 1 auto;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: -1px 0 0 var(--x-line-2), 0 -1px 0 var(--x-line-2);
  background: transparent;
  padding: 16px 14px;
  font-family: var(--x-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--x-ink);
}

.mode-item-pre-title-copy {
  font-family: var(--x-mono);
  font-size: 11px;
  color: var(--x-ink-2);
  letter-spacing: 0.1em;
  max-width: 24rem;
  line-height: 1.5;
}

.div-block-44 {
  width: 8px;
  height: 8px;
  flex: none;
  background-color: var(--x-jade);
}

/* The jade dot bullets the descriptor: it sits on the first line, next to the text. */
.item-expereon .div-block-45 {
  align-items: flex-start;
}

.item-expereon .div-block-45 .div-block-44 {
  margin-top: 4px; /* (11px × 1.5 line − 8px dot) ÷ 2 */
}

.item-expereon .mode-item-pre-title-copy {
  text-align: left;
}

/* Connectors: one dashed line per participant, centred on its chip (four under the travel
   companies, five over the rails), so value visibly runs from each one through the layer.
   The grid mirrors the chip row it hangs from: the card's 20px padding + 1px border and the
   chips' 10px gap (16px + 1px and 8px, two columns, on phones); where the chips size to
   their text, motion.js nudges each line onto its chip's centre with --x-dx. */
.connectors {
  display: grid;
  grid-template-columns: repeat(var(--x-conn, 5), minmax(0, 1fr));
  column-gap: 10px;
  padding: 0 21px;
  box-sizing: border-box;
}

.mode-items-copy > .connectors:nth-child(2) {
  --x-conn: 4;
}

.mode-items-copy > .connectors:nth-child(2) > .connector-item:nth-child(n + 5) {
  display: none;
}

.connector-item {
  position: relative;
  width: auto;
  height: 44px;
  border-right: 0;
}

.connector-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + var(--x-dx, 0px));
  border-left: 1px dashed rgba(var(--x-jade-rgb), 0.5);
}

@media screen and (max-width: 479px) {
  .mode-items-copy > .connectors:nth-child(n) {
    --x-conn: 2;
    column-gap: 8px;
    padding: 0 17px;
  }

  .mode-items-copy > .connectors > .connector-item:nth-child(n + 3) {
    display: none;
  }
}

.div-block-46 {
  padding-top: 28px;
  gap: 16px;
  flex-wrap: wrap;
}

.div-block-47 {
  width: 18px;
  border-bottom-color: rgba(var(--x-jade-rgb), 0.7);
}

/* Savings calculator (inline component; restyled via its own variables). */
:root .expereon-calc {
  --ec-card-left: var(--x-card);
  --ec-card-right: var(--x-panel);
  --ec-primary: var(--x-mint);
  --ec-primary-hover: var(--x-mint-hi);
  --ec-text: var(--x-ink);
  --ec-text-secondary: var(--x-ink-3);
  --ec-track-bg: var(--x-tint-5);
  --ec-border: var(--x-line);
  font-family: var(--x-sans);
  width: 100%;
}

:root .expereon-calc .ec-grid {
  gap: 16px;
}

:root .expereon-calc .ec-card {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  box-shadow: var(--x-highlight);
}

:root .expereon-calc .ec-card-left {
  background: var(--x-grad-card);
}

:root .expereon-calc .ec-card-right {
  background: var(--x-grad-highlight);
  border-color: var(--x-line-jade);
}

:root .expereon-calc .ec-card-header {
  font-family: var(--x-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--x-jade);
}

:root .expereon-calc .ec-card-right .ec-card-header {
  color: var(--x-mint);
}

:root .expereon-calc .ec-label {
  font-size: 15px;
  font-weight: 500;
}

:root .expereon-calc .ec-value {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: 30px;
  letter-spacing: var(--x-serif-tracking);
}

:root .expereon-calc .ec-helper {
  font-size: 13px;
}

:root .expereon-calc input[type='range'] {
  height: 4px;
  border-radius: 4px;
  margin-top: 14px;
}

:root .expereon-calc input[type='range']::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  background: var(--x-mint-hi);
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

:root .expereon-calc input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--x-mint-hi);
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

:root .expereon-calc input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
}

/* Keyboard focus. The page's inline styles set outline: none on these controls, so the
   ring is drawn on the slider thumb (a gap in the card colour, then jade) and the select. */
:root .expereon-calc input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--x-card), 0 0 0 5px var(--x-jade), 0 2px 8px rgba(0, 0, 0, 0.4);
}

:root .expereon-calc input[type='range']:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--x-card), 0 0 0 5px var(--x-jade), 0 2px 8px rgba(0, 0, 0, 0.4);
}

:root .expereon-calc .ec-select-wrapper select {
  padding: 13px 18px;
  font-family: var(--x-sans);
  font-size: 15px;
  color: var(--x-ink);
  background-color: var(--x-tint-2);
  border: 1px solid var(--x-line-2);
  border-radius: var(--x-r-sm);
  transition: border-color 0.25s var(--x-ease), box-shadow 0.25s var(--x-ease);
}

:root .expereon-calc .ec-select-wrapper select:focus-visible {
  border-color: var(--x-jade);
  box-shadow: 0 0 0 3px rgba(var(--x-jade-rgb), 0.18);
}

:root .expereon-calc .ec-select-wrapper select option {
  background-color: var(--x-card);
  color: var(--x-ink);
}

:root .expereon-calc .ec-select-wrapper::after {
  filter: invert(1);
  opacity: 0.7;
}

:root .expereon-calc .ec-total {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  letter-spacing: var(--x-serif-tracking);
  line-height: 0.95;
  color: var(--x-ink);
}

:root .expereon-calc .ec-result-row {
  padding: 15px 0;
}

:root .expereon-calc .ec-result-label {
  font-size: 15px;
  font-weight: 300;
  color: var(--x-ink-2);
}

:root .expereon-calc .ec-result-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--x-jade);
}

/* The figures update on every slider step; fixed-width digits keep them from jittering. */
:root .expereon-calc :is(.ec-value, .ec-total, .ec-result-value) {
  font-variant-numeric: tabular-nums;
}

:root .expereon-calc .ec-cta {
  padding: 15px 20px;
  border-radius: var(--x-r-pill);
  background: var(--x-grad-action);
  color: var(--x-on-mint);
  font-size: 15px;
  box-shadow: var(--x-action-sheen), 0 8px 24px -12px rgba(var(--x-jade-rgb), 0.55);
}

:root .expereon-calc .ec-cta:hover {
  background: var(--x-mint-hi);
}

:root .expereon-calc .btn.btn-secondary._w-100 {
  padding: 15px 20px !important;
}

/* Working capital: four tall facility cards, first one lit (deck p8). */
.mode-items-default {
  gap: 16px;
}

.mode-item-default,
.mode-item-default.mode-item-default-01,
.mode-item-default.mode-item-default-02,
.mode-item-default.mode-item-default-03,
.mode-item-default.mode-item-default-04 {
  min-height: clamp(300px, 30vw, 420px);
  border: 1px solid var(--x-line);
  border-radius: var(--x-r-lg);
  background: var(--x-grad-card);
  box-shadow: var(--x-highlight);
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.4s var(--x-ease), transform 0.4s var(--x-ease);
}

.mode-item-default.mode-item-default-01 {
  background: var(--x-grad-panel);
  border-color: var(--x-line-jade);
}

.mode-item-default:hover {
  border-color: var(--x-line-jade);
  transform: translateY(-2px);
}

.mode-item-default .mode-item-header {
  flex: 1;
  gap: 0;
  padding: 28px 28px 12px;
  border-bottom: 0;
}

.mode-item-default .mode-item-title {
  margin-top: auto;
}

.mode-item-default .payment-change-item-body {
  height: auto;
  padding: 0 28px 28px;
}

.mode-item-default .mode-item-text {
  min-height: 4.65em;
}

.mode-item-pre-title,
.mode-item-pre-title.text-primary,
.mode-item-dark-pre-title,
.mode-item-dark-pre-title.text-primary,
.mode-item-dark-pre-title.text-green {
  font-family: var(--x-mono);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.14em;
  color: var(--x-jade);
}

.mode-item-title,
.mode-item-dark-title,
.mode-item-stat-dark-title {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.mode-item-text,
.mode-item-dark-text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--x-ink-2);
}

.div-block-38 {
  margin-top: clamp(64px, 8vw, 112px);
}

.div-block-38 .text-intro {
  text-align: center;
}

/* Virtual cards: three cards + stats panel (deck p10). */
.mode-items-one-row {
  gap: 16px;
}

.mode-item-dark,
.mode-item-dark.mode-item-01,
.mode-item-dark.mode-item-02,
.mode-item-dark.mode-item-03,
.mode-item-dark.mode-item-04,
.mode-item-dark.mode-item-05 {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--x-line);
  border-radius: var(--x-r);
  background: var(--x-grad-card);
  box-shadow: var(--x-highlight);
}

.mode-items-one-row .mode-item-header {
  gap: 10px;
  padding: 28px 28px 10px;
  border-bottom: 0;
}

.mode-items-one-row .payment-change-item-body {
  padding: 0 28px 28px;
}

.mode-items-stats {
  border-radius: var(--x-r-lg);
  background: var(--x-grad-panel);
  border: 1px solid var(--x-line-jade);
  box-shadow: var(--x-highlight);
  overflow: hidden;
}

.mode-item-stat-dark,
.mode-item-stat-dark.mode-item-stat-dark-01,
.mode-item-stat-dark.mode-item-stat-dark-02,
.mode-item-stat-dark.mode-item-stat-dark-03 {
  justify-content: flex-end;
  min-height: clamp(220px, 24vw, 320px);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--x-line);
}

.mode-item-stat-dark.mode-item-stat-dark-01 {
  border-left: 0;
}

.mode-item-stat-dark .mode-item-header {
  gap: 14px;
  padding: 32px;
  border-bottom: 0;
}

.mode-item-stat-dark-title {
  font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.9rem);
  line-height: 1;
  letter-spacing: var(--x-serif-tracking);
  white-space: nowrap;
}

.mode-item-stat-dark .mode-item-dark-pre-title {
  color: var(--x-ink-2);
}

/* The figures sit on one line across the band: a label that wraps would otherwise lift its
   figure above its neighbours'. Two label lines are reserved while the band is a row. */
@media screen and (min-width: 768px) {
  .mode-item-stat-dark .mode-item-dark-pre-title {
    min-height: 48px; /* two 24px lines */
  }
}

/* Intelligence: dashboard in a frame + ruled feature list (deck p12). The heading sits on
   the page grid like every other section's; the dashboard keeps its narrower frame. */
.container-md:has(> .container-md-content) {
  max-width: 1200px;
}

.container-md-content {
  gap: var(--x-space-block);
}

.container-md-content > .image-dashboard-mockup {
  align-self: center;
  width: 100%;
  max-width: 800px;
  padding: clamp(10px, 2vw, 20px);
  background: var(--x-grad-panel);
  border: 1px solid var(--x-line-jade);
  border-radius: var(--x-r-lg);
  box-sizing: border-box;
}

.div-block-43 {
  padding-top: var(--x-space-block);
}

.mode-items {
  gap: 0 clamp(24px, 3vw, 40px);
}

.mode-items .mode-item-dark,
.mode-items .mode-item-dark.mode-item-01,
.mode-items .mode-item-dark.mode-item-02,
.mode-items .mode-item-dark.mode-item-03,
.mode-items .mode-item-dark.mode-item-04,
.mode-items .mode-item-dark.mode-item-05 {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--x-line-2);
  border-radius: 0;
  box-shadow: none;
}

.mode-items .mode-item-header {
  gap: 12px;
  padding: 24px 0 8px;
  border-bottom: 0;
}

.mode-items .payment-change-item-body {
  padding: 0 0 32px;
}

.mode-items .mode-item-dark-title {
  font-size: 1.6rem;
}

/* Closing CTA: photo panel with a glass action bar (deck p15). */
.div-block-2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: var(--x-space-block);
  align-items: stretch;
  padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px) clamp(28px, 4vw, 48px);
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line-2);
  background-color: var(--x-panel);
  background-image:
    linear-gradient(90deg, rgba(var(--x-canvas-rgb), 0.92) 0%, rgba(var(--x-canvas-rgb), 0.7) 45%, rgba(var(--x-canvas-rgb), 0.35) 100%),
    linear-gradient(180deg, rgba(var(--x-canvas-rgb), 0.15) 0%, rgba(var(--x-canvas-rgb), 0.85) 100%),
    url('/images/hotel-atrium-p-1600.webp');
  background-size: cover;
  background-position: 50% 30%;
  /* Size the photo to the border box and don't tile it: with the defaults, the photo's
     opposite edge repeated into the 1px translucent border as a bright seam. */
  background-origin: border-box;
  background-repeat: no-repeat;
  box-shadow: var(--x-highlight), 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

.div-block-2 > .heading,
.div-block-2 > .heading.heading-centered {
  align-items: flex-start;
  max-width: 44rem;
  gap: 24px;
}

.div-block-2 .heading-h2:not(#x),
.div-block-2 .cta-heading-h2:not(#x) {
  text-align: left;
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: var(--x-serif-tracking);
  max-width: 17ch;
}

.div-block-2 .heading-text {
  text-align: left;
  max-width: 36rem;
}

.div-block-2 .cta-wrapper.cta-wrapper-centered {
  justify-content: flex-start;
  padding-top: 8px;
}

.div-block-2 > .animation-top {
  width: 100%;
}

.contact-cta-wrapper {
  gap: 0;
  border-radius: var(--x-r);
  border: 1px solid var(--x-line-2);
  background-color: rgba(var(--x-canvas-rgb), 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--x-highlight);
}

.contact-cta-card {
  align-items: flex-start;
  gap: 14px;
  padding: clamp(20px, 2.5vw, 28px);
  box-sizing: border-box;
}

.contact-cta-card + .contact-cta-card {
  border-left: 1px solid var(--x-line-2);
}

/* A single card (the home page's, since the overview download was removed) runs its button
   and caption along the bar rather than filling only the left half. */
.contact-cta-card:only-child {
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.contact-cta-card .btn {
  width: auto;
  min-width: 15rem;
}

/* Three classes, to beat Webflow's `.btn.btn-primary._w-100 { width: 100% }`. */
.contact-cta-card:only-child .btn {
  flex: none;
  width: auto;
}

.text-block-12 {
  width: auto;
  max-width: 26rem;
  text-align: left;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--x-ink-2);
}

/* Numbered feature lists (flyers: "Platform features", "Key features"). The number sits
   left of the title on one row, with the description indented to the title. */
.x-list-title {
  width: 100%;
  margin: 0 0 var(--x-space-sub);
  font-size: 1.6rem;
}

.content > .heading + .animation-top > .x-list-title:first-child {
  margin-top: var(--x-space-sub);
}

.mode-items.x-list-2 {
  grid-template-columns: 1fr 1fr;
}

.mode-items.x-list-1 {
  grid-template-columns: 1fr;
}

.x-list-2 .mode-item-header,
.x-list-1 .mode-item-header {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 22px 0 10px;
}

.x-list-2 .mode-item-dark > .mode-item-header:last-child,
.x-list-1 .mode-item-dark > .mode-item-header:last-child {
  padding-bottom: 22px;
}

.x-list-2 .payment-change-item-body,
.x-list-1 .payment-change-item-body {
  padding: 0 0 22px calc(2.25rem + 12px);
}

.x-list-2 .mode-item-dark-title,
.x-list-1 .mode-item-dark-title {
  font-size: 1.35rem;
}

.mode-items.x-list-2 .mode-item-dark:nth-last-child(-n + 2),
.mode-items.x-list-1 .mode-item-dark:last-child {
  border-bottom: 1px solid var(--x-line-2);
}

.payment-change-item-body {
  gap: 0;
}

.x-list-cta {
  padding-top: var(--x-space-sub);
}

/* List beside a phone screenshot (deck p9, p12). */
/* The list centres on the phone frame, so neither column ends in a block of empty canvas. */
.x-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.x-split-aside {
  display: flex;
  justify-content: center;
}

.x-phone-frame {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  padding: clamp(16px, 2.5vw, 28px);
  box-sizing: border-box;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line-jade);
  background: var(--x-grad-panel);
  box-shadow: var(--x-highlight);
}

.x-phone-label {
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-mint);
}

.x-phone {
  display: block;
  width: 100%;
  height: auto;
}

/* A raw app screenshot (no drawn device): rounded like a phone screen, with a hairline so its
   dark canvas separates from the panel. */
.x-phone.x-phone-screen {
  align-self: center;
  max-width: 360px;
  border-radius: 32px;
  border: 1px solid var(--x-line-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

/* Before and after Expereon (The problem): for each problem, its figure today, the Expereon
   feature that changes it, and the result, all in copy the page already carries. One panel
   read left to right: today's figures muted, a dashed arrow through the feature, the result
   column lit with the jade glow. Below 768px each row is its own card, read top to bottom
   (Today, With Expereon, Result) with per-row tags and the arrow turned down. */
.x-shift {
  width: 100%;
}

.x-shift-panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line-jade);
  background: var(--x-grad-card);
  box-shadow: var(--x-highlight);
  overflow: hidden;
}

/* The lit result column: one layer behind all rows, so the glow runs unbroken top to
   bottom. Its width is the third grid track (1 of 1 + 1.15 + 1). */
.x-shift-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(100% / 3.15);
  border-left: 1px solid var(--x-line-jade);
  background:
    radial-gradient(ellipse 110% 45% at 50% 0%, rgba(var(--x-glow-rgb), 0.62) 0%, rgba(var(--x-glow-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--x-glow-rgb), 0.2) 0%, rgba(var(--x-glow-rgb), 0.08) 100%);
  pointer-events: none;
}

.x-shift-head,
.x-shift-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
}

.x-shift-head > div {
  padding: 22px clamp(20px, 2.4vw, 32px) 18px;
  font-family: var(--x-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-ink-3);
}

.x-shift-head > div:nth-child(2) {
  color: var(--x-jade);
}

.x-shift-head > div:nth-child(3) {
  color: var(--x-mint);
}

.x-shift-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.x-shift-row {
  border-top: 1px solid var(--x-line);
}

.x-shift-before,
.x-shift-via,
.x-shift-after {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(26px, 3vw, 36px) clamp(20px, 2.4vw, 32px);
}

/* Per-row column names: read by screen readers on every row; shown on phones, where the
   header row is gone. */
.x-shift-tag {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.x-shift-figure:not(#x) {
  margin-bottom: 14px;
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(2.2rem, 1.5rem + 1.7vw, 3.3rem);
  line-height: 1;
  letter-spacing: var(--x-serif-tracking);
  white-space: nowrap;
  color: var(--x-ink);
}

.x-shift-before .x-shift-figure:not(#x) {
  color: var(--x-ink-2);
}

.x-shift-label {
  font-family: var(--x-mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--x-ink-3);
}

.x-shift-after .x-shift-label {
  color: var(--x-mint);
}

.x-shift-feature {
  margin-bottom: 8px;
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.x-shift-text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--x-ink-2);
}

/* The arrow from today to the result, under the feature. */
.x-shift-track {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  color: var(--x-jade);
}

.x-shift-track::before {
  content: '';
  flex: 1;
  margin-right: -3px;
  border-top: 1px dashed rgba(var(--x-jade-rgb), 0.55);
}

.x-shift-arrow {
  flex: none;
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 767px) {
  .x-shift-panel {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .x-shift-panel::before,
  .x-shift-head {
    display: none;
  }

  .x-shift-list {
    display: grid;
    gap: 12px;
  }

  .x-shift-row {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--x-line-jade);
    border-radius: var(--x-r);
    background: var(--x-grad-card);
    box-shadow: var(--x-highlight);
  }

  .x-shift-tag {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 10px;
    overflow: visible;
    clip: auto;
    font-family: var(--x-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--x-ink-3);
  }

  .x-shift-via .x-shift-tag {
    color: var(--x-jade);
  }

  .x-shift-after .x-shift-tag {
    color: var(--x-mint);
  }

  .x-shift-before {
    padding: 22px 22px 18px;
  }

  /* The feature hangs on a down arrow from today's figure to the result. */
  .x-shift-via {
    position: relative;
    padding: 4px 22px 22px 58px;
  }

  .x-shift-track {
    position: absolute;
    top: 0;
    bottom: 10px;
    left: 22px;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .x-shift-track::before {
    margin: 0 0 -3px;
    border-top: 0;
    border-left: 1px dashed rgba(var(--x-jade-rgb), 0.55);
  }

  .x-shift-arrow {
    transform: rotate(90deg);
  }

  .x-shift-after {
    padding: 22px;
    border-top: 1px solid var(--x-line-jade);
    background:
      radial-gradient(ellipse 90% 90% at 0% 0%, rgba(var(--x-glow-rgb), 0.55) 0%, rgba(var(--x-glow-rgb), 0) 100%),
      rgba(var(--x-glow-rgb), 0.1);
  }

  .x-shift-figure:not(#x) {
    margin-bottom: 10px;
    font-size: 2.4rem;
  }
}

/* How it works: five numbered steps on a dashed rule (deck p11). */
.x-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.x-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.x-step::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 44px;
  right: -16px;
  border-top: 1px dashed var(--x-line-3);
}

.x-step:last-child::before {
  display: none;
}

.x-step-num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--x-line-jade);
  background: var(--x-panel);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--x-ink);
}

.x-step:first-child .x-step-num {
  border-color: transparent;
  background: var(--x-grad-action);
  color: var(--x-on-mint);
}

.x-step-card {
  flex: 1;
  padding: 22px 22px 24px;
  box-sizing: border-box;
  border-radius: var(--x-r);
  border: 1px solid var(--x-line);
  background: var(--x-grad-card);
  box-shadow: var(--x-highlight);
}

.x-step-label {
  margin-bottom: 10px;
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-jade);
}

.x-step-text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--x-ink-2);
}

/* Progress (js/motion.js adds .is-live and sets --x-fill and .is-on per step while the strip
   is scrolled): a jade line draws over the dashed rule and each number turns mint as the
   line reaches it. Without the script, or with reduced motion, the strip stays static with
   the first step lit. */
.x-step::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 44px;
  right: -16px;
  border-top: 1px solid var(--x-jade);
  transform: scaleX(var(--x-fill, 0));
  transform-origin: left center;
  display: none;
}

.x-steps.is-live .x-step:not(:last-child)::after {
  display: block;
}

.x-steps.is-live .x-step .x-step-num {
  border-color: var(--x-line-jade);
  background: var(--x-panel);
  color: var(--x-ink);
  transition: background 0.35s var(--x-ease), border-color 0.35s var(--x-ease), color 0.35s var(--x-ease), box-shadow 0.35s var(--x-ease);
}

.x-steps.is-live .x-step.is-on .x-step-num {
  border-color: transparent;
  background: var(--x-grad-action);
  color: var(--x-on-mint);
  box-shadow: 0 6px 18px -8px rgba(var(--x-jade-rgb), 0.7);
}

.x-steps.is-live .x-step-card {
  transition: border-color 0.5s var(--x-ease);
}

.x-steps.is-live .x-step.is-on .x-step-card {
  border-color: var(--x-line-2);
}

/* Banking stats: three tiles in the impact panel's style. */
.benefit-cards.x-tiles-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Feature matrix (Platform and Banking flyer): one table, two product columns. */
.x-matrix-wrapper {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  background: var(--x-grad-card);
  box-shadow: var(--x-highlight);
}

.x-matrix {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15.5px;
}

.x-matrix th,
.x-matrix td {
  padding: 14px clamp(16px, 2.4vw, 32px);
  text-align: left;
  border-top: 1px solid var(--x-line);
  vertical-align: middle;
}

.x-matrix thead th {
  padding-top: 26px;
  padding-bottom: 18px;
  border-top: 0;
  font-family: var(--x-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-ink-3);
}

.x-matrix thead th:nth-child(n + 2),
.x-matrix td {
  width: 7.5rem;
  text-align: center;
}

.x-matrix td {
  position: relative;
}

.x-matrix tbody th {
  font-weight: 300;
  color: var(--x-ink);
}

.x-matrix .x-matrix-group th {
  padding-top: 26px;
  padding-bottom: 8px;
  border-top: 1px solid var(--x-line-2);
  font-family: var(--x-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-jade);
}

.x-matrix tbody .x-matrix-group:first-child th {
  padding-top: 4px;
  border-top: 0;
}

.x-matrix .x-matrix-group + tr th,
.x-matrix .x-matrix-group + tr td {
  border-top: 0;
}

.x-dot,
.x-dot-soon {
  display: inline-block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--x-jade);
  vertical-align: middle;
}

.x-dot.x-dot-soon {
  border: 1.5px solid var(--x-jade);
  background: transparent;
}

.x-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.x-dot-none {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: var(--x-line-3);
  vertical-align: middle;
}

/* Important information (deck p14): numbered notes beside the disclaimer. */
.x-notes {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.x-notes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(8px, 1.5vw, 16px) clamp(20px, 3vw, 36px);
  box-sizing: border-box;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  background: var(--x-grad-card);
}

.x-note {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--x-line);
}

.x-note:first-child {
  border-top: 0;
}

.x-note-num {
  padding-top: 6px;
  font-family: var(--x-mono);
  font-size: 11px;
  color: var(--x-jade);
}

.x-note-body {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 16px;
}

.x-note-title {
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.x-note-text {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--x-ink-3);
}

.x-disclaimer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: clamp(20px, 3vw, 36px);
  box-sizing: border-box;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line-jade);
  background: var(--x-grad-highlight);
}

.x-disclaimer .pre-title {
  color: var(--x-mint);
}

.x-disclaimer-text {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--x-ink-2);
}

@media screen and (max-width: 991px) {
  .x-split,
  .x-notes {
    grid-template-columns: 1fr;
  }

  .x-split-aside {
    order: 2;
  }

  .x-phone-frame {
    max-width: 380px;
  }

  .x-steps {
    grid-template-columns: 1fr 1fr;
  }

  .x-step::before,
  .x-steps.is-live .x-step:not(:last-child)::after {
    display: none;
  }

  .benefit-cards.x-tiles-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .benefit-cards.x-tiles-3 .benefit-card:nth-child(3) {
    border-left: 1px solid var(--x-line);
  }

  .benefit-cards.x-tiles-3 .benefit-card:nth-child(n + 3) {
    border-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .mode-items.x-list-2 {
    grid-template-columns: 1fr;
  }

  .mode-items.x-list-2 .mode-item-dark:nth-last-child(2) {
    border-bottom: 0;
  }

  .x-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .x-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }

  .x-step-num {
    flex: none;
    width: 36px;
    height: 36px;
    margin-top: 14px;
    font-size: 1rem;
  }

  /* Stacked, the steps hang on a vertical rail from each number down to the next
     (14px top margin + 36px number; 12px gap + the next number's 14px margin). */
  .x-step::before,
  .x-step::after {
    top: 50px;
    bottom: -26px;
    left: 17px;
    right: auto;
    border-top: 0;
  }

  .x-step:not(:last-child)::before {
    display: block;
    border-left: 1px dashed var(--x-line-3);
  }

  .x-step::after {
    border-left: 1px solid var(--x-jade);
    transform: scaleY(var(--x-fill, 0));
    transform-origin: center top;
  }

  .x-steps.is-live .x-step:not(:last-child)::after {
    display: block;
  }

  .x-step-card {
    padding: 18px 18px 20px;
  }

  .x-note-body {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media screen and (max-width: 479px) {
  .benefit-cards.x-tiles-3 {
    grid-template-columns: 1fr;
  }

  .benefit-cards.x-tiles-3 .benefit-card:nth-child(n + 2) {
    border-left: 0;
    border-top: 1px solid var(--x-line);
  }

  .x-matrix {
    min-width: 0;
    font-size: 14px;
  }

  .x-matrix th,
  .x-matrix td {
    padding: 12px 10px;
  }

  .x-matrix th:first-child,
  .x-matrix td:first-child {
    padding-left: 16px;
  }

  .x-matrix thead th:nth-child(n + 2),
  .x-matrix td {
    width: 4.25rem;
    padding-left: 4px;
    padding-right: 4px;
  }

  .x-matrix thead th:last-child,
  .x-matrix td:last-child {
    padding-right: 12px;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
  .header .navbar-wrapper {
    padding: 10px 0;
    gap: 8px;
  }

  /* Architecture diagram: the Expereon layer's title takes the full width and the
     descriptor sits under it, instead of both squeezing onto one row. */
  .item-expereon .div-block-40 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .item-expereon .mode-item-pre-title-copy {
    max-width: none;
  }

  /* Four capabilities to a row (the second row's three share it), not a ragged wrap. */
  .diagram-label.diagram-label-green {
    flex-basis: 25%;
  }

  .header .navbar-nav-secondary {
    margin-left: auto;
  }

  .mode-item-stat-dark-title {
    white-space: nowrap;
    font-size: clamp(2rem, 1rem + 3vw, 2.75rem);
  }

  .header .w-nav-overlay .navbar-nav {
    padding: 8px;
  }

  .content > .heading,
  .container-md-content > .heading,
  .content > .heading.heading-centered,
  .section-hero .hero-homepage-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .content > .heading > .heading-text,
  .container-md-content > .heading > .heading-text {
    grid-column: 1;
    grid-row: auto;
    padding-bottom: 0;
  }

  .section-hero .heading-h1,
  .section-hero .hero-text,
  .section-hero .hero-cta {
    grid-column: 1;
    grid-row: auto;
  }

  .section-hero .hero-homepage-heading {
    row-gap: 22px;
  }

  .benefit-cards {
    grid-template-columns: 1fr 1fr;
  }

  .benefit-cards .benefit-card:nth-child(3) {
    border-left: 0;
  }

  .benefit-cards .benefit-card:nth-child(n + 3) {
    border-top: 1px solid var(--x-line);
  }

  .mode-items-default {
    grid-template-columns: 1fr 1fr;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .div-block-32 {
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {

  .contact-cta-wrapper {
    flex-direction: column;
  }

  .contact-cta-card {
    width: 100%;
  }

  .contact-cta-card + .contact-cta-card {
    border-left: 0;
    border-top: 1px solid var(--x-line-2);
  }

  .contact-cta-card:only-child {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .contact-cta-card:only-child .btn {
    width: 100%;
  }

  .mode-items-one-row,
  .mode-items-stats,
  .mode-items {
    grid-template-columns: 1fr;
  }

  .mode-item-stat-dark,
  .mode-item-stat-dark.mode-item-stat-dark-02,
  .mode-item-stat-dark.mode-item-stat-dark-03 {
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--x-line);
  }

  .mode-item-stat-dark.mode-item-stat-dark-01 {
    border-top: 0;
  }

  .item-expereon .div-block-39 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* An odd last capability spans the row instead of leaving an empty cell. */
  .item-expereon .diagram-label-green:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .footer {
    padding: 0 8px 8px;
  }

  .div-block-2 {
    background-image:
      linear-gradient(180deg, rgba(var(--x-canvas-rgb), 0.6) 0%, rgba(var(--x-canvas-rgb), 0.92) 70%),
      url('/images/hotel-atrium-p-800.webp');
  }
}

@media screen and (max-width: 479px) {
  /* Stacked section headings are tall on phones, and IX3 drifts them 15% down as they scroll,
     which is more than the 40px row gap; give them room so they never touch what follows. */
  .content > .heading,
  .container-md-content > .heading {
    margin-bottom: 16px;
  }

  .section-hero.section-no-zoom {
    margin: 8px 8px 0;
    height: calc(100svh - 8px);
    min-height: 640px;
    border-radius: 22px;
  }

  .section-hero .section-hero-content-copy {
    padding-bottom: 40px;
  }

  /* 3rem from ~390px up; scales down below that so "infrastructure" (one word, can't wrap)
     still fits a 320px screen. */
  .section-hero .heading-h1:not(#x) {
    font-size: clamp(2.5rem, 12.4vw, 3rem);
  }

  .section-hero .hero-cta .btn {
    width: 100%;
  }

  .benefit-cards {
    grid-template-columns: 1fr;
  }

  .benefit-cards .benefit-card,
  .benefit-cards .benefit-card.benefit-card-border-left-light-no-padding {
    min-height: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid var(--x-line);
  }

  .benefit-cards .benefit-card:first-child {
    border-top: 0;
  }

  .mode-items-default {
    grid-template-columns: 1fr;
  }

  .mode-item-default,
  .mode-item-default.mode-item-default-01,
  .mode-item-default.mode-item-default-02,
  .mode-item-default.mode-item-default-03,
  .mode-item-default.mode-item-default-04 {
    /* Stacked on phones, the cards hug their title and text; the tall card only reads
       well as a row of four. */
    min-height: 0;
  }

  .div-block-39 {
    gap: 8px;
  }

  /* Architecture diagram on phones: titles stay left-aligned as on desktop, and the
     participant chips sit two to a row (an odd last one spans the row) instead of a
     one-per-row column. */
  .mode-item-copy .div-block-40 {
    align-items: flex-start;
  }

  .mode-item-copy:not(.item-expereon) {
    padding: 16px;
  }

  .mode-item-copy:not(.item-expereon) .div-block-39 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-item-copy:not(.item-expereon) .diagram-label {
    min-width: 0;
    padding: 12px 8px;
    font-size: 14px;
  }

  .mode-item-copy:not(.item-expereon) .diagram-label:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .text-block-16,
  .text-block-17,
  .text-block-18,
  .text-block-19 {
    font-size: 1.15rem;
  }

  .diagram-label-label {
    letter-spacing: 0.1em;
  }

  .item-expereon .div-block-39 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diagram-label.diagram-label-green {
    min-width: 0;
    padding: 14px 6px;
    letter-spacing: 0.06em;
    white-space: normal;
  }

  .contact-cta-card .btn {
    width: 100%;
    min-width: 0;
  }

}

/* ==========================================================================
   FX calculator
   ========================================================================== */

.section-hero-calculator {
  box-sizing: border-box;
  margin: 12px 12px 0;
  width: auto;
  padding-top: clamp(150px, 18vh, 200px);
  padding-bottom: clamp(56px, 8vh, 88px);
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  overflow: hidden;
  isolation: isolate;
}

.section-hero-calculator .div-block-50 {
  opacity: 1;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 60% 90% at 0% 0%, rgba(var(--x-glow-rgb), 0.55) 0%, rgba(var(--x-glow-rgb), 0) 70%),
    linear-gradient(180deg, rgba(var(--x-canvas-rgb), 0.72) 0%, rgba(var(--x-canvas-rgb), 0.92) 100%);
}

.section-hero-calculator .hero-no-image-content {
  justify-content: flex-start;
}

.section-hero-calculator .hero-no-image-heading-copy {
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  padding-right: 0;
}

.section-hero-calculator .pre-title {
  text-align: left;
}

.heading-calculator {
  margin: 0;
  text-align: left;
}

/* The spot date reads as a pill, like the deck's "24/7/365 settlement" tag. */
.section-hero-calculator .hero-text.auto-date {
  width: auto;
  margin: 4px 0 0;
  padding: 9px 16px;
  border-radius: var(--x-r-pill);
  border: 1px solid var(--x-line-3);
  font-family: var(--x-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--x-ink);
}

.section-calculator {
  padding-top: clamp(40px, 5vw, 64px);
}

:root .ec-fx {
  --ec-dark-grey: var(--x-ink-2);
  --ec-light-grey: var(--x-tint-2);
  --ec-light-green: var(--x-jade);
  --ec-cyan-12: var(--x-on-mint);
  --ec-primary: var(--x-jade);
  --ec-card: var(--x-card);
  --ec-border: var(--x-line);
  --ec-track: var(--x-tint-5);
  --ec-select-border: var(--x-line-2);
  --ec-font-primary: var(--x-sans);
  --ec-font-display: var(--x-serif);
  --ec-surface-2: var(--x-popover);
  --ec-text: var(--x-ink);
  --ec-muted: var(--x-ink-3);
  --ec-gold: var(--x-jade);
  --ec-radius: 12px;
  --ec-shadow: none;
  width: 100%;
  font-weight: 400;
  color: var(--x-ink);
}

:root .ec-fx .ec-calculator {
  width: 100%;
  padding: 0;
}

:root .ec-fx .ec-grid,
:root .ec-fx .ec-cards {
  gap: 16px;
  margin-bottom: 16px;
}

/* The received amount is one unbreakable run of digits at display size; in the 721-991px
   two-column grid it pushed the result card 47px past the viewport. Columns may shrink, and
   the grid stacks until both columns have room. */
:root .ec-fx .ec-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

:root .ec-fx .ec-hero {
  min-width: 0;
}

@media screen and (max-width: 991px) {
  :root .ec-fx .ec-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

:root .ec-fx .ec-panel,
:root .ec-fx .ec-hero,
:root .ec-fx .ec-card {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  background: var(--x-grad-card);
}

:root .ec-fx .ec-hero {
  background: var(--x-grad-highlight);
  border-color: var(--x-line-jade);
}

:root .ec-fx .ec-card.ec-cheaper {
  border-color: rgba(var(--x-jade-rgb), 0.55);
  background: var(--x-grad-highlight);
  box-shadow: inset 0 0 0 1px rgba(var(--x-jade-rgb), 0.35);
}

:root .ec-fx .pre-title.text-light-muted {
  font-family: var(--x-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--x-jade);
}

:root .ec-fx .ec-hero .pre-title.text-light-muted {
  color: var(--x-mint);
}

:root .ec-fx label.ec-field-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--x-ink-2);
}

:root .ec-fx .ec-amount-box,
:root .ec-fx select,
:root .ec-fx .ec-picker-btn,
:root .ec-fx .ec-tiers,
:root .ec-fx .ec-swap {
  border-color: var(--x-line-2);
  background-color: var(--x-tint-2);
  color: var(--x-ink);
}

:root .ec-fx .ec-amount-box {
  padding: 10px 18px;
  border-radius: 14px;
}

:root .ec-fx .ec-amount-box input {
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  letter-spacing: var(--x-serif-tracking);
  font-size: 30px;
}

:root .ec-fx .ec-picker-btn {
  padding: 12px 14px;
  color: var(--x-ink);
}

:root .ec-fx .ec-picker-chev {
  color: var(--x-ink-3);
}

:root .ec-fx .ec-picker-menu {
  border-radius: 14px;
  border-color: var(--x-line-2);
  background: var(--x-popover);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

:root .ec-fx .ec-picker-opt {
  color: var(--x-ink);
  border-radius: 8px;
}

:root .ec-fx .ec-picker-opt:hover,
:root .ec-fx .ec-picker-opt.ec-is-cursor,
:root .ec-fx .ec-picker-opt[aria-selected='true'] {
  background: var(--x-tint-3);
}

:root .ec-fx select:focus,
:root .ec-fx .ec-amount-box:focus-within,
:root .ec-fx .ec-picker-btn:focus-visible,
:root .ec-fx .ec-picker.ec-is-open .ec-picker-btn {
  border-color: var(--x-jade);
  box-shadow: 0 0 0 3px rgba(var(--x-jade-rgb), 0.18);
}

:root .ec-fx .ec-swap {
  color: var(--x-ink);
}

:root .ec-fx .ec-swap:hover {
  color: var(--x-on-mint);
}

:root .ec-fx .ec-tiers {
  border-radius: 14px;
}

:root .ec-fx .ec-tier {
  color: var(--x-ink-3);
}

:root .ec-fx .ec-tier .ec-tier-fill {
  background: var(--x-tint-3);
}

:root .ec-fx .ec-tier-indicator {
  border-radius: 10px;
  background: var(--x-grad-action);
}

:root .ec-fx .ec-tier small {
  font-size: 11px;
}

:root .ec-fx .ec-tier.ec-active,
:root .ec-fx .ec-tier.ec-active small {
  color: var(--x-on-mint);
}

:root .ec-fx .ec-tier::after {
  background-color: var(--x-on-mint);
}

:root .ec-fx .ec-hero .ec-receive {
  /* --x-fit is set by the page's fit script when a long amount would overflow the card. */
  font-size: var(--x-fit, clamp(2.5rem, 1.8rem + 2vw, 3.5rem));
  font-weight: var(--x-serif-weight);
  letter-spacing: var(--x-serif-tracking);
  white-space: nowrap;
}

:root .ec-fx .ec-hero .ec-receive .ec-receive-cur {
  font-family: var(--x-mono);
  font-size: 0.42em;
  letter-spacing: 0.12em;
  color: var(--x-jade);
}

:root .ec-fx .ec-hero .ec-rate-line {
  font-weight: 300;
  color: var(--x-ink-2);
}

:root .ec-fx .ec-hero .ec-note {
  color: var(--x-jade);
}

:root .ec-fx .ec-bps {
  font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem);
  font-weight: var(--x-serif-weight);
  letter-spacing: var(--x-serif-tracking);
}

:root .ec-fx .ec-bps .ec-bps-unit {
  font-family: var(--x-mono);
  font-weight: 400;
  letter-spacing: 0.12em;
}

:root .ec-fx .ec-badge {
  border-radius: var(--x-r-pill);
  padding: 5px 10px;
  background: var(--x-grad-action);
  color: var(--x-on-mint);
  font-family: var(--x-mono);
  font-weight: 400;
}

:root .ec-fx .ec-card li {
  font-weight: 300;
  color: var(--x-ink-2);
}

:root .ec-fx .ec-card li::before {
  background-color: var(--x-jade);
}

:root .ec-fx .ec-fee-money {
  font-weight: 500;
  color: var(--x-ink);
}

/* ==========================================================================
   Form page (Get in touch) and the "Contact us" modal
   ========================================================================== */

.section-request-demo,
.section-request-demo-copy {
  background-color: var(--x-canvas);
}

/* Webflow sets .form-step { min-width: 450px } and only resets it below 480px, so in the
   half-width form column (480-1000px) the form ran under the photo and off the screen edge. */
.request-demo-form-wrapper {
  box-sizing: border-box;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  background: var(--x-canvas);
}

.request-demo-form {
  width: 100%;
}

/* The close button sits in the form column's top-right corner. From 480px (where Webflow
   drops the form's top padding to 64px) the step bars ran under it until the column is wide
   enough to keep them apart; start the form below the button there. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .request-demo-form {
    padding-top: 112px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .request-demo-form-copy {
    padding-top: 112px;
  }
}

:root .form-step {
  min-width: 0;
}

/* Get in touch: photo band becomes a framed banner. */
.request-demo-left-copy {
  box-sizing: border-box;
  height: 200px;
  margin: 12px 12px 0;
  width: auto;
  align-self: stretch;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line);
  overflow: hidden;
  isolation: isolate;
}

.request-demo-left-copy .image-6-copy {
  position: absolute;
  inset: 0;
  z-index: -1;
  object-position: 50% 45%;
}

.request-demo-left-copy .bg-linear-gradient-copy {
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(var(--x-canvas-rgb), 0.55), rgba(var(--x-canvas-rgb), 0.75)),
    linear-gradient(90deg, rgba(var(--x-panel-rgb), 0.5), rgba(var(--x-panel-rgb), 0.2));
}

.request-demo-left-copy .linear-gradient-top {
  z-index: -1;
}

.request-demo-nav-copy {
  padding-left: 0;
}

.request-demo-close-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--x-r-pill);
  border: 1px solid var(--x-line-2);
  background-color: var(--x-tint-2);
  color: var(--x-ink);
  transition: background-color 0.25s var(--x-ease), border-color 0.25s var(--x-ease);
}

.request-demo-close-icon:hover {
  background-color: var(--x-tint-4);
  border-color: var(--x-line-3);
}

.form-heading {
  gap: 14px;
}

.form-heading-title {
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.form-step-text {
  font-weight: 300;
  font-size: 16px;
  color: var(--x-ink-2);
}

.form-step-indicators {
  gap: 6px;
}

.form-step-indicator {
  height: 3px;
  border-radius: 3px;
  background-color: var(--x-line-2);
}

:root .form-step-indicator.is-active,
:root .form-step-indicator.is-complete {
  opacity: 1;
  background-color: var(--x-jade);
}

.form-content {
  gap: 18px;
}

.form-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--x-ink-2);
}

.form-input,
.form-input.w-input,
.form-input.w-select {
  height: auto;
  min-height: 48px;
  margin-bottom: 0;
  padding: 12px 16px;
  border-radius: var(--x-r-sm);
  border: 1px solid var(--x-line-2);
  background-color: var(--x-tint-2);
  color: var(--x-ink);
  font-size: 15px;
  transition: border-color 0.25s var(--x-ease), box-shadow 0.25s var(--x-ease), background-color 0.25s var(--x-ease);
}

select.form-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23fbfcfd' stroke-opacity='.74' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  cursor: pointer;
}

/* Until a choice is made, the placeholder option reads as a hint, not an answer. */
select.form-input:has(option[value='']:checked) {
  color: var(--x-ink-3);
}

select.form-input option {
  background-color: var(--x-card);
  color: var(--x-ink);
}

.form-input:hover {
  border-color: var(--x-line-3);
}

.form-input:focus,
.form-input:active {
  border-color: var(--x-jade);
  background-color: var(--x-tint-3);
  box-shadow: 0 0 0 3px rgba(var(--x-jade-rgb), 0.18);
}

textarea.form-input {
  min-height: 120px;
}

:root .ecp {
  --ecp-field-bg: var(--x-tint-2);
  --ecp-field-border: var(--x-line-2);
  --ecp-page-bg: var(--x-popover);
  --ecp-radius: var(--x-r-sm);
}

:root .ecp-btn {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 400;
}

:root .ecp-menu {
  border-radius: 14px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}

:root .ecp-opt {
  border-radius: 8px;
}

:root .checkbod-list .w-form-label {
  border-radius: var(--x-r-pill);
  border-color: var(--x-line-2);
  background-color: var(--x-tint-2);
  font-size: 14px;
}

:root .checkbod-list .w-form-label::before {
  border-radius: 50%;
}

.form-step-btns {
  background-color: transparent;
  align-items: center;
}

.form-step-button,
.form-step-button.w-button {
  padding: 13px 24px;
  border-radius: var(--x-r-pill);
  border: 1px solid var(--x-action-edge);
  background-color: var(--x-mint);
  background-image: var(--x-grad-action);
  color: var(--x-on-mint);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: var(--x-action-sheen), 0 8px 24px -12px rgba(var(--x-jade-rgb), 0.55);
}

.form-step-button.form-step-button-back {
  border-radius: var(--x-r-pill);
  border-color: var(--x-line-2);
  background-color: var(--x-tint-2);
  background-image: none;
  color: var(--x-ink);
  box-shadow: none;
}

.form-step-btns .btn.btn-secondary {
  background-color: var(--x-mint);
  background-image: var(--x-grad-action);
  color: var(--x-on-mint);
  border-color: var(--x-action-edge);
}

.form-ok-icon {
  color: var(--x-jade);
}

.w-form-fail {
  border-radius: var(--x-r-sm);
  background-color: rgba(var(--x-danger-rgb), 0.12);
  border: 1px solid rgba(var(--x-danger-rgb), 0.3);
  color: var(--x-danger);
}

/* Contact-us modal (product and legal pages) */
.modal-wrapper {
  background-color: rgba(0, 12, 14, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.card-sign-up {
  box-sizing: border-box;
  padding: 32px;
  border-radius: var(--x-r-lg);
  border: 1px solid var(--x-line-jade);
  background: var(--x-grad-highlight);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}

.form-content-2 {
  gap: 16px;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--x-r-pill);
  border: 1px solid var(--x-line-2);
  color: var(--x-ink-2);
}

/* ==========================================================================
   Legal pages (privacy, terms) and 404
   ========================================================================== */

.div-block-24 {
  height: 96px;
  background-color: transparent;
}

.section-2 {
  padding-top: clamp(48px, 6vw, 88px);
}

.section-2 > .container {
  max-width: 880px;
}

.legal-h1 {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--x-line-2);
  font-size: clamp(2.75rem, 1.8rem + 3.4vw, 5rem);
  line-height: 1;
  letter-spacing: var(--x-serif-tracking);
}

.legal-h2,
.section-2 h2 {
  margin-top: 56px;
  margin-bottom: 16px;
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: var(--x-serif-tracking);
  color: var(--x-ink);
}

.section-2 h3 {
  margin-top: 32px;
  font-family: var(--x-serif);
  word-spacing: var(--x-serif-word);
  font-weight: var(--x-serif-weight);
  font-size: 1.4rem;
  color: var(--x-ink);
}

.section-2 p,
.section-2 li,
.legal-rich-text,
.legal-text,
.paragraph {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--x-ink-2);
}

.section-2 p {
  margin-bottom: 14px;
}

.section-2 ul,
.section-2 ol {
  padding-left: 1.3em;
  margin-bottom: 16px;
}

.section-2 li {
  margin-bottom: 6px;
}

.section-2 li::marker {
  color: var(--x-jade);
}

.section-2 strong {
  font-weight: 500;
  color: var(--x-ink);
}

.section-2 .btn {
  display: inline-flex;
  margin-top: 16px;
}

.section-2 a:not(.btn),
.w-richtext a:not(.btn) {
  color: var(--x-jade);
  text-decoration-color: rgba(var(--x-jade-rgb), 0.4);
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive (inner pages)
   ========================================================================== */

@media screen and (max-width: 991px) {

}

@media screen and (max-width: 767px) {

  .request-demo-left-copy {
    height: 140px;
    margin: 8px 8px 0;
  }
}

@media screen and (max-width: 479px) {
  .section-hero-calculator {
    margin: 8px 8px 0;
    border-radius: 22px;
  }

  .request-demo-left-copy {
    display: flex;
  }

  .form-heading-title {
    font-size: 2.4rem;
  }

  .card-sign-up {
    width: calc(100vw - 32px);
    padding: 24px;
  }

  /* Webflow clips .container on phones (overflow: hidden). IX3 leaves some headings shifted
     15% down at the end of their scroll animation, which cut off their last lines. Clip
     sideways only, which is what stops horizontal scrolling. */
  .container {
    overflow: visible;
    overflow-x: clip;
  }

}

/* ==========================================================================
   Motion (js/motion.js): money that settles and moves through one layer
   Every effect here is gated on prefers-reduced-motion: no-preference, so with reduced
   motion the page is the static design.
   ========================================================================== */

/* Hero intro. Until motion.js takes over (.x-intro-ready), the hero copy is hidden, with a
   failsafe that fades it in after 2s should the script never run. */
@keyframes x-intro-failsafe {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js:not(.x-intro-ready) .section-hero:is(.section-no-zoom) :is(.heading-h1, .hero-text, .hero-cta) {
    animation: x-intro-failsafe 0.6s ease-out 2s both;
  }
}

/* Each headline word rises inside its own box. clip-path (not overflow) clips it, so the
   word keeps its text baseline; the box is let out sideways and at the bottom for the
   glyphs' overhang. */
.x-word {
  display: inline-block;
  clip-path: inset(-0.2em -0.3em -0.14em -0.3em);
}

.x-word-in {
  display: inline-block;
}

/* Ledger tick: each digit is a column the width of its final glyph (an invisible sizer),
   with a strip of 0-9 turning behind it. The column is padded out (and pulled back by the
   same negative margin, so layout is untouched) to give the turning digits room to fade:
   while it rolls, motion.js masks it with a gradient measured from the digits' own glyph
   bounds, so neighbouring digits fade out before the figure lands instead of being cut
   off at an edge. The clip is the fallback where masks are unsupported. */
.x-odo-col {
  position: relative;
  display: inline-block;
  padding: 0.3em 0.4em;
  margin: -0.3em -0.4em;
  clip-path: inset(0.24em 0);
}

.x-odo-sizer {
  visibility: hidden;
}

/* Left-aligned like the sizer (letter-spacing included), so the digit the strip lands on
   sits exactly where the plain text will be when it is restored. */
.x-odo-strip {
  position: absolute;
  top: 0.3em;
  left: 0.4em;
  white-space: nowrap;
}

.x-odo-strip > span {
  display: block;
}

/* Architecture: value flow, one 5.2s cycle, only while the diagram is on screen (.is-live).
   Each travel company's chip brightens as value leaves it; a light runs down the dashed
   line under it, clipped to the gap so it emerges from one card's edge and sinks into the
   next; a sweep crosses the layer's capability bar; lights run on down to the rails, whose
   chips brighten as it arrives. Chips and lines share their stagger by position. */
@keyframes x-flow-in {
  0%,
  4% {
    transform: translateY(-28px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  28%,
  100% {
    transform: translateY(44px);
  }
}

@keyframes x-flow-out {
  0%,
  54% {
    transform: translateY(-28px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  78%,
  100% {
    transform: translateY(44px);
  }
}

@keyframes x-sweep {
  0%,
  24% {
    transform: translateX(-100%);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  58%,
  100% {
    transform: translateX(340%);
  }
}

@keyframes x-chip-send {
  0%,
  22%,
  100% {
    border-color: var(--x-line);
    background-color: var(--x-tint-1);
  }
  5% {
    border-color: var(--x-line-jade);
    background-color: rgba(var(--x-jade-rgb), 0.07);
  }
}

@keyframes x-chip-receive {
  0%,
  74%,
  100% {
    border-color: var(--x-line);
    background-color: var(--x-tint-1);
  }
  80% {
    border-color: var(--x-line-jade);
    background-color: rgba(var(--x-jade-rgb), 0.07);
  }
  96% {
    border-color: var(--x-line);
    background-color: var(--x-tint-1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The light stays inside its gap: it never paints over the cards. */
  .mode-items-copy.is-live .connector-item {
    clip-path: inset(0 -4px);
  }

  .mode-items-copy.is-live .connector-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% + var(--x-dx, 0px) - 0.5px);
    width: 2px;
    height: 28px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(var(--x-mint-rgb), 0) 0%, rgba(var(--x-mint-rgb), 0.55) 55%, var(--x-mint) 85%, rgba(var(--x-mint-rgb), 0) 100%);
    animation: x-flow-in 5.2s linear infinite both;
  }

  .mode-items-copy.is-live > .connectors:nth-child(4) .connector-item::after {
    animation-name: x-flow-out;
  }

  .mode-items-copy.is-live > .mode-item-copy:first-child .diagram-label {
    animation: x-chip-send 5.2s ease-in-out infinite both;
  }

  .mode-items-copy.is-live > .mode-item-copy:nth-child(5) .diagram-label {
    animation: x-chip-receive 5.2s ease-in-out infinite both;
  }

  .mode-items-copy.is-live .connector-item:nth-child(2)::after,
  .mode-items-copy.is-live > .mode-item-copy .diagram-label:nth-child(2) { animation-delay: 0.12s; }
  .mode-items-copy.is-live .connector-item:nth-child(3)::after,
  .mode-items-copy.is-live > .mode-item-copy .diagram-label:nth-child(3) { animation-delay: 0.24s; }
  .mode-items-copy.is-live .connector-item:nth-child(4)::after,
  .mode-items-copy.is-live > .mode-item-copy .diagram-label:nth-child(4) { animation-delay: 0.36s; }
  .mode-items-copy.is-live .connector-item:nth-child(5)::after,
  .mode-items-copy.is-live > .mode-item-copy .diagram-label:nth-child(5) { animation-delay: 0.48s; }

  .mode-items-copy .item-expereon .div-block-39 {
    position: relative;
  }

  .mode-items-copy.is-live .item-expereon .div-block-39::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--x-jade-rgb), 0), rgba(var(--x-jade-rgb), 0.2) 55%, rgba(var(--x-mint-rgb), 0.3) 70%, rgba(var(--x-jade-rgb), 0));
    animation: x-sweep 5.2s linear infinite both;
  }
}

/* Before and after: a light runs along each row's arrow, from today to the result (down
   the arrow on phones), and fades into the arrowhead; rows one after another, only while
   the panel is on screen. The clip trims only the start side, so the arrowhead stays. */
@keyframes x-shift-run-x {
  0% {
    transform: translateX(-100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  46% {
    transform: translateX(300%);
    opacity: 1;
  }
  56%,
  100% {
    transform: translateX(300%);
    opacity: 0;
  }
}

@keyframes x-shift-run-y {
  0% {
    transform: translateY(-100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  46% {
    transform: translateY(300%);
    opacity: 1;
  }
  56%,
  100% {
    transform: translateY(300%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .x-shift-panel.is-live .x-shift-track {
    clip-path: inset(-4px -8px -4px 0);
  }

  .x-shift-panel.is-live .x-shift-track::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 9px;
    width: calc((100% - 20px) / 4);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--x-mint-rgb), 0) 0%, rgba(var(--x-mint-rgb), 0.55) 55%, var(--x-mint) 85%, rgba(var(--x-mint-rgb), 0) 100%);
    animation: x-shift-run-x 3.6s linear infinite both;
  }

  .x-shift-panel.is-live .x-shift-row:nth-child(2) .x-shift-track::after { animation-delay: 0.3s; }
  .x-shift-panel.is-live .x-shift-row:nth-child(3) .x-shift-track::after { animation-delay: 0.6s; }

  @media screen and (max-width: 767px) {
    .x-shift-panel.is-live .x-shift-track {
      clip-path: inset(0 -8px -8px -8px);
    }

    .x-shift-panel.is-live .x-shift-track::after {
      top: 0;
      bottom: auto;
      left: 9px;
      width: 2px;
      height: calc((100% - 20px) / 4);
      background: linear-gradient(180deg, rgba(var(--x-mint-rgb), 0) 0%, rgba(var(--x-mint-rgb), 0.55) 55%, var(--x-mint) 85%, rgba(var(--x-mint-rgb), 0) 100%);
      animation-name: x-shift-run-y;
    }
  }
}

/* Footer wordmark: rises out of the footer as the footer is scrolled into view
   (scroll-driven, where supported; elsewhere it is simply there). */
@keyframes x-wordmark {
  from {
    opacity: 0;
    translate: 0 35%;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Timed by the footer, not the wordmark: the wordmark hangs past the footer's clipped
       bottom edge, so its own view timeline never completes. */
    .footer {
      view-timeline: --x-footer block;
    }

    .footer-logo {
      animation: x-wordmark linear both;
      animation-timeline: --x-footer;
      animation-range: entry 20% entry 85%;
    }
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .nav-item-cta:hover,
  :root .header .nav-item-cta:hover,
  .mode-item-default:hover {
    transform: none;
  }

  /* The reduced-motion script jumps IX3's scroll animations to their end state, and many
     section headings end 15% of their height lower (24-60px): far enough to clip the closing
     CTA's button and press headings onto the panels below. Settled means in place. */
  .heading {
    transform: none !important;
  }
}