/* ============================================================
   AION SHARED HEAD STYLES — Webflow Launch Kit
   ============================================================
   Paste this entire block into Webflow:
     Project Settings → Custom Code → Head Code
   WRAPPED IN <style>...</style> tags.

   This is everything every page on aionfi.com needs:
     • Brand design tokens (colors, type, spacing, radii)
     • Base typography + body reset
     • Topbar / mega-menu nav styling
     • Hero base + variants (text-only + image-window)
     • All section components (cards, tables, FAQ, CTA band)
     • Alternating dark/light section system (section.is-light / .is-dark)
     • Sticky-nav inversion on scroll
     • Scroll-triggered ease-in animations
     • Footer styling
     • SEO page components (cards, prose, numbered grids, stat cards)
     • Pricing page extras (pricing-card, addon-card, stats-grid)
     • About page extras (timeline, vm-card, value-card, num-card, team-card)
     • Home v4-classic pillar Lottie wing-pulse animations

   Authored 2026-06-17. Updated alongside the launch kit.

   v26 change (2026-07-14, Chris: mobile elements squishing horizontally
   instead of stacking). Built from v25 (the live Head Code version). Added
   the missing small-screen breakpoints for three multi-column patterns that
   never collapsed on phones:
     1. .cs-hero-grid / .cs-solution-grid / .cs-results-grid (the 5 case-
        study detail pages) — source files stacked these at 1000px/560px but
        the fold into this file dropped the overrides (flagged in the v20 note).
     2. .tier-grid.tier-grid-2 (International Payments) — modifier class
        out-ranked the base .tier-grid mobile rule by specificity.
     3. .seo-stats-grid.seo-stats-grid-3 (Instant Payments, International
        Payments, Lending, Pricing) — same specificity trap as #2.
   DESKTOP-SAFE: every added rule lives inside a @media (max-width: ...) block,
   so nothing changes above those widths. No base-scope rule was touched.
   Action: point Project Settings -> Custom Code -> Head Code at v26.

   v27 change (2026-07-14, Chris, from /lending/overview review). Two more
   mobile fixes, both additive and inside @media blocks (desktop untouched):
     1. .case-grid .case-card — the 3-up sizing rule sat later in the file than
        its own @media(max-width:1000px){flex-basis:100%} rule and won at all
        widths, so case cards squished to ~1/3 on phones (this is the SAME bug as
        the original client-stories screenshot; v26 missed it). Override added
        after the base rule. Fixes client-stories hub + lending.
     2. .compare-table on mobile (Chris's chosen treatment): keep full width +
        horizontal scroll, pin the row-label column (position:sticky), show a
        visible scrollbar, and add a "swipe to compare" cue via .compare-note.
     3. html, body { overflow-x: clip } — the .fx-left/.fx-right scroll-in offsets
        (translateX +/-280px) left below-fold elements parked off-screen right,
        making mobile pages swipe-scroll horizontally by ~240px. Homepage was
        spared (vertical 'up' fx only). clip, not hidden, to preserve sticky/fixed.
   Action: point Head Code at v27.

   v28 change (2026-07-14, Chris: mobile pages STILL swipe-scroll sideways).
   Removed v27's html,body{overflow-x:clip} (it computed to `auto` on the live
   site because Webflow forces html{overflow-y:scroll}, so it never worked;
   also cache-masked). Replaced with a source-level fix: on <=1024px, the
   .fx-right/.fx-left scroll-in animations park and reveal VERTICALLY (translateY
   via the existing fx-up-anim) instead of translateX(+/-280px), so no element is
   ever parked off-screen horizontally and there is nothing to scroll sideways.
   Desktop keeps the original horizontal slide. Action: point Head Code at v28.

   v21 change (2026-06-29, Chris: "any reason why the Breadcrumbs
   aren't showing up on /client-stories/hoosier?"):
   The live site has an undocumented sitewide override pasted directly
   into Project Settings → Custom Code → Head Code (NOT in this file):
     .topbar { position: fixed !important; top:0; left:0; right:0;
               z-index: 100 !important; }
   This forces the nav out of normal flow (it was authored here as
   `position: sticky`, see .topbar below). Most pages compensate with
   their own top padding (e.g. the homepage hero uses padding-top:64px,
   just enough to clear the ~65px-tall fixed nav) — but `.cs-breadcrumb`
   only had 12px of top padding (var(--s-3)), so on every case-study
   detail page (Hoosier, Silver MetalX, Just Date, etc.) the breadcrumb
   bar rendered completely hidden underneath the opaque, fixed nav. Not
   a missing-content bug — the markup/text was always correct. Added
   margin-top: 65px to `.cs-breadcrumb` below to clear the fixed nav.
   ============================================================ */

  /* ============================================================
     AION BANKING — SECONDARY PAGE
     Visual language inherited from v1a (Command Center, product-
     led). Recreates aionfi.com/banking with brand-spec voice and
     local product imagery (graphics/screenshots/banking/).
     ============================================================ */

  :root {
    /* Tier 1 — purple (primary action) */
    --purple-primary: #6C5CE7;
    --purple-hover:   #5A4BD1;
    --purple-surface: #F7F5FF;
    --purple-on-dark: #A78BFA;

    /* Tier 2 — navy (secondary interactive) */
    --navy-default:   #2D3258;
    --navy-hover:     #1E2244;

    /* Tier 3 — neutrals */
    --neutral-0:   #FFFFFF;
    --neutral-50:  #F5F4F8;
    --neutral-100: #ECEAF1;
    --neutral-200: #DCD9E3;
    --neutral-300: #C2BFCD;
    --neutral-500: #6B6B80;
    --neutral-700: #3F3F4F;
    --neutral-900: #1A1A1A;

    /* Tier 4 — semantic */
    --success: #137A3A;
    --amber:   #92600A;
    --muted-red: #B84747;

    /* Brand accent (data viz / logo / AI signature only) */
    --teal:   #00D2FF;
    --blue:   #5B7FFF;
    --violet: #7C3AED;

    /* Dark-canvas tokens (login / marketing dark surfaces) */
    --dark-canvas: #0D0B18;
    --dark-canvas-2: #15132A;
    --dark-card: rgba(255,255,255,0.04);
    --dark-card-border: rgba(255,255,255,0.08);
    --dark-text: #E8E8F0;
    --dark-text-secondary: #B0B5D0;
    --dark-text-tertiary: #8A8FA8;

    /* Typography */
    --font-heading: 'DM Sans', -apple-system, system-ui, sans-serif; /* stand-in for Satoshi */
    --font-data:    'IBM Plex Sans', -apple-system, system-ui, sans-serif;

    /* Spacing — 4px grid */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
    --s-20: 80px; --s-24: 96px;

    /* Radii */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;

    /* Motion */
    --t-fast: 150ms;
    --t-norm: 200ms;
    --t-slow: 300ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.55;
    color: var(--neutral-900);
    background: var(--neutral-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Headings always heading font */
  h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--neutral-900);
  }

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

  .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--s-6);
  }

  /* ===========================================================
     TOP NAV
     =========================================================== */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(13, 11, 24, 0.78);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }
  .nav-logo { display: flex; align-items: center; gap: var(--s-3); }
  .nav-logo svg { display: block; }
  .nav-logo .aion-mark {
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
  }
  .nav-logo .wordmark {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--dark-text);
    letter-spacing: -0.01em;
  }
  /* Footer logo — slightly larger */
  footer .nav-logo .aion-mark { height: 48px; }
  .nav-links {
    display: flex;
    gap: var(--s-6);
    align-items: center;
  }
  .nav-links > a,
  .nav-links .nav-trigger {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    color: var(--dark-text-secondary);
    background: transparent;
    border: 0;
    padding: 8px 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--t-fast) var(--ease-default);
  }
  .nav-links > a:hover,
  .nav-links .nav-trigger:hover { color: var(--dark-text); }

  /* Dropdown */
  .nav-item { position: relative; }
  .nav-trigger::after {
    content: "";
    width: 0; height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    margin-top: 1px;
    opacity: 0.7;
    transition: transform var(--t-fast) var(--ease-default);
  }
  .nav-item:hover .nav-trigger::after,
  .nav-item:focus-within .nav-trigger::after { transform: rotate(180deg); }

  .nav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: -8px;
    min-width: 240px;
    padding: var(--s-2);
    background: rgba(20, 18, 36, 0.96);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--t-norm) var(--ease-default), transform var(--t-norm) var(--ease-default), visibility var(--t-norm) var(--ease-default);
    z-index: 60;
  }
  /* Invisible hover bridge so cursor can move from trigger to menu */
  .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0; right: 0;
    height: 10px;
  }
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    color: var(--dark-text-secondary);
    transition: background var(--t-fast) var(--ease-default), color var(--t-fast) var(--ease-default);
  }
  .nav-dropdown a:hover {
    background: rgba(255,255,255,0.06);
    color: var(--dark-text);
  }
  .nav-dropdown a .desc {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--dark-text-tertiary);
    margin-top: 2px;
  }
  .nav-cta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  /* ===========================================================
     MEGA-MENU DROPDOWNS — same system as v4-classic homepage.
     =========================================================== */
  .nav-item:has(.dd-mega) { position: static; }

  .nav-dropdown.dd-mega {
    min-width: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(4px);
    background: rgba(245, 244, 248, 0.97);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid rgba(13, 11, 24, 0.08);
    box-shadow: 0 24px 60px rgba(13, 11, 24, 0.15);
    padding: 36px 44px;
    display: grid;
    gap: 36px;
  }
  .nav-dropdown.dd-mega.dd-w-wide   { width: 920px; grid-template-columns: 0.85fr 1.6fr; }
  .nav-dropdown.dd-mega.dd-w-medium { width: 740px; grid-template-columns: 0.9fr 1.2fr; }

  .nav-item:hover .nav-dropdown.dd-mega,
  .nav-item:focus-within .nav-dropdown.dd-mega {
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown.dd-mega::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -50vw;
    right: -50vw;
    height: 16px;
  }

  .nav-item.nav-item-shift-mid,
  .nav-item.nav-item-shift-right { /* no-op */ }

  .dd-overview {
    border-right: 1px solid rgba(13, 11, 24, 0.08);
    padding-right: 32px;
    display: flex;
    flex-direction: column;
  }
  .dd-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
    margin-bottom: 14px;
  }
  .dd-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--neutral-900);
    margin: 0 0 12px;
  }
  .dd-body {
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-700);
    margin: 0 0 22px;
    max-width: 28ch;
  }
  .dd-overview .dd-learn-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--purple-primary);
    color: #FFFFFF;
    border-radius: var(--r-sm);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-top: auto;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease-default);
  }
  .dd-overview .dd-learn-more:hover {
    background: var(--purple-hover);
    color: #FFFFFF;
  }

  .dd-features-head {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
    margin-bottom: 18px;
  }
  .dd-features-grid {
    display: grid;
    gap: 22px 32px;
  }
  .dd-w-wide   .dd-features-grid { grid-template-columns: 1fr 1fr; }
  .dd-w-medium .dd-features-grid { grid-template-columns: 1fr; gap: 20px; }

  .nav-dropdown.dd-mega .dd-feature {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    transition: transform var(--t-fast) var(--ease-default);
  }
  .nav-dropdown.dd-mega .dd-feature:hover {
    background: transparent;
    color: inherit;
    transform: translateY(-1px);
  }
  .dd-feature-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--neutral-900);
    letter-spacing: -0.005em;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .dd-feature-title .dd-arrow {
    color: var(--purple-primary);
    font-weight: 700;
    transition: transform var(--t-fast) var(--ease-default);
  }
  .dd-feature:hover .dd-feature-title { color: var(--purple-primary); }
  .dd-feature:hover .dd-feature-title .dd-arrow { transform: translateX(3px); }
  .dd-feature-desc {
    font-family: var(--font-data);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--neutral-700);
    margin: 0;
  }
  .nav-dropdown.dd-mega .dd-bottom-link {
    grid-column: 2 / -1;
    margin-top: 6px;
    padding: 16px 0 2px;
    border-top: 1px solid rgba(13, 11, 24, 0.08);
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--purple-primary);
    background: transparent;
    border-radius: 0;
    display: block;
  }
  .nav-dropdown.dd-mega .dd-bottom-link:hover {
    background: transparent;
    color: var(--neutral-900);
  }

  /* ===========================================================
     STICKY NAV — INVERSION ON SCROLL
     =========================================================== */
  .topbar {
    transition:
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }
  .nav-logo .wordmark,
  .nav-links > a,
  .nav-links .nav-trigger {
    transition: color 220ms ease;
  }
  body.nav-inverted .topbar {
    background: rgba(255, 255, 255, 0.90);
    border-bottom-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 4px 18px rgba(13, 11, 24, 0.06);
  }
  body.nav-inverted .topbar .nav-logo .wordmark { color: var(--neutral-900); }
  body.nav-inverted .topbar .nav-links > a,
  body.nav-inverted .topbar .nav-links .nav-trigger { color: var(--neutral-700); }
  body.nav-inverted .topbar .nav-links > a:hover,
  body.nav-inverted .topbar .nav-links .nav-trigger:hover { color: var(--neutral-900); }
  body.nav-inverted .topbar .nav-cta .btn.on-dark {
    color: #FFFFFF;
    background: var(--purple-primary);
  }
  body.nav-inverted .topbar .nav-cta .btn.btn-ghost-dark {
    color: var(--neutral-900);
    border-color: rgba(13, 11, 24, 0.18);
    background: transparent;
  }
  body.nav-inverted .topbar .nav-cta .btn.btn-ghost-dark:hover {
    border-color: rgba(13, 11, 24, 0.40);
    background: rgba(13, 11, 24, 0.05);
  }

  /* ===========================================================
     MOBILE NAV — hamburger toggle + accordion dropdowns < 880px
     =========================================================== */
  .nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 70;
  }
  .nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dark-text);
    border-radius: 2px;
    transition: transform 220ms var(--ease-default), opacity 220ms var(--ease-default), background-color 220ms ease;
  }
  body.nav-inverted .nav-burger span { background: var(--neutral-900); }
  .nav-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-active span:nth-child(2) { opacity: 0; }
  .nav-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Click-to-toggle dropdown state — works at all widths, complements :hover/:focus-within */
  .nav-item.is-open .nav-trigger::after { transform: rotate(180deg); }
  .nav-item.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-item.is-open .nav-dropdown.dd-mega { transform: translateX(-50%) translateY(0); }

  @media (max-width: 880px) {
    .nav-burger { display: flex; }

    /* `.topbar` carries backdrop-filter for its sticky frosted-glass look. In
       WebKit/Blink, backdrop-filter on an ancestor creates a NEW containing
       block for position:fixed descendants — so without this override,
       `.nav-links`/`.nav-cta` silently get confined to the topbar's own
       ~64px-tall box instead of the actual viewport, and the "full-screen"
       mobile panel never visibly expands. Disable it only while the menu is open. */
    body.nav-mobile-open .topbar {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .nav-links,
    .nav-cta {
      position: fixed;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      background: rgba(13, 11, 24, 0.98);
      backdrop-filter: saturate(180%) blur(18px);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      gap: 0;
      transform: translateX(100%);
      transition: transform 280ms var(--ease-default);
      visibility: hidden;
    }
    /* `.nav-links` is the scrollable menu panel; `.nav-cta` is pinned as its
       own non-overlapping footer bar (93px = 20px+32px padding + 1px border
       + 40px button height) so the two no longer sit on top of each other.
       `overflow-y: auto` so an open mega-menu's expanded accordion content
       (which can exceed the panel's fixed top:64/bottom:93 height) can be
       scrolled into view — `auto` only activates when content actually
       overflows, so the closed/short state is unaffected. `overscroll-behavior:
       contain` stops the scroll gesture from "chaining" into whatever's
       behind the fixed panel once you hit the top/bottom of this list (the
       iOS rubber-band/bounce-through bug that `overflow-y: hidden` was
       originally added to dodge) — `-webkit-overflow-scrolling: touch` keeps
       the scroll momentum feeling native on iOS. */
    .nav-links {
      top: 64px;
      bottom: 93px;
      z-index: 65;
      padding: var(--s-5);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .nav-cta {
      top: auto;
      bottom: 0;
      z-index: 66;
      flex-direction: row;
      gap: var(--s-3);
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: var(--s-5) var(--s-5) var(--s-8);
    }
    body.nav-mobile-open .nav-links,
    body.nav-mobile-open .nav-cta {
      transform: translateX(0);
      visibility: visible;
    }
    /* The mobile panel must always render dark, even if the page was
       already scrolled past the nav-inverted threshold before the menu
       was opened. JS (aion-shared-footer.js) strips `nav-inverted` from
       <body> for the duration the menu is open, so this selector should
       normally never match — kept as a defensive fallback only. */
    body.nav-inverted.nav-mobile-open .nav-links,
    body.nav-inverted.nav-mobile-open .nav-cta {
      background: rgba(13, 11, 24, 0.98);
    }

    .nav-links > a,
    .nav-links .nav-trigger {
      width: 100%;
      justify-content: space-between;
      padding: 16px 4px;
      font-size: 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    body.nav-inverted .nav-links > a,
    body.nav-inverted .nav-links .nav-trigger {
      border-bottom-color: rgba(13, 11, 24, 0.08);
    }

    .nav-item { width: 100%; }

    /* `!important` on position/opacity/visibility/width/left below is
       defensive, not redundant: aion-homepage-styles-v3.css (which loads
       AFTER this file on every page) carries its own legacy, unconditional,
       non-media-queried copy of `.nav-dropdown`/`.dd-mega` (the original
       desktop-only styling these mobile rules are meant to override). Same
       selector + same specificity + later file in the cascade = the legacy
       copy silently wins on every property it shares with this block,
       regardless of source order inside THIS file. `!important` is the only
       thing that reliably beats that, independent of which file happens to
       load last. Without it, the mobile dropdown reset looks correct here
       but the live, rendered panel still uses desktop position/size/opacity. */
    .nav-dropdown {
      position: static !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      min-width: 0;
      width: 100% !important;
      left: auto !important;
      right: auto !important;
      max-height: 0;
      overflow: hidden;
      padding: 0;
      margin: 0;
      border: 0;
      box-shadow: none;
      background: transparent;
      transition: max-height 280ms var(--ease-default);
    }
    .nav-dropdown::before { display: none; }
    .nav-item.is-open .nav-dropdown {
      max-height: 2000px;
      padding: var(--s-2) 0 var(--s-5);
    }

    /* `.dd-mega.dd-w-wide`/`.dd-w-medium` set an unconditional `width:920px`/
       `740px` (3-class selector, higher specificity than the old 2-class
       mobile reset below), so the panel kept its desktop width and rendered
       as an oversized box shoved off to the right. Match their specificity
       here, later in the cascade, so mobile wins. Same story for the light
       desktop background — override it on `.dd-mega` itself, not just the
       base `.nav-dropdown`. `!important` here for the same reason as the
       base `.nav-dropdown` block above — aion-homepage-styles-v3.css
       redeclares `width: 920px`/`740px` on these exact selectors, unguarded
       by any media query, and being the later-loaded file it would
       otherwise win this tie. */
    /* `.nav-dropdown.dd-mega` (2-class selector) carries its own unconditional
       `padding: 36px 44px` + `border: 1px solid ...` from the desktop styles
       (aion-homepage-styles-v3.css), which beats the 1-class `.nav-dropdown`
       mobile reset on specificity alone — no cross-file load-order tie needed.
       `max-height` only constrains the content box (default box-sizing), so
       that padding/border still rendered as ~74px of real box height even at
       max-height:0, leaving just enough of a gap for the first line (the
       eyebrow heading) to peek through the overflow:hidden clip before any
       item was tapped open. Zero out padding/border/shadow here too so the
       closed panel truly collapses to 0px. */
    .nav-dropdown.dd-mega,
    .nav-dropdown.dd-mega.dd-w-wide,
    .nav-dropdown.dd-mega.dd-w-medium {
      display: block !important;
      width: 100% !important;
      background: transparent !important;
      padding: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    .dd-overview {
      border-right: 0;
      padding: 0 0 var(--s-4);
      margin-bottom: var(--s-4);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    /* `!important` on the colors below for the same reason as the
       position/width fix above: aion-homepage-styles-v3.css redeclares
       light-mode colors (dark text) for these exact selectors, unguarded by
       any media query, and wins the cascade tie without it — rendering dark
       text on the dark mobile panel background. */
    .dd-eyebrow { color: var(--purple-on-dark) !important; }
    .dd-heading { color: var(--dark-text) !important; }
    .dd-body { color: var(--dark-text-secondary) !important; }
    .dd-features-head { color: var(--dark-text-tertiary) !important; }
    .dd-w-wide .dd-features-grid,
    .dd-w-medium .dd-features-grid { grid-template-columns: 1fr; gap: 14px; }
    .dd-feature-title { color: var(--dark-text) !important; }
    .dd-feature-desc { color: var(--dark-text-secondary) !important; }
    .nav-dropdown.dd-mega .dd-bottom-link {
      grid-column: 1;
      color: var(--purple-on-dark) !important;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .nav-dropdown.dd-mega .dd-bottom-link:hover { color: var(--dark-text) !important; }

    body.nav-inverted .dd-overview { border-bottom-color: rgba(13,11,24,0.08); }
    body.nav-inverted .dd-eyebrow { color: var(--purple-primary); }
    body.nav-inverted .dd-heading,
    body.nav-inverted .dd-feature-title { color: var(--neutral-900); }
    body.nav-inverted .dd-body,
    body.nav-inverted .dd-feature-desc,
    body.nav-inverted .dd-features-head { color: var(--neutral-700); }
    body.nav-inverted .nav-dropdown.dd-mega .dd-bottom-link {
      color: var(--purple-primary);
      border-top-color: rgba(13,11,24,0.08);
    }
    body.nav-inverted .nav-dropdown.dd-mega .dd-bottom-link:hover { color: var(--neutral-900); }

    .nav-cta .btn { flex: 1; justify-content: center; }
  }

  body.nav-mobile-open { overflow: hidden; }

  /* ===========================================================
     SCROLL-TRIGGERED MICRO-INTERACTIONS — ease-in element anims.
     =========================================================== */
  .fx {
    opacity: 0;
    will-change: opacity, transform;
  }
  .fx.fx-up    { transform: translateY(28px); }
  .fx.fx-right { transform: translateX(280px); }
  .fx.fx-left  { transform: translateX(-280px); }

  .fx.is-in.fx-up    { animation: fx-up-anim    0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .fx.is-in.fx-right { animation: fx-right-anim 1.30s cubic-bezier(0.12, 1, 0.22, 1) forwards; }
  .fx.is-in.fx-left  { animation: fx-left-anim  1.30s cubic-bezier(0.12, 1, 0.22, 1) forwards; }

  @keyframes fx-up-anim    { to { opacity: 1; transform: translateY(0); } }
  @keyframes fx-right-anim { to { opacity: 1; transform: translateX(0); } }
  @keyframes fx-left-anim  { to { opacity: 1; transform: translateX(0); } }

  @media (prefers-reduced-motion: reduce) {
    .fx, .fx.is-in {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
  }

  /* ===========================================================
     SECTION CONTRAST — class-driven palette.
     Apply .is-light or .is-dark on any <section> to control its
     background. `section.is-X` (specificity 0,1,1) beats single-
     class legacy rules like `.integrated { background: ... }`.
     =========================================================== */
  .hero.seo-hero {
    /* SEO pages: smaller, header-style hero — no 100vh.
       Scoped to .hero.seo-hero (0,2,0) so it reliably beats the
       later, unscoped dashboard `.hero { padding: ... }` rule
       (0,1,0) under "HERO — DARK CANVAS WITH LIVE DASHBOARD" —
       same-specificity, later-wins cascade bug fixed 2026-06-26.
       Top bumped 80px -> 96px 2026-06-27: Chris asked for more
       space above the eyebrow on every non-100vh-hero page. */
    padding-top: var(--s-24);
    padding-bottom: var(--s-16);
  }
  .hero.seo-hero .hero-single {
    max-width: 1000px;
    margin: 0 auto;
  }
  .hero.seo-hero h1 {
    font-size: clamp(36px, 4.8vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .hero.seo-hero p.lede {
    font-size: 18px;
    max-width: 720px;
  }
  section.is-light { background: var(--neutral-0); }
  section.is-dark  { background: #0F0E22; color: var(--dark-text); }

  /* =========================================================================
     LIGHT-SECTION OVERRIDES
     ========================================================================= */
  .is-light .section-head h2,
  .is-light .pm-head h2 { color: var(--neutral-900); }
  .is-light .section-eyebrow { color: var(--purple-primary); }
  .is-light .section-head p { color: var(--neutral-700); }
  .is-light .integrated-card,
  .is-light .flow-card,
  .is-light .case-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .is-light .integrated-card h3,
  .is-light .flow-card h3,
  .is-light .case-card h3 { color: var(--neutral-900); }
  .is-light .integrated-card p,
  .is-light .flow-card p,
  .is-light .case-card p { color: var(--neutral-700); }
  .is-light .integrated-card .num,
  .is-light .flow-num { color: var(--purple-primary); }
  .is-light .integrated-lead .eyebrow { color: var(--purple-primary); }
  .is-light .integrated-lead h2       { color: var(--neutral-900); }
  .is-light .integrated-lead p        { color: var(--neutral-700); }
  .is-light .faq-item {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
  }
  .is-light .faq-item summary { color: var(--neutral-900); }
  .is-light .faq-item summary:hover { background: rgba(13, 11, 24, 0.02); }
  .is-light .faq-item .a p { color: var(--neutral-700); }
  .is-light .faq-item[open] { background: #FFFFFF; }

  /* =========================================================================
     DARK-SECTION OVERRIDES — applied to any section with .is-dark. Flips
     copy + card surfaces from light-canvas to dark-canvas styling. The base
     CSS on this page assumes light canvas, so dark sections need explicit
     light-on-dark colors to remain readable.
     ========================================================================= */
  /* Section heading + eyebrow + lede */
  .is-dark .section-head h2,
  .is-dark .pm-head h2 { color: var(--dark-text); }
  .is-dark .section-eyebrow { color: var(--purple-on-dark); }
  .is-dark .section-head p,
  .is-dark .section-head .lede,
  .is-dark .pm-head .lede { color: var(--dark-text-secondary); }

  /* Body copy + headings inside dark sections */
  .is-dark h3,
  .is-dark h4 { color: var(--dark-text); }
  .is-dark p  { color: var(--dark-text-secondary); }
  .is-dark ul li,
  .is-dark ol li { color: var(--dark-text-secondary); }
  .is-dark .bullet,
  .is-dark .check { color: var(--purple-on-dark); }

  /* Card surfaces inside dark sections flip to dark glass */
  /* Card surfaces inside dark sections flip to dark glass — except
     .integrated-card, which stays white on dark by design. */
  .is-dark .pillar,
  .is-dark .module-card,
  .is-dark .ind-card,
  .is-dark .ind-pill,
  .is-dark .qualify-card,
  .is-dark .team-card,
  .is-dark .case-card,
  .is-dark .flow-card {
    background: var(--dark-card);
    border-color: var(--dark-card-border);
    color: var(--dark-text);
    box-shadow: none;
  }
  .is-dark .pillar h3,
  .is-dark .module-card h3,
  .is-dark .ind-card h3,
  .is-dark .ind-pill .label,
  .is-dark .qualify-card h3,
  .is-dark .team-card h3,
  .is-dark .case-card h3,
  .is-dark .flow-card h3 { color: var(--dark-text); }
  .is-dark .pillar p,
  .is-dark .module-card p,
  .is-dark .ind-card p,
  .is-dark .qualify-card p,
  .is-dark .team-card p,
  .is-dark .case-card p,
  .is-dark .flow-card p { color: var(--dark-text-secondary); }
  .is-dark .integrated-card .num,
  .is-dark .flow-num,
  .is-dark .module-num,
  .is-dark .pillar .pillar-meta .tag,
  .is-dark .team-body .role { color: var(--purple-on-dark); }

  /* Team card photo wrapper background */
  .is-dark .portrait,
  .is-dark .team-photo { background: rgba(255, 255, 255, 0.03); }

  /* CTA band — h2 inverts; buttons keep their on-dark variants */
  .is-dark.cta-band h2,
  .is-dark .cta-band-inner h2 { color: var(--dark-text); }

  /* Compare table — Credit "cost-compare" section. The table itself is
     a white card by design (legacy .compare-table-wrap = neutral-0 bg
     with dark text). It floats inside the dark section like the
     integrated-card pattern on Platform — so NO is-dark text overrides
     on the table; let the legacy dark-on-white styling control. */

  /* Arrow links and section-eyebrow on dark */
  .is-dark .arrow-link { color: var(--purple-on-dark); }
  .is-dark .arrow-link:hover { color: var(--dark-text); }

  /* =========================================================================
     LOGO STRIP — image-based logos instead of company names.
     ========================================================================= */
  .logo-strip ul {
    gap: var(--s-10);
  }
  .logo-strip li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
  }
  .logo-strip li img {
    max-height: 100%;
    width: auto;
    max-width: 208px;
    display: block;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.70);
    transition: filter var(--t-norm) var(--ease-default), opacity var(--t-norm) var(--ease-default);
  }
  .logo-strip li img:hover {
    filter: grayscale(100%) opacity(1);
  }
  .logo-strip li.logo-stub {
    height: 32px;
    padding: 0 14px;
    border: 1px dashed var(--neutral-300);
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: var(--neutral-500);
    letter-spacing: -0.005em;
  }
  .btn {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    border-radius: var(--r-sm);
    padding: 0 var(--s-5);
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    transition: all var(--t-norm) var(--ease-default);
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--purple-primary);
    color: #FFFFFF;
  }
  .btn-primary:hover { background: var(--purple-hover); }
  .btn-primary.on-dark {
    background: var(--purple-on-dark);
    color: var(--dark-canvas);
  }
  .btn-primary.on-dark:hover { background: #C4B5FD; }
  .btn-ghost-dark {
    background: transparent;
    color: var(--dark-text);
    border: 1px solid rgba(255,255,255,0.16);
  }
  .btn-ghost-dark:hover { background: rgba(255,255,255,0.06); }
  .btn-ghost-light {
    background: transparent;
    color: var(--navy-default);
  }
  .btn-ghost-light:hover { background: var(--neutral-50); }

  /* ===========================================================
     HERO — DARK CANVAS WITH LIVE DASHBOARD
     =========================================================== */
  .hero {
    position: relative;
    background: var(--dark-canvas);
    color: var(--dark-text);
    overflow: hidden;
    padding: var(--s-16) 0 var(--s-24);
  }

  /* focused gradient accent — "thin lines, border treatments"
     NOT diffuse atmospheric glow (per AION_VISUAL_IDENTITY) */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1100px 500px at 85% -10%, rgba(124, 58, 237, 0.18), transparent 60%),
      radial-gradient(900px 480px at -10% 110%, rgba(0, 210, 255, 0.10), transparent 60%);
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  }

  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--s-16);
    align-items: center;
  }
  @media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--s-12); }
    .hero-grid > * { min-width: 0; }
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dark-text-secondary);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
  }
  .hero-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18); }
    50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  }

  .hero h1 {
    color: var(--dark-text);
    font-size: clamp(40px, 5.4vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-top: var(--s-6);
    margin-bottom: var(--s-6);
  }
  .hero h1 .accent {
    background: linear-gradient(135deg, #00D2FF 0%, #5B7FFF 40%, #A78BFA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero p.lede {
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.55;
    color: var(--dark-text-secondary);
    max-width: 520px;
    margin-bottom: var(--s-8);
  }
  .hero-actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-8);
  }
  .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6) var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .hero-trust .trust-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hero-trust .num {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-text);
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
  }
  .hero-trust .label {
    font-size: 12px;
    color: var(--dark-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* ===========================================================
     LIVE DASHBOARD CARD — RIGHT SIDE OF HERO
     =========================================================== */
  .dash {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
  /* AI signature: gradient left border */
  .dash::before {
    content: "";
    position: absolute;
    left: 0; top: 24px; bottom: 24px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #1A1A1A 0%, #C2BFCD 100%);
  }

  .dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--s-5);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .dash-title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
  .dash-title .biz {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--dark-text);
  }
  .dash-title .role {
    font-size: 11px;
    color: var(--dark-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .dash-now {
    font-size: 11px;
    color: var(--dark-text-tertiary);
    font-feature-settings: "tnum";
  }

  /* Top stat row */
  .stat-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
  }
  .stat {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-md);
    padding: var(--s-4);
  }
  .stat .label {
    font-size: 11px;
    color: var(--dark-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .stat .value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    color: var(--dark-text);
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
  }
  .stat.primary .value {
    font-size: 32px;
  }
  .stat .delta {
    margin-top: 6px;
    font-size: 12px;
    color: #4ADE80;
    font-feature-settings: "tnum";
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Sparkline */
  .spark-wrap {
    margin-top: var(--s-3);
    height: 36px;
  }

  /* Credit utilization */
  .credit {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-bottom: var(--s-5);
  }
  .credit-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-3);
  }
  .credit-head .lbl {
    font-size: 11px;
    color: var(--dark-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .credit-head .lim {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--dark-text-secondary);
    font-feature-settings: "tnum";
  }
  .credit-bar {
    position: relative;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
  }
  .credit-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    background: linear-gradient(90deg, #1A1A1A 0%, #C2BFCD 100%);
    border-radius: 999px;
    animation: fill-grow 1600ms var(--ease-default) both;
  }
  @keyframes fill-grow {
    from { width: 0%; }
    to { width: 38%; }
  }
  .credit-foot {
    margin-top: var(--s-3);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--dark-text-secondary);
    font-feature-settings: "tnum";
  }
  .credit-foot .drawn { color: var(--dark-text); font-weight: 500; }

  /* "Aion was ON" feed */
  .feed {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-md);
    padding: var(--s-4);
  }
  .feed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-3);
  }
  .feed-head .lbl {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }
  .feed-head .lbl .sparkle {
    color: var(--purple-on-dark);
    font-size: 14px;
  }
  .feed-head .count {
    font-size: 11px;
    color: var(--dark-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .feed ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .feed li {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
  }
  .feed li:last-child { border-bottom: 0; }
  .feed li .icon {
    color: var(--purple-on-dark);
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 1.3;
    margin-top: 2px;
  }
  .feed li .what {
    color: var(--dark-text-secondary);
    line-height: 1.5;
  }
  .feed li .what strong {
    color: var(--dark-text);
    font-weight: 500;
  }
  .feed li .when {
    font-size: 11px;
    color: var(--dark-text-tertiary);
    font-feature-settings: "tnum";
    white-space: nowrap;
  }
  .feed li.fade-in {
    animation: fade-in 600ms var(--ease-default) both;
  }
  .feed li:nth-child(1) { animation-delay: 200ms; }
  .feed li:nth-child(2) { animation-delay: 350ms; }
  .feed li:nth-child(3) { animation-delay: 500ms; }
  .feed li:nth-child(4) { animation-delay: 650ms; }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ===========================================================
     LOGO STRIP
     =========================================================== */
  .logo-strip {
    background: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-100);
    padding: var(--s-8) 0;
  }
  .logo-strip-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-5);
  }
  .logo-strip .lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--neutral-500);
    font-weight: 500;
  }
  .logo-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-12);
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0; margin: 0;
  }
  .logo-strip li {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    color: var(--neutral-300);
    letter-spacing: -0.01em;
  }

  /* ===========================================================
     SECTION: WHAT AION DOES (3-up)
     =========================================================== */
  .section { padding: var(--s-24) 0; }
  .section-head {
    max-width: 720px;
    margin-bottom: var(--s-12);
  }
  .section-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
    font-weight: 500;
    margin-bottom: var(--s-3);
  }
  .section-head h2 {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
  }
  .section-head p {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--neutral-500);
    max-width: 620px;
  }

  .three-up {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }
  @media (max-width: 880px) {
    .three-up { grid-template-columns: 1fr; }
  }
  .pillar {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    transition: transform var(--t-norm) var(--ease-default), box-shadow var(--t-norm) var(--ease-default), border-color var(--t-norm) var(--ease-default);
  }
  .pillar:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(45, 50, 88, 0.06);
    border-color: var(--neutral-200);
  }
  .pillar .icon-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--purple-surface);
    color: var(--purple-primary);
    margin-bottom: var(--s-5);
  }
  .pillar h3 {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: var(--s-3);
  }
  .pillar p {
    color: var(--neutral-500);
    margin: 0 0 var(--s-5);
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.55;
  }
  .pillar .pillar-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
  }
  .tag {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-700);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    padding: 4px 8px;
    border-radius: 4px;
  }
  /* Text link variant A — persistent underline */
  .text-link {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--navy-default);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--t-fast) var(--ease-default), background var(--t-fast) var(--ease-default);
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .text-link:hover { background: var(--neutral-50); color: var(--navy-hover); }
  /* Variant C — arrow nav, 600 weight, trailing → */
  .arrow-link {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--navy-default);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--t-norm) var(--ease-default), background var(--t-fast) var(--ease-default), color var(--t-fast) var(--ease-default);
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: 4px;
  }
  .arrow-link:hover { background: var(--neutral-50); color: var(--navy-hover); gap: 10px; }

  /* Pillar image — product-led iteration */
  .pillar.with-image {
    padding-top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .pillar-image-wrap {
    margin: 0 calc(var(--s-8) * -1) var(--s-6);
    background: linear-gradient(180deg, rgba(13,11,24,0.04), rgba(13,11,24,0.10));
    padding: var(--s-6) var(--s-6) 0;
    border-bottom: 1px solid var(--neutral-100);
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
  }
  .pillar-image-wrap img {
    display: block;
    max-width: 88%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom center;
    /* Subtle elevation, not a hard drop shadow */
    filter: drop-shadow(0 12px 24px rgba(45, 50, 88, 0.10));
  }
  .pillar.with-image > .pillar-content {
    padding: 0 var(--s-8) var(--s-8);
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* ===========================================================
     SECTION: SEE THE PRODUCT (desktop product moment)
     =========================================================== */
  .product-moment {
    background: var(--dark-canvas);
    color: var(--dark-text);
    padding: var(--s-24) 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .product-moment::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 460px at 50% -10%, rgba(124, 58, 237, 0.16), transparent 60%),
      radial-gradient(700px 360px at 10% 110%, rgba(0, 210, 255, 0.08), transparent 60%);
    pointer-events: none;
  }
  .product-moment .container { position: relative; }
  .product-moment .pm-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-12);
  }
  .product-moment .eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-on-dark);
    font-weight: 500;
    margin-bottom: var(--s-3);
  }
  .product-moment h2 {
    color: var(--dark-text);
    font-size: clamp(32px, 4.2vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-5);
  }
  .product-moment p.lede {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--dark-text-secondary);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 580px;
  }
  .product-moment .device-shot {
    position: relative;
    text-align: center;
  }
  .product-moment .device-shot img {
    display: block;
    width: 100%;
    max-width: 1080px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 40px 80px rgba(0,0,0,0.5));
  }

  /* ===========================================================
     SECTION: PROOF / NUMBERS BLOCK (alternating dark)
     =========================================================== */
  .proof {
    background: var(--neutral-50);
    padding: var(--s-24) 0;
  }
  .proof-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-16);
    align-items: center;
  }
  @media (max-width: 1024px) {
    .proof-grid { grid-template-columns: 1fr; }
  }
  .proof-grid h2 {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-5);
  }
  .proof-grid p {
    font-family: var(--font-heading);
    font-size: 17px;
    color: var(--neutral-500);
    line-height: 1.55;
    max-width: 520px;
    margin: 0 0 var(--s-8);
  }
  .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-1);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    background: var(--neutral-0);
    overflow: hidden;
  }
  .stat-cell {
    padding: var(--s-8);
    background: var(--neutral-0);
    position: relative;
  }
  .stat-cell .num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--neutral-900);
    font-feature-settings: "tnum";
    margin-bottom: var(--s-3);
  }
  .stat-cell .num .unit {
    font-size: 24px;
    color: var(--neutral-500);
    font-weight: 500;
  }
  .stat-cell .desc {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--neutral-500);
    line-height: 1.45;
  }

  /* ===========================================================
     SECTION: MOBILE — product on every device
     =========================================================== */
  .device-section {
    background: var(--dark-canvas);
    color: var(--dark-text);
    padding: var(--s-24) 0;
    position: relative;
    overflow: hidden;
  }
  .device-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 380px at 50% 110%, rgba(124, 58, 237, 0.16), transparent 60%),
      radial-gradient(700px 320px at 90% -10%, rgba(0, 210, 255, 0.08), transparent 60%);
    pointer-events: none;
  }
  .device-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--s-16);
    align-items: center;
  }
  @media (max-width: 1024px) {
    .device-grid { grid-template-columns: 1fr; gap: var(--s-10); }
  }
  .device-copy .eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-on-dark);
    font-weight: 500;
    margin-bottom: var(--s-3);
  }
  .device-copy h2 {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--dark-text);
    margin-bottom: var(--s-5);
  }
  .device-copy p {
    font-family: var(--font-heading);
    font-size: 17px;
    color: var(--dark-text-secondary);
    line-height: 1.55;
    max-width: 460px;
    margin: 0 0 var(--s-6);
  }
  .device-image {
    position: relative;
  }
  .device-image img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 40px 80px rgba(0,0,0,0.5));
  }

  /* ===========================================================
     BANKING — REAL PRODUCT IMAGE IN HERO
     =========================================================== */
  .hero-product {
    position: relative;
  }
  .hero-product img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .hero-product .gradient-frame {
    position: absolute;
    left: -8px;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #1A1A1A 0%, #C2BFCD 100%);
    opacity: 0.7;
  }
  @media (max-width: 1080px) {
    .hero-product .gradient-frame { display: none; }
  }

  /* ===========================================================
     BANKING — FEATURE SPOTLIGHT (alternating two-column)
     =========================================================== */
  .spotlight {
    padding: var(--s-24) 0;
    background: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-100);
  }
  .spotlight.alt {
    background: var(--neutral-50);
  }
  .spotlight-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--s-16);
    align-items: center;
  }
  .spotlight.reversed .spotlight-grid {
    grid-template-columns: 1.15fr 1fr;
  }
  .spotlight.reversed .spotlight-copy {
    order: 2;
  }
  .spotlight.reversed .spotlight-image {
    order: 1;
  }
  @media (max-width: 1024px) {
    .spotlight-grid,
    .spotlight.reversed .spotlight-grid { grid-template-columns: 1fr; gap: var(--s-10); }
    .spotlight.reversed .spotlight-copy { order: 1; }
    .spotlight.reversed .spotlight-image { order: 2; }
  }

  .spotlight-copy .eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
    font-weight: 500;
    margin-bottom: var(--s-3);
  }
  .spotlight-copy h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
  }
  .spotlight-copy p {
    font-family: var(--font-heading);
    font-size: 17px;
    color: var(--neutral-500);
    line-height: 1.55;
    margin: 0 0 var(--s-6);
    max-width: 460px;
  }
  .spotlight-copy ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-6);
  }
  .spotlight-copy ul li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--neutral-100);
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--neutral-900);
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--s-3);
    align-items: start;
    line-height: 1.5;
  }
  .spotlight-copy ul li:last-child { border-bottom: 0; }
  .spotlight-copy ul li .bullet {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--purple-surface);
    color: var(--purple-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    font-size: 9px;
    flex-shrink: 0;
  }

  .spotlight-image {
    position: relative;
  }
  .spotlight-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--neutral-200);
    filter: drop-shadow(0 30px 60px rgba(45, 50, 88, 0.10));
  }

  /* ===========================================================
     BANKING — FEES (three checkmark items)
     =========================================================== */
  .fees {
    padding: var(--s-24) 0;
    background: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-100);
  }
  .fees-head {
    max-width: 720px;
    margin-bottom: var(--s-12);
  }
  .fees-head .eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
    font-weight: 500;
    margin-bottom: var(--s-3);
  }
  .fees-head h2 {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
  }
  .fees-head p {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--neutral-500);
    line-height: 1.55;
    max-width: 580px;
    margin: 0;
  }
  .fees-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 880px) {
    .fees-grid { grid-template-columns: 1fr; }
  }
  .fee-item {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--s-4);
    align-items: start;
  }
  .fee-item .check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--purple-surface);
    color: var(--purple-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .fee-item h3 {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: var(--s-2);
    color: var(--neutral-900);
  }
  .fee-item p {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--neutral-500);
    margin: 0;
    line-height: 1.45;
  }

  /* ===========================================================
     BANKING — INDUSTRIES (icon grid)
     =========================================================== */
  .industries-strip {
    padding: var(--s-20) 0;
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-100);
  }
  .industries-strip h3 {
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--neutral-500);
    font-weight: 500;
    font-family: var(--font-data);
    margin-bottom: var(--s-8);
  }
  .industries-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 880px) {
    .industries-list { grid-template-columns: repeat(2, 1fr); }
  }
  .ind-pill {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-100);
    border-radius: var(--r-lg);
    padding: var(--s-6) var(--s-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    text-align: center;
    transition: all var(--t-norm) var(--ease-default);
  }
  .ind-pill:hover {
    border-color: var(--neutral-300);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(45, 50, 88, 0.06);
  }
  .ind-pill .icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--neutral-50);
    color: var(--navy-default);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ind-pill .label {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    color: var(--neutral-900);
    line-height: 1.3;
  }

  /* ===========================================================
     BANKING — TESTIMONIALS (3-up)
     =========================================================== */
  .testi-section {
    padding: var(--s-24) 0;
    background: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-100);
  }
  .testi-head {
    max-width: 720px;
    margin-bottom: var(--s-12);
  }
  .testi-head .eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
    font-weight: 500;
    margin-bottom: var(--s-3);
  }
  .testi-head h2 {
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
  }
  .testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 880px) {
    .testi-grid { grid-template-columns: 1fr; }
  }
  .testi-card {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }
  .testi-card .mark {
    color: var(--purple-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 0.6;
  }
  .testi-card blockquote {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    color: var(--neutral-900);
    line-height: 1.5;
    letter-spacing: -0.01em;
    flex: 1;
  }
  .testi-card .attr {
    padding-top: var(--s-4);
    border-top: 1px solid var(--neutral-200);
  }
  .testi-card .attr .name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--neutral-900);
    letter-spacing: -0.01em;
  }
  .testi-card .attr .role {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--neutral-500);
    margin-top: 2px;
  }

  /* ===========================================================
     SECTION: VERTICALS (manufacturing / logistics / accounting)
     =========================================================== */
  .verticals {
    padding: var(--s-24) 0;
    background: var(--neutral-0);
  }
  .vert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 880px) {
    .vert-grid { grid-template-columns: 1fr; }
  }
  .vert-card {
    border: 1px solid var(--neutral-100);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    background: var(--neutral-0);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    transition: border-color var(--t-norm) var(--ease-default), background var(--t-norm) var(--ease-default);
    overflow: hidden;
  }
  .vert-card:hover {
    border-color: var(--neutral-200);
    background: var(--neutral-50);
  }
  /* Persona portrait at the top of each vert-card.
     Treatment per AION_IMAGERY.md: light desaturation + cool-tint overlay. */
  .vert-card .vert-image {
    position: relative;
    margin: calc(var(--s-8) * -1) calc(var(--s-8) * -1) 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--neutral-50);
  }
  .vert-card .vert-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    filter: saturate(0.85) brightness(0.96);
    transition: transform var(--t-slow, 300ms) var(--ease-default);
  }
  .vert-card:hover .vert-image img {
    transform: scale(1.02);
  }
  .vert-card .vert-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(0, 210, 255, 0.06),
      rgba(91, 127, 255, 0.06),
      rgba(124, 58, 237, 0.06)
    );
    mix-blend-mode: color;
    pointer-events: none;
  }
  .vert-card .vert-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--neutral-500);
  }
  .vert-card h3 {
    font-size: 20px;
    line-height: 1.25;
  }
  .vert-card .vert-quote {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--neutral-700);
    line-height: 1.5;
    border-left: 2px solid var(--purple-primary);
    padding-left: var(--s-3);
  }
  .vert-card .vert-meta {
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--neutral-100);
    font-size: 12px;
    color: var(--neutral-500);
    display: flex;
    justify-content: space-between;
  }

  /* ===========================================================
     SECTION: AI BANNER — ambient gradient, the AI surface
     =========================================================== */
  .ai-banner-wrap {
    padding: var(--s-12) 0 var(--s-24);
    background: var(--neutral-0);
  }
  .ai-banner {
    position: relative;
    border-radius: var(--r-xl);
    padding: var(--s-12);
    overflow: hidden;
    background: linear-gradient(135deg, #E0F7FA, #E4E8F5, #E8E0F5, #EDE7F6, #E0F2FA, #E0F7FA);
    background-size: 300% 300%;
    animation: shimmer 25s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  .ai-banner::before {
    content: "";
    position: absolute;
    left: 0; top: 32px; bottom: 32px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #1A1A1A 0%, #C2BFCD 100%);
  }
  .ai-banner-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-12);
    align-items: center;
  }
  @media (max-width: 1024px) {
    .ai-banner-grid { grid-template-columns: 1fr; }
    .ai-banner { padding: var(--s-8); }
  }
  .ai-banner h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-4);
    color: var(--neutral-900);
  }
  .ai-banner h2 .sparkle {
    color: var(--purple-primary);
    margin-right: var(--s-2);
  }
  .ai-banner p {
    font-family: var(--font-heading);
    font-size: 17px;
    color: var(--neutral-700);
    line-height: 1.55;
    max-width: 480px;
    margin: 0 0 var(--s-6);
  }
  .ai-mini {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .ai-mini .mini-row {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    align-items: start;
    font-size: 13px;
    border-bottom: 1px solid rgba(45, 50, 88, 0.08);
  }
  .ai-mini .mini-row:last-child { border-bottom: 0; }
  .ai-mini .mini-row .icon {
    color: var(--purple-primary);
    font-family: var(--font-heading);
    line-height: 1.3;
    margin-top: 2px;
  }
  .ai-mini .mini-row .what {
    color: var(--neutral-700);
    font-family: var(--font-data);
    line-height: 1.5;
  }
  .ai-mini .mini-row .what strong {
    color: var(--neutral-900);
    font-weight: 500;
  }
  .ai-mini .mini-row .when {
    font-size: 11px;
    color: var(--neutral-500);
    font-feature-settings: "tnum";
    white-space: nowrap;
  }

  /* ===========================================================
     SECTION: HOW IT WORKS — trust progression / phases
     =========================================================== */
  .how {
    background: var(--neutral-50);
    padding: var(--s-24) 0;
    border-top: 1px solid var(--neutral-100);
  }
  .phase-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    background: var(--neutral-0);
    overflow: hidden;
  }
  @media (max-width: 880px) {
    .phase-list { grid-template-columns: 1fr; }
  }
  .phase {
    padding: var(--s-6);
    border-right: 1px solid var(--neutral-100);
    position: relative;
  }
  .phase:last-child { border-right: 0; }
  @media (max-width: 880px) {
    .phase { border-right: 0; border-bottom: 1px solid var(--neutral-100); }
    .phase:last-child { border-bottom: 0; }
  }
  .phase .num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple-primary);
    margin-bottom: var(--s-3);
  }
  .phase h4 {
    font-size: 17px;
    line-height: 1.25;
    margin-bottom: var(--s-2);
  }
  .phase p {
    margin: 0;
    color: var(--neutral-500);
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 1.5;
  }
  .phase .when {
    font-size: 11px;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--s-4);
  }

  /* ===========================================================
     SECTION: SIX-MODULE GRID
     =========================================================== */
  .module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }
  @media (max-width: 980px) {
    .module-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .module-grid { grid-template-columns: 1fr; }
  }
  .module-card {
    position: relative;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    transition: border-color var(--t-norm) var(--ease-default),
                transform var(--t-norm) var(--ease-default),
                box-shadow var(--t-norm) var(--ease-default);
  }
  .module-card:hover {
    border-color: var(--neutral-300);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 11, 24, 0.06);
  }
  .module-card .icon-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--purple-surface);
    color: var(--purple-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-4);
  }
  .module-card h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    color: var(--neutral-900);
    letter-spacing: -0.01em;
  }
  .module-card p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0;
  }

  /* ===========================================================
     SECTION: WHY INTEGRATED BEATS CONNECTED
     =========================================================== */
  .integrated {
    background: var(--dark-canvas);
    color: var(--dark-text);
    padding: var(--s-24) 0;
    position: relative;
    overflow: hidden;
  }
  .integrated::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 65%);
    pointer-events: none;
  }
  .integrated-lead {
    max-width: 760px;
    margin: 0 auto var(--s-12);
    text-align: center;
    position: relative;
  }
  .integrated-lead .eyebrow {
    color: var(--purple-on-dark);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: var(--s-4);
    font-family: var(--font-data);
  }
  .integrated-lead h2 {
    color: var(--dark-text);
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 var(--s-5);
  }
  @media (min-width: 900px) {
    .integrated-lead h2 { font-size: 44px; }
  }
  .integrated-lead p {
    color: var(--dark-text-secondary);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
  }
  .integrated-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-bottom: var(--s-16);
    position: relative;
  }
  @media (max-width: 980px) {
    .integrated-grid { grid-template-columns: 1fr; }
  }
  .integrated-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    position: relative;
  }
  .integrated-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #1A1A1A 0%, #C2BFCD 100%);
  }
  .integrated-card .num {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--purple-on-dark);
    font-weight: 600;
    letter-spacing: 0.10em;
    margin-bottom: var(--s-3);
  }
  .integrated-card h3 {
    color: var(--dark-text);
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.01em;
  }
  .integrated-card p {
    color: var(--dark-text-secondary);
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }
  .integrated-screenshot {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--dark-card-border);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
  }
  .integrated-screenshot img {
    width: 100%; height: auto; display: block;
    filter: saturate(0.85) brightness(0.95);
  }

  /* ===========================================================
     SECTION: INDUSTRIES (deep)
     =========================================================== */
  .industries-deep {
    background: var(--neutral-0);
    padding: var(--s-24) 0;
  }
  .ind-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
  }
  @media (max-width: 980px) {
    .ind-cards { grid-template-columns: 1fr; }
  }
  .ind-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t-norm) var(--ease-default),
                transform var(--t-norm) var(--ease-default),
                box-shadow var(--t-norm) var(--ease-default);
  }
  .ind-card:hover {
    border-color: var(--neutral-300);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13, 11, 24, 0.08);
  }
  .ind-image {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    background: var(--neutral-100);
  }
  .ind-image img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    filter: saturate(0.82) brightness(0.95);
  }
  .ind-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.06), rgba(91, 127, 255, 0.04), rgba(124, 58, 237, 0.06));
    mix-blend-mode: color;
    pointer-events: none;
  }
  .ind-body {
    padding: var(--s-8);
  }
  .ind-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
    margin-bottom: var(--s-3);
  }
  .ind-claim {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.35;
    color: var(--neutral-900);
    margin: 0 0 var(--s-4);
    letter-spacing: -0.005em;
  }
  .ind-body p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0 0 var(--s-5);
  }

  /* ===========================================================
     SECTION: TEAM
     =========================================================== */
  .team-section {
    background: var(--neutral-50);
    padding: var(--s-24) 0;
  }
  .team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    max-width: 900px;
    margin: 0 auto;
  }
  @media (max-width: 760px) {
    .team-grid { grid-template-columns: 1fr; }
  }
  .team-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    display: flex;
    gap: var(--s-6);
    align-items: flex-start;
  }
  @media (max-width: 540px) {
    .team-card { flex-direction: column; align-items: center; text-align: center; }
  }
  .team-photo {
    margin: 0;
    flex-shrink: 0;
  }
  .portrait {
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
  }
  .portrait::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
  }
  .portrait-a {
    background: linear-gradient(135deg, #00D2FF, #5B7FFF);
  }
  .portrait-b {
    background: linear-gradient(135deg, #5B7FFF, #7C3AED);
  }
  .team-body h3 {
    margin: 0 0 var(--s-1);
    font-size: 20px;
    color: var(--neutral-900);
    letter-spacing: -0.01em;
  }
  .team-body .role {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--purple-primary);
    font-weight: 600;
    margin-bottom: var(--s-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .team-body p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0;
  }

  /* ===========================================================
     SECTION: FAQ
     =========================================================== */
  .faq {
    background: var(--neutral-0);
    padding: var(--s-24) 0;
  }
  .faq-inner { max-width: 860px; }
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .faq-item {
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    background: var(--neutral-0);
    overflow: hidden;
    transition: border-color var(--t-norm) var(--ease-default);
  }
  .faq-item[open] {
    border-color: var(--purple-primary);
  }
  .faq-item summary {
    list-style: none;
    padding: var(--s-6) var(--s-8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--neutral-900);
    line-height: 1.4;
    transition: background-color var(--t-fast) var(--ease-default);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover {
    background-color: var(--neutral-50);
  }
  .faq-item .caret {
    color: var(--purple-primary);
    display: inline-flex;
    transition: transform var(--t-norm) var(--ease-default);
    flex-shrink: 0;
  }
  .faq-item[open] .caret { transform: rotate(180deg); }
  .faq-item .a {
    padding: 0 var(--s-8) var(--s-6);
  }
  .faq-item .a p {
    font-family: var(--font-data);
    font-size: 15px;
    line-height: 1.65;
    color: var(--neutral-700);
    margin: 0 0 var(--s-2);
  }

  /* Tier grid inside FAQ (pricing answer) */
  .tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-3);
  }
  @media (max-width: 760px) {
    .tier-grid { grid-template-columns: 1fr; }
  }
  /* Two-card variant of .tier-grid (Chris: center the 2-card Pricing row on
     International Payments, 2026-06-27). The base rule above is repeat(3,1fr)
     because the other two live consumers (Platform, Instant Payments) both
     have 3 tiers; International Payments only has 2, so the base rule left an
     empty 3rd grid column and shifted the pair left of center — same root
     cause as the .stats-grid 3-vs-4-card bug fixed earlier this build. Add
     this class alongside .tier-grid only where there are 2 cards; leave the
     3-tier pages on the base rule. */
  .tier-grid.tier-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
  }
  /* v26 mobile fix: the .tier-grid.tier-grid-2 rule above (specificity 0,2,0)
     out-ranked the @media(max-width:760px){.tier-grid{1fr}} single-column rule
     (0,1,0), so the 2-card variant stayed side-by-side and squished on phones
     (International Payments). Restack it at the same 760px breakpoint. */
  @media (max-width: 760px) {
    .tier-grid.tier-grid-2 { grid-template-columns: 1fr; }
  }
  .tier {
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: var(--s-5);
    background: var(--neutral-50);
  }
  .tier-featured {
    border-color: var(--purple-primary);
    background: var(--purple-surface);
    position: relative;
  }
  .tier-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--purple-primary);
    margin-bottom: var(--s-2);
  }
  .tier-price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    color: var(--neutral-900);
    line-height: 1;
    margin-bottom: var(--s-3);
    letter-spacing: -0.02em;
  }
  .tier-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-500);
  }
  .tier p {
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-700);
    margin: 0;
  }

  /* ===========================================================
     CREDIT PAGE — HERO CLAIMS LIST
     =========================================================== */
  .hero-claims {
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0 var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .hero-claims li {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    font-family: var(--font-data);
    color: var(--dark-text-secondary);
    font-size: 15px;
    line-height: 1.5;
  }
  .hero-claims .bullet {
    color: var(--teal);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* ===========================================================
     SECTION: QUALIFY
     =========================================================== */
  .qualify { background: var(--neutral-0); }
  .qualify-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    margin-bottom: var(--s-10);
  }
  @media (max-width: 1000px) {
    .qualify-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .qualify-grid { grid-template-columns: 1fr; }
  }
  .qualify-card {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: var(--s-6);
    transition: border-color var(--t-norm) var(--ease-default),
                background-color var(--t-norm) var(--ease-default);
  }
  .qualify-card:hover {
    background: var(--neutral-0);
    border-color: var(--purple-primary);
  }
  .qualify-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--purple-surface);
    color: var(--purple-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-4);
  }
  .qualify-label {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
    font-weight: 600;
    margin-bottom: var(--s-2);
  }
  .qualify-value {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--neutral-900);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.005em;
  }
  .qualify-cta {
    text-align: center;
  }

  /* ===========================================================
     SECTION: HOW IT WORKS (FLOW)
     =========================================================== */
  .flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    margin-bottom: var(--s-12);
    position: relative;
  }
  @media (max-width: 1000px) {
    .flow-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .flow-grid { grid-template-columns: 1fr; }
  }
  .flow-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-md);
    padding: var(--s-6);
    position: relative;
  }
  .flow-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 32px; height: 2px;
    background: linear-gradient(90deg, #1A1A1A 0%, #C2BFCD 100%);
  }
  .flow-num {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--purple-on-dark);
    font-weight: 600;
    letter-spacing: 0.10em;
    margin-bottom: var(--s-3);
  }
  .flow-card h3 {
    color: var(--dark-text);
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.005em;
  }
  .flow-card p {
    color: var(--dark-text-secondary);
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
  }

  /* Flow viz */
  .flow-viz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-4);
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-lg);
    max-width: 900px;
    margin: 0 auto;
  }
  .flow-node {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--dark-card-border);
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    color: var(--dark-text);
  }
  .flow-node .flow-icon {
    color: var(--purple-on-dark);
    display: inline-flex;
  }
  .flow-node-accent {
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(124, 58, 237, 0.15);
  }
  .flow-arrow {
    color: var(--purple-on-dark);
    font-size: 18px;
    font-weight: 600;
  }

  /* Light-section variant (Step 4 on lending/how-it-works sits in an
     .is-light section — override dark-only defaults) */
  .is-light .flow-viz {
    background: var(--neutral-50);
    border-color: var(--neutral-200);
  }
  .is-light .flow-node {
    background: #FFFFFF;
    border-color: var(--neutral-200);
    color: var(--neutral-900);
    box-shadow: 0 2px 8px rgba(13, 11, 24, 0.05);
  }
  .is-light .flow-node .flow-icon {
    color: var(--purple-primary);
  }
  .is-light .flow-arrow {
    color: var(--purple-primary);
  }

  /* ===========================================================
     SECTION: COST COMPARE
     =========================================================== */
  .cost-compare {
    background: var(--neutral-0);
    padding: var(--s-24) 0;
  }
  .compare-table-wrap {
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    overflow-x: auto;
    background: var(--neutral-0);
  }
  .compare-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
    font-size: 14px;
    min-width: 720px;
  }
  .compare-table thead th {
    text-align: left;
    padding: var(--s-6) var(--s-5);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
    vertical-align: top;
  }
  .compare-table thead th.th-aion {
    background: var(--purple-surface);
    border-bottom: 2px solid var(--purple-primary);
    position: relative;
  }
  .compare-table thead th.th-aion::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1A1A1A 0%, #C2BFCD 100%);
  }
  .compare-table .th-eyebrow {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--neutral-500);
    font-weight: 600;
    margin-bottom: var(--s-1);
  }
  .compare-table .th-aion .th-eyebrow { color: var(--purple-primary); }
  .compare-table .th-name {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--neutral-900);
    line-height: 1.3;
    letter-spacing: -0.005em;
  }
  .compare-table tbody th {
    text-align: left;
    padding: var(--s-5);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-100);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--neutral-900);
    width: 140px;
    vertical-align: top;
  }
  .compare-table tbody td {
    padding: var(--s-5);
    border-bottom: 1px solid var(--neutral-100);
    color: var(--neutral-700);
    line-height: 1.55;
    vertical-align: top;
  }
  .compare-table tbody td.td-aion {
    background: var(--purple-surface);
    color: var(--neutral-900);
    font-weight: 500;
  }
  .compare-table tbody tr:last-child th,
  .compare-table tbody tr:last-child td {
    border-bottom: none;
  }
  /* v27 mobile fix (Chris, 2026-07-14): the comparison table keeps its 720px
     width and scrolls horizontally on phones. Pin the left row-label column so
     context stays visible, force a visible scrollbar, and add a swipe cue via
     .compare-note so it's obvious more columns are to the right. Threshold 768px
     = the width below which the ~720px table no longer fits the container, so
     the always-on scrollbar only appears when the table actually overflows. */
  @media (max-width: 768px) {
    .compare-table-wrap {
      overflow-x: scroll;
      scrollbar-width: thin;
      scrollbar-color: var(--purple-primary) var(--neutral-100);
      -webkit-overflow-scrolling: touch;
    }
    .compare-table-wrap::-webkit-scrollbar { height: 10px; -webkit-appearance: none; }
    .compare-table-wrap::-webkit-scrollbar-track {
      background: var(--neutral-100);
      border-radius: 0 0 var(--r-lg) var(--r-lg);
    }
    .compare-table-wrap::-webkit-scrollbar-thumb {
      background: var(--purple-primary);
      border-radius: 6px;
      border: 2px solid var(--neutral-100);
    }
    /* Pin the first column (both header and row-label cells are opaque already). */
    .compare-table thead th:first-child,
    .compare-table tbody th {
      position: sticky;
      left: 0;
      z-index: 2;
      box-shadow: 1px 0 0 var(--neutral-200);
    }
    .compare-table thead th:first-child { z-index: 3; }
    .cost-compare .compare-note::before {
      content: '\2190 Swipe to compare all columns \2192';
      display: block;
      font-weight: 600;
      color: var(--purple-primary);
      font-size: 13px;
      margin-bottom: var(--s-2);
    }
  }
  .compare-note {
    margin-top: var(--s-4);
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--neutral-500);
    line-height: 1.5;
    font-style: italic;
    max-width: 720px;
  }

  /* ===========================================================
     SECTION: CASE STUDIES
     =========================================================== */
  .case-studies {
    background: var(--neutral-0);
    padding: var(--s-24) 0;
  }
  .case-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-6);
  }
  @media (max-width: 1000px) {
    .case-grid .case-card { flex-basis: 100%; max-width: 100%; }
  }
  .case-card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--t-norm) var(--ease-default),
                transform var(--t-norm) var(--ease-default),
                box-shadow var(--t-norm) var(--ease-default);
  }
  .case-card:hover {
    border-color: var(--neutral-300);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13, 11, 24, 0.08);
  }
  .case-image {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    background: var(--neutral-100);
  }
  .case-image img {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    filter: saturate(0.82) brightness(0.95);
  }
  .case-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.05), rgba(91, 127, 255, 0.04), rgba(124, 58, 237, 0.06));
    mix-blend-mode: color;
    pointer-events: none;
  }
  .case-body {
    padding: var(--s-6) var(--s-8) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    flex-grow: 1;
  }
  .case-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
  }
  .case-metric {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--purple-surface);
    border-left: 3px solid var(--purple-primary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  .case-metric .metric-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--purple-primary);
    letter-spacing: -0.01em;
  }
  .case-metric .metric-label {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-500);
    font-weight: 600;
  }
  .case-body blockquote {
    margin: 0;
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-900);
  }
  .case-attr {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--neutral-500);
    font-weight: 500;
  }
  .case-body .arrow-link {
    margin-top: auto;
  }

  /* TBD note styling for FAQ items pending guidance */
  .faq-item .a p.tbd {
    color: var(--neutral-500);
    font-style: italic;
  }

  /* ===========================================================
     SECTION: CTA BAND
     =========================================================== */
  .cta-band {
    background: var(--dark-canvas);
    color: var(--dark-text);
    padding: var(--s-20) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 320px at 50% -10%, rgba(124, 58, 237, 0.18), transparent 60%);
  }
  .cta-band-inner { position: relative; }
  .cta-band h2 {
    color: var(--dark-text);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    max-width: 640px;
    margin: 0 auto var(--s-5);
  }
  .cta-band p {
    color: var(--dark-text-secondary);
    font-family: var(--font-heading);
    font-size: 17px;
    max-width: 540px;
    margin: 0 auto var(--s-8);
  }
  .cta-band-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ===========================================================
     FOOTER
     =========================================================== */
  footer {
    background: var(--dark-canvas);
    color: var(--dark-text-secondary);
    padding: var(--s-16) 0 var(--s-8);
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: var(--s-10);
  }
  @media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  .footer-brand p {
    margin: var(--s-4) 0 0;
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--dark-text-tertiary);
    max-width: 280px;
    line-height: 1.55;
  }
  footer h5 {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dark-text-tertiary);
    font-weight: 500;
    margin-bottom: var(--s-4);
  }
  footer ul {
    list-style: none; padding: 0; margin: 0;
  }
  footer li {
    margin-bottom: var(--s-2);
  }
  footer li a {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--dark-text-secondary);
    transition: color var(--t-fast) var(--ease-default);
  }
  footer li a:hover { color: var(--dark-text); }
  .footer-meta {
    margin-top: var(--s-12);
    padding-top: var(--s-6);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-size: 12px;
    color: var(--dark-text-tertiary);
  }
  .footer-meta .legal { max-width: 720px; line-height: 1.55; }

  /* ===========================================================
     REDUCED MOTION
     =========================================================== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  /* Focus rings — purple, never teal */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--purple-primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  /* ============================================================
     PRICING PAGE — SECTION-SPECIFIC STYLES
     ============================================================ */

  /* ---- Hero (no-image variant) ---- */
  /* Chris asked for more space above the eyebrow on every non-100vh-hero
     page (2026-06-27). Scoped to .hero.hero-text-only (0,2,0) for the same
     reason .hero.seo-hero is scoped above: it must reliably beat the later
     unscoped dashboard `.hero { padding: ... }` rule (0,1,0). Previously
     this variant had no override at all and silently inherited the
     homepage's 64px top padding — now explicit at 96px. */
  .hero.hero-text-only { padding-top: var(--s-24); }
  .hero.hero-text-only .hero-single {
    max-width: 1000px;
    margin: 0 auto;
  }
  .hero.hero-text-only .hero-copy-wide {
    max-width: 900px;
  }
  .hero.hero-text-only h1 {
    font-size: clamp(48px, 6.5vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.035em;
  }
  .hero.hero-text-only p.lede {
    font-size: 20px;
    max-width: 720px;
    line-height: 1.55;
  }
  .hero.hero-text-only .hero-actions {
    margin-top: var(--s-8);
  }
  .hero.hero-text-only .hero-trust {
    margin-top: var(--s-10);
  }

  /* ---- Pricing tiers section ---- */
  .pricing-tiers { padding: var(--s-24) 0; }
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    margin-top: var(--s-12);
  }
  @media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; }
  }
  .pricing-card {
    background: #FFFFFF;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-10);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(13, 11, 24, 0.04);
    position: relative;
  }
  .pricing-card-featured {
    border-color: var(--purple-primary);
    box-shadow: 0 16px 40px rgba(108, 92, 231, 0.10);
  }
  .pricing-card-featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1A1A1A 0%, #C2BFCD 100%);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .pricing-card-head {
    margin-bottom: var(--s-5);
  }
  .pricing-tier {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
    margin-bottom: var(--s-3);
  }
  .pricing-price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    color: var(--neutral-900);
    letter-spacing: -0.025em;
    margin-bottom: var(--s-2);
  }
  .pricing-meta {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--neutral-500);
  }
  .pricing-summary {
    font-family: var(--font-data);
    font-size: 15px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0 0 var(--s-6);
  }
  .pricing-features-head {
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--neutral-500);
    margin-bottom: var(--s-4);
  }
  .pricing-features {
    list-style: none;
    margin: 0 0 var(--s-8);
    padding: 0;
    flex: 1;
  }
  .pricing-features li {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-2) 0;
    font-family: var(--font-data);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--neutral-700);
  }
  .pricing-features li .check {
    color: var(--purple-primary);
    font-weight: 700;
    margin-top: 1px;
    flex-shrink: 0;
  }
  .pricing-card-cta {
    margin-top: auto;
  }
  .pricing-card-cta .btn { width: 100%; }
  .pricing-cross-cut {
    margin-top: var(--s-10);
    text-align: center;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--neutral-500);
    font-style: italic;
  }

  /* ---- Credit (cross-cutting) section ---- */
  .pricing-credit { padding: var(--s-24) 0; }
  .pricing-credit .integrated-lead {
    max-width: 760px;
    margin: 0 auto var(--s-12);
    text-align: center;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin-bottom: var(--s-12);
  }
  @media (max-width: 980px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .stats-grid { grid-template-columns: 1fr; }
  }
  .stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-md);
    padding: var(--s-6);
    text-align: center;
  }
  .stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--dark-text);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-3);
  }
  .stat-label {
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.5;
    color: var(--dark-text-secondary);
  }
  .credit-prereq,
  .credit-cost {
    max-width: 760px;
    margin: 0 auto var(--s-10);
    text-align: center;
  }
  .credit-prereq h3,
  .credit-cost h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--dark-text);
    margin: 0 0 var(--s-4);
    letter-spacing: -0.01em;
  }
  .credit-prereq p,
  .credit-cost p {
    font-family: var(--font-data);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--dark-text-secondary);
    margin: 0 0 var(--s-4);
  }
  .credit-cost-fine {
    font-size: 13.5px !important;
    color: var(--dark-text-tertiary) !important;
    font-style: italic;
  }
  .credit-cta {
    text-align: center;
    margin-top: var(--s-8);
  }

  /* ---- Add-ons section ---- */
  .addons { padding: var(--s-24) 0; }
  .addons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    margin-top: var(--s-10);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width: 760px) {
    .addons-grid { grid-template-columns: 1fr; }
  }
  .addon-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-md);
    padding: var(--s-6) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .addon-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.16);
    color: var(--purple-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-2);
  }
  .addon-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--dark-text);
    margin: 0;
    letter-spacing: -0.005em;
  }
  .addon-sub {
    font-weight: 400;
    color: var(--dark-text-tertiary);
    font-size: 14px;
  }
  .addon-card p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.55;
    color: var(--dark-text-secondary);
    margin: 0;
  }
  .addons-forward {
    margin-top: var(--s-10);
    text-align: center;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--dark-text-tertiary);
    font-style: italic;
  }

  /* ---- Qualify reassurance ---- */
  .qualify-reassurance {
    margin-top: var(--s-8);
    text-align: center;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--neutral-500);
    font-style: italic;
  }

  /* ---- CTA band (light variant) ---- */
  section.cta-band.is-light h2 {
    color: var(--neutral-900);
  }

  /* ---- Hero image window (for image-hero variant — included so the
         same CSS works on both files) ---- */
  .hero-image-window {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
  }
  .hero-image-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-image-window .hero-image-placeholder {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--dark-text-tertiary);
    text-align: center;
    padding: var(--s-6);
    line-height: 1.55;
  }

  /* ============================================================
     SEO PAGE — GENERIC SECTION + COMPONENT STYLES
     Shared by all 7 SEO landing pages.
     ============================================================ */

  /* ---- Generic SEO content section spacing ---- */
  .seo-content,
  .seo-stats,
  .seo-quote,
  .seo-industries { padding: var(--s-20) 0; }
  .seo-section-head { max-width: 760px; margin-bottom: var(--s-10); }
  .seo-section-head-center { margin-left: auto; margin-right: auto; text-align: center; }

  /* ---- Stat callouts row ---- */
  .seo-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 980px) { .seo-stats-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .seo-stats-grid { grid-template-columns: 1fr; } }
  /* Three-card variant of .seo-stats-grid (Chris: center the 3-card stats row
     on Instant Payments, 2026-06-28). The base rule above is repeat(4,1fr)
     because most pages using this component (multi-entity, business line of
     credit, fulfillment/3PL, working capital, logistics, manufacturing, CPG)
     genuinely have 4 stat cards. Instant Payments only has 3, so the base
     rule left an empty 4th grid column and shifted the row left of center —
     same root cause as the .tier-grid / .stats-grid / .case-grid bugs fixed
     earlier this build. Add this class alongside .seo-stats-grid only where
     there are 3 cards (also applies to High-Yield Savings' source file, not
     yet packaged); leave 4-card pages on the base rule. */
  .seo-stats-grid.seo-stats-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    margin: 0 auto;
  }
  /* v26 mobile fix: same specificity trap as .tier-grid-2. The base
     .seo-stats-grid stacks at 980px/540px, but this .seo-stats-grid-3 rule
     (0,2,0) overrode those (0,1,0) media rules, so the 3-card variant stayed
     3-across and squished on phones (Instant Payments, International Payments,
     Lending, Pricing). Mirror the base breakpoints for the -3 variant. */
  @media (max-width: 980px) {
    .seo-stats-grid.seo-stats-grid-3 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .seo-stats-grid.seo-stats-grid-3 { grid-template-columns: 1fr; }
  }
  .seo-stat-card {
    background: #FFFFFF;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: var(--s-6);
    text-align: center;
    box-shadow: 0 4px 14px rgba(13, 11, 24, 0.04);
  }
  .seo-stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--neutral-900);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-3);
  }
  .seo-stat-label {
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.5;
    color: var(--neutral-700);
  }
  .is-dark .seo-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
  }
  .is-dark .seo-stat-value { color: var(--dark-text); }
  .is-dark .seo-stat-label { color: var(--dark-text-secondary); }

  /* ---- Long-form prose body inside SEO content sections ---- */
  /* Widened 760px -> 840px (2026-06-28, Chris): .seo-prose is a centered box
     (margin:0 auto) with left-aligned text inside, sitting under a
     .seo-section-head that's flush-left at the same 760px max-width — so the
     prose's left edge was indented ~216px from the headline's left edge.
     Chris likes the left-aligned-text-in-a-centered-box look, just wants the
     offset less pronounced; +80px width shrinks the centered margin on each
     side by 40px, narrowing the gap without centering the text itself.
     Sitewide — every SEO-family page using .seo-prose is affected the same
     way (this is the single shared component for that pattern). */
  .seo-prose {
    max-width: 840px;
    margin: 0 auto;
  }
  .seo-prose p {
    font-family: var(--font-data);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 var(--s-5);
    color: var(--neutral-700);
  }
  .seo-prose p:last-child { margin-bottom: 0; }
  .is-dark .seo-prose p { color: var(--dark-text-secondary); }
  /* Opt-in center-text modifier for .seo-prose (Chris: center the headline,
     copy, and cards in the International Payments Pricing section, 2026-06-27).
     Base .seo-prose is already block-centered via margin:0 auto but stays
     left-aligned text everywhere else (most pages use it for left-aligned
     long-form body copy) — this only centers text where added. */
  .seo-prose-center { text-align: center; }
  .seo-fineprint {
    font-size: 14px !important;
    color: var(--neutral-500) !important;
    font-style: italic;
  }
  .is-dark .seo-fineprint { color: var(--dark-text-tertiary) !important; }

  /* ---- Numbered grid (01/02/03 items) ---- */
  .seo-numbered-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
    margin-top: var(--s-10);
  }
  @media (max-width: 900px) { .seo-numbered-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
  .seo-numbered-item {
    background: transparent;
    padding: var(--s-6) 0;
    border-top: 1px solid rgba(13, 11, 24, 0.08);
  }
  .is-dark .seo-numbered-item { border-top-color: rgba(255, 255, 255, 0.10); }
  .seo-num {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 700;
    color: var(--purple-primary);
    letter-spacing: 0.10em;
    margin-bottom: var(--s-3);
  }
  .is-dark .seo-num { color: var(--purple-on-dark); }
  .seo-numbered-item h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.01em;
    color: var(--neutral-900);
  }
  .is-dark .seo-numbered-item h3 { color: var(--dark-text); }
  .seo-numbered-item p {
    font-family: var(--font-data);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    color: var(--neutral-700);
  }
  .is-dark .seo-numbered-item p { color: var(--dark-text-secondary); }

  /* ---- Cards grid (3-up cards for alternatives, sub-verticals, etc.) ---- */
  .seo-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-10);
  }
  @media (max-width: 900px) { .seo-cards-grid { grid-template-columns: 1fr; } }
  .seo-card {
    background: #FFFFFF;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-md);
    padding: var(--s-8);
    box-shadow: 0 4px 14px rgba(13, 11, 24, 0.04);
  }
  .is-dark .seo-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
  }
  .seo-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.01em;
    color: var(--neutral-900);
  }
  .is-dark .seo-card h3 { color: var(--dark-text); }
  .seo-card p {
    font-family: var(--font-data);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    color: var(--neutral-700);
  }
  .is-dark .seo-card p { color: var(--dark-text-secondary); }

  /* ---- Why-Aion reasons grid (4-up) ---- */
  .seo-reasons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    margin-top: var(--s-10);
  }
  @media (max-width: 760px) { .seo-reasons-grid { grid-template-columns: 1fr; } }
  .seo-reason h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.005em;
    color: var(--neutral-900);
  }
  .is-dark .seo-reason h3 { color: var(--dark-text); }
  .seo-reason p {
    font-family: var(--font-data);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    color: var(--neutral-700);
  }
  .is-dark .seo-reason p { color: var(--dark-text-secondary); }

  /* ---- Quote card ---- */
  .seo-quote-card {
    max-width: 760px;
    margin: var(--s-10) auto 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-lg);
    padding: var(--s-10) var(--s-8);
  }
  .is-light .seo-quote-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .seo-quote-figure {
    width: 84px;
    height: 84px;
    margin: 0 auto var(--s-6);
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
  }
  .seo-quote-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .seo-quote-figure img.seo-quote-logo-fallback {
    object-fit: contain;
    padding: 14px;
    background: #FFFFFF;
  }
  .seo-quote-card blockquote {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.45;
    margin: 0 0 var(--s-6);
    letter-spacing: -0.01em;
    color: var(--dark-text);
  }
  .is-light .seo-quote-card blockquote { color: var(--neutral-900); }
  .seo-quote-attr { display: flex; flex-direction: column; gap: 4px; }
  .seo-quote-attr .name {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--dark-text);
  }
  .is-light .seo-quote-attr .name { color: var(--neutral-900); }
  .seo-quote-attr .role {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--purple-on-dark);
  }
  .is-light .seo-quote-attr .role { color: var(--purple-primary); }

  /* ---- Industries cross-link row ---- */
  .seo-industries-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3) var(--s-5);
    margin-top: var(--s-10);
  }
  .seo-industry-link {
    display: inline-flex;
    align-items: center;
    padding: var(--s-3) var(--s-5);
    background: #FFFFFF;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-900);
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease-default),
                background-color var(--t-fast) var(--ease-default),
                transform var(--t-fast) var(--ease-default);
  }
  .seo-industry-link:hover {
    border-color: var(--purple-primary);
    background: rgba(108, 92, 231, 0.04);
    transform: translateY(-1px);
  }
  /* v29 (2026-07-27) — industry-pill hover was unreadable on DARK sections.
     The rule above sets a background that is 96% TRANSPARENT. At rest the pill
     supplies its own opaque #FFFFFF, which is why its near-black
     `color: var(--neutral-900)` label reads on any canvas; on hover that opacity
     disappeared, so on an `.is-dark` section the #0F0E22 canvas showed straight
     through and the label became illegible.
     Never surfaced before because every page published to date puts
     `.seo-industries` on `is-light`. The first `is-dark` consumers are the
     2026-07-27 batch: fulfillment-3pl, manufacturing, cpg-food-beverage.
     ADDITIVE AND SCOPED TO .is-dark ON PURPOSE — the light-section rule above is
     left byte-identical, so no page currently published changes in any way. */
  .is-dark .seo-industry-link:hover {
    background: #F1EEFD;
    border-color: var(--purple-primary);
  }

  /* ---- Section-level CTA inside an SEO content section ---- */
  .seo-section-cta {
    margin-top: var(--s-10);
    text-align: center;
  }

  /* ---- Image window inside an SEO content section ---- */
  .seo-image-window {
    position: relative;
    margin: var(--s-12) auto 0;
    max-width: 920px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .is-light .seo-image-window {
    background: var(--neutral-50);
    border-color: var(--neutral-200);
  }
  .seo-image-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .seo-image-placeholder {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.55;
    color: var(--dark-text-tertiary);
    text-align: center;
    padding: var(--s-6);
  }
  .is-light .seo-image-placeholder { color: var(--neutral-500); }

/* ============================================================
   PRICING PAGE EXTRAS
   ============================================================ */
/* ============================================================
     PRICING PAGE — SECTION-SPECIFIC STYLES
     ============================================================ */

  /* ---- Hero (no-image variant) ---- */
  /* Chris asked for more space above the eyebrow on every non-100vh-hero
     page (2026-06-27). Scoped to .hero.hero-text-only (0,2,0) for the same
     reason .hero.seo-hero is scoped above: it must reliably beat the later
     unscoped dashboard `.hero { padding: ... }` rule (0,1,0). Previously
     this variant had no override at all and silently inherited the
     homepage's 64px top padding — now explicit at 96px. */
  .hero.hero-text-only { padding-top: var(--s-24); }
  .hero.hero-text-only .hero-single {
    max-width: 1000px;
    margin: 0 auto;
  }
  .hero.hero-text-only .hero-copy-wide {
    max-width: 900px;
  }
  .hero.hero-text-only h1 {
    font-size: clamp(48px, 6.5vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.035em;
  }
  .hero.hero-text-only p.lede {
    font-size: 20px;
    max-width: 720px;
    line-height: 1.55;
  }
  .hero.hero-text-only .hero-actions {
    margin-top: var(--s-8);
  }
  .hero.hero-text-only .hero-trust {
    margin-top: var(--s-10);
  }

  /* ---- Pricing tiers section ---- */
  .pricing-tiers { padding: var(--s-24) 0; }
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
    margin-top: var(--s-12);
  }
  @media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; }
  }
  .pricing-card {
    background: #FFFFFF;
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-10);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(13, 11, 24, 0.04);
    position: relative;
  }
  .pricing-card-featured {
    border-color: var(--purple-primary);
    box-shadow: 0 16px 40px rgba(108, 92, 231, 0.10);
  }
  .pricing-card-featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1A1A1A 0%, #C2BFCD 100%);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .pricing-card-head {
    margin-bottom: var(--s-5);
  }
  .pricing-tier {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
    margin-bottom: var(--s-3);
  }
  .pricing-price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    color: var(--neutral-900);
    letter-spacing: -0.025em;
    margin-bottom: var(--s-2);
  }
  .pricing-meta {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--neutral-500);
  }
  .pricing-summary {
    font-family: var(--font-data);
    font-size: 15px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0 0 var(--s-6);
  }
  .pricing-features-head {
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--neutral-500);
    margin-bottom: var(--s-4);
  }
  .pricing-features {
    list-style: none;
    margin: 0 0 var(--s-8);
    padding: 0;
    flex: 1;
  }
  .pricing-features li {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-2) 0;
    font-family: var(--font-data);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--neutral-700);
  }
  .pricing-features li .check {
    color: var(--purple-primary);
    font-weight: 700;
    margin-top: 1px;
    flex-shrink: 0;
  }
  .pricing-card-cta {
    margin-top: auto;
  }
  .pricing-card-cta .btn { width: 100%; }
  .pricing-cross-cut {
    margin-top: var(--s-10);
    text-align: center;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--neutral-500);
    font-style: italic;
  }

  /* ---- Credit (cross-cutting) section ---- */
  .pricing-credit { padding: var(--s-24) 0; }
  .pricing-credit .integrated-lead {
    max-width: 760px;
    margin: 0 auto var(--s-12);
    text-align: center;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin-bottom: var(--s-12);
  }
  @media (max-width: 980px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .stats-grid { grid-template-columns: 1fr; }
  }
  .stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-md);
    padding: var(--s-6);
    text-align: center;
  }
  .stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--dark-text);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-3);
  }
  .stat-label {
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.5;
    color: var(--dark-text-secondary);
  }
  .credit-prereq,
  .credit-cost {
    max-width: 760px;
    margin: 0 auto var(--s-10);
    text-align: center;
  }
  .credit-prereq h3,
  .credit-cost h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--dark-text);
    margin: 0 0 var(--s-4);
    letter-spacing: -0.01em;
  }
  .credit-prereq p,
  .credit-cost p {
    font-family: var(--font-data);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--dark-text-secondary);
    margin: 0 0 var(--s-4);
  }
  .credit-cost-fine {
    font-size: 13.5px !important;
    color: var(--dark-text-tertiary) !important;
    font-style: italic;
  }
  .credit-cta {
    text-align: center;
    margin-top: var(--s-8);
  }

  /* ---- Add-ons section ---- */
  .addons { padding: var(--s-24) 0; }
  .addons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    margin-top: var(--s-10);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width: 760px) {
    .addons-grid { grid-template-columns: 1fr; }
  }
  .addon-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-md);
    padding: var(--s-6) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .addon-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.16);
    color: var(--purple-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-2);
  }
  .addon-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--dark-text);
    margin: 0;
    letter-spacing: -0.005em;
  }
  .addon-sub {
    font-weight: 400;
    color: var(--dark-text-tertiary);
    font-size: 14px;
  }
  .addon-card p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.55;
    color: var(--dark-text-secondary);
    margin: 0;
  }
  .addons-forward {
    margin-top: var(--s-10);
    text-align: center;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--dark-text-tertiary);
    font-style: italic;
  }

  /* ---- Qualify reassurance ---- */
  .qualify-reassurance {
    margin-top: var(--s-8);
    text-align: center;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--neutral-500);
    font-style: italic;
  }

  /* ---- CTA band (light variant) ---- */
  section.cta-band.is-light h2 {
    color: var(--neutral-900);
  }

  /* ---- Hero image window (for image-hero variant — included so the
         same CSS works on both files) ---- */
  .hero-image-window {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
  }
  .hero-image-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-image-window .hero-image-placeholder {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--dark-text-tertiary);
    text-align: center;
    padding: var(--s-6);
    line-height: 1.55;
  }

/* ============================================================
   ABOUT PAGE EXTRAS
   ============================================================ */
/* ============================================================
     ABOUT PAGE — SECTION-SPECIFIC STYLES
     ============================================================ */

  /* ---- Section palette — ALTERNATING DARK/LIGHT (hero stays dark) ----
     Hero is 100vh dark; sections after the hero alternate light → dark →
     light → dark to give the page a clear rhythm. Light sections use the
     near-white neutral surface; dark sections use the existing dark canvas. */
  .about-hero       {
    background: linear-gradient(180deg, #0D0B18 0%, #131228 100%);
    min-height: 100vh;          /* full viewport, like the homepage hero */
    display: flex;
    align-items: center;
  }
  .about-why          { background: var(--neutral-0);   padding: var(--s-24) 0; }   /* LIGHT */
  .about-values       { background: #0F0E22;             padding: var(--s-24) 0; }   /* DARK  */
  .about-story        { background: var(--neutral-0);   padding: var(--s-24) 0; }   /* LIGHT */
  .about-numbers      { background: #0F0E22;             padding: var(--s-24) 0; }   /* DARK  */
  .about-trust        { background: var(--neutral-0);   padding: var(--s-24) 0; }   /* LIGHT */
  .about-team         { background: #0F0E22;             padding: var(--s-24) 0; }   /* DARK  */
  .about-testimonials { background: var(--neutral-0);   padding: var(--s-24) 0; }   /* LIGHT */
  .about-learn        { background: #0F0E22;             padding: var(--s-24) 0; }   /* DARK  */
  .about-closing      { background: var(--neutral-0); }                              /* LIGHT */

  /* =========================================================================
     DARK ABOUT-SECTION HEADING CONTRAST
     The four dark sections (.about-values / .about-numbers / .about-team /
     .about-learn) set their background via class, not via .is-dark, so the
     global h2/h3 color: var(--neutral-900) rule wins and renders near-black
     text on #0F0E22. These overrides restore legibility.
     ========================================================================= */
  .about-values .section-head h2,
  .about-numbers .section-head h2,
  .about-team .section-head h2,
  .about-learn .section-head h2   { color: var(--dark-text); }

  .about-values .section-eyebrow,
  .about-numbers .section-eyebrow,
  .about-team .section-eyebrow,
  .about-learn .section-eyebrow   { color: var(--purple-on-dark); }

  .about-values .section-head p,
  .about-numbers .section-head p,
  .about-team .section-head p,
  .about-learn .section-head p    { color: var(--dark-text-secondary); }

  /* =========================================================================
     LIGHT-SECTION OVERRIDES — applied to any section with .is-light. Flips
     copy + card surfaces from dark-canvas to light-canvas styling.
     NOTE: !important on color declarations because the legacy section CSS
     (e.g. .about-trust .section-head p, .about-narrative p) shares the same
     specificity as these overrides AND appears later in the cascade — without
     !important, the legacy rules win and light sections render light-gray
     text on a white surface.
     ========================================================================= */
  .is-light .section-head h2,
  .is-light .pm-head h2 { color: var(--neutral-900) !important; }
  .is-light .section-eyebrow { color: var(--purple-primary) !important; }
  .is-light .section-head p,
  .is-light .about-narrative p { color: var(--neutral-700) !important; }

  /* Vision / Mission cards */
  .is-light .vm-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .is-light .vm-card::before {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.10), transparent 65%);
  }
  .is-light .vm-eyebrow { color: var(--purple-primary); }
  .is-light .vm-body    { color: var(--neutral-900); }

  /* Value cards */
  .is-light .value-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .is-light .value-num    { color: var(--purple-primary); }
  .is-light .value-card h3 { color: var(--neutral-900); }
  .is-light .value-card p  { color: var(--neutral-700); }

  /* Story timeline */
  .is-light .timeline-year      { color: var(--neutral-900); }
  .is-light .timeline-body h3   { color: var(--neutral-900); }
  .is-light .timeline-body p    { color: var(--neutral-700); }
  .is-light .timeline-item::before {
    background: var(--purple-primary);
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.20);
  }
  .is-light .timeline-current::before {
    background: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.30);
  }

  /* Numbers grid */
  .is-light .num-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .is-light .num-card-lead {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.08), rgba(91, 127, 255, 0.06), rgba(124, 58, 237, 0.12));
    border-color: rgba(108, 92, 231, 0.20);
  }
  .is-light .num-value             { color: var(--neutral-900); }
  .is-light .num-value .unit       { color: var(--purple-primary); }
  .is-light .num-label             { color: var(--neutral-700); }
  .is-light .numbers-footnote      { color: var(--neutral-500); }
  .is-light .numbers-footnote sup  { color: var(--purple-primary); }

  /* Trust marks */
  .is-light .trust-marks li span {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.10);
    color: var(--neutral-900);
    box-shadow: 0 4px 14px rgba(13, 11, 24, 0.05);
  }

  /* Leadership team cards */
  .is-light .about-team .team-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .is-light .about-team .team-photo { background: rgba(13, 11, 24, 0.04); }
  .is-light .about-team .team-body h3       { color: var(--neutral-900); }
  .is-light .about-team .team-body .team-role { color: var(--purple-primary); }
  .is-light .about-team .team-body p        { color: var(--neutral-700); }
  .is-light .about-team .team-linkedin {
    color: var(--neutral-500);
    background: rgba(13, 11, 24, 0.04);
    border-color: rgba(13, 11, 24, 0.08);
  }
  .is-light .about-team .team-linkedin:hover {
    color: var(--purple-primary);
    background: rgba(108, 92, 231, 0.08);
    border-color: rgba(108, 92, 231, 0.30);
  }

  /* ---- Testimonials base — .testi-rail scroll-rail + .testi-quote-card ---- */
  .testi-rotating {
    background: var(--neutral-0);
    padding: var(--s-20) 0;
    overflow: hidden;
  }
  .testi-rotating .section-head { margin-bottom: var(--s-10); }
  .testi-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(340px, 420px);
    gap: var(--s-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--s-2) var(--s-1) var(--s-6);
    margin: 0 calc(-1 * var(--s-6));
    padding-left: var(--s-6);
    padding-right: var(--s-6);
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-200) transparent;
  }
  .testi-rail::-webkit-scrollbar       { height: 8px; }
  .testi-rail::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 4px; }
  .testi-rail::-webkit-scrollbar-track { background: transparent; }
  .testi-quote-card {
    scroll-snap-align: start;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    position: relative;
  }
  .testi-quote-card::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    left: 18px;
    font-family: var(--font-heading);
    font-size: 64px;
    line-height: 1;
    color: var(--purple-primary);
    opacity: 0.18;
  }
  .testi-quote-card blockquote {
    margin: 0 0 var(--s-6);
    font-family: var(--font-data);
    font-size: 16px;
    line-height: 1.55;
    color: var(--neutral-900);
  }
  .testi-attr {
    border-top: 1px solid var(--neutral-100);
    padding-top: var(--s-4);
  }
  .testi-attr .name {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--neutral-900);
    font-size: 14px;
    display: block;
  }
  .testi-attr .role {
    font-family: var(--font-data);
    color: var(--neutral-500);
    font-size: 13px;
    display: block;
    margin-top: 2px;
  }
  .testi-attr .industry {
    display: inline-block;
    margin-top: var(--s-2);
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--purple-primary);
    font-weight: 600;
  }
  .testi-hint {
    text-align: center;
    margin-top: var(--s-4);
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--neutral-500);
  }
  /* Logo-badge variant (About page) */
  .testi-attr.has-avatar {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: var(--s-4);
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: var(--s-4);
    margin-top: var(--s-5);
  }
  .testi-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--dark-card);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    flex-shrink: 0;
  }
  .testi-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) brightness(1.02);
  }
  .testi-attr-text { display: flex; flex-direction: column; gap: 2px; }
  .testi-quote-card .testi-attr.has-avatar { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--s-4); }
  .testi-attr.has-logo {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: var(--s-5);
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: var(--s-5);
    margin-top: var(--s-5);
  }
  .testi-logo {
    width: 88px; height: 56px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    flex-shrink: 0;
  }
  .testi-logo img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
  }

  /* Testimonials — .is-light overrides */
  .is-light .testi-quote-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    color: var(--neutral-900);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .is-light .testi-quote-card::before {
    color: var(--purple-primary);
    opacity: 0.22;
  }
  .is-light .testi-quote-card blockquote { color: var(--neutral-900); }
  .is-light .testi-quote-card .testi-attr {
    border-top-color: rgba(13, 11, 24, 0.08);
  }
  .is-light .testi-quote-card .testi-attr .name     { color: var(--neutral-900); }
  .is-light .testi-quote-card .testi-attr .role     { color: var(--neutral-700); }
  .is-light .testi-quote-card .testi-attr .industry { color: var(--purple-primary); }
  .is-light .testi-hint { color: var(--neutral-500); }
  .is-light .testi-cta .arrow-link.on-dark { color: var(--purple-primary); }
  .is-light .testi-cta .arrow-link.on-dark:hover { color: var(--purple-hover); }

  /* Learn-more cards (only used in DARK .about-learn — included for completeness
     in case .is-light is ever applied there) */
  .is-light .learn-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    color: var(--neutral-900);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .is-light .learn-card:hover {
    border-color: rgba(108, 92, 231, 0.40);
    background: rgba(108, 92, 231, 0.04);
  }
  .is-light .learn-card h3 { color: var(--neutral-900); }
  .is-light .learn-card p  { color: var(--neutral-700); }
  .is-light .learn-arrow   { color: var(--purple-primary); }

  /* Closing band */
  .is-light .about-closing-disclaimer { color: var(--neutral-500); }
  .is-light.about-closing h2          { color: var(--neutral-900); }
  /* On light closing, the CTA-band button should stay primary purple — the
     .btn-primary.on-dark variant already has a purple fill, so we just need
     to keep the white text and override the border treatment. */
  .is-light.about-closing .btn.btn-primary.on-dark {
    background: var(--purple-primary);
    color: #FFFFFF;
    border-color: transparent;
  }
  .is-light.about-closing .btn.btn-primary.on-dark:hover {
    background: var(--purple-hover);
  }

  /* ---- Consistent section widths — ~78vw, centered, no stagger ---- */
  .about-hero          .container.hero-grid,
  .about-why           .container,
  .about-values        .container,
  .about-story         .container,
  .about-numbers       .container,
  .about-trust         .container,
  .about-team          .container,
  .about-testimonials  .container,
  .about-learn         .container,
  .about-closing       .container.cta-band-inner {
    width: 78%;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  @media (max-width: 980px) {
    .about-hero .container.hero-grid,
    .about-why .container,
    .about-values .container,
    .about-story .container,
    .about-numbers .container,
    .about-trust .container,
    .about-team .container,
    .about-testimonials .container,
    .about-learn .container,
    .about-closing .container.cta-band-inner {
      width: 100%;
      max-width: 100%;
    }
  }

  /* ---- Narrow head + narrative ---- */
  .about-narrow-head { max-width: 760px; }
  .about-narrative {
    max-width: 760px;
    margin: 0 0 var(--s-12);
  }
  .about-narrative p {
    font-family: var(--font-data);
    font-size: 17px;
    line-height: 1.7;
    color: var(--dark-text-secondary);
    margin: 0 0 var(--s-5);
  }
  .about-narrative p:last-child { margin: 0; }

  /* ---- Hero image: full-bleed photo or screenshots composite ---- */
  .about-hero-image {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
    aspect-ratio: 4 / 3;
  }
  .about-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Subtle brand-gradient overlay tints photographic heroes toward the palette */
  .about-hero-image.is-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.06), rgba(91, 127, 255, 0.05), rgba(124, 58, 237, 0.10));
    mix-blend-mode: color;
    pointer-events: none;
  }
  .about-hero-image.is-photo img {
    filter: saturate(0.85) brightness(0.95);
  }
  /* Screenshots composite is already on dark — minimal treatment */
  .about-hero-image.is-screenshots {
    background: transparent;
    border: none;
    box-shadow: none;
    aspect-ratio: 4 / 3;
  }
  .about-hero-image.is-screenshots img {
    object-fit: contain;
  }

  /* ---- VISION / MISSION callout cards ---- */
  .vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    margin-top: var(--s-8);
  }
  @media (max-width: 760px) {
    .vm-grid { grid-template-columns: 1fr; }
  }
  .vm-card {
    position: relative;
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-xl);
    padding: var(--s-10) var(--s-8);
    overflow: hidden;
  }
  .vm-card::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 65%);
    pointer-events: none;
  }
  .vm-wings {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 22px;
    margin-bottom: var(--s-5);
  }
  .vm-wing {
    display: block;
    width: 8px;
    border-radius: 4px 4px 2px 2px;
  }
  .vm-wing-1 { height: 12px; background: var(--teal);   opacity: 0.85; }
  .vm-wing-2 { height: 18px; background: var(--blue);   opacity: 0.85; }
  .vm-wing-3 { height: 22px; background: var(--violet); opacity: 0.85; }
  .vm-eyebrow {
    position: relative;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-on-dark);
    margin-bottom: var(--s-3);
  }
  .vm-body {
    position: relative;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.45;
    color: var(--dark-text);
    margin: 0;
    letter-spacing: -0.005em;
  }

  /* ---- VALUES — 3-up cards ---- */
  .values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-10);
  }
  @media (max-width: 900px) {
    .values-grid { grid-template-columns: 1fr; }
  }
  .value-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    position: relative;
  }
  .value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    border-radius: 0 0 2px 0;
  }
  .value-num {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--purple-on-dark);
    font-weight: 600;
    letter-spacing: 0.10em;
    margin-bottom: var(--s-4);
  }
  .value-card h3 {
    color: var(--dark-text);
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.005em;
  }
  .value-card p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--dark-text-secondary);
    margin: 0;
  }

  /* ---- TIMELINE ---- */
  .timeline {
    list-style: none;
    margin: var(--s-10) 0 0;
    padding: 0;
    position: relative;
  }
  /* Vertical gradient spine */
  .timeline::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 100px;
    width: 2px;
    background: linear-gradient(180deg, var(--teal), var(--blue), var(--violet));
    border-radius: 2px;
    opacity: 0.6;
  }
  @media (max-width: 720px) {
    .timeline::before { left: 12px; }
  }
  .timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--s-8);
    padding: var(--s-5) 0 var(--s-8);
  }
  @media (max-width: 720px) {
    .timeline-item {
      grid-template-columns: 1fr;
      padding-left: var(--s-8);
      gap: var(--s-2);
    }
  }
  .timeline-year {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    color: var(--dark-text);
    letter-spacing: -0.01em;
    line-height: 1;
    position: relative;
    padding-top: 4px;
  }
  /* Dot on the spine */
  .timeline-item::before {
    content: '';
    position: absolute;
    left: 96px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--violet);
    border: 2px solid #0F0E22;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  }
  @media (max-width: 720px) {
    .timeline-item::before { left: 8px; }
  }
  .timeline-current::before {
    background: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.30);
  }
  .timeline-body h3 {
    color: var(--dark-text);
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.005em;
  }
  .timeline-body p {
    font-family: var(--font-data);
    font-size: 15px;
    line-height: 1.65;
    color: var(--dark-text-secondary);
    margin: 0;
  }

  /* ---- BY THE NUMBERS ---- */
  .numbers-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--s-5);
    margin-top: var(--s-10);
  }
  @media (max-width: 980px) {
    .numbers-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .num-card-lead { grid-column: span 2; }
  }
  @media (max-width: 560px) {
    .numbers-grid { grid-template-columns: 1fr; }
    .num-card-lead { grid-column: span 1; }
  }
  .num-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    position: relative;
    overflow: hidden;
  }
  .num-card-lead {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.06), rgba(91, 127, 255, 0.04), rgba(124, 58, 237, 0.10));
    border-color: rgba(167, 139, 250, 0.30);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .num-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    border-radius: 0 0 3px 0;
  }
  .num-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--dark-text);
    letter-spacing: -0.03em;
    margin-bottom: var(--s-3);
    font-variant-numeric: tabular-nums;
  }
  .num-card-lead .num-value { font-size: 72px; }
  .num-value .unit {
    color: var(--purple-on-dark);
    font-weight: 500;
  }
  .num-label {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.55;
    color: var(--dark-text-secondary);
  }
  .numbers-footnote {
    margin-top: var(--s-6);
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--dark-text-tertiary);
    line-height: 1.6;
    font-style: italic;
    max-width: 760px;
  }
  .numbers-footnote sup {
    color: var(--purple-on-dark);
    font-style: normal;
  }

  /* ---- TRUST marks strip ---- */
  .trust-marks {
    list-style: none;
    padding: 0;
    margin: var(--s-10) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-4);
  }
  .trust-marks li span {
    display: inline-flex;
    align-items: center;
    padding: var(--s-3) var(--s-6);
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: 999px;
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-text);
    letter-spacing: 0.02em;
  }
  .about-trust .section-head {
    max-width: 800px;          /* +40px wider per side vs the previous 720px */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .about-trust .section-head p {
    color: var(--dark-text-secondary);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- LEADERSHIP TEAM grid (6 cards) ---- */
  .about-team .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
    margin-top: var(--s-10);
    max-width: none;
  }
  @media (max-width: 980px) {
    .about-team .team-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .about-team .team-grid { grid-template-columns: 1fr; }
  }
  .about-team .team-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-lg);
    padding: 20px 20px 0;             /* inset photo within the card */
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    text-align: left;
  }
  .about-team .team-photo {
    width: 100%;
    aspect-ratio: 1 / 1;              /* matches the square source — no bars, no crop */
    overflow: hidden;
    margin: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--r-md);
    position: relative;
  }
  .about-team .team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.92) brightness(0.98);
  }
  .about-team .team-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.04), rgba(91, 127, 255, 0.03), rgba(124, 58, 237, 0.06));
    mix-blend-mode: color;
    pointer-events: none;
  }
  .about-team .team-body {
    /* No horizontal padding — the card itself supplies the 20px inset now */
    padding: var(--s-5) 0 var(--s-6);
  }
  /* Name + LinkedIn icon row */
  .about-team .team-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-3);
  }
  .about-team .team-name-role { min-width: 0; }
  .about-team .team-body h3 {
    color: var(--dark-text);
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 var(--s-1);
    letter-spacing: -0.005em;
  }
  .about-team .team-body .team-role {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--purple-on-dark);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 600;
    margin: 0;
  }
  .about-team .team-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--dark-text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--dark-card-border);
    transition: color var(--t-fast) var(--ease-default),
                background-color var(--t-fast) var(--ease-default),
                border-color var(--t-fast) var(--ease-default);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .about-team .team-linkedin:hover {
    color: var(--dark-text);
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.40);
  }
  .about-team .team-body p {
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.6;
    color: var(--dark-text-secondary);
    margin: 0;
  }

  /* ---- TESTIMONIALS — small CTA below rail ---- */
  .testi-cta {
    text-align: center;
    margin-top: var(--s-8);
  }

  /* ---- LEARN MORE — 3 link cards ---- */
  .learn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-10);
  }
  @media (max-width: 900px) {
    .learn-grid { grid-template-columns: 1fr; }
  }
  .learn-card {
    display: flex;
    flex-direction: column;
    padding: var(--s-8);
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-lg);
    color: var(--dark-text);
    text-decoration: none;
    position: relative;
    transition: border-color var(--t-norm) var(--ease-default),
                transform var(--t-norm) var(--ease-default),
                background-color var(--t-norm) var(--ease-default);
  }
  .learn-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    border-radius: 0 0 2px 0;
  }
  .learn-card:hover {
    border-color: rgba(167, 139, 250, 0.40);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
  }
  .learn-card h3 {
    color: var(--dark-text);
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.01em;
  }
  .learn-card p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--dark-text-secondary);
    margin: 0 0 var(--s-5);
  }
  .learn-arrow {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--purple-on-dark);
    margin-top: auto;
  }

  /* ---- CLOSING band: shrink disclaimer + center ---- */
  .about-closing-disclaimer {
    font-family: var(--font-data);
    font-size: 13px;
    line-height: 1.6;
    color: var(--dark-text-tertiary);
    max-width: 640px;
    margin: var(--s-6) auto var(--s-8);
  }
  .about-closing h2 {
    font-size: 36px;
    letter-spacing: -0.02em;
  }


/* ============================================================
   HOME (v4-classic) — PILLAR LOTTIE / WING-PULSE / HERO ANIM
   ============================================================ */
/* ============================================================
     HERO ANIMATION (inlined from aion-hero-animation.html)
     3D rotating desktop + mobile fade-in. Plays once on page load.
     All selectors scoped under .hero-anim so they can't collide.
     ============================================================ */
  .hero-anim {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    perspective: 1800px;
    perspective-origin: 50% 45%;
    background: transparent;
  }
  .hero-anim .ha-desktop {
    position: absolute;
    top: 0; left: 0;
    width: 92%;
    aspect-ratio: 1.42 / 1;
    transform-style: preserve-3d;
    transform: rotateY(180deg) scale(0.35);
    opacity: 0;
    animation: ha-desktop-enter 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  @keyframes ha-desktop-enter {
    0%   { opacity: 0;  transform: rotateY(180deg) scale(0.35); }
    25%  { opacity: 1; }
    100% { opacity: 1;  transform: rotateY(360deg) scale(1); }
  }
  .hero-anim .ha-desktop-display {
    position: absolute;
    inset: 0 0 30% 0;
    transform-style: preserve-3d;
  }
  .hero-anim .ha-desktop-back {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background-color: #7e889e;
    background-image: linear-gradient(135deg,
      #3f475a 0%, #6c7589 18%, #9aa3b6 36%, #c2cad8 50%,
      #8c95aa 62%, #555d72 82%, #2c3142 100%);
    border: 1px solid rgba(255,255,255,0.20);
    backface-visibility: hidden;
    transform: rotateY(180deg);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.40),
      inset 0 -1px 0 rgba(0,0,0,0.40),
      inset 0 0 80px rgba(0,0,0,0.25);
  }
  .hero-anim .ha-desktop-back::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: repeating-linear-gradient(180deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 1px,
      rgba(0,0,0,0.030) 1px,
      rgba(0,0,0,0.030) 2px);
    pointer-events: none;
  }
  .hero-anim .ha-desktop-back::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 5px;
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    opacity: 0.35;
    border-radius: 3px;
    filter: blur(0.4px);
    box-shadow: 0 0 20px rgba(0,0,0,0.30);
  }
  .hero-anim .ha-desktop-frame {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 12px 12px 14px;
    backface-visibility: hidden;
    overflow: hidden;
    transform: translateZ(0);
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 4%,
        rgba(255,255,255,0) 96%, rgba(0,0,0,0.25) 100%),
      linear-gradient(90deg,
        rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 4%,
        rgba(0,0,0,0) 96%, rgba(0,0,0,0.25) 100%),
      linear-gradient(135deg,
        #2c3144 0%, #515b73 18%, #8a96ad 38%, #aab5c8 46%,
        #6e7891 56%, #424a60 78%, #262a3a 100%);
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.30),
      inset 0 -1px 0 rgba(0,0,0,0.30);
  }
  .hero-anim .ha-bevel-flare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 14px;
    background: linear-gradient(105deg,
      transparent 38%,
      rgba(255,255,255,0.55) 47%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0.55) 53%,
      transparent 62%);
    mix-blend-mode: overlay;
    opacity: 0;
    transform: translateX(-130%);
    animation: ha-bevel-flare 0.55s cubic-bezier(0.45, 0, 0.55, 1) forwards;
    animation-delay: 1.6s;
  }
  @keyframes ha-bevel-flare {
    0%   { opacity: 0;   transform: translateX(-130%); }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0;   transform: translateX(130%); }
  }
  .hero-anim .ha-desktop-screen {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: #0F0E20;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20);
  }
  .hero-anim .ha-desktop-screen img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: ha-screen-reveal 0.45s ease-out forwards;
    animation-delay: 1.85s;
  }
  @keyframes ha-screen-reveal { to { opacity: 1; } }
  .hero-anim .ha-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg,
      transparent 36%,
      rgba(255,255,255,0.10) 46%,
      rgba(255,255,255,0.55) 50%,
      rgba(255,255,255,0.10) 54%,
      transparent 64%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-110%);
    animation: ha-sheen-sweep 0.65s cubic-bezier(0.45, 0, 0.55, 1) forwards;
    animation-delay: 2.0s;
    border-radius: 4px;
  }
  @keyframes ha-sheen-sweep {
    0%   { opacity: 0;   transform: translateX(-110%); }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0;   transform: translateX(110%); }
  }
  .hero-anim .ha-desktop-stand {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 9%;
    height: 8%;
    background: linear-gradient(180deg, #7a8398 0%, #404758 100%);
    clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
    opacity: 0;
    backface-visibility: hidden;
    animation: ha-stand-enter 0.7s ease-out forwards;
    animation-delay: 2.4s;
    filter: blur(0.2px);
  }
  .hero-anim .ha-desktop-base {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 26%;
    height: 1.6%;
    background: linear-gradient(180deg, #7a8398 0%, #2a2f40 100%);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
    opacity: 0;
    backface-visibility: hidden;
    animation: ha-stand-enter 0.7s ease-out forwards;
    animation-delay: 2.4s;
  }
  @keyframes ha-stand-enter {
    0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
    100% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
  }
  .hero-anim .ha-mobile {
    position: absolute;
    right: -1%;
    bottom: 4%;
    width: 17%;
    aspect-ratio: 9 / 19.5;
    border-radius: 22px;
    background: linear-gradient(150deg, #1A1B2E 0%, #0F0E20 100%);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 5px;
    box-shadow:
      0 16px 40px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.10);
    opacity: 0;
    transform: scale(1.45);
    animation: ha-mobile-enter 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 2.6s;
    z-index: 2;
  }
  @keyframes ha-mobile-enter {
    0%   { opacity: 0; transform: scale(1.45); }
    100% { opacity: 1; transform: scale(1); }
  }
  .hero-anim .ha-mobile-screen {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #0F0E20;
  }
  .hero-anim .ha-mobile-screen img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .hero-anim .ha-mobile-notch {
    position: absolute;
    top: 1.5%; left: 50%;
    transform: translateX(-50%);
    width: 30%; height: 4%;
    background: #000;
    border-radius: 0 0 12px 12px;
    z-index: 6;
  }

  /* On mobile breakpoints, simplify the animation so it doesn't dominate */
  @media (max-width: 720px) {
    .hero-anim { aspect-ratio: 4 / 3; }
  }

  /* ============================================================
     SCROLL-TRIGGERED MICRO-INTERACTIONS
     A single class-based system. JS adds .fx + a direction class
     (.fx-up/.fx-right/.fx-left) to target elements on page load.
     IntersectionObserver adds .is-in to trigger the animation,
     with a 20ms stagger between siblings within a section.
     ============================================================ */
  .fx {
    opacity: 0;
    will-change: opacity, transform;
  }
  .fx.fx-up    { transform: translateY(28px); }
  .fx.fx-right { transform: translateX(280px); }    /* far longer travel */
  .fx.fx-left  { transform: translateX(-280px); }

  .fx.is-in.fx-up    { animation: fx-up-anim    0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  /* Side-slides: even more deliberate — longer duration, more pronounced ease */
  .fx.is-in.fx-right { animation: fx-right-anim 1.30s cubic-bezier(0.12, 1, 0.22, 1) forwards; }
  .fx.is-in.fx-left  { animation: fx-left-anim  1.30s cubic-bezier(0.12, 1, 0.22, 1) forwards; }

  @keyframes fx-up-anim    { to { opacity: 1; transform: translateY(0); } }
  @keyframes fx-right-anim { to { opacity: 1; transform: translateX(0); } }
  @keyframes fx-left-anim  { to { opacity: 1; transform: translateX(0); } }

  @media (prefers-reduced-motion: reduce) {
    .fx, .fx.is-in {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
  }

  /* ============================================================
     STICKY NAV — INVERSION ON SCROLL
     When body has .nav-inverted (added by JS once user scrolls
     past ~80px), the topbar flips from dark-canvas glass to a
     90%-opacity white frosted bar with dark wordmark + links.
     ============================================================ */
  .topbar {
    transition:
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }
  .nav-logo .wordmark,
  .nav-links > a,
  .nav-links .nav-trigger {
    transition: color 220ms ease;
  }

  body.nav-inverted .topbar {
    background: rgba(255, 255, 255, 0.90);
    border-bottom-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 4px 18px rgba(13, 11, 24, 0.06);
  }
  body.nav-inverted .topbar .nav-logo .wordmark {
    color: var(--neutral-900);
  }
  body.nav-inverted .topbar .nav-links > a,
  body.nav-inverted .topbar .nav-links .nav-trigger {
    color: var(--neutral-700);
  }
  body.nav-inverted .topbar .nav-links > a:hover,
  body.nav-inverted .topbar .nav-links .nav-trigger:hover {
    color: var(--neutral-900);
  }
  /* Talk-to-us CTA stays primary purple, switches to light-canvas variant */
  body.nav-inverted .topbar .nav-cta .btn.on-dark {
    color: #FFFFFF;
    background: var(--purple-primary);
  }
  /* Sign-in ghost button — its dark-canvas styling (light text + light border
     on transparent bg) vanishes against the white nav. Flip to a dark-on-light
     ghost so it stays visible. */
  body.nav-inverted .topbar .nav-cta .btn.btn-ghost-dark {
    color: var(--neutral-900);
    border-color: rgba(13, 11, 24, 0.18);
    background: transparent;
  }
  body.nav-inverted .topbar .nav-cta .btn.btn-ghost-dark:hover {
    border-color: rgba(13, 11, 24, 0.40);
    background: rgba(13, 11, 24, 0.05);
  }

  /* ============================================================
     PILLAR LOGO ANIMATIONS — three Lotties + glowing Aion wings
     Each pillar shows a brand-recolored Lottie (foreground)
     over a faint Aion-mark backdrop. Each background wing
     pulses (slight scale + glow) in sequence — teal → blue →
     violet — through the loop, matching the Lottie's duration.
     ============================================================ */
  .aion-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

  .pillar-image-wrap.logo-mortise {
    aspect-ratio: 5 / 3;
    background: rgba(255, 255, 255, 0.03);
    padding: 16px;
    position: relative;
    overflow: hidden;
  }

  .logo-anim {
    position: absolute;
    inset: 0;
  }

  /* Background wings — sit behind the Lottie at low opacity */
  .logo-anim .bg-mark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    aspect-ratio: 85 / 93.6;
    z-index: 0;
    pointer-events: none;
  }
  .logo-anim .bg-mark svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
  }
  .logo-anim .bg-mark .wing {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    opacity: 0.10;
    will-change: transform, opacity, filter;
  }
  .logo-anim .bg-mark .logo-dot { opacity: 0.10; }

  /* Pulse keyframes — same percentage map for all three Lotties.
     Animation-duration matches each Lottie's loop length. */
  @keyframes wing-pulse-teal {
    0%, 100% { opacity: 0.10; transform: scaleY(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    16%      { opacity: 0.30; transform: scaleY(1.05); filter: brightness(1.6) drop-shadow(0 0 5px rgba(0,210,255,0.45)); }
    33%      { opacity: 0.10; transform: scaleY(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  }
  @keyframes wing-pulse-blue {
    0%, 100% { opacity: 0.10; transform: scaleY(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    49%      { opacity: 0.30; transform: scaleY(1.05); filter: brightness(1.6) drop-shadow(0 0 5px rgba(91,127,255,0.45)); }
    66%      { opacity: 0.10; transform: scaleY(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  }
  @keyframes wing-pulse-violet {
    0%, 100% { opacity: 0.10; transform: scaleY(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    82%      { opacity: 0.30; transform: scaleY(1.06); filter: brightness(1.6) drop-shadow(0 0 5px rgba(167,139,250,0.45)); }
    99%      { opacity: 0.10; transform: scaleY(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  }
  /* Wing pulses are gated on .is-playing — they fire ONCE per trigger
     (scroll-into-view or hover) and settle back to rest. Durations
     match each pillar's new Lottie runtime. */
  .logo-anim.is-playing.logo-funding   .bg-mark .wing-teal   { animation: wing-pulse-teal   1.85s ease-in-out forwards; }
  .logo-anim.is-playing.logo-funding   .bg-mark .wing-blue   { animation: wing-pulse-blue   1.85s ease-in-out forwards; }
  .logo-anim.is-playing.logo-funding   .bg-mark .wing-violet { animation: wing-pulse-violet 1.85s ease-in-out forwards; }
  .logo-anim.is-playing.logo-banking   .bg-mark .wing-teal   { animation: wing-pulse-teal   2.00s ease-in-out forwards; }
  .logo-anim.is-playing.logo-banking   .bg-mark .wing-blue   { animation: wing-pulse-blue   2.00s ease-in-out forwards; }
  .logo-anim.is-playing.logo-banking   .bg-mark .wing-violet { animation: wing-pulse-violet 2.00s ease-in-out forwards; }
  .logo-anim.is-playing.logo-expertise .bg-mark .wing-teal   { animation: wing-pulse-teal   2.00s ease-in-out forwards; }
  .logo-anim.is-playing.logo-expertise .bg-mark .wing-blue   { animation: wing-pulse-blue   2.00s ease-in-out forwards; }
  .logo-anim.is-playing.logo-expertise .bg-mark .wing-violet { animation: wing-pulse-violet 2.00s ease-in-out forwards; }

  /* ----------------------------------------------------------------
     Smaller, circular badge for the Lottie icon (Security-style).
     Centered in the mortise; the bg-mark wings remain fully visible
     behind and around the badge.
     ---------------------------------------------------------------- */
  .pillar-image-wrap.logo-mortise .lottie-host {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92px;
    height: 92px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.32);
    box-shadow:
      0 8px 24px rgba(13, 11, 24, 0.40),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .pillar-image-wrap.logo-mortise .lottie-host svg {
    width: 64% !important;
    height: 64% !important;
    display: block;
  }

  /* Foreground Lottie — centered over the wings */
  .logo-anim .lottie-host {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    aspect-ratio: 1 / 1;
    z-index: 2;
    pointer-events: none;
  }
  .logo-anim .lottie-host svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .logo-anim .bg-mark .wing {
      animation: none !important;
      opacity: 0.15 !important;
      transform: none !important;
      filter: none !important;
    }
  }

  /* ============================================================
     LOGO MARQUEE — infinite single-row scroll of client logos.
     Replaces the static logo strip on pages that opt in via the
     `.is-marquee` modifier. Pauses on hover.
     Scoped to `.logo-strip.is-marquee` (not bare `.logo-strip`) —
     unscoped, this block was same-specificity-but-later than the
     static strip's `.logo-strip .lbl` rule above and silently won
     on every page, blowing up the "Trusted by..." label (26px,
     sentence case, dark-canvas text color illegible on light bg).
     No page currently has `.is-marquee` in markup; add it deliberately
     when a marquee treatment ships. Fixed 2026-06-26.
     ============================================================ */
  .logo-strip.is-marquee {
    overflow: hidden;
    padding: var(--s-16) 0 var(--s-12);
  }
  .logo-strip.is-marquee .container.logo-strip-inner {
    flex-direction: column;
    gap: var(--s-10);
    overflow: visible;
  }
  /* Enlarge the eyebrow to a subhead size — heading typography rather than tag */
  .logo-strip.is-marquee .lbl {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
    color: var(--dark-text);
    letter-spacing: -0.015em;
    text-transform: none;             /* drop the previous uppercase styling */
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }

  /* Marquee scroller */
  .logo-marquee {
    width: 100vw;                     /* full bleed across viewport */
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    /* Soft edge fade so logos don't pop in/out abruptly */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .logo-marquee-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: logo-marquee 90s linear infinite;
    will-change: transform;
  }
  .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
  .logo-marquee img {
    height: 68px;                     /* +80% from 38px */
    width: auto;
    max-width: 320px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);  /* render every logo as solid white */
    opacity: 0.65;
    transition: opacity 200ms ease;
  }
  .logo-marquee img:hover { opacity: 1; }

  @keyframes logo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-marquee-track { animation: none; }
  }

  /* ============================================================
     OVERRIDES — replace brand-gradient borders on non-hero
     image / table mortise accents with a soft white-to-gray
     gradient. Hero / dashboard / decorative gradients are left
     alone (intentional brand accent on the most prominent surfaces).
     ============================================================ */
  .feature-stat-card::before {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.25)) !important;
  }
  .trust-card::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.25)) !important;
  }
  .path-card::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.25)) !important;
    opacity: 0.7 !important;
  }

  /* "Up to" prefix above the big-stat number — sits above $5M */
  .feature-stat-card .big-stat-num .big-stat-prefix {
    display: block;
    font-family: var(--font-data);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--dark-text-tertiary);
    margin-bottom: 6px;
    line-height: 1;
  }

  /* ============================================================
     PROPORTIONAL TYPE BUMP — overall ~10% larger across body
     and headings. Handled by nudging the document root font
     size for any rem-based values, plus targeted upticks on
     key explicit px sizes.
     ============================================================ */
  html { font-size: 17.6px; }   /* default browser 16px → +10% (affects rem values only) */

  /* Targeted size bumps for elements declared in px. Each is roughly
     +10% of its prior value, rounded to a clean number. */
  body { font-size: 15.5px; }
  .hero h1 { font-size: 52.8px; }
  @media (min-width: 760px) { .hero h1 { font-size: 70.4px; } }
  .hero p.lede { font-size: 19.8px; }
  .hero-trust .num { font-size: 22px; }
  .hero-trust .label { font-size: 13.2px; }
  .section-head h2,
  .pm-head h2,
  .testi-rotating .section-head h2,
  .trust-bar .section-head h2 { font-size: 35.2px; }
  @media (min-width: 900px) {
    .section-head h2,
    .pm-head h2,
    .testi-rotating .section-head h2,
    .trust-bar .section-head h2 { font-size: 41.8px; }
  }
  .section-head p,
  .pm-head p { font-size: 17.6px; }
  .pillar h3 { font-size: 22px; }
  .pillar p  { font-size: 16.5px; }
  .pillar .tag { font-size: 13.2px; }
  .feature-copy h2 { font-size: 39.6px; }
  @media (min-width: 900px) { .feature-copy h2 { font-size: 48.4px; } }
  .feature-copy .lede { font-size: 19.8px; }
  .feature-claims h4 { font-size: 18.7px; }
  .feature-claims p  { font-size: 15.4px; }
  .feature-stat-card .big-stat-num { font-size: 79.2px; }
  .feature-stat-card .mini-num     { font-size: 30.8px; }
  .feature-stat-card .big-stat-label,
  .feature-stat-card .mini-label,
  .feature-stat-card .stat-foot { font-size: 14.3px; }
  .testi-quote-card blockquote { font-size: 17.6px; }
  .testi-quote-card .name      { font-size: 15.4px; }
  .testi-quote-card .role      { font-size: 14.3px; }
  .trust-card h3 { font-size: 19.8px; }
  .trust-card p  { font-size: 15.4px; }
  .cta-band h2 { font-size: 35.2px; }
  .cta-band p  { font-size: 17.6px; }
  .btn { font-size: 15.4px; }
  /* Nav text bumped slightly for legibility — but capped so the topbar still fits */
  .nav-links > a,
  .nav-links .nav-trigger { font-size: 15.4px; }
  .nav-logo .wordmark { font-size: 22px; }


/* ============================================================
   FEATURE-PAGE FAMILY COMPONENTS — folded in 2026-06-26
   ============================================================
   Component classes shared across the interior "feature page"
   family (Platform, Credit, Lending, Pricing, etc.) — confirmed
   used on 2+ pages already (e.g. .compare-table is used on the
   pricing/credit pages; .feature-callout/.usecase-card/etc. were
   found on the Platform page and recur on Credit). None of these
   selectors existed in this file or in aion-homepage-styles*.css
   before this addition, and none touch .hero/.hero-grid/.dash/
   .stat-row — the homepage's distinct dark-gradient/100vh-hero
   styling (in aion-homepage-styles.css, linked only on the
   homepage's own Page Settings) is unaffected.
   ============================================================ */

.is-light .integrated-card {
    background: #FFFFFF;
    border-color: rgba(13, 11, 24, 0.08);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }

.is-light .integrated-card h3 { color: var(--neutral-900); }

.is-light .integrated-card p  { color: var(--neutral-700); }

.is-light .integrated-card .num { color: var(--purple-primary); }

/* Removed in v11: a generic ".is-dark .compare-table" text-color override
   block lived here. It was added speculatively during the 2026-06-26
   feature-page-family fold and never had a real use case — Pricing's
   cost-compare section uses "is-light" (not is-dark), and Credit/Lending's
   compare-table is an intentional white floating card inside its is-dark
   section (see the "Compare table" comment earlier in this file). The
   override forced light text onto that white card, making it illegible.
   No page relies on a dark-canvas compare-table, so the block was deleted
   rather than rescoped. */

.is-dark .industries-deep h3 { color: var(--dark-text); }

.is-dark .industries-deep p  { color: var(--dark-text-secondary); }

.hero-secondary-link {
    display: inline-flex;
    margin: 0 0 var(--s-8) -6px;
    color: var(--dark-text);
  }

.hero-secondary-link:hover { color: var(--purple-on-dark); }

.feature-callout {
    margin-top: var(--s-10);
    padding: var(--s-6) var(--s-8);
    background: var(--purple-surface);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: var(--r-lg);
  }

.feature-callout h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 var(--s-2);
    color: var(--neutral-900);
  }

.feature-callout p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0 0 var(--s-3);
  }

.is-dark .feature-callout {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.28);
  }

.is-dark .feature-callout h4 { color: var(--dark-text); }

.is-dark .feature-callout p  { color: var(--dark-text-secondary); }

.replace-section {
    background: var(--neutral-50);
    padding: var(--s-24) 0;
  }

.replace-table-wrap {
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--neutral-0);
  }

.replace-table {
    width: 100%;
    border-collapse: collapse;
  }

.replace-table th,
  .replace-table td {
    padding: var(--s-4) var(--s-6);
    text-align: left;
    font-family: var(--font-data);
    font-size: 14px;
  }

.replace-table thead th {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-700);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
  }

.replace-table thead th.th-aion { color: var(--purple-primary); text-align: center; }

.replace-table tbody tr + tr th,
  .replace-table tbody tr + tr td { border-top: 1px solid var(--neutral-100); }

.replace-table tbody th {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--neutral-900);
  }

.replace-table tbody td {
    text-align: center;
    color: var(--success);
    font-weight: 700;
  }

.usecases {
    background: var(--neutral-0);
    padding: var(--s-24) 0;
  }

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }

.usecase-card {
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    background: var(--neutral-0);
  }

.usecase-card h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
  }

.usecase-card p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0 0 var(--s-4);
  }

.is-dark .replace-table-wrap {
    background: var(--dark-card);
    border-color: var(--dark-card-border);
  }

.is-dark .replace-table thead th {
    color: var(--dark-text);
    background: rgba(255,255,255,0.04);
    border-bottom-color: var(--dark-card-border);
  }

.is-dark .replace-table thead th.th-aion { color: var(--purple-on-dark); }

.is-dark .replace-table tbody th { color: var(--dark-text); }

.is-dark .replace-table tbody tr + tr th,
  .is-dark .replace-table tbody tr + tr td { border-top-color: var(--dark-card-border); }

.is-dark .usecase-card {
    background: var(--dark-card);
    border-color: var(--dark-card-border);
  }

.is-dark .usecase-card h3 { color: var(--dark-text); }

.is-dark .usecase-card p  { color: var(--dark-text-secondary); }

.is-dark .testi-head .eyebrow { color: var(--purple-on-dark); }

.is-dark .testi-head h2       { color: var(--dark-text); }

.is-dark .testi-card {
    background: var(--dark-card);
    border-color: var(--dark-card-border);
  }

.is-dark .testi-card .mark        { color: var(--purple-on-dark); }

.is-dark .testi-card blockquote   { color: var(--dark-text); }

.is-dark .testi-card .attr        { border-top-color: var(--dark-card-border); }

.is-dark .testi-card .attr .name  { color: var(--dark-text); }

.is-dark .testi-card .attr .role  { color: var(--dark-text-tertiary); }

.is-light.cta-band,
  .is-light.cta-band h2 { color: var(--neutral-900); }

.is-light.cta-band p  { color: var(--neutral-700); }

.is-light .integrated-screenshot { border-color: rgba(13, 11, 24, 0.08); }

a.module-card { display: block; text-decoration: none; }

@media (max-width: 880px) {
  .usecase-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLIENT STORY / CASE STUDY FAMILY (hub + 5 detail pages)
   Added in v12 — folded from client-stories.html's page-local
   <style> block. Covers .case-* (hub grid card hover internals)
   and .cs-* (detail-page breadcrumb, hero/snapshot, video,
   pull quotes, solution grid, results) component families.
   ============================================================ */

  .case-grid .case-card {
    flex: 0 0 calc((100% - 2 * var(--s-6)) / 3);
    max-width: calc((100% - 2 * var(--s-6)) / 3);
  }
  /* v27 mobile fix: the 3-up sizing rule above is later in source order than the
     earlier @media(max-width:1000px){.case-grid .case-card{flex-basis:100%}} rule
     (equal specificity), so it won at all widths and the cards stayed ~1/3 width,
     squished, on phones (client-stories hub + lending). This override sits after
     the base rule so it wins at <=1000px. */
  @media (max-width: 1000px) {
    .case-grid .case-card { flex: 1 1 100%; max-width: 100%; }
  }

  .case-card:hover,
  .case-card:focus-visible {
    border-color: var(--neutral-300);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13, 11, 24, 0.08);
  }

  .case-image img.case-photo {
    width: 100%; height: 100%; display: block;
    object-fit: cover;
    filter: saturate(0.82) brightness(0.95);
    transition: filter var(--t-slow) var(--ease-default), transform var(--t-slow) var(--ease-default);
  }

  .case-card:hover .case-image img.case-photo,
  .case-card:focus-visible .case-image img.case-photo {
    filter: saturate(0.55) brightness(0.55);
    transform: scale(1.04);
  }

  .case-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,11,24,0) 35%, rgba(13,11,24,0.68) 100%);
    opacity: 0.85;
    transition: opacity var(--t-slow) var(--ease-default);
    pointer-events: none;
  }

  .case-card:hover .case-scrim,
  .case-card:focus-visible .case-scrim {
    opacity: 1;
  }

  .case-person-tag {
    position: absolute;
    left: var(--s-5);
    right: var(--s-5);
    bottom: var(--s-5);
    color: var(--neutral-0);
    text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.6);
    pointer-events: none;
  }

  .case-person-tag .person-name {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
  }

  .case-person-tag .person-title {
    display: block;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    opacity: 0.94;
  }

  .case-body h3.case-logo {
    margin: 0;
    display: flex;
    align-items: center;
    min-height: 32px;
  }

  .case-body h3.case-logo img {
    display: block;
    max-width: 160px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .case-reveal {
    margin-top: var(--s-1);
  }

  .case-reveal p {
    margin: 0 0 var(--s-2);
  }


  /* ============================================================
     CASE STUDY — SILVER METALX
     ============================================================ */

  /* Breadcrumb */
  .cs-breadcrumb {
    background: var(--neutral-25, #FAFAFC);
    border-bottom: 1px solid var(--neutral-100);
    padding: var(--s-3) 0;
    /* v21: clears the sitewide fixed nav (see header comment) — without
       this the breadcrumb renders hidden underneath the 65px-tall topbar. */
    margin-top: 65px;
  }

  .cs-breadcrumb ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--neutral-500);
    flex-wrap: wrap;
  }

  .cs-breadcrumb a {
    color: var(--neutral-500);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-default);
  }

  .cs-breadcrumb a:hover { color: var(--purple-primary); }

  .cs-breadcrumb .sep { color: var(--neutral-300); }

  .cs-breadcrumb [aria-current="page"] {
    color: var(--neutral-900);
    font-weight: 500;
  }


  /* Hero */
  /* Top padding bumped 2026-06-27 (Chris: more space above the eyebrow on
     every non-100vh-hero page): .cs-hero 64px -> 80px, .cs-hero-simple
     80px -> 96px — keeps the hub page's extra 16px relative to the detail
     pages, same as before. */
  .cs-hero {
    background: var(--neutral-0);
    padding: var(--s-20) 0 var(--s-12);
    border-bottom: 1px solid var(--neutral-100);
  }

  .cs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-12);
    align-items: start;
  }

  /* Align hero H1's first line with the top edge of the snapshot card
     (Chris, 2026-06-29, v20): .cs-hero-grid switched center->start, and
     the eyebrow chip is pulled out of flow above the column so the H1
     itself becomes the column's effective top. NOTE: this sitewide file
     has no <1000px stacking override for .cs-hero-grid at all (the 5
     static source files do, at max-width:1000px) — pre-existing gap from
     the v12 case-study fold, unrelated to this fix, flagged not fixed.
     The eyebrow mobile-revert below uses that same 1000px breakpoint so
     it's correct if/when that gap gets closed. */
  .cs-hero-copy { position: relative; }
  .cs-hero-copy .cs-eyebrow {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    transform: translateY(calc(-100% - var(--s-4)));
  }
  @media (max-width: 1000px) {
    .cs-hero-copy .cs-eyebrow {
      position: static;
      transform: none;
      margin: 0 0 var(--s-6);
    }
  }

  .cs-hero-simple {
    padding: var(--s-24) 0 var(--s-16);
    text-align: center;
  }

  .cs-hero-copy-centered {
    max-width: 640px;
    margin: 0 auto;
  }

  .cs-hero-copy-centered .cs-eyebrow {
    justify-content: center;
  }

  .cs-hero-copy-centered .cs-subhead {
    margin: 0 auto;
  }

  .cs-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
  }

  .cs-eyebrow-tag {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
    background: var(--purple-surface);
    padding: 6px 12px;
    border-radius: 999px;
  }

  .cs-client-logo {
    height: 32px;
    width: auto;
    display: block;
  }

  .cs-hero h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--neutral-900);
    margin: 0 0 var(--s-6);
  }

  .cs-hero h1 .accent {
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .cs-money {
    font-variant-numeric: tabular-nums;
  }

  .cs-subhead {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5;
    color: var(--neutral-700);
    margin: 0 0 var(--s-8);
    max-width: 56ch;
  }

  .cs-featuring {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .cs-featuring strong {
    color: var(--neutral-900);
    font-weight: 600;
  }

  .cs-hero-image {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--neutral-100);
    position: relative;
    box-shadow: 0 24px 60px rgba(13, 11, 24, 0.10);
  }

  .cs-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.88) brightness(0.98);
  }

  .cs-hero-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.04), rgba(91, 127, 255, 0.04), rgba(124, 58, 237, 0.06));
    mix-blend-mode: color;
    pointer-events: none;
  }


  /* Executive snapshot box (branded) */
  .cs-snapshot-wrap {
    background: var(--neutral-0);
    padding: var(--s-12) 0 var(--s-16);
  }

  .cs-snapshot {
    position: relative;
    background: var(--dark-canvas);
    color: var(--dark-text);
    border-radius: var(--r-xl);
    padding: var(--s-12) var(--s-10);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(13, 11, 24, 0.20);
  }

  .cs-snapshot::before {
    /* Subtle radial accent in upper-right echoing brand glow */
    content: '';
    position: absolute;
    top: -180px; right: -180px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.22), transparent 65%);
    pointer-events: none;
  }

  /* Three-wing brand accent — top-left */
  .cs-snapshot-wings {
    position: absolute;
    top: var(--s-6);
    left: var(--s-10);
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 22px;
  }

  .cs-snapshot-wings .wing {
    display: block;
    width: 8px;
    border-radius: 4px 4px 2px 2px;
  }

  .cs-snapshot-wings .wing-1 { height: 12px; background: var(--teal);   opacity: 0.85; }

  .cs-snapshot-wings .wing-2 { height: 18px; background: var(--blue);   opacity: 0.85; }

  .cs-snapshot-wings .wing-3 { height: 22px; background: var(--violet); opacity: 0.85; }

  /* Tiny shadow dot under the third wing — echoes the logo's "wing + dot" mark */
  .cs-snapshot-wings::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: -2px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--violet);
    opacity: 0.85;
  }

  .cs-snapshot-head {
    position: relative;
    margin: var(--s-8) 0 var(--s-10);
  }

  .cs-snapshot-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-on-dark);
    margin-bottom: var(--s-3);
  }

  .cs-snapshot-head h2 {
    color: var(--dark-text);
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0;
  }

  .cs-snapshot-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    margin: 0;
  }

  .cs-snapshot-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    position: relative;
  }

  .cs-snapshot-item.cs-snapshot-span-2 {
    grid-column: span 2;
  }

  .cs-snapshot-item dt {
    font-family: var(--font-data);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--dark-text-tertiary);
    font-weight: 600;
    margin-bottom: var(--s-2);
  }

  .cs-snapshot-item dd {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.005em;
  }

  .cs-snapshot-item.cs-snapshot-highlight {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.10), rgba(91, 127, 255, 0.10), rgba(124, 58, 237, 0.14));
    border-color: rgba(167, 139, 250, 0.35);
  }

  .cs-snapshot-item.cs-snapshot-highlight dd {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
  }

  .cs-snapshot-item.cs-snapshot-highlight .arrow {
    color: var(--purple-on-dark);
    margin: 0 6px;
    font-weight: 400;
  }


  /* Testimonial video */
  .cs-video-section {
    background: var(--neutral-50);
    padding: var(--s-20) 0;
  }

  .cs-video-head {
    text-align: center;
    margin-bottom: var(--s-10);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .cs-video-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
    margin-bottom: var(--s-3);
  }

  .cs-video-head h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
    color: var(--neutral-900);
    letter-spacing: -0.015em;
  }

  .cs-video-player {
    position: relative;
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-xl);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--t-norm) var(--ease-default),
                box-shadow var(--t-norm) var(--ease-default);
    box-shadow: 0 24px 60px rgba(13, 11, 24, 0.12);
  }

  .cs-video-player:hover {
    transform: translateY(-2px);
    box-shadow: 0 32px 80px rgba(13, 11, 24, 0.18);
  }

  .cs-video-player img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .cs-video-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at center, rgba(13, 11, 24, 0.15), rgba(13, 11, 24, 0.5)),
      linear-gradient(180deg, rgba(13, 11, 24, 0) 40%, rgba(13, 11, 24, 0.6) 100%);
    pointer-events: none;
    transition: background var(--t-norm) var(--ease-default);
  }

  .cs-video-player:hover .cs-video-overlay {
    background:
      radial-gradient(circle at center, rgba(13, 11, 24, 0.10), rgba(13, 11, 24, 0.45)),
      linear-gradient(180deg, rgba(13, 11, 24, 0) 40%, rgba(13, 11, 24, 0.55) 100%);
  }

  .cs-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18),
                0 16px 40px rgba(13, 11, 24, 0.4);
    transition: transform var(--t-norm) var(--ease-default),
                box-shadow var(--t-norm) var(--ease-default);
  }

  .cs-play svg {
    width: 96px; height: 96px;
  }

  .cs-video-player:hover .cs-play {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.22),
                0 20px 50px rgba(13, 11, 24, 0.5);
  }

  .cs-video-caption {
    position: absolute;
    top: var(--s-5);
    left: var(--s-6);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-data);
    font-size: 12px;
  }

  .cs-video-label {
    color: #FFFFFF;
    background: rgba(13, 11, 24, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 10.5px;
  }


  /* Body sections — narrative chapters */
  .cs-section {
    background: var(--neutral-0);
    padding: var(--s-20) 0;
  }

  .cs-section.cs-section-alt {
    background: var(--neutral-50);
  }

  .cs-narrow {
    max-width: 720px;
  }

  .cs-narrow-block { max-width: 620px; }

  .cs-chapter {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--purple-primary);
    margin-bottom: var(--s-4);
  }

  .cs-section h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--neutral-900);
    margin: 0 0 var(--s-6);
  }

  .cs-section .cs-lede {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.55;
    color: var(--neutral-700);
    margin: 0 0 var(--s-6);
  }

  .cs-section p {
    font-family: var(--font-data);
    font-size: 16px;
    line-height: 1.7;
    color: var(--neutral-700);
    margin: 0 0 var(--s-5);
  }

  .cs-section p:last-child { margin-bottom: 0; }


  /* Pull quotes */
  .cs-pullquote {
    position: relative;
    margin: var(--s-8) 0;
    padding: var(--s-2) 0 var(--s-2) var(--s-8);
    background: transparent;
    border: none;
  }

  .cs-pullquote::before {
    /* Subtle vertical gradient rule — only on the left, no bleed */
    content: '';
    position: absolute;
    top: 4px; bottom: 4px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--teal), var(--blue), var(--violet));
    border-radius: 2px;
  }

  .cs-pullquote-context {
    display: block;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--purple-primary);
    margin-bottom: var(--s-3);
  }

  .cs-pullquote p {
    font-family: var(--font-heading);
    font-weight: 500;
    font-style: italic;
    font-size: 22px;
    line-height: 1.4;
    color: var(--neutral-900);
    margin: 0 0 var(--s-3);
    letter-spacing: -0.01em;
  }

  /* Attribution under the pull quote — fine top rule, no dark block. */
  .cs-pullquote .cs-cite {
    display: block;
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--neutral-200);
    font-family: var(--font-data);
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    color: var(--neutral-500);
    background: transparent;
    letter-spacing: 0;
  }

  .cs-pullquote-accent {
    padding: var(--s-6) 0 var(--s-6) var(--s-10);
  }

  .cs-pullquote-accent::before {
    width: 3px;
  }

  .cs-pullquote-accent p {
    font-size: 28px;
    color: var(--neutral-900);
  }


  /* Solution grid (copy + Aion Solution box) */
  .cs-solution-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--s-12);
    align-items: start;
  }

  .cs-solution-copy h2 { margin-bottom: var(--s-5); }


  /* Aion Solution / Products Used branded checklist */
  .cs-products {
    position: relative;
    background: var(--dark-canvas);
    color: var(--dark-text);
    border-radius: var(--r-xl);
    padding: var(--s-10) var(--s-8) var(--s-8);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(13, 11, 24, 0.18);
  }

  .cs-products::before {
    content: '';
    position: absolute;
    bottom: -100px; right: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.22), transparent 65%);
    pointer-events: none;
  }

  .cs-products-wings {
    position: absolute;
    top: var(--s-6);
    left: var(--s-8);
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 22px;
  }

  .cs-products-wings .wing {
    display: block;
    width: 8px;
    border-radius: 4px 4px 2px 2px;
  }

  .cs-products-wings .wing-1 { height: 12px; background: var(--teal);   opacity: 0.85; }

  .cs-products-wings .wing-2 { height: 18px; background: var(--blue);   opacity: 0.85; }

  .cs-products-wings .wing-3 { height: 22px; background: var(--violet); opacity: 0.85; }

  .cs-products-wings::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: -2px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--violet);
    opacity: 0.85;
  }

  .cs-products-eyebrow {
    position: relative;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-on-dark);
    margin-top: var(--s-6);
    margin-bottom: var(--s-2);
  }

  .cs-products h3 {
    position: relative;
    margin: 0 0 var(--s-6);
    font-size: 24px;
    color: var(--dark-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .cs-products-list {
    position: relative;
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  .cs-products-list li {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-md);
    transition: background-color var(--t-fast) var(--ease-default);
  }

  .cs-products-list li.checked {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(167, 139, 250, 0.35);
  }

  .cs-products-list .cs-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--blue), var(--violet));
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .cs-products-list .cs-product-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--dark-text);
    letter-spacing: -0.005em;
  }

  .cs-products-list .cs-product-meta {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--dark-text-secondary);
    text-align: right;
  }


  /* Results */
  .cs-results {
    background: var(--neutral-0);
    padding: var(--s-20) 0;
  }

  .cs-results-head {
    text-align: center;
    margin-bottom: var(--s-12);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .cs-results-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
    margin-bottom: var(--s-3);
  }

  .cs-results-head h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--neutral-900);
    margin: 0;
  }

  .cs-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    margin-bottom: var(--s-12);
  }

  /* v26 mobile fix: restore the case-study grid stacking that the 5 detail
     pages' own source <style> blocks carried at max-width:1000px (and 560px
     for the 4-up results row) but which was lost when the .cs-* family was
     folded into this sitewide file (flagged-not-fixed in the v20 note above).
     Without these, .cs-hero-grid / .cs-solution-grid (2-up) and
     .cs-results-grid (4-up) stayed multi-column and squished on phones across
     Hoosier, Silver MetalX, Just Date, Manifest, and CISO Global. */
  @media (max-width: 1000px) {
    .cs-hero-grid     { grid-template-columns: 1fr; gap: var(--s-10); }
    .cs-solution-grid { grid-template-columns: 1fr; gap: var(--s-10); }
    .cs-results-grid  { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .cs-results-grid  { grid-template-columns: 1fr; }
  }

  .cs-result-card {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    position: relative;
  }

  .cs-result-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    border-radius: 0 0 3px 0;
  }

  .cs-result-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--neutral-900);
    margin-bottom: var(--s-3);
  }

  .cs-result-num .unit {
    font-size: 18px;
    font-weight: 500;
    color: var(--neutral-500);
    letter-spacing: 0;
  }

  .cs-result-label {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--neutral-900);
    font-size: 15px;
    margin-bottom: var(--s-2);
    letter-spacing: -0.005em;
  }

  .cs-result-card p {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--neutral-500);
    line-height: 1.55;
    margin: 0;
  }

  .cs-results-image {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--neutral-100);
    position: relative;
    box-shadow: 0 16px 40px rgba(13, 11, 24, 0.08);
  }

  .cs-results-image img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.88) brightness(0.98);
  }

  .cs-results-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.04), rgba(91, 127, 255, 0.04), rgba(124, 58, 237, 0.06));
    mix-blend-mode: color;
    pointer-events: none;
  }

  /* ============================================================
     CASE STUDY — v3 REVISION
     Original light hero design with executive snapshot moved into
     the right column as a vertical card with SMX logo at top.
     Sections below revert to original styling (no is-light/is-dark
     overrides). Motion + sequential hero snapshot animation added.
     ============================================================ */

  /* Snapshot card in hero — vertical layout */
  .cs-snapshot-hero {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-xl);
    padding: var(--s-8) var(--s-8) var(--s-6);
    box-shadow: 0 24px 60px rgba(13, 11, 24, 0.10);
    position: relative;
    overflow: hidden;
    /* Reset the three-wing brand accent of the standalone version */
  }

  .cs-snapshot-hero::before { content: none; }

  .cs-snapshot-logo {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 0 var(--s-5);
    object-fit: contain;
  }

  .cs-snapshot-hero .cs-snapshot-head {
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--neutral-100);
  }

  .cs-snapshot-hero .cs-snapshot-eyebrow {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--purple-primary);
  }

  .cs-snapshot-grid-vertical {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    margin: 0;
    padding: 0;
  }

  .cs-snapshot-grid-vertical .cs-snapshot-item {
    display: block;
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--neutral-100);
  }

  .cs-snapshot-grid-vertical .cs-snapshot-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .cs-snapshot-grid-vertical .cs-snapshot-item dt {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--neutral-500);
    margin-bottom: 6px;
  }

  .cs-snapshot-grid-vertical .cs-snapshot-item dd {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.45;
    color: var(--neutral-900);
    margin: 0;
    letter-spacing: -0.005em;
  }

  .cs-snapshot-grid-vertical .cs-snapshot-item.cs-snapshot-highlight dd {
    font-size: 22px;
    font-weight: 700;
    color: var(--purple-primary);
    letter-spacing: -0.015em;
  }

  .cs-snapshot-grid-vertical .cs-snapshot-item.cs-snapshot-highlight .arrow {
    color: var(--neutral-300);
    margin: 0 var(--s-2);
    font-weight: 400;
  }


  /* Hero snapshot — sequential fade-in/up on page load */
  .cs-snapshot-hero .cs-snapshot-logo,
  .cs-snapshot-hero .cs-snapshot-head,
  .cs-snapshot-hero .cs-snapshot-item {
    opacity: 0;
    transform: translateY(16px);
    animation: cs-snap-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
  }

  .cs-snapshot-hero .cs-snapshot-logo                                   { animation-delay: 0.20s; }

  .cs-snapshot-hero .cs-snapshot-head                                   { animation-delay: 0.35s; }

  .cs-snapshot-hero .cs-snapshot-grid-vertical .cs-snapshot-item:nth-child(1) { animation-delay: 0.50s; }

  .cs-snapshot-hero .cs-snapshot-grid-vertical .cs-snapshot-item:nth-child(2) { animation-delay: 0.62s; }

  .cs-snapshot-hero .cs-snapshot-grid-vertical .cs-snapshot-item:nth-child(3) { animation-delay: 0.74s; }

  .cs-snapshot-hero .cs-snapshot-grid-vertical .cs-snapshot-item:nth-child(4) { animation-delay: 0.86s; }

  .cs-snapshot-hero .cs-snapshot-grid-vertical .cs-snapshot-item:nth-child(5) { animation-delay: 0.98s; }

  .cs-snapshot-hero .cs-snapshot-grid-vertical .cs-snapshot-item:nth-child(6) { animation-delay: 1.10s; }

  @keyframes cs-snap-in {
    to { opacity: 1; transform: translateY(0); }
  }


  /* ============================================================
     BLOG PAGE — category filter pills
     Added v22: these rules were page-specific in aion-blog.html
     but belong sitewide so no STEP 0.5 is needed on the blog page.
     ============================================================ */
  .blog-filters {
    background: linear-gradient(180deg, #181736 0%, #181736 100%);
    padding: var(--s-6) 0 var(--s-4);
  }
  .blog-filters .container {
    width: 78%;
    max-width: 1480px;
    margin: 0 auto;
  }
  @media (max-width: 980px) {
    .blog-filters .container { width: 100%; max-width: 100%; }
  }
  .blog-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .blog-filter {
    appearance: none;
    border: 1px solid var(--dark-card-border);
    background: var(--dark-card);
    color: var(--dark-text-secondary);
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-default),
                background-color var(--t-fast) var(--ease-default),
                color var(--t-fast) var(--ease-default);
  }
  .blog-filter:hover {
    border-color: rgba(167, 139, 250, 0.35);
    color: var(--dark-text);
  }
  .blog-filter.is-active {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(167, 139, 250, 0.45);
    color: var(--dark-text);
  }

/* ── Custom bullet lists: hide browser disc bullets ── */
.doc-list { list-style: none; }

/* ── Logo strip label size ── */
.logo-strip-inner .lbl { font-size: 30px; }

/* ── Homepage: THE PLATFORM section flush-left ── */
#platform { text-align: left; }


  /* ============================================================
     v28 (2026-07-14, Chris: mobile pages still swipe-scroll sideways).
     Root cause: the scroll-in animation parks .fx-right/.fx-left at
     translateX(+/-280px) until each element animates in; below-the-fold
     ones stay parked ~280px off-screen right and make the whole page
     wider than the viewport, so phones scroll horizontally. (Homepage was
     spared: its fx targets are all vertical 'up'.) v27 tried to clip this
     at the root, but Webflow forces html{overflow-y:scroll}, which makes a
     root overflow-x:clip/hidden compute to `auto` — it never took effect.
     Fix here is at the source: on phones/tablets, .fx-right/.fx-left park
     and reveal VERTICALLY (translateY, via the existing fx-up-anim) so they
     are never parked off-screen horizontally. Nothing horizontal to scroll.
     The reveal keyframes only define the end state (translateX(0)=none), so
     re-pointing the start (base transform) + animation to vertical is clean.
     Desktop (>1024px) keeps the original left/right slide, unchanged.
     ============================================================ */
  @media (max-width: 1024px) {
    .fx.fx-right,
    .fx.fx-left { transform: translateY(28px); }
    .fx.is-in.fx-right,
    .fx.is-in.fx-left { animation: fx-up-anim 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  }