/* ============================================================
   AION HOMEPAGE-SPECIFIC STYLES — v4-classic
   ============================================================
   The interior pages use a class-driven alternating dark/light
   section palette (section.is-light / section.is-dark). The
   homepage instead uses an all-dark gradient palette with smooth
   color transitions section-to-section.

   This file carries the homepage-specific rules that aren't in
   the shared head CSS:
     • .hero / .logo-strip / #platform.section / .feature-credit /
       .feature-platform / .testi-rotating / .trust-bar / .cta-band
       — the dark gradient palette
     • Pillar component styling (Aion-wing Lottie tiles)
     • Feature-credit + feature-platform layouts
     • Testimonial rail + rotating tabs
     • Trust-bar trust cards
     • Hero entry animation
     • Wing-pulse keyframes for the pillar Lotties

   USAGE:
     Webflow → Page Settings (for the HOMEPAGE only)
       → Custom Code → Head Code
     Wrapped in <style>...</style> tags.

   If this file is too large for the per-page Custom Code field
   (some Webflow plans cap inline custom code at ~10KB), upload
   it to Webflow Assets and link it from the head instead:
       <link rel="stylesheet" href="<your-upload-url>/aion-homepage-styles.css" />
   ============================================================ */

  /* ============================================================
     AION HOMEPAGE — CONCEPT 1a: PRODUCT-LED ITERATION
     Base: v1 (Command Center). Adds real aionfi.com product
     screenshots into the Platform pillars and a new "See the
     product" desktop moment between the AI banner and mobile
     screenshots. Imagery referenced from aionfi.com CDN (loads
     in the user's browser at view time).
     Imagery treatment per AION_IMAGERY.md: dark backgrounds,
     screenshots on glass, no white-bg AI slop.
     ============================================================ */

  :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;
  }

  /* ===========================================================
     MEGA-MENU DROPDOWNS — centered, light palette, breathing room.
     Each menu has a left Overview column + a right Features section.
     The dropdown is centered horizontally relative to the topbar
     (consistent position regardless of which trigger you hover),
     uses a very-light-gray surface with dark text, and has more
     horizontal padding for visual openness.
     =========================================================== */

  /* Let dropdowns escape the nav-item's coordinate system and position
     relative to the .topbar — needed for true horizontal centering. */
  .nav-item:has(.dd-mega) { position: static; }

  .nav-dropdown.dd-mega {
    min-width: 0;
    /* Centered horizontally on the topbar; sits just below the navbar */
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(4px);

    /* Light surface — very light gray with subtle dark border + softer shadow */
    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);

    /* More horizontal breathing room */
    padding: 36px 44px;
    display: grid;
    gap: 36px;
  }
  /* Sizes — both bumped slightly to accommodate the new padding */
  .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; }

  /* Open-state transform must preserve the centering translateX */
  .nav-item:hover .nav-dropdown.dd-mega,
  .nav-item:focus-within .nav-dropdown.dd-mega {
    transform: translateX(-50%) translateY(0);
  }

  /* Wide hover bridge — extends across the viewport so the cursor can
     travel from any trigger straight down into the centered dropdown. */
  .nav-dropdown.dd-mega::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -50vw;
    right: -50vw;
    height: 16px;
  }

  /* The shift classes are no longer needed — centering handles it.
     Keep them as no-ops so the markup classes don't break anything. */
  .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; }

  /* Feature link styling (overrides base .nav-dropdown a) */
  .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;
  }

  /* Bottom row link (Platform's "Explore all features") */
  .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);
  }

  .nav-cta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
  .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, #00D2FF, #5B7FFF, #7C3AED);
  }

  .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;
  }
  @media (max-width: 480px) {
    /* The 3-up stat row (1.4fr 1fr 1fr) has an automatic minimum width
       wider than a phone viewport because each .value number can't wrap.
       Stack to one column so .dash never forces .hero-grid to overflow. */
    .dash { padding: var(--s-4); min-width: 0; }
    .stat-row { grid-template-columns: 1fr; gap: var(--s-3); }
  }

  /* 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, #00D2FF 0%, #5B7FFF 60%, #A78BFA 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;
    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: var(--s-5) var(--s-8) var(--s-8);   /* 20px top breathing room between image + heading */
    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));
  }

  /* ===========================================================
     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, #00D2FF, #5B7FFF, #7C3AED);
  }
  .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: PATH PICKER — "What brought you here?"
     =========================================================== */
  .path-picker {
    background: var(--neutral-25, #FAFAFC);
    padding: var(--s-20) 0;
    border-top: 1px solid var(--neutral-100);
    border-bottom: 1px solid var(--neutral-100);
  }
  .path-picker .section-head { margin-bottom: var(--s-12); }
  .path-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
  @media (max-width: 860px) {
    .path-grid { grid-template-columns: 1fr; }
  }
  .path-card {
    position: relative;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--r-lg);
    padding: var(--s-10);
    transition: border-color var(--t-norm) var(--ease-default),
                transform var(--t-norm) var(--ease-default),
                box-shadow var(--t-norm) var(--ease-default);
    overflow: hidden;
  }
  .path-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--teal), var(--blue), var(--violet));
    opacity: 0.9;
  }
  .path-card:hover {
    border-color: var(--neutral-300);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(13, 11, 24, 0.06);
  }
  .path-eyebrow {
    display: inline-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);
  }
  .path-card h3 {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s-4);
    color: var(--neutral-900);
  }
  .path-card p {
    font-family: var(--font-data);
    color: var(--neutral-700);
    margin: 0 0 var(--s-6);
    font-size: 15px;
    line-height: 1.6;
  }
  .path-card .arrow-link {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--purple-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: 14px;
  }
  .path-card .arrow-link:hover { color: var(--purple-hover); }

  /* ===========================================================
     SECTION: TESTIMONIALS (rotating)
     =========================================================== */
  .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: '“';
    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);
  }

  /* ===========================================================
     SECTION: CORE FEATURE — DEEP (lending + platform)
     =========================================================== */
  .feature-deep {
    padding: var(--s-24) 0;
  }
  .feature-credit {
    background: var(--dark-canvas);
    color: var(--dark-text);
    position: relative;
    overflow: hidden;
  }
  .feature-credit::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.20), transparent 65%);
    pointer-events: none;
  }
  .feature-platform {
    background: var(--neutral-0);
  }
  .feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-12);
    align-items: center;
    position: relative;
  }
  @media (max-width: 1000px) {
    .feature-grid { grid-template-columns: 1fr; }
  }
  .feature-grid.reversed .feature-copy { order: 2; }
  .feature-grid.reversed .feature-product-shot { order: 1; }
  @media (max-width: 1000px) {
    .feature-grid.reversed .feature-copy { order: 1; }
    .feature-grid.reversed .feature-product-shot { order: 2; }
  }

  .feature-copy h2 {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: var(--s-3) 0 var(--s-5);
  }
  @media (min-width: 900px) {
    .feature-copy h2 { font-size: 44px; }
  }
  .feature-credit .feature-copy h2 { color: var(--dark-text); }
  .feature-platform .feature-copy h2 { color: var(--neutral-900); }
  .feature-copy h2 .accent {
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .feature-copy .lede {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 var(--s-8);
    max-width: 52ch;
  }
  .feature-credit .feature-copy .lede { color: var(--dark-text-secondary); }
  .feature-platform .feature-copy .lede { color: var(--neutral-700); }

  .section-eyebrow.on-dark {
    color: var(--purple-on-dark);
  }
  .arrow-link.on-dark {
    color: var(--purple-on-dark);
  }
  .arrow-link.on-dark:hover {
    color: var(--dark-text);
  }

  /* Feature claims list */
  .feature-claims {
    list-style: none;
    margin: 0 0 var(--s-8);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
  }
  .feature-claims li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--s-4);
    align-items: start;
  }
  .feature-claims .claim-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-family: var(--font-data);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    background: rgba(124, 58, 237, 0.16);
    color: var(--purple-on-dark);
    border: 1px solid rgba(167, 139, 250, 0.30);
    flex-shrink: 0;
  }
  .feature-claims.light .claim-num {
    background: var(--purple-surface);
    color: var(--purple-primary);
    border-color: rgba(108, 92, 231, 0.20);
  }
  .feature-claims h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    margin: 6px 0 var(--s-2);
    letter-spacing: -0.005em;
  }
  .feature-credit .feature-claims h4 { color: var(--dark-text); }
  .feature-platform .feature-claims h4 { color: var(--neutral-900); }
  .feature-claims p {
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }
  .feature-credit .feature-claims p { color: var(--dark-text-secondary); }
  .feature-platform .feature-claims p { color: var(--neutral-700); }

  /* Stat card on credit feature (dark) */
  .feature-stat-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-xl);
    padding: var(--s-10) var(--s-8);
    position: relative;
    overflow: hidden;
  }
  .feature-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
  }
  .feature-stat-card .big-stat {
    margin-bottom: var(--s-8);
  }
  .feature-stat-card .big-stat-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 96px;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--dark-text);
    font-variant-numeric: tabular-nums;
  }
  .feature-stat-card .big-stat-num .unit {
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .feature-stat-card .big-stat-label {
    font-family: var(--font-data);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--dark-text-tertiary);
    margin-top: var(--s-2);
    font-weight: 600;
  }
  .feature-stat-card .stat-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    padding: var(--s-6) 0;
    border-top: 1px solid var(--dark-card-border);
    border-bottom: 1px solid var(--dark-card-border);
    margin-bottom: var(--s-5);
  }
  .feature-stat-card .mini-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    color: var(--dark-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .feature-stat-card .mini-num .unit {
    color: var(--purple-on-dark);
    font-weight: 500;
  }
  .feature-stat-card .mini-label {
    font-family: var(--font-data);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark-text-tertiary);
    margin-top: 4px;
    font-weight: 600;
  }
  .feature-stat-card .stat-foot {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--dark-text-secondary);
    line-height: 1.5;
  }

  /* Product shot on platform feature (light) */
  .feature-product-shot {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--neutral-50);
    box-shadow: 0 24px 60px rgba(13, 11, 24, 0.10);
  }
  .feature-product-shot img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.88) brightness(0.98);
  }

  /* ===========================================================
     SECTION: TRUST BAR (SECURITY)
     =========================================================== */
  .trust-bar {
    background: var(--dark-canvas);
    color: var(--dark-text);
    padding: var(--s-20) 0;
    position: relative;
    overflow: hidden;
  }
  .trust-bar::before {
    content: '';
    position: absolute;
    bottom: -160px; left: -160px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.10), transparent 65%);
    pointer-events: none;
  }
  .trust-bar .section-head {
    position: relative;
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--s-12);
  }
  .trust-bar .section-head h2 {
    color: var(--dark-text);
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: var(--s-3) 0 var(--s-4);
  }
  .trust-bar .section-head p {
    color: var(--dark-text-secondary);
    font-family: var(--font-data);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
  }
  .trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    position: relative;
  }
  @media (max-width: 900px) {
    .trust-grid { grid-template-columns: 1fr; }
  }
  .trust-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    position: relative;
  }
  .trust-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--teal), var(--blue), var(--violet));
    border-radius: 2px;
  }
  .trust-badge {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.16);
    color: var(--purple-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-5);
    border: 1px solid rgba(167, 139, 250, 0.25);
  }
  .trust-card h3 {
    color: var(--dark-text);
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.005em;
  }
  .trust-card p {
    color: var(--dark-text-secondary);
    font-family: var(--font-data);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }

  /* CTA band — accent span uses gradient */
  .cta-band h2 .accent {
    background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ===========================================================
     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);
  }

  /* ============================================================
     V4 OVERRIDES — GRADUATED DARK PALETTE + STAGGERED CONTAINERS
     ============================================================
     All sections now sit in the dark/deep-blue family. Adjacent
     sections share boundary colors so vertical gradients chain
     seamlessly — the "scroll causes the effect" feel. Container
     widths and horizontal offsets vary per section to create
     visual rhythm down the page.
     ============================================================ */

  /* Deep-navy baseline behind every section (in case of any gap) */
  body {
    background: #14132B;
    color: var(--dark-text);
  }

  /* ---- Section gradient palette (top → bottom). Adjacent sections
     share boundary colors so the transitions are continuous. ---- */
  .hero {
    background: linear-gradient(180deg, #0D0B18 0%, #131228 100%);
    position: relative;
    overflow: hidden;
    /* Make the hero exactly one viewport tall so the user can't see
       section 2 until they actually scroll — guarantees the scroll
       animation on #platform fires fresh on first scroll. */
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  /* Hero glow — fades in at the tail of the hero animation so the device
     elements pop slightly more, without lifting the canvas enough to harm
     the legibility of the hero copy. Centered behind where the device sits. */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 75% 95% at 70% 50%,
        rgba(124, 58, 237, 0.27),
        rgba(91, 127, 255, 0.14) 42%,
        transparent 80%),
      radial-gradient(ellipse 65% 85% at 32% 48%,
        rgba(91, 127, 255, 0.12),
        transparent 75%);
    opacity: 0;
    pointer-events: none;
    animation: hero-glow-in 2.0s ease-out forwards;
    animation-delay: 3.0s;
    z-index: 0;
  }
  .hero > * { position: relative; z-index: 1; }
  @keyframes hero-glow-in { to { opacity: 1; } }

  /* Industrial backdrop image — fades in immediately after the glow
     completes (5.0s). Peaks at 8% opacity so it's barely perceptible —
     a textural hint of the businesses we serve sitting in front of the
     glow but behind everything else. */
  .hero > .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;                /* sits above the ::before glow, below content (z-index: 1) */
    pointer-events: none;
    filter: saturate(0.75) brightness(0.92);     /* per AION_IMAGERY.md treatment */
    animation: hero-bg-img-in 1.8s ease-out forwards;
    animation-delay: 3.6s;     /* now overlaps with the glow finishing — comes in sooner */
  }
  @keyframes hero-bg-img-in {
    to { opacity: 0.08; }
  }
  .logo-strip {
    background: linear-gradient(180deg, #131228 0%, #181736 100%);
    border-top: none;
    border-bottom: none;
  }
  /* Product Overview — "The platform" — id="platform" */
  #platform.section {
    background: linear-gradient(180deg, #181736 0%, #1C1F44 100%);
  }
  /* Core feature: Credit — id="lending" */
  .feature-credit {
    background: linear-gradient(180deg, #1C1F44 0%, #0F0E22 100%);
  }
  .feature-credit::before {
    /* Reduce the bright purple glow so it doesn't fight the gradient */
    opacity: 0.55;
  }
  /* Core feature: Platform — id="platform-feature" */
  .feature-platform {
    background: linear-gradient(180deg, #0F0E22 0%, #161731 100%);
  }
  /* Testimonials — id="stories" */
  .testi-rotating {
    background: linear-gradient(180deg, #161731 0%, #1E2148 100%);
  }
  /* Trust bar — id="security" */
  .trust-bar {
    background: linear-gradient(180deg, #1E2148 0%, #14132B 100%);
  }
  /* CTA band */
  .cta-band {
    background: linear-gradient(180deg, #14132B 0%, #0D0B18 100%);
  }
  /* Footer sits on deepest dark — keep its existing dark-canvas bg */

  /* ---- Card / pillar surfaces flip to dark glass on dark canvas ---- */
  .pillar {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    color: var(--dark-text);
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .pillar:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(167,139,250,0.30);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  }
  .pillar .pillar-content h3 { color: var(--dark-text); }
  .pillar .pillar-content p { color: var(--dark-text-secondary); }
  .pillar .pillar-meta .tag {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
    color: var(--dark-text-secondary);
  }
  .pillar .arrow-link {
    color: var(--purple-on-dark);
  }
  .pillar .arrow-link:hover {
    color: var(--dark-text);
    background: rgba(167,139,250,0.10);
  }

  /* Image wrap inside pillars — full mortise width, entire image visible, no padding */
  .pillar-image-wrap {
    margin: 0;
    padding: 0;
    height: auto;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--dark-card-border);
    display: block;
    overflow: hidden;
    line-height: 0;            /* removes any inline-baseline gap under the img */
  }
  .pillar-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: unset;          /* let the natural width/aspect dictate */
    object-position: unset;
    filter: saturate(0.94);
    -webkit-filter: saturate(0.94);
  }

  /* Logo strip — dark-aware label + list color */
  .logo-strip .lbl,
  .logo-strip ul li {
    color: var(--dark-text-tertiary);
  }
  .logo-strip ul li {
    border-color: rgba(255,255,255,0.06);
  }

  /* Section heads on dark — universal */
  .section-head h2,
  .pm-head h2 {
    color: var(--dark-text);
  }
  .section-head p,
  .pm-head .lede,
  .section .section-head p {
    color: var(--dark-text-secondary);
  }
  .section-eyebrow {
    color: var(--purple-on-dark);
  }

  /* Testimonial cards — flip to dark glass */
  .testi-quote-card {
    background: var(--dark-card);
    border-color: var(--dark-card-border);
    color: var(--dark-text);
  }
  .testi-quote-card::before {
    color: var(--purple-on-dark);
    opacity: 0.25;
  }
  .testi-quote-card blockquote { color: var(--dark-text); }
  .testi-quote-card .testi-attr {
    border-top-color: rgba(255,255,255,0.08);
  }
  .testi-quote-card .testi-attr .name { color: var(--dark-text); }
  .testi-quote-card .testi-attr .role { color: var(--dark-text-secondary); }
  .testi-quote-card .testi-attr .industry { color: var(--purple-on-dark); }
  .testi-hint { color: var(--dark-text-tertiary); }

  /* Platform feature is light-on-dark now — copy + claims */
  .feature-platform .feature-copy h2 { color: var(--dark-text); }
  .feature-platform .feature-copy .lede { color: var(--dark-text-secondary); }
  .feature-platform .feature-claims h4 { color: var(--dark-text); }
  .feature-platform .feature-claims p { color: var(--dark-text-secondary); }
  .feature-platform .feature-claims .claim-num {
    background: rgba(124,58,237,0.16);
    color: var(--purple-on-dark);
    border-color: rgba(167,139,250,0.30);
  }
  .feature-platform .arrow-link {
    color: var(--purple-on-dark);
  }
  .feature-product-shot {
    background: var(--dark-card);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    border: 1px solid var(--dark-card-border);
  }

  /* Logo-strip top/bottom borders removed by the gradient overrides above —
     the gradient transition itself carries the visual separation. */

  /* ============================================================
     CONSISTENT SECTION WIDTHS — ~78vw, CENTERED, NO STAGGER
     ============================================================
     Every section container uses the same width and is centered.
     Cap at 1480px so we don't get absurdly wide on huge displays.
     ============================================================ */

  .hero          .container.hero-grid,
  .logo-strip    .container.logo-strip-inner,
  #platform      .container,
  .feature-credit   .container,
  .feature-platform .container,
  .testi-rotating .container,
  .trust-bar     .container,
  .cta-band      .container.cta-band-inner {
    width: 78%;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  /* On tablet and below, go full width with side padding */
  @media (max-width: 980px) {
    .hero .container.hero-grid,
    .logo-strip .container.logo-strip-inner,
    #platform .container,
    .feature-credit .container,
    .feature-platform .container,
    .testi-rotating .container,
    .trust-bar .container,
    .cta-band .container.cta-band-inner {
      width: 100%;
      max-width: 100%;
    }
  }

  /* Hero CTA — now a single button; tweak spacing so it doesn't look orphaned */
  .hero .hero-actions {
    gap: var(--s-3);
  }

  /* Trust bar inner section-head colors override (already set above but pinning here for clarity) */
  .trust-bar .section-head h2 { color: var(--dark-text); }
  .trust-bar .section-head p { color: var(--dark-text-secondary); }

  /* ---- Testimonial avatars (Manny / Lenny / Annie) ---- */
  .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;
  }
  /* Avatar variant collapses the testi-attr's own border-top — we use the grid container's instead */
  .testi-quote-card .testi-attr.has-avatar { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--s-4); }

  /* ---- Hairline-pill arrow links (default) — every "learn more"-style link
     gets a quiet pill treatment except inside the Product Overview pillars,
     where the cards already do the visual lifting. ---- */
  .feature-credit .arrow-link,
  .feature-platform .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: transparent;
    color: var(--purple-on-dark);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    transition: border-color var(--t-fast) var(--ease-default),
                background-color var(--t-fast) var(--ease-default),
                color var(--t-fast) var(--ease-default);
    align-self: flex-start;
  }
  .feature-credit .arrow-link:hover,
  .feature-platform .arrow-link:hover {
    border-color: rgba(167,139,250,0.45);
    background: rgba(167,139,250,0.12);
    color: var(--dark-text);
    /* override the default arrow-link's neutral-50 hover from earlier in the cascade */
    gap: var(--s-2);
  }
  /* Reset inside the Product Overview ("the platform") pillars — keep them as plain text arrow links */
  #platform .pillar .arrow-link {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
  }
  #platform .pillar .arrow-link:hover {
    background: transparent;
  }

  /* ============================================================
     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. Pauses on hover.
     ============================================================ */
  .logo-strip {
    overflow: hidden;
    padding: var(--s-16) 0 var(--s-12);
  }
  .logo-strip .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 .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; }