/* ==========================================================================
   header-nav

   Desktop: slim sticky bar, compact single-column Products dropdown.
   Mobile (<=991px): full-screen overlay panel.

   NO PAGE-LOAD FADE. The original Webflow markup carried
   data-w-id="3e4eae5f-..." on this element, which Webflow's Interactions
   engine bound a load animation to - it set inline `opacity:0` and faded the
   header in. That left the header invisible until IX2 ran (and permanently
   invisible if it failed). The attribute has been removed from the template,
   and the rule below is a guard in case it ever creeps back.

   PRODUCTS DROPDOWN. On a non-touch device Webflow's dropdown opens on
   mouseenter (data-hover="true") and *force-closes* on mouseup over the
   toggle, so clicking a menu the pointer had just opened shut it again. The
   mouseup is now swallowed in header-nav.js, leaving hover as the only thing
   that opens and closes it. The .w--open::after bridge below is the other
   half of that: mouseleave on .w-dropdown fires the moment the pointer
   crosses the bare gap between the toggle and the panel, so the bridge keeps
   that journey inside the wrapper.

   IMPORTANT - how open/close works on mobile.
   Webflow moves .header-nav-menu-wrapper inside a generated .w-nav-overlay
   and animates it with inline transform/transition, leaving the overlay at
   display:block. Overriding those inline styles with !important breaks
   Webflow's own open/close lifecycle, so the menu can never be dismissed.
   Visibility is therefore driven entirely by the `body.ls-menu-open` class,
   which header-nav.js mirrors from the burger's `w--open` class.

   Layout note: never add horizontal padding/margin to nav items on desktop -
   the bar has no spare room, so hover affordances use absolute pseudos.
   ========================================================================== */

/* Header is always visible; never let an interaction engine fade it in. */
.header-wrapper{opacity:1 !important}

/* --- Caret ---------------------------------------------------------------- */
.header-wrapper .ls-caret{margin-left:6px;flex:0 0 auto;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.header-wrapper .w-dropdown.w--open .ls-caret{transform:rotate(180deg)}
.header-wrapper .dropdown-toggle{display:flex;align-items:center}

/* --- Current-page indicator (driven by the `active` prop) ----------------- */
.header-wrapper .header-nav-link{position:relative}
.header-wrapper[data-page="home"] .header-nav-link[href="/"],
.header-wrapper[data-page="demo"] .header-nav-link[href="/demo.html"],
.header-wrapper[data-page="about"] .header-nav-link[href="/about.html"],
.header-wrapper[data-page="faq"] .header-nav-link[href="/faq.html"],
.header-wrapper[data-page="help"] .header-nav-link[href="/help-center.html"]{color:var(--neutral--800);font-weight:600}
.header-wrapper[data-page="home"] .header-nav-link[href="/"]::after,
.header-wrapper[data-page="demo"] .header-nav-link[href="/demo.html"]::after,
.header-wrapper[data-page="about"] .header-nav-link[href="/about.html"]::after,
.header-wrapper[data-page="faq"] .header-nav-link[href="/faq.html"]::after,
.header-wrapper[data-page="help"] .header-nav-link[href="/help-center.html"]::after,
.header-wrapper[data-page="products"] .dropdown-toggle::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent--primary-1,#7dff68)}
.header-wrapper[data-page="products"] .dropdown-toggle{position:relative}
.header-wrapper[data-page="products"] .text-dropdown{font-weight:600}

/* --- Scrolled state ------------------------------------------------------- */
.header-wrapper{transition:box-shadow .25s ease,background-color .25s ease}
.header-wrapper.is-scrolled{box-shadow:0 1px 0 rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.18)}

/* --- Focus ---------------------------------------------------------------- */
.header-wrapper a:focus-visible,.header-wrapper .dropdown-toggle:focus-visible,
.header-wrapper .w-nav-button:focus-visible{outline:2px solid var(--accent--primary-1,#7dff68);outline-offset:3px;border-radius:8px}

/* --- Desktop: compact single-column dropdown ------------------------------ */
@media (min-width:992px){
  .header-wrapper .dropdown-column-wrapper{
    min-width:264px;padding:0;background:#fff;
    border:1px solid rgba(6,6,6,.09);border-radius:18px;
    box-shadow:0 4px 8px rgba(6,6,6,.03),0 28px 56px -24px rgba(6,6,6,.22);
    overflow:hidden;
  }
  .header-wrapper .ls-dropdown-panel{display:flex;flex-direction:column;padding:8px}
  .header-wrapper .ls-dropdown-panel .dropdown-link{
    padding:11px 14px;border-radius:10px;font-size:15px;line-height:1.3;
    white-space:nowrap;transition:background-color .16s ease,color .16s ease;
  }
  .header-wrapper .ls-dropdown-panel .dropdown-link:hover{background:rgba(6,6,6,.05)}
  .header-wrapper .ls-dropdown-panel .dropdown-link:first-child{
    font-weight:600;margin-bottom:6px;padding-bottom:13px;
    border-bottom:1px solid rgba(6,6,6,.08);border-radius:10px 10px 0 0;
  }

  /* Hover bridge. Webflow binds mouseleave to .w-dropdown, and a pseudo
     element counts as part of it, so this invisible strip keeps the pointer
     "inside" the wrapper while it travels from the toggle down to the panel.
     Only while open, so it never blocks anything the rest of the time. */
  .header-wrapper .dropdown-wrapper.w--open::after{
    content:"";position:absolute;left:-24px;right:-24px;top:100%;height:18px;
  }

  /* Hover opens the menu and the click is deliberately inert, so don't
     advertise a click target (see header-nav.js). */
  .header-wrapper .dropdown-toggle{cursor:default}

  .ls-menu-cta{display:none}
}

/* --- Mobile: full-screen overlay ----------------------------------------- */
@media (max-width:991px){
  .header-wrapper .w-nav-overlay{display:none !important}

  body.ls-menu-open .header-wrapper .w-nav-overlay{
    display:block !important;
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100% !important;height:100dvh !important;
    background:#fff;
    z-index:1001;
    animation:lsMenuIn .18s ease both;
  }

  .header-wrapper .header-nav-menu-wrapper{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    width:100%;
    transform:none !important;
    background:#fff;
    padding:84px 22px calc(18px + env(safe-area-inset-bottom));
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .header-wrapper .header-nav-menu-list{
    display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;
    flex:1 1 auto;
    /* min-height:0 lets a flex child shrink and scroll instead of pushing the
       CTA row off the bottom. justify-content is pinned because the desktop
       rule centres this list, which would let overflowing content escape
       upward out of the scroll box and hide the first item. */
    min-height:0;
    justify-content:flex-start;
    align-items:stretch;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .header-wrapper .header-nav-list-item{margin:0}

  .header-wrapper .header-nav-link,
  .header-wrapper .dropdown-toggle{
    display:flex;align-items:center;min-height:52px;padding:0 12px !important;
    font-size:20px;font-weight:600;letter-spacing:-.01em;border-radius:12px;
  }
  .header-wrapper .header-nav-link:active{background:rgba(6,6,6,.05)}

  /* Products: flatten the dropdown into a labelled list. Webflow's dropdown
     JS pins display:none, height:0 and opacity:0 inline when closed, so all
     four have to be overridden. */
  .header-wrapper .ls-has-dropdown .dropdown-wrapper{width:100%}
  .header-wrapper .ls-has-dropdown .dropdown-toggle{
    pointer-events:none;min-height:auto;padding:22px 12px 8px !important;
    font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.55;
  }
  .header-wrapper .ls-has-dropdown .ls-caret{display:none}
  .header-wrapper .dropdown-column-wrapper{
    display:block !important;height:auto !important;overflow:visible !important;
    position:static !important;width:100% !important;
    background:none;border:0;box-shadow:none;padding:0;
    transform:none !important;opacity:1 !important;
  }
  .header-wrapper .ls-dropdown-panel{display:flex;flex-direction:column;gap:2px}
  .header-wrapper .ls-dropdown-panel .dropdown-link{
    display:flex;align-items:center;min-height:46px;padding:0 12px;
    font-size:17px;border-radius:12px;
  }
  .header-wrapper .ls-dropdown-panel .dropdown-link:active{background:rgba(6,6,6,.05)}

  .ls-menu-cta{
    display:flex;flex-direction:column;gap:10px;
    flex:0 0 auto;padding-top:20px;padding-bottom:4px;
    background:#fff;border-top:1px solid rgba(6,6,6,.09);
  }
  .ls-menu-cta .w-button{width:100%;text-align:center;padding:18px 24px;font-size:17px}

  /* Only the burger lives in the bar on mobile; both CTAs are in the sheet.
     The base stylesheet's hide rule is scoped to .btn-primary, so it stopped
     matching once Log in became a secondary button - hide them explicitly. */
  .header-wrapper .header-right-side .w-button{display:none !important}

  /* The whole header bar sits above the sheet so the logo and burger stay put
     while the menu is open. */
  .header-wrapper .container-default{position:relative;z-index:1002}
  .header-wrapper .w-nav-button{position:relative;z-index:1002}
  .header-wrapper .w-nav-button.w--open{background:transparent}
  .header-wrapper .hamburger-menu-bar{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
  .header-wrapper .w-nav-button.w--open .hamburger-menu-bar.top{transform:translateY(4px) rotate(45deg)}
  .header-wrapper .w-nav-button.w--open .hamburger-menu-bar.bottom{transform:translateY(-4px) rotate(-45deg)}

  body.ls-menu-open{overflow:hidden}
}

/* Opacity only - position must never depend on an animation completing, as
   animations are throttled in background tabs. */
@keyframes lsMenuIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .header-wrapper .ls-caret,.header-wrapper .hamburger-menu-bar{transition:none}
  body.ls-menu-open .header-wrapper .w-nav-overlay{animation:none !important}
}