/* header.css — site header (glass mega-nav), fx- namespaced + self-contained.
   Vars + a scoped box/margin reset live here so it works on every page
   (homepage AND the PHP feature/industry pages) with zero conflict. */
.fx-site-header{
  --ink:#1d1d1f; --ink-2:#6e6e73; --bg:#ffffff; --accent:#0071e3;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
.fx-site-header, .fx-site-header *, .fx-site-header *::before, .fx-site-header *::after{ box-sizing:border-box; }
.fx-site-header :where(ul,ol,li,p,h1,h2,h3,h4,h5,h6,figure,menu,section){ margin:0; padding:0; list-style:none; }
/* the template's global `section{padding:110px 0}` (style.css / responsive.css)
   was leaking into the mega-menu groups (they are <section>) and stretching the
   card — lock the group padding explicitly with a class so it always wins */
.fx-site-header .fx-mega-group{ padding:0; margin:0; }
.fx-site-header :where(a){ text-decoration:none; color:inherit; }

/* ═══════════ HEADER / NAV — glass ═══════════
   Two states:
   · over the hero (top of page)  → fully transparent, white links, white Signup pill
   · scrolled / menu open         → frosted glass bar with dark links
   Everything cross-fades — no hard swaps. */
.fx-site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(15, 30, 60, 0.04);
  /* NOTE: backdrop-filter is deliberately NOT transitioned — animating a
     blur re-filters the whole bar every frame and stutters on hover;
     the near-white background hides the instant swap completely */
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), opacity .4s ease,
              background .45s ease, box-shadow .45s ease, border-color .45s ease;
  animation: navIn .65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* home page: nav is the second-to-last beat of the hero intro —
   waits for phone → title → copy → buttons, then slides down.
   `backwards` keeps it hidden through the delay but releases the
   transform after, so .fx-nav-hidden scroll behavior still works. */
.fx-home .fx-site-header {
  animation: navIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 2.4s backwards;
}
@keyframes navIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-site-header, .fx-home .fx-site-header { animation: none; }
}
.fx-site-header.fx-scrolled {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 30px rgba(15, 30, 60, 0.08);
}
/* bar matches the mobile dropdown so they read as one solid surface */
.fx-site-header.fx-menu-open {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: transparent;
}
/* bar brightens to a stronger glass while a mega panel is open so it
   reads as one continuous surface with the glass panel below it */
.fx-site-header.fx-mega-open:not(.fx-on-hero),
.fx-site-header.fx-mega-open.fx-scrolled {
  background: rgba(255, 255, 255, 0.92);
}
/* ── blended into the hero: no bar at all, just the content ── */
.fx-site-header.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* hidden while the user is actively scrolling; slides back when they stop */
.fx-site-header.fx-nav-hidden {
  transform: translateY(-104%);
  opacity: 0;
  pointer-events: none;
}

.fx-nav {
  width: 100%; height: 74px;
  padding: 0 clamp(16px, 2vw, 32px);
  display: flex; align-items: center; gap: 24px;
  transition: height .45s var(--ease);
}
/* bar tightens up once it turns to glass */
.fx-site-header.fx-scrolled .fx-nav { height: 64px; }

/* ───────── brand — logo + wordmark ───────── */
.fx-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.fx-brand-logo {
  width: 44px; height: 44px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(29, 78, 216, .22));
  transition: transform .4s var(--ease), filter .45s ease;
}
.fx-brand:hover .fx-brand-logo { transform: translateY(-2px) scale(1.06); }
/* wordmark matches the nav links — same size, weight, spacing */
.fx-brand-name {
  font-weight: 500; font-size: .98rem;
  color: var(--ink);
  transition: color .45s ease;
}
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-brand-name { color: #fff; }
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-brand-logo { filter: drop-shadow(0 6px 14px rgba(10, 35, 90, .35)); }

/* ───────── menu (links + actions) ───────── */
.fx-nav-menu { display: flex; align-items: center; flex: 1; min-width: 0; }
/* NOTE: .fx-nav-links must stay unpositioned — the mega panels' absolute
   coordinates resolve against the fixed header, and the glider pill is
   likewise positioned in header space by header.js */
.fx-nav-links { display: flex; gap: 10px; margin: 0 auto; }
.fx-nav-links a {
  position: relative; z-index: 1; display: block;
  padding: 9px 16px; border-radius: 999px;
  font-size: .98rem; font-weight: 500; color: var(--ink); opacity: .85;
  transition: opacity .25s, color .45s ease;
}
.fx-nav-links a:hover { opacity: 1; color: var(--accent); }

/* liquid-glass pill that glides between links — sized and moved by
   header.js on hover, so travelling Features → Solutions reads as one
   piece of glass sliding under the labels instead of two hard swaps */
.fx-nav-glider {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 999px; pointer-events: none; opacity: 0;
  /* glassy look from gradient + highlights only — NO backdrop-filter:
     blurring while the pill glides re-filters every frame and stutters */
  background: linear-gradient(180deg, rgba(0, 113, 227, .11), rgba(0, 113, 227, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 0 0 1px rgba(255, 255, 255, .25),
              0 3px 10px rgba(10, 35, 90, .08);
  will-change: transform, width;
  transition: transform .5s cubic-bezier(.3, 1.3, .35, 1), width .5s cubic-bezier(.3, 1.3, .35, 1),
              height .5s cubic-bezier(.3, 1.3, .35, 1), opacity .28s ease,
              background .45s ease, box-shadow .45s ease;
}
.fx-nav-glider.fx-on { opacity: 1; }
/* first hover after being hidden: appear in place, no cross-bar slide */
.fx-nav-glider.fx-snap { transition: opacity .28s ease, background .45s ease, box-shadow .45s ease; }

/* "you are here" — the nav item for the page the user is on keeps a
   quiet glass pill (header.js sets .fx-is-current from the URL) */
.fx-nav-links > li > a.fx-is-current {
  opacity: 1; color: var(--accent);
  background: rgba(0, 113, 227, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* links go white over the hero */
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav-links a { color: #fff; opacity: .92; }
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav-links a:hover { color: #fff; opacity: 1; }
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav-glider {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 4px 14px rgba(10, 35, 90, .14);
}
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav-links > li > a.fx-is-current {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ───────── right actions ───────── */
.fx-nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* desktop: no Login/Signup in the bar — they live in the mobile curtain menu;
   links sit on the right side instead of centered */
@media (min-width: 861px) {
  .fx-nav-actions { display: none; }
  .fx-nav-links { margin: 0 0 0 auto; }
}

/* Login — quiet ghost pill */
.fx-nav-login {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 999px;
  border: 1.5px solid rgba(29, 29, 31, .16);
  font-size: .95rem; font-weight: 600; color: var(--ink);
  transition: color .45s ease, border-color .45s ease, background .3s, transform .35s var(--ease);
}
.fx-nav-login:hover { color: var(--accent); border-color: rgba(0, 113, 227, .5); background: rgba(0, 113, 227, .06); transform: translateY(-1px); }
.fx-nav-login:active { transform: scale(.97); }

.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav-login { color: #fff; border-color: rgba(255, 255, 255, .45); }
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav-login:hover { color: #fff; border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .12); }

/* Signup — gradient pill on glass, flips to white-on-blue over the hero.
   The gradient lives on ::after so the two looks can cross-fade. */
.fx-btn-signup {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 27px; border-radius: 999px;
  background: #fff;
  color: #fff; font-weight: 700; font-size: .96rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px rgba(0, 113, 227, .32);
  transition: transform .35s var(--ease), box-shadow .45s ease, color .45s ease;
}
.fx-btn-signup::after {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: linear-gradient(120deg, #2563eb 0%, #0071e3 60%, #38a2ff 100%);
  background-size: 160% 100%;
  transition: opacity .45s ease, background-position .5s var(--ease);
}
.fx-btn-signup:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 30px rgba(0, 113, 227, .45);
}
.fx-btn-signup:hover::after { background-position: 100% 0; }
.fx-btn-signup:active { transform: scale(.96); }
/* soft shine sweep */
.fx-btn-signup::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.fx-btn-signup:hover::before { left: 125%; }

.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-btn-signup {
  color: #0b3ea8;
  box-shadow: 0 10px 26px rgba(10, 35, 90, .3);
}
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-btn-signup::after { opacity: 0; }
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-btn-signup:hover {
  box-shadow: 0 14px 32px rgba(10, 35, 90, .4);
}

/* keyboard focus */
.fx-nav a:focus-visible, .fx-nav button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px;
}
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav a:focus-visible,
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav button:focus-visible { outline-color: #fff; }

/* ───────── burger (mobile) ───────── */
.fx-nav-burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; }
.fx-nav-burger span { width: 21px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s, background .45s ease; }
.fx-on-hero:not(.fx-scrolled):not(.fx-menu-open) .fx-nav-burger span { background: #fff; }

@media (max-width: 860px) {
  .fx-nav { height: 64px; }
  .fx-site-header.fx-scrolled .fx-nav { height: 58px; }
  .fx-brand-logo { width: 38px; height: 38px; }
  .fx-brand-name { font-size: 1.06rem; }
  .fx-nav-burger { display: flex; }
  /* keep the brand + X above the left drawer, which overlaps the bar */
  .fx-brand, .fx-nav-burger { position: relative; z-index: 2; }

  /* while the drawer is open the bar itself goes clear — otherwise its
     full-width white strip reads as a separate floating piece above the
     narrower drawer. It also drops its own backdrop blur: a
     backdrop-filtered ancestor becomes the backdrop root, which would
     stop the drawer's and scrim's blur from reaching the page behind. */
  .fx-site-header.fx-menu-open {
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* page scrim behind the drawer — a light frosted veil, blurred not
     darkened (matches the desktop mega-menu scrim).
     NOTE: the header's backdrop-filter makes it the containing block for
     fixed descendants, so this must hang off the bar with absolute
     positioning — `position: fixed; inset: 0` gets trapped in the bar box. */
  .fx-site-header::before {
    content: ""; position: absolute; z-index: -1;
    left: 0; right: 0; top: 0; height: 100dvh;
    background: rgba(56, 130, 246, .16);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
  }
  .fx-site-header.fx-menu-open::before { opacity: 1; pointer-events: auto; }

  /* drawer panel — slides in from the LEFT as a frosted glass sheet
     (same recipe as the desktop mega panel: heavy blur + the frosted
     page behind keep the text legible through the translucent sheet).
     Sits under the fixed bar (brand + X stay on top). */
  .fx-nav-menu {
    position: absolute; top: 0; left: 0; right: auto;
    width: min(330px, 86vw);
    height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .74) 100%);
    -webkit-backdrop-filter: saturate(200%) blur(42px);
    backdrop-filter: saturate(200%) blur(42px);
    border-right: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 30px 0 60px rgba(10, 35, 90, .18),
                inset 0 1px 0 rgba(255, 255, 255, .95);
    padding: 78px 18px 24px;  /* clears the brand row floating on top */
    visibility: hidden;
    transform: translateX(-104%);
    transition: transform .45s var(--ease), visibility 0s linear .45s;
  }
  .fx-site-header.fx-menu-open .fx-nav-menu {
    visibility: visible;
    transform: translateX(0);
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .fx-nav-links { flex-direction: column; gap: 4px; margin: 0; }
  .fx-nav-glider { display: none; }   /* pill is a desktop-hover affordance */
  .fx-nav-links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px; font-size: 1.06rem; font-weight: 600;
    border-radius: 14px; opacity: 1;
  }
  .fx-nav-links a::after {
    /* repurpose the underline as a trailing chevron */
    content: "\203A"; position: static; display: block;
    height: auto; background: none; transform: none;
    font-size: 1.25rem; line-height: 1; color: rgba(29, 29, 31, .3);
    transition: transform .3s var(--ease), color .3s;
  }
  .fx-nav-links a:hover { background: rgba(0, 113, 227, .08); }
  .fx-nav-links a:hover::after { transform: translateX(4px); color: var(--accent); }

  /* links sweep in from the left, one after another */
  .fx-nav-links li, .fx-nav-actions {
    opacity: 0; transform: translateX(-22px);
    transition: opacity .3s ease, transform .4s var(--ease);
  }
  .fx-site-header.fx-menu-open .fx-nav-links li, .fx-site-header.fx-menu-open .fx-nav-actions {
    opacity: 1; transform: none;
  }
  .fx-site-header.fx-menu-open .fx-nav-links li:nth-child(1) { transition-delay: .08s; }
  .fx-site-header.fx-menu-open .fx-nav-links li:nth-child(2) { transition-delay: .13s; }
  .fx-site-header.fx-menu-open .fx-nav-links li:nth-child(3) { transition-delay: .18s; }
  .fx-site-header.fx-menu-open .fx-nav-links li:nth-child(4) { transition-delay: .23s; }
  .fx-site-header.fx-menu-open .fx-nav-links li:nth-child(5) { transition-delay: .28s; }
  .fx-site-header.fx-menu-open .fx-nav-actions { transition-delay: .34s; }

  /* actions — simple side-by-side pair */
  .fx-nav-actions {
    flex-direction: row; align-items: stretch; gap: 10px;
    margin-top: 16px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .07);
  }
  .fx-nav-login, .fx-btn-signup { flex: 1; justify-content: center; padding: 13px 10px; font-size: 1rem; }
  .fx-btn-signup::before { display: none; }  /* tap-triggered shine reads as a glitch on touch */

  /* no backdrop-filter → glass would just be see-through; go solid */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fx-nav-menu { background: #fff; }
    .fx-site-header::before { background: rgba(56, 130, 246, .3); }
  }

  /* burger → X */
  .fx-site-header.fx-menu-open .fx-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fx-site-header.fx-menu-open .fx-nav-burger span:nth-child(2) { opacity: 0; }
  .fx-site-header.fx-menu-open .fx-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-site-header { animation: none; transition: background .4s, box-shadow .4s; }
  .fx-site-header.fx-nav-hidden { transform: none; opacity: 1; pointer-events: auto; }
  .fx-nav, .fx-nav-menu, .fx-nav-links li, .fx-nav-actions, .fx-nav-links a::after, .fx-nav-glider,
  .fx-nav-login, .fx-nav-login span, .fx-btn-signup, .fx-btn-signup::after, .fx-brand-logo, .fx-brand-name { transition: none; }
  .fx-btn-signup::before { display: none; }
}

/* ═══════════ MEGA MENU — Features dropdown ═══════════
   Desktop: frosted glass card that floats under the bar (hover / focus).
   Mobile: inline accordion inside the curtain menu. */

/* shared morphing card sheet — a desktop-hover affordance (see the
   desktop block below); hidden by default so the mobile accordion
   never shows a stray glass rectangle */
.fx-mega-sheet { display: none; }

/* trigger */
.fx-nav-links a.fx-mega-trigger { display: inline-flex; align-items: center; }
.fx-nav-links a.fx-mega-trigger::after { content: none; }   /* no underline / no ›  */

/* shared item typography */
.fx-mega-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin: 0 12px 6px;
}
.fx-mega-link { display: block; padding: 8px 12px; border-radius: 12px; transition: background .25s ease; }
.fx-mega-title {
  display: block; font-size: .86rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.3; transition: color .25s ease;
}
.fx-mega-desc { display: block; font-size: .73rem; color: var(--ink-2); line-height: 1.35; margin-top: 1px; }

/* colors stay dark even in the on-hero (white links) state — the panel is a light card */
.fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link { color: var(--ink); opacity: 1; padding: 9px 12px; border-radius: 12px; }
.fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link::after { content: none; }
.fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link:hover { background: rgba(0, 113, 227, .07); color: var(--ink); }
.fx-mega-link:hover .fx-mega-title { color: var(--accent); }

/* current page inside the panel — "you are on this one" */
.fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link.fx-is-current { background: rgba(0, 113, 227, .08); }
.fx-mega-link.fx-is-current .fx-mega-title { color: var(--accent); }

/* "All features" — quiet accent so it reads as the overview link */
.fx-mega-link--all .fx-mega-title { color: var(--accent); }
.fx-mega-link--all .fx-mega-title::after { content: " \2192"; font-weight: 700; }

/* ───────── desktop: floating white glass card ───────── */
@media (min-width: 861px) {
  /* full-screen page scrim REMOVED — hovering a menu item no longer
     covers/blurs the whole viewport; the header stays normal size and
     only the dropdown card appears below the bar. */
  .fx-site-header::before { display: none; }

  /* while a panel is open the bar drops its own backdrop blur — a
     backdrop-filtered ancestor becomes the backdrop root, which would
     stop the panel's blur from reaching the page behind.
     The bar's near-white background hides the swap completely. */
  .fx-site-header.fx-mega-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* the card VISUALS live on one shared sheet (.fx-mega-sheet, created by
     header.js — same idea as the nav-glider pill): it slides and resizes
     between the panels' geometries, so Features → Solutions reads as ONE
     piece of glass morphing while only the text cross-fades. The panels
     themselves are transparent content layers stacked above it. */
  .fx-mega-sheet {
    display: block;
    position: absolute; left: 0; top: 0; z-index: 0;
    box-sizing: border-box;
    transform-origin: top center;
    pointer-events: none;
    /* pure frosted glass: essentially NO white fill — everything the eye
       reads as the card surface is the heavy backdrop blur itself */
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 100%);
    -webkit-backdrop-filter: saturate(170%) blur(48px);
    backdrop-filter: saturate(170%) blur(48px);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 24px;
    box-shadow: 0 40px 90px rgba(10, 35, 90, .28), 0 6px 22px rgba(10, 35, 90, .12),
                inset 0 1px 0 rgba(255, 255, 255, .8);
    visibility: hidden; opacity: 0;
    will-change: transform, width, height;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), width .5s cubic-bezier(.22, 1, .36, 1),
                height .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s linear .35s;
  }
  .fx-mega-sheet.fx-on { visibility: visible; opacity: 1; transition-delay: 0s; }
  /* first open after being hidden: take position instantly, then rise/fade */
  .fx-mega-sheet.fx-snap { transition: none; }

  .fx-mega-panel {
    /* sits fully BELOW the bar — overlapping it read as a collision.
       `left` is set per-trigger by header.js: the card opens anchored
       under its own nav item (clamped to the viewport), not mid-screen */
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 1;
    width: min(1040px, 94vw);
    transform: translateY(18px) scale(.975);
    transform-origin: top center;
    /* card look (glass, border, shadow) lives on .fx-mega-sheet above —
       the panel is only the content layer riding on top of it */
    border-radius: 24px;
    padding: 26px 28px 28px;
    visibility: hidden; opacity: 0;
    will-change: transform, opacity;
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .45s;
  }
  /* invisible bridge over the gap so the pointer can travel from the pill to the card */
  .fx-mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

  .fx-has-mega.fx-open .fx-mega-panel,
  .fx-has-mega:focus-within .fx-mega-panel {
    visibility: visible; opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }

  /* hovering from one open menu to another (.fx-mega-switch, set by
     header.js): the shared sheet morphs between the two geometries while
     the CONTENT alone cross-fades — no transforms on the panels at all,
     so nothing pops or slides twice. The outgoing text is gone (.16s)
     just before the incoming text starts (.08s delay), so the two never
     mush on top of each other mid-morph. */
  .fx-site-header.fx-mega-switch .fx-mega-panel {
    transform: none;
    transition: opacity .16s ease, visibility 0s linear .16s;
  }
  .fx-site-header.fx-mega-switch .fx-has-mega.fx-open .fx-mega-panel,
  .fx-site-header.fx-mega-switch .fx-has-mega:focus-within .fx-mega-panel {
    transform: none;
    transition: opacity .26s ease .08s, visibility 0s;
  }

  /* items get a glassy white chip on hover */
  .fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link:hover {
    background: rgba(255, 255, 255, .38);
    box-shadow: 0 4px 14px rgba(10, 35, 90, .08), inset 0 1px 0 rgba(255, 255, 255, .7);
  }

  .fx-mega-inner { display: grid; grid-template-columns: 1fr 248px; gap: 8px 44px; }

  .fx-mega-group--features .fx-mega-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px;
  }
  .fx-site-header .fx-mega-group--integrations,
  .fx-site-header .fx-mega-group--community {
    border-left: 1px solid rgba(29, 78, 216, .16);
    padding-left: 38px;
  }
  .fx-mega-group--integrations .fx-mega-list,
  .fx-mega-group--community .fx-mega-list { display: grid; gap: 8px; }

  /* Solutions — one wide "Industry" group in three columns */
  .fx-mega-panel--solutions { width: min(980px, 94vw); }
  .fx-mega-panel--solutions .fx-mega-inner { grid-template-columns: 1fr; }
  .fx-mega-group--industry .fx-mega-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px;
  }

  /* Resources — two-column list */
  .fx-mega-panel--resources { width: min(580px, 94vw); }
  .fx-mega-panel--resources .fx-mega-inner { grid-template-columns: 1fr; }
  .fx-mega-group--resources .fx-mega-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px;
  }
}

/* ───────── mobile: inline accordion ───────── */
@media (max-width: 860px) {
  /* long menus must be able to scroll (drawer spans the full height) */
  .fx-nav-menu { overflow-y: auto; overscroll-behavior: contain; }

  /* caret hugs the right edge, like the other rows' chevrons — a ›
     rotated to point down, spinning to point up while the accordion is
     open (overrides the desktop `content: none` on mega triggers) */
  .fx-nav-links a.fx-mega-trigger { display: flex; justify-content: space-between; }
  .fx-nav-links a.fx-mega-trigger::after {
    content: "\203A"; position: static; display: block;
    height: auto; background: none;
    font-size: 1.25rem; line-height: 1; color: rgba(29, 29, 31, .3);
    transform: rotate(90deg);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s;
  }
  .fx-has-mega.fx-submenu-open > a.fx-mega-trigger::after {
    transform: rotate(270deg);
    color: var(--accent);
  }
  /* the open trigger row keeps a quiet accent chip, "this one is open" */
  .fx-has-mega.fx-submenu-open > a.fx-mega-trigger {
    background: rgba(0, 113, 227, .08);
    color: var(--accent);
  }

  /* accordion — height animates via 0fr→1fr while the content itself
     fades + slides a touch, so open/close reads as one soft motion
     instead of a hard reveal. Close is slightly quicker than open. */
  .fx-mega-panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .38s cubic-bezier(.33, 1, .45, 1);
  }
  .fx-has-mega.fx-submenu-open .fx-mega-panel {
    grid-template-rows: 1fr;
    transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1);
  }
  .fx-mega-inner {
    min-height: 0; overflow: hidden;
    opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .3s var(--ease);
  }
  .fx-has-mega.fx-submenu-open .fx-mega-inner {
    opacity: 1; transform: none;
    transition: opacity .35s ease .1s, transform .5s cubic-bezier(.22, 1, .36, 1) .05s;
  }

  .fx-site-header .fx-mega-group { padding: 4px 0 8px; }
  .fx-mega-eyebrow { margin: 10px 4px 8px; }

  /* each sub-item is its own small box so the list reads as separate,
     tappable cards instead of one run-on column of text */
  .fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link {
    display: block; padding: 11px 14px; border-radius: 12px;
    font-size: 1rem; font-weight: 600;
    background: #f4f6fb;
    border: 1px solid rgba(15, 30, 60, .06);
    margin: 0 2px 7px;
  }
  .fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link:active,
  .fx-site-header .fx-nav-menu .fx-mega-panel a.fx-mega-link:hover {
    background: rgba(0, 113, 227, .08);
    border-color: rgba(0, 113, 227, .22);
  }
  .fx-mega-link--all { background: rgba(0, 113, 227, .07) !important; }
  .fx-mega-title { font-size: .95rem; }
  .fx-mega-desc { display: none; }   /* keep the accordion tight on phones */
  .fx-site-header .fx-mega-group--integrations,
  .fx-site-header .fx-mega-group--community { border-top: 1px solid rgba(0, 0, 0, .06); margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-mega-panel, .fx-mega-sheet, .fx-mega-inner, .fx-mega-link, .fx-nav-links a.fx-mega-trigger::after { transition: none; }
}