/* ============================================================
     CANONICAL BREAKPOINTS - use these for NEW responsive work.
     Existing rules use 13 different max-widths (1100, 1024, 960,
     900, 880, 860, 820, 768, 720, 640, 600, 560, 480, 420). New
     work should normalize on:
       @media (max-width: 480px)   - small phone
       @media (max-width: 720px)   - phone / phablet  (preferred "mobile" cutover)
       @media (max-width: 960px)   - tablet           (preferred "tablet" cutover, where nav collapses)
       @media (max-width: 1200px)  - desktop / wide layout cutoff (matches --maxw)
     JS should mirror these - see window.matchMedia checks in
     index.html. CSS custom properties cannot drive @media query
     values, so this comment is the source of truth.
     ============================================================ */
  .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px 16px; z-index: 10000; font-size: 14px; transition: top 0.2s; text-decoration: none; }
  .skip-link:focus { top: 0; }
  :root {
    /* iOS Safari / Chrome: tell the browser the page is dark so form controls,
       scrollbars, and date pickers use dark-mode UI. */
    color-scheme: dark;
    /* ========== BASE THEME - PURE BLACK ========== */
    --bg-0: #000000;        /* pure black base */
    --bg-1: #050505;        /* section alt */
    --bg-2: #0A0A0A;        /* cards */
    --bg-3: #121212;        /* raised surface */

    --line:    rgba(255, 255, 255, 0.10);
    --line-2:  rgba(255, 255, 255, 0.05);
    --line-3:  rgba(255, 255, 255, 0.15);

    --text-0: #FFFFFF;      /* pure white */
    --text-1: #F1F5F9;      /* soft chrome white */
    --text-2: #D7DDE8;      /* bright silver (pops on black) */
    --text-3: #B0B8C4;      /* mid platinum silver */

    /* ========== ACCENT = CHROME / PLATINUM ========== */
    --accent: #FFFFFF;      /* bright white chrome */
    --accent-2: #E6E6E6;    /* chrome highlight */
    --accent-glow: rgba(255, 255, 255, 0.45);
    --success: #FFFFFF;
    --warn: #E6E6E6;
    --danger: #B0B0B0;

    /* ========== WARM ACCENT - champagne gold (pilot, use sparingly) ========== */
    --accent-champagne:    #D4A843;   /* desaturated champagne */
    --accent-champagne-2:  #B68A2E;   /* champagne shadow tone */
    --warm-glow:           rgba(212, 168, 67, 0.35);
    --warm-glow-soft:      rgba(212, 168, 67, 0.18);

    /* ========== GRADIENT LIBRARY - pull from these anywhere ========== */
    --grad-platinum:           linear-gradient(135deg, #FFF5D2, #FFFFFF, #E2E2E2, #FFFFFF);
    --grad-platinum-champagne: linear-gradient(135deg, #FFF5D2 0%, #FFFFFF 25%, #FFF5D2 55%, #D4A843 85%, #B68A2E 100%);
    --grad-silver:    linear-gradient(135deg, #bdc3c7, #2c3e50);
    --grad-gunmetal:  linear-gradient(135deg, #87909A, #A6B1B9, #87909A);
    --grad-titanium:  linear-gradient(135deg, #232526 0%, #414345 100%);
    --grad-obsidian:  linear-gradient(135deg, #434343 0%, #000000 100%);
    --grad-steel:     linear-gradient(135deg, #757F9A 0%, #D7DDE8 100%);
    --grad-chrome:    linear-gradient(135deg, #E6E6E6 0%, #FFFFFF 25%, #B0B0B0 50%, #FFFFFF 75%, #E6E6E6 100%);
    --grad-mercury:   linear-gradient(135deg, #FFFFFF 0%, #C0C0C0 50%, #808080 100%);
    --grad-graphite:  linear-gradient(135deg, #2C2C2C 0%, #1A1A1A 50%, #000000 100%);
    --grad-moonlight: linear-gradient(135deg, #93A5CF 0%, #E4EFE9 100%);
    --grad-pearl:     linear-gradient(135deg, #F5F7FA 0%, #C3CFE2 100%);
    --grad-midnight:  linear-gradient(135deg, #0F0F0F 0%, #1C1C1C 50%, #0A0A0A 100%);

    /* Primary accent gradient - default = platinum */
    --grad-primary: var(--grad-platinum);
    --grad-button:  linear-gradient(135deg, #FFFFFF 0%, #E5E7EB 100%);

    --radius: 0;
    --radius-sm: 0;
    --radius-xs: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-pill: 999px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --maxw: 1200px;

    /* ========== HEAD FONT - aliased to body so legacy var(--font-head) refs resolve ========== */
    --font-head: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ========== CORNER-MARKER CREAM - promoted from 80+ raw hex uses ========== */
    --accent-cream:   #F4D572;
    --text-on-light:  #0F0F0F;

    /* ========== TIER ACCENTS - single source of truth for N1..N4 brand colors.
       Each tier exposes:
         --tier-n*       canonical bright hex (matches the timeline --step-bright)
         --tier-n*-deep  deeper/static bracket hex
         --tier-n*-rgb       bright rgb tuple, for rgba()
         --tier-n*-rgb-aura  mid-tone aura rgb tuple, for glows + shadows
       Component code should consume these instead of redefining per page. */
    --tier-n1:           #5BA3F5;
    --tier-n1-deep:      #3B7BD6;
    --tier-n1-rgb:       91, 163, 245;
    --tier-n1-rgb-aura:  79, 138, 233;

    --tier-n2:           #A569E5;
    --tier-n2-deep:      #8E4DD6;
    --tier-n2-rgb:       165, 105, 229;
    --tier-n2-rgb-aura:  165, 85, 229;

    --tier-n3:           #3BD088;
    --tier-n3-deep:      #2BB673;
    --tier-n3-rgb-aura:  43, 182, 115;

    --tier-n4:           #D4A843;
    --tier-n4-deep:      #B68A2E;
    --tier-n4-rgb:       240, 200, 104;
    --tier-n4-rgb-aura:  212, 160, 74;

    /* ========== ELEVATION - three steps of chrome-on-black depth.
       Component code can opt in via box-shadow: var(--shadow-N).
       Existing 130+ bespoke box-shadow stacks left alone - these are for
       new work and opportunistic refactors. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-3: 0 18px 44px -8px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(255, 255, 255, 0.06);

    /* ========== Z-INDEX SCALE - replaces ad-hoc tower (1/2/3/90/99/100/399/400/401/500/9999/10000) ========== */
    --z-base:      1;
    --z-elevated:  10;
    --z-sticky:    100;
    --z-nav:       500;
    --z-modal:     1000;
    --z-cursor:    9999;

    /* ========== MOTION - durations companion to existing --ease ========== */
    --duration-fast: 160ms;
    --duration-med:  280ms;
    --duration-slow: 480ms;

    /* ========== STATUS SEMANTICS - opt-in real colors for state UI.
       Existing --success/--warn/--danger stay chrome (used by micro-status
       dots that should read as neutral); use these new tokens when state
       must read as state. */
    --status-success: var(--tier-n3);       /* emerald - reuses N3 tier identity */
    --status-warn:    var(--tier-n4);       /* gold - reuses N4 tier identity */
    --status-danger:  #ef4444;
    --status-info:    var(--tier-n1);       /* saxe blue - reuses N1 */
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* nirvani-universal-starfield layering (integrity-safe):
     - html holds pure black void
     - canvas is z-index 0 fixed background
     - all real UI is z-index >= 1 so stars never paint over type/nav/CTAs
     - hero/title bands stay transparent (skill law) so field shows behind them
     - do NOT recolor titles or add global text-shadow (broke chrome/gold) */
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    background: var(--bg-0);
  }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: transparent;
    color: var(--text-1);
    line-height: 1.6;
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11";
    position: relative;
    z-index: 0;
    isolation: isolate;
  }

  /* Every content shell sits above the starfield. Colors/fonts untouched. */
  main, header, footer, section, article, aside, nav,
  .nav, .nav-inner, .container, .hero, .hero-centered, .hero-copy,
  .section-head, .tile-grid, .built-on, .tile, .final-cta,
  .pri-tier-grid, .pri-hero, .pri-section, .sec-wrap, .sec-hero,
  .ent-section, .ent-hero, .n1-hero, .footer-inner {
    position: relative;
    z-index: 1;
  }
  /* Nav stays above field and above in-page content */
  header.nav {
    z-index: 100;
  }

  /* Site-wide neural sphere canvas — background only */
  #nirvani-starfield,
  #webgl-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  #webgl-bg canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  canvas#nirvani-starfield {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    mix-blend-mode: normal !important;
  }

  /* CSS starfield fallback: first paint + WebGL/three failure.
     Keeps brand field present on every machine even when GPU path dies. */
  html.starfield-css-fallback body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
    background-image:
      radial-gradient(1.2px 1.2px at 8% 12%, rgba(255, 255, 255, 0.75), transparent),
      radial-gradient(1px 1px at 18% 42%, rgba(212, 232, 255, 0.55), transparent),
      radial-gradient(1.4px 1.4px at 28% 78%, rgba(255, 255, 255, 0.7), transparent),
      radial-gradient(1px 1px at 38% 22%, rgba(244, 213, 114, 0.35), transparent),
      radial-gradient(1.2px 1.2px at 48% 58%, rgba(255, 255, 255, 0.65), transparent),
      radial-gradient(1px 1px at 58% 14%, rgba(212, 232, 255, 0.5), transparent),
      radial-gradient(1.5px 1.5px at 68% 66%, rgba(255, 255, 255, 0.72), transparent),
      radial-gradient(1px 1px at 78% 34%, rgba(244, 213, 114, 0.3), transparent),
      radial-gradient(1.2px 1.2px at 88% 82%, rgba(255, 255, 255, 0.6), transparent),
      radial-gradient(1px 1px at 12% 88%, rgba(212, 232, 255, 0.45), transparent),
      radial-gradient(1.3px 1.3px at 42% 8%, rgba(255, 255, 255, 0.55), transparent),
      radial-gradient(1px 1px at 72% 48%, rgba(255, 255, 255, 0.5), transparent),
      radial-gradient(1.1px 1.1px at 92% 18%, rgba(212, 232, 255, 0.4), transparent),
      radial-gradient(1px 1px at 22% 62%, rgba(255, 255, 255, 0.48), transparent),
      radial-gradient(1.2px 1.2px at 52% 92%, rgba(255, 255, 255, 0.58), transparent);
    opacity: 0.85;
  }
  html.starfield-css-fallback canvas#nirvani-starfield {
    /* WebGL canvas on top when both exist; fallback only when canvas empty/failed */
  }

  /* Retired global background layers (neural sphere only sitewide). */
  .bg-glow,
  .tool-bg,
  .home-static-background,
  .guilloche-base,
  .guilloche-reveal {
    display: none !important;
  }

  body.home-page main#main-content > section {
    background-color: transparent !important;
    background-image: none !important;
  }

  body.home-page main#main-content > section.hero {
    background-color: transparent !important;
    background-image: none !important;
  }

  body.home-page footer {
    /* Solid black bookend (matches header). No translucent gradient over starfield. */
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
  }

  /* ========== FOCUS-VISIBLE - accessibility ==========
     The site uses a custom chrome cursor (cursor:none on pointer:fine),
     which makes keyboard navigation invisible by default. These rules
     give keyboard users a chrome focus ring that matches the aesthetic.
     :focus-visible is keyboard-only; mouse clicks don't trigger it, so
     the chrome cursor still drives the mouse experience untouched. */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    transition: outline-color var(--duration-fast) var(--ease);
  }
  .btn:focus-visible,
  .hero-cta-chrome:focus-visible,
  .nav-links a:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bg-0),
      0 0 0 4px rgba(255, 255, 255, 0.95),
      0 0 22px rgba(255, 255, 255, 0.40);
  }
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Old custom-cursor elements (chrome dot, glow orb, particle trail) stay
     disabled - only #chrome-cursor (the smooth gold ring) is active.
     `cursor: none` is set further below in this file inside the
     #chrome-cursor block, scoped to hover-capable devices. */
  .cursor-chrome,
  .cursor-glow,
  .cursor-trail {
    display: none !important;
  }

  /* ========== TOUCH BEHAVIOR ==========
     iOS Safari fires :hover briefly on tap and leaves the hover state
     "stuck" until the user taps elsewhere. We disable lift/scale transforms
     on hover for touch devices so buttons don't sit elevated after a tap.
     :active still fires on tap and provides the press-feedback (below). */
  @media (hover: none) {
    .btn:hover,
    .btn-primary:hover,
    .btn-nav:hover,
    .btn-ghost:hover,
    .hero-cta-chrome:hover,
    .pri-tier-card:hover,
    .pri-tier-card--featured:hover,
    .pri-tier-mark:hover,
    .pri-tier-card:hover .pri-tier-mark,
    .agent-card:hover,
    .pain-card:hover,
    .tl-item--tinted:hover,
    .ticker-item:hover,
    #n1.pri-tier-card:hover,
    #n2.pri-tier-card:hover,
    #enterprise.pri-tier-card:hover {
      transform: none !important;
    }
    /* Disable hover-only filter brightening too - keeps tap state visually quiet */
    .hero-cta-chrome:hover { filter: none !important; }
  }

  /* ========== TAP FEEDBACK (:active) ==========
     Mobile users expect a brief press-down acknowledgment. Subtle scale +
     brightness drop, fast transition. Applies on both mouse-click and touch. */
  .btn:active,
  .hero-cta-chrome:active {
    transform: scale(0.97);
    transition-duration: var(--duration-fast);
  }
  .hero-cta-chrome:active .hero-cta-chrome-inner {
    filter: brightness(0.94);
  }
  /* Remove default iOS tap highlight - we provide our own via :active */
  a, button, .btn, .hero-cta-chrome, .pri-tier-card, .ticker-item {
    -webkit-tap-highlight-color: transparent;
  }

  .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ========== HEADER ========== */
  header.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: #000000;
    /* Gradient-tapered IA gold line - tapers from transparent at the edges
       to bright IA gold at center. Brand-parent DNA carried through. */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(212, 168, 67, 0.40) 15%,
      rgba(212, 168, 67, 0.95) 50%,
      rgba(212, 168, 67, 0.40) 85%,
      transparent 100%
    ) 1;
    /* Triple-layer IA gold glow: tight (6px) + mid (14px) + wide halo (28px) */
    box-shadow:
      0 1px 6px rgba(212, 168, 67, 0.55),
      0 2px 14px rgba(212, 168, 67, 0.32),
      0 4px 28px rgba(212, 168, 67, 0.16);
    transition: all 0.3s var(--ease);
  }
  .nav-inner {
    position: relative;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-0);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .logo-img {
    height: 51px; /* was 64; -20% header/footer logo scale 2026-07-22 */
    width: auto;
    display: block;
    /* Warm emissive gold glow - matches the .ia-gold-text founder treatment so
       the wordmark reads as rich on-screen metal, not a flat baked ramp. */
    filter:
      drop-shadow(0 0 1px rgba(255, 237, 179, 0.55))
      drop-shadow(0 0 16px rgba(212, 168, 67, 0.32))
      drop-shadow(0 0 34px rgba(184, 134, 42, 0.18));
  }
  footer .logo-img { height: 51px; }
  /* Keep signature wordmark size on tablet/phone — room exists next to CTA + menu */
  @media (max-width: 960px) {
    /* Footer keeps signature; header mobile sizes set in phone polish blocks */
    footer .logo-img { height: 51px; }
    .logo-img { height: 38px; max-width: min(46vw, 168px); width: auto; object-fit: contain; }
  }
  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }
  .nav-links a {
    color: var(--text-0);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--text-0); }

  /* Nav dropdown */
  .nav-links .has-dropdown {
    position: relative;
  }
  .nav-links .has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .nav-caret {
    font-size: 14px;
    line-height: 1;
    color: #D4A843;
    opacity: 1;
    margin-left: 6px;
    display: inline-block;
    transform-origin: center;
    text-shadow: 0 0 8px rgba(212, 168, 67, 0.65), 0 0 16px rgba(212, 168, 67, 0.35);
    animation: nav-caret-pulse 3.4s ease-in-out infinite;
    transition: transform 0.28s var(--ease), text-shadow 0.28s var(--ease);
  }
  .nav-links .has-dropdown > a {
    position: relative;
    transition: color 0.2s var(--ease), text-shadow 0.2s var(--ease);
  }
  .nav-links .has-dropdown:hover > a,
  .nav-links .has-dropdown:focus-within > a {
    color: var(--accent-cream);
    text-shadow: 0 0 8px rgba(212, 168, 67, 0.35);
  }
  .nav-links .has-dropdown:hover .nav-caret,
  .nav-links .has-dropdown:focus-within .nav-caret {
    transform: rotate(180deg);
    text-shadow: 0 0 10px rgba(212, 168, 67, 0.8), 0 0 20px rgba(212, 168, 67, 0.5);
    animation: none;
  }
  @keyframes nav-caret-pulse {
    0%, 100% { opacity: 0.85; text-shadow: 0 0 4px rgba(212, 168, 67, 0.4), 0 0 10px rgba(212, 168, 67, 0.2); }
    50%      { opacity: 1;    text-shadow: 0 0 8px rgba(212, 168, 67, 0.75), 0 0 16px rgba(212, 168, 67, 0.4); }
  }
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 240px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212, 168, 67, 0.35);
    border-radius: var(--radius-sm);
    box-shadow:
      0 0 12px rgba(212, 168, 67, 0.18),
      0 0 30px rgba(212, 168, 67, 0.08),
      0 20px 50px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 100;
  }
  .nav-links .has-dropdown:hover > .nav-dropdown,
  .nav-links .has-dropdown:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
  .nav-dropdown li {
    list-style: none;
  }
  .nav-dropdown a {
    display: block;
    padding: 11px 22px 11px 28px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-1);
    white-space: nowrap;
    letter-spacing: 0.015em;
    position: relative;
    transition: color 0.2s, background 0.2s, padding-left 0.25s var(--ease);
  }
  .nav-dropdown a::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-cream);
    opacity: 0;
    transform: translateY(-50%) scale(0);
    transform-origin: center;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
    box-shadow: 0 0 6px rgba(244, 213, 114, 0.9), 0 0 12px rgba(212, 168, 67, 0.55);
  }
  .nav-dropdown a:hover {
    color: var(--accent-cream);
    background: rgba(212, 168, 67, 0.10);
    padding-left: 34px;
  }
  .nav-dropdown a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .nav-dropdown-divider {
    height: 1px;
    margin: 8px 18px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 168, 67, 0.35) 50%, transparent 100%);
    list-style: none;
    pointer-events: none;
  }
  .nav-dropdown-section {
    list-style: none;
    pointer-events: none;
    padding: 10px 22px 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(212, 168, 67, 0.65);
    border-top: 1px solid rgba(212, 168, 67, 0.20);
    margin-top: 6px;
  }
  .nav-dropdown.nav-dropdown--solid {
    background: #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(212, 168, 67, 0.55);
    min-width: 270px;
  }
  .nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  /* Dark chip with IA-gold icon - chip went from chrome to graphite so the
     gold icon line work pops cleanly. Hover lifts to brighter champagne. */
  .nav-dd-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background:
      radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0) 55%),
      linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 1px solid rgba(212, 168, 67, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 8px rgba(212, 168, 67, 0.22),
      0 0 16px rgba(212, 168, 67, 0.10);
    transition: all 0.25s var(--ease);
  }
  .nav-dd-icon svg {
    width: 14px;
    height: 14px;
    stroke: #D4A843;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
      drop-shadow(0 0 2px rgba(244, 213, 114, 0.55))
      drop-shadow(0 0 6px rgba(212, 168, 67, 0.30));
  }
  .nav-dd-icon img {
    width: 14px;
    height: 14px;
    object-fit: contain;
  }
  .nav-dropdown a:hover .nav-dd-icon {
    border-color: rgba(244, 213, 114, 0.80);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 0 12px rgba(244, 213, 114, 0.40),
      0 0 22px rgba(212, 168, 67, 0.22);
    transform: scale(1.05);
  }
  .nav-dropdown a:hover .nav-dd-icon svg {
    stroke: #F4D572;
    filter:
      drop-shadow(0 0 3px rgba(255, 237, 179, 0.70))
      drop-shadow(0 0 8px rgba(244, 213, 114, 0.40));
  }
  .nav-dropdown a:hover {
    padding-left: 28px;
  }
  .nav-dropdown a::before {
    display: none;
  }
  /* Numbered tier marks (N1-N3) using same chrome-chip container as nav-dd-icon */
  .nav-dd-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #0f0f0f;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  .nav-dropdown a:hover .nav-dd-num {
    color: #000;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    min-height: 44px; /* iOS minimum tap target */
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s var(--ease);
    border: none;
    cursor: pointer;
    font-family: inherit;
  }
  .btn-primary {
    background: var(--grad-button);
    color: #000000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 8px 32px rgba(255, 255, 255, 0.08);
  }
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 16px 48px rgba(255, 255, 255, 0.18);
  }
  .btn-nav {
    background: #000000;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 24px rgba(255, 255, 255, 0.28),
      0 0 48px rgba(255, 255, 255, 0.18),
      inset 0 0 12px rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 1;
  }
  .btn-nav:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.15),
      0 0 36px rgba(255, 255, 255, 0.45),
      0 0 72px rgba(255, 255, 255, 0.28),
      inset 0 0 16px rgba(255, 255, 255, 0.08);
  }
  .btn-ghost {
    background: transparent;
    color: var(--text-1);
    border: 1px solid var(--line);
  }
  .btn-ghost:hover {
    border-color: var(--accent);
    color: var(--text-0);
  }
  .btn-lg { padding: 16px 32px; font-size: 16px; }

  .mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-0);
    font-size: 24px;
    cursor: pointer;
    /* iOS-compliant tap target */
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    border-radius: var(--radius-sm);
    position: relative;
    z-index: 1210;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    flex-shrink: 0;
  }

  /* ========== HERO ========== */
  .hero {
    padding: 140px 0 28px;
    position: relative;
    overflow: hidden;
    min-height: 760px;
    background: transparent;
  }
  @media (max-width: 960px) and (min-width: 721px) {
    .hero { min-height: 680px; }
  }
  @media (max-width: 720px) {
    .hero { min-height: 580px; }
  }
  /* All hero content stays above the page surface. */
  .hero > .container,
  .hero > * {
    position: relative;
    z-index: 1;
  }
  .hero > .container {
    z-index: 2;
  }
  .hero-background-stage {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    overflow: hidden;
    pointer-events: none;
    background-color: #000000;
    background-image: url('/assets/nirvani-home-static-bg.jpg?v=20260703e');
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .hero-background-stage video {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    opacity: 0.98;
    filter: saturate(1.10) contrast(1.10);
    transform: none;
  }
  .hero-background-stage::before,
  .hero-background-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hero-background-stage::before {
    background:
      radial-gradient(circle at 50% 36%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.24) 42%, rgba(0, 0, 0, 0.66) 82%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.04) 32%, rgba(0, 0, 0, 0.66) 100%);
  }
  .hero-background-stage::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.04) 28%, rgba(0, 0, 0, 0.04) 72%, rgba(0, 0, 0, 0.60) 100%),
      radial-gradient(ellipse at 50% 100%, rgba(212, 168, 67, 0.16) 0%, rgba(212, 168, 67, 0.05) 34%, rgba(0, 0, 0, 0) 68%);
  }

  @media (max-width: 720px) {
    .hero-background-stage {
      background-position: center top;
      background-size: 100% auto;
    }
    .hero-background-stage video {
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center top;
    }
  }

  .hero .hero-centered {
    background: transparent;
    backdrop-filter: none;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 2;
  }
  .hero-centered {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .hero-centered .hero-copy h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .quote-banner {
    padding: 14px 0 16px;
    position: relative;
    z-index: 2;
  }
  .quote-banner .container {
    padding: 0 12px;
  }
  /* Quote card outer frame - was an olive/khaki gradient (#6E6753 →
     #8A8068 → #5C5644) that read as muddy brown, especially with the
     dark inner card behind it. Swapped to bright IA gold so the frame
     reads as a polished gold edge, and the box-shadow ditched its olive
     RGB(110,103,83) tint for a cleaner gold halo. */
  .quote-card-wrap {
    position: relative;
    max-width: 750px;
    margin: 0 auto;
    padding: 1.5px;
    border-radius: var(--radius);
    background: linear-gradient(
      135deg,
      #B68A2E 0%,
      #D4A843 25%,
      #F4D572 50%,
      #D4A843 75%,
      #B68A2E 100%
    );
    background-size: 300% 300%;
    animation: quote-border-shimmer 6s linear infinite;
    box-shadow:
      0 0 6px rgba(212, 168, 67, 0.28),
      0 10px 28px rgba(0, 0, 0, 0.55);
    transition: box-shadow 0.5s var(--ease);
  }
  .quote-card-wrap:hover {
    box-shadow:
      0 0 10px rgba(244, 213, 114, 0.40),
      0 12px 32px rgba(0, 0, 0, 0.6);
  }
  @keyframes quote-border-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .quote-card-wrap { animation: none; }
  }
  .quote-card-wrap::before {
    display: none;
  }
  /* Inner card body - pure dark, no gold corner tints. The old gradient
     had rgba(212, 168, 67, 0.08) at top-left + 0.06 at bottom-right, which
     mixed over the black backdrop into a faint olive/warm wash that read
     as brown on the corners. Now: uniform near-black, gold only lives in
     the 1.5px outer frame. */
  .quote-card {
    background: rgba(8, 8, 8, 0.95);
    border-radius: calc(var(--radius) - 2px);
    padding: 28px 38px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  /* Diagonal champagne shimmer sweep on hover (matches JW-style card hover) */
  .quote-card-wrap:hover .quote-card,
  .quote-card:hover {
    /* parent hook so children's z-index keeps text crisp */
  }
  .quote-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
      transparent 32%,
      rgba(244, 213, 114, 0.18) 50%,
      transparent 68%);
    background-size: 220% 100%;
    background-position: -100% 0;
    pointer-events: none;
    z-index: 0;
    transition: background-position 1100ms var(--ease);
  }
  .quote-card-wrap:hover .quote-card::after,
  .quote-card:hover::after {
    background-position: 200% 0;
  }
  /* Keep the text/source above the shimmer */
  .quote-card .quote-text,
  .quote-card .quote-source {
    position: relative;
    z-index: 1;
  }
  .quote-text {
    font-size: clamp(15px, 2vw, 21px);
    font-weight: 700;
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #B0B0B0 0%, #FFFFFF 20%, #E6E6E6 35%, #FFFFFF 50%, #C0C0C0 65%, #FFFFFF 80%, #B0B0B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .quote-text .quote-mark {
    font-size: 1.6em;
    font-style: normal;
    font-weight: 900;
    line-height: 0;
    vertical-align: -0.15em;
    background: linear-gradient(135deg, #E8DCC8 0%, #D4A843 25%, #FFFFFF 50%, #D4A843 75%, #E8DCC8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(212, 168, 67, 0.5));
  }
  /* Hero quote counter - bright lime/mint gradient with green halo.
     Halo uses text-shadow (which reads the glyph outline) instead of
     filter: drop-shadow (which reads the painted alpha of the gradient
     backing and on Webkit produces dark corner artifacts on italic
     stroked digits - Sammy spotted it on the "7"). */
  .quote-text .accent-text {
    font-weight: 800;
    letter-spacing: -0.005em;
    background: linear-gradient(135deg,
      #3BFFB6 0%,
      #00E5A0 35%,
      #5AFFC8 65%,
      #00E5A0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
      0 0 1px rgba(0, 229, 160, 0.55),
      0 0 6px rgba(0, 229, 160, 0.55),
      0 0 14px rgba(0, 229, 160, 0.30);
    font-size: 1.1em;
  }
  .quote-source {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.6), rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(255,255,255,0.15)) 1;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.3));
  }
  .quote-source img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    vertical-align: middle;
    margin: 0 -4px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
  }
  .quote-card-wrap--sm { max-width: 700px; }
  .quote-card-wrap--sm .quote-source img { width: 18px; height: 18px; }
  @media (max-width: 768px) {
    .quote-card { padding: 24px 20px; }
    .quote-card-wrap--sm .quote-card { padding: 16px 16px; }
  }
  .hero-centered .hero-ctas {
    justify-content: center;
    margin-top: 20px;
  }
  /* Single Strategize CTA under quote: centered, not dual-button layout */
  .hero-centered .hero-ctas--single {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 22px;
    margin-bottom: 0;
  }
  .hero-centered .hero-ctas--single .hero-cta-chrome {
    width: auto;
    max-width: 100%;
  }
  .hero-centered .hero-ctas--single .hero-cta-chrome-inner {
    width: auto;
    justify-content: center;
    padding: 18px 42px;
    font-size: 13px;
    letter-spacing: 0.22em;
  }
  .hero-quote {
    display: block;
    margin-top: 12px;
    color: var(--text-2);
  }
  .hero-quote .accent-text {
    font-weight: 700;
  }
  .hero-visual {
    margin-top: -40px;
  }
  @media (max-width: 960px) {
    .hero-visual { margin-top: 0; }
  }

  /* ========== HERO ROBOT ========== */
  .hero-robot-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    height: 260px;
  }
  .hero-robot {
    position: relative;
    z-index: 2;
    max-height: 260px;
    width: auto;
    /* White drop-shadow halos removed - no background glow. Only the floor
       drop-shadow remains, for depth anchoring against the black. */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    animation: robotFloat 6s ease-in-out infinite;
    position: relative;
  }
  /* Chrome shimmer pass - periodic light sweep across the hero robot */
  .hero-robot-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.0) 45%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.0) 55%,
      transparent 62%,
      transparent 100%
    );
    background-size: 240% 240%;
    background-position: 200% 0%;
    mix-blend-mode: screen;
    animation: hero-robot-shimmer 8.5s ease-in-out infinite;
    -webkit-mask: url("assets/robot.webp") center/contain no-repeat;
    mask: url("assets/robot.webp") center/contain no-repeat;
    opacity: 0.85;
  }
  @keyframes hero-robot-shimmer {
    0%, 35%   { background-position: 200% 0%; }
    65%, 100% { background-position: -100% 0%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-robot-wrap::after { animation: none; }
  }
  .hero-robot-glow { display: none; }
  @keyframes robotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }
  @keyframes robotPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
  }
  @media (max-width: 960px) {
    .hero-robot-wrap { height: 200px; margin-bottom: 20px; }
    .hero-robot { max-height: 200px; }
    .hero-robot-glow { width: 320px; height: 320px; }
  }

  /* ========== FLOATING CORNER MASCOT ========== */
  .floating-robot {
    position: fixed;
    bottom: 22%;
    left: 28px;
    width: 84px;
    height: 84px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    border-radius: 50%;
    animation: robotFloat 5s ease-in-out infinite;
    transition: transform 0.3s var(--ease), opacity 0.45s var(--ease), visibility 0.45s var(--ease);
  }
  .floating-robot.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .floating-robot img {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* White drop-shadow halos removed - no background glow. Only the black
       drop-shadow for depth anchoring against black. */
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
  }
  .floating-robot-ring { display: none; }
  .floating-robot-tooltip { display: none; }
  .floating-robot:hover {
    transform: scale(1.08);
  }
  @media (max-width: 640px) {
    .floating-robot { width: 64px; height: 64px; bottom: 22%; left: 20px; }
    .floating-robot-tooltip { display: none; }
  }
  /* Eyebrows: howellshaw gold-ring pills (end-of-file system). No status dots. */
  .micro-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 26px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    margin-bottom: 1.5rem;
    color: #E8C16A;
  }
  .micro-label span.label-text {
    color: #E8C16A;
    -webkit-text-fill-color: #E8C16A;
  }
  .nav-inner .micro-label { margin-bottom: 0; }

  h1 {
    font-size: clamp(35px, 4.58vw, 59px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--text-0);
    margin-bottom: 28px;
  }
  h1 .accent-text {
    color: var(--text-0);
  }
  @keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .hero-sub {
    font-size: 20px;
    color: var(--text-2);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.55;
    text-align: center;
  }
  .hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .hero-trust {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-3);
  }
  .hero-trust span { display: flex; align-items: center; gap: 8px; }
  .hero-trust .check { color: var(--accent); }

  /* Dashboard mockup */
  .dashboard {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 80px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .dashboard::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 50%, rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line-2);
  }
  .dash-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dash-favicon {
    height: 22px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
  }
  .dash-status { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #FFFFFF; font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: 0.08em; }
  .dash-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 12px #FFFFFF, 0 0 20px rgba(255,255,255,0.6); animation: pulse 2s infinite; }

  .dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .dash-stat {
    background: rgba(5, 7, 13, 0.6);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 16px;
    transition: all 0.3s;
  }
  .dash-stat:hover { border-color: var(--line); transform: translateY(-2px); }
  .dash-stat-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
  .dash-stat-value {
    font-size: 28px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: shimmer 7s ease infinite;
  }
  .dash-stat-delta { font-size: 11px; color: var(--success); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

  .dash-chart { margin-top: 18px; height: 80px; position: relative; }
  .dash-chart svg { width: 100%; height: 100%; }

  /* ========== SECTIONS ========== */
  section { padding: 28px 0; position: relative; }
  .section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 20px;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: shimmer 6s ease infinite;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
  }
  h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text-0);
    margin-bottom: 14px;
  }
  .section-sub {
    font-size: 19px;
    color: var(--text-2);
    max-width: 640px;
    margin-bottom: 0;
    line-height: 1.5;
  }
  .section-head { text-align: center; margin: 0 auto; max-width: 720px; display: flex; flex-direction: column; align-items: center; }
  #pain .tile-grid, #verticals .verticals-grid, #how .steps, #revenue-gap .comparison-table-wrap { margin-top: 20px; }
  .cluster-header { margin-bottom: 20px; }
  .section-head .section-sub { margin-left: auto; margin-right: auto; }

  /* Pain cards */
  .pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .pain-card {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(212, 168, 67, 0.45);
    border-radius: var(--radius);
    padding: 36px 32px;
    transition: all 0.4s var(--ease);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.12), 0 0 25px rgba(212, 168, 67, 0.06);
  }
  .pain-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity 0.4s;
  }
  .pain-card:hover {
    border-color: rgba(212, 168, 67, 0.70);
    transform: translateY(-4px);
    box-shadow: 0 0 14px rgba(212, 168, 67, 0.18), 0 0 30px rgba(212, 168, 67, 0.08), inset 0 0 20px rgba(212, 168, 67, 0.05);
    background: rgba(255, 255, 255, 0.05);
  }
  .pain-card:hover::before { opacity: 1; }
  .pain-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: radial-gradient(circle at 35% 30%, rgba(212, 168, 67, 0.18) 0%, rgba(0,0,0,0.6) 70%);
    border: 1px solid rgba(212, 168, 67, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: #D4A843;
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.25), 0 0 22px rgba(212, 168, 67, 0.12), inset 0 0 10px rgba(212, 168, 67, 0.06);
  }
  .pain-card { text-align: center; cursor: pointer; }
  .pain-card h3 { font-size: 13.5px; font-weight: 600; color: var(--text-1); margin-bottom: 0; letter-spacing: 0.01em; }
  .pain-card p { color: var(--text-2); font-size: 15px; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease), margin-top 0.4s var(--ease); }
  .pain-card.open p { max-height: 200px; opacity: 1; margin-top: 12px; }
  .pain-card .pain-chevron { display: block; margin: 10px auto 0; width: 18px; height: 18px; color: var(--text-3); transition: transform 0.3s var(--ease), color 0.3s; }
  .pain-card.open .pain-chevron { transform: rotate(180deg); color: var(--text-0); }

  /* Solution intro */
  .solution-intro {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 0;
  }
  .solution-intro h2 { margin-bottom: 20px; }
  .solution-intro p {
    font-size: 20px;
    color: var(--text-1);
    line-height: 1.6;
    margin-bottom: 24px;
  }

  /* How it works - timeline */
  .timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(212, 168, 67, 0.3) 10%, rgba(212, 168, 67, 0.5) 50%, rgba(212, 168, 67, 0.3) 90%, transparent);
    box-shadow: 0 0 8px rgba(212, 168, 67, 0.2), 0 0 20px rgba(212, 168, 67, 0.08);
  }
  .tl-item {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    align-items: center;
    gap: 0;
    position: relative;
    padding: 14px 0;
  }
  .tl-node {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: radial-gradient(circle at 35% 30%, rgba(212, 168, 67, 0.18) 0%, rgba(0,0,0,0.85) 70%);
    border: 1px solid rgba(212, 168, 67, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.3), 0 0 28px rgba(212, 168, 67, 0.12), inset 0 0 10px rgba(212, 168, 67, 0.06);
    transition: all 0.4s ease;
  }
  .tl-node span {
    color: #D4A843;
    -webkit-text-fill-color: #D4A843;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
  }
  .tl-arm {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.4), rgba(212, 168, 67, 0.15));
    box-shadow: 0 0 6px rgba(212, 168, 67, 0.15);
    transition: all 0.4s ease;
  }
  .tl-item:nth-child(even) .tl-arm {
    background: linear-gradient(90deg, rgba(212, 168, 67, 0.15), rgba(212, 168, 67, 0.4), transparent);
  }
  .tl-content {
    padding: 16px 20px;
    border-radius: var(--radius);
    border: 1px solid rgba(212, 168, 67, 0.45);
    background: rgba(10,10,10,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.12), 0 0 25px rgba(212, 168, 67, 0.06);
    overflow: hidden;
  }
  .tl-item:nth-child(odd) .tl-content { text-align: center; }
  .tl-item:nth-child(even) .tl-content { text-align: center; }
  .tl-name {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.3px;
    color: #fff;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
  }
  /* Chrome rule under each step title - mirrors the icon-card treatment
     used on /n1/. Centered under the word, faded at the edges. */
  .tl-name::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg,
      rgba(200, 200, 200, 0) 0%,
      #C8C8C8 20%,
      #FFFFFF 50%,
      #C8C8C8 80%,
      rgba(200, 200, 200, 0) 100%);
    box-shadow:
      0 0 6px rgba(232, 237, 245, 0.40),
      0 0 14px rgba(232, 237, 245, 0.18);
  }
  .tl-desc {
    margin-top: 8px;
  }
  .tl-desc p {
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-3);
    -webkit-text-fill-color: unset;
    background: none;
  }

  /* 5 automations */
  .autos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .auto-card {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(212, 168, 67, 0.45);
    border-radius: var(--radius);
    padding: 32px 28px;
    position: relative;
    transition: all 0.4s var(--ease);
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.12), 0 0 25px rgba(212, 168, 67, 0.06);
  }
  .auto-card:hover {
    border-color: rgba(212, 168, 67, 0.70);
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 14px rgba(212, 168, 67, 0.18), 0 0 30px rgba(212, 168, 67, 0.08), inset 0 0 20px rgba(212, 168, 67, 0.05);
  }
  .auto-card:nth-child(4) { grid-column: 1 / 2; grid-column-start: 1; }
  .auto-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    font-weight: 700;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: shimmer 6s ease infinite;
  }
  .auto-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: radial-gradient(circle at 35% 30%, rgba(212, 168, 67, 0.18) 0%, rgba(0,0,0,0.6) 70%);
    border: 1px solid rgba(212, 168, 67, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4A843;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.25), 0 0 22px rgba(212, 168, 67, 0.12), inset 0 0 10px rgba(212, 168, 67, 0.06);
  }
  .auto-card h3 { font-size: 18px; font-weight: 600; color: var(--text-0); margin-bottom: 10px; }
  .auto-card p { color: var(--text-2); font-size: 14px; line-height: 1.6; }

  /* ========== CONCEPT-STYLE TILE SYSTEM ========== */
  .cluster-header {
    margin-top: 36px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  /* .cluster-header:first-of-type margin-top:0 was overriding the symmetric
     band rhythm - removed so every cluster header has the same 64/64 gap. */
  .cluster-label {
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: -0.025em;
    margin-bottom: 14px;
    color: var(--text-0);
    -webkit-text-fill-color: var(--text-0);
    line-height: 1.1;
  }
  .cluster-title {
    font-size: 19px;
    color: var(--text-2);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 400;
  }
  .tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 8px;
    /* Stretch so every card in a row shares the same height */
    align-items: stretch;
  }
  .tile {
    position: relative;
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(212, 168, 67, 0.45);
    border-radius: var(--radius);
    padding: 24px 22px;
    cursor: default; /* always-open cards; no expand/collapse */
    transition: all 0.4s var(--ease);
    overflow: hidden;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.12), 0 0 25px rgba(212, 168, 67, 0.06);
    align-self: stretch;
    box-sizing: border-box;
  }
  .tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    opacity: 0.5;
    transition: opacity 0.4s ease;
    background: linear-gradient(90deg, transparent, #D4A843, #FFFFFF, #D4A843, transparent);
  }
  .tile::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.15;
    transition: opacity 0.4s ease;
    pointer-events: none;
    background: radial-gradient(ellipse at top center, rgba(255,255,255,0.06), transparent 70%);
  }
  .tile:hover, .tile.active {
    border-color: rgba(212, 168, 67, 0.70);
    transform: translateY(-4px);
    box-shadow: 0 0 14px rgba(212, 168, 67, 0.18), 0 0 30px rgba(212, 168, 67, 0.08), inset 0 0 20px rgba(212, 168, 67, 0.05);
    background: rgba(255, 255, 255, 0.05);
  }
  .tile:hover::before, .tile.active::before { opacity: 1; }
  .tile:hover::after, .tile.active::after { opacity: 1; }
  .tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background: radial-gradient(circle at 35% 30%, rgba(212, 168, 67, 0.18) 0%, rgba(0,0,0,0.6) 70%);
    border: 1px solid rgba(212, 168, 67, 0.4);
    transition: all 0.4s ease;
    color: #D4A843;
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.25), 0 0 22px rgba(212, 168, 67, 0.12), inset 0 0 10px rgba(212, 168, 67, 0.06);
  }
  .tile:hover .tile-icon, .tile.active .tile-icon {
    background: radial-gradient(circle at 35% 30%, rgba(212, 168, 67, 0.28) 0%, rgba(0,0,0,0.35) 70%);
    border-color: rgba(212, 168, 67, 0.45);
    box-shadow: 0 0 28px rgba(212, 168, 67, 0.25), inset 0 0 14px rgba(212, 168, 67, 0.08);
  }
  .tile-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tile-name {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    color: var(--text-0);
  }
  .tile:hover .tile-name, .tile.active .tile-name { color: #fff; }
  /* Cards always open — no collapse. Full description always visible. */
  .tile-desc {
    position: relative;
    z-index: 1;
    max-height: none;
    overflow: visible;
    opacity: 1;
    margin-top: 12px;
    transition: none;
    flex: 1 1 auto;
    width: 100%;
  }
  .tile.active .tile-desc {
    max-height: none;
    opacity: 1;
    margin-top: 12px;
  }
  .tile-desc p {
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-3);
    -webkit-text-fill-color: unset;
    background: none;
  }
  /* Collapse chevron retired — cards stay expanded */
  .tile-expand {
    display: none !important;
  }
  .tile:hover .tile-expand { display: none !important; }
  .tile.active .tile-expand { display: none !important; }
  .tile-expand svg {
    width: 14px;
    height: 14px;
    stroke: #D4A843;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.6)) drop-shadow(0 0 8px rgba(255,255,255,0.3));
  }
  @media (max-width: 1024px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 768px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }

  /* Equal-size tile variants — every card in a section matches */
  .tile-grid--equal {
    align-items: stretch;
  }
  .tile-grid--equal .tile {
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }
  .tile-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 1024px) { .tile-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px)  { .tile-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }

  /* ===== JW-style glass hover variant for tile grids =====
     Uniform size within each section (stretch + JS equalize for multi-row).
     Chrome L-bracket corners, diagonal shimmer, 3D lift on hover. */
  .tile-grid--jw-glass {
    align-items: stretch;
  }
  .tile-grid--jw-glass .tile {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    justify-content: flex-start;
    padding: 30px 22px 28px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius);
    overflow: hidden;
    background:
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px right 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px right 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 1px 22px no-repeat,
      linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 0 0 1px rgba(255, 255, 255, 0.02),
      0 8px 30px rgba(0, 0, 0, 0.6);
    transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
    transform-origin: center center;
  }
  /* Override existing top-line ::before with diagonal shimmer that sweeps on hover */
  .tile-grid--jw-glass .tile::before {
    content: "";
    position: absolute;
    inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto;
    width: auto;
    background: linear-gradient(115deg,
      transparent 32%,
      rgba(244, 213, 114, 0.18) 50%,
      transparent 68%);
    background-size: 220% 100%;
    background-position: -100% 0;
    opacity: 1;
    transition: background-position 1100ms var(--ease);
    pointer-events: none;
    z-index: 0;
  }
  /* Disable the existing radial ::after wash for this variant */
  .tile-grid--jw-glass .tile::after {
    display: none;
  }
  /* Children sit above the shimmer */
  .tile-grid--jw-glass .tile > * {
    position: relative;
    z-index: 1;
  }
  /* Hover: lift + 3D tilt, brighten + lengthen brackets, sweep shimmer, chrome glow */
  .tile-grid--jw-glass .tile:hover,
  .tile-grid--jw-glass .tile.active {
    transform: perspective(1000px) translateY(-6px) rotateX(2.5deg);
    border-color: rgba(244, 213, 114, 0.65);
    background:
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 1px 32px no-repeat,
      radial-gradient(ellipse 80% 60% at 0% 0%, rgba(244, 213, 114, 0.10), transparent 70%),
      linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.35),
      0 0 20px rgba(212, 168, 67, 0.20),
      0 0 50px rgba(212, 168, 67, 0.12),
      0 16px 50px rgba(0, 0, 0, 0.6);
  }
  .tile-grid--jw-glass .tile:hover::before,
  .tile-grid--jw-glass .tile.active::before {
    background-position: 200% 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .tile-grid--jw-glass .tile:hover,
    .tile-grid--jw-glass .tile.active {
      transform: translateY(-2px);
    }
  }
  /* Move the chevron to center-bottom so it doesn't collide with the bottom-right bracket */
  .tile-grid--jw-glass .tile .tile-expand {
    bottom: 6px;
    right: 50%;
    transform: translateX(50%);
    width: 22px;
    height: 22px;
  }
  .tile-grid--jw-glass .tile.active .tile-expand {
    transform: translateX(50%) rotate(180deg);
  }

  /* ===== Featured tile - persistent chrome glow + FREE chip below the title.
     Same outer dimensions as other tiles, just brighter brackets/glow.       */
  .tile-grid--jw-glass .tile.tile--featured {
    border-color: rgba(244, 213, 114, 0.55);
    background:
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 1px 32px no-repeat,
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244, 213, 114, 0.14), transparent 70%),
      linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.45),
      0 0 22px rgba(212, 168, 67, 0.22),
      0 0 60px rgba(212, 168, 67, 0.14),
      0 12px 40px rgba(0, 0, 0, 0.6);
  }
  /* FREE chip floats to the right of the icon - out of layout flow so the
     card height stays uniform with the rest of the grid. */
  .tile-grid--jw-glass .tile.tile--featured .tile-free-badge {
    position: absolute;
    top: 36px;
    right: 18px;
    display: inline-block;
    margin: 0;
    padding: 4px 11px;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0F0F0F;
    border-radius: 999px;
    border: 1px solid rgba(244, 213, 114, 0.85);
    background: linear-gradient(135deg, #F4D572 0%, #FFFFFF 25%, #B68A2E 60%, #F4D572 100%);
    background-size: 220% 100%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      inset 0 -1px 0 rgba(0, 0, 0, 0.25),
      0 0 12px rgba(244, 213, 114, 0.45),
      0 0 26px rgba(212, 168, 67, 0.28);
    animation: tile-ribbon-shimmer 4.5s ease-in-out infinite;
  }
  @keyframes tile-ribbon-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tile-grid--jw-glass .tile.tile--featured .tile-free-badge { animation: none; }
  }

  /* =================================================================
     JW-glass site-wide uniformity - chrome brackets + diagonal shimmer
     + 3D lift+tilt for every card class on every page.
     Compound selectors (specificity 0.2.0) so the site-wide treatment
     beats single-class inline page rules on each landing page.
     ================================================================= */
  .pri-tier-grid .pri-tier-card,
  .pri-included-grid .pri-included-card,
  .pri-faq .pri-faq-item,
  .car-why-grid .car-why-card,
  .car-openroles .car-openroles-group,
  .car-form,
  .ind-main .vertical,
  .n1-grid .n1-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius);
    overflow: hidden;
    background:
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px right 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px right 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 1px 22px no-repeat,
      linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 0 0 1px rgba(255, 255, 255, 0.02),
      0 8px 30px rgba(0, 0, 0, 0.6);
    transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
    transform-origin: center center;
  }
  .pri-tier-grid .pri-tier-card::before,
  .pri-included-grid .pri-included-card::before,
  .pri-faq .pri-faq-item::before,
  .car-why-grid .car-why-card::before,
  .car-openroles .car-openroles-group::before,
  .car-form::before,
  .ind-main .vertical::before,
  .n1-grid .n1-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
      transparent 32%,
      rgba(244, 213, 114, 0.18) 50%,
      transparent 68%);
    background-size: 220% 100%;
    background-position: -100% 0;
    pointer-events: none;
    transition: background-position 1100ms var(--ease);
    z-index: 0;
    border-radius: inherit;
    opacity: 1;
    height: auto;
    width: auto;
  }
  .pri-tier-grid .pri-tier-card::after,
  .pri-included-grid .pri-included-card::after,
  .pri-faq .pri-faq-item::after,
  .car-why-grid .car-why-card::after,
  .car-openroles .car-openroles-group::after,
  .car-form::after,
  .ind-main .vertical::after,
  .n1-grid .n1-card::after {
    display: none;
  }
  .pri-tier-grid .pri-tier-card > *,
  .pri-included-grid .pri-included-card > *,
  .pri-faq .pri-faq-item > *,
  .car-why-grid .car-why-card > *,
  .car-openroles .car-openroles-group > *,
  .car-form > *,
  .ind-main .vertical > *,
  .n1-grid .n1-card > * {
    position: relative;
    z-index: 1;
  }
  .pri-tier-grid .pri-tier-card:hover,
  .pri-tier-grid .pri-tier-card.active,
  .pri-included-grid .pri-included-card:hover,
  .pri-included-grid .pri-included-card.active,
  .pri-faq .pri-faq-item:hover,
  .pri-faq .pri-faq-item[open],
  .car-why-grid .car-why-card:hover,
  .car-openroles .car-openroles-group:hover,
  .car-form:hover,
  .car-form:focus-within,
  .ind-main .vertical:hover,
  .ind-main .vertical.active,
  .n1-grid .n1-card:hover,
  .n1-grid .n1-card.active {
    transform: perspective(1000px) translateY(-6px) rotateX(2.5deg);
    border-color: rgba(244, 213, 114, 0.65);
    background:
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 1px 32px no-repeat,
      radial-gradient(ellipse 80% 60% at 0% 0%, rgba(244, 213, 114, 0.10), transparent 70%),
      linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.35),
      0 0 20px rgba(212, 168, 67, 0.20),
      0 0 50px rgba(212, 168, 67, 0.12),
      0 16px 50px rgba(0, 0, 0, 0.6);
  }
  .pri-tier-grid .pri-tier-card:hover::before,
  .pri-tier-grid .pri-tier-card.active::before,
  .pri-included-grid .pri-included-card:hover::before,
  .pri-included-grid .pri-included-card.active::before,
  .pri-faq .pri-faq-item:hover::before,
  .pri-faq .pri-faq-item[open]::before,
  .car-why-grid .car-why-card:hover::before,
  .car-openroles .car-openroles-group:hover::before,
  .car-form:hover::before,
  .car-form:focus-within::before,
  .ind-main .vertical:hover::before,
  .ind-main .vertical.active::before,
  .n1-grid .n1-card:hover::before,
  .n1-grid .n1-card.active::before {
    background-position: 200% 0;
  }
  /* Featured pricing tier - brighter persistent brackets, mirrors home .tile--featured */
  .pri-tier-grid .pri-tier-card--featured {
    border-color: rgba(244, 213, 114, 0.55);
    background:
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px right 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 1px 32px no-repeat,
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244, 213, 114, 0.14), transparent 70%),
      linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.45),
      0 0 22px rgba(212, 168, 67, 0.22),
      0 0 60px rgba(212, 168, 67, 0.14),
      0 12px 40px rgba(0, 0, 0, 0.6);
  }
  @media (prefers-reduced-motion: reduce) {
    .pri-tier-grid .pri-tier-card:hover,
    .pri-included-grid .pri-included-card:hover,
    .pri-faq .pri-faq-item:hover,
    .pri-faq .pri-faq-item[open],
    .car-why-grid .car-why-card:hover,
    .car-openroles .car-openroles-group:hover,
    .car-form:hover,
    .ind-main .vertical:hover {
      transform: translateY(-2px);
    }
  }

  /* =================================================================
     Dominate Your Competition - bigger chrome glow + hover shimmer
     ================================================================= */
  .comparison-table-wrap--nirvani {
    position: relative;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.55),
      0 0 18px rgba(244, 213, 114, 0.32),
      0 0 44px rgba(212, 168, 67, 0.20),
      0 0 90px rgba(212, 168, 67, 0.10),
      0 18px 50px rgba(0, 0, 0, 0.55);
    transition: box-shadow 0.5s var(--ease);
  }
  .comparison-table-wrap--nirvani::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
      transparent 32%,
      rgba(244, 213, 114, 0.14) 50%,
      transparent 68%);
    background-size: 220% 100%;
    background-position: -100% 0;
    pointer-events: none;
    z-index: 1;
    transition: background-position 1100ms var(--ease);
    border-radius: inherit;
  }
  .comparison-table-wrap--nirvani:hover {
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.7),
      0 0 24px rgba(244, 213, 114, 0.45),
      0 0 60px rgba(212, 168, 67, 0.30),
      0 0 110px rgba(212, 168, 67, 0.16),
      0 22px 60px rgba(0, 0, 0, 0.6);
  }
  .comparison-table-wrap--nirvani:hover::after {
    background-position: 200% 0;
  }
  .comparison-table-wrap--nirvani .comparison-table {
    position: relative;
    z-index: 2;
  }

  /* =================================================================
     Built For Your Business - JW glass on .vertical cards
     ================================================================= */
  #verticals .verticals-grid {
    align-items: stretch;
  }
  #verticals .vertical {
    align-self: stretch;
    min-height: 220px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius);
    background:
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 1px 22px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 22px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 1px 22px no-repeat,
      linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 0 0 1px rgba(255, 255, 255, 0.02),
      0 8px 30px rgba(0, 0, 0, 0.6);
    transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
    transform-origin: center center;
  }
  #verticals .vertical::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
      transparent 32%,
      rgba(244, 213, 114, 0.18) 50%,
      transparent 68%);
    background-size: 220% 100%;
    background-position: -100% 0;
    pointer-events: none;
    z-index: 0;
    transition: background-position 1100ms var(--ease);
    border-radius: inherit;
  }
  #verticals .vertical > * {
    position: relative;
    z-index: 1;
  }
  #verticals .vertical:hover,
  #verticals .vertical.active {
    transform: perspective(1000px) translateY(-6px) rotateX(2.5deg);
    border-color: rgba(244, 213, 114, 0.65);
    background:
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px left 12px / 1px 32px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 32px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 12px right 12px / 1px 32px no-repeat,
      radial-gradient(ellipse 80% 60% at 0% 0%, rgba(244, 213, 114, 0.10), transparent 70%),
      linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.35),
      0 0 20px rgba(212, 168, 67, 0.20),
      0 0 50px rgba(212, 168, 67, 0.12),
      0 16px 50px rgba(0, 0, 0, 0.6);
  }
  #verticals .vertical:hover::before,
  #verticals .vertical.active::before {
    background-position: 200% 0;
  }
  /* Active expanded card: keep the perspective lift but allow it to flow taller */
  #verticals .vertical.active {
    transform: translateY(-2px);
  }
  /* Move the chevron clear of the top-right corner area (which still has no bracket on .vertical, but better corner placement looks cleaner) */
  #verticals .vertical .vertical-expand {
    top: auto;
    bottom: 8px;
    right: 50%;
    transform: translateX(50%);
  }
  #verticals .vertical.active .vertical-expand {
    transform: translateX(50%) rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    #verticals .vertical:hover,
    #verticals .vertical.active { transform: translateY(-2px); }
  }

  /* =================================================================
     How It Works - chrome glass on tl-content + chromier number node
     ================================================================= */
  .tl-content {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background:
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 10px left 10px / 18px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 10px left 10px / 1px 18px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 10px right 10px / 18px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 10px right 10px / 1px 18px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 10px left 10px / 18px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 10px left 10px / 1px 18px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 10px right 10px / 18px 1px no-repeat,
      linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 10px right 10px / 1px 18px no-repeat,
      linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96)) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 0 0 1px rgba(255, 255, 255, 0.02),
      0 8px 24px rgba(0, 0, 0, 0.55) !important;
    transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
  }
  .tl-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
      transparent 32%,
      rgba(244, 213, 114, 0.18) 50%,
      transparent 68%);
    background-size: 220% 100%;
    background-position: -100% 0;
    pointer-events: none;
    z-index: 0;
    transition: background-position 1100ms var(--ease);
    border-radius: inherit;
  }
  .tl-content > * {
    position: relative;
    z-index: 1;
  }
  .tl-item:hover .tl-content {
    transform: translateY(-3px);
    border-color: rgba(244, 213, 114, 0.65) !important;
    background:
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 10px left 10px / 26px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 10px left 10px / 1px 26px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 10px right 10px / 26px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) top 10px right 10px / 1px 26px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 10px left 10px / 26px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 10px left 10px / 1px 26px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 10px right 10px / 26px 1px no-repeat,
      linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 10px right 10px / 1px 26px no-repeat,
      linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98)) !important;
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.35),
      0 0 18px rgba(212, 168, 67, 0.20),
      0 12px 30px rgba(0, 0, 0, 0.55) !important;
  }
  .tl-item:hover .tl-content::before {
    background-position: 200% 0;
  }
  /* Polished gold number node - no muddy-brown gradient anymore */
  .tl-node {
    background:
      radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%),
      linear-gradient(135deg, #F4D572 0%, #D4A843 45%, #F4D572 80%, #D4A843 100%) !important;
    border: 1px solid rgba(244, 213, 114, 0.85) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 14px rgba(244, 213, 114, 0.45),
      0 0 30px rgba(212, 168, 67, 0.22) !important;
  }
  .tl-node span {
    color: #0F0F0F !important;
    -webkit-text-fill-color: #0F0F0F !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  .tl-item:hover .tl-node {
    transform: scale(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4),
      0 0 18px rgba(244, 213, 114, 0.55),
      0 0 38px rgba(212, 168, 67, 0.30) !important;
  }
  /* Brighten the connector arms on hover */
  .tl-item:hover .tl-arm {
    background: linear-gradient(90deg, transparent, rgba(244, 213, 114, 0.75), rgba(244, 213, 114, 0.30)) !important;
    box-shadow: 0 0 10px rgba(244, 213, 114, 0.40);
  }
  .tl-item:nth-child(even):hover .tl-arm {
    background: linear-gradient(90deg, rgba(244, 213, 114, 0.30), rgba(244, 213, 114, 0.75), transparent) !important;
  }

  /* =================================================================
     Per-step tier coloring on the How It Works timeline.
     Step 1 = N1 blue, Step 2 = N2 purple, Step 3 = N3 green, Step 4
     = Enterprise gold. Each modifier retints the corner brackets,
     the diagonal shimmer band, the outer halo, and the chrome number
     node so the four steps echo the pricing-page tier identity.
     ================================================================= */
  .tl-item--tinted .tl-content {
    border-color: rgba(var(--step-rgb), 0.55) !important;
    background:
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px left 10px / 18px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px left 10px / 1px 18px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px right 10px / 18px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px right 10px / 1px 18px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px left 10px / 18px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px left 10px / 1px 18px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px right 10px / 18px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px right 10px / 1px 18px no-repeat,
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--step-rgb), 0.18), transparent 70%),
      linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96)) !important;
    box-shadow:
      0 1px 0 rgba(var(--step-rgb), 0.10) inset,
      0 0 0 1px rgba(var(--step-rgb), 0.20),
      0 0 22px rgba(var(--step-rgb), 0.14),
      0 8px 24px rgba(0, 0, 0, 0.55) !important;
  }
  .tl-item--tinted .tl-content::before {
    background: linear-gradient(115deg,
      transparent 32%,
      rgba(var(--step-rgb), 0.28) 50%,
      transparent 68%) !important;
    background-size: 220% 100% !important;
  }
  .tl-item--tinted:hover .tl-content {
    border-color: rgba(var(--step-rgb), 0.85) !important;
    background:
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px left 10px / 26px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px left 10px / 1px 26px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px right 10px / 26px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) top 10px right 10px / 1px 26px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px left 10px / 26px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px left 10px / 1px 26px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px right 10px / 26px 1px no-repeat,
      linear-gradient(var(--step-bright), var(--step-bright)) bottom 10px right 10px / 1px 26px no-repeat,
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--step-rgb), 0.26), transparent 70%),
      linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98)) !important;
    box-shadow:
      0 0 0 1px rgba(var(--step-rgb), 0.45),
      0 0 26px rgba(var(--step-rgb), 0.35),
      0 0 60px rgba(var(--step-rgb), 0.18),
      0 12px 32px rgba(0, 0, 0, 0.55) !important;
  }
  /* Number node - bright gold (no muddy brown band) with the tier-color
     halo only as the outer aura. */
  .tl-item--tinted .tl-node {
    background:
      radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%),
      linear-gradient(135deg, #F4D572 0%, #D4A843 45%, #F4D572 80%, #D4A843 100%) !important;
    border-color: rgba(244, 213, 114, 0.85) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 14px rgba(244, 213, 114, 0.45),
      0 0 26px rgba(var(--step-rgb), 0.45) !important;
  }
  .tl-item--tinted .tl-node span {
    color: #0F0F0F !important;
    -webkit-text-fill-color: #0F0F0F !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  .tl-item--tinted:hover .tl-node {
    transform: scale(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4),
      0 0 18px rgba(244, 213, 114, 0.55),
      0 0 38px rgba(var(--step-rgb), 0.55) !important;
  }
  /* Connector arms also pick up the step's tier hue on hover. */
  .tl-item--tinted:hover .tl-arm {
    background: linear-gradient(90deg, transparent, rgba(var(--step-rgb), 0.85), rgba(var(--step-rgb), 0.40)) !important;
    box-shadow: 0 0 10px rgba(var(--step-rgb), 0.45);
  }
  .tl-item--tinted:nth-child(even):hover .tl-arm {
    background: linear-gradient(90deg, rgba(var(--step-rgb), 0.40), rgba(var(--step-rgb), 0.85), transparent) !important;
  }

  /* Per-step palette (tier-aligned with /pricing/ page). */
  .tl-item--n1 { --step-rgb: var(--tier-n1-rgb-aura);  --step-bright: var(--tier-n1); } /* N1 saxe blue */
  .tl-item--n2 { --step-rgb: var(--tier-n2-rgb-aura);  --step-bright: var(--tier-n2); } /* N2 violet */
  .tl-item--n3 { --step-rgb: var(--tier-n3-rgb-aura);  --step-bright: var(--tier-n3); } /* N3 emerald */
  .tl-item--n4 { --step-rgb: var(--tier-n4-rgb-aura);  --step-bright: var(--tier-n4); } /* Enterprise gold */

  /* Results dashboard */
  .results-dashboard {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 44px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
    margin-bottom: 40px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .results-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-2);
  }
  .results-title h4 { font-size: 14px; font-weight: 600; color: var(--text-1); text-transform: uppercase; letter-spacing: 0.08em; }
  .results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
  }
  .result-tile {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 22px;
  }
  .result-tile .label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
  .result-tile .value {
    font-size: 36px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: shimmer 7s ease infinite;
  }
  .result-tile .delta { font-size: 12px; color: var(--success); font-family: 'JetBrains Mono', monospace; margin-top: 6px; }

  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
  }
  .stat-big {
    text-align: center;
    padding: 32px 20px;
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .stat-big .num {
    font-size: 48px;
    font-weight: 700;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
    line-height: 1;
  }
  .stat-big .lbl { font-size: 13px; color: var(--text-2); }

  .accountability-box {
    margin-top: 48px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 28px 32px;
  }
  .accountability-box p { font-size: 16px; color: var(--text-1); }

  /* Verticals */
  .verticals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: stretch;
  }
  .vertical {
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(212, 168, 67, 0.45);
    border-radius: var(--radius);
    padding: 28px 22px;
    text-align: center;
    transition: all 0.3s var(--ease);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.12), 0 0 25px rgba(212, 168, 67, 0.06);
    align-self: stretch;
  }
  .vertical:hover {
    border-color: rgba(212, 168, 67, 0.70);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 0 14px rgba(212, 168, 67, 0.18), 0 0 30px rgba(212, 168, 67, 0.08), inset 0 0 20px rgba(212, 168, 67, 0.05);
  }
  .vertical:hover .vertical-icon {
    background: radial-gradient(circle at 35% 30%, rgba(212, 168, 67, 0.28) 0%, rgba(0,0,0,0.35) 70%);
    border-color: rgba(212, 168, 67, 0.45);
    box-shadow: 0 0 28px rgba(212, 168, 67, 0.25), inset 0 0 14px rgba(212, 168, 67, 0.08);
  }
  .vertical-icon {
    width: 48px; height: 48px;
    margin: 0 auto 16px;
    border-radius: 12px;
    background: radial-gradient(circle at 35% 30%, rgba(212, 168, 67, 0.18) 0%, rgba(0,0,0,0.6) 70%);
    border: 1px solid rgba(212, 168, 67, 0.4);
    display: flex; align-items: center; justify-content: center;
    color: #D4A843;
    box-shadow: 0 0 10px rgba(212, 168, 67, 0.25), 0 0 22px rgba(212, 168, 67, 0.12), inset 0 0 10px rgba(212, 168, 67, 0.06);
  }
  .vertical { cursor: pointer; position: relative; overflow: hidden; }
  .vertical h3 { font-size: 16px; font-weight: 600; color: var(--text-0); margin-bottom: 10px; }
  .vertical p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
  .vertical.active {
    border-color: rgba(212, 168, 67, 0.70);
    background: rgba(255,255,255,0.05);
    grid-column: span 2;
    box-shadow: 0 0 14px rgba(212, 168, 67, 0.18), 0 0 30px rgba(212, 168, 67, 0.08), inset 0 0 20px rgba(212, 168, 67, 0.05);
  }
  .vertical-agents {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s ease, margin-top 0.4s ease;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .vertical.active .vertical-agents {
    max-height: 300px;
    opacity: 1;
    margin-top: 16px;
  }
  .agent-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-1);
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.3);
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.1), 0 0 24px rgba(212, 168, 67, 0.05);
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  .agent-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(212, 168, 67, 0.7);
    box-shadow: 0 0 6px rgba(212, 168, 67, 0.5);
    flex-shrink: 0;
  }
  .agent-tag:hover {
    background: rgba(212, 168, 67, 0.12);
    border-color: rgba(212, 168, 67, 0.45);
    box-shadow: 0 0 18px rgba(212, 168, 67, 0.2), 0 0 36px rgba(212, 168, 67, 0.1);
    color: var(--text-0);
  }
  .vertical-expand {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.3s ease;
  }
  .vertical:hover .vertical-expand { opacity: 1; }
  .vertical.active .vertical-expand { opacity: 1; transform: rotate(180deg); }
  .vertical-expand svg { width: 14px; height: 14px; stroke: #D4A843; filter: drop-shadow(0 0 4px rgba(212, 168, 67, 0.6)) drop-shadow(0 0 8px rgba(212, 168, 67, 0.3)); }
  .industries-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 40px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    background: linear-gradient(135deg, #D4A843 0%, #E8DFC8 40%, #D4A843 100%);
    border: 1px solid rgba(212, 168, 67, 0.6);
    border-radius: 100px;
    box-shadow:
      0 0 24px rgba(212, 168, 67, 0.35),
      0 0 56px rgba(212, 168, 67, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.4s ease;
    cursor: pointer;
  }
  .industries-cta svg {
    stroke: #000;
    transition: transform 0.3s ease;
  }
  .industries-cta:hover {
    background: linear-gradient(135deg, #E8DFC8 0%, #F0EAD6 40%, #E8DFC8 100%);
    box-shadow:
      0 0 32px rgba(212, 168, 67, 0.5),
      0 0 72px rgba(212, 168, 67, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
  }
  .industries-cta:hover svg {
    transform: translateX(4px);
  }
  .industries-cta-text {
    color: #000;
    -webkit-text-fill-color: #000;
  }
  @media (max-width: 768px) {
    .vertical.active { grid-column: span 1; }
    .agent-tag { white-space: normal; text-align: center; font-size: 12px; padding: 5px 10px; }
    .industries-cta { padding: 16px 32px; font-size: 13px; }
  }
  @media (max-width: 600px) {
    .verticals-grid { grid-template-columns: 1fr; }
  }

  /* AI Employees */
  #employees { padding: 96px 0; }
  .employees-head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
  .employees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .employee-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: rgba(10, 10, 10, 0.45);
    border: 1px solid rgba(212, 168, 67, 0.40);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
    box-shadow: 0 0 12px rgba(212, 168, 67, 0.04), 0 0 24px rgba(212, 168, 67, 0.02), inset 0 0 12px rgba(255,255,255,0.02);
  }
  .employee-tile:hover {
    border-color: rgba(212, 168, 67, 0.65);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255,255,255,0.15), 0 0 40px rgba(255,255,255,0.06), inset 0 0 16px rgba(255,255,255,0.04);
  }
  .employee-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
  }
  .employee-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .employees-footer {
    text-align: center;
    margin-top: 48px;
    font-size: 14px;
    color: var(--text-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .employees-footer strong { color: var(--text-0); font-weight: 700; }

  /* Integrations Ticker */
  #integrations {
    /* Removed overflow:hidden - was clipping the integrations-head band's
       100vw breakout. The ticker tracks already clip at .ticker-wrap, so the
       section-level clip isn't needed. */
  }
  .integrations-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
  .ticker-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Start slightly dim; JS fades to full opacity after color extraction +
       runtime hue-bucket interleave completes. Prevents the "Calendly flashes
       white on first loop" issue by never showing uncolored cards. */
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .ticker-rows.ready { opacity: 1; }
  .ticker-wrap {
    position: relative;
    /* Full viewport breakout - escape the .container's max-width so the
       infinite-scroll track runs edge-to-edge no matter how wide the window
       gets. body has overflow-x: hidden so 100vw is safe. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Clip horizontally so the infinite-scroll track doesn't leak, but
       allow vertical overflow so card shadows + brand halos breathe into
       the gap between rows instead of being chopped at the wrap edge. */
    overflow-x: clip;
    overflow-y: visible;
  }
  .ticker-wrap::before, .ticker-wrap::after {
    display: none;
  }
  .ticker-track {
    display: flex;
    gap: 14px;
    align-items: center;
    animation: scroll-left 60s linear infinite;
    width: max-content;
  }
  .ticker-track.reverse { animation: scroll-right 60s linear infinite; }
  .ticker-track:hover { animation-play-state: paused; }
  @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
  .ticker-item {
    /* Per-card brand color - set by JS via favicon dominant-color extraction.
       Solid fallback = --accent-2 chrome so color-mix still works before JS runs. */
    --brand-color: #E6E6E6;
    --brand-glow: rgba(255, 255, 255, 0.35);

    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    /* Gradient border trick:
         padding-box layer = dark card with subtle brand wash (the commitment)
         border-box layer  = full brand-color gradient (light→mid→dark shade) */
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-color) 14%, #060606) 0%,
        color-mix(in srgb, var(--brand-color) 5%,  #0a0a0a) 100%
      ) padding-box,
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-color) 55%, white) 0%,
        var(--brand-color) 50%,
        color-mix(in srgb, var(--brand-color) 65%, black) 100%
      ) border-box;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 14px 22px;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    /* At-rest: organic brand halo - two layers (soft diffuse + tight core)
       for a more natural atmospheric bloom instead of a hard single glow. */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 34px -4px color-mix(in srgb, var(--brand-color) 42%, transparent),
      0 0 14px -2px color-mix(in srgb, var(--brand-color) 55%, transparent),
      0 6px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  .ticker-item::before {
    /* Diagonal sheen - still shiny, but subordinate to the brand color */
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 10px;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 40%,
      transparent 60%,
      rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
  }
  .ticker-item:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 14px 44px -6px var(--brand-color),
      0 0 22px -2px color-mix(in srgb, var(--brand-color) 70%, transparent),
      0 0 0 1px var(--brand-color);
  }
  .ticker-item svg { width: 22px; height: 22px; flex-shrink: 0; opacity: 0.92; position: relative; z-index: 1; }
  .ticker-item img {
    width: 24px; height: 24px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    /* Always wear the brand color as a visible ring */
    box-shadow:
      0 0 0 2px var(--brand-color),
      0 0 14px -2px color-mix(in srgb, var(--brand-color) 60%, transparent);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
  }
  .ticker-item:hover img {
    transform: scale(1.06);
    box-shadow:
      0 0 0 2px var(--brand-color),
      0 0 22px 2px var(--brand-color);
  }
  .ticker-item > * { position: relative; z-index: 1; }
  .ticker-item img[alt="Square"],
  .ticker-item img[alt="Squarespace"] { filter: invert(1) brightness(1.2); }
  .integrations-inline { margin: 0 0 24px; padding: 0; border-top: 0; border-bottom: 0; }
  .integrations-inline .integrations-head { text-align: center; max-width: 720px; margin: 0 auto 24px; padding: 0 24px; }
  .integrations-inline .integrations-head h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 0; /* pull 10k line tight under the title */
  }
  .integrations-inline .integrations-head .section-sub { font-size: 19px; font-weight: 400; }
  /* Stat line under Connect Your Tools - NOT a CTA pill/chrome button.
     Large editorial gold line; stands out without looking clickable. */
  .integrations-standalone {
    display: block;
    margin: 9px auto 14px; /* was 18px top; -50% to sit closer under Connect Your Tools */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.65rem, 3.4vw, 2.35rem);
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: transparent;
    background-image: var(--gold-gloss, linear-gradient(135deg, #FFF0B8 0%, #F4D572 22%, #D4A843 52%, #F4D572 78%, #D4A843 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
      drop-shadow(0 0 1px rgba(255, 237, 179, 0.55))
      drop-shadow(0 0 18px rgba(212, 168, 67, 0.38))
      drop-shadow(0 0 36px rgba(184, 134, 42, 0.2));
  }
  /* ========== COMPARISON TABLE ========== */
  .comparison-section { padding: 28px 0; }
  .comparison-table-wrap {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--radius);
    border: 1px solid rgba(212, 168, 67, 0.40);
    overflow: hidden;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 40px rgba(255,255,255,0.04);
  }
  .comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  }
  .comparison-table thead th {
    padding: 24px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid var(--line-2);
  }
  .comparison-table thead th:first-child {
    text-align: center;
  }
  .comparison-table thead th.col-ai {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
    color: var(--text-0);
  }
  .comparison-table thead th.col-revenue {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
  }
  .comparison-table thead th.col-estimate {
    color: var(--text-0);
  }
  .comparison-table tbody td {
    padding: 22px 20px;
    font-size: 15px;
    color: var(--text-2);
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
  }
  .comparison-table tbody tr:last-child td { border-bottom: none; }
  .comparison-table tbody td:first-child {
    text-align: center;
    font-weight: 500;
    color: var(--text-1);
  }
  .comparison-table .val-human {
    color: var(--text-3);
    font-weight: 400;
  }
  .comparison-table .val-ai {
    font-weight: 800;
    letter-spacing: -0.005em;
    background: linear-gradient(135deg,
      #3BFFB6 0%,
      #00E5A0 35%,
      #5AFFC8 65%,
      #00E5A0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter:
      drop-shadow(0 0 6px rgba(0, 229, 160, 0.55))
      drop-shadow(0 0 14px rgba(0, 229, 160, 0.25));
    text-shadow: 0 0 1px rgba(0, 229, 160, 0.4);
  }
  .comparison-table .impact-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .impact-very-high {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
  }
  .impact-high {
    background: rgba(255,255,255,0.08);
    color: var(--text-2);
    border: 1px solid rgba(255,255,255,0.15);
  }
  .impact-medium-high {
    background: rgba(255,255,255,0.05);
    color: var(--text-3);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .impact-medium {
    background: rgba(255,255,255,0.03);
    color: var(--text-3);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .comparison-table tbody td.val-estimate {
    font-weight: 600;
    color: var(--text-0);
    font-size: 16px;
    letter-spacing: 0.02em;
  }
  .comparison-total {
    text-align: center;
    margin-top: 24px;
    font-size: 19px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .comparison-total-label {
    display: block;
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    background: var(--grad-chrome);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: comparison-total-shimmer 8s ease-in-out infinite;
    padding-bottom: 4px;
  }
  @keyframes comparison-total-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  @media (max-width: 720px) {
    .comparison-total-label { font-size: 10px; letter-spacing: 0.26em; }
  }
  .comparison-total strong {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    display: block;
    margin-top: 10px;
    background: var(--grad-platinum-champagne);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(212, 168, 67, 0.2);
  }
  @media (max-width: 768px) {
    .comparison-table thead th, .comparison-table tbody td { padding: 14px 10px; font-size: 12px; }
    .comparison-table tbody td:first-child { padding-left: 14px; }
    .comparison-table thead th:first-child { text-align: center; }
    .comparison-table .val-estimate { font-size: 14px; }
    .comparison-total strong { font-size: clamp(1.4rem, 3vw, 2rem); }
  }
  @media (max-width: 480px) {
    .comparison-table thead th.col-revenue,
    .comparison-table tbody td:nth-child(4) { display: none; }
  }

  /* ===== Nirvani-first comparison variant (highlight Nirvani column with logo) ===== */
  .comparison-table-wrap--nirvani {
    border-color: rgba(212, 168, 67, 0.55);
    box-shadow:
      0 0 40px rgba(212, 168, 67, 0.10),
      0 0 90px rgba(212, 168, 67, 0.06),
      0 30px 80px rgba(0, 0, 0, 0.55);
  }
  .comparison-table--nirvani-first thead th.col-nirvani {
    position: relative;
    background:
      linear-gradient(180deg, rgba(244, 213, 114, 0.18) 0%, rgba(212, 168, 67, 0.10) 60%, rgba(212, 168, 67, 0.04) 100%);
    color: #fff;
    padding: 18px 16px;
    border-bottom: 2px solid rgba(244, 213, 114, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.20),
      inset 0 -1px 0 rgba(212, 168, 67, 0.40);
  }
  .comparison-table--nirvani-first thead th.col-nirvani::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-cream) 25%, #FFFFFF 50%, var(--accent-cream) 75%, transparent 100%);
    opacity: 0.85;
    box-shadow:
      0 0 10px rgba(244, 213, 114, 0.65),
      0 0 22px rgba(212, 168, 67, 0.45);
  }
  .col-nirvani-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .col-nirvani-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 42px;            /* drive size by height; keep aspect ratio so it never smushes */
    object-fit: contain;
    filter:
      drop-shadow(0 0 10px rgba(244, 213, 114, 0.55))
      drop-shadow(0 0 24px rgba(212, 168, 67, 0.35));
  }
  /* Highlight ALL Nirvani-column body cells: subtle vertical chrome wash */
  .comparison-table--nirvani-first tbody tr td:nth-child(2) {
    background:
      linear-gradient(180deg, rgba(244, 213, 114, 0.07) 0%, rgba(212, 168, 67, 0.03) 100%);
    border-left: 1px solid rgba(212, 168, 67, 0.18);
    border-right: 1px solid rgba(212, 168, 67, 0.18);
  }
  .comparison-table--nirvani-first tbody tr:last-child td:nth-child(2) {
    border-bottom: 1px solid rgba(212, 168, 67, 0.18);
  }
  /* Bigger, brighter values in Nirvani column */
  .comparison-table--nirvani-first tbody tr td.val-ai {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    letter-spacing: 0.02em;
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.45),
      0 0 18px rgba(244, 213, 114, 0.35),
      0 0 36px rgba(212, 168, 67, 0.25);
  }
  .comparison-table--nirvani-first .val-human {
    color: var(--text-3);
    font-weight: 400;
    text-decoration: line-through;
    text-decoration-color: rgba(212, 168, 67, 0.30);
    text-decoration-thickness: 1px;
  }
  @media (max-width: 768px) {
    .col-nirvani-logo { height: auto; max-height: 30px; }
    .comparison-table--nirvani-first thead th.col-nirvani { padding: 12px 6px; }
    .comparison-table--nirvani-first thead th.col-nirvani .col-nirvani-inner { min-width: 0; }
    .comparison-table--nirvani-first .val-ai { font-size: 14px; }
  }

  /* About */
  .about-grid { display: block; max-width: 860px; margin: 0 auto; text-align: center; }
  .about-content h2 { margin-bottom: 24px; }
  .about-content p { font-size: 17px; color: var(--text-1); line-height: 1.7; margin-bottom: 24px; }
  .trust-points {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 24px;
    justify-content: center;
  }
  .trust-points span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
  .trust-points .check { color: var(--accent); }

  /* Legacy FAQ block removed - see modern .faq-* rules at end of file */

  /* Final CTA */
  #book { padding-bottom: 3px; }
  .final-cta {
    background: none;
    border: none;
    padding: 10px 0;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
  }
  .final-cta > * { position: relative; }
  .final-cta h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--text-0); margin-bottom: 14px; }
  .founder-headshot-wrap { width: 151px; height: 151px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(212, 168, 67, 0.92); box-shadow: none; }
  /* Photo cluster - Strategy above, Clarity left, Pricing right, photo in center. */
  .cta-photo-cluster {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
      ".    top    ."
      "left photo  right";
    align-items: center;
    justify-content: center;
    gap: 18px 22px;
    margin: 0 auto 24px;
    max-width: 560px;
  }
  .cta-photo-cluster .cta-pill-top   { grid-area: top; justify-self: center; }
  .cta-photo-cluster .cta-pill-left  { grid-area: left; justify-self: end; }
  .cta-photo-cluster .cta-pill-right { grid-area: right; justify-self: start; }
  .cta-photo-cluster .founder-headshot-wrap { grid-area: photo; margin: 0; }
  @media (max-width: 480px) {
    .cta-photo-cluster { gap: 12px 10px; max-width: 100%; }
    .cta-photo-cluster .founder-headshot-wrap { width: 120px; height: 120px; }
  }
  .final-cta .btn-nav { box-shadow: 0 0 20px rgba(255,255,255,0.2), 0 0 40px rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3); }
  .final-cta .btn-nav:hover { box-shadow: 0 0 28px rgba(255,255,255,0.35), 0 0 56px rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }
  .final-cta .micro-label.no-dot {
    padding: 14px 36px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.1);
    box-shadow:
      0 0 20px rgba(255,255,255,0.25),
      0 0 48px rgba(255,255,255,0.12),
      0 0 80px rgba(255,255,255,0.06),
      0 0 60px var(--warm-glow-soft),
      0 0 120px var(--warm-glow-soft),
      inset 0 0 20px rgba(255,255,255,0.08);
    transition: all 0.3s ease;
  }
  .final-cta .micro-label.no-dot .label-text {
    color: var(--text-0);
    -webkit-text-fill-color: var(--text-0);
  }
  .final-cta .micro-label.no-dot:hover {
    border-color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.15);
    box-shadow:
      0 0 28px rgba(255,255,255,0.35),
      0 0 64px rgba(255,255,255,0.18),
      0 0 100px rgba(255,255,255,0.08),
      0 0 80px var(--warm-glow),
      0 0 160px var(--warm-glow-soft),
      inset 0 0 28px rgba(255,255,255,0.1);
  }
  .founder-headshot { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
  .final-cta p { font-size: 19px; color: var(--text-2); max-width: 640px; margin: 0 auto 24px; line-height: 1.5; }
  .final-cta .microcopy { margin-top: 24px; color: var(--text-3); font-size: 13px; }
  .cta-check-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 22px; border-radius: 100px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-0);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow:
      0 0 20px rgba(255,255,255,0.25),
      0 0 48px rgba(255,255,255,0.12),
      0 0 80px rgba(255,255,255,0.06),
      inset 0 0 20px rgba(255,255,255,0.08);
  }

  /* Footer */
  footer {
    /* Solid black like the header - creates the matching bookend feel. */
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    position: relative;
    /* Match header separator - gradient-tapered IA gold line + triple glow,
       mirrored so the halo emanates upward into the content above. */
    border-top: 1px solid transparent;
    border-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(212, 168, 67, 0.40) 15%,
      rgba(212, 168, 67, 0.95) 50%,
      rgba(212, 168, 67, 0.40) 85%,
      transparent 100%
    ) 1;
    box-shadow:
      0 -1px 6px rgba(212, 168, 67, 0.55),
      0 -2px 14px rgba(212, 168, 67, 0.32),
      0 -4px 28px rgba(212, 168, 67, 0.16);
    /* Tighter stack (2026-08-05): less air above/inside footer */
    padding: 8px 0 12px;
    margin-top: 28px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }
  /* ---- Desktop App Login Showcase ----
     Sits flush inside the parent .container at the exact same width as the
     .tile-grid below it. The desktop frame is flex:1 (fills remaining space)
     and the mobile frame is a fixed 300px, so the combined pair = container
     width (no breakout, no overflow). Prior version used negative viewport
     margins to expand to 1320px - that pushed the desktop pic visibly past
     the card grid. Removed. */
  .showcase-pair {
    display: flex;
    gap: 32px;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }
  .desktop-showcase {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
  }
  .desktop-caption {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
  }
  .desktop-showcase .app-showcase {
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
  .mobile-showcase {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
  }
  .mobile-showcase .mobile-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .mobile-showcase .mobile-screen {
    flex: 1;
    object-fit: cover;
    object-position: center top;
  }
  .mobile-frame {
    position: relative;
    width: 300px;
    padding: 10px;
    border-radius: 38px;
    background: linear-gradient(180deg, #1f1f21 0%, #0f0f11 100%);
    box-shadow:
      0 32px 80px rgba(0,0,0,0.55),
      0 0 0 1px rgba(212, 168, 67, 0.28),
      0 0 24px rgba(212, 168, 67, 0.12),
      0 0 50px rgba(212, 168, 67, 0.06),
      inset 0 0 0 1px rgba(255,255,255,0.04);
  }
  .mobile-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 14px;
    border-radius: 999px;
    background: #0a0a0c;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  }
  .mobile-screen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
  }
  .mobile-caption {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  @media (max-width: 900px) {
    .mobile-frame { width: 300px; }
    .showcase-pair {
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    .showcase-pair .app-showcase {
      width: 100%;
    }
    .mobile-frame { width: 300px; }
  }
  @media (max-width: 480px) {
    .mobile-frame { width: 280px; }
  }
  .app-showcase {
    max-width: 960px;
    margin: 20px auto 20px;
    padding: 10px;
    border-radius: 32px;
    overflow: hidden;
    border: none;
    background: linear-gradient(180deg, #1f1f21 0%, #0f0f11 100%);
    box-shadow:
      0 32px 80px rgba(0,0,0,0.55),
      0 0 0 1px rgba(212, 168, 67, 0.28),
      0 0 24px rgba(212, 168, 67, 0.12),
      0 0 50px rgba(212, 168, 67, 0.06),
      inset 0 0 0 1px rgba(255,255,255,0.04);
    position: relative;
  }
  .app-showcase-titlebar { display: none; }
  .app-showcase-titlebar {
    position: relative;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 18px;
    background: linear-gradient(180deg, #d8d8da 0%, #cccccf 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  }
  .app-showcase-titlebar-dots {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
  }
  .app-showcase-titlebar-dots i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.22) inset,
      0 1px 1px rgba(255, 255, 255, 0.35) inset,
      0 1px 1px rgba(0, 0, 0, 0.15);
  }
  .app-showcase-titlebar-dots i:nth-child(1) {
    background: radial-gradient(circle at 35% 30%, #ff7b73 0%, #ff5f57 55%, #e0443e 100%);
  }
  .app-showcase-titlebar-dots i:nth-child(2) {
    background: radial-gradient(circle at 35% 30%, #F4D572 0%, #D4A843 55%, #B68A2E 100%);
  }
  .app-showcase-titlebar-dots i:nth-child(3) {
    background: radial-gradient(circle at 35% 30%, #4ddc5e 0%, #28c840 55%, #0fa120 100%);
  }
  .app-showcase-titlebar-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #5a5a5c;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }
  .app-showcase-titlebar-spacer {
    flex: 1;
  }
  .app-showcase-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 48px 0 48px;
    position: relative;
    height: 100%;
    min-height: 420px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(235,235,237,0.95) 40%, rgba(235,235,237,0.3) 70%, transparent 100%), #e8e8ea url('assets/building-bg.webp') center bottom / cover no-repeat;
  }
  .app-showcase-text {
    max-width: 420px;
    position: relative;
    z-index: 2;
  }
  .app-showcase-logo {
    height: 48px;
    margin-bottom: 28px;
  }
  .app-showcase-text h3 {
    font-family: var(--font-head);
    font-size: 2.2rem;
    font-weight: 800;
    color: #000;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
  }
  .app-showcase-text p {
    font-size: 1.05rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 28px;
  }
  .app-showcase-btn {
    display: inline-block;
    padding: 14px 32px;
    background: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.3px;
    margin-bottom: 32px;
  }
  .app-showcase-robot {
    position: absolute;
    right: 16px;
    bottom: 0;
    height: 288px;
    width: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
  }
  @media(max-width:768px){
    .app-showcase-inner { padding: 32px 24px 0; min-height: 320px; flex-direction: column; }
    .app-showcase-text h3 { font-size: 1.5rem; }
    .app-showcase-robot { position: relative; right: auto; height: 200px; width: auto; margin: 0 auto; display: block; }
    .app-showcase-titlebar { height: 30px; padding: 0 14px; }
    .app-showcase-titlebar-dots { gap: 6px; }
    .app-showcase-titlebar-dots i { width: 10px; height: 10px; }
    .app-showcase-titlebar-text { font-size: 9px; letter-spacing: 0.12em; }
  }
  @media(max-width:420px){
    .app-showcase-titlebar-text { font-size: 8px; letter-spacing: 0.1em; }
  }
  /* ---- Footer ---- */
  .footer-inner {
    border-top: none;
    padding: 0;
  }
  .footer-top-centered { text-align: center; margin-bottom: 5px; }
  .footer-top-centered .logo-img { height: 51px; margin-bottom: 6px; display: inline-block; }
  .footer-hq-mark { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 5px; }
  .footer-hq-icons { display: inline-flex; align-items: center; gap: 14px; }
  .footer-favicon { height: 29px; }
  .footer-hq-text { font-size: clamp(1.2rem, 2.4vw, 1.76rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(135deg, #E6E6E6 0%, #FFFFFF 20%, #B0B0B0 40%, #FFFFFF 60%, #E6E6E6 80%, #FFFFFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: chrome-shimmer 4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255,255,255,0.4)) drop-shadow(0 0 30px rgba(255,255,255,0.15)); }
  .footer-hq-divider { display: block; width: 100%; height: 2px; margin-bottom: 14px; background: linear-gradient(90deg, rgba(212,168,67,0.20), rgba(212,168,67,0.70), rgba(212,168,67,0.98), rgba(212,168,67,0.70), rgba(212,168,67,0.20)); box-shadow: 0 0 12px rgba(212,168,67,0.55), 0 0 24px rgba(212,168,67,0.28); }
  .footer-favicon { filter: drop-shadow(0 0 8px rgba(255,255,255,0.4)) drop-shadow(0 0 16px rgba(255,255,255,0.15)); }
  @keyframes chrome-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  .footer-tagline { font-size: 13px; color: var(--text-0); line-height: 1.6; margin: 0 0 7px; }
  .footer-address-line { font-size: 13px; color: var(--text-0); margin: 0; line-height: 1.6; font-weight: 700; }
  .footer-address-line a { color: var(--text-0); text-decoration: none; transition: color 0.2s; }
  .footer-address-line a:hover { color: var(--accent); }
  .footer-pipe { color: rgba(255,255,255,0.5); margin: 0 1px; }
  .footer-col-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-3);
    margin: 0 0 14px;
    font-weight: 600;
  }
  .footer-links-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .footer-links-col .footer-col-head { grid-column: 1; }
  .footer-links-col .footer-col-head-right { grid-column: 2; }
  .footer-links-left, .footer-links-right { display: flex; flex-direction: column; }
  .footer-links-col a {
    display: block;
    color: var(--text-2);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 0;
    transition: color 0.2s;
  }
  .footer-links-col a:hover { color: var(--accent); }
  .footer-hq-col p { font-size: 13px; color: var(--text-2); line-height: 1.7; margin: 0 0 6px; }
  .footer-hq-col a { color: var(--text-2); text-decoration: none; transition: color 0.2s; }
  .footer-hq-col a:hover { color: var(--accent); }
  .footer-bottom {
    border-top: none;
    padding: 6px 0 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--text-0);
    flex-direction: column;
    gap: 14px;
  }
  .footer-bottom-copy { white-space: nowrap; }
  .footer-accred-inline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
  }
  .bbb-badge { height: 48px; width: auto; flex-shrink: 0; filter: brightness(1.35) contrast(1.1) drop-shadow(0 0 4px rgba(255,255,255,0.5)) drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
  .footer-parent-text { font-size: 13px; color: #fff; line-height: 1.6; letter-spacing: 0.03em; font-style: italic; }
  .integrity-logo { height: 38px; width: auto; flex-shrink: 0; filter: brightness(1.25) contrast(1.3) saturate(1.1) sepia(0.08) drop-shadow(0 0 5px rgba(212,168,67,0.5)) drop-shadow(0 0 14px rgba(184,134,42,0.25)); }
  /* Collapse properly: wrap as centered units instead of one nowrap line
     that overflows / gets cut off at the right edge. */
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 9px;
    white-space: normal;
    max-width: 100%;
  }
  .footer-legal a { color: var(--text-0); text-decoration: none; transition: color 0.2s; }
  .footer-legal a:hover { color: var(--accent); }
  .footer-dot { color: rgba(255,255,255,0.2); }
  @media (max-width: 768px) {
    .footer-grid-new { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-legal a { margin: 0; }
    .footer-accred-inline { gap: 8px; }
    .bbb-badge { height: 32px; }
    .footer-parent-text { font-size: 11px; }
    .integrity-logo { height: 28px; }
  }
  @media (max-width: 480px) {
    .footer-grid-new { grid-template-columns: 1fr; text-align: center; }
    .footer-accred-inline {
      white-space: nowrap;
      flex-direction: row;
      align-items: center;
      gap: 6px;
    }
    .bbb-badge { height: 26px; }
    .footer-parent-text { font-size: 10px; }
    .integrity-logo { height: 22px; }
    .footer-legal { white-space: normal; }
    .footer-bottom-copy { white-space: normal; }
    .footer-address-line { font-size: 12px; }
    .footer-legal a { margin: 0; }
    /* Room for chat widget; kept but not oversized */
    .footer-bottom { padding-bottom: 64px; }
    footer { padding-bottom: 14px; }
  }

  /* Scroll reveal - only animates when JS marks <html> with .js-ready.
     Fallback: if JS never runs (slow networks, bots, no-JS), or the user
     prefers reduced motion, content stays fully visible instead of being
     stuck at opacity 0. Past bug: bottom half of /pricing/ disappeared
     for any visitor whose IntersectionObserver didn't fire on first paint. */
  .reveal { opacity: 1; transform: none; }
  html.js-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  html.js-ready .reveal.visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    html.js-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 960px) {
    .ticker-wrap::before, .ticker-wrap::after { display: none; }
    .nav-links { display: none; }
    .mobile-toggle {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
    }

    /* Mobile header chrome: logo left, lang + Meeting + hamburger clustered right */
    header.nav .nav-inner {
      justify-content: flex-start !important;
      flex-wrap: nowrap;
      width: 100%;
    }
    header.nav .nav-inner > a.logo {
      margin-right: auto;
      flex: 0 1 auto;
      min-width: 0;
    }
    /* Empty <nav> shell must not consume flex space (drawer is absolute) */
    header.nav .nav-inner > nav {
      flex: 0 0 0 !important;
      width: 0 !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible;
      border: 0;
    }
    header.nav .lang-menu,
    header.nav .hero-cta-chrome.is-nav,
    header.nav .mobile-toggle {
      flex: 0 0 auto;
      margin-left: 0;
    }
    header.nav .lang-menu { margin-left: 0 !important; }

    /* Keep header above page plates/starfields on every surface */
    header.nav {
      position: fixed !important;
      z-index: 200 !important;
    }
    body.nav-drawer-open {
      overflow: hidden;
      touch-action: none;
    }

    /* ---- MOBILE NAV PANEL ---- */
    /* Class-based open state only (mobile-nav.js). */
    header.nav.is-open .nav-links,
    .nav-links.nav-open {
      display: flex !important;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 1200 !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    .nav-links {
      background: #000000 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      z-index: 199;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      max-height: min(78vh, calc(100dvh - 72px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      gap: 0 !important;
      list-style: none;
      padding: 12px 0 18px !important;
    }
    /* When drawer open, keep header stacking above page plates */
    header.nav.is-open {
      z-index: 10050 !important; /* above chat-widget (~9700) so drawer stays tappable */
    }
    header.nav.is-open .mobile-toggle {
      color: #F4D572;
    }
    .nav-links > li {
      list-style: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .nav-links > li:last-child { border-bottom: 0; }
    .nav-links > li > a {
      display: block;
      padding: 16px 28px;
      font-size: 15px;
      letter-spacing: 0.02em;
    }

    /* ---- MOBILE DROPDOWN: accordion (open only with .nav-dd-open) ---- */
    .nav-links .has-dropdown {
      position: static;
    }
    .nav-links .has-dropdown > a {
      justify-content: space-between;
      width: 100%;
    }
    .nav-caret {
      font-size: 13px;
      animation: none !important;
      opacity: 0.85;
      transform: rotate(-90deg);
      text-shadow: 0 0 6px rgba(212, 168, 67, 0.4);
    }
    .nav-links .has-dropdown.nav-dd-open > a .nav-caret {
      transform: rotate(0deg);
    }
    .nav-dropdown {
      position: static;
      transform: none !important;
      min-width: 0;
      width: 100%;
      margin: 0;
      padding: 4px 0 10px !important;
      background: #000000 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      transition: none !important;
    }
    .nav-dropdown li { border-bottom: 0 !important; }
    .nav-dropdown a:not(.mega-foot-cta):not(.hero-cta-chrome):not(.store-badge) {
      padding: 12px 28px 12px 44px !important;
      font-size: 14px;
      color: var(--text-2);
      white-space: normal;
    }
    .nav-dropdown a:not(.mega-foot-cta):not(.hero-cta-chrome):not(.store-badge)::before {
      left: 28px !important;
      opacity: 1 !important;
      transform: translateY(-50%) scale(1) !important;
      width: 4px !important;
      height: 4px !important;
    }
    .nav-dropdown a:not(.mega-foot-cta):not(.hero-cta-chrome):not(.store-badge):hover {
      padding-left: 48px !important;
    }
    /* Menu foot CTAs keep site chrome sizing on mobile drawer */
    .nav-dropdown a.mega-foot-cta,
    .nav-dropdown a.hero-cta-chrome.mega-foot-cta {
      padding: 0 !important;
      margin: 10px auto 4px !important;
      white-space: nowrap !important;
      color: inherit !important;
      display: inline-block !important;
    }
    .nav-dropdown a.mega-foot-cta:hover {
      padding-left: 0 !important;
    }
    .nav-dropdown a.mega-foot-cta .hero-cta-chrome-inner {
      padding: 12px 22px !important;
      font-size: 11px !important;
      letter-spacing: 0.16em !important;
    }

    .hero { padding: 110px 0 60px; }
    .hero-grid { grid-template-columns: 1fr; gap: 60px; }
    .pain-grid { grid-template-columns: repeat(2, 1fr); }
    .timeline { max-width: 100%; }
    .tl-item { grid-template-columns: 40px 1fr; gap: 14px; }
    .tl-arm { display: none; }
    .timeline::before { left: 20px; }
    /* Force node→content order on every item so odd rows don't try to
       stuff the content into the 40px numbered column. */
    .tl-item .tl-node    { grid-column: 1; grid-row: 1; }
    .tl-item .tl-content { grid-column: 2; grid-row: 1; min-width: 0; padding: 14px 16px; }
    .tl-item:nth-child(odd) .tl-content,
    .tl-item:nth-child(even) .tl-content { text-align: left; }
    .tl-desc p { word-wrap: break-word; overflow-wrap: break-word; }
    .tl-node { width: 36px; height: 36px; }
    .autos-grid { grid-template-columns: 1fr; }
    .timeline::before { left: 20px; }
    .results-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .verticals-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { max-width: 100%; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    section { padding: 20px 0; }
    .container { padding: 0 20px; }
    .hero-ctas .btn { width: 100%; justify-content: center; }
    .results-dashboard { padding: 28px 20px; }
    .final-cta { padding: 16px 0; }
  }

  /* ========== HERO TOP (centered label + robot) ========== */
  .hero-top {
    text-align: center;
    margin-bottom: 28px;
  }
  .hero-top .micro-label {
    display: inline-flex;
    margin-bottom: 28px;
  }
  .hero-top .hero-robot-wrap {
    margin: 0 auto 0;
  }

  /* ========== PHASE A: CINEMATIC HERO ========== */

  /* Word-by-word reveal containers */
  .hero-copy h1 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 8px;
    margin-bottom: -8px;
  }
  .hero-copy h1 .word-inner {
    display: inline-block;
    will-change: transform;
  }

  /* Live activity counter strip */
  .hero-live-stats {
    display: flex;
    gap: 36px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--line-2);
  }
  .live-stat {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    animation: pulse 2s infinite;
    flex-shrink: 0;
  }
  .live-label {
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.04em;
  }
  .live-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: var(--text-0);
    font-size: 15px;
    letter-spacing: -0.02em;
  }

  /* Polished chrome dot cursor - 10px platinum sphere with a soft white
     halo. Smooth GSAP lerp toward the pointer (450ms power3.out) gives
     it the luxe "ring around the pointer" lag without the previous gold
     ring's prominence. No mix-blend-mode this time. */
  #chrome-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* Polished chrome sphere: bright highlight top-left, mid silver,
       slightly darker bottom-right for spherical depth. */
    background: radial-gradient(circle at 32% 28%,
      #FFFFFF 0%,
      #F2F2F2 22%,
      #C9C9C9 55%,
      #9A9A9A 100%);
    pointer-events: none;
    z-index: 9999;
    box-shadow:
      0 0 5px rgba(255, 255, 255, 0.55),
      0 0 14px rgba(255, 255, 255, 0.25),
      0 1px 2px rgba(0, 0, 0, 0.30),
      inset 0 1px 1px rgba(255, 255, 255, 0.85);
    transition: width 0.22s var(--ease), height 0.22s var(--ease),
                box-shadow 0.22s var(--ease);
    will-change: transform;
    opacity: 0;
  }
  #chrome-cursor.visible { opacity: 1; }
  #chrome-cursor.hover {
    width: 18px;
    height: 18px;
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.80),
      0 0 24px rgba(255, 255, 255, 0.40),
      0 0 40px rgba(255, 255, 255, 0.18),
      0 2px 4px rgba(0, 0, 0, 0.35),
      inset 0 1px 2px rgba(255, 255, 255, 0.95);
  }
  @media (hover: none) {
    #chrome-cursor { display: none !important; }
  }
  /* Hide the native OS cursor ONLY once JS has confirmed the chrome
     dot is wired up and visible - gated on `html.cursor-ready`. If the
     JS never runs (GSAP didn't load, script error, etc.), the native
     cursor stays visible so the user is never left pointer-less.
     Desktop fine-pointer ONLY — never apply at collapse/mobile widths. */
  @media (hover: hover) and (pointer: fine) and (min-width: 961px) {
    html.cursor-ready,
    html.cursor-ready body,
    html.cursor-ready a,
    html.cursor-ready button,
    html.cursor-ready .btn,
    html.cursor-ready .hero-cta-chrome,
    html.cursor-ready .tile,
    html.cursor-ready .faq-item,
    html.cursor-ready select {
      cursor: none;
    }
  }

  /* Collapse / mobile (and touch / coarse pointer): always keep a real OS
     pointer. Custom chrome cursor is desktop-only polish. Fixes invisible
     mouse when the window is narrowed or DevTools device mode is on while
     html.cursor-ready is still set from a prior desktop session. */
  @media (hover: none), (pointer: coarse), (max-width: 960px) {
    #chrome-cursor {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    html.cursor-ready,
    html.cursor-ready body,
    html.cursor-ready a,
    html.cursor-ready button,
    html.cursor-ready .btn,
    html.cursor-ready .hero-cta-chrome,
    html.cursor-ready .tile,
    html.cursor-ready .faq-item,
    html.cursor-ready select,
    html.cursor-ready * {
      cursor: auto !important;
    }
    html.cursor-ready a,
    html.cursor-ready button,
    html.cursor-ready .btn,
    html.cursor-ready .mobile-toggle,
    html.cursor-ready .lang-btn,
    html.cursor-ready .hero-cta-chrome,
    html.cursor-ready .tile,
    html.cursor-ready .faq-item,
    html.cursor-ready [role="button"],
    html.cursor-ready summary {
      cursor: pointer !important;
    }
  }

  /* Scroll hint */
  .scroll-hint {
    display: none;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .scroll-hint-line {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, var(--text-3), transparent);
  }
  .scroll-hint-text {
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  @media (max-width: 960px) {
    .hero-live-stats {
      flex-wrap: wrap;
      gap: 16px 28px;
    }
    .scroll-hint { display: none; }
  }

  /* Floating chat robot - shrink on phones but KEEP him bottom-LEFT where he
     belongs (the bottom-right corner is the Maya voice-bot's spot). */
  @media (max-width: 720px) {
    .floating-robot {
      width: 60px;
      height: 60px;
      left: 16px;
      right: auto;
      bottom: 16px;
    }
  }

/* ============================================
   ROI CALCULATOR
   ============================================ */
#roi-calc {
  padding: 12px 0 56px;
}

.roi-card {
  position: relative;
  max-width: 960px;
  margin: 20px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: 44px 52px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  overflow: hidden;
  background:
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px left 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px left 14px / 1px 28px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px right 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px right 14px / 1px 28px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px left 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px left 14px / 1px 28px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px right 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px right 14px / 1px 28px no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 168, 67, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 14px 50px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(212, 168, 67, 0.08);
  transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
}
.roi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(244, 213, 114, 0.16) 50%,
    transparent 68%);
  background-size: 220% 100%;
  background-position: -100% 0;
  pointer-events: none;
  z-index: 0;
  transition: background-position 1100ms var(--ease);
  border-radius: inherit;
}
.roi-card:hover::before {
  background-position: 200% 0;
}
.roi-card:hover {
  border-color: rgba(244, 213, 114, 0.55);
  background:
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px left 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px left 14px / 1px 38px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px right 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px right 14px / 1px 38px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px left 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px left 14px / 1px 38px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px right 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px right 14px / 1px 38px no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244, 213, 114, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
  box-shadow:
    0 0 0 1px rgba(244, 213, 114, 0.35),
    0 0 24px rgba(212, 168, 67, 0.18),
    0 0 60px rgba(212, 168, 67, 0.10),
    0 18px 60px rgba(0, 0, 0, 0.6);
}
.roi-card > * { position: relative; z-index: 1; }

.roi-sliders {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.roi-slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roi-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.roi-slider-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
}

.roi-slider-value {
  color: var(--text-1);
  font-weight: 600;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

input[type="range"].roi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    #E6E6E6 0%,
    #FFFFFF var(--fill, 50%),
    rgba(255, 255, 255, 0.14) var(--fill, 50%),
    rgba(255, 255, 255, 0.14) 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin: 4px 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
input[type="range"].roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--grad-button);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.25),
    0 0 24px rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
input[type="range"].roi-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.35),
    0 0 32px rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.5);
}
input[type="range"].roi-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--grad-button);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.25),
    0 0 24px rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
input[type="range"].roi-slider::-moz-range-thumb:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.35),
    0 0 32px rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.5);
}
input[type="range"].roi-slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.14);
  height: 4px;
  border-radius: 2px;
}
input[type="range"].roi-slider::-moz-range-progress {
  background: linear-gradient(to right, #E6E6E6, #FFFFFF);
  height: 4px;
  border-radius: 2px;
}

.roi-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  padding-top: 32px;
  position: relative;
}
.roi-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 168, 67, 0.45) 35%, rgba(255, 255, 255, 0.65) 50%, rgba(212, 168, 67, 0.45) 65%, transparent 100%);
  box-shadow: 0 0 12px rgba(212, 168, 67, 0.30);
}
.roi-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.roi-action .roi-cta {
  margin: 0;
}
.roi-action .roi-result-disclaimer {
  margin-top: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .roi-footer {
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
  }
}
.roi-result {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  flex: 1;
}

.roi-result-label {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(244, 213, 114, 0.85);
  margin-bottom: 14px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(212, 168, 67, 0.06);
  border: 1px solid rgba(212, 168, 67, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 14px rgba(212, 168, 67, 0.10);
}

/* Revenue Recovery Calculator big number - matched to the comparison
   table .val-ai look (bright lime/mint gradient with green halos), just
   scaled up for the display size. */
.roi-result-number {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg,
    #3BFFB6 0%,
    #00E5A0 35%,
    #5AFFC8 65%,
    #00E5A0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
  /* Layered halo: tight inner rim → mid bloom → far ambient bleed.
     All in #00E5A0 to match .val-ai exactly, scaled larger for display size. */
  filter:
    drop-shadow(0 0 2px rgba(0, 229, 160, 0.80))
    drop-shadow(0 0 12px rgba(0, 229, 160, 0.55))
    drop-shadow(0 0 32px rgba(0, 229, 160, 0.28))
    drop-shadow(0 0 64px rgba(0, 229, 160, 0.14));
  text-shadow: 0 0 1px rgba(0, 229, 160, 0.4);
}

.roi-result-yearly {
  font-size: 15px;
  color: var(--text-2);
  margin-top: 10px;
  padding: 4px 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 500;
  background: linear-gradient(135deg, #B0B0B0 0%, #FFFFFF 25%, #E6E6E6 50%, #FFFFFF 75%, #B0B0B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roi-result .roi-cta {
  margin: 18px 0 0;
}
.roi-result .roi-cta:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.35),
    0 0 64px rgba(255, 255, 255, 0.18),
    0 0 100px rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(255, 255, 255, 0.1);
}

.roi-result-disclaimer {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 10px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .roi-card {
    padding: 28px 20px;
    gap: 28px;
  }
  .roi-result-yearly { font-size: 18px; }
}

/* ========================================================================
   PASS ONE - PREMIUM POLISH
   Four cosmetic enhancements added in one pass.
   1. Cursor-following spotlight on interactive cards
   2. Chrome text-fill + shimmer on section H2s
   3. Chrome scroll progress bar
   4. Reduced-motion guards
   ======================================================================== */

/* --- 1. Cursor Spotlight on Cards ------------------------------------- */
.tile,
.step,
.pain-card,
.vertical,
.dash-stat {
  --mx: 50%;
  --my: 50%;
  background-image:
    radial-gradient(
      600px circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.07),
      transparent 40%
    );
}

/* --- 2. Chrome Headline Shimmer on Section H2s ------------------------ */
.section-head h2 {
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: shimmer 8s ease infinite;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.15);
}

/* --- 3. Chrome Scroll Progress Bar ------------------------------------ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--grad-chrome);
  background-size: 200% 100%;
  animation: shimmer 8s ease infinite;
  z-index: 500;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ========================================================================
   PASS TWO - DEPTH & CHOREOGRAPHY
   1. 3D card tilt on mousemove (pairs with cursor spotlight)
   2. Scroll-reactive nav (chrome hairline + compressed on scroll)
   3. Hero H1 scramble reveal (CSS cursor holder only)
   ======================================================================== */

/* --- 1. 3D Card Tilt - perspective on parents ------------------------- */
.tile-grid,
.steps,
.pain-grid,
.verticals-grid,
.dash-stats {
  perspective: 1200px;
}

.tile,
.step,
.pain-card,
.vertical,
.dash-stat {
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- 2. Scroll-Reactive Nav ------------------------------------------- */
header.nav.scrolled {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.55) 15%,
    rgba(212, 168, 67, 1) 50%,
    rgba(212, 168, 67, 0.55) 85%,
    transparent 100%
  ) 1;
  /* Same triple-layer IA gold glow - intensified slightly while scrolled */
  box-shadow:
    0 1px 6px rgba(212, 168, 67, 0.65),
    0 2px 14px rgba(212, 168, 67, 0.40),
    0 4px 28px rgba(212, 168, 67, 0.22),
    0 8px 40px rgba(0, 0, 0, 0.5);
}
header.nav.scrolled .nav-inner {
  padding: 10px 32px;
  transition: padding 0.3s var(--ease);
}
.nav-inner {
  transition: padding 0.3s var(--ease);
}

/* --- 3. Hero H1 Scramble Placeholder ---------------------------------- */
.hero-copy h1 .scramble-char {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* --- Reduced-Motion Guards for Pass One + Pass Two -------------------- */
@media (prefers-reduced-motion: reduce) {
  .tile,
  .step,
  .pain-card,
  .vertical,
  .dash-stat {
    background-image: none;
    transform: none !important;
  }
  .section-head h2 {
    animation: none;
  }
  #scroll-progress {
    animation: none;
    transition: none;
  }
  header.nav.scrolled .nav-inner {
    transition: none;
  }
}

/* ==========================================================================
   Chat Widget (Maya) — must sit above page content / chrome so clicks land.
   DO NOT apply filter, transform, will-change, or perspective to <chat-widget>.
   Any of these create a new containing block and break the fixed-positioned
   bubble inside the widget's shadow DOM, pushing it off-screen.
   ========================================================================== */
chat-widget,
iframe[src*="chat.nirvani.ai"],
iframe[src*="msgsndr"],
[id*="lc_chat"],
[class*="lc-chat"] {
  /* No position/transform/filter on the host: those break fixed bubble layout. */
  z-index: 9700 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   Restore native cursor + full interactivity inside Maya
   ==========================================================================
   Custom chrome cursor (cursor:none) freezes at the shadow-DOM boundary.
   Force native cursor on the host (inherits into open shadow) and whenever
   the body is marked .over-widget. Never inject transforms into the panel. */
chat-widget,
chat-widget * {
  cursor: auto !important;
}
body.over-widget,
body.over-widget * {
  cursor: auto !important;
}
body.over-widget .cursor-chrome,
body.over-widget .cursor-glow,
body.over-widget .cursor-trail,
body.over-widget #chrome-cursor {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   AI Assistant attention layer - sibling overlays around the chat widget
   ==========================================================================
   The embedded chat-widget forbids filter/transform/will-change/perspective
   (breaks its shadow-DOM positioning). So every attention effect lives as a
   fixed-positioned SIBLING anchored to the same bottom-right corner:
     .nirvani-al-behind (z:399)  -> halo, pulsing chrome ring behind widget
     .nirvani-al-front  (z:401)  -> label, badge, speech-bubble tease above
   Triggered by loadChatWidget() via window.__nirvaniAttentionShow().  */

.nirvani-al-behind,
.nirvani-al-front {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 64px;
  height: 64px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nirvani-al-behind { z-index: 399; }
.nirvani-al-front  { z-index: 401; }
.nirvani-al-behind.is-visible,
.nirvani-al-front.is-visible {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 960px) {
  header.nav {
    z-index: 1000 !important;
  }

  .hero-background-stage {
    background-size: 100vw auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .hero-background-stage video {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 100vw;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center top;
    transform: translateX(-50%);
  }

  .nirvani-al-behind,
  .nirvani-al-front {
    display: none !important;
  }
}

/* --- Halo: pulsing chrome ring behind the widget ---------------------- */
/* nirvani-al-halo removed permanently - was rendering as a "ring that
   follows the cursor" when hovering near the chat widget. */
.nirvani-al-halo { display: none !important; }

/* 2026-07-09: Ready Now pill + speech-bubble tease replaced by the
   howellshaw-style "Live Chat!" pill (injected from chat-widget.js).
   Hide the entire legacy attention layer on every breakpoint. */
.nirvani-al-behind,
.nirvani-al-front,
.nirvani-al-label,
.nirvani-al-badge,
.nirvani-al-tease {
  display: none !important;
}

/* ==========================================================================
   IA GOLD ICON CHIPS - global override (Sammy 2026-05-20). Was a chrome
   gradient with black SVG strokes; flipped to a dark graphite chip with a
   bright IA-gold border and gold SVG strokes. Reads as a polished gold
   icon plate against the JW-glass card surface. Hover state below
   brightens to champagne.
   ========================================================================== */
.tile-icon,
.pain-icon,
.auto-icon,
.vertical-icon,
.car-role-icon,
.tl-node,
.pri-tier-mark,
.pri-included-icon,
.pri-faq-icon,
.n1-card-icon {
  background:
    radial-gradient(circle at 30% 25%, rgba(244, 213, 114, 0.10) 0%, rgba(244, 213, 114, 0) 60%),
    linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(244, 213, 114, 0.75) !important;
  border-radius: 12px !important;
  color: #D4A843 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 10px rgba(212, 168, 67, 0.28),
    0 0 22px rgba(212, 168, 67, 0.14) !important;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease) !important;
}
/* SVGs inside the chip - IA gold strokes with a tight champagne rim
   shadow so they glow softly off the dark chip surface. */
.tile-icon svg,
.pain-icon svg,
.auto-icon svg,
.vertical-icon svg,
.car-role-icon svg,
.pri-tier-mark svg,
.pri-included-icon svg,
.n1-card-icon svg {
  stroke: #D4A843 !important;
  color: #D4A843 !important;
  filter:
    drop-shadow(0 0 2px rgba(244, 213, 114, 0.60))
    drop-shadow(0 0 6px rgba(212, 168, 67, 0.30)) !important;
}
/* FAQ ±/× glyph is built from CSS pseudo-elements, not an SVG. Repaint
   the bars IA gold so they match the icon chip palette. */
.pri-faq-icon::before,
.pri-faq-icon::after {
  background: #D4A843 !important;
  box-shadow: 0 0 4px rgba(244, 213, 114, 0.50) !important;
}
.pri-faq-item:hover .pri-faq-icon::before,
.pri-faq-item:hover .pri-faq-icon::after,
.pri-faq-item[open] .pri-faq-icon::before,
.pri-faq-item[open] .pri-faq-icon::after {
  background: #F4D572 !important;
  box-shadow: 0 0 6px rgba(255, 237, 179, 0.70) !important;
}
/* Process timeline numbers - beautiful shiny chrome on the gold chip.
   We target BOTH `.tl-node span` AND `.tl-item--tinted .tl-node span`
   so this beats the higher-specificity rule defined upstream
   (`.tl-item--tinted .tl-node span` at ~line 2230) on equal-specificity
   later-wins cascade. Five-stop vertical chrome gradient with the dark
   reflection band at 50% (the signature "polished bumper" reflection),
   plus a thin black rim shadow that defines the digit against the bright
   gold chip, and a top highlight that gives the chrome its lit edge. */
.tl-node span,
.tl-item--tinted .tl-node span {
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #E8E8E8 18%,
    #B8B8B8 38%,
    #4A4A4A 52%,
    #C0C0C0 70%,
    #F5F5F5 88%,
    #BFBFBF 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 1px rgba(0, 0, 0, 0.45),
    0 0 4px rgba(255, 255, 255, 0.40) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
/* Hover: brighter champagne border + intensified gold halo. The chip
   stays dark (so the gold border + gold SVG keep popping) but lifts a
   touch and gains a tighter inner highlight. */
.tile:hover .tile-icon,
.tile.active .tile-icon,
.pain-card:hover .pain-icon,
.auto-card:hover .auto-icon,
.vertical:hover .vertical-icon,
.car-role:hover .car-role-icon,
.pri-tier-card:hover .pri-tier-mark,
.pri-included-card:hover .pri-included-icon,
.n1-card:hover .n1-card-icon {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 237, 179, 0.18) 0%, rgba(244, 213, 114, 0) 60%),
    linear-gradient(180deg, #1f1f1f 0%, #0c0c0c 100%) !important;
  border-color: rgba(255, 237, 179, 0.95) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 16px rgba(244, 213, 114, 0.50),
    0 0 32px rgba(212, 168, 67, 0.28) !important;
}
/* SVGs brighten to champagne on hover */
.tile:hover .tile-icon svg,
.tile.active .tile-icon svg,
.pain-card:hover .pain-icon svg,
.auto-card:hover .auto-icon svg,
.vertical:hover .vertical-icon svg,
.car-role:hover .car-role-icon svg,
.pri-tier-card:hover .pri-tier-mark svg,
.pri-included-card:hover .pri-included-icon svg,
.n1-card:hover .n1-card-icon svg {
  stroke: #F4D572 !important;
  color: #F4D572 !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 237, 179, 0.75))
    drop-shadow(0 0 8px rgba(244, 213, 114, 0.40)) !important;
}
/* FAQ icon brightens on hover/open via background only - keeps its own
   rotate transform (90deg on hover, 180deg on open) intact. */
.pri-faq-item:hover .pri-faq-icon,
.pri-faq-item[open] .pri-faq-icon {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 237, 179, 0.18) 0%, rgba(244, 213, 114, 0) 60%),
    linear-gradient(180deg, #1f1f1f 0%, #0c0c0c 100%) !important;
  border-color: rgba(255, 237, 179, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 16px rgba(244, 213, 114, 0.50),
    0 0 32px rgba(212, 168, 67, 0.28) !important;
}


/* (eyebrow system consolidated at end of file) */


/* ==========================================================================
   N-DIVIDER - IA gold gradient hairline separator.
   Used below the header, above the footer, and at major page breaks.
   Fully solid across ~90% of the width, soft fade at the extreme edges
   so it never hard-cuts against viewport borders.
   ========================================================================== */
.n-divider {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    rgba(212, 168, 67, 0) 0%,
    rgba(212, 168, 67, 0.45) 5%,
    rgba(212, 168, 67, 0.95) 50%,
    rgba(212, 168, 67, 0.45) 95%,
    rgba(212, 168, 67, 0) 100%);
  box-shadow:
    0 0 6px rgba(212, 168, 67, 0.55),
    0 0 14px rgba(212, 168, 67, 0.32),
    0 0 28px rgba(212, 168, 67, 0.16);
  position: relative;
  z-index: 1;
}
/* Compact variant for tighter inter-section breaks */
.n-divider--inset {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Integrity Agency logo in footer is a click-through to integrityagency.io. */
.integrity-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.integrity-logo-link:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}
@keyframes nirvani-al-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.72; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* --- Label: "Ask Nirvani" chrome pill to the LEFT of the widget ------- */
.nirvani-al-label {
  position: absolute;
  right: 80px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  background:
    linear-gradient(135deg, rgba(20, 20, 20, 0.88), rgba(8, 8, 8, 0.88)) padding-box,
    linear-gradient(135deg, #FFF5D2, #FFFFFF 25%, #D7DDE8 60%, #B0B8C4) border-box;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #F1F5F9;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 6px 24px -4px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  pointer-events: auto;
  cursor: pointer;
  transform: translateY(-50%);
  animation: nirvani-al-label-drift 4s ease-in-out infinite;
  transition: box-shadow 240ms ease, background 240ms ease;
}
.nirvani-al-label:hover {
  background:
    linear-gradient(135deg, rgba(30, 30, 30, 0.92), rgba(12, 12, 12, 0.92)) padding-box,
    linear-gradient(135deg, #FFFFFF, #FFF5D2 25%, #FFFFFF 60%, #D7DDE8) border-box;
  box-shadow:
    0 10px 36px -4px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 32px -2px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: none;
}
.nirvani-al-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px 1px rgba(34, 197, 94, 0.7),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: nirvani-al-dot-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes nirvani-al-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}
@keyframes nirvani-al-label-drift {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 3px)); }
}

/* --- Badge: unread-message dot on top-right of widget ----------------- */
.nirvani-al-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow:
    0 4px 12px rgba(239, 68, 68, 0.6),
    0 0 0 2px #000,
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  pointer-events: none;
  animation: nirvani-al-badge-pop 1.6s ease-in-out infinite;
  transition: opacity 300ms ease, transform 300ms ease;
}
@keyframes nirvani-al-badge-pop {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.18); }
}
.nirvani-al-badge.is-dismissed {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

/* --- Tease: speech bubble above the widget ---------------------------- */
.nirvani-al-tease {
  position: absolute;
  right: 0;
  bottom: 84px;
  width: 260px;
  padding: 14px 38px 14px 16px;
  background: linear-gradient(135deg, rgba(16, 16, 16, 0.94), rgba(6, 6, 6, 0.96));
  border: 1px solid transparent;
  border-radius: 14px;
  background-clip: padding-box;
  color: #F1F5F9;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 48px -4px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: opacity 450ms ease,
              transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nirvani-al-tease.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.nirvani-al-tease:hover {
  box-shadow:
    0 28px 70px -12px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 56px -2px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.nirvani-al-tease strong {
  color: #FFFFFF;
  font-weight: 700;
}
.nirvani-al-tease-body {
  margin: 0;
}
.nirvani-al-tease-cta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D7DDE8;
}
/* Arrow tail pointing down to the widget */
.nirvani-al-tease::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 26px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(16, 16, 16, 0.94), rgba(6, 6, 6, 0.96));
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transform: rotate(45deg);
}
.nirvani-al-tease-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: #B0B8C4;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  border-radius: 50%;
  transition: background 150ms ease, color 150ms ease;
}
.nirvani-al-tease-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}

/* Mobile - hide the permanent label (too cramped), shrink halo + tease */
@media (max-width: 640px) {
  .nirvani-al-label { display: none; }
  .nirvani-al-halo {
    width: 110px;
    height: 110px;
    margin-left: -55px;
    margin-top: -55px;
  }
  .nirvani-al-tease {
    width: 220px;
    bottom: 80px;
    font-size: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nirvani-al-halo,
  .nirvani-al-label,
  .nirvani-al-label-dot,
  .nirvani-al-badge {
    animation: none !important;
  }
}

/* -----------------------------------------------------------------
   Eye-beam shot - full-viewport SVG overlay created by JS when the
   floating robot is clicked. Pointer-events none so it never blocks
   clicks. Self-removes after ~1s. See fireEyeBeams() in index.html.
   display:block is REQUIRED - <svg> defaults to inline, and inline
   elements silently drop width/height in CSS, leaving the overlay 0x0.
   ----------------------------------------------------------------- */
.nirvani-eye-beams {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}
/* Robot recoil when the beams fire - applied to the inner img so it
   doesn't fight the robotFloat animation on the parent. */
.floating-robot.is-firing img {
  animation: robotRecoil 460ms cubic-bezier(0.3, 0.75, 0.2, 1);
}
@keyframes robotRecoil {
  0%   { transform: scale(1)    translateX(0); }
  28%  { transform: scale(1.14) translateX(-5px); }
  60%  { transform: scale(1.05) translateX(1px);  }
  100% { transform: scale(1)    translateX(0); }
}
/* Reduced motion: disable the robot recoil, but keep the beams themselves.
   The beam effect is brief (~1s), user-initiated on click, and non-looping -
   an acceptable exemption. Hiding them entirely would leave reduced-motion
   users with a broken "click does nothing visual" experience. */
@media (prefers-reduced-motion: reduce) {
  .floating-robot.is-firing img { animation: none; }
}

/* ==========================================================================
   HERO CHROME CTA - "Strategize"
   Differentiated from the eyebrow micro-labels:
   chrome-gradient fill, shimmer animation, rotating highlight border,
   pulsing outer glow, sliding arrow.
   ========================================================================== */
.hero-cta-chrome {
  /* IA gold - bright champagne highlight → core gold → bronze depth */
  --cta-bg: linear-gradient(
    135deg,
    #FFF5D2 0%,
    #F4D572 22%,
    #D4A843 48%,
    #F4D572 74%,
    #B68A2E 100%
  );
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  /* Clean lift - no diffuse halo glow that smudges light backgrounds */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.30));
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
/* Rotating conic highlight removed - was reading as a "spinning wheel"
   around every chrome CTA, especially noisy on mobile. The chrome gradient
   fill, inset highlight, pulsing glow, and shimmer stay. */

/* Call-icon - MDI cellphone-wireless. Bold filled glyph, signal-waves
   radiating from a phone. Sized bigger than surrounding text so it reads
   as an icon, not a letter. */
.cta-call-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.32em;
  margin-left: 0.45em;
  fill: currentColor;
  stroke: none;
}
.hero-cta-chrome-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 42px;
  border-radius: 999px;
  background: var(--cta-bg);
  background-size: 260% 100%;
  background-position: 0% 50%;
  color: #0F0F0F;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(212, 168, 67, 0.55);
  animation: cta-chrome-shimmer 4.5s ease-in-out infinite;
}
.hero-cta-chrome-arrow {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  transition: transform 0.28s var(--ease);
}
.hero-cta-chrome:hover {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.42));
}
.hero-cta-chrome:hover .hero-cta-chrome-arrow {
  transform: translateX(5px);
}
@keyframes cta-chrome-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes cta-chrome-spin {
  to { transform: rotate(360deg); }
}
/* cta-chrome-pulse keyframes removed - pulse glow was the "smudge" on light bg */
/* Compact nav variant - same chrome treatment, smaller footprint. */
.hero-cta-chrome.is-nav {
  align-self: center;
}
.hero-cta-chrome.is-nav .hero-cta-chrome-inner {
  padding: 11px 24px;
  font-size: 11px;
  letter-spacing: 0.18em;
  gap: 0;
}
.hero-cta-chrome.is-nav {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}

/* Tools / playbooks: form submits + booking CTAs use header chrome format.
   Page-local .unlock-submit / .next-cta / .cta-* pill CSS must not override. */
button.hero-cta-chrome {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: auto;
  max-width: 100%;
}
button.hero-cta-chrome.full,
button.hero-cta-chrome.unlock-submit.full,
button.hero-cta-chrome.cta-submit.full {
  display: block;
  width: 100%;
}
button.hero-cta-chrome.full .hero-cta-chrome-inner,
button.hero-cta-chrome.unlock-submit.full .hero-cta-chrome-inner,
button.hero-cta-chrome.cta-submit.full .hero-cta-chrome-inner {
  display: flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
button.hero-cta-chrome.unlock-submit,
button.hero-cta-chrome.cta-submit,
a.hero-cta-chrome.next-cta,
a.hero-cta-chrome.cta-primary,
a.hero-cta-chrome.cta-secondary,
a.hero-cta-chrome.pb-cta-btn,
a.hero-cta-chrome.cta-btn-primary,
a.hero-cta-chrome.cta-btn-secondary,
a.hero-cta-chrome.tools-apps-cta {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  padding: 0 !important;
  margin-top: 0.35rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28)) !important;
}
button.hero-cta-chrome.unlock-submit:hover,
button.hero-cta-chrome.cta-submit:hover,
a.hero-cta-chrome.next-cta:hover,
a.hero-cta-chrome.cta-primary:hover,
a.hero-cta-chrome.cta-secondary:hover,
a.hero-cta-chrome.pb-cta-btn:hover,
a.hero-cta-chrome.tools-apps-cta:hover {
  background: transparent !important;
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.42)) !important;
}
button.hero-cta-chrome.unlock-submit .hero-cta-chrome-inner,
button.hero-cta-chrome.cta-submit .hero-cta-chrome-inner,
a.hero-cta-chrome.next-cta .hero-cta-chrome-inner,
a.hero-cta-chrome.cta-primary .hero-cta-chrome-inner,
a.hero-cta-chrome.cta-secondary .hero-cta-chrome-inner,
a.hero-cta-chrome.pb-cta-btn .hero-cta-chrome-inner,
a.hero-cta-chrome.tools-apps-cta .hero-cta-chrome-inner {
  -webkit-text-fill-color: #0F0F0F !important;
  color: #0F0F0F !important;
  background: var(--cta-bg) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
}
button.hero-cta-chrome:disabled,
button.hero-cta-chrome.unlock-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-chrome,
  .hero-cta-chrome::before,
  .hero-cta-chrome-inner {
    animation: none !important;
  }
}

/* ==========================================================================
   ARCHITECTURAL TITLE BANDS
   Section titles + hero copy. ONE gold line over the eyebrow only.
   No bottom divider under the subtitle. Bottom pad/gap tightened 50%.
   ========================================================================== */
.section-head,
.hero-centered,
.cluster-header,
.integrations-inline .integrations-head,
.integrations-head {
  /* Break out of any parent .container to span the full viewport width. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Transparent so the fixed neural-sphere / starfield (z-index 0) shows
     through the title bands. Solid #000 was covering the background and
     made "Revenue Infrastructure…" and other section heads look pure black. */
  background: transparent;
  position: relative;
  box-sizing: border-box;
  /* Bottom padding cut 50% (was 48px) so content sits closer under the sub */
  padding: 48px 24px 24px;

  /* Kill border-image twins completely — top line is a pseudo only */
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;

  /* Top margin kept; bottom margin cut 50% (was 64px) */
  margin-top: 64px;
  margin-bottom: 32px;

  /* Keep flex centering of children (h2, .section-sub, .micro-label) */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Gold divider OVER the eyebrow only (never under the subtitle) */
.section-head::before,
.hero-centered::before,
.cluster-header::before,
.integrations-inline .integrations-head::before,
.integrations-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.40) 15%,
    rgba(212, 168, 67, 0.95) 50%,
    rgba(212, 168, 67, 0.40) 85%,
    transparent 100%
  );
  box-shadow:
    0 -1px 6px rgba(212, 168, 67, 0.55),
    0 -2px 14px rgba(212, 168, 67, 0.32),
    0 -4px 28px rgba(212, 168, 67, 0.16);
}

/* Keep heading + subtitle text at their intended readable widths. */
.section-head h2,
.hero-centered h1,
.cluster-header .cluster-label { max-width: 760px; }
.section-head .section-sub,
.integrations-head .section-sub,
.hero-centered .hero-sub,
.cluster-header .cluster-title { max-width: 640px; margin-left: auto; margin-right: auto; }

@media (max-width: 640px) {
  .section-head,
  .hero-centered,
  .cluster-header,
  .integrations-head {
    padding: 36px 20px 18px;
    margin-top: 44px;
    margin-bottom: 22px;
  }
}

/* AI Employee Suite (after Nirvani Revenue Recovery) — match section rhythm */
body.home-page main#main-content > section.ai-suite-home {
  padding: 28px 0;
}
body.home-page .ai-suite-home .cluster-see-all {
  margin: 24px 0 0 !important;
}

/* ==========================================================================
   GLOBAL CARD GLOW
   Default: champagne outline + soft outer glow on every card-like container.
   :hover: adds the interior fill + intensifies glow (the "pop").
   Form inputs are intentionally excluded - they already have a focus treatment.
   ========================================================================== */
.dashboard,
.dash-stat,
.results-dashboard,
.result-tile,
.stat-big,
.accountability-box,
.btn-ghost {
  border-color: rgba(212, 168, 67, 0.45) !important;
  box-shadow: 0 0 10px rgba(212, 168, 67, 0.12), 0 0 25px rgba(212, 168, 67, 0.06);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.dashboard:hover,
.dash-stat:hover,
.results-dashboard:hover,
.result-tile:hover,
.stat-big:hover,
.accountability-box:hover,
.btn-ghost:hover {
  border-color: rgba(212, 168, 67, 0.70) !important;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 14px rgba(212, 168, 67, 0.18), 0 0 30px rgba(212, 168, 67, 0.08), inset 0 0 20px rgba(212, 168, 67, 0.05);
  transform: translateY(-2px);
}

/* SHINY STANDOUT BORDER override removed 2026-05-02 - was using
   !important to force a flat champagne border + no shadow on every
   card sitewide, which suppressed the full chrome card system
   (corner brackets shimmer, 3D lift, glow halo). The card-system
   bundle at lines ~1518-1648 now governs all card hover states.
   .car-pill keeps its lighter pill border below since it isn't a
   full card and shouldn't get the 3D system. */
.car-pill {
  border: 1px solid rgba(212, 168, 67, 0.92);
  box-shadow: none;
}
.car-pill:hover {
  border-color: var(--accent-cream);
  background-color: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   BUILT ON - enterprise infrastructure trust strip
   Lives inside the hero, between robot and value-prop H1.
   Naked transparent wordmark logos, per-logo color treatment.
   ============================================================ */
.built-on {
  padding: 14px 16px 22px;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}
.built-on--hero {
  padding: 10px 16px 18px;
  margin: 6px auto 18px;
  max-width: min(980px, 100%);
}
/* Standalone strip on enterprise / pricing / security / n1 (not inside .hero) */
.built-on--page {
  margin: 4px auto 24px;
  padding: 12px 16px 20px;
  max-width: min(980px, 100%);
}
.built-on-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 auto 16px;
  max-width: 42em;
  padding: 0 8px;
  font-weight: 700;
  line-height: 1.55;
  /* IA gold - bronze → core gold → champagne → core gold → bronze */
  background: linear-gradient(135deg, #B68A2E 0%, #D4A843 25%, #F4D572 50%, #D4A843 75%, #B68A2E 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.30));
}
/* Dual-line partner strip (4 + 4). Line 1 full-width equal grid; line 2
   content-sized, self-centered, equal gaps — premium parity with row 1. */
.built-on-row {
  --bo-gap-x: clamp(14px, 2.4vw, 28px);
  --bo-gap-y: clamp(18px, 2.8vw, 32px);
  --bo-pad-x: clamp(12px, 2.4vw, 28px);
  --bo-pad-y: clamp(12px, 2vw, 22px);
  --bo-cell-pad: clamp(4px, 0.8vw, 10px);
  --bo-max-h: clamp(44px, 6.2vw, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bo-gap-y);
  padding: var(--bo-pad-y) var(--bo-pad-x);
  border-top: none;
  border-bottom: none;
  background: none;
  width: 100%;
  max-width: min(960px, 100%);
  margin: 0 auto;
  box-sizing: border-box;
}
.built-on-line {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--bo-gap-x);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Row 1: four equal slots across full strip width */
.built-on-line--1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--bo-gap-x);
  align-items: center;
  justify-items: center;
  width: 100%;
}
/* Row 2: Microsoft | X | Cloudflare | NVIDIA — group centers on its own merit */
.built-on-line--2 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: var(--bo-gap-x);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.built-on-line--2 .built-on-logo {
  flex: 0 0 auto;
  width: clamp(100px, 12.5vw, 160px);
  max-width: clamp(100px, 12.5vw, 160px);
  margin-left: 0;
  margin-right: 0;
}
.built-on-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.45s var(--ease), filter 0.45s var(--ease);
  cursor: default;
  /* Per-logo optical scale vs full cell max (1 = tallest stack marks) */
  --h-scale: 1;
  --h-boost: 0px;
  height: calc(var(--bo-max-h) * var(--h-scale) + var(--h-boost) + var(--bo-cell-pad) * 2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--bo-cell-pad);
  box-sizing: border-box;
  transform: none !important;
  overflow: visible; /* wide Microsoft wordmark must not clip */
}
.built-on-logo img {
  /* 95% of cell width; height capped via --bo-max-h. No paint-scale hacks. */
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: calc(var(--bo-max-h) * var(--h-scale) + var(--h-boost));
  object-fit: contain;
  display: block;
  margin: 0 auto;
  overflow: visible;
}
.built-on-logo:hover {
  opacity: 1;
}

/* --invert : flatten a colored logo to a white silhouette
   (used for Anthropic's dark-gray wordmark). */
.built-on-logo--invert img {
  filter: brightness(0) invert(1);
}
.built-on-logo--invert:hover img {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.35));
}

/* --brighten : amplify a faded near-white wordmark to pure white
   without altering hue (used for OpenAI's low-opacity gray). */
.built-on-logo--brighten img {
  filter: brightness(2.5) contrast(1.1);
}
.built-on-logo--brighten:hover img {
  filter: brightness(2.8) contrast(1.15) drop-shadow(0 0 8px rgba(255,255,255,0.35));
}

/* AWS + Cloudflare use 2-color SVGs with white wordmark + brand orange
   baked in. No filter on the image; only a hover halo using the
   official brand color (#FF9900 AWS, #F38020 Cloudflare). */
.built-on-logo--aws:hover img {
  filter: drop-shadow(0 0 10px rgba(255, 153, 0, 0.55));
}
.built-on-logo--cloudflare:hover img {
  filter: drop-shadow(0 0 10px rgba(243, 128, 32, 0.55));
}
/* Google Cloud: multi-color brand mark, full-color PNG. Halo on hover
   pulls from Google's four brand hues for a soft white-blue glow that
   matches the energy of the AWS / Cloudflare orange halos. */
.built-on-logo--gcloud:hover img {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.40))
          drop-shadow(0 0 16px rgba(66, 133, 244, 0.30));
}

.built-on-logo--microsoft:hover img {
  filter: drop-shadow(0 0 10px rgba(0, 164, 239, 0.45));
}
.built-on-logo--nvidia:hover img {
  filter: drop-shadow(0 0 10px rgba(118, 185, 0, 0.55));
}

/* Optical scale + per-logo nudge. Row 1 may use small nudges; row 2 uses
   equal slots + column-gap only (no gap-push or paint-scale hacks). */
.built-on-logo {
  --nudge-x: 0px;
  --nudge-y: 0px;
}
/* Row 1 */
.built-on-logo--invert     { --h-scale: 0.96; }
.built-on-logo--gcloud     { --h-scale: 1.103; --h-boost: 12px; --nudge-x: 6px; }
.built-on-logo--brighten   { --h-scale: 0.588; --nudge-x: 8px; --nudge-y: 6px; } /* OpenAI */
.built-on-logo--aws        { --h-scale: 0.660; --nudge-x: -8px; --nudge-y: 3px; }
/* Row 2 — premium parity with row 1 (--h-scale only; zero horizontal nudge).
   MS/CF: +50% then +60%, then MS -10% / CF -12% (2026-08-03).
   Wider slots so wide wordmarks can actually grow. */
.built-on-logo--microsoft  { --h-scale: 1.944; --h-boost: 13px; --nudge-x: 0px; --nudge-y: 2px; }
.built-on-logo--x          { --h-scale: 0.95; --nudge-x: 0px; --nudge-y: 0px; }
.built-on-logo--cloudflare { --h-scale: 2.049; --h-boost: 12px; --nudge-x: 0px; --nudge-y: 0px; }
.built-on-logo--nvidia     { --h-scale: 0.98; --nudge-x: 0px; --nudge-y: 0px; }
/* Wide MS/CF wordmarks: full slot + enlarged cell so height scale is not width-capped */
.built-on-logo--microsoft img,
.built-on-logo--cloudflare img {
  max-width: 100%;
}
.built-on-line--2 .built-on-logo--microsoft {
  width: clamp(144px, 18vw, 230px);
  max-width: clamp(144px, 18vw, 230px);
}
.built-on-line--2 .built-on-logo--cloudflare {
  width: clamp(141px, 17.6vw, 225px);
  max-width: clamp(141px, 17.6vw, 225px);
}
.built-on-logo--x:hover img {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.35));
}
/* Row 1 only: optical nudge translate. Row 2 stays at 0/0 (equal gaps). */
.built-on-logo--gcloud,
.built-on-logo--gcloud:hover,
.built-on-logo--brighten,
.built-on-logo--brighten:hover,
.built-on-logo--aws,
.built-on-logo--aws:hover {
  transform: translate(var(--nudge-x), var(--nudge-y)) !important;
}
.built-on-logo--microsoft,
.built-on-logo--microsoft:hover,
.built-on-logo--x,
.built-on-logo--x:hover,
.built-on-logo--cloudflare,
.built-on-logo--cloudflare:hover,
.built-on-logo--nvidia,
.built-on-logo--nvidia:hover {
  transform: none !important;
}

/* Gutters + dual-line slot clamps. */
@media (max-width: 1100px) {
  .built-on-row {
    --bo-max-h: clamp(42px, 5.8vw, 70px);
    max-width: min(900px, 100%);
  }
}

@media (max-width: 900px) {
  .built-on-row {
    --bo-max-h: clamp(40px, 7vw, 64px);
    max-width: min(760px, 100%);
  }
  .built-on-line--2 .built-on-logo {
    width: clamp(88px, 13.5vw, 140px);
    max-width: clamp(88px, 13.5vw, 140px);
  }
  .built-on-line--2 .built-on-logo--microsoft {
    width: clamp(126px, 19.4vw, 202px);
    max-width: clamp(126px, 19.4vw, 202px);
  }
  .built-on-line--2 .built-on-logo--cloudflare {
    width: clamp(123px, 18.9vw, 197px);
    max-width: clamp(123px, 18.9vw, 197px);
  }
  .built-on-label {
    font-size: 10.5px;
    letter-spacing: 0.24em;
    margin-bottom: 14px;
  }
  /* Row 1 optical nudges only on tablet */
  .built-on-logo--gcloud     { --nudge-x: 5px; }
  .built-on-logo--brighten   { --nudge-x: 6px; --nudge-y: 5px; }
  .built-on-logo--aws        { --nudge-x: -6px; --nudge-y: 2px; }
  /* Row 2: always zero horizontal nudge */
  .built-on-logo--cloudflare { --nudge-x: 0px; }
  .built-on-logo--microsoft  { --nudge-x: 0px; --nudge-y: 2px; }
  .built-on-logo--x          { --nudge-x: 0px; }
  .built-on-logo--nvidia     { --nudge-x: 0px; }
}

@media (max-width: 720px) {
  .built-on {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .built-on--hero,
  .built-on--page {
    padding: 10px 8px 16px;
    margin-left: auto;
    margin-right: auto;
    max-width: min(560px, 100%);
    overflow: visible;
  }
  .built-on-row {
    --bo-max-h: clamp(36px, 9.5vw, 52px);
    --bo-gap-x: clamp(8px, 2.2vw, 14px);
    --bo-gap-y: clamp(14px, 3.2vw, 20px);
    --bo-pad-x: clamp(8px, 2vw, 14px);
    --bo-pad-y: clamp(10px, 2vw, 14px);
    max-width: min(520px, calc(100vw - 24px));
    overflow: visible;
  }
  .built-on-line--2 .built-on-logo {
    width: clamp(72px, 17vw, 112px);
    max-width: clamp(72px, 17vw, 112px);
  }
  .built-on-line--2 .built-on-logo--microsoft {
    width: clamp(104px, 24.3vw, 162px);
    max-width: clamp(104px, 24.3vw, 162px);
  }
  .built-on-line--2 .built-on-logo--cloudflare {
    width: clamp(101px, 23.8vw, 158px);
    max-width: clamp(101px, 23.8vw, 158px);
  }
  .built-on-logo--gcloud     { --nudge-x: 4px; --h-boost: 8px; }
  .built-on-logo--brighten   { --nudge-x: 5px; --nudge-y: 4px; }
  .built-on-logo--aws        { --nudge-x: -5px; --nudge-y: 2px; }
  .built-on-logo--cloudflare { --nudge-x: 0px; --h-boost: 5px; }
  .built-on-logo--microsoft  { --nudge-x: 0px; --nudge-y: 2px; --h-boost: 5px; }
  .built-on-logo--x          { --nudge-x: 0px; }
  .built-on-logo--nvidia     { --nudge-x: 0px; }
  .built-on-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    padding: 0 6px;
    line-height: 1.5;
  }
  .built-on-caption {
    margin: 12px auto 0;
    padding: 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
    max-width: min(340px, calc(100vw - 32px));
  }
}

@media (max-width: 400px) {
  .built-on-row {
    --bo-max-h: clamp(32px, 10vw, 44px);
    --bo-gap-x: 8px;
    --bo-gap-y: 14px;
    --bo-pad-x: 8px;
    --bo-pad-y: 10px;
    max-width: min(380px, calc(100vw - 20px));
    overflow: visible;
  }
  .built-on-line--2 .built-on-logo {
    width: clamp(64px, 20vw, 90px);
    max-width: clamp(64px, 20vw, 90px);
  }
  .built-on-line--2 .built-on-logo--microsoft {
    width: clamp(90px, 27vw, 130px);
    max-width: clamp(90px, 27vw, 130px);
  }
  .built-on-line--2 .built-on-logo--cloudflare {
    width: clamp(88px, 26.4vw, 127px);
    max-width: clamp(88px, 26.4vw, 127px);
  }
  .built-on-logo--gcloud     { --nudge-x: 3px; --h-boost: 6px; }
  .built-on-logo--brighten   { --nudge-x: 4px; --nudge-y: 3px; }
  .built-on-logo--aws        { --nudge-x: -4px; --nudge-y: 2px; }
  .built-on-logo--cloudflare { --nudge-x: 0px; --h-boost: 4px; }
  .built-on-logo--microsoft  { --nudge-x: 0px; --nudge-y: 2px; --h-boost: 5px; }
  .built-on-logo--x          { --nudge-x: 0px; }
  .built-on-logo--nvidia     { --nudge-x: 0px; }
}

/* ============================================================
   SCALE STRIP - three capability stats between Revenue Gap
   and Industries. Numbers reveal on scroll w/ chrome shimmer.
   ============================================================ */
.scale-strip {
  /* Tightened top padding so the gap from the "TOTAL ESTIMATED..."
     headline above to the strip card below matches the gap between
     the comparison table and the headline */
  padding: 24px 0 40px;
  position: relative;
}
.scale-strip-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 40px 32px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  /* Champagne corner brackets + dark layered gradient - matches the
     site-wide chrome card system used by tiles, pricing, careers,
     industries, and FAQ. */
  background:
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px left 14px / 26px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px left 14px / 1px 26px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px right 14px / 26px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px right 14px / 1px 26px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px left 14px / 26px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px left 14px / 1px 26px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px right 14px / 26px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px right 14px / 1px 26px no-repeat,
    linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 24px 60px -24px rgba(255,255,255,0.10),
    0 40px 90px -40px rgba(0,0,0,0.7);
  position: relative;
  overflow: hidden;
  transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
}
.scale-strip-grid:hover {
  border-color: rgba(244, 213, 114, 0.55);
  background:
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px left 14px / 34px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px left 14px / 1px 34px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px right 14px / 34px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px right 14px / 1px 34px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px left 14px / 34px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px left 14px / 1px 34px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px right 14px / 34px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px right 14px / 1px 34px no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244, 213, 114, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 0 0 1px rgba(244, 213, 114, 0.30),
    0 30px 70px -28px rgba(212, 168, 67, 0.18),
    0 40px 90px -40px rgba(0,0,0,0.75);
}
.scale-strip-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Three layers stacked:
     1. Diagonal champagne sweep (animated on hover, hidden off-canvas at rest)
     2. Top radial highlight wash
     3. Bottom radial highlight wash
     Same 115deg sweep angle + 1100ms ease as the site-wide tile system. */
  background:
    linear-gradient(115deg,
      transparent 32%,
      rgba(244, 213, 114, 0.22) 50%,
      transparent 68%) -100% 0 / 220% 100% no-repeat,
    radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,0.025) 0%, transparent 60%);
  pointer-events: none;
  transition: background-position 1100ms var(--ease);
  z-index: 0;
}
.scale-strip-grid:hover::before {
  background-position: 200% 0, 50% 0%, 50% 100%;
}
/* Keep the stat content above the diagonal sweep layer */
.scale-stat,
.scale-stat-divider {
  z-index: 1;
}
.scale-strip-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  background-size: 220% 220%;
  background-position: 200% 0%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: scale-strip-border-shimmer 11s ease-in-out infinite;
}
@keyframes scale-strip-border-shimmer {
  0%, 100% { background-position: 200% 0%; }
  50%      { background-position: -100% 0%; }
}
.scale-stat {
  text-align: center;
  position: relative;
  z-index: 1;
}
.scale-stat-value {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: scale-shimmer 9s ease-in-out infinite;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.scale-num { display: inline-block; }
.scale-sep {
  color: rgba(255,255,255,0.35);
  -webkit-text-fill-color: rgba(255,255,255,0.35);
  font-weight: 400;
  margin: 0 4px;
}
.scale-plus {
  font-size: 0.6em;
  font-weight: 600;
  margin-left: 2px;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scale-stat-label {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
}
.scale-stat-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.scale-stat-divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
}
@keyframes scale-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (max-width: 860px) {
  .scale-strip { padding: 40px 0 32px; }
  .scale-strip-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 14px;
    padding: 28px 20px;
  }
  .scale-stat-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
    margin: 6px auto;
  }
  .scale-stat-label { font-size: 11px; letter-spacing: 0.18em; }
  .scale-stat-sub { font-size: 12px; }
}

/* ============================================================
   FOUNDER NOTE - chrome card with signature lead-in
   to the Founder CTA. Sits between How It Works and Book.
   ============================================================ */
.founder-note {
  padding: 56px 0 16px;
  position: relative;
}
/* Matched to .roi-card (Revenue Recovery Calculator): IA gold L-bracket
   corners + dark base + IA gold halo on hover. The chrome ::after edge that
   used to wrap this card has been removed - brackets carry the framing. */
.founder-note-card {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 40px 44px 36px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px left 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px left 14px / 1px 28px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px right 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 14px right 14px / 1px 28px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px left 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px left 14px / 1px 28px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px right 14px / 28px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 14px right 14px / 1px 28px no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 168, 67, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 14px 50px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(212, 168, 67, 0.08);
  transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
}
/* Pure decorative quote glyph in the top-left corner - kept; reads against
   the dark base, sits behind the brackets. */
.founder-note-card::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: 28px;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 140px;
  line-height: 1;
  color: rgba(212, 168, 67, 0.10);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 0;
  transition: color 0.5s var(--ease);
}
/* Sweep shimmer (same as .roi-card::before) - only visible on hover */
.founder-note-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(244, 213, 114, 0.16) 50%,
    transparent 68%);
  background-size: 220% 100%;
  background-position: -100% 0;
  pointer-events: none;
  z-index: 0;
  transition: background-position 1100ms var(--ease);
  border-radius: inherit;
}
.founder-note-card:hover::after {
  background-position: 200% 0;
}
.founder-note-card:hover {
  border-color: rgba(244, 213, 114, 0.55);
  background:
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px left 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px left 14px / 1px 38px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px right 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) top 14px right 14px / 1px 38px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px left 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px left 14px / 1px 38px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px right 14px / 38px 1px no-repeat,
    linear-gradient(var(--accent-cream), var(--accent-cream)) bottom 14px right 14px / 1px 38px no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244, 213, 114, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
  box-shadow:
    0 0 0 1px rgba(244, 213, 114, 0.35),
    0 0 24px rgba(212, 168, 67, 0.18),
    0 0 60px rgba(212, 168, 67, 0.10),
    0 18px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}
.founder-note-card:hover::before {
  color: rgba(244, 213, 114, 0.18);
}
.founder-note-card > * { position: relative; z-index: 1; }
.founder-note-quote {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.75;
  color: var(--text-1);
  margin: 0 0 16px;
  font-weight: 400;
  letter-spacing: 0.005em;
  position: relative;
  z-index: 1;
}
.founder-note-quote:last-of-type {
  margin-bottom: 28px;
}
.founder-note-sign {
  /* Photo, then the signature stacked directly over the name. The group is
     centred as one unit so the leftover width splits evenly either side and
     reads as padding, not as a dead right half. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(22px, 2.6vw, 32px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  position: relative;
  z-index: 1;
}
.founder-note-portrait {
  /* IA polished-gold bezel - same goldShine stops as the verified badge and
     "FOUNDER & CEO" title so all three pieces read as one gold treatment. */
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  position: relative;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg,
    #FFF7CD 0%,
    #FDE58C 12%,
    #D4A843 33%,
    #C89637 47%,
    #AF7A26 50%,
    #B68A2E 54%,
    #D4A843 68%,
    #B68A2E 84%,
    #9E6E26 96%,
    #76501C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 205, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(244, 213, 114, 0.22),
    0 14px 32px -10px rgba(0, 0, 0, 0.75);
  isolation: isolate;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  cursor: pointer;
}
.founder-note-portrait:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 205, 0.42),
    inset 0 -1px 1px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(244, 213, 114, 0.32),
    0 18px 40px -10px rgba(0, 0, 0, 0.8);
}
.founder-note-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  /* Inner bezel cut so the chrome ring reads as polished metal,
     not just a colored border */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.5),
    inset 0 1px 2px rgba(0,0,0,0.45);
  background: #000;
  transition: filter 0.45s var(--ease);
}
.founder-note-portrait:hover img {
  filter: brightness(1.08) contrast(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .founder-note-portrait:hover { transform: none; }
}
.founder-note-sign-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}
.founder-note-signature-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  -webkit-mask: url("assets/sammy-signature.png") left center / contain no-repeat;
  mask: url("assets/sammy-signature.png") left center / contain no-repeat;
  background: var(--grad-chrome);
  background-size: 220% 220%;
  animation: founder-sig-shimmer 7s ease-in-out infinite;
  height: 84px;
  width: 310px;
  filter: drop-shadow(0 4px 14px rgba(255,255,255,0.18));
}
.founder-note-signature {
  /* Real PNG kept for layout/SR/print fallback; visually hidden - the
     mask above paints the shimmering chrome version */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  display: block;
}
@keyframes founder-sig-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.founder-note-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
  align-items: flex-start;
  text-align: left;
  padding-left: 12px;
}
.founder-note-name strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}
.founder-name-badge {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 6px;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 0 5px rgba(244, 213, 114, 0.45));
}
/* "FOUNDER & CEO, NIRVANI" - beautiful, not timid, shiny gold.
   IA gold gradient with a brighter cream highlight at the apex, layered
   drop-shadows for warm metallic shine, animated sheen sweep so the gold
   actually shimmers (not flat). */
.founder-note-name span {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  /* Exact goldShine stops - matches the verified-badge SVG fill so the title
     reads as the same polished IA metal, top-to-bottom. */
  background: linear-gradient(180deg,
    #FFF7CD 0%,
    #FDE58C 12%,
    #D4A843 33%,
    #C89637 47%,
    #AF7A26 50%,
    #B68A2E 54%,
    #D4A843 68%,
    #B68A2E 84%,
    #9E6E26 96%,
    #76501C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 0.5px rgba(255, 237, 179, 0.6))
    drop-shadow(0 0 3px rgba(244, 213, 114, 0.4))
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}
/* When the merged section follows, the original Final CTA sits inside .founder-note */
.founder-note .final-cta {
  margin-top: 56px;
  text-align: center;
}
.founder-note .cta-pill-row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}
.founder-note .cta-handshake {
  display: block;
  margin: 0 auto 6px;
  width: 144px;
  height: auto;
}
@media (max-width: 720px) {
  .founder-note { padding: 40px 0 8px; }
  .founder-note-card { padding: 28px 22px 24px; margin-top: 18px; }
  .founder-note-card::before { font-size: 100px; top: -10px; left: 16px; }
  /* Phone: the signing block stays a row and stays left. The pair scales
     together so the photo keeps its proportion to the signature stack. */
  .founder-note-sign { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .founder-note-portrait { width: 96px; height: 96px; }
  .founder-note-signature-wrap { width: 230px; height: 62px; }
  .founder-note-sign-meta { align-items: flex-start; }
  .founder-note-name { align-items: flex-start; text-align: left; padding-left: 9px; }
  .founder-note .final-cta { margin-top: 36px; }
  .founder-note .cta-pill-row { gap: 8px; margin-bottom: 6px; }
}

/* ============================================================
   FAQ - uses the same chrome card system as .tile-grid--jw-glass
   tiles (champagne corner brackets, dark layered bg, diagonal
   shimmer sweep on hover, 3D lift). Native <details> for a11y,
   hover-open on desktop pointers, click/tap on touch + keyboard.
   ============================================================ */
.faq-section {
  padding: 64px 0 32px;
  position: relative;
}
.faq-list {
  max-width: 860px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  overflow: hidden;
  /* Champagne corner brackets + dark layered gradient - exact same
     stack as .tile-grid--jw-glass .tile so the section reads as part
     of the same chrome card system. */
  background:
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 22px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px left 12px / 1px 22px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px right 12px / 22px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) top 12px right 12px / 1px 22px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 22px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px left 12px / 1px 22px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 22px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.55), rgba(212, 168, 67, 0.55)) bottom 12px right 12px / 1px 22px no-repeat,
    linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 8px 30px rgba(0, 0, 0, 0.6);
  transition: transform 460ms var(--ease), background 460ms var(--ease), border-color 460ms var(--ease), box-shadow 460ms var(--ease);
  transform-origin: center center;
}
/* Diagonal champagne shimmer sweep on hover - matches existing tiles */
.faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(244, 213, 114, 0.18) 50%,
    transparent 68%);
  background-size: 220% 100%;
  background-position: -100% 0;
  opacity: 1;
  transition: background-position 1100ms var(--ease);
  pointer-events: none;
  z-index: 0;
}
.faq-item:hover,
.faq-item[open] {
  transform: perspective(1000px) translateY(-4px) rotateX(1.5deg);
  border-color: rgba(244, 213, 114, 0.65);
  background:
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) top 12px left 12px / 28px 1px no-repeat,
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) top 12px left 12px / 1px 28px no-repeat,
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) top 12px right 12px / 28px 1px no-repeat,
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) top 12px right 12px / 1px 28px no-repeat,
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) bottom 12px left 12px / 28px 1px no-repeat,
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) bottom 12px left 12px / 1px 28px no-repeat,
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) bottom 12px right 12px / 28px 1px no-repeat,
    linear-gradient(rgba(244, 213, 114, 0.95), rgba(244, 213, 114, 0.95)) bottom 12px right 12px / 1px 28px no-repeat,
    linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(14, 14, 14, 0.98));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(244, 213, 114, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.7),
    0 0 28px rgba(244, 213, 114, 0.10);
}
.faq-item:hover::before,
.faq-item[open]::before {
  background-position: 200% 0;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px;
  font-size: clamp(15px, 1.55vw, 17px);
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: 0.005em;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--ease);
  position: relative;
  z-index: 1;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q > span:first-child {
  flex: 1;
  min-width: 0;
}
.faq-item:hover .faq-q > span:first-child,
.faq-item[open] .faq-q > span:first-child {
  background: var(--grad-platinum-champagne);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: faq-text-shimmer 6s ease-in-out infinite;
}
@keyframes faq-text-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.faq-chev {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.45s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.faq-chev svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq-item:hover .faq-chev {
  border-color: rgba(244, 213, 114, 0.55);
  color: var(--accent-cream);
  background: rgba(244, 213, 114, 0.05);
}
.faq-item[open] .faq-chev {
  transform: rotate(180deg);
  border-color: rgba(244, 213, 114, 0.75);
  color: #FFFFFF;
  background: rgba(244, 213, 114, 0.10);
  box-shadow: 0 0 14px rgba(244, 213, 114, 0.18);
}
/* Answer area - full natural height, no max-height clamp.
   Padding-top adds breathing room above the answer text. */
.faq-a {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 4px 28px 26px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-1);
  letter-spacing: 0.005em;
  animation: faq-fade-in 0.45s var(--ease);
  position: relative;
  z-index: 2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
@keyframes faq-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .faq-section { padding: 44px 0 24px; }
  .faq-q { padding: 18px 20px; font-size: 14.5px; gap: 14px; }
  .faq-a { padding: 4px 20px 22px; font-size: 14px; }
}

/* ==========================================================================
   DARK THEME (back to IA roots, 2026-06-09) - header + footer are pure black.
   The former "crispy white" header/footer overrides were removed so the native
   black header/footer (white + platinum text, IA gold borders) show through.
   Only the BBB horizontal badge sizing is kept (layout, not color). Logos use
   the gold wordmark, which reads richest on black.
   ========================================================================== */
footer .bbb-badge--horizontal {
  height: 34px !important;
  width: auto !important;
}

/* ===== PLEDGE 1% MEMBER MARK - sits as a centered row at the absolute
   bottom of the footer, on its own line below the legal copy. =====
   The "Member of" label and the inline placement in .footer-accred-inline
   were removed per Sammy. */
footer .footer-pledge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding-top: 0;
  width: 100%;
}
footer .footer-pledge-text {
  font-size: 13px;
  color: #0F0F0F !important;
  line-height: 1.6;
  letter-spacing: 0.03em;
  font-style: italic;
  white-space: nowrap;
}
footer .pledge1-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
footer .pledge1-link:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}
footer .pledge1-logo {
  height: 42px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
/* Text-mark fallback while the official Pledge 1% asset is being uploaded.
   Clean, original styling - not a recreation of the official mark. */
footer .pledge1-link--text {
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0F0F0F !important;
  padding: 6px 14px;
  border: 1.5px solid #0F0F0F;
  border-radius: 6px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
footer .pledge1-link--text .pledge1-one {
  display: inline-block;
  margin-left: 4px;
  font-weight: 800;
}
footer .pledge1-link--text .pledge1-pct {
  font-weight: 800;
}
footer .pledge1-link--text:hover {
  background: #0F0F0F;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* ===== HOW IT WORKS - strip the .tl-node chip frame =====
   The global icon-chip override at line ~4274 wraps .tl-node in a dark
   graphite plate with gold border + box-shadow (the "square outline"
   Sammy spotted). For the timeline we want JUST the inline gold SVG
   (the circle + numeral) - no plate. Resets every chip property the
   global override set, with !important to beat its !important rules. */
.tl-item .tl-node {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tl-item:hover .tl-node {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px); /* keep the small lift cue on hover */
}

/* ===== HERO push-down - header is now opaque white, not transparent ===== */
main > .hero,
main > section.hero,
.n1-hero {
  padding-top: 160px;
}
@media (max-width: 768px) {
  main > .hero,
  main > section.hero,
  .n1-hero {
    padding-top: 130px;
  }
}

/* =============================================================
   IA GOLD ICON TREATMENT (applied 2026-05-21 via /ia-gold-icon)
   =============================================================
   Strips the dark-chip-with-gold-border container from all
   site-wide icon classes and lets the icons float on their own
   with the polished IA goldShine stroke, a single tight halo,
   and a +25% size bump (22 -> 28px).

   Sammy approved this exact treatment on integrityagency.io
   audience + intel cards. See ~/.claude/skills/ia-gold-icon/.
   ============================================================= */
.tile-icon,
.pain-icon,
.auto-icon,
.vertical-icon,
.car-role-icon,
.tl-node,
.pri-tier-mark,
.pri-included-icon,
.n1-card-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

.tile-icon svg,
.pain-icon svg,
.auto-icon svg,
.vertical-icon svg,
.car-role-icon svg,
.pri-tier-mark svg,
.pri-included-icon svg,
.n1-card-icon svg {
  width: 28px !important;
  height: 28px !important;
  /* Polished IA gold gradient designed for STROKES - cream → warm amber, no
     dark midline. Gives the rich polished-metal richness of the verified
     badge without the dark band that erased fork handles / thermometer
     stems on the first pass. */
  stroke: url(#goldShineStroke) !important;
  fill: none !important;
  stroke-width: 1.75 !important;
  shape-rendering: geometricPrecision !important;
  filter: drop-shadow(0 0 6px rgba(244, 213, 114, 0.35)) !important;
  transition: filter 0.4s ease, transform 0.4s ease !important;
}

/* Hover - single tight halo intensifies + subtle scale pulse */
.tile:hover .tile-icon,
.tile.active .tile-icon,
.pain-card:hover .pain-icon,
.auto-card:hover .auto-icon,
.vertical:hover .vertical-icon,
.car-role:hover .car-role-icon,
.pri-tier-card:hover .pri-tier-mark,
.pri-included-card:hover .pri-included-icon,
.n1-card:hover .n1-card-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.tile:hover .tile-icon svg,
.tile.active .tile-icon svg,
.pain-card:hover .pain-icon svg,
.auto-card:hover .auto-icon svg,
.vertical:hover .vertical-icon svg,
.car-role:hover .car-role-icon svg,
.pri-tier-card:hover .pri-tier-mark svg,
.pri-included-card:hover .pri-included-icon svg,
.n1-card:hover .n1-card-icon svg {
  stroke: url(#goldShineStroke) !important;  /* polished gradient on hover too */
  filter: drop-shadow(0 0 10px rgba(244, 213, 114, 0.5)) !important;
  transform: scale(1.04) !important;
}

/* (IA Gold Icon treatment block earlier in this file at line 5998
   already covers .tile-icon, .pain-icon, .auto-icon, .vertical-icon,
   .car-role-icon, .tl-node, .pri-tier-mark, .pri-included-icon,
   .n1-card-icon - including hover state. No duplication needed here.) */

/* ==========================================================================
   MEGA-MENU NAV DROPDOWN (added 2026-05-29)
   Wide multi-column flyout with bold label + tagline description per item.
   Activated via .nav-dropdown--mega class on the <ul>. Lives alongside the
   classic single-column .nav-dropdown so per-item rollout is opt-in.
   Direction reference: ElevenLabs-style product mega-menu, IA gold + chrome
   black aesthetic.
   ========================================================================== */
.nav-links .nav-dropdown--mega {
  min-width: 720px;
  width: max-content;
  max-width: 920px;
  padding: 24px 26px 18px;
  display: flex;
  flex-direction: row;
  gap: 22px;
  background: #0a0a0a;
  border: 1px solid rgba(212, 168, 67, 0.45);
  border-radius: 14px;
  box-shadow:
    0 0 28px rgba(212, 168, 67, 0.18),
    0 0 60px rgba(212, 168, 67, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.72);
  flex-wrap: wrap;
}
.nav-links .nav-dropdown--mega.cols-3 {
  max-width: 1100px;
  min-width: 880px;
}
/* 3-col Platform menu: nudge right so the middle column (AI Workforce)
   sits directly under the "Platform" trigger word, not slightly left of it.
   The default translateX(-50%) centers the whole panel on the trigger; the
   extra positive offset shifts the panel right by ~one column width so the
   middle column heading lines up under "Platform". */
.nav-links .has-dropdown > .nav-dropdown--mega.cols-3 {
  transform: translateX(calc(-50% + 150px)) translateY(6px);
}
.nav-links .has-dropdown:hover > .nav-dropdown--mega.cols-3,
.nav-links .has-dropdown:focus-within > .nav-dropdown--mega.cols-3 {
  transform: translateX(calc(-50% + 150px)) translateY(0);
}
.nav-links .nav-dropdown--mega > li.mega-col {
  list-style: none;
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 260px;
}
.nav-links .nav-dropdown--mega > li.mega-col > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-links .nav-dropdown--mega .mega-col-head {
  padding: 0 14px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(244, 213, 114, 0.35);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #D4A843 0%, #F4D572 30%, #FFEDB3 50%, #F4D572 70%, #D4A843 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(244, 213, 114, 0.40)) drop-shadow(0 0 16px rgba(212, 168, 67, 0.22));
  pointer-events: none;
  list-style: none;
  display: block;
  line-height: 1.2;
}
.nav-links .nav-dropdown--mega .mega-item {
  list-style: none;
}
.nav-links .nav-dropdown--mega .mega-item a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 10px;
  white-space: normal;
  letter-spacing: 0;
  color: var(--text-1);
  position: relative;
  transition: background 0.22s var(--ease), transform 0.22s var(--ease);
}
.nav-links .nav-dropdown--mega .mega-item a::before {
  content: none;
}
.nav-links .nav-dropdown--mega .mega-item a:hover {
  background: rgba(212, 168, 67, 0.10);
  padding-left: 14px;
  transform: translateX(2px);
}
.nav-links .nav-dropdown--mega .mega-item .mega-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid rgba(212, 168, 67, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 8px rgba(212, 168, 67, 0.18);
  transition: all 0.25s var(--ease);
  margin-top: 1px;
}
.nav-links .nav-dropdown--mega .mega-item .mega-icon svg {
  width: 16px;
  height: 16px;
  stroke: #D4A843;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(244, 213, 114, 0.55));
}
.nav-links .nav-dropdown--mega .mega-item a:hover .mega-icon {
  border-color: rgba(244, 213, 114, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 14px rgba(244, 213, 114, 0.40),
    0 0 22px rgba(212, 168, 67, 0.22);
  transform: scale(1.08);
}
.nav-links .nav-dropdown--mega .mega-item .mega-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.nav-links .nav-dropdown--mega .mega-item .mega-label {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text-0);
  -webkit-text-fill-color: var(--text-0); /* pin rest fill white so hover restyles don't strand it transparent */
  transition: color 0.22s var(--ease);
}
.nav-links .nav-dropdown--mega .mega-item a:hover .mega-label {
  color: #FFEDB3;
}
.nav-links .nav-dropdown--mega .mega-item .mega-tagline {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: rgba(210, 218, 230, 0.95);
  -webkit-text-fill-color: rgba(210, 218, 230, 0.95);
  white-space: normal;
}
.nav-links .nav-dropdown--mega .mega-item .mega-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0, 229, 160, 0.14);
  border: 1px solid rgba(0, 229, 160, 0.45);
  color: #3BFFB6;
  vertical-align: middle;
}
.nav-links .nav-dropdown--mega .mega-foot {
  flex-basis: 100%;
  margin-top: 6px;
  padding: 14px 6px 4px;
  border-top: 1px solid rgba(212, 168, 67, 0.20);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}
.nav-links .nav-dropdown--mega .mega-foot-text {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}
/* Menu foot CTAs = same chrome CTA as the rest of the site (.hero-cta-chrome) */
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta.hero-cta-chrome,
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta {
  position: relative;
  display: inline-block !important;
  align-items: unset;
  gap: 0;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: none;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
/* Kill platinum text-clip + list-dot on chrome CTAs inside nav */
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta::before,
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta::after,
.nav-links a.hero-cta-chrome::before,
.nav-links a.hero-cta-chrome::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta .hero-cta-chrome-inner,
.nav-links a.hero-cta-chrome .hero-cta-chrome-inner {
  -webkit-text-fill-color: #0F0F0F !important;
  color: #0F0F0F !important;
  background: var(--cta-bg, linear-gradient(
    135deg,
    #FFF5D2 0%,
    #F4D572 22%,
    #D4A843 48%,
    #F4D572 74%,
    #B68A2E 100%
  )) !important;
  background-size: 260% 100% !important;
  background-position: 0% 50% !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  animation: cta-chrome-shimmer 4.5s ease-in-out infinite !important;
}
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta .hero-cta-chrome-text,
.nav-links a.hero-cta-chrome .hero-cta-chrome-text {
  -webkit-text-fill-color: #0F0F0F !important;
  color: #0F0F0F !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
}
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta:hover,
.nav-links a.hero-cta-chrome:hover {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.42));
  padding-left: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   TOOLKIT HERO BREATHING ROOM (2026-05-30)
   Per-page inline CSS on every calculator + playbook ships with cramped
   margin/padding that puts the eyebrow against the sticky nav. Override
   here so all 28 calc pages + 6 playbooks get the same air pocket.
   ========================================================================== */
.tool-shell {
  padding: 88px 32px 0 !important;
}
.tool-shell .tool-hero {
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 56px 0 48px !important;
}
.tool-shell .tool-eyebrow {
  margin: 0 0 44px !important;
  padding: 14px 0 !important;
  gap: 14px !important;
}
@media (max-width: 640px) {
  .tool-shell { padding: 60px 16px 0 !important; }
  .tool-shell .tool-hero { padding: 36px 0 28px !important; }
  .tool-shell .tool-eyebrow { margin-bottom: 28px !important; padding: 8px 0 !important; }
}

/* Playbook pages use .pb-shell + .pb-hero instead of tool-shell/tool-hero */
.pb-shell {
  padding-top: 88px !important;
}
.pb-shell .pb-hero {
  padding: 56px 0 48px !important;
}
@media (max-width: 640px) {
  .pb-shell { padding-top: 60px !important; }
  .pb-shell .pb-hero { padding: 36px 0 28px !important; }
}

/* ==========================================================================
   HERO BANNER WITH PIPELINE IMAGE (2026-05-30)
   Wraps .tool-hero to give it a full-bleed background image (the AI pipeline
   art: calls -> leads -> bookings -> revenue). Dark gradient overlay keeps
   text readable and tames the teal/purple. Edge fade blends into pure black
   page background at the bottom.
   ========================================================================== */
/* ---- Base full-bleed hero banner (for main.tool-shell pages: hub + calcs).
   The background image is supplied per-page via the --hero-bg-img custom
   property set by a .hero-banner--<theme> modifier. One ::before overlay,
   many swappable images. ---- */
.hero-banner {
  --hero-bg-img: url('/assets/hero-pipeline.jpg');
  position: relative;
  isolation: isolate;
  margin: -88px -32px 32px;   /* cancel .tool-shell padding so banner is full-bleed */
  padding: 108px 32px 28px;   /* restore visual breathing room inside the banner */
  overflow: hidden;
  border-bottom: 1px solid rgba(212, 168, 67, 0.20);
}
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Light overlay - images sit on a black canvas, so just a faint top tint
       for text readability + a soft fade-to-black bottom for a clean seam. */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.12) 35%,
      rgba(0, 0, 0, 0.28) 70%,
      rgba(0, 0, 0, 0.85) 94%,
      #000000 100%),
    var(--hero-bg-img) center / cover no-repeat;
  z-index: -1;
}
.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(100% - 1px), rgba(212, 168, 67, 0.30) calc(100% - 1px));
  z-index: -1;
}
.hero-banner .tool-hero {
  margin: 0 auto !important;
  padding: 0 !important;
}
/* Full-bleed hero content stays centered (industries pattern). 'main' prefix
   raises specificity above the global .tool-shell .tool-hero breathing-room
   rule. Covers playbooks that use .pb-hero as well as calc .tool-hero. */
main .hero-banner .tool-hero,
main .hero-banner .pb-hero {
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 940px !important;
  text-align: center !important;
  background: none !important;
}
main .hero-banner .pb-hero > *,
main .hero-banner .tool-hero > * {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
main .hero-banner .pb-meta-row,
main .hero-banner .pb-hero-meta,
main .hero-banner .pb-meta {
  justify-content: center !important;
}
@media (max-width: 640px) {
  .hero-banner {
    margin: -60px -16px 24px;
    padding: 76px 16px 24px;
  }
}

/* ---- Contained hero banner (for main.pb-shell playbooks, which carry the
   fixed TOC rail + 320px content offset, so a viewport full-bleed would
   collide with the rail). Rounded card within the content column. ---- */
.hero-banner--contained {
  --hero-bg-img: url('/assets/hero-pipeline.jpg');
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 30px 0 44px;          /* gap above so the box clears the header */
  max-width: 760px;             /* tighten: box hugs the copy, not full column */
  padding: 46px 44px 42px;
  border: 1px solid rgba(212, 168, 67, 0.24);
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(212, 168, 67, 0.08), 0 16px 50px rgba(0, 0, 0, 0.5);
  text-align: left;
}
.hero-banner--contained::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 90% at 30% 45%, rgba(0,0,0,0.32), rgba(0,0,0,0.60) 70%, rgba(0,0,0,0.76)),
    var(--hero-bg-img) center / cover no-repeat;
  z-index: -1;
}
/* Reset the inner hero + left-align everything to the box's left edge.
   'main' prefix raises specificity above the global .tool-shell .tool-hero
   breathing-room rule so this wins for tool-hero playbooks too. */
main .hero-banner--contained .pb-hero,
main .hero-banner--contained .tool-hero {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  max-width: none !important;
  text-align: left !important;
}
main .hero-banner--contained .pb-hero > *,
main .hero-banner--contained .tool-hero > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
/* Meta-chip rows + eyebrows align to the left edge */
.hero-banner--contained .pb-meta-row,
.hero-banner--contained .pb-hero-meta,
.hero-banner--contained .pb-meta,
.hero-banner--contained .feat-anchor-nav {
  justify-content: flex-start !important;
}
@media (max-width: 640px) {
  .hero-banner--contained { padding: 32px 22px 30px; border-radius: 12px; max-width: none; margin: 20px 0 32px; }
}

/* ---- Background image modifiers (swap --hero-bg-img only) ---- */
.hero-banner--pipeline       { --hero-bg-img: url('/assets/hero-pipeline.jpg'); }
.hero-banner--void-corners   { --hero-bg-img: url('/assets/hero-void-corners.jpg'); }
.hero-banner--gold-waves     { --hero-bg-img: url('/assets/hero-gold-waves.jpg'); }
.hero-banner--split-goldcyan { --hero-bg-img: url('/assets/hero-split-goldcyan.jpg'); }
.hero-banner--gold-teal      { --hero-bg-img: url('/assets/hero-gold-teal-traces.jpg'); }
.hero-banner--gold-lime      { --hero-bg-img: url('/assets/hero-gold-lime.jpg'); }
.hero-banner--framed         { --hero-bg-img: url('/assets/hero-framed.jpg'); }
.hero-banner--tier-n1        { --hero-bg-img: url('/assets/hero-tier-n1.jpg'); }
.hero-banner--tier-n2        { --hero-bg-img: url('/assets/hero-tier-n2.jpg'); }
.hero-banner--tier-n3        { --hero-bg-img: url('/assets/hero-tier-n3.jpg'); }
.hero-banner--tier-lite      { --hero-bg-img: url('/assets/hero-tier-lite.jpg'); }

/* ==========================================================================
   PRICING TIER CARD BACKDROPS (2026-05-31)
   Each tier card (#n1/#n2/#n3) gets its tier-colored pipeline image as a
   heavily-darkened inset layer behind the content. Inset 14px so the card's
   chrome L-bracket corners (12px) still read around it. z-index 0 sits above
   the card's own painted background but below content (z-index 1).
   ========================================================================== */
.pri-tier-card > .pri-tier-bg {
  position: absolute !important;
  inset: 14px;
  z-index: 0 !important;
  border-radius: 10px;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
}
#n1.pri-tier-card > .pri-tier-bg {
  background-image: linear-gradient(rgba(8,8,11,0.74), rgba(8,8,11,0.86)), url('/assets/hero-tier-n1.jpg');
}
#n2.pri-tier-card > .pri-tier-bg {
  background-image: linear-gradient(rgba(8,8,11,0.74), rgba(8,8,11,0.86)), url('/assets/hero-tier-n2.jpg');
}
#n3.pri-tier-card > .pri-tier-bg {
  background-image: linear-gradient(rgba(8,8,11,0.74), rgba(8,8,11,0.86)), url('/assets/hero-tier-n3.jpg');
}

/* ==========================================================================
   PLAYBOOK STICKY SIDEBAR TOC (2026-05-30)
   Each playbook ships with a centered "IN THIS PLAYBOOK" card. Convert
   that card into a fixed left-rail sidebar on desktop. Mobile keeps the
   centered card untouched. Six playbooks use 3 different class names
   (.pb-toc, .toc-panel, .toc-wrap) so we target all three.
   ========================================================================== */
@media (min-width: 1100px) {
  /* ---- Two-column layout BELOW a full-width hero (industries pattern):
     sticky sidebar rail (col 1) + content copy (col 2). ---- */
  .pb-layout {
    display: flex;
    align-items: flex-start;
    gap: 46px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .pb-colmain { flex: 1 1 auto; min-width: 0; }
  .pb-layout > .pb-toc,
  .pb-layout > .toc-panel,
  .pb-layout > .toc-wrap {
    position: sticky !important;
    top: 96px;
    flex: 0 0 240px;
    width: 240px;
    overflow: visible !important;
    align-self: flex-start;
    margin: 0 !important;
    padding: 0 8px 0 2px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ---- Eyebrow title with trailing hairline ---- */
  .pb-toc-title,
  .pb-toc-head,
  .pb-toc h3,
  .toc-head,
  .toc-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: rgba(244, 213, 114, 0.90) !important;
    margin: 0 0 12px !important;
    padding: 0 0 0 2px !important;
    border: none !important;
  }
  .pb-toc-title::after,
  .pb-toc-head::after,
  .pb-toc h3::after,
  .toc-head::after,
  .toc-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 168, 67, 0.45), transparent);
  }

  /* ---- List = the reading rail track ---- */
  .pb-toc ol,
  .pb-toc ul,
  .pb-toc-list,
  .toc-list,
  .toc-grid {
    position: relative !important;
    display: block !important;
    columns: 1 !important;
    column-count: 1 !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 2px 0 2px 22px !important;
    list-style: none !important;
  }
  /* dim full-height track */
  .pb-toc ol::before,
  .pb-toc ul::before,
  .pb-toc-list::before,
  .toc-list::before,
  .toc-grid::before {
    content: '' !important;
    position: absolute !important;
    left: 4px; top: 6px; bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: rgba(212, 168, 67, 0.16) !important;
  }
  /* gold progress fill - height driven by JS via --toc-fill (px) */
  .pb-toc ol::after,
  .pb-toc ul::after,
  .pb-toc-list::after,
  .toc-list::after,
  .toc-grid::after {
    content: '' !important;
    position: absolute !important;
    left: 4px; top: 6px;
    width: 2px;
    height: var(--toc-fill, 0px);
    border-radius: 2px;
    background: linear-gradient(180deg, #FFEDB3, #F4D572 45%, #D4A843) !important;
    box-shadow: 0 0 8px rgba(244, 213, 114, 0.55), 0 0 16px rgba(212, 168, 67, 0.30);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ---- Items + rail dots ---- */
  .pb-toc li,
  .pb-toc-list li,
  .toc-list li,
  .toc-wrap li,
  .toc-grid > a,
  .toc-grid .toc-link {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    border: none !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  .pb-toc li::before,
  .pb-toc-list li::before,
  .toc-list li::before,
  .toc-grid > a::before,
  .toc-grid .toc-link::before {
    content: '' !important;
    position: absolute !important;
    left: -19px;
    top: 11px;
    /* width/height + min/max reset: pages carry an inline min-width:28px from the
       old counter-number style, which was stretching this dot into a 28px ellipse
       that overlapped the link text. Force a true 7px circle. */
    width: 7px !important; height: 7px !important;
    min-width: 0 !important; max-width: none !important;
    border-radius: 50% !important;
    background: #0b0b0b !important;
    box-shadow: 0 0 0 1px rgba(212, 168, 67, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
  }
  .pb-toc li.active::before,
  .pb-toc-list li.active::before,
  .toc-list li.active::before,
  .toc-grid > a.active::before,
  .toc-grid .toc-link.active::before {
    background: #F4D572 !important;
    box-shadow:
      0 0 0 1px rgba(244, 213, 114, 0.90),
      0 0 10px rgba(244, 213, 114, 0.70),
      0 0 18px rgba(212, 168, 67, 0.40) !important;
    transform: scale(1.25);
  }

  /* ---- Links (dimmed at rest, current chapter bright like a book) ---- */
  .pb-toc a,
  .toc-list a,
  .toc-link,
  .pb-toc-list a,
  .toc-wrap a {
    display: block !important;
    color: rgba(229, 235, 243, 0.55) !important;
    text-decoration: none !important;
    letter-spacing: 0.005em;
    transition: color 0.25s ease, transform 0.25s ease !important;
  }
  .pb-toc a:hover,
  .toc-list a:hover,
  .toc-link:hover,
  .pb-toc-list a:hover,
  .toc-wrap a:hover {
    color: #FFEDB3 !important;
    transform: translateX(2px);
  }
  .pb-toc a.active,
  .toc-list a.active,
  .toc-link.active,
  .pb-toc-list a.active,
  .toc-wrap a.active,
  .pb-toc li.active a,
  .toc-list li.active a,
  .pb-toc-list li.active a {
    color: #F4D572 !important;
    font-weight: 600 !important;
  }

  /* ---- Number prefix ---- */
  .pb-toc .num,
  .toc-num {
    color: rgba(212, 168, 67, 0.65) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    margin-right: 9px !important;
    font-size: 10.5px !important;
    transition: color 0.25s ease;
  }
  .pb-toc li.active .num,
  .pb-toc a.active .num,
  .toc-list li.active .toc-num,
  .toc-link.active .toc-num,
  .toc-grid > a.active .toc-num {
    color: #F4D572 !important;
  }
  /* Hide the dental playbook's horizontal pb-jumpbar - the sidebar replaces it */
  .pb-jumpbar { display: none !important; }
}

/* Section anchor targets get scroll-margin so the sticky nav doesn't
   hide the heading when jumping. Applies all viewports. */
section[id],
.pb-section[id] {
  scroll-margin-top: 90px;
}

/* ==========================================================================
   GOLD PINSTRIPES (2026-05-30)
   Luxury chalk-stripe overlay running vertically down the viewport.
   Fixed position so the pattern stays put as you scroll (the "fabric"
   effect). Site-wide, layered above the starfield (z-1) but below all
   content (z-2+). Subtle on purpose: 0.045 alpha gold, 120px spacing.
   ========================================================================== */
/* Scoped to toolkit pages only - homepage, pricing, features, n1, ai-agents
   stay clean. Toolkit pages are identified by their main.tool-shell or
   main.pb-shell container. */
body:has(main.tool-shell)::after,
body:has(main.pb-shell)::after {
  display: none !important;
}
/* Pinstripe off (toggled by guilloche.js mode) */
body.no-pinstripe:has(main.tool-shell)::after,
body.no-pinstripe:has(main.pb-shell)::after { display: none !important; }

/* ==========================================================================
   GUILLOCHE ENGRAVING LAYER (prototype, 2026-05-31)
   Banknote line-art ground in faint IA gold + a brighter cursor-revealed
   copy. Layers injected by /assets/guilloche.js. Press G to A/B vs pinstripe.
   ========================================================================== */
.guilloche-base,
.guilloche-reveal {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 240px 240px;
}
.guilloche-base { opacity: 0.05; }
.guilloche-reveal {
  opacity: 0.30;
  --gx: 50%;
  --gy: 50%;
  -webkit-mask: radial-gradient(circle 250px at var(--gx) var(--gy), #000 0%, rgba(0,0,0,0.5) 46%, transparent 72%);
          mask: radial-gradient(circle 250px at var(--gx) var(--gy), #000 0%, rgba(0,0,0,0.5) 46%, transparent 72%);
}
#tex-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(10, 10, 10, 0.94);
  border: 1px solid rgba(212, 168, 67, 0.42);
  color: #F4D572;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  box-shadow: 0 0 18px rgba(212, 168, 67, 0.25), 0 8px 30px rgba(0, 0, 0, 0.6);
}
#tex-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   FIRM + SHINY CALCULATOR CARDS (2026-05-31)
   Against a textured background (guilloche / circuit / etc.) the calc cards
   need to read as solid foreground panels, not soft glass. Solid opaque body,
   gold-tinted border, lift shadow, chrome top highlight + the home-page
   diagonal champagne sweep on hover. `main.tool-shell` prefix wins over each
   page's inline card CSS without needing !important.
   ========================================================================== */
main.tool-shell .input-card,
main.tool-shell .metric-card,
main.tool-shell .chart-panel,
main.tool-shell .bench-grid,
main.tool-shell .sensitivity-grid,
main.tool-shell .tips-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #171717 0%, #0c0c0c 100%);
  border: 1px solid rgba(212, 168, 67, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 12px 38px rgba(0, 0, 0, 0.55);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
}
/* diagonal champagne sweep, behind content (z-index -1), flies across on hover */
main.tool-shell .input-card::after,
main.tool-shell .metric-card::after,
main.tool-shell .chart-panel::after,
main.tool-shell .bench-grid::after,
main.tool-shell .sensitivity-grid::after,
main.tool-shell .tips-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(244, 232, 206, 0.13) 50%, transparent 62%);
  background-size: 220% 100%;
  background-position: -100% 0;
  transition: background-position 1100ms cubic-bezier(0.16,1,0.3,1);
}
main.tool-shell .input-card:hover,
main.tool-shell .metric-card:hover,
main.tool-shell .chart-panel:hover,
main.tool-shell .bench-grid:hover,
main.tool-shell .sensitivity-grid:hover,
main.tool-shell .tips-band:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 213, 114, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(212, 168, 67, 0.18),
    0 0 24px rgba(212, 168, 67, 0.18),
    0 20px 54px rgba(0, 0, 0, 0.6);
}
main.tool-shell .input-card:hover::after,
main.tool-shell .metric-card:hover::after,
main.tool-shell .chart-panel:hover::after,
main.tool-shell .bench-grid:hover::after,
main.tool-shell .sensitivity-grid:hover::after,
main.tool-shell .tips-band:hover::after {
  background-position: 200% 0;
}

/* ==========================================================================
   TEXTURE DEMO LAYERS (prototype A/B, 2026-05-31)
   Shared layer scaffolding for the 5 alternate background directions.
   Each demo page loads exactly one tex-*.js module.
   ========================================================================== */
.tex-base, .tex-reveal {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
.tex-base { opacity: 0.06; }
.tex-reveal {
  opacity: 0.32; --gx: 50%; --gy: 50%;
  -webkit-mask: radial-gradient(circle 250px at var(--gx) var(--gy), #000 0%, rgba(0,0,0,0.5) 46%, transparent 72%);
          mask: radial-gradient(circle 250px at var(--gx) var(--gy), #000 0%, rgba(0,0,0,0.5) 46%, transparent 72%);
}
.tex-tile  { background-repeat: repeat; }
.tex-cover { background-repeat: no-repeat; background-position: center; background-size: cover; }

.tex-label {
  position: fixed; left: 18px; bottom: 18px; z-index: 9999; pointer-events: none;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #F4D572;
  background: rgba(10,10,10,0.9); border: 1px solid rgba(212,168,67,0.42);
  padding: 7px 14px; border-radius: 999px; box-shadow: 0 0 14px rgba(212,168,67,0.22);
}

/* Scanline sweep */
.tex-scanbar {
  position: fixed; left: 0; right: 0; height: 150px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(244,213,114,0.09) 45%, rgba(244,213,114,0.16) 50%, rgba(244,213,114,0.09) 55%, transparent);
  animation: tex-sweep 16s linear infinite;
}
@keyframes tex-sweep { 0% { transform: translateY(-170px); } 100% { transform: translateY(100vh); } }
.tex-scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6;
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(244,213,114,0.016) 3px, rgba(244,213,114,0.016) 4px);
}
@media (prefers-reduced-motion: reduce) { .tex-scanbar { animation: none; opacity: 0; } }

/* Data-stream gutters */
.tex-stream {
  position: fixed; top: 0; bottom: 0; width: 132px; z-index: 1; pointer-events: none; overflow: hidden;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.85;
  color: rgba(244,213,114,0.16); letter-spacing: 0.10em;
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.tex-stream--l { left: 0; text-align: left; padding-left: 12px; }
.tex-stream--r { right: 0; text-align: right; padding-right: 12px; }
.tex-stream .col { white-space: pre; animation: tex-rise linear infinite; }
@keyframes tex-rise { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (max-width: 1000px) { .tex-stream { display: none; } }
@media (prefers-reduced-motion: reduce) { .tex-stream .col { animation: none; } }

/* ==========================================================================
   PRICING FAQ STRUCTURAL RULES (verbatim from pricing/index.html inline,
   promoted to /styles.css so any page can use <div class="pri-faq"> +
   <details class="pri-faq-item">. The JW-glass chrome shell (L-brackets,
   diagonal sweep, 3D tilt) is already in the bundle above at line ~1779.
   ========================================================================== */
.pri-faq {
  max-width: 1080px;
  margin: 0 auto 72px;
  display: grid;
  gap: 12px;
  padding: 0 24px;
}
.pri-faq-item {
  position: relative;
}
.pri-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-0, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
.pri-faq-item:hover summary { color: #FFFFFF; }
.pri-faq-item summary::-webkit-details-marker { display: none; }
.pri-faq-item summary::marker { display: none; content: ''; }
.pri-faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(180deg, #1F1F1F 0%, #0E0E0E 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 3px 10px rgba(0, 0, 0, 0.45);
  transition: all 0.4s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.pri-faq-icon::before,
.pri-faq-icon::after {
  content: '';
  position: absolute;
  background: #EAEAEA;
  border-radius: 1px;
  transition: transform 0.35s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity 0.35s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              background 0.3s ease;
}
.pri-faq-icon::before { width: 12px; height: 1.6px; }
.pri-faq-icon::after  { width: 1.6px; height: 12px; }
.pri-faq-item:hover .pri-faq-icon {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 5px 14px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(212, 168, 67, 0.16);
  transform: rotate(90deg);
}
.pri-faq-item:hover .pri-faq-icon::before,
.pri-faq-item:hover .pri-faq-icon::after { background: #FFFFFF; }
.pri-faq-item[open] .pri-faq-icon {
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 5px 14px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(212, 168, 67, 0.20);
  transform: rotate(180deg);
}
.pri-faq-item[open] .pri-faq-icon::after {
  transform: rotate(90deg) scaleY(0);
  opacity: 0;
}
.pri-faq-body {
  padding: 0 24px 22px;
  font-size: 14px;
  color: var(--text-3, #B0B8C4);
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.pri-faq-body p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: inherit;
}
.pri-faq-body p:last-child { margin-bottom: 0; }
.pri-faq-body code {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(212, 168, 67, 0.10);
  border: 1px solid rgba(212, 168, 67, 0.25);
  padding: 1px 6px;
  border-radius: 4px;
  color: #FFEDB3;
  font-size: 13px;
}
@media (max-width: 640px) {
  .pri-faq { padding: 0 14px; }
  .pri-faq-item summary { padding: 16px 18px; font-size: 14.5px; }
  .pri-faq-body { padding: 0 18px 18px; }
}

/* ==========================================================================
   TOOLKIT FAQ - ultra-tight list pattern (2026-05-30, v2 tightened)
   Overrides the per-page inline boxed-card FAQ. Drop padding to ~12px,
   kill the hover/open bg tints, defensive !important on every layout
   property so nothing else can bleed in height.
   ========================================================================== */
.faq-section {
  max-width: 1080px !important;
  margin: 0 auto 72px !important;
  padding: 0 24px;
}
/* Match the unlock-panel (lead capture) to the same 1080px rhythm
   as input grids, chart panels, benchmark bars, sensitivity, tips */
.unlock-panel {
  max-width: 1080px !important;
}
.faq-section h2 {
  font-size: clamp(20px, 2.2vw, 24px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 18px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  text-align: center !important;
}
.faq-section .faq-item {
  display: block !important;
  padding: 14px 10px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer;
  min-height: 0 !important;
  transition: border-color 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.faq-section .faq-item:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.faq-section .faq-item:hover {
  background: transparent !important;
  border-bottom-color: rgba(212, 168, 67, 0.30) !important;
}
.faq-section .faq-item.open {
  background: transparent !important;
  border-bottom-color: rgba(212, 168, 67, 0.32) !important;
}
.faq-section .faq-q {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(241, 245, 249, 0.90) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
}
.faq-section .faq-item:hover .faq-q,
.faq-section .faq-item.open .faq-q {
  color: #FFFFFF !important;
}
.faq-section .faq-toggle {
  font-family: 'JetBrains Mono', monospace !important;
  color: rgba(212, 168, 67, 0.60) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              color 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  line-height: 1 !important;
}
.faq-section .faq-item:hover .faq-toggle {
  color: #D4A843 !important;
}
.faq-section .faq-item.open .faq-toggle {
  color: #F4D572 !important;
  transform: rotate(45deg);
}
.faq-section .faq-a {
  display: block !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  transition: max-height 0.42s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              padding-top 0.32s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity 0.32s ease;
}
.faq-section .faq-item[open] .faq-a {
  max-height: 800px !important;
  padding: 10px 28px 24px !important;
  opacity: 1;
}
.faq-section .faq-a p {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  color: rgba(176, 184, 196, 0.92) !important;
  max-width: 920px;
  margin: 0;
}
.faq-section .faq-a p + p {
  margin-top: 8px;
}
.faq-section .faq-a code {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(212, 168, 67, 0.08) !important;
  border: 1px solid rgba(212, 168, 67, 0.22) !important;
  padding: 1px 6px;
  border-radius: 4px;
  color: #FFEDB3 !important;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .faq-section { padding: 0 4px; }
  .faq-section .faq-q { font-size: 13.5px !important; }
  .faq-section .faq-item { padding: 11px 2px !important; }
}

/* Mega-menu mobile collapse: stack columns vertically on narrow viewports */
@media (max-width: 960px) {
  .nav-links .nav-dropdown--mega,
  .nav-links .nav-dropdown--mega.cols-3 {
    flex-direction: column;
    min-width: auto;
    max-width: 100%;
    padding: 14px 10px;
    gap: 10px;
  }
  .nav-links .nav-dropdown--mega > li.mega-col {
    min-width: 0;
  }
  .nav-links .nav-dropdown--mega .mega-col-head {
    margin-top: 6px;
  }
  .nav-links .nav-dropdown--mega .mega-foot {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
  }
  .nav-links .nav-dropdown--mega .mega-foot .mega-foot-text,
  .nav-links .nav-dropdown--mega .mega-foot .mega-foot-stores,
  .nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta {
    grid-column: 1 !important; justify-self: center !important;
  }
}

/* ==========================================================================
   HOMEPAGE DIAGNOSTIC HOOK (2026-05-31)
   URL-in, mini diagnostic out, email opt-in for the full report.
   ========================================================================== */
.diagnostic-hook {
  position: relative;
  padding: 44px 0 78px;
  isolation: isolate;
  background: transparent !important;
}
/* Kill grey/tint plate behind AI chat demo — starfield only */
.diagnostic-hook::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
.diagnostic-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  justify-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.diagnostic-copy {
  padding-top: 0;
  min-width: 0;
  text-align: center;
}
.diagnostic-copy h2 {
  margin: 22px 0 18px;
  max-width: 820px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 650;
  color: var(--text-0);
  letter-spacing: 0;
}
.diagnostic-copy p {
  max-width: 700px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(215, 221, 232, 0.88);
  letter-spacing: 0;
}
.diagnostic-hook .micro-label,
.diagnostic-hook .micro-label .label-text {
  max-width: 100%;
  letter-spacing: 0 !important;
  white-space: normal;
}
.diagnostic-hook .micro-label .label-text {
  padding: 0 !important;
}
.diagnostic-hook .micro-label .label-text::before,
.diagnostic-hook .micro-label .label-text::after {
  display: none !important;
}
.diagnostic-hook .micro-label::before {
  /* gold ring only — no flanking spacer */
  margin: 0 !important;
}
.diagnostic-hook .micro-label::after {
  /* keep chrome inner frame — only kill old flanking spacer */
  margin: 0 !important;
}
.diagnostic-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  max-width: 760px;
}
.diagnostic-prompts span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(244, 213, 114, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(241, 245, 249, 0.88);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
}
.diagnostic-panel {
  position: relative;
  width: min(100%, 760px);
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) top 14px left 14px / 30px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) top 14px left 14px / 1px 30px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) top 14px right 14px / 30px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) top 14px right 14px / 1px 30px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) bottom 14px left 14px / 30px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) bottom 14px left 14px / 1px 30px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) bottom 14px right 14px / 30px 1px no-repeat,
    linear-gradient(rgba(212, 168, 67, 0.62), rgba(212, 168, 67, 0.62)) bottom 14px right 14px / 1px 30px no-repeat,
    linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(6, 6, 6, 0.98));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 24px 70px rgba(0, 0, 0, 0.56),
    0 0 42px rgba(212, 168, 67, 0.10);
}
.diagnostic-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(244, 213, 114, 0.16) 50%, transparent 66%);
  background-size: 240% 100%;
  background-position: -110% 0;
  transition: background-position 1100ms var(--ease);
}
.diagnostic-panel:hover::before,
.diagnostic-panel:focus-within::before {
  background-position: 210% 0;
}
.diagnostic-panel > * {
  position: relative;
  z-index: 1;
}
.diagnostic-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}
.diagnostic-kicker,
.diagnostic-score-label,
.diagnostic-url-form label,
.diagnostic-optin-grid span {
  display: block;
  margin-bottom: 8px;
  color: rgba(244, 213, 114, 0.82);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0;
}
.diagnostic-panel h3,
.diagnostic-optin-head h4 {
  margin: 0;
  color: var(--text-0);
  font-size: 24px;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: 0;
}
.diagnostic-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(244, 213, 114, 0.34);
  border-radius: 999px;
  color: rgba(241, 245, 249, 0.92);
  background: rgba(244, 213, 114, 0.08);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}
.diagnostic-url-form {
  margin: 0;
}
.diagnostic-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
}
.diagnostic-input-row input,
.diagnostic-optin-grid input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-0);
  padding: 0 14px;
  font: 500 15px/1.2 'Inter', sans-serif;
  letter-spacing: 0;
  outline: none;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease);
}
.diagnostic-input-row input::placeholder,
.diagnostic-optin-grid input::placeholder {
  color: rgba(176, 184, 196, 0.56);
}
.diagnostic-input-row input:focus,
.diagnostic-optin-grid input:focus {
  border-color: rgba(244, 213, 114, 0.68);
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 0 0 3px rgba(244, 213, 114, 0.10);
}
.diagnostic-input-row button,
.diagnostic-full-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  color: #0F0F0F;
  background: linear-gradient(135deg, #F4D572 0%, #FFFFFF 45%, #D4A843 100%);
  background-size: 180% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 18px rgba(212, 168, 67, 0.24);
  font: 800 13px/1 'Inter', sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-position 0.35s var(--ease), opacity 0.2s var(--ease);
}
.diagnostic-input-row button:hover,
.diagnostic-full-btn:hover {
  transform: translateY(-1px);
  background-position: 100% 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 0 26px rgba(244, 213, 114, 0.36);
}
.diagnostic-input-row button:disabled,
.diagnostic-full-btn:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}
.diagnostic-error,
.diagnostic-form-note {
  min-height: 20px;
  margin: 10px 0 0;
  color: rgba(241, 245, 249, 0.76);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
}
.diagnostic-error,
.diagnostic-form-note[data-state="error"] {
  color: #FFD8D8;
}
.diagnostic-form-note[data-state="success"] {
  color: #EAF8D6;
}
.diagnostic-form-note[data-state="pending"] {
  color: rgba(244, 213, 114, 0.92);
}
.diagnostic-preview {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.diagnostic-preview[hidden] {
  display: none;
}
.diagnostic-score-card {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.diagnostic-score-card strong {
  display: block;
  color: var(--text-0);
  font-size: 34px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0;
}
.diagnostic-score-card p {
  margin: 0;
  color: rgba(215, 221, 232, 0.86);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
}
.diagnostic-findings {
  display: grid;
  gap: 0;
  margin-top: 6px;
}
.diagnostic-finding {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.diagnostic-finding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
}
.diagnostic-finding strong {
  min-width: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: 0;
}
.diagnostic-finding span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 64px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(244, 213, 114, 0.10);
  color: rgba(244, 213, 114, 0.95);
  font-size: 11px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0;
}
.diagnostic-finding span[data-level="high"] {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.diagnostic-finding p {
  margin: 0;
  color: rgba(176, 184, 196, 0.90);
  font-size: 13.5px;
  line-height: 1.62;
  letter-spacing: 0;
}
.diagnostic-optin-form {
  margin-top: 22px;
}
.diagnostic-optin-head {
  margin-bottom: 16px;
}
.diagnostic-optin-head p {
  margin: 8px 0 0;
  color: rgba(215, 221, 232, 0.82);
  font-size: 13.5px;
  line-height: 1.62;
  letter-spacing: 0;
}
.diagnostic-optin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.diagnostic-optin-grid label {
  min-width: 0;
}
.diagnostic-full-btn {
  width: 100%;
}
@media (max-width: 960px) {
  .diagnostic-hook {
    padding: 38px 0 64px;
  }
  .diagnostic-shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .diagnostic-copy {
    padding-top: 0;
    text-align: center;
  }
  .diagnostic-copy h2,
  .diagnostic-copy p,
  .diagnostic-prompts {
    margin-left: auto;
    margin-right: auto;
  }
  .diagnostic-copy h2 {
    font-size: 36px;
  }
  .diagnostic-prompts {
    justify-content: center;
  }
}
@media (max-width: 720px) {
  body.diagnostic-in-view .floating-robot {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .diagnostic-panel {
    padding: 22px;
  }
  .diagnostic-panel-head,
  .diagnostic-score-card,
  .diagnostic-optin-grid {
    grid-template-columns: 1fr;
  }
  .diagnostic-panel-head {
    display: grid;
  }
  .diagnostic-status {
    width: fit-content;
  }
  .diagnostic-input-row {
    grid-template-columns: 1fr;
  }
  .diagnostic-input-row button {
    width: 100%;
  }
  .diagnostic-copy h2 {
    font-size: 30px;
  }
  .diagnostic-copy p {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .diagnostic-hook {
    padding: 30px 0 52px;
  }
  .diagnostic-panel {
    padding: 20px 16px;
  }
  .diagnostic-copy h2 {
    font-size: 26px;
  }
  .diagnostic-prompts {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ===== Luxury Platinum header links (single tone) =====
   One polished platinum tone (tight light-medium silver, no dark break) so it
   stays uniform and shows on BOTH white and black. Subtle top sheen keeps the
   metal pop; a fine dark edge gives definition on white instead of a glow. */
/* Exclude chrome CTAs, store badges, and mega foot CTAs from platinum text-clip */
.nav-links a:not(.btn):not(.nav-cta):not(.hero-cta-chrome):not(.mega-foot-cta):not(.store-badge) {
  background: linear-gradient(180deg, #FFFFFF 0%, #EAEEF4 40%, #C4CCD8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12));
  transition: filter 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-links a:not(.btn):not(.nav-cta):not(.hero-cta-chrome):not(.mega-foot-cta):not(.store-badge):hover,
.nav-links .has-dropdown:hover > a:not(.btn):not(.hero-cta-chrome):not(.mega-foot-cta),
.nav-links .has-dropdown:focus-within > a:not(.btn):not(.hero-cta-chrome):not(.mega-foot-cta) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 45%, #DCE2EB 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.22));
}

/* ============================================================
   NIRVANI GOLD STANDARD (locked 2026-06-04)
   The rich, emissive 24k gold from .founder-note-name span.
   Use .ia-gold-text on any gold heading / wordmark / numeral.
   ============================================================ */
:root {
  --ia-gold-24k: linear-gradient(180deg,
    #FFF7CD 0%, #FDE58C 12%, #D4A843 33%, #C89637 47%, #AF7A26 50%,
    #B68A2E 54%, #D4A843 68%, #B68A2E 84%, #9E6E26 96%, #76501C 100%);
}
.ia-gold-text {
  background: var(--ia-gold-24k);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter:
    drop-shadow(0 0 0.5px rgba(255, 237, 179, 0.6))
    drop-shadow(0 0 3px rgba(244, 213, 114, 0.4))
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}
.ia-gold-text--flat { background: none; -webkit-text-fill-color: #E6B422; color: #E6B422; filter: none; }

/* ============================================================
   GUILLOCHE TEXTURE ON BLACK AREAS ONLY (2026-06-04)
   Fixed layer at z-index:0 - sits BEHIND every section (which are
   z-index:1). Transparent dark sections (hero, diagnostic, etc.)
   reveal it; opaque white bands cover it. So it only shows on black.
   ============================================================ */
body::before {
  display: none !important;
}

/* ============================================================
   SECTION-HEAD BANDS - DARK (reverted to IA roots, 2026-06-09)
   The site-wide "white bands" override was removed so .section-head /
   .cluster-header / .integrations-head inherit the native dark theme
   (black background, white/chrome text, gold accents) on every page.
   ============================================================ */

/* ============================================================
   MOBILE GLOBAL (ongoing) - overflow, type, safe areas
   ============================================================ */
html, body {
  max-width: 100%;
}
body {
  overflow-x: clip;
}
@media (max-width: 960px) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  section {
    padding-left: 0;
    padding-right: 0;
  }
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .proof-grid {
    gap: 18px !important;
  }
}
@media (max-width: 560px) {
  .tile-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ctas .hero-cta-chrome,
  .hero-ctas .hero-cta-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Single Strategize under quote: keep chrome proportions, centered (not full-bleed stretch) */
  .hero-centered .hero-ctas--single {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-centered .hero-ctas--single .hero-cta-chrome {
    width: auto;
    max-width: min(100%, 320px);
  }
  .hero-centered .hero-ctas--single .hero-cta-chrome-inner {
    width: auto;
    padding: 15px 32px;
    font-size: 12px;
    letter-spacing: 0.2em;
    box-sizing: border-box;
  }
}

/* ============================================================
   MOBILE HEADER FIT (phones) - 2026-06-05
   On phones the logo + STRATEGIZE CTA + hamburger packed tight with
   no gap (logo glow bled into the button). Shrink the logo, trim the
   side padding, tame the glow, and slim the CTA so it all breathes.
   ============================================================ */
@media (max-width: 600px) {
  header.nav .nav-inner {
    padding: 11px max(12px, env(safe-area-inset-right)) 11px max(12px, env(safe-area-inset-left));
    gap: 6px;
    justify-content: flex-start !important;
  }
  header.nav .nav-inner > a.logo {
    margin-right: auto;
  }
  header.nav .logo-img {
    height: 36px; /* trim so lang toggle clears wordmark with air */
    max-width: min(42vw, 150px);
    width: auto;
    object-fit: contain;
    filter:
      drop-shadow(0 0 1px rgba(255, 237, 179, 0.5))
      drop-shadow(0 0 8px rgba(212, 168, 67, 0.22));
  }
  .nav-inner .hero-cta-chrome.is-nav .hero-cta-chrome-text {
    font-size: 11.5px;
    letter-spacing: 0.10em;
  }
  .nav-inner .hero-cta-chrome.is-nav .hero-cta-chrome-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Mobile: wide data tables scroll within the viewport instead of being
   clipped by body overflow-x:hidden (the playbook ROI table was cut off). */
@media (max-width: 700px) {
  .roi-table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   IA MIRROR (2026-06-09) - Nirvani adopts Integrity Agency's typography,
   gold-gloss, header polish, and centered footer so it reads as IA's child.
   ========================================================================== */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/cormorant-garamond-v21-latin-700italic.woff2') format('woff2'); }

:root {
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --gold-gloss: linear-gradient(180deg, #FFF7CD 0%, #FDE58C 12%, #F0C85F 33%, #C89637 47%, #AF7A26 50%, #D2A03E 54%, #F2CA64 68%, #D2A03C 84%, #9E6E26 96%, #76501C 100%);
}

/* Headings adopt the IA serif (Cormorant Garamond, weight 500). */
h1, h2, h3,
.cluster-title,
.section-head h2, .solution-intro h2, .final-cta h2,
.hero-centered h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.1;
}

/* IA italic gold-gloss emphasis on accent words / <em> inside headings. */
h1 em, h2 em, h3 em,
.hero-centered h1 .accent-text,
.hero-centered h1 .accent-text .word,
.hero-centered h1 .accent-text .word-inner {
  font-style: italic !important;
  font-weight: 500 !important;
  background: var(--gold-gloss) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---- Header polish (Fortune 500 crisp): tighten + calm carets + crisp CTA ---- */
header.nav .nav-inner { padding: 11px 32px !important; }
header.nav.scrolled .nav-inner { padding: 9px 32px !important; }
.nav-caret, header.nav .nav-caret {
  animation: none !important;
  text-shadow: none !important;
  color: rgba(240, 200, 95, 0.5) !important;
}
header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-inner { padding-top: 9px !important; padding-bottom: 9px !important; }
header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-text { font-weight: 700 !important; letter-spacing: 0.14em !important; }

/* ---- Footer mirrors IA: centered editorial column (tightened 2026-08-05) ---- */
footer .footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
footer .footer-brand-link { display: inline-block; line-height: 0; }
footer .footer-logo { height: 42px; width: auto; display: block; }
footer .footer-tagline {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px;
  color: var(--text-1); margin: 0; letter-spacing: 0.01em;
}
footer .footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 0; }
footer .footer-nav a {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; transition: color .2s ease;
}
footer .footer-nav a:hover {
  background: var(--gold-gloss); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
footer .footer-parent { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 0; }
footer .footer-parent-text { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
footer .footer-address-line { font-size: 12.5px; color: var(--text-2); margin: 0; line-height: 1.4; }
footer .footer-address-line a { color: var(--text-2); text-decoration: none; }
footer .footer-pledge-row { display: flex; justify-content: center; margin: 0; padding-top: 0; }
footer .footer-pledge-row .pledge1-logo { height: 40px; width: auto; opacity: 0.85; }
footer .footer-legal { font-size: 11px; color: var(--text-3); margin: 0; line-height: 1.45; }
footer .footer-legal a { color: var(--text-3); text-decoration: none; }
footer .footer-legal a:hover, footer .footer-address-line a:hover { color: #F4D572; }
/* ---- IA mirror refinements (2026-06-09b) ---- */
/* Stripe/section titles -> gold-gloss, site-wide */
.section-head h2, .cluster-label, .cluster-title,
.integrations-head h2, .solution-intro h2, .final-cta h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  background: var(--gold-gloss) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Footer: logo matches header size; tagline close under logo, stack tightened */
footer .footer-logo { height: 46px !important; }
footer .footer-tagline { font-size: 24px !important; margin-top: -6px !important; margin-bottom: 0 !important; }
@media (max-width: 960px) { footer .footer-logo { height: 42px !important; } footer .footer-tagline { font-size: 21px !important; } }
@media (max-width: 600px) {
  footer .footer-logo { height: 40px !important; }
  footer .footer-tagline { font-size: 19px !important; }
  footer .footer-inner { gap: 8px; padding: 0 14px; }
  footer { padding: 6px 0 10px; margin-top: 20px; }
}
/* ---- Strip consistency: model the section-head pattern site-wide (2026-06-09c) ---- */
/* .cluster-title is the SUB beneath the gold .cluster-label title -> keep it the
   silver sans sub style (it was incorrectly gold), matching .section-sub. */
.cluster-header .cluster-title, .cluster-title {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif !important;
  font-weight: 400 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--text-2) !important;
  color: var(--text-2) !important;
}
/* ---- Strip hierarchy fix (2026-06-09d): gold title must dominate the sub at
   every width. .section-sub was a fixed 19px while the serif title clamped down
   on narrow screens, inverting the hierarchy (visible on the FAQ strip). ---- */
.section-head h2, .integrations-head h2, .cluster-label {
  font-size: clamp(30px, 4.6vw, 48px) !important;
  line-height: 1.12 !important;
}
.section-head .section-sub, .integrations-head .section-sub,
.hero-centered .hero-sub, .cluster-header .cluster-title {
  font-size: clamp(15px, 2vw, 19px) !important;
  line-height: 1.5 !important;
}
/* FAQ: a bit more breathing room between the strip and the accordion list */
.faq-list { margin-top: 36px !important; }
/* ============================================================
   HOME PAGE POP PASS (2026-06-09e) - recs 1,2,5,6,7,9
   ============================================================ */
/* #2 Secondary hero CTA (gold ghost) */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.hero-cta-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: #F4D572; padding: 15px 26px; border-radius: 999px;
  border: 1px solid rgba(244,213,114,0.45); background: rgba(244,213,114,0.04);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hero-cta-ghost:hover { border-color: rgba(244,213,114,0.85); background: rgba(244,213,114,0.10); transform: translateY(-1px); box-shadow: 0 0 22px rgba(212,168,67,0.18); }

/* #9 Trust-strip caption */
.built-on-caption {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 14px auto 0;
  max-width: min(540px, 100%);
  padding: 0 12px;
  line-height: 1.5;
  box-sizing: border-box;
}

/* #1 Hero headline slightly larger + tighter */
.hero-centered h1 { font-size: clamp(34px, 5.2vw, 60px) !important; line-height: 1.08 !important; }

/* Hero background fit pass: keep the cinematic background while preventing
   the animated headline, partner logos, and quote card from clipping on phones. */
.hero .quote-card-wrap--hero {
  width: min(700px, calc(100vw - 32px));
}
@media (max-width: 720px) {
  .hero > .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero .built-on--hero {
    width: 100%;
    max-width: calc(100vw - 32px);
    margin: 0 auto 16px;
    padding: 6px 0 14px;
  }
  .hero .built-on--hero::before {
    inset: -6px -12px;
    border-radius: 18px;
  }
  /* Same 4-over-3 map + 95% cell fill; width only. */
  .hero .built-on-row {
    max-width: min(520px, calc(100vw - 24px));
  }
  .hero .hero-centered {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 34px 16px;
  }
  .hero .hero-centered h1 {
    max-width: 300px;
    font-size: clamp(28px, 7vw, 32px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }
  .hero .hero-centered .hero-sub {
    width: 100%;
    max-width: 300px;
    font-size: 15px !important;
  }
  .hero .quote-card-wrap--hero {
    width: min(100%, 310px);
    max-width: 310px;
    margin: 0 auto 18px;
  }
  .hero .quote-card-wrap--hero .quote-card {
    padding: 16px 12px !important;
  }
  .hero .quote-card-wrap--hero .quote-text {
    font-size: 12px !important;
    line-height: 1.55;
    text-wrap: pretty;
  }
  .hero .quote-card-wrap--hero .quote-source {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    font-size: 12px !important;
    letter-spacing: 0;
  }
  .hero .quote-card-wrap--hero .quote-source img {
    margin: 0 -2px;
  }
  .hero .hero-ctas {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero .hero-ctas--single {
    max-width: none;
  }
  .hero .hero-ctas--single .hero-cta-chrome {
    width: auto;
    max-width: min(100%, 280px);
  }
  .hero .hero-ctas--single .hero-cta-chrome-inner {
    width: auto;
    padding: 13px 28px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }
}
@media (max-width: 360px) {
  .hero .hero-centered h1 {
    font-size: 27px !important;
  }
}

/* #5 Proof band */
.proof-band {
  padding: 32px 0 24px;
  position: relative;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}
.proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 8px 6px;
}
.proof-num {
  font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 44px); line-height: 1;
  background: var(--gold-gloss); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.proof-cap {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  line-height: 1.45;
  max-width: 240px;
  text-wrap: balance;
}
@media (max-width: 700px) {
  .proof-band { padding: 28px 0 20px; }
  .proof-grid { grid-template-columns: 1fr; gap: 22px; max-width: 360px; }
  .proof-cap { max-width: 280px; }
}

/* Enterprise buyer band (homepage section 3) */
.ent-home-band {
  padding: 12px 0 56px;
  position: relative;
  z-index: 2;
}
.ent-home-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 36px;
  row-gap: 14px;
  align-items: center;
  width: 100%;
  padding: 32px 36px;
  border: 1px solid rgba(212, 168, 67, 0.35);
  background: linear-gradient(135deg, rgba(212, 168, 67, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.ent-home-head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.ent-home-eyebrow {
  margin: 0;
}
.ent-home-head h2 {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  text-wrap: balance;
}
.ent-home-body {
  grid-column: 1;
  grid-row: 2;
  font-size: 15px;
  color: var(--text-3);
  line-height: 1.65;
  max-width: 620px;
  margin: 0;
  text-wrap: pretty;
}
.ent-home-foot {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex-shrink: 0;
}
.ent-home-ghost {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  padding: 12px 18px;
  border: 1px solid rgba(212, 168, 67, 0.35);
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ent-home-ghost:hover { color: var(--text-0); border-color: rgba(212, 168, 67, 0.75); }
@media (max-width: 900px) {
  .ent-home-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 18px;
    padding: 28px 24px;
  }
  .ent-home-head,
  .ent-home-body,
  .ent-home-foot {
    grid-column: 1;
    grid-row: auto;
  }
  .ent-home-head {
    align-items: center;
    text-align: center;
  }
  .ent-home-body {
    max-width: none;
    text-align: center;
  }
  .ent-home-foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
}
@media (max-width: 520px) {
  .ent-home-band {
    padding: 8px 0 96px;
  }
  .ent-home-panel {
    padding: 24px 18px;
    row-gap: 16px;
  }
  .ent-home-foot {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .ent-home-foot .hero-cta-chrome {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .ent-home-foot .hero-cta-chrome-inner {
    width: 100%;
    justify-content: center;
  }
  .ent-home-foot .ent-home-ghost {
    width: 100%;
  }
}

/* #6 Founder pull-quote */
.founder-pullquote {
  max-width: 820px; margin: 20px auto 6px; padding: 0 24px; text-align: center; border: 0; quotes: none;
  font-family: var(--serif); font-style: normal; font-weight: 500;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; color: var(--text-1);
}
.founder-pullquote em {
  font-style: italic; background: var(--gold-gloss); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* #7 Command-center ambient gold glow */
.app-showcase { position: relative; }
.app-showcase::before {
  content: ""; position: absolute; inset: -10% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 55% at 50% 45%, rgba(212,168,67,0.18), rgba(212,168,67,0.05) 46%, transparent 72%);
}
.app-showcase-inner { position: relative; z-index: 1; }
/* ---- App-store badges in every mega-menu footer: centered + popped (2026-06-11) ---- */
/* 3-column grid so the store pills sit dead-center regardless of side widths */
.nav-links .nav-dropdown--mega .mega-foot {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 16px;
}
.nav-links .nav-dropdown--mega .mega-foot .mega-foot-text { justify-self: start; grid-column: 1; }
.nav-links .nav-dropdown--mega .mega-foot .mega-foot-stores { justify-self: center; grid-column: 2; display: inline-flex; align-items: center; gap: 12px; }
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta {
  justify-self: end;
  grid-column: 3;
  align-self: center;
}
/* Desktop mega foot: chrome CTA sizing matches nav Meeting button */
.nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta .hero-cta-chrome-inner {
  padding: 11px 22px !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  gap: 0 !important;
}
.nav-links .nav-dropdown--mega .mega-store {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(244,213,114,0.55);
  background: linear-gradient(180deg, rgba(40,33,16,0.85) 0%, rgba(16,14,9,0.92) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 16px rgba(212,168,67,0.22), 0 4px 14px rgba(0,0,0,0.45);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  color: #FFEDB3 !important; -webkit-text-fill-color: #FFEDB3 !important;
  text-decoration: none; white-space: nowrap; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-links .nav-dropdown--mega .mega-store:hover {
  border-color: rgba(255,237,179,0.95);
  background: linear-gradient(180deg, rgba(58,47,22,0.95) 0%, rgba(26,22,13,0.96) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 26px rgba(244,213,114,0.45), 0 6px 18px rgba(0,0,0,0.5);
  transform: translateY(-2px); color: #fff !important; -webkit-text-fill-color: #fff !important;
}
.nav-links .nav-dropdown--mega .mega-store svg { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-links .nav-dropdown--mega .mega-store--apple svg { fill: #FFEDB3; transition: fill .2s ease; }
.nav-links .nav-dropdown--mega .mega-store--apple:hover svg { fill: #fff; }

/* ---- /ia-gold-icon treatment: unbox the mega-menu icons, gold stroke, single halo, +25% size ---- */
.nav-links .nav-dropdown--mega .mega-item .mega-icon {
  width: auto !important; height: auto !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  margin-top: 2px;
}
.nav-links .nav-dropdown--mega .mega-item .mega-icon svg {
  width: 22px !important; height: 22px !important;   /* 16 -> +~37% to read as a credential unboxed */
  stroke: url(#goldShineStroke) !important; fill: none;
  stroke-width: 1.7;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 0 6px rgba(244,213,114,0.35)) !important;
  transition: filter .22s var(--ease), transform .22s var(--ease);
}
.nav-links .nav-dropdown--mega .mega-item a:hover .mega-icon { box-shadow: none !important; transform: none !important; }
.nav-links .nav-dropdown--mega .mega-item a:hover .mega-icon svg {
  filter: drop-shadow(0 0 10px rgba(244,213,114,0.55)) !important;
  transform: scale(1.04);
}
/* ---- Port mannykess.com dropdown-item hover onto the Platform mega-menu (2026-06-11) ----
   Manny's signature: a gold vertical accent bar slides in on the left, the row gets a
   gold sweep + nudges right, the icon scales 1.04 with a brighter halo, subtitle tints gold. */
.nav-links .nav-dropdown--mega .mega-item a::before {
  content: "" !important;
  position: absolute; left: 4px; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%; border-radius: 3px;
  background: linear-gradient(#FFF7D6, #D4A843);
  box-shadow: 0 0 9px rgba(244,213,114,0.85);
  transition: transform 0.30s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.nav-links .nav-dropdown--mega .mega-item a:hover {
  background: linear-gradient(90deg, rgba(244,213,114,0.18), rgba(244,213,114,0.05) 72%, transparent) !important;
  transform: translateX(4px) !important;
}
.nav-links .nav-dropdown--mega .mega-item a:hover::before { transform: translateY(-50%) scaleY(1); }
/* rich metallic gold on the title (gradient text — stays visible despite the nav transparent-fill rule) */
.nav-links .nav-dropdown--mega .mega-item a:hover .mega-label {
  background: linear-gradient(180deg, #FFF3C4 0%, #F4D572 42%, #E8C04A 70%, #D4A843 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.nav-links .nav-dropdown--mega .mega-item a:hover .mega-tagline {
  color: #E8C66A !important; -webkit-text-fill-color: #E8C66A !important;
}
/* ---- App Store / Google Play pills under the Command Center title (2026-06-11) ---- */
.cluster-header .cc-stores { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.cluster-header .cc-store {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(244,213,114,0.55);
  background: linear-gradient(180deg, rgba(40,33,16,0.85) 0%, rgba(16,14,9,0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 16px rgba(212,168,67,0.22), 0 4px 14px rgba(0,0,0,0.45);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  color: #FFEDB3; -webkit-text-fill-color: #FFEDB3; text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cluster-header .cc-store:hover {
  border-color: rgba(255,237,179,0.95);
  background: linear-gradient(180deg, rgba(58,47,22,0.95) 0%, rgba(26,22,13,0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 26px rgba(244,213,114,0.45), 0 6px 18px rgba(0,0,0,0.5);
  transform: translateY(-2px); color: #fff; -webkit-text-fill-color: #fff;
}
.cluster-header .cc-store svg { width: 19px; height: 19px; flex: 0 0 auto; }
.cluster-header .cc-store--apple svg { fill: #FFEDB3; transition: fill .2s ease; }
.cluster-header .cc-store--apple:hover svg { fill: #fff; }
/* Footer "Held by Parent Company" -> smaller + same serif italic as the AI-Revenue Infrastructure tagline */
footer .footer-parent-text {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
/* ---- Logo glow + footer spacing cleanup (2026-06-09i) ---- */
/* Remove the gold glow behind the NIRVANI header logo */
header.nav .logo-img, .logo-img { filter: none !important; }
/* Remove the glow behind the footer BBB + Integrity Agency logos (keep brightness, drop the drop-shadows) */
footer .bbb-badge, footer .bbb-badge--horizontal { filter: brightness(1.35) contrast(1.1) !important; }
footer .integrity-logo { filter: brightness(1.18) contrast(1.22) !important; }
/* Bring "Held by Parent Company" ~50% closer to the IA logo (gap is 14px -> pull IA in 7px) */
footer .footer-parent .integrity-logo-link { margin-left: -7px !important; }
/* Pledge 1% logo: crisp full-opacity white */
footer .footer-pledge-row .pledge1-logo { opacity: 1 !important; filter: brightness(1.1) contrast(1.04) !important; }
.agentdemo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 22px; }
.agentdemo-tab { appearance: none; cursor: pointer; white-space: nowrap; font-family: 'JetBrains Mono','Courier New',monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 16px; border-radius: 2px; color: var(--text-2); background: rgba(255,255,255,0.03); border: 1px solid rgba(212,168,67,0.30); transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); }
.agentdemo-tab:hover { transform: translateY(-1px); }
.agentdemo-tab.is-active { border-color: transparent; color: #0F0F0F; }

/* Per-industry tab vibrance. Keyed to data-industry, which is what the
   replay console's tabs carry; the old data-agent markup is gone. Each hue
   matches the panel outline the engine sets for that industry. */
.agentdemo-tab[data-industry="legal"] { color: #E8EDF2; border-color: rgba(255,255,255,0.38); }
.agentdemo-tab[data-industry="legal"]:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
.agentdemo-tab[data-industry="legal"].is-active { background: linear-gradient(135deg, #FFFFFF 0%, #D7DCE2 52%, #F2F4F7 100%); box-shadow: 0 0 20px rgba(255,255,255,0.32); color: #0F0F0F; }

.agentdemo-tab[data-industry="medical"] { color: #5EEAD4; border-color: rgba(45,212,191,0.45); }
.agentdemo-tab[data-industry="medical"]:hover { color: #CCFBF1; border-color: rgba(45,212,191,0.85); background: rgba(20,184,166,0.10); }
.agentdemo-tab[data-industry="medical"].is-active { background: linear-gradient(135deg, #99F6E4 0%, #14B8A6 50%, #2DD4BF 100%); box-shadow: 0 0 20px rgba(20,184,166,0.45); color: #042f2e; }

.agentdemo-tab[data-industry="pro"] { color: #7DD3FC; border-color: rgba(56,189,248,0.45); }
.agentdemo-tab[data-industry="pro"]:hover { color: #E0F2FE; border-color: rgba(56,189,248,0.85); background: rgba(14,165,233,0.10); }
.agentdemo-tab[data-industry="pro"].is-active { background: linear-gradient(135deg, #BAE6FD 0%, #0EA5E9 50%, #38BDF8 100%); box-shadow: 0 0 20px rgba(14,165,233,0.45); color: #0c1a24; }

.agentdemo-tab[data-industry="restaurant"] { color: #FDBA74; border-color: rgba(249,115,22,0.45); }
.agentdemo-tab[data-industry="restaurant"]:hover { color: #FFEDD5; border-color: rgba(249,115,22,0.85); background: rgba(249,115,22,0.10); }
.agentdemo-tab[data-industry="restaurant"].is-active { background: linear-gradient(135deg, #FED7AA 0%, #F97316 50%, #FB923C 100%); box-shadow: 0 0 20px rgba(249,115,22,0.45); color: #1c0a02; }
@media (max-width: 760px) {
  .agentdemo-tab { font-size: 10px; padding: 8px 12px; white-space: normal; text-align: center; max-width: 100%; }
}
/* ==========================================================================
   APP STORE / GOOGLE PLAY BADGES (login.nirvani.ai design) — 2026-06-18
   Chrome-framed two-line badges with a sheen sweep. Replaces the old
   .mega-store / .cc-store pills everywhere app CTAs appear.
   ========================================================================== */
.store-badge {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 13px;
  padding: 13px 22px; min-width: 190px;
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)) !important;
  border: 0; border-radius: 14px; text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 22px rgba(215,220,226,0.14);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.store-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(215,220,226,0.25) 45%, #E6EAEF 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 2;
}
.store-badge::before {
  content: ''; position: absolute; top: 0; left: -130%; width: 65%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-20deg); animation: badge-sheen 5s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
.store-badge--google::before { animation-delay: 2.5s; }
@keyframes badge-sheen { 0%,65% { left: -130%; } 100% { left: 150%; } }
.store-badge:hover {
  transform: translateY(-3px) scale(1.035);
  box-shadow: 0 18px 46px rgba(0,0,0,0.6), 0 0 36px rgba(215,220,226,0.34);
}
.store-glyph { width: 26px; height: 26px; flex-shrink: 0; position: relative; z-index: 3; }
.store-glyph--apple { fill: #FFFFFF; }
.store-text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.store-text-sm { font-size: 9px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); -webkit-text-fill-color: var(--text-2); }
.store-text-lg { font-size: 16.5px; font-weight: 700; letter-spacing: 0.01em; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
/* tighter inside the mega-menu dropdown footer */
.nav-links .nav-dropdown--mega .store-badge { min-width: 162px; padding: 10px 16px; gap: 11px; }
.nav-links .nav-dropdown--mega .store-glyph { width: 22px; height: 22px; }
.nav-links .nav-dropdown--mega .store-text-lg { font-size: 15px; }
.cluster-header .cc-stores { gap: 16px; }

/* ==========================================================================
   MOBILE HEADER: pull the Strategize CTA + menu toggle inward so the
   top-right A2P chat widget never covers the menu button (2026-06-18)
   ========================================================================== */
@media (max-width: 960px) {
  header.nav .nav-inner { padding-right: 84px !important; }
  header.nav.scrolled .nav-inner { padding-right: 84px !important; }
}
@media (max-width: 480px) {
  header.nav .nav-inner { padding-right: 78px !important; }
}

/* (old language dropdown removed — howellshaw mirror below) */

/* ==========================================================================
   HOMEPAGE MOBILE POLISH - 2026-07-03
   Final cascade pass for the mobile landing fold: compact header, width-fit
   media, scannable infrastructure proof, and no black collapse.
   ========================================================================== */
@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  header.nav {
    min-height: 64px;
    z-index: 1000 !important;
  }

  header.nav .nav-inner,
  header.nav.scrolled .nav-inner {
    width: 100%;
    max-width: 100%;
    height: 64px;
    /* Keep right padding so chat bubble / OS UI never covers hamburger */
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)) !important;
    gap: 8px;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  header.nav .logo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    display: flex;
    align-items: center;
  }

  header.nav .logo {
    flex: 0 1 auto;
    max-width: min(46vw, 160px);
    margin-right: 6px;
  }
  header.nav .logo-img {
    /* Slightly smaller on mobile so lang toggle clears the wordmark */
    height: 36px !important;
    max-width: min(44vw, 154px) !important;
    width: auto !important;
    object-fit: contain;
    object-position: left center;
    filter:
      drop-shadow(0 0 1px rgba(255, 237, 179, 0.45))
      drop-shadow(0 0 8px rgba(212, 168, 67, 0.20)) !important;
  }

  /* legacy header lang-menu overridden */

  /* legacy header lang-menu overridden */

  /* legacy header lang-menu overridden */

  header.nav .hero-cta-chrome.is-nav {
    flex: 0 0 auto;
    min-height: 38px;
  }

  header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-inner {
    min-height: 38px;
    padding: 0 13px !important;
  }

  header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-text {
    font-size: 10.5px !important;
    letter-spacing: 0.11em !important;
    white-space: nowrap;
  }

  header.nav .mobile-toggle {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    font-size: 28px;
    line-height: 1;
    margin-left: 2px;
    z-index: 1210 !important;
  }

  header.nav .nav-links {
    top: 64px !important;
    max-height: calc(100dvh - 64px);
    overscroll-behavior: contain;
    width: 100%;
  }

  /* Maya must stay above mobile chrome; 70 buried the open panel under content */
  chat-widget,
  iframe[src*="chat.nirvani.ai"],
  iframe[src*="msgsndr"],
  [id*="lc_chat"],
  [class*="lc-chat"] {
    z-index: 9700 !important;
  }

  .nirvani-al-behind,
  .nirvani-al-front {
    display: none !important;
  }

  main > .hero,
  main > section.hero,
  .hero {
    padding-top: 64px !important;
    padding-bottom: clamp(34px, 10vw, 72px) !important;
    min-height: max(100dvh, 1160px) !important;
    overflow: hidden;
    isolation: isolate;
    background: transparent !important;
  }

  .hero-background-stage {
    --hero-media-scale: 100vw;
    inset: 0 !important;
    height: auto !important;
    bottom: 0 !important;
    background-size: var(--hero-media-scale) auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .hero-background-stage video {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: var(--hero-media-scale);
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center top;
    transform: translateX(-50%);
  }

  .hero-background-stage::before {
    background:
      radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 45%, rgba(0, 0, 0, 0.56) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.14) 46%, rgba(0, 0, 0, 0.62) 100%);
  }

  .hero-background-stage::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.04) 34%, rgba(0, 0, 0, 0.04) 66%, rgba(0, 0, 0, 0.42) 100%),
      radial-gradient(ellipse at 50% 82%, rgba(212, 168, 67, 0.16) 0%, rgba(212, 168, 67, 0.05) 34%, rgba(0, 0, 0, 0) 72%);
  }

  .hero > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-top {
    margin-bottom: 0 !important;
    padding-top: clamp(28px, 8vw, 54px);
  }

  .hero-top .hero-robot-wrap,
  .hero-robot-wrap {
    height: clamp(154px, 36vw, 204px) !important;
    margin-bottom: -8px !important;
  }

  .hero-robot {
    max-height: clamp(154px, 36vw, 204px) !important;
  }

  .hero-robot-wrap::after {
    -webkit-mask-size: auto clamp(154px, 36vw, 204px);
    mask-size: auto clamp(154px, 36vw, 204px);
  }

  .hero .built-on--hero {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw) clamp(22px, 7vw, 42px) !important;
    padding: 18px 16px 20px !important;
    box-sizing: border-box;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.76) 18%, rgba(0, 0, 0, 0.76) 82%, rgba(0, 0, 0, 0.28) 100%);
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(2px);
  }

  .hero .built-on--hero::before {
    inset: 0;
    border-radius: 0;
    opacity: 0.42;
  }

  .hero .built-on-label {
    max-width: 340px;
    margin: 0 auto 13px;
    font-size: 10.5px;
    line-height: 1.6;
    letter-spacing: 0.22em;
  }

  .hero .built-on-row {
    max-width: min(520px, calc(100vw - 24px));
  }

  .built-on-caption {
    max-width: 340px;
    margin: 10px auto 0;
    font-size: 12.5px;
    line-height: 1.45;
    letter-spacing: 0.04em;
  }

  .hero .hero-centered {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(30px, 8vw, 44px) 18px clamp(34px, 9vw, 52px) !important;
    box-sizing: border-box;
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none;
    backdrop-filter: none;
  }

  .hero .micro-label {
    max-width: min(100%, 380px);
    padding: 9px 12px;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.18em;
    white-space: normal;
  }

  .hero .hero-centered h1 {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(32px, 8.8vw, 41px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .hero .hero-centered .hero-sub {
    max-width: 380px;
    font-size: 15px !important;
    line-height: 1.58;
  }

  .hero .quote-card-wrap--hero {
    width: 100%;
    max-width: 380px;
    margin: 0 auto 18px;
  }

  .hero .hero-ctas {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero .hero-ctas .hero-cta-chrome,
  .hero .hero-ctas .hero-cta-ghost {
    width: 100%;
    text-align: center;
  }

  .hero .hero-ctas .hero-cta-chrome-inner {
    width: 100%;
    justify-content: center;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }

  .hero .hero-ctas--single {
    max-width: none;
    justify-content: center;
  }
  .hero .hero-ctas--single .hero-cta-chrome {
    width: auto;
    max-width: min(100%, 300px);
  }
  .hero .hero-ctas--single .hero-cta-chrome-inner {
    width: auto;
    padding: 14px 30px;
    font-size: 12px;
    letter-spacing: 0.2em;
  }
}

@media (max-width: 380px) {
  header.nav .nav-inner,
  header.nav.scrolled .nav-inner {
    gap: 6px;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  header.nav .logo-img {
    height: 32px !important;
    max-width: min(40vw, 136px) !important;
  }

  /* legacy header lang-menu overridden */

  header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-inner {
    min-height: 36px;
    padding: 0 10px !important;
  }

  header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-text {
    font-size: 9.8px !important;
    letter-spacing: 0.09em !important;
  }

  header.nav .mobile-toggle {
    flex-basis: 38px;
    width: 38px;
    min-width: 38px;
  }

  .hero .built-on--hero,
  .hero .hero-centered {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (min-width: 560px) and (max-width: 720px) {
  .hero-background-stage {
    --hero-media-scale: 100vw;
  }

  .hero .built-on-row {
    max-width: min(520px, calc(100vw - 24px));
  }
}

/* ==========================================================================
   HOMEPAGE HERO — video removed 2026-07-09.
   Starfield (neural sphere) is the only background; no video stage.
   ========================================================================== */
.hero {
  background: transparent !important;
}

/* Kill any residual video stage markup or cached CSS */
.hero-background-stage,
.hero-background-stage video {
  display: none !important;
}

/* Hero title band stays transparent so starfield shows through */
.hero .hero-centered {
  background: transparent !important;
}

.hero .built-on--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) 0 !important;
  background: transparent !important;
  border-top: 0 !important;
  /* No bottom twin — the line above the hero eyebrow is the only divider */
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero .built-on--hero::before {
  /* Light scrim only - do not paint over the starfield */
  inset: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.16) 100%) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.hero .built-on--hero > * {
  position: relative;
  z-index: 1;
}

.hero .hero-centered {
  margin-top: 0 !important;
  padding-top: clamp(20px, 4.8vw, 34px) !important;
  background: transparent !important;
}

@media (max-width: 1279px) {
  .hero {
    --hero-video-stack-height: 65vw;
  }
}

@media (max-width: 960px) {
  .hero {
    --hero-video-stack-height: 87vw;
  }
}

@media (max-width: 640px) {
  .hero {
    --hero-video-stack-height: 92vw;
  }

  .hero .hero-centered {
    padding-top: clamp(16px, 5vw, 28px) !important;
  }
}

@media (max-width: 480px) {
  .hero {
    --hero-video-stack-height: 130vw;
  }

  .hero .built-on--hero {
    margin: clamp(-22px, -4vw, -14px) calc(50% - 50vw) 0 !important;
  }
}

.tile::before,
.tile-grid--jw-glass .tile::before,
.ticker-item::before,
.faq-item::before,
.pri-faq-item::before,
.roi-card::before,
.founder-note-card::after,
.comparison-table-wrap--nirvani::after,
#verticals .vertical::before,
.ind-main .vertical::before,
.tl-content::before,
.store-badge::after,
.pri-tier-card::before,
.pri-included-card::before,
.car-why-card::before,
.car-openroles-group::before,
.car-form::before,
.n1-card::before,
.pain-card::before,
.auto-card::before {
  border-radius: 0 !important;
}

/* Tools /tools section card surfaces */
.tk-tile,
.pb-tile,
.featured-tile,
.toolkit-stats,
.live-panel,
.tool-grid,
.input-card,
.metric-card,
.chart-panel,
.unlock-panel,
.insight-card,
.scenario-card,
.compare-card,
.pb-hero-card,
.pb-step-card,
.pb-metric,
.pb-callout,
.pb-roi-card,
.pb-checklist,
.texture-card,
.texture-preview,
.texture-tile {
  border-radius: 0 !important;
}

.tk-tile::before,
.tk-tile::after,
.pb-tile::before,
.featured-tile::before,
.metric-card::before,
.input-card::before {
  border-radius: 0 !important;
}

/* ==========================================================================
   CHAT WIDGET RESTORED (2026-07-10) — Maya is live again.
   Prior hard-kill (display:none on chat-widget / .chat-ready-pill) removed.
   Host rules above (z-index 9700, no transform/filter) still apply.
   ========================================================================== */


/* ==========================================================================
   SITEWIDE: Sharp-corner CTAs & pills + shiny gold gradient borders
   2026-07-25 — all buttons, chrome CTAs, check pills, micro-label pills
   ========================================================================== */
:root {
  --cta-gold-border: linear-gradient(
    135deg,
    #FFF8E0 0%,
    #F4D572 18%,
    #D4A843 42%,
    #FFF5D2 55%,
    #B68A2E 72%,
    #F4D572 88%,
    #D4A843 100%
  );
  --cta-gold-border-hover: linear-gradient(
    135deg,
    #FFFFFF 0%,
    #FFF5D2 15%,
    #F4D572 35%,
    #D4A843 50%,
    #F4D572 70%,
    #FFF8E0 90%,
    #D4A843 100%
  );
}

/* Sharp corners on every CTA / pill control */
.hero-cta-chrome,
.hero-cta-chrome-inner,
.hero-cta-chrome-text,
.hero-cta-ghost,
.btn,
.btn-primary,
.btn-nav,
.btn-ghost,
.btn-lg,
.cta-check-pill,
.micro-label,
.micro-label .label-text,
.ent-hero-ghost,
.lang-menu summary,
.filter-btn,
.lf-plug-badge,
.lf-plug-step,
a.hero-cta-chrome,
button.hero-cta-chrome {
  border-radius: 0 !important;
}

/* --- Chrome gold CTA (outer ring + inner fill) --- */
.hero-cta-chrome {
  border-radius: 0 !important;
  padding: 2px !important;
  background: var(--cta-gold-border) !important;
  background-size: 220% 220% !important;
  animation: cta-gold-border-shine 5s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 14px rgba(212, 168, 67, 0.35)) !important;
}
.hero-cta-chrome-inner {
  border-radius: 0 !important;
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45) !important;
}
.hero-cta-chrome:hover {
  background: var(--cta-gold-border-hover) !important;
  filter: drop-shadow(0 8px 22px rgba(212, 168, 67, 0.5)) !important;
}

/* --- Standard buttons: gold gradient border via layered background --- */
.btn,
.btn-primary,
.btn-nav,
.btn-ghost,
.btn-lg {
  border-radius: 0 !important;
  border: 2px solid transparent !important;
  background-image:
    linear-gradient(#0a0a0a, #0a0a0a),
    var(--cta-gold-border) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    0 0 16px rgba(212, 168, 67, 0.22),
    inset 0 1px 0 rgba(255, 245, 210, 0.12) !important;
}
.btn-primary {
  background-image:
    linear-gradient(135deg, #FFF5D2 0%, #F4D572 25%, #D4A843 50%, #F4D572 75%, #B68A2E 100%),
    var(--cta-gold-border) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  color: #0f0f0f !important;
}
.btn-nav {
  background-image:
    linear-gradient(#000000, #000000),
    var(--cta-gold-border) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  color: #fff !important;
  border: 2px solid transparent !important;
}
.btn-ghost,
.hero-cta-ghost,
.ent-hero-ghost {
  border-radius: 0 !important;
  border: 2px solid transparent !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)),
    var(--cta-gold-border) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  color: var(--text-0, #fff) !important;
}
.btn:hover,
.btn-nav:hover,
.btn-ghost:hover,
.hero-cta-ghost:hover,
.ent-hero-ghost:hover {
  box-shadow:
    0 0 24px rgba(212, 168, 67, 0.4),
    0 0 48px rgba(212, 168, 67, 0.18),
    inset 0 1px 0 rgba(255, 245, 210, 0.2) !important;
}

/* --- Check pills only (eyebrows use howellshaw system above) --- */
.cta-check-pill {
  border-radius: 0 !important;
  border: 2px solid transparent !important;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.92), rgba(10, 10, 10, 0.92)),
    var(--cta-gold-border) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow:
    0 0 18px rgba(212, 168, 67, 0.22),
    inset 0 1px 0 rgba(255, 245, 210, 0.1) !important;
  padding: 10px 22px !important;
}


/* Lang switcher + filter chips that act as pills */
.lang-menu summary,
.filter-btn {
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)),
    var(--cta-gold-border) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.filter-btn.active {
  box-shadow: 0 0 16px rgba(212, 168, 67, 0.35) !important;
}

@keyframes cta-gold-border-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-chrome { animation: none !important; }
}


/* (eyebrow system consolidated at end of file) */

/* ==========================================================================
   EYEBROW PILLS — howellshaw.com system (sitewide)
   Outer gold rotating ring + INNER chrome frame (center transparent).
   Gold type sits in the open center. Two-tone: gold outside, chrome inside.
   No status dots, chevrons, or flanking hairlines before/after the text.
   Extra padding vs source so labels never look slammed.
   ========================================================================== */
@property --nirvani-tag-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes nirvani-tag-shine {
  to { --nirvani-tag-angle: 360deg; }
}

.micro-label {
  position: relative !important;
  isolation: isolate !important;
  display: inline-block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #E8C16A !important;
  -webkit-text-fill-color: #E8C16A !important;
  /* Transparent center so gold type + page show through. Chrome is an INNER frame only. */
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  /* Breathing room: howellshaw uses 6x13; we add air so text never slams the ring */
  padding: 14px 26px !important;
  border-radius: 3px !important;
  margin: 0 0 1.65rem !important;
  gap: 0 !important;
  box-shadow: 0 0 20px -4px rgba(232, 193, 106, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  filter: none !important;
  white-space: nowrap;
}
/* OUTER: rotating metallic gold ring (unchanged howellshaw system) */
.micro-label::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.5px !important;
  pointer-events: none !important;
  z-index: -1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
  background: conic-gradient(
    from var(--nirvani-tag-angle),
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  box-shadow: none !important;
  animation: nirvani-tag-shine 5s linear infinite !important;
}
/* INNER: metallic chrome frame only — center stays open/transparent */
.micro-label::after {
  content: "" !important;
  position: absolute !important;
  /* Sit just inside the gold ring; thicker frame = more present chrome */
  inset: 2.5px !important;
  border-radius: 1px !important;
  padding: 4.25px !important;
  pointer-events: none !important;
  z-index: -1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: conic-gradient(
    from var(--nirvani-tag-angle),
    #5c5c5c, #d8d8d8, #ffffff, #c4c4c4,
    #8a8a8a, #ffffff, #b0b0b0, #f8f8f8,
    #6e6e6e, #e8e8e8, #ffffff, #bcbcbc,
    #5c5c5c
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  /* Soft chrome presence so the metal reads even at small size */
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.22),
    inset 0 0 6px rgba(255, 255, 255, 0.18) !important;
  animation: nirvani-tag-shine 7s linear infinite reverse !important;
}
/* Plain gold text only — no chrome shimmer, no side hairlines */
.micro-label span.label-text {
  position: relative !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #E8C16A !important;
  -webkit-text-fill-color: #E8C16A !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}
.micro-label span.label-text::before,
.micro-label span.label-text::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.micro-label.no-dot::before {
  /* keep the gold ring even when no-dot was used for readout dots */
  content: "" !important;
  display: block !important;
}
.section-head .micro-label,
.hero .micro-label,
.hero-centered .micro-label,
.cat-hero .micro-label,
.ent-hero .micro-label,
.ent-section-head .micro-label,
.hero-top .micro-label {
  margin-bottom: 1.75rem !important;
}
@media (max-width: 640px) {
  .micro-label {
    padding: 12px 20px !important;
    white-space: normal;
  }
}
.micro-label.no-dot::after {
  /* keep chrome inner frame even when no-dot was used for readout dots */
  content: "" !important;
  display: block !important;
}
@media (prefers-reduced-motion: reduce) {
  .micro-label::before,
  .micro-label::after { animation: none !important; }
}

/* ==========================================================================
   HOMEPAGE HERO STACK RHYTHM
   Equal air between: header gold divider → eyebrow pill → robot → logos.
   One gap token drives the full vertical cadence.
   body.home-page AND structural .hero > .container > .hero-top so locale
   homes cannot drift if body class is missing on a stale edge copy.
   ========================================================================== */
body.home-page .hero,
.hero:has(> .container > .hero-top) {
  /* Fixed nav: 14px pad + 51px logo + 14px pad ≈ 79px (desktop) */
  --hero-nav-h: 79px;
  --hero-gap: 32px;
  padding-top: calc(var(--hero-nav-h) + var(--hero-gap)) !important;
  padding-bottom: var(--hero-gap) !important;
}

body.home-page .hero-top,
.hero > .container > .hero-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--hero-gap, 32px) !important;
  /* Robot → logos only: -22% vs full --hero-gap (pill/robot rhythm untouched via gap) */
  margin: 0 0 calc(var(--hero-gap, 32px) * 0.78) !important;
  padding: 0 !important;
  text-align: center;
}

/* Pill sits cleanly in the stack — no extra bottom margin fighting gap.
   Keep centered for every language: long translations wrap inside a fixed max
   width instead of shifting the stack (nowrap caused layout drift). */
body.home-page .hero-top .micro-label,
.hero > .container > .hero-top > .micro-label {
  margin: 0 auto !important;
  padding: 14px 28px !important;
  white-space: normal !important;
  max-width: min(92vw, 520px) !important;
  text-align: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
}

body.home-page .hero-top .hero-robot-wrap,
.hero > .container > .hero-top > .hero-robot-wrap {
  margin: 0 auto !important;
  margin-bottom: 0 !important;
}

/* Robot now sits directly under the eyebrow, above the headline, inside
   .hero-centered (not .hero-top). No flex gap to lean on here, so give it
   the same rhythm token as its own margin, top and bottom. */
body.home-page .hero-centered .hero-robot-wrap,
.hero > .container > .hero-centered > .hero-robot-wrap {
  margin: var(--hero-gap, 32px) auto !important;
}

/* Logo strip: same gap above (from hero-top margin) and below */
body.home-page .hero .built-on--hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: var(--hero-gap) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Drop internal top pad so robot → logos gap equals the stack token */
body.home-page .hero .built-on-row {
  --bo-pad-y: 0px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.home-page .hero .built-on-caption {
  margin-top: var(--hero-gap) !important;
  margin-bottom: 0 !important;
}

/* Copy band starts after the same gap under the logo strip */
body.home-page .hero .hero-centered {
  margin-top: 0 !important;
  padding-top: var(--hero-gap) !important;
}

/* Tablet: shorter nav, slightly tighter but still equal gaps */
@media (max-width: 960px) {
  body.home-page .hero,
  .hero:has(> .container > .hero-top) {
    --hero-nav-h: 66px;
    --hero-gap: 28px;
  }
  body.home-page .hero-top .micro-label,
  .hero > .container > .hero-top > .micro-label {
    padding: 12px 22px !important;
    white-space: normal !important;
    max-width: min(100%, 420px) !important;
  }
  body.home-page .hero-top .hero-robot-wrap,
  body.home-page .hero .hero-robot-wrap,
  .hero > .container > .hero-top > .hero-robot-wrap {
    margin-bottom: 0 !important;
  }
}

/* Phone: keep equal rhythm; kill negative logo pull-ups */
@media (max-width: 720px) {
  body.home-page .hero,
  .hero:has(> .container > .hero-top) {
    --hero-nav-h: 58px;
    --hero-gap: 24px;
    padding-top: calc(var(--hero-nav-h) + var(--hero-gap)) !important;
    padding-bottom: var(--hero-gap) !important;
  }
  body.home-page .hero-top,
  .hero > .container > .hero-top {
    padding-top: 0 !important;
    margin-bottom: calc(var(--hero-gap, 24px) * 0.78) !important;
  }
  body.home-page .hero-top .micro-label,
  .hero > .container > .hero-top > .micro-label {
    padding: 12px 20px !important;
    max-width: min(100%, 340px) !important;
  }
  body.home-page .hero-top .hero-robot-wrap,
  body.home-page .hero .hero-robot-wrap,
  .hero > .container > .hero-top > .hero-robot-wrap {
    height: clamp(154px, 36vw, 204px) !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
  }
  body.home-page .hero .built-on--hero {
    margin: 0 calc(50% - 50vw) 0 !important;
    padding-top: 0 !important;
    padding-bottom: var(--hero-gap) !important;
  }
}

@media (max-width: 480px) {
  body.home-page .hero {
    --hero-nav-h: 54px;
    --hero-gap: 22px;
  }
  body.home-page .hero .built-on--hero {
    margin: 0 calc(50% - 50vw) 0 !important;
  }
}

/* ==========================================================================
   CTA 2-TONE TRIAL — full chrome fill + eyebrow-style gold outline
   Black type on chrome metal. Gold rotating ring matches .micro-label outer.
   ========================================================================== */
:root {
  --cta-chrome-metal:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.10) 40%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(145deg,
      #6a6a6a 0%,
      #c4c4c4 16%,
      #ffffff 34%,
      #a8a8a8 50%,
      #f0f0f0 66%,
      #888888 84%,
      #d8d8d8 100%
    );
}

/* --- Primary chrome CTAs (nested outer + inner) --- */
.hero-cta-chrome,
a.hero-cta-chrome,
button.hero-cta-chrome {
  position: relative !important;
  isolation: isolate !important;
  display: inline-block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.32)) !important;
}

/* Eyebrow-style gold outline (rotating conic ring) */
.hero-cta-chrome::before,
a.hero-cta-chrome::before,
button.hero-cta-chrome::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.75px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: conic-gradient(
    from var(--nirvani-tag-angle),
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  box-shadow: none !important;
  animation: nirvani-tag-shine 5s linear infinite !important;
}

/* Full chrome metal fill inside the gold ring */
.hero-cta-chrome-inner {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 2px !important;
  border: 0 !important;
  background: var(--cta-chrome-metal) !important;
  background-size: auto !important;
  background-position: center !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30) !important;
  animation: none !important;
  filter: none !important;
}
.hero-cta-chrome-text,
.hero-cta-chrome-inner,
.hero-cta-chrome-arrow {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  fill: #0a0a0a !important;
}
.hero-cta-chrome:hover {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.42)) !important;
  transform: translateY(-2px) scale(1.02);
}
.hero-cta-chrome:hover .hero-cta-chrome-inner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(145deg, #7a7a7a 0%, #d0d0d0 16%, #ffffff 36%, #b8b8b8 52%, #f5f5f5 68%, #9a9a9a 86%, #e0e0e0 100%) !important;
}

/* --- Flat buttons / ghost CTAs: same chrome + gold ring --- */
.btn,
.btn-primary,
.btn-nav,
.btn-ghost,
.btn-lg,
.hero-cta-ghost,
.ent-hero-ghost,
.cta-check-pill {
  position: relative !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: var(--cta-chrome-metal) !important;
  background-image: var(--cta-chrome-metal) !important;
  background-origin: border-box !important;
  background-clip: padding-box !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  text-shadow: none !important;
  box-shadow:
    0 0 18px -4px rgba(232, 193, 106, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.btn::before,
.btn-primary::before,
.btn-nav::before,
.btn-ghost::before,
.btn-lg::before,
.hero-cta-ghost::before,
.ent-hero-ghost::before,
.cta-check-pill::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.75px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: conic-gradient(
    from var(--nirvani-tag-angle),
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  box-shadow: none !important;
  animation: nirvani-tag-shine 5s linear infinite !important;
}

.btn > *,
.btn-primary > *,
.btn-nav > *,
.btn-ghost > *,
.btn-lg > *,
.hero-cta-ghost > *,
.cta-check-pill > * {
  position: relative;
  z-index: 1;
}

.btn:hover,
.btn-primary:hover,
.btn-nav:hover,
.btn-ghost:hover,
.btn-lg:hover,
.hero-cta-ghost:hover,
.ent-hero-ghost:hover,
.cta-check-pill:hover {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 42%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(145deg, #7a7a7a 0%, #d0d0d0 16%, #ffffff 36%, #b8b8b8 52%, #f5f5f5 68%, #9a9a9a 86%, #e0e0e0 100%) !important;
  box-shadow:
    0 0 24px -2px rgba(232, 193, 106, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-chrome::before,
  .btn::before,
  .btn-primary::before,
  .btn-nav::before,
  .btn-ghost::before,
  .btn-lg::before,
  .hero-cta-ghost::before,
  .ent-hero-ghost::before,
  .cta-check-pill::before {
    animation: none !important;
  }
}

/* ==========================================================================
   ENTERPRISE MULTI-DEVICE (2026-07-26)
   Desktop / laptop / tablet / iPhone / iPad / Android
   ========================================================================== */

/* Root: stable viewport units + safe areas */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100dvh;
  min-height: 100vh;
}

/* Prefer content never trapped under notch / home indicator */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  header.nav .nav-inner {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* Touch devices: remove hover-only traps, keep tap targets */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn, .mobile-toggle, .hero-cta-chrome, summary {
    -webkit-tap-highlight-color: rgba(244, 213, 114, 0.18);
  }
  /* Avoid sticky :hover styles after tap on iOS */
  .nav-links a:hover { color: inherit; }
}

/* Tablet landscape / narrow laptop: keep hamburger through 960, already set.
   Tablet portrait: comfortable type + grid. */
@media (min-width: 721px) and (max-width: 1100px) {
  .container {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .hero-centered h1 {
    font-size: clamp(36px, 5.2vw, 54px) !important;
  }
}

/* Mobile + tablet drawer: accordion mega menus (collapsed by default) */
@media (max-width: 960px) {
  header.nav .nav-inner {
    min-height: 56px;
    align-items: center;
  }

  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    z-index: 1210 !important;
    pointer-events: auto !important;
  }

  /* Override always-open mega menus: collapse until .nav-dd-open */
  .nav-links .has-dropdown > .nav-dropdown,
  .nav-links .has-dropdown > ul.nav-dropdown {
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
  }
  .nav-links .has-dropdown.nav-dd-open > .nav-dropdown,
  .nav-links .has-dropdown.nav-dd-open > ul.nav-dropdown {
    display: block !important;
  }

  .nav-links .has-dropdown > a {
    min-height: 48px;
    display: flex !important;
    align-items: center;
    padding: 14px 20px !important;
  }
  .nav-links .has-dropdown.nav-dd-open > a .nav-caret {
    transform: rotate(0deg);
  }
  .nav-links .has-dropdown > a .nav-caret {
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
  }

  /* Mega columns stack as simple lists */
  .nav-links .nav-dropdown--mega,
  .nav-links .nav-dropdown--mega.cols-3 {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 8px !important;
  }
  .nav-links .nav-dropdown--mega > li.mega-col {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }
  .nav-links .nav-dropdown--mega .mega-col-head {
    padding: 10px 20px 4px 20px !important;
    font-size: 11px !important;
  }
  .nav-links .nav-dropdown--mega .mega-item a {
    padding: 12px 20px 12px 24px !important;
    min-height: 48px;
    gap: 12px !important;
  }
  .nav-links .nav-dropdown--mega .mega-item .mega-tagline {
    display: none !important; /* scannable on phone */
  }
  .nav-links .nav-dropdown--mega .mega-foot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px 16px !important;
    grid-template-columns: none !important;
  }
  .nav-links .nav-dropdown--mega .mega-foot .mega-foot-stores {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    width: 100%;
  }
  .nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta {
    grid-column: auto !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 4px auto 0 !important;
  }
  .nav-links .nav-dropdown--mega .mega-foot a.mega-foot-cta .hero-cta-chrome-inner {
    padding: 12px 22px !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
  }
  .nav-links .nav-dropdown--mega .store-badge {
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  /* Open panel fills usable height under header */
  header.nav.is-open .nav-links,
  .nav-links.nav-open {
    max-height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  /* ============================================================
     MOBILE NAV TITLES = site eyebrow (.micro-label) treatment
     Top-level drawer links (Platform / Industries / Tools / Enterprise)
     get the same gold ring + chrome inner frame + uppercase gold type.
     ============================================================ */
  header.nav.is-open .nav-links,
  .nav-links.nav-open {
    gap: 12px !important;
    padding: 16px 14px max(22px, env(safe-area-inset-bottom)) !important;
    background: #000000 !important;
  }
  header.nav .nav-links > li {
    border-bottom: 0 !important;
    list-style: none;
  }
  /* Top-level titles as eyebrow pills */
  header.nav .nav-links > li > a {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 13px 18px !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #E8C16A !important;
    -webkit-text-fill-color: #E8C16A !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: 0 0 20px -4px rgba(232, 193, 106, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    white-space: nowrap;
    transition: box-shadow 0.22s ease, color 0.22s ease, transform 0.22s ease !important;
  }
  /* OUTER: rotating metallic gold ring (matches .micro-label) */
  header.nav .nav-links > li > a::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1.5px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    background: conic-gradient(
      from var(--nirvani-tag-angle),
      #C89637, #F0C85F, #FFF7CD, #F0C85F,
      #C89637, #F0C85F, #FFF7CD, #F0C85F,
      #C89637, #F0C85F, #FFF7CD, #F0C85F,
      #C89637
    ) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    box-shadow: none !important;
    animation: nirvani-tag-shine 5s linear infinite !important;
  }
  /* INNER: metallic chrome frame */
  header.nav .nav-links > li > a::after {
    content: "" !important;
    position: absolute !important;
    inset: 2.5px !important;
    border-radius: 1px !important;
    padding: 4.25px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    /* inset:2.5px above sets all four sides. left/top:auto used to undo the
       top and left halves of it, so the ring collapsed to a ~9px chrome blob
       in the bottom-right corner of every drawer row. Pin them to match. */
    left: 2.5px !important;
    top: 2.5px !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    background: conic-gradient(
      from var(--nirvani-tag-angle),
      #5c5c5c, #d8d8d8, #ffffff, #c4c4c4,
      #8a8a8a, #ffffff, #b0b0b0, #f8f8f8,
      #6e6e6e, #e8e8e8, #ffffff, #bcbcbc,
      #5c5c5c
    ) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.22),
      inset 0 0 6px rgba(255, 255, 255, 0.18) !important;
    animation: nirvani-tag-shine 7s linear infinite reverse !important;
  }
  header.nav .nav-links > li > a:hover,
  header.nav .nav-links > li > a:focus-visible,
  header.nav .nav-links > li.has-dropdown.nav-dd-open > a {
    color: #FBDE82 !important;
    -webkit-text-fill-color: #FBDE82 !important;
    box-shadow: 0 0 26px -4px rgba(232, 193, 106, 0.72) !important;
  }
  /* Caret stays gold, no plain grey */
  header.nav .nav-links > li > a .nav-caret {
    color: #E8C16A !important;
    -webkit-text-fill-color: #E8C16A !important;
    opacity: 0.95 !important;
    font-size: 12px !important;
    text-shadow: 0 0 8px rgba(232, 193, 106, 0.45) !important;
    animation: none !important;
    flex-shrink: 0;
    margin-left: 10px;
  }
  header.nav .nav-links > li.has-dropdown.nav-dd-open > a .nav-caret {
    color: #FBDE82 !important;
    -webkit-text-fill-color: #FBDE82 !important;
  }

  /* Subsection titles inside accordion (mega-col-head) = compact eyebrow */
  header.nav .nav-links .nav-dropdown--mega .mega-col-head {
    position: relative !important;
    isolation: isolate !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    margin: 10px 16px 8px !important;
    padding: 8px 14px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 3px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #E8C16A !important;
    -webkit-text-fill-color: #E8C16A !important;
    background: transparent !important;
    background-image: none !important;
    filter: none !important;
    box-shadow: 0 0 16px -4px rgba(232, 193, 106, 0.4) !important;
    line-height: 1.2 !important;
  }
  header.nav .nav-links .nav-dropdown--mega .mega-col-head::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1.25px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    display: block !important;
    background: conic-gradient(
      from var(--nirvani-tag-angle),
      #C89637, #F0C85F, #FFF7CD, #F0C85F,
      #C89637, #F0C85F, #FFF7CD, #F0C85F,
      #C89637
    ) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    animation: nirvani-tag-shine 5s linear infinite !important;
  }
  header.nav .nav-links .nav-dropdown--mega .mega-col-head::after {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: 1px !important;
    padding: 3px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    display: block !important;
    background: conic-gradient(
      from var(--nirvani-tag-angle),
      #5c5c5c, #d8d8d8, #ffffff, #c4c4c4,
      #8a8a8a, #ffffff, #b0b0b0, #f8f8f8,
      #5c5c5c
    ) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    animation: nirvani-tag-shine 7s linear infinite reverse !important;
  }

  /* Nested items: slightly warmer, less "plain list" on black */
  header.nav .nav-links .nav-dropdown {
    background: rgba(0, 0, 0, 0.92) !important;
    padding: 4px 0 8px !important;
  }
  header.nav .nav-links .mega-item a,
  header.nav .nav-links .nav-dropdown a {
    color: rgba(255, 255, 255, 0.88) !important;
  }
  header.nav .nav-links .mega-item a:hover,
  header.nav .nav-links .nav-dropdown a:hover {
    color: #FBDE82 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    header.nav .nav-links > li > a::before,
    header.nav .nav-links > li > a::after,
    header.nav .nav-links .nav-dropdown--mega .mega-col-head::before,
    header.nav .nav-links .nav-dropdown--mega .mega-col-head::after {
      animation: none !important;
    }
  }

  /* Forms / inputs: 16px min avoids iOS focus zoom */
  input, select, textarea {
    font-size: max(16px, 1em);
  }

  /* Media never blow out width */
  img, video, svg, canvas {
    max-width: 100%;
    height: auto;
  }
  img { height: auto; }

  /* Tables: horizontal scroll container */
  table {
    max-width: 100%;
  }
  .table-scroll,
  .roi-table,
  .pricing-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

/* Phone portrait refinements */
@media (max-width: 480px) {
  header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-text {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }
  header.nav .hero-cta-chrome.is-nav .hero-cta-chrome-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .hero-centered h1 {
    font-size: clamp(28px, 8.2vw, 36px) !important;
    line-height: 1.12 !important;
  }
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .proof-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .tile-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  header.nav .hero-cta-chrome.is-nav {
    display: none !important; /* logo + menu stay; Strategize in hero + footer */
  }
}

/* Landscape phones: shorter header, usable drawer */
@media (max-width: 960px) and (max-height: 480px) and (orientation: landscape) {
  header.nav .nav-inner {
    height: 52px !important;
    min-height: 52px;
  }
  header.nav.is-open .nav-links,
  .nav-links.nav-open {
    max-height: calc(100dvh - 52px) !important;
  }
  .hero {
    min-height: auto !important;
    padding-top: 72px !important;
  }
}

/* Prefers reduced motion: no shimmer thrash on CTA in drawer focus */
@media (prefers-reduced-motion: reduce) {
  .hero-cta-chrome-inner {
    animation: none !important;
  }
  .nav-links .has-dropdown > a .nav-caret {
    transition: none !important;
  }
}

/* High-contrast / forced-colors: keep menu visible */
@media (forced-colors: active) {
  .mobile-toggle {
    border: 1px solid ButtonText;
  }
  header.nav.is-open .nav-links {
    border: 1px solid ButtonText;
  }
}

/* ==========================================================================
   MOBILE MENU HARD FIX (2026-07-26)
   Drawer was nested under .nav-inner stacking and could open "invisibly".
   Force fixed full-width panel + always-tappable hamburger above Meeting CTA.
   ========================================================================== */
@media (max-width: 960px) {
  header.nav {
    position: fixed !important;
    z-index: 4000 !important;
    overflow: visible !important;
  }
  header.nav .nav-inner {
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
  }
  header.nav .nav-inner > nav {
    position: static !important;
  }

  /* Hamburger always wins the hit target */
  header.nav .mobile-toggle {
    position: relative !important;
    z-index: 5000 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* Meeting CTA must not cover the hamburger */
  header.nav .hero-cta-chrome.is-nav {
    position: relative !important;
    z-index: 1 !important;
  }
  header.nav .hero-cta-chrome.is-nav::before {
    pointer-events: none !important;
  }

  /* Open state: fixed drawer under the bar (not trapped by nav-inner) */
  header.nav.is-open .nav-links,
  .nav-links.nav-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--nav-drawer-top, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 3999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #000000 !important;
    max-height: calc(100dvh - var(--nav-drawer-top, 64px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 8px 0 max(20px, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  header.nav.is-open {
    z-index: 4000 !important;
  }
}

/* ==========================================================================
   MOBILE DRAWER OPEN SEQUENCE - 2026-09-10
   The drawer used to hard-pop: display:none -> flex cannot transition, so
   transition-duration sat at 0s and the panel appeared with zero motion while
   the hamburger stayed a hamburger. A CSS animation runs on the frame the
   element becomes displayed, so the open reads as an open with no JS involved.
   ========================================================================== */
@media (max-width: 960px) {
  header.nav.is-open .nav-links,
  .nav-links.nav-open {
    transform-origin: top center;
    animation: nirvani-drawer-in 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    /* The panel is #000 on a #000 page, so the bottom edge was invisible and
       the drawer bled into the hero. Hairline in IA gold marks where it ends. */
    border-bottom: 1px solid rgba(212, 168, 67, 0.42) !important;
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.65),
      0 1px 0 rgba(212, 168, 67, 0.18),
      0 6px 18px rgba(212, 168, 67, 0.10) !important;
  }

  /* Rows land in sequence rather than all at once. */
  header.nav.is-open .nav-links > li {
    animation: nirvani-drawer-row-in 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  header.nav.is-open .nav-links > li:nth-child(1) { animation-delay: 60ms; }
  header.nav.is-open .nav-links > li:nth-child(2) { animation-delay: 105ms; }
  header.nav.is-open .nav-links > li:nth-child(3) { animation-delay: 150ms; }
  header.nav.is-open .nav-links > li:nth-child(4) { animation-delay: 195ms; }
  header.nav.is-open .nav-links > li:nth-child(n + 5) { animation-delay: 235ms; }

  /* Hamburger becomes a close mark. The button's only child is the glyph text,
     so the pseudo-element carries it and the markup stays untouched across
     every page that ships this header. Without JS it still renders. */
  header.nav .mobile-toggle {
    font-size: 0 !important;
  }
  header.nav .mobile-toggle::after {
    content: "☰";  /* hamburger */
    display: block;
    font-size: 26px;
    line-height: 1;
  }
  header.nav.is-open .mobile-toggle::after {
    content: "✕";  /* close */
    animation: nirvani-toggle-swap 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  @media (prefers-reduced-motion: reduce) {
    header.nav.is-open .nav-links,
    .nav-links.nav-open,
    header.nav.is-open .nav-links > li,
    header.nav.is-open .mobile-toggle::after {
      animation: none !important;
    }
  }
}

@keyframes nirvani-drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nirvani-drawer-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nirvani-toggle-swap {
  from { opacity: 0.15; transform: rotate(-90deg) scale(0.75); }
  to   { opacity: 1; transform: none; }
}

/* CTA under live agent demo (homepage) */
.agentdemo-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 28px auto 8px;
  padding: 0 16px;
  text-align: center;
}
.agentdemo-cta .hero-cta-chrome {
  max-width: 100%;
}
.agentdemo-cta .hero-cta-chrome-text {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
@media (max-width: 640px) {
  .agentdemo-cta {
    margin-top: 22px;
  }
  .agentdemo-cta .hero-cta-chrome-inner {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* ROI CTA uses standard chrome button format */
.roi-action .hero-cta-chrome {
  display: inline-block;
  margin: 0 auto;
}
.roi-action .hero-cta-chrome-inner {
  justify-content: center;
}
.roi-action .roi-result-disclaimer {
  margin-top: 12px;
}


/* ==========================================================================
   LANGUAGE TOGGLE — mirror howellshaw.com exactly (flags + gold ring pill)
   Source: howellshaw.com Header.astro .lang-menu / .lang-btn / .lang-dropdown
   ========================================================================== */
.lang-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 70;
}
.lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: 999px !important;
  padding: 8px 13px;
  color: #E8C16A;
  cursor: pointer;
  box-shadow: 0 0 20px -6px rgba(232, 193, 106, 0.5);
  transition: color .22s cubic-bezier(0.22, 1, 0.36, 1), background .22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .22s cubic-bezier(0.22, 1, 0.36, 1), transform .22s cubic-bezier(0.22, 1, 0.36, 1);
  font: inherit;
  isolation: isolate;
}
/* Shining gold ring (same shimmer as micro-label / howellshaw tag-shine) */
.lang-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: -1;
  background: conic-gradient(
    from var(--nirvani-tag-angle),
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637, #F0C85F, #FFF7CD, #F0C85F,
    #C89637
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: nirvani-tag-shine 5s linear infinite;
}
.lang-btn:hover,
.lang-menu:focus-within .lang-btn,
.lang-menu.is-open .lang-btn {
  color: #FBDE82;
  background: rgba(232, 193, 106, 0.12);
  box-shadow: 0 0 26px -4px rgba(232, 193, 106, 0.72);
  transform: translateY(-1px);
}
.lang-globe { width: 15px; height: 15px; flex: 0 0 auto; }
.lang-btn:hover .lang-globe,
.lang-menu:focus-within .lang-globe,
.lang-menu.is-open .lang-globe {
  filter: drop-shadow(0 0 6px rgba(251, 222, 130, 0.6));
}
.lang-flag {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.lang-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lang-flag--btn {
  width: 22px;
  height: 16px;
  border-radius: 3px;
}
.lang-btn:hover .lang-flag--btn,
.lang-menu:focus-within .lang-flag--btn,
.lang-menu.is-open .lang-flag--btn {
  border-color: rgba(251, 222, 130, 0.7);
  box-shadow: 0 0 0 1px rgba(251, 222, 130, 0.45), 0 1px 4px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .lang-btn::before { animation: none; }
}
.lang-btn .nav__caret {
  width: 10px;
  height: 10px;
  opacity: 0.75;
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-menu:hover .nav__caret,
.lang-menu:focus-within .nav__caret,
.lang-menu.is-open .nav__caret {
  transform: rotate(180deg);
}
.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 212px;
  background:
    linear-gradient(rgba(8, 12, 24, 0.97), rgba(8, 12, 24, 0.97)) padding-box,
    linear-gradient(135deg, #FFF8E0 0%, #F4D572 25%, #D4A843 50%, #F4D572 75%, #B68A2E 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 0.45rem;
  box-shadow: 0 34px 64px -22px rgba(0, 0, 0, 0.7), 0 0 30px -8px rgba(232, 193, 106, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s cubic-bezier(0.22, 1, 0.36, 1), transform .22s cubic-bezier(0.22, 1, 0.36, 1), visibility .22s;
  z-index: 60;
  display: grid;
  gap: 2px;
}
.lang-dropdown::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.lang-menu:hover .lang-dropdown,
.lang-menu:focus-within .lang-dropdown,
.lang-menu.is-open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lang-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #d7dbe3;
  transition: color .2s ease;
}
.lang-opt:hover,
.lang-opt:focus-visible {
  background: linear-gradient(90deg, rgba(232, 193, 106, 0.18), rgba(232, 193, 106, 0.04) 72%);
  transform: translateX(3px);
  box-shadow: inset 2px 0 0 #E8C16A, 0 0 18px -9px rgba(232, 193, 106, 0.55);
  outline: none;
}
.lang-opt:hover .lang-name,
.lang-opt:focus-visible .lang-name {
  color: #FBDE82;
}
.lang-opt:hover .lang-flag,
.lang-opt:focus-visible .lang-flag {
  border-color: rgba(251, 222, 130, 0.6);
  box-shadow: 0 0 0 1px rgba(251, 222, 130, 0.4), 0 1px 4px rgba(0, 0, 0, 0.45);
}
.lang-opt[aria-current="page"] {
  background: rgba(232, 193, 106, 0.15);
}
.lang-opt[aria-current="page"] .lang-name {
  color: #FBDE82;
}
.lang-opt[aria-current="page"] .lang-flag {
  border-color: rgba(251, 222, 130, 0.75);
  box-shadow: 0 0 0 2px rgba(251, 222, 130, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45);
}
@media (max-width: 960px) {
  /* Stay in the right-side chrome cluster (no extra left push) */
  .lang-menu { margin-left: 0; }
  .lang-btn { padding: 7px 10px; }
  .lang-dropdown {
    right: 0;
    min-width: 200px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* kill legacy details-summary lang rules that fight this system */
details.lang-menu { display: none !important; }


/* Touch / mobile: never open nav dropdowns via sticky :hover.
   Only .nav-dd-open (mobile-nav.js) or desktop fine-pointer hover. */
@media (hover: none), (max-width: 960px) {
  .nav-links .has-dropdown:hover > .nav-dropdown,
  .nav-links .has-dropdown:focus-within > .nav-dropdown,
  .nav-links .has-dropdown:hover > .nav-dropdown--mega,
  .nav-links .has-dropdown:focus-within > .nav-dropdown--mega,
  .nav-links .has-dropdown:hover > .nav-dropdown--mega.cols-3,
  .nav-links .has-dropdown:focus-within > .nav-dropdown--mega.cols-3 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* keep layout transforms from flashing open panels */
  }
  .nav-links .has-dropdown.nav-dd-open > .nav-dropdown,
  .nav-links .has-dropdown.nav-dd-open > ul.nav-dropdown,
  .nav-links .has-dropdown.nav-dd-open > .nav-dropdown--mega,
  .nav-links .has-dropdown.nav-dd-open > .nav-dropdown--mega.cols-3 {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  /* Language menu: click/.is-open only on touch (hover can flash-close) */
  .lang-menu:hover .lang-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
  }
  .lang-menu.is-open .lang-dropdown,
  .lang-menu:focus-within .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* LANG MENU LTR LOCK — howellshaw parity */
/* Language rows must never flip under html[dir=rtl] (ar/fa pages).
   Howellshaw puts no dir= on lang-opt; flag stays left, name right for every language. */
.lang-menu,
.lang-dropdown,
.lang-opt,
.lang-btn {
  direction: ltr !important;
  unicode-bidi: isolate;
}
.lang-opt {
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.lang-opt .lang-name {
  text-align: left !important;
}
/* Keep marketing chrome LTR so hero robot / nav do not mirror off-screen on ar|fa */
html[dir="rtl"] header.nav,
html[dir="rtl"] header.nav .nav-inner,
html[dir="rtl"] .hero,
html[dir="rtl"] .hero-top,
html[dir="rtl"] .hero-robot-wrap,
html[dir="rtl"] .hero-centered,
html[dir="rtl"] .built-on,
html[dir="rtl"] .proof-band {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .hero-robot {
  transform: none;
}


/* MOBILE NAV ABOVE CHAT WIDGET — keep menus tappable while open */
body.nav-drawer-open chat-widget,
body.nav-drawer-open .chat-ready-pill,
html.nav-drawer-open chat-widget,
body.nav-drawer-open [class*="lc_text-widget"],
body.nav-drawer-open iframe[src*="msgsndr"] {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
@media (max-width: 960px) {
  header.nav.is-open {
    z-index: 10050 !important;
  }
  header.nav.is-open .nav-links,
  header.nav.is-open .nav-links.nav-open,
  .nav-links.nav-open {
    z-index: 10060 !important;
    pointer-events: auto !important;
  }
  header.nav.is-open .mobile-toggle,
  header.nav.is-open .lang-menu,
  header.nav.is-open .nav-actions {
    z-index: 10070 !important;
    pointer-events: auto !important;
  }
}


/* ==========================================================================
   HOMEPAGE CONVERSION-FIRST HERO — 2026-08-21
   The buyer promise and booking action lead the sequence; visual proof follows.
   ========================================================================== */
body.home-page .hero > .container > .hero-centered:first-child {
  /* .hero itself carries padding-top: nav-h + gap so its content clears the
     fixed header. That padding pushes this box's own top edge down too,
     leaving a black seam between the nav divider and the circuit-field
     background painted below. Cancel it with a matching negative margin so
     the box (and its background) starts flush at .hero's true top edge,
     hidden behind the fixed nav, then re-add the same amount as padding so
     the eyebrow/headline content still sits exactly where it did. */
  margin-top: calc(-1 * (var(--hero-nav-h, 79px) + var(--hero-gap, 32px))) !important;
  padding-top: calc(var(--hero-nav-h, 79px) + var(--hero-gap, 32px)) !important;
  /* Same idea at the bottom: absorb what used to be .n-divider's own
     margin-top so the background reaches the divider instead of stopping
     short of it. */
  padding-bottom: calc(var(--hero-gap, 32px) * 0.5 + clamp(12px, 2vw, 24px)) !important;
}

body.home-page .hero > .container > .hero-centered:first-child::before {
  content: none !important;
  display: none !important;
}

body.home-page .hero .hero-primary-cta {
  display: flex;
  justify-content: center;
  margin: clamp(11px, 1.5vw, 16px) 0 0;
}

body.home-page .hero > .container > .hero-centered:first-child .hero-sub {
  margin-bottom: 20px !important;
}

body.home-page .hero .hero-line-advanced {
  display: block;
  white-space: nowrap;
}

/* Circuit field is scoped to the pre-divider hero band (headline + CTA)
   only, so it stops at .n-divider--hero-enterprise instead of stretching
   across the full (much taller) hero section into the Built On Enterprise
   Infrastructure band below. Past the divider, .hero falls back to its
   base transparent background so the site-wide starfield shows through,
   per the pure-black law. */
body.home-page .hero > .container > .hero-centered:first-child,
.hero:has(> .container > .hero-top) > .container > .hero-centered:first-child {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.12) 34%,
      rgba(0, 0, 0, 0.55) 78%,
      rgba(0, 0, 0, 0.92) 100%),
    url('/assets/hero-framed.jpg') center top / cover no-repeat !important;
  background-attachment: scroll !important;
}

/* Band that carries the Pledge 1% give-back card (the English homepage).
   The card lives inside the band so the field runs behind it and reaches
   the divider. Two things follow from the band being ~450px taller:

   1. hero-framed-tall.jpg replaces hero-framed.jpg. It is the same art with
      a defocused continuation of its own bottom border underneath. Plain
      cover on the taller band zoomed the artwork ~20% tighter and clipped
      the CALLS / LEADS / BOOKINGS / REVENUE marks off the sides; the taller
      source holds the original framing.
   2. Gradient stops move up so the headline and CTA keep the values they
      had before, and the lower band settles into a dark bed the card reads
      against.

   The shared title-band rule also ends every band with margin-bottom:32px,
   which here was a strip of plain black between the field and the divider.
   Zeroed, so the band's own padding-bottom carries that space instead.

   Language homepages have no give-back card, so :has() leaves them on the
   rule above, untouched. */
body.home-page .hero > .container > .hero-centered:first-child:has(> .hero-giveback),
.hero:has(> .container > .hero-top) > .container > .hero-centered:first-child:has(> .hero-giveback) {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.12) 26%,
      rgba(0, 0, 0, 0.52) 59%,
      rgba(0, 0, 0, 0.72) 78%,
      rgba(0, 0, 0, 0.80) 100%),
    url('/assets/hero-framed-tall.jpg?v=1') center top / cover no-repeat !important;
  background-attachment: scroll !important;
  margin-bottom: 0 !important;
}

body.home-page .hero .hero-primary-cta--widget {
  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
  min-height: 520px;
  height: 520px;
  margin: clamp(14px, 2vw, 20px) auto 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.home-page .hero .hero-primary-cta--widget > chat-widget {
  flex: 0 1 560px !important;
  width: min(100%, 560px) !important;
  height: 520px !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   EYEBROW PLATE, SITE WIDE - 2026-09-10
   Every .micro-label centre gets the same fill: 85% black over a 6px backdrop
   blur, the treatment the give-back card uses. Started as a hero-only fix
   because the circuit field showed through that one; Sammy wants every eyebrow
   rendered the same way, so it is the component that carries it now, not one
   instance.

   The base .micro-label rule pins background, background-image and
   backdrop-filter to transparent/none with !important, so each property being
   changed carries !important too.

   The rings survive because that same base rule sets isolation:isolate. That
   makes the label its own stacking context, so its z-index:-1 ::before and
   ::after paint above the label background and below its text. Without the
   isolation this fill would bury both rings.

   :not(.no-dot) keeps the buttons out. .micro-label.no-dot and
   .micro-label.no-dot.roi-cta are CTAs wearing the label's shape, with their
   own white translucent fill, border and hover state. 16 of those; a black
   plate would wreck them.
   ========================================================================== */
.micro-label:not(.no-dot) {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}



/* ==========================================================================
   MASCOT + VOICE ORB PAIR - 2026-09-10
   The orb widget renders 276x297. Its host was pinned at 560x520, so the hero
   carried ~220px of empty box under the orb and ~140px either side of it, and
   the mascot sat on its own line above the headline. .hero-meet sets the two
   side by side and lets the host hug what the widget actually draws.
   ========================================================================== */
body.home-page .hero .hero-meet {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 44px);
  width: 100%;
  margin: var(--hero-gap, 32px) auto;
}

/* The mascot carries auto margins for the stacked layout; inside the row they
   would push it off centre. */
body.home-page .hero .hero-meet .hero-robot-wrap {
  margin: 0 !important;
  flex: 0 0 auto;
}

/* Host hugs the widget instead of reserving 560x520 for it. height:auto so a
   change to the widget on the Nirvani side resizes the row rather than
   clipping it or reopening the hole. */
body.home-page .hero .hero-meet .hero-primary-cta--widget {
  width: min(300px, calc(100vw - 32px));
  max-width: 300px;
  min-height: 0;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
}

body.home-page .hero .hero-meet .hero-primary-cta--widget > chat-widget {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  min-height: 297px !important;
  margin: 0 !important;
}

/* Phones: keep the mascot and orb SIDE BY SIDE (Sammy, 2026-10-04).
   The orb widget clips its own content below 280px, measured, so its box
   stays 280 and we scale what it paints instead, pulling the occupied
   width back with symmetric negative margins. The mascot is height-driven,
   so it shrinks via its clamp. Only genuinely tiny screens stack. */
@media (max-width: 560px) {
  body.home-page .hero .hero-meet {
    flex-wrap: nowrap;
    justify-content: center;
  }
  body.home-page .hero .hero-meet .hero-primary-cta--widget {
    --orb-s: 0.90;
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    transform: scale(var(--orb-s));
    transform-origin: center center;
    margin-left: calc(280px * (var(--orb-s) - 1) / 2);
    margin-right: calc(280px * (var(--orb-s) - 1) / 2);
    margin-top: calc(297px * (var(--orb-s) - 1) / 2);
    margin-bottom: calc(297px * (var(--orb-s) - 1) / 2);
  }
  body.home-page .hero .hero-meet .hero-primary-cta--widget > chat-widget {
    max-width: 280px !important;
  }
  body.home-page .hero .hero-meet .hero-robot-wrap {
    flex: 0 0 auto;
    height: clamp(118px, 30vw, 170px) !important;
  }
  body.home-page .hero .hero-meet .hero-robot-wrap .hero-robot {
    max-height: clamp(118px, 30vw, 170px) !important;
  }
}

@media (max-width: 430px) {
  body.home-page .hero .hero-meet { gap: 8px; }
  body.home-page .hero .hero-meet .hero-primary-cta--widget { --orb-s: 0.80; }
  body.home-page .hero .hero-meet .hero-robot-wrap { height: clamp(96px, 26vw, 128px) !important; }
  body.home-page .hero .hero-meet .hero-robot-wrap .hero-robot { max-height: clamp(96px, 26vw, 128px) !important; }
}

/* Superseded phone block kept below for the orb host width only. */
@media (max-width: 560px) {
  body.home-page .hero .hero-meet {
    gap: clamp(10px, 2.4vw, 18px);
  }
  body.home-page .hero .hero-meet .hero-primary-cta--widget {
    width: min(320px, calc(100vw - 32px));
    max-width: 320px;
  }
  body.home-page .hero .hero-meet .hero-primary-cta--widget > chat-widget {
    max-width: 320px !important;
  }
}


/* ==========================================================================
   HEADLINE ABOVE THE PAIR - 2026-09-10
   The h1 now sits between the eyebrow and .hero-meet. Its 28px bottom margin
   stacked on .hero-meet's own var(--hero-gap) top margin (flex rows do not
   collapse margins), leaving ~60px under the headline against 28px above it.
   The pair's margin carries the gap on its own now.
   ========================================================================== */
body.home-page .hero .hero-copy--title h1 {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   HEADLINE ON ONE LINE - 2026-09-11
   "Your Business. Fully Automated." holds one line on every screen, from a
   320px phone to a wide desktop. The size is fitted to the width available:

     line width = font-size x 11.76  (measured: Cormorant Garamond 500, roman
                                      lead + gold italic accent, -0.01em)

   so font-size = available width x 0.94 / 11.76, capped at the 60px desktop
   size. 0.94 leaves about 3% air at each edge. The wrapper is stretched to the
   full column (it used to shrink to its content) so 100cqi is the real column
   width. Older browsers without container units use 100vw minus the 18px
   column padding instead. Both spans inherit one size and the legacy phone
   rules that sized "Every Opportunity Advanced." on its own line (31/28/25px)
   no longer reach this headline. Fallback-font safety net: the inline fit
   script in index.html shrinks the size only if the line would overflow.
   ========================================================================== */
body.home-page .hero .hero-copy--title {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
}

body.home-page .hero .hero-copy--title h1 {
  font-size: min(60px, calc((100vw - 36px) * 0.94 / 11.76)) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@supports (width: 1cqi) {
  body.home-page .hero .hero-copy--title {
    container-type: inline-size;
  }
  body.home-page .hero .hero-copy--title h1 {
    font-size: min(60px, calc(100cqi * 0.94 / 11.76)) !important;
  }
}

/* White lead "Your Business." then the gold italic accent "Fully Automated."
   (order reversed 2026-09-11 so the gold lands on the payoff). */
body.home-page .hero .hero-copy--title h1 .hero-line-lead,
body.home-page .hero .hero-copy--title h1 .accent-text {
  display: inline !important;
  font-size: inherit !important;
  white-space: nowrap !important;
}

/* On one line the headline reaches the gold phone icon in the circuit art
   (at 1440-1920px, tablets and phone landscape; the icon moves with the
   cover-scaled background, so no width or offset clears it everywhere).
   A black halo on the white words dims the art right around the letters and
   is invisible over the dark field. The gold words keep none: a shadow on
   background-clip:text paints over the gold gradient. */
body.home-page .hero .hero-copy--title h1 .hero-line-lead {
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(0, 0, 0, 0.9),
    0 0 48px rgba(0, 0, 0, 0.8);
}
body.home-page .hero .hero-copy--title h1 .accent-text,
body.home-page .hero .hero-copy--title h1 .accent-text * {
  text-shadow: none;
}

/* Feathered dark bed under the whole line, sized in em so it tracks the
   fitted font-size: the line (11.76em) plus ~3em of falloff each side. It
   pushes the circuit art back behind the words only and fades to nothing,
   so the field still reads everywhere else. */
body.home-page .hero .hero-copy--title h1 {
  position: relative;
  isolation: isolate;
}
body.home-page .hero .hero-copy--title h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(11.76em + 6em);
  max-width: 100vw;
  height: 2.8em;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, 0.84) 0%,
    rgba(0, 0, 0, 0.78) 58%,
    rgba(0, 0, 0, 0.42) 82%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

body.home-page .hero .hero-primary-cta .hero-cta-chrome {
  min-height: 54px;
  padding-inline: clamp(20px, 3vw, 34px);
}

body.home-page .hero > .container > .hero-centered:first-child + .hero-top {
  margin-top: 12px !important;
}

body.home-page .hero .n-divider--hero-enterprise {
  width: 100vw;
  /* margin-top is 0: that gap now lives inside .hero-centered's own
     padding-bottom above, so the circuit-field background reaches this
     divider instead of stopping short of it with a black seam. */
  margin: 0 calc(50% - 50vw) clamp(14px, 2.2vw, 26px);
}

@media (max-width: 720px) {
  body.home-page .hero > .container > .hero-centered:first-child {
    padding-bottom: calc(var(--hero-gap, 24px) * 0.5 + 14px) !important;
  }

  body.home-page .hero .hero-primary-cta {
    margin-top: 11px;
  }

  body.home-page .hero .hero-primary-cta--widget {
    width: min(100%, 560px);
    max-width: 560px;
    min-height: 520px;
    height: 520px;
    margin-top: 14px;
    padding: 0;
  }

  body.home-page .hero > .container > .hero-centered:first-child + .hero-top {
    margin-top: 26px !important;
  }

  body.home-page .hero .n-divider--hero-enterprise {
    /* margin-top absorbed into .hero-centered's padding-bottom above */
    margin-top: 0;
    margin-bottom: 20px;
  }

  body.home-page .hero .hero-line-advanced {
    font-size: 31px;
  }

  body.home-page .hero .hero-primary-cta .hero-cta-chrome {
    width: min(100%, 340px);
    min-height: 52px;
    padding-inline: 16px;
  }

  body.home-page .hero .hero-primary-cta .hero-cta-chrome-text {
    font-size: 11px !important;
    letter-spacing: 0.11em !important;
  }
}

@media (max-width: 380px) {
  body.home-page .hero .hero-primary-cta--widget {
    width: min(100%, 560px);
  }

  body.home-page .hero .hero-line-advanced {
    font-size: 28px;
  }

  body.home-page .hero .hero-primary-cta .hero-cta-chrome-text {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 340px) {
  body.home-page .hero .hero-line-advanced {
    font-size: 25px;
  }
}

/* ==========================================================================
   LIVE AGENT DEMO COMMAND CENTER REFRESH - 2026-09-03
   ========================================================================== */
.diagnostic-hook {
  padding: 32px 0 58px;
  scroll-margin-top: 88px;
}

.diagnostic-hook > .container {
  max-width: min(100% - 24px, 1280px);
}

.agentdemo-tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 auto 16px;
  padding: 2px 2px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 213, 114, 0.42) rgba(255, 255, 255, 0.06);
}

.agentdemo-tabs::-webkit-scrollbar {
  height: 6px;
}

.agentdemo-tabs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.agentdemo-tabs::-webkit-scrollbar-thumb {
  background: rgba(244, 213, 114, 0.48);
}

.agentdemo .agentdemo-tab,
.agentdemo .agentdemo-tab[data-agent] {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(244, 213, 114, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(0, 0, 0, 0.72);
  color: rgba(246, 236, 207, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.09),
    0 10px 28px rgba(0, 0, 0, 0.22);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.agentdemo .agentdemo-tab:hover,
.agentdemo .agentdemo-tab[data-agent]:hover {
  border-color: rgba(255, 237, 179, 0.72);
  color: #FFF4C4;
  background:
    linear-gradient(180deg, rgba(244, 213, 114, 0.11), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.82);
}

.agentdemo .agentdemo-tab.is-active,
.agentdemo .agentdemo-tab[data-agent].is-active {
  border-color: rgba(255, 237, 179, 0.92);
  background:
    linear-gradient(180deg, #FFF2B0 0%, #F4D572 44%, #B8842E 100%),
    #F4D572;
  color: #090806;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(78, 46, 4, 0.42),
    0 0 28px rgba(212, 168, 67, 0.28);
}

.agentdemo .agentdemo-tab:focus-visible,
.agentdemo-quickreplies button:focus-visible,
.agentdemo-mic:focus-visible,
.agentdemo-send:focus-visible,
#agentdemo-text:focus-visible {
  outline: 2px solid rgba(255, 237, 179, 0.92);
  outline-offset: 3px;
}

.agentdemo-cta {
  margin-top: 22px;
}

@media (max-width: 960px) {
  .agentdemo-tabs {
    /* Was flex-start, from when this row held five tabs and had to scroll.
       With four it fits at most widths, so centre it. "safe center" falls
       back to start alignment only when the row really does overflow, which
       keeps the first tab reachable inside the scroller. */
    justify-content: center;
    justify-content: safe center;
    margin-bottom: 14px;
    padding-inline: 2px;
  }
}

@media (max-width: 760px) {
  .diagnostic-hook {
    padding: 24px 0 44px;
  }

  .diagnostic-hook > .container {
    max-width: calc(100% - 12px);
  }

  .agentdemo-tabs {
    padding: 2px 2px 10px;
    gap: 7px;
  }

  .agentdemo .agentdemo-tab,
  .agentdemo .agentdemo-tab[data-agent] {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 11px;
  }
}


/* ==========================================================================
   HERO QUICK-ACTION CTA ROW + HEADER PHONE BUTTON  (2026-10-04)
   Shared so the industry verticals inherit it through the canonical sheet.
   Deliberately NOT scoped to .hero: verticals use .lf-hero and carry no
   .home-page body class. Appended at the end of the sheet so it outranks
   the older .hero .hero-ctas stacked-CTA rules (equal specificity, later
   wins). Never set a background on .hero-cta-chrome-inner here, that wipes
   the silver plate.
   ========================================================================== */
/* Quick-action row under the hero subtitle.
     .hero-ctas is an existing site class built for one or two STACKED CTAs
     (styles.css 8309 / 8616 / 9473 force width:100% and max-width:380px).
     We keep that class so the hero reveal timeline still animates this row,
     and add .hero-quick to outrank those rules for a multi-item wrap.
     Scoped to .hero-ctas.hero-quick (0,4,0) so it beats them without
     !important. It must never set a background on .hero-cta-chrome-inner,
     which would wipe the silver plate. */
  .hero-ctas.hero-quick{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;width:100%;max-width:652px;margin:clamp(20px,2.4vw,28px) auto 0}
  .hero-ctas.hero-quick .hero-cta-chrome{width:auto;max-width:100%;flex:0 0 auto;text-align:center}
  .hero-ctas.hero-quick .hero-cta-chrome-inner{width:auto;gap:8px;padding:10px 18px;font-size:10.5px;letter-spacing:.11em}
  /* Header CTA is now icon only: square chrome plate, no label. */
  .hero-cta-chrome.nav-phone .hero-cta-chrome-inner{padding:10px 13px;gap:0;min-width:0}
  .hero-cta-chrome.nav-phone .nav-phone-i{width:18px;height:18px;color:#0a0a0a;display:block}
  @media (max-width:560px){
    .hero-cta-chrome.nav-phone .hero-cta-chrome-inner{padding:9px 11px}
    .hero-cta-chrome.nav-phone .nav-phone-i{width:17px;height:17px}
  }
  .hero-ctas.hero-quick .hcta-i{width:15px;height:15px;flex-shrink:0;color:#0a0a0a;opacity:.86}
  .hero-ctas.hero-quick .hcta--live .hcta-dot{width:7px;height:7px;border-radius:50%;background:#1E8E3E;box-shadow:0 0 0 2px rgba(30,142,62,.22);flex-shrink:0;margin-left:2px;animation:hcta-pulse 1.9s ease-in-out infinite}
  @keyframes hcta-pulse{0%,100%{opacity:1}50%{opacity:.4}}
  @media (prefers-reduced-motion: reduce){.hero-ctas.hero-quick .hcta--live .hcta-dot{animation:none}}
  @media (max-width:820px){
    .hero-ctas.hero-quick{gap:9px;max-width:406px}
    .hero-ctas.hero-quick .hero-cta-chrome-inner{padding:9px 13px;font-size:9.5px;letter-spacing:.08em;gap:7px}
    .hero-ctas.hero-quick .hcta-i{width:14px;height:14px}
  }
  @media (max-width:560px){
    .hero-ctas.hero-quick{gap:8px;max-width:358px}
    .hero-ctas.hero-quick .hero-cta-chrome-inner{padding:9px 10px;font-size:8.8px;letter-spacing:.06em;gap:6px}
    .hero-ctas.hero-quick .hcta-i{width:13px;height:13px}
  }
  /* At 360 the two longest labels could not share a row, so the row broke
     to 2/2/1/1. Trimmed just enough that they pair. */
  @media (max-width:380px){
    /* Natural wrapping packed these 3/2/1 at 360, a ragged stair. Six items
       in fixed half-width columns give an even 2/2/2 instead. The widest
       column is 160.5px at 360 and the longest label needs 145px of content,
       so the side padding is 6px to leave slack. Re-measure before trimming
       the column further: at 8px padding the label wrapped to two lines. */
    .hero-ctas.hero-quick{gap:7px;max-width:330px}
    .hero-ctas.hero-quick .hero-cta-chrome-inner{padding:8px 6px;font-size:8.2px;letter-spacing:.04em;gap:5px;box-sizing:border-box;width:100%;justify-content:center}
    .hero-ctas.hero-quick .hcta-i{width:12px;height:12px}
    .hero-ctas.hero-quick > .hero-cta-chrome{flex:0 0 calc(50% - 3.5px);max-width:calc(50% - 3.5px)}
  }


/* ==========================================================================
   VERTICAL FULL-BLEED GUTTER + HEADER PHONE BUTTON SIZING  (2026-10-04)
   Vertical sheets break .section-head out of .container with width:100vw and
   margin-left:calc(50% - 50vw). With no side padding the copy runs under the
   right edge on phones. Excluded from the homepage, which carries .home-page
   and lays these out itself.
   ========================================================================== */
body:not(.home-page) .section-head,
body:not(.home-page) .cluster-header,
body:not(.home-page) .integrations-head {
  /* The vertical sheets full-bleed these with width:100vw + a negative
     margin. 100vw counts the scrollbar, so the block renders ~15px wider
     than the viewport and the copy is clipped on the right. These heads
     are centred text with no background, so the break-out buys nothing.
     Cancel it and gutter them instead. */
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  padding-left: clamp(22px, 5vw, 40px);
  padding-right: clamp(22px, 5vw, 40px);
}
body:not(.home-page) .section-head > *,
body:not(.home-page) .cluster-header > * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}
/* Headlines use gradient-clipped text that can run a few px proud of the
   padding box on narrow screens; keep them inside the gutter. */
body:not(.home-page) .section-head h2,
body:not(.home-page) .cluster-header h2 {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* The icon-only header button read as a cramped chip at 44x36. */
.hero-cta-chrome.nav-phone .hero-cta-chrome-inner { padding: 12px 16px; }
.hero-cta-chrome.nav-phone .nav-phone-i { width: 19px; height: 19px; }
@media (max-width: 560px) {
  .hero-cta-chrome.nav-phone .hero-cta-chrome-inner { padding: 11px 14px; }
  .hero-cta-chrome.nav-phone .nav-phone-i { width: 18px; height: 18px; }
}


/* ==========================================================================
   VERTICAL HERO PAIR, BASE LAYOUT  (2026-10-04)
   The homepage pair rule is body.home-page .hero scoped, so a vertical that
   gains .hero-meet renders it as a plain block and the mascot goes full
   width. This is the generic base; homepage rules are more specific and
   still win there. Orb host is the non-mascot child, since the class name
   differs per vertical (.lf-orb on law).
   ========================================================================== */
.hero-meet {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 44px);
  width: 100%;
  margin: var(--hero-gap, 32px) auto;
}
.hero-meet .hero-robot-wrap { margin: 0 !important; flex: 0 0 auto; }
.hero-meet > *:not(.hero-robot-wrap) {
  width: min(300px, calc(100vw - 32px));
  max-width: 300px;
  min-height: 0;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
}
.hero-meet > *:not(.hero-robot-wrap) > chat-widget {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  min-height: 297px !important;
  margin: 0 !important;
}

/* ==========================================================================
   VERTICAL HERO PAIR, PHONES  (2026-10-04)
   MUST stay after VERTICAL HERO PAIR, BASE LAYOUT. These selectors are the
   same specificity as the base ones, so source order is the only thing that
   decides the winner. Sitting before the base block, every declaration here
   except transform lost, which left the orb painted at 0.78 inside a layout
   box still 300px wide. The box is what flex measures, so the pair wrapped
   and the mascot was squeezed to a 66px thumbnail.

   The orb is a third-party widget with a painted minimum near 280px, so the
   layout box stays at --orb-w and only the paint is scaled; the symmetric
   negative margins give back the space the scale frees. Every value derives
   from --orb-w / --orb-h / --orb-s, so a breakpoint only retunes --orb-s.
   ========================================================================== */
@media (max-width: 560px) {
  .hero-meet {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
  }
  .hero-meet > *:not(.hero-robot-wrap) {
    --orb-w: 280px;
    --orb-h: 297px;
    --orb-s: 0.86;
    flex: 0 0 var(--orb-w);
    width: var(--orb-w);
    max-width: var(--orb-w);
    transform: scale(var(--orb-s));
    transform-origin: center center;
    margin: calc(var(--orb-h) * (var(--orb-s) - 1) / 2)
            calc(var(--orb-w) * (var(--orb-s) - 1) / 2);
  }
  .hero-meet > *:not(.hero-robot-wrap) > chat-widget {
    max-width: var(--orb-w) !important;
  }
  /* Mascot is sized by height; width follows its 500x704 aspect. */
  .hero-meet .hero-robot-wrap { flex: 0 0 auto; height: 150px !important; }
  .hero-meet .hero-robot-wrap .hero-robot { max-height: 150px !important; }
}

@media (max-width: 430px) {
  .hero-meet > *:not(.hero-robot-wrap) { --orb-s: 0.76; }
  .hero-meet .hero-robot-wrap { height: 124px !important; }
  .hero-meet .hero-robot-wrap .hero-robot { max-height: 124px !important; }
}

@media (max-width: 380px) {
  .hero-meet { gap: 10px; }
  .hero-meet > *:not(.hero-robot-wrap) { --orb-s: 0.68; }
  .hero-meet .hero-robot-wrap { height: 108px !important; }
  .hero-meet .hero-robot-wrap .hero-robot { max-height: 108px !important; }
}


/* ==========================================================================
   NIRVANI REPLAY CONSOLE  (2026-10-04)
   Ported from the law vertical's #calls console and generalised so one
   engine drives every industry from data. Class prefix is nvr- rather than
   law's lfr-, because the law page loads this shared sheet and reusing its
   prefix here would restyle that live page. The six fam/tone selectors set
   only --fam variables but are global in law's own sheet, so they are
   scoped under .nv-replay.
   Engine: assets/js/replay-console.js
   ========================================================================== */
/* ==========================================================================
   LIVE INTAKE REPLAY CONSOLE - v2 2026-09-11
   Seekable ops console for #calls: tonight's queue + 24h coverage bar, a
   transcript that types itself, a scrub slider with colored event markers,
   a nine-node pipeline graph that connects the dots (node families colored
   with the design system's own tier tokens), a matter record that fills
   itself, and an event log. Pure CSS + vanilla JS. No library.
   ========================================================================== */
.nv-replay {
  --nvr-gold: #D4A843;      --nvr-gold-rgb: 212, 168, 67;
  /* Chrome accent is NOT declared here on purpose. Declaring it on
     .nv-replay would shadow the value the engine sets on the section, and
     the panel would stay gold while the tabs changed colour. Each use below
     carries a gold fallback instead, so a console with no accent set still
     renders exactly as before. The fam-* tier colours stay fixed, because
     they carry meaning (capture / screen / decide / act), not identity. */
  --nvr-chrome: #D7DCE2;    --nvr-chrome-rgb: 215, 220, 226;
  --nvr-blue: #5BA3F5;      --nvr-blue-rgb: 91, 163, 245;      /* N1 token: screen */
  --nvr-violet: #A569E5;    --nvr-violet-rgb: 165, 105, 229;   /* N2 token: decide */
  --nvr-green: #3BD088;     --nvr-green-rgb: 59, 208, 136;     /* N3 token: act */
  --nvr-ok: #62E08A;        --nvr-ok-rgb: 98, 224, 138;
  --nvr-warn: #FFD073;      --nvr-warn-rgb: 255, 208, 115;
  --nvr-urgent: #FF7373;    --nvr-urgent-rgb: 255, 115, 115;
  --nvr-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --nvr-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nvr-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 1180px; margin: 0 auto; position: relative; outline: none;
}
.nv-replay:focus-visible .nvr-frame { box-shadow: 0 0 0 1px var(--nvr-accent, var(--nvr-gold)), 0 0 34px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.22), 0 24px 70px rgba(0, 0, 0, 0.7); }

/* family colors, used by nodes, edges, markers, queue dots, legend */
.nv-replay .fam-capture { --fam: var(--nvr-gold);   --fam-rgb: var(--nvr-gold-rgb); }
.nv-replay .fam-screen  { --fam: var(--nvr-blue);   --fam-rgb: var(--nvr-blue-rgb); }
.nv-replay .fam-decide  { --fam: var(--nvr-violet); --fam-rgb: var(--nvr-violet-rgb); }
.nv-replay .fam-act     { --fam: var(--nvr-green);  --fam-rgb: var(--nvr-green-rgb); }
.nv-replay .tone-flag   { --fam: var(--nvr-warn);   --fam-rgb: var(--nvr-warn-rgb); }
.nv-replay .tone-urgent { --fam: var(--nvr-urgent); --fam-rgb: var(--nvr-urgent-rgb); }

/* ---- Frame ---- */
.nvr-frame {
  position: relative; overflow: hidden;
  border: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.55);
  /* Corner brackets removed 2026-10-04. The eight cream gradient segments
     that drew them are gone; the glow and base fill stay. */
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.10), transparent 70%),
    linear-gradient(180deg, rgba(16, 16, 16, 0.74), rgba(6, 6, 6, 0.82));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.10), 0 0 26px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.12), 0 24px 70px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(26px) scale(0.985);
  transition: opacity 900ms var(--nvr-ease), transform 900ms var(--nvr-ease), box-shadow 400ms var(--nvr-ease);
}
.nv-replay.is-live .nvr-frame { opacity: 1; transform: none; }
.nvr-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.10) 48%, rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.10) 52%, transparent 68%);
  background-size: 240% 100%; background-position: -120% 0;
  transition: background-position 1600ms var(--nvr-ease) 300ms;
}
.nv-replay.is-live .nvr-frame::before { background-position: 220% 0; }
.nvr-frame > * { position: relative; z-index: 1; }
.nvr-sep { opacity: 0.38; margin: 0 7px; font-weight: 400; }

/* ---- Top bar ---- */
.nvr-topbar {
  display: flex; align-items: center; gap: 18px; min-height: 44px; padding: 0 16px;
  border-bottom: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.42);
  font-family: var(--nvr-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-3);
}
.nvr-topbar > * { opacity: 0; transform: translateY(-6px); transition: opacity 600ms var(--nvr-ease), transform 600ms var(--nvr-ease); }
.nv-replay.is-live .nvr-topbar > * { opacity: 1; transform: none; }
.nv-replay.is-live .nvr-topbar > :nth-child(1) { transition-delay: 320ms; }
.nv-replay.is-live .nvr-topbar > :nth-child(2) { transition-delay: 400ms; }
.nv-replay.is-live .nvr-topbar > :nth-child(3) { transition-delay: 480ms; }
.nv-replay.is-live .nvr-topbar > :nth-child(4) { transition-delay: 560ms; }
.nvr-brand { display: flex; align-items: center; color: var(--text-1); font-weight: 500; white-space: nowrap; }
.nvr-live { width: 7px; height: 7px; border-radius: 50%; margin-right: 10px; background: var(--nvr-ok); box-shadow: 0 0 10px rgba(var(--nvr-ok-rgb), 0.9); animation: nvr-blink 1.6s ease-in-out infinite; }
@keyframes nvr-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.nvr-pill { margin-left: 12px; padding: 3px 8px 2px; border: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.7); color: var(--nvr-accent, var(--nvr-gold)); font-size: 9.5px; letter-spacing: 0.16em; }
.nvr-clock {
  font-size: 15px; letter-spacing: 0.06em; font-weight: 500; font-variant-numeric: tabular-nums;
  background: var(--gold-gloss, linear-gradient(180deg, #FFF7CD, #D4A843 50%, #9E6E26));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.nvr-tally { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nvr-tally b { color: var(--text-0); font-weight: 600; display: inline-block; min-width: 1ch; transition: transform 300ms var(--nvr-pop); }
.nvr-tally b.bump { transform: scale(1.35); }
.nvr-tally b[data-k="booked"] { color: var(--nvr-green); }
.nvr-tally b[data-k="escalated"] { color: var(--nvr-warn); }
.nvr-tally b[data-k="humans"] { color: var(--nvr-accent, var(--nvr-gold)); }
.nvr-controls { display: flex; gap: 6px; }
.nvr-btn {
  width: 30px; height: 30px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(var(--nvr-chrome-rgb), 0.55); color: var(--text-1);
  transition: border-color 260ms var(--nvr-ease), background 260ms var(--nvr-ease), transform 260ms var(--nvr-ease), box-shadow 260ms var(--nvr-ease);
}
.nvr-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nvr-btn .ic-play polygon { fill: currentColor; stroke: none; }
.nvr-btn:hover { border-color: var(--nvr-accent, var(--nvr-gold)); color: var(--nvr-accent, var(--nvr-gold)); background: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.08); transform: translateY(-1px); box-shadow: 0 0 14px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.25); }
.nvr-btn:focus-visible { outline: 1px solid var(--nvr-accent, var(--nvr-gold)); outline-offset: 2px; }
.nvr-btn-play .ic-play { display: none; }
.nv-replay.is-paused .nvr-btn-play .ic-play { display: block; }
.nv-replay.is-paused .nvr-btn-play .ic-pause { display: none; }
.nv-replay.is-paused .nvr-btn-play { border-color: var(--nvr-accent, var(--nvr-gold)); color: var(--nvr-accent, var(--nvr-gold)); }

/* ---- Scrub slider: the whole call on one rail, event markers colored by family ---- */
.nvr-scrub {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px;
  padding: 0 16px; min-height: 40px; border-bottom: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28);
  background: rgba(0, 0, 0, 0.25);
  opacity: 0; transition: opacity 600ms var(--nvr-ease) 640ms;
}
.nv-replay.is-live .nvr-scrub { opacity: 1; }
.nvr-scrub-time, .nvr-scrub-end { font-family: var(--nvr-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nvr-scrub-time { color: var(--text-0); }
.nvr-scrub-end { text-align: right; }
.nvr-scrub-track { position: relative; height: 26px; }
.nvr-scrub-rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(var(--nvr-chrome-rgb), 0.22); }
.nvr-scrub-fill {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.55), var(--nvr-accent, var(--nvr-gold)));
  box-shadow: 0 0 8px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.6);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
.nvr-scrub-marks { position: absolute; inset: 0; pointer-events: none; }
.nvr-mark {
  position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #000; border: 1.5px solid var(--fam, var(--nvr-chrome)); opacity: 0.85;
  transition: transform 260ms var(--nvr-pop), background 260ms, box-shadow 260ms;
}
.nvr-mark.on { background: var(--fam); box-shadow: 0 0 8px rgba(var(--fam-rgb), 0.8); transform: scale(1.25); }
.nvr-scrub-input {
  -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  background: transparent; cursor: pointer; outline: none;
}
.nvr-scrub-input::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.nvr-scrub-input::-moz-range-track { height: 100%; background: transparent; }
.nvr-scrub-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%;
  background: var(--nvr-accent, var(--nvr-gold)); border: 2px solid #FFF3C4; box-shadow: 0 0 0 3px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.22), 0 0 14px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.8);
  transition: transform 200ms var(--nvr-pop), box-shadow 200ms;
}
.nvr-scrub-input::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--nvr-accent, var(--nvr-gold)); border: 2px solid #FFF3C4;
  box-shadow: 0 0 0 3px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.22), 0 0 14px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.8);
}
.nvr-scrub-input:hover::-webkit-slider-thumb, .nvr-scrub-input:active::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28), 0 0 18px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.9); }
.nvr-scrub-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.8); }
.nvr-scrub-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.8); }

/* ---- Body ---- */
.nvr-body {
  position: relative; display: grid; grid-template-columns: 232px minmax(0, 1fr) 296px;
  /* The record left .nvr-stage so it can be reordered against the graph on
     phones. Areas keep the desktop layout byte-identical to before: queue
     and graph span both rows, record sits under the transcript. */
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "queue stage graph" "queue record graph";
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.2px); background-size: 22px 22px;
}
/* ambient color, low and deliberate */
.nvr-body::before, .nvr-body::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.nvr-body::before { background: radial-gradient(ellipse 40% 55% at 0% 100%, rgba(var(--nvr-violet-rgb), 0.10), transparent 70%); }
.nvr-body::after  { background: radial-gradient(ellipse 45% 60% at 100% 20%, rgba(var(--nvr-blue-rgb), 0.11), transparent 70%); }
.nvr-body > * { position: relative; z-index: 1; }
.nvr-col-title { font-family: var(--nvr-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nvr-accent, var(--nvr-gold)); font-weight: 500; display: flex; align-items: center; }

/* ---- Queue ---- */
.nvr-queue { grid-area: queue; border-right: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28); display: flex; flex-direction: column; min-width: 0; }
.nvr-queue > .nvr-col-title { padding: 12px 14px 8px; }
.nvr-qlist { display: flex; flex-direction: column; }
.nvr-q {
  position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 9px; row-gap: 5px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; padding: 8px 12px 7px 14px;
  background: transparent; border: 0; border-top: 1px solid rgba(var(--nvr-chrome-rgb), 0.10);
  color: var(--text-1); font-family: inherit;
  opacity: 0; transform: translateX(-14px);
  transition: opacity 520ms var(--nvr-ease), transform 520ms var(--nvr-ease), background 260ms var(--nvr-ease);
}
.nv-replay.is-live .nvr-q { opacity: 1; transform: none; transition-delay: calc(560ms + var(--i, 0) * 50ms); }
.nvr-q::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--nvr-accent, var(--nvr-gold)); box-shadow: 0 0 12px rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.8); transform: scaleY(0); transform-origin: top; transition: transform 380ms var(--nvr-ease); }
.nvr-q:hover { background: rgba(255, 255, 255, 0.035); }
.nvr-q.is-active { background: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.07); }
.nvr-q.is-active::before { transform: scaleY(1); }
.nvr-q:focus-visible { outline: 1px solid var(--nvr-accent, var(--nvr-gold)); outline-offset: -3px; }
.nvr-q-led { width: 7px; height: 7px; border-radius: 50%; background: var(--nvr-ok); box-shadow: 0 0 8px rgba(var(--nvr-ok-rgb), 0.6); }
.nvr-q[data-tone="warn"] .nvr-q-led { background: var(--nvr-warn); box-shadow: 0 0 8px rgba(var(--nvr-warn-rgb), 0.6); }
.nvr-q[data-tone="urgent"] .nvr-q-led { background: var(--nvr-urgent); box-shadow: 0 0 8px rgba(var(--nvr-urgent-rgb), 0.6); }
.nvr-q.is-active .nvr-q-led { animation: nvr-pulse 1.6s ease-in-out infinite; }
@keyframes nvr-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.55; } }
.nvr-q-title { font-size: 12px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; color: var(--text-0); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvr-q-time { font-family: var(--nvr-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.nvr-q-dots { grid-column: 2 / 4; display: flex; align-items: center; gap: 4px; height: 10px; }
.nvr-q-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--nvr-chrome-rgb), 0.22); transition: background 320ms var(--nvr-ease), box-shadow 320ms var(--nvr-ease), transform 320ms var(--nvr-pop); }
.nvr-q-dots i.on { background: var(--fam, var(--nvr-accent, var(--nvr-gold))); box-shadow: 0 0 6px rgba(var(--fam-rgb, var(--nvr-accent-rgb, var(--nvr-gold-rgb))), 0.8); transform: scale(1.25); }
.nvr-q-dots i.held { background: transparent; box-shadow: none; border: 1px solid rgba(var(--nvr-warn-rgb), 0.5); width: 4px; height: 4px; }
.nvr-q-tag { margin-left: auto; font-family: var(--nvr-mono); font-size: 9px; letter-spacing: 0.14em; font-weight: 600; color: var(--nvr-green); opacity: 0; transform: translateX(6px); transition: opacity 320ms var(--nvr-ease), transform 320ms var(--nvr-ease); }
.nvr-q.is-done .nvr-q-tag { opacity: 1; transform: none; }
.nvr-q-tag[data-tone="warn"] { color: var(--nvr-warn); }
.nvr-q-tag[data-tone="urgent"] { color: var(--nvr-urgent); }

/* 24h coverage: where tonight's calls landed on the clock */
/* Lives under the record now, not at the foot of the queue column, so it
   no longer needs margin-top:auto to push itself down. */
.nvr-cov { margin-top: 12px; padding: 10px 0 0; border-top: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28); }
.nvr-cov-note { margin-top: 6px; font-family: var(--nvr-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-3); }
.nvr-cov-note b { color: var(--nvr-accent, var(--nvr-gold)); font-weight: 600; }
.nvr-cov-bar {
  position: relative; height: 22px; margin: 10px 0 6px;
  background:
    linear-gradient(90deg, rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.16) 0 33.33%, rgba(255, 255, 255, 0.04) 33.33% 75%, rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.16) 75% 100%);
  border: 1px solid rgba(var(--nvr-chrome-rgb), 0.18);
}
.nvr-cov-tick {
  position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: var(--nvr-ok); box-shadow: 0 0 6px rgba(var(--nvr-ok-rgb), 0.6);
  opacity: 0; transform: scaleY(0); transition: opacity 400ms var(--nvr-ease), transform 400ms var(--nvr-pop), box-shadow 300ms;
}
.nv-replay.is-live .nvr-cov-tick { opacity: 0.8; transform: none; transition-delay: calc(900ms + var(--i, 0) * 60ms); }
.nvr-cov-tick[data-tone="warn"] { background: var(--nvr-warn); box-shadow: 0 0 6px rgba(var(--nvr-warn-rgb), 0.6); }
.nvr-cov-tick[data-tone="urgent"] { background: var(--nvr-urgent); box-shadow: 0 0 6px rgba(var(--nvr-urgent-rgb), 0.6); }
.nvr-cov-tick.is-active { opacity: 1; top: 1px; bottom: 1px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5); }
.nvr-cov-scale { display: flex; justify-content: space-between; font-family: var(--nvr-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--text-3); }

/* ---- Stage ---- */
.nvr-stage { grid-area: stage; display: flex; flex-direction: column; min-width: 0; padding: 12px 18px 2px; }
.nvr-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nvr-stage-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; min-width: 0; }
.nvr-led { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--nvr-ok); box-shadow: 0 0 10px rgba(var(--nvr-ok-rgb), 0.7); animation: nvr-pulse 1.6s ease-in-out infinite; }
.nvr-led[data-tone="warn"] { background: var(--nvr-warn); box-shadow: 0 0 10px rgba(var(--nvr-warn-rgb), 0.7); }
.nvr-led[data-tone="urgent"] { background: var(--nvr-urgent); box-shadow: 0 0 10px rgba(var(--nvr-urgent-rgb), 0.7); animation-duration: 0.9s; }
.nvr-stage-meta { font-family: var(--nvr-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nvr-stage-meta #nvr-timer { color: var(--text-1); }

.nvr-wave { display: flex; align-items: center; gap: 3px; height: 26px; margin: 8px 0 6px; opacity: 0.9; }
.nvr-wave i { display: block; width: 3px; height: 100%; border-radius: 2px; background: rgba(var(--nvr-chrome-rgb), 0.30); transform: scaleY(0.08); transform-origin: center; transition: background 260ms var(--nvr-ease), transform 260ms var(--nvr-ease); }
.nvr-wave.is-ai i     { background: var(--nvr-accent, var(--nvr-gold)); animation: nvr-bar var(--d, 700ms) ease-in-out var(--o, 0ms) infinite alternate; }
.nvr-wave.is-caller i { background: var(--nvr-blue); animation: nvr-bar var(--d, 700ms) ease-in-out var(--o, 0ms) infinite alternate; }
@keyframes nvr-bar { from { transform: scaleY(0.10); } to { transform: scaleY(var(--h, 0.9)); } }

.nvr-transcript {
  height: 232px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.35) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 12px), transparent 100%);
}
.nvr-transcript::-webkit-scrollbar { width: 4px; }
.nvr-transcript::-webkit-scrollbar-thumb { background: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.35); }
.nvr-msg { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 9px; opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--nvr-ease), transform 420ms var(--nvr-ease); }
.nvr-msg.in { opacity: 1; transform: none; }
.nvr-msg[hidden] { display: none; }
.nvr-msg .who { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--nvr-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
.nvr-msg.caller .who { background: rgba(var(--nvr-blue-rgb), 0.12); color: var(--nvr-blue); border: 1px solid rgba(var(--nvr-blue-rgb), 0.6); }
.nvr-msg.ai .who { background: var(--gold-gloss, linear-gradient(180deg, #FFF7CD, #D4A843 50%, #9E6E26)); color: #000; }
/* .nvr-bubble on purpose: the page's universal glass rule brackets every .bubble */
.nvr-msg .nvr-bubble { flex: 1 1 auto; min-width: 0; padding: 8px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-1); background: rgba(var(--nvr-blue-rgb), 0.06); border: 1px solid rgba(var(--nvr-blue-rgb), 0.28); }
.nvr-msg.ai .nvr-bubble { background: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.06); border-color: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.32); color: var(--text-0); }
.nvr-msg .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nvr-typed { white-space: pre-wrap; }
.nvr-typed.typing::after { content: ""; display: inline-block; width: 7px; height: 1em; vertical-align: -0.15em; margin-left: 2px; background: var(--nvr-blue); opacity: 0.85; animation: nvr-caret 0.8s steps(1) infinite; }
.nvr-msg.ai .nvr-typed.typing::after { background: var(--nvr-accent, var(--nvr-gold)); }
@keyframes nvr-caret { 50% { opacity: 0; } }
.nvr-think { display: inline-flex; gap: 4px; align-items: center; height: 1em; vertical-align: middle; }
.nvr-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--nvr-accent, var(--nvr-gold)); animation: nvr-think 900ms ease-in-out infinite; }
.nvr-think i:nth-child(2) { animation-delay: 150ms; }
.nvr-think i:nth-child(3) { animation-delay: 300ms; }
@keyframes nvr-think { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-3px); opacity: 1; } }

.nvr-outcome {
  margin-top: 8px; padding: 9px 0 0; border-top: 1px dashed rgba(var(--nvr-green-rgb), 0.45); min-height: 30px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--nvr-mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; color: var(--nvr-green);
}
.nvr-outcome[data-tone="warn"] { color: var(--nvr-warn); border-top-color: rgba(var(--nvr-warn-rgb), 0.45); }
.nvr-outcome[data-tone="urgent"] { color: var(--nvr-urgent); border-top-color: rgba(var(--nvr-urgent-rgb), 0.45); }
.nvr-outcome > * { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--nvr-ease), transform 500ms var(--nvr-ease); }
.nvr-outcome.in > * { opacity: 1; transform: none; }
.nvr-outcome svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* matter record, two-up under the transcript */
.nvr-record { grid-area: record; padding: 10px 18px 14px; border-top: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28); }
.nvr-record dl { margin: 8px 0 0; display: grid; grid-template-columns: 82px minmax(0, 1fr) 82px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; }
.nvr-record dt { font-family: var(--nvr-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; padding-top: 1px; display: flex; align-items: center; gap: 6px; }
.nvr-record dt::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fam, rgba(var(--nvr-chrome-rgb), 0.35)); flex-shrink: 0; opacity: 0.35; transition: opacity 300ms, box-shadow 300ms; }
.nvr-record dt.on::before { opacity: 1; box-shadow: 0 0 6px rgba(var(--fam-rgb, var(--nvr-chrome-rgb)), 0.8); }
.nvr-record dd { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-0); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.35; transform: translateX(6px); transition: opacity 420ms var(--nvr-ease), transform 420ms var(--nvr-ease), color 300ms; }
.nvr-record dd:empty::before { content: "\00B7\00B7\00B7"; color: rgba(var(--nvr-chrome-rgb), 0.30); letter-spacing: 0.1em; }
.nvr-record dd.on { opacity: 1; transform: none; }
.nvr-record dd.flag { color: var(--nvr-warn); font-family: var(--nvr-mono); font-size: 10.5px; letter-spacing: 0.08em; }
.nvr-record dd.urgent { color: var(--nvr-urgent); font-family: var(--nvr-mono); font-size: 10.5px; letter-spacing: 0.08em; }

/* ---- Graph ---- */
.nvr-graph { grid-area: graph; border-left: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28); padding: 12px 14px 12px; display: flex; flex-direction: column; min-width: 0; }
.nvr-legend { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.nvr-legend span { font-family: var(--nvr-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fam); padding: 2px 7px 1px; border: 1px solid rgba(var(--fam-rgb), 0.55); background: rgba(var(--fam-rgb), 0.08); }
/* Takes the column's leftover height so the pipeline stretches to fill it.
   The svg is absolute inside, so measuring this box cannot feed back into
   its own height and the JS can size the viewBox to match it exactly. */
.nvr-svgwrap { position: relative; flex: 1 1 auto; min-height: 320px; margin: 8px 0 0; }
/* live per-call readouts, all derived from the replay itself */
.nvr-stats { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28); display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.nvr-stat { text-align: center; padding: 6px 5px 5px; border: 1px solid rgba(var(--fam-rgb), 0.35); background: linear-gradient(180deg, rgba(var(--fam-rgb), 0.10), rgba(var(--fam-rgb), 0.03)); min-width: 0; }
.nvr-stat b { display: block; font-family: var(--nvr-mono); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--fam); font-variant-numeric: tabular-nums; transition: transform 260ms var(--nvr-pop); }
.nvr-stat b.bump { transform: scale(1.12); }
.nvr-stat span { display: block; margin-top: 4px; font-family: var(--nvr-mono); font-size: 7px; letter-spacing: 0.07em; line-height: 1.25; text-transform: uppercase; color: var(--text-3); white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.nvr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.nvr-edge { fill: none; stroke: rgba(var(--nvr-chrome-rgb), 0.22); stroke-width: 1.2; }
.nvr-edge-on { fill: none; stroke: var(--fam, var(--nvr-accent, var(--nvr-gold))); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: var(--len, 100); stroke-dashoffset: var(--len, 100); filter: drop-shadow(0 0 3px rgba(var(--fam-rgb, var(--nvr-accent-rgb, var(--nvr-gold-rgb))), 0.7)); transition: stroke-dashoffset 640ms var(--nvr-ease), stroke 300ms; }
.nvr-edge-on.on { stroke-dashoffset: 0; }
.nvr-edge-flow { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0; transition: opacity 400ms 500ms; }
.nvr-edge-flow.on { opacity: 0.55; animation: nvr-flow 1.1s linear infinite; }
@keyframes nvr-flow { to { stroke-dashoffset: -11; } }
.nvr-node { opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center; transition: opacity 420ms var(--nvr-ease), transform 420ms var(--nvr-pop); }
.nv-replay.is-live .nvr-node { opacity: 1; transform: none; transition-delay: calc(700ms + var(--i, 0) * 45ms); }
.nvr-node circle.core { fill: #000; stroke: rgba(var(--nvr-chrome-rgb), 0.55); stroke-width: 1.4; transition: fill 320ms var(--nvr-ease), stroke 320ms var(--nvr-ease); }
.nvr-node circle.ring { fill: none; stroke: var(--fam, var(--nvr-accent, var(--nvr-gold))); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nvr-node text { fill: var(--text-3); font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; letter-spacing: 0.01em; transition: fill 320ms; }
.nvr-node text.val { fill: var(--fam, var(--nvr-accent, var(--nvr-gold))); font-family: var(--nvr-mono); font-size: 9.2px; letter-spacing: 0.02em; opacity: 0; transition: opacity 400ms var(--nvr-ease) 120ms; }
.nvr-node.on circle.core, .nvr-node.flag circle.core, .nvr-node.urgent circle.core { fill: var(--fam); stroke: #fff; filter: drop-shadow(0 0 5px rgba(var(--fam-rgb), 0.9)); }
.nvr-node.on text, .nvr-node.flag text, .nvr-node.urgent text { fill: var(--text-0); }
.nvr-node.on text.val, .nvr-node.flag text.val, .nvr-node.urgent text.val { opacity: 1; }
.nvr-node.on circle.ring, .nvr-node.flag circle.ring, .nvr-node.urgent circle.ring { animation: nvr-ring 1100ms var(--nvr-ease) 1; }
@keyframes nvr-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.nvr-node.urgent circle.core { animation: nvr-urgent 0.9s ease-in-out infinite; }
.nvr-node.urgent circle.ring { animation: nvr-ring 900ms var(--nvr-ease) 3; }
@keyframes nvr-urgent { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.nvr-node.held circle.core { fill: #000; stroke: rgba(var(--nvr-warn-rgb), 0.55); stroke-dasharray: 2 2.5; }
.nvr-node.held text { fill: rgba(var(--nvr-chrome-rgb), 0.45); }
.nvr-node.held text.val { fill: rgba(var(--nvr-warn-rgb), 0.75); opacity: 1; }
.nv-replay.is-live .nvr-node.side { opacity: 0.42; }
.nv-replay.is-live .nvr-node.side.on, .nv-replay.is-live .nvr-node.side.flag, .nv-replay.is-live .nvr-node.side.urgent { opacity: 1; }
.nvr-node.side text { font-size: 10.2px; text-anchor: middle; }
.nvr-node.side text.val { text-anchor: middle; }
/* scrubbing: no pulses, no replays of entrance motion */
.nv-replay.is-scrubbing .nvr-node circle.ring { animation: none !important; }
.nv-replay.is-scrubbing .nvr-msg, .nv-replay.is-scrubbing .nvr-record dd, .nv-replay.is-scrubbing .nvr-edge-on, .nv-replay.is-scrubbing .nvr-q-dots i, .nv-replay.is-scrubbing .nvr-mark { transition-duration: 120ms; }

/* ---- Event log ---- */
.nvr-log { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 16px; border-top: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.42); font-family: var(--nvr-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-3); overflow: hidden; white-space: nowrap; }
.nvr-log-pre { color: var(--nvr-accent, var(--nvr-gold)); flex-shrink: 0; }
.nvr-log-line { display: inline-block; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nvr-log-line.tick { animation: nvr-logline 420ms var(--nvr-ease) 1; }
@keyframes nvr-logline { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nvr-log-line b { color: var(--text-1); font-weight: 500; }
.nvr-log-line em { color: var(--nvr-green); font-style: normal; }
.nvr-log-line em.flag { color: var(--nvr-warn); }
.nvr-log-line em.urgent { color: var(--nvr-urgent); }

.nvr-caption { margin: 14px auto 0; max-width: 640px; text-align: center; font-family: var(--nvr-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); line-height: 1.7; }

/* ---- Responsive ---- */
@media (max-width: 1140px) {
  .nvr-body { grid-template-columns: 210px minmax(0, 1fr) 268px; }
  .nvr-tally { display: none; }
}
@media (max-width: 960px) {
  .nvr-body {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    /* Swapped against desktop: on one column the pipeline is the payoff and
       belongs right under the transcript, not below a ten row record. */
    grid-template-areas: "queue" "stage" "graph" "record";
  }
  .nvr-queue { border-right: 0; border-bottom: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28); }
  .nvr-queue > .nvr-col-title { padding-bottom: 6px; }
  .nvr-qlist { flex-direction: row; overflow-x: auto; gap: 8px; padding: 4px 14px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .nvr-qlist::-webkit-scrollbar { display: none; }
  .nvr-q { flex: 0 0 188px; border: 1px solid rgba(var(--nvr-chrome-rgb), 0.18); padding: 9px 11px 8px 13px; scroll-snap-align: start; transform: translateY(10px); }
  .nvr-q.is-active { border-color: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.6); }
  .nvr-cov { margin-top: 10px; padding: 9px 0 0; }
  .nvr-stage { padding: 12px 14px 2px; }
  .nvr-record { padding: 10px 14px 14px; }
  .nvr-transcript { height: 224px; }
  .nvr-graph { border-left: 0; border-top: 1px solid rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.28); }
}
@media (max-width: 600px) {
  .nvr-topbar { gap: 6px; padding: 0 8px; min-height: 42px; }
  .nvr-pill { display: none; }
  .nvr-brand { font-size: 9.5px; letter-spacing: 0.08em; min-width: 0; }
  .nvr-brand .nvr-sep { margin: 0 4px; }
  .nvr-live { margin-right: 7px; }
  .nvr-clock { margin-left: auto; font-size: 12px; letter-spacing: 0.03em; }
  .nvr-controls { gap: 4px; flex-shrink: 0; }
  .nvr-btn { width: 26px; height: 26px; }
  .nvr-btn svg { width: 12px; height: 12px; }
  .nvr-stats { margin-top: 12px; }
  .nvr-scrub { padding: 0 12px; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .nvr-record dl { grid-template-columns: 82px minmax(0, 1fr); }
  .nvr-stage-title { font-size: 14px; }
  .nvr-msg .nvr-bubble { font-size: 13px; }
  .nvr-log { font-size: 10px; padding: 0 12px; }
}

@media (max-width: 400px) {
  .nvr-brand-vert { display: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .nvr-frame, .nvr-frame::before, .nvr-topbar > *, .nvr-scrub, .nvr-q, .nvr-q::before, .nvr-node, .nvr-msg, .nvr-outcome > *, .nvr-record dd, .nvr-edge-on, .nvr-q-dots i, .nvr-tally b, .nvr-cov-tick, .nvr-mark { transition: none !important; }
  .nvr-live, .nvr-led, .nvr-q-led, .nvr-wave i, .nvr-node circle, .nvr-think i, .nvr-typed.typing::after, .nvr-log-line, .nvr-edge-flow { animation: none !important; }
  .nvr-wave.is-ai i, .nvr-wave.is-caller i { transform: scaleY(0.5); }
  .nvr-frame::before { display: none; }
}

/* ---- Objective beats -------------------------------------------------
   The replay holds for a moment each time the pipeline lights up, and
   these are what it holds on. All of them are re-triggered from JS by
   removing the class, forcing reflow and adding it back, so a burst of
   three objectives flares three times rather than once. */
@keyframes nvr-hit-core { 0% { transform: scale(1); } 38% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes nvr-hit-ring { 0% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(3.8); } }
.nv-replay .nvr-node.is-hit .core { transform-box: fill-box; transform-origin: center; animation: nvr-hit-core 640ms var(--nvr-pop) 1; }
.nv-replay .nvr-node.is-hit .ring { transform-box: fill-box; transform-origin: center; animation: nvr-hit-ring 760ms var(--nvr-ease) 1; }

@keyframes nvr-hit-dot { 0%, 100% { transform: scale(1.25); } 45% { transform: scale(2.3); } }
.nv-replay .nvr-q-dots i.is-hit { animation: nvr-hit-dot 580ms var(--nvr-pop) 1; }

@keyframes nvr-hit-row { 0% { background: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0.30); }
                         100% { background: rgba(var(--nvr-accent-rgb, var(--nvr-gold-rgb)), 0); } }
.nv-replay .nvr-record dd.is-hit { border-radius: 3px; animation: nvr-hit-row 900ms var(--nvr-ease) 1; }

@keyframes nvr-count-bump { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.38); } }
.nv-replay #nvr-nodecount { display: inline-block; }
.nv-replay #nvr-nodecount.bump { animation: nvr-count-bump 520ms var(--nvr-pop) 1; color: var(--nvr-accent, var(--nvr-gold)); }

/* ---- The payoff ------------------------------------------------------
   Every objective met. The console sits here for END_HOLD rather than
   cutting to the next call, and the whole pipeline takes a bow in order. */
@keyframes nvr-celebrate { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.26); } }
.nv-replay.is-complete .nvr-node.on,
.nv-replay.is-complete .nvr-node.flag,
.nv-replay.is-complete .nvr-node.urgent {
  transform-box: fill-box; transform-origin: center;
  animation: nvr-celebrate 720ms var(--nvr-pop) calc(var(--i, 0) * 58ms) 1;
}
@keyframes nvr-outcome-glow {
  0% { box-shadow: 0 0 0 1px rgba(var(--nvr-ok-rgb), 0.30), 0 0 0 rgba(var(--nvr-ok-rgb), 0); }
  45% { box-shadow: 0 0 0 1px rgba(var(--nvr-ok-rgb), 0.75), 0 0 34px rgba(var(--nvr-ok-rgb), 0.38); }
  100% { box-shadow: 0 0 0 1px rgba(var(--nvr-ok-rgb), 0.30), 0 0 0 rgba(var(--nvr-ok-rgb), 0); }
}
.nv-replay.is-complete .nvr-outcome.in { animation: nvr-outcome-glow 1500ms var(--nvr-ease) 2; border-radius: 4px; }
.nv-replay.is-complete .nvr-stats .nvr-stat { animation: nvr-celebrate 620ms var(--nvr-pop) calc(620ms + var(--si, 0) * 90ms) 1; }
.nv-replay.is-complete .nvr-stat:nth-child(1) { --si: 0; }
.nv-replay.is-complete .nvr-stat:nth-child(2) { --si: 1; }
.nv-replay.is-complete .nvr-stat:nth-child(3) { --si: 2; }
.nv-replay.is-complete .nvr-stat:nth-child(4) { --si: 3; }

@media (prefers-reduced-motion: reduce) {
  .nv-replay .nvr-node.is-hit .core, .nv-replay .nvr-node.is-hit .ring,
  .nv-replay .nvr-q-dots i.is-hit, .nv-replay .nvr-record dd.is-hit,
  .nv-replay #nvr-nodecount.bump,
  .nv-replay.is-complete .nvr-node.on, .nv-replay.is-complete .nvr-node.flag,
  .nv-replay.is-complete .nvr-node.urgent, .nv-replay.is-complete .nvr-outcome.in,
  .nv-replay.is-complete .nvr-stats .nvr-stat { animation: none; }
}

/* ---- Console CTA row -------------------------------------------------
   Icon left, copy in the middle, arrow pushed hard right with margin-left
   auto. Shared by the console and the ROI calculator so both read the same.
   Only layout is set on .hero-cta-chrome-inner here: giving it a background
   would wipe the silver plate. */
.nvr-cta-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 14px; max-width: 1180px; margin: 0 auto; }
/* Content width, like every other chrome CTA on the site. These were
   stretching to 440px and reading as banners rather than buttons. */
.nvr-cta-row .hero-cta-chrome { flex: 0 0 auto; }
.nvr-cta-row .hero-cta-chrome-inner {
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; padding: 11px 22px;
}
.nvr-cta-row .nvr-cta-i { width: 20px; height: 20px; flex: 0 0 auto; opacity: 0.88; }
.nvr-cta-row .nvr-cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; }
.nvr-cta-row .nvr-cta-sub {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  /* Bold, because at 9px a 500 weight goes muddy on the silver plate. */
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: none;
  opacity: 0.78; white-space: nowrap;
}
.nvr-cta-row .nvr-cta-arrow { width: 17px; height: 17px; flex: 0 0 auto; margin-left: 8px; opacity: 0.68; transition: transform 0.25s var(--nvr-ease, ease); }
.nvr-cta-row .hero-cta-chrome:hover .nvr-cta-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .nvr-cta-row .nvr-cta-arrow { transition: none; } }
@media (max-width: 560px) {
  .nvr-cta-row { gap: 10px; }
  .nvr-cta-row .hero-cta-chrome-inner { padding: 10px 16px; gap: 10px; }
  .nvr-cta-row .nvr-cta-sub { font-size: 8.2px; }
}

/* .nvr-cta-row resets margin to 0 auto, which left the agent demo console
   and the giveback panel touching the CTA rows under them. Restore the gap
   with higher specificity. */
.agentdemo-cta.nvr-cta-row { margin: 40px auto 8px; }
.nvr-cta-row.giveback-cta-row { margin-top: 40px; }
@media (max-width: 640px) {
  .agentdemo-cta.nvr-cta-row,
  .nvr-cta-row.giveback-cta-row { margin-top: 32px; }
}

/* App store strip under every .nvr-cta-row. Reuses .store-badge but swaps the
   chrome frame for a gold one with a breathing glow so it reads as its own
   action next to the chrome CTA buttons. */
.nvr-cta-stores {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 26px auto 0; padding: 0 16px; max-width: 1180px;
}
.nvr-cta-stores-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--nvr-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: #E8C66A;
  text-shadow: 0 0 14px rgba(212, 168, 67, 0.45);
}
.nvr-cta-stores-label::before,
.nvr-cta-stores-label::after {
  content: ""; width: 38px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 198, 106, 0.85));
}
.nvr-cta-stores-label::after { transform: scaleX(-1); }
.nvr-cta-stores-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.nvr-cta-stores .store-badge {
  min-width: 200px; padding: 14px 24px;
  background: linear-gradient(160deg, rgba(232, 198, 106, 0.16), rgba(0, 0, 0, 0.55)) !important;
  animation: nvr-store-glow 3.2s ease-in-out infinite;
}
.nvr-cta-stores .store-badge--google { animation-delay: 1.6s; }
.nvr-cta-stores .store-badge::after {
  background: linear-gradient(135deg, #FFE7A3 0%, #D4A843 40%, rgba(212, 168, 67, 0.35) 60%, #F4D27A 100%);
}
.nvr-cta-stores .store-badge:hover,
.nvr-cta-stores .store-badge:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6), 0 0 42px rgba(232, 198, 106, 0.55);
}
.nvr-cta-stores .store-badge:focus-visible { outline: 2px solid rgba(255, 237, 179, 0.92); outline-offset: 3px; }
@keyframes nvr-store-glow {
  0%, 100% { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(212, 168, 67, 0.22); }
  50%      { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 34px rgba(232, 198, 106, 0.48); }
}
.roi-action .nvr-cta-stores { margin-top: 12px; }
@media (max-width: 560px) {
  .nvr-cta-stores { margin-top: 22px; }
  .nvr-cta-stores-row { gap: 10px; }
  .nvr-cta-stores .store-badge { min-width: 0; flex: 1 1 150px; max-width: 230px; padding: 12px 16px; gap: 10px; justify-content: center; }
  .nvr-cta-stores .store-badge { padding: 12px 14px; gap: 9px; }
  .nvr-cta-stores .store-text-lg { font-size: 15px; }
}
.nvr-cta-stores .store-text-sm,
.nvr-cta-stores .store-text-lg { white-space: nowrap; }
/* Connected and syllabic scripts break apart under wide tracking. */
:is(:lang(ar), :lang(fa), :lang(bn), :lang(hi), :lang(th), :lang(ja), :lang(ko), :lang(zh)) .nvr-cta-stores-label { letter-spacing: 0.02em; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .nvr-cta-stores .store-badge { animation: none; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 26px rgba(212, 168, 67, 0.36); }
  .nvr-cta-stores .store-badge::before { animation: none; }
}

/* The pipeline is vertical on phones too now, so it needs real height to
   walk down rather than being squashed into a strip. */
@media (max-width: 960px) {
  .nvr-svgwrap { min-height: 430px; }
}
@media (max-width: 560px) {
  .nvr-svgwrap { min-height: 400px; }
}

/* Narrow desktop (961-1100px): five nav items, the language pill and the header CTA fit on one row in
   every language (Articles joined the nav 2026-10-21). Labels never break inside the bar. */
@media (min-width: 961px) and (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .nav-links > li > a, .nav-links > li > button { font-size: 15px; white-space: nowrap; }
  header.nav .logo-img { max-width: 160px; height: auto; }
  header.nav .hero-cta-chrome.is-nav:not(.nav-phone):not(.mega-foot-cta) .hero-cta-chrome-text { white-space: nowrap; }
}