/*
 * Header dropdowns (Product, Resources, Company) on desktop, and the phone
 * and tablet menu (#mnav-m) below 992px, at the end of this file.
 * Markup comes from renderNavDropdowns in src/lib/roiCalculatorNav.ts;
 * webflow.js still toggles `w--open` on the toggle and the list. The small
 * script in webflowSnapshotDocument.ts adds `mnav-gone` / `mnav-instant` to a
 * `.w-dropdown` so only one panel shows at a time on desktop.
 * Loaded after the Webflow CSS, so equal-specificity rules here win.
 */

.navbar_menu,
.mnav-m {
  --mnav-ink: #14150f;
  --mnav-muted: #5c5d56;
  --mnav-cream: #f6f5f2;
  --mnav-press: #ecebe6;
  --mnav-line: #e8e8e8;
  --mnav-blue: #0055ff;
  /* The one curve every menu transition uses. */
  --mnav-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/*
 * Header logo: the official wordmark, swapped in by swapHeaderLogo in
 * src/lib/roiCalculatorNav.ts. Sized by height: 28.7px makes its capitals
 * 19.6px tall (the old file's were 19.35px) and the logo as wide as the old
 * file. The link keeps the old file's 107 x 30 slot, so nothing else in the
 * header moves. The transform (no layout) centres the capitals on the
 * buttons, and on the nav labels from 992px.
 */
.w-nav .logo-link_wrapper {
  display: flex;
  align-items: center;
  width: 107px;
  height: 30px;
}

.w-nav .logo-link_wrapper .image-2 {
  flex: none;
  width: auto;
  height: 28.7px;
  transform: translateY(0.54px);
}

@media screen and (min-width: 992px) {
  .w-nav .logo-link_wrapper .image-2 {
    transform: translateY(2.35px);
  }
}

/* Items (all widths) */
.mnav-panel .navbar_dropdown-link.mnav-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  /* Icon box centred on the name + description block. */
  align-items: center;
  column-gap: 0.75rem;
  width: auto;
  padding: 0.5rem;
  border-radius: 6px;
  color: var(--mnav-ink);
  text-decoration: none;
  opacity: 1;
}

.mnav-panel .mnav-item .navbar_icon-box {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 6px;
  line-height: 0;
  background-color: var(--mnav-cream);
}

.mnav-panel .mnav-item .navbar_link-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.mnav-text {
  min-width: 0;
}

.mnav-name {
  color: var(--mnav-ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.mnav-desc {
  color: var(--mnav-muted);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.mnav-label {
  padding: 0.375rem 0.5rem 0.5rem;
  color: var(--mnav-muted);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mnav-card {
  display: block;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 6px;
  background-color: var(--mnav-cream);
  color: var(--mnav-ink);
  text-decoration: none;
}

.mnav-card .mnav-label {
  padding: 0 0 0.375rem;
}

.mnav-card .mnav-desc {
  margin-top: 0.125rem;
  color: var(--mnav-blue);
}

.mnav-panel .mnav-item:focus-visible,
.mnav-card:focus-visible {
  outline: 2px solid var(--mnav-blue);
  outline-offset: -2px;
}

.navbar_dropdwn-toggle-new:focus-visible {
  outline: 2px solid #0055ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hover only where a real pointer hovers; colour changes only. */
@media (hover: hover) and (pointer: fine) {
  .mnav-panel .navbar_dropdown-link.mnav-item,
  .mnav-panel .mnav-item .navbar_icon-box,
  .mnav-panel .mnav-item .mnav-desc,
  .mnav-card {
    transition-property: background-color, color;
    transition-duration: 120ms;
    transition-timing-function: var(--mnav-ease);
  }

  .mnav-panel .navbar_dropdown-link.mnav-item:hover {
    background-color: var(--mnav-cream);
    opacity: 1;
  }

  .mnav-panel .mnav-item:hover .navbar_icon-box {
    background-color: rgba(0, 85, 255, 0.08);
  }

  .mnav-panel .mnav-item:hover .mnav-desc {
    color: #3a3b35;
  }

  .mnav-card:hover {
    background-color: #efede8;
  }
}

/* Press feedback: the row darkens at once, no delay. */
.mnav-panel .navbar_dropdown-link.mnav-item:active,
.mnav-card:active {
  background-color: var(--mnav-press);
  transition-duration: 0s;
}

/* Touch: no sticky grey toggle after a tap. */
@media (hover: none) {
  .navbar_dropdwn-toggle-new:hover {
    opacity: 0.8;
  }
}

.navbar_dropdwn-toggle-new.w--open {
  opacity: 1;
}

/* Chevron: flips in 160ms on open, back in 120ms on close. */
.navbar_dropdwn-toggle-new .navbar_dropdwn-icon {
  transition: transform 120ms var(--mnav-ease);
}

.navbar_dropdwn-toggle-new.w--open .navbar_dropdwn-icon {
  transform: rotate(180deg);
  transition-duration: 160ms;
}

/* Desktop: floating panel with an interruptible enter/exit. */
@media screen and (min-width: 992px) {
  .navbar_menu .navbar_dropdown-list.mnav-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 0;
    margin-top: 0.5rem;
    padding: 0.5rem;
    overflow: visible;
    background-color: #fff;
    border: 1px solid var(--mnav-line);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(20, 21, 15, 0.08);
    visibility: hidden;
    pointer-events: none;
    /* !important: Webflow's IX2 dropdown interaction writes an inline
       slide-up transform and opacity on this list; ours replaces it. */
    opacity: 0 !important;
    transform: translateY(-4px) scale(0.98) !important;
    /* Grows from under the toggle label (the panel starts 1rem left of it). */
    transform-origin: 3rem 0;
    transition:
      opacity 120ms var(--mnav-ease),
      transform 120ms var(--mnav-ease),
      visibility 0s linear 120ms;
  }

  .navbar_menu .navbar_dropdown-list.mnav-panel.w--open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1 !important;
    transform: none !important;
    transition:
      opacity 180ms var(--mnav-ease),
      transform 180ms var(--mnav-ease),
      visibility 0s;
  }

  /* Hover bridge over the gap between the toggle and the panel. */
  .navbar_menu .navbar_dropdown-list.mnav-panel::before {
    content: '';
    position: absolute;
    top: calc(-0.5rem - 1px);
    left: 0;
    right: 0;
    height: 0.5rem;
  }

  .mnav-panel.is-single {
    width: 18.5rem;
  }

  .mnav-panel.is-product {
    width: 44rem;
  }

  .mnav-cols {
    display: grid;
    grid-template-columns: 1fr 18.5rem;
  }

  .mnav-cols .mnav-col + .mnav-col {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--mnav-line);
  }

  /* Items fade in 20ms apart (4 steps at most, so the last starts at 80ms).
     Opacity only: the panel already moves. Clicks work at once. */
  .mnav-panel .mnav-item .mnav-text,
  .mnav-panel .mnav-item .navbar_icon-box,
  .mnav-panel .mnav-card > * {
    opacity: 0;
  }

  .mnav-panel.w--open .mnav-item .mnav-text,
  .mnav-panel.w--open .mnav-item .navbar_icon-box,
  .mnav-panel.w--open .mnav-card > * {
    opacity: 1;
    transition:
      opacity 160ms var(--mnav-ease) calc(min(var(--i, 0), 4) * 20ms),
      background-color 120ms var(--mnav-ease),
      color 120ms var(--mnav-ease);
  }

  /*
   * Fast switching. `mnav-gone`: another menu is now active, so this one hides
   * at once even while webflow.js keeps it open for its 350ms close delay.
   * `mnav-instant`: opened while another menu was showing, so it skips the
   * enter animation (the script slides its content in instead).
   */
  .navbar_menu .w-dropdown.mnav-gone .navbar_dropdown-list.mnav-panel {
    visibility: hidden;
    pointer-events: none;
    opacity: 0 !important;
    transition: none;
  }

  .w-dropdown.mnav-gone .navbar_dropdwn-toggle-new .navbar_dropdwn-icon {
    transform: none;
    transition: none;
  }

  .w-dropdown.mnav-gone .navbar_dropdwn-toggle-new.w--open {
    opacity: 0.8;
  }

  .navbar_menu .w-dropdown.mnav-instant .navbar_dropdown-list.mnav-panel.w--open,
  .w-dropdown.mnav-instant .mnav-panel.w--open .mnav-item .mnav-text,
  .w-dropdown.mnav-instant .mnav-panel.w--open .mnav-item .navbar_icon-box,
  .w-dropdown.mnav-instant .mnav-panel.w--open .mnav-card > *,
  .w-dropdown.mnav-instant .navbar_dropdwn-toggle-new .navbar_dropdwn-icon {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

/* Reduced motion: fades stay, movement and stagger go. */
@media screen and (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .navbar_menu .navbar_dropdown-list.mnav-panel,
  .navbar_menu .navbar_dropdown-list.mnav-panel.w--open {
    transform: none !important;
  }

  .mnav-panel .mnav-item .mnav-text,
  .mnav-panel .mnav-item .navbar_icon-box,
  .mnav-panel .mnav-card > * {
    opacity: 1;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar_dropdwn-toggle-new .navbar_dropdwn-icon,
  .navbar_dropdwn-toggle-new.w--open .navbar_dropdwn-icon {
    transition: none;
  }
}

/*
 * Phone and tablet menu (below 992px): #mnav-m, built by addPhoneMenu in
 * src/lib/roiCalculatorNav.ts. The script in webflowSnapshotDocument.ts opens
 * it from the hamburger instead of webflow.js's collapsed menu and sets:
 * - `is-open` on the panel while open, `is-closing` while it fades out (the
 *   root screen comes back once the fade has ended). Closed, the panel is
 *   visibility: hidden; the `hidden` attribute only covers the time before
 *   the page has loaded;
 * - `is-current` on the screen showing;
 * - `mnav-open` on <html>: page locked, hamburger shows an X, header CTA hidden.
 * Only transform and opacity animate; every step is a transition, so a tap
 * mid-way reverses from where it is.
 */
.mnav-m {
  position: fixed;
  top: var(--mnav-top, 88px);
  right: 0;
  bottom: 0;
  left: 0;
  /* Above the page, below the header (.w-nav is z-index 1000). */
  z-index: 999;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  color: var(--mnav-ink);
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 180ms ease-out,
    visibility 0s linear 180ms;
}

.mnav-m[hidden] {
  display: none;
}

.mnav-m.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition:
    opacity 200ms ease-out,
    visibility 0s;
}

/* The screen stack drops in from 6px above and leaves 4px up. */
.mnav-m-screens {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  transform: translateY(-6px);
}

.mnav-m.is-open .mnav-m-screens {
  transform: none;
  transition: transform 300ms var(--mnav-ease);
}

.mnav-m.is-closing .mnav-m-screens {
  transform: translateY(-4px);
  transition: transform 180ms var(--mnav-ease);
}

/* Screens: the root waits 12% to the left, the others 12% to the right. The
   screen coming in takes 300ms, the one going out 220ms. */
.mnav-m-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateX(12%);
  transition:
    opacity 220ms var(--mnav-ease),
    transform 220ms var(--mnav-ease),
    visibility 0s linear 220ms;
}

.mnav-m-screen.is-root {
  transform: translateX(-12%);
}

/* `inherit`, not visible/auto: the closed panel stays laid out (hidden), and
   a screen that forced itself visible would catch taps over the page. */
.mnav-m-screen.is-current {
  visibility: inherit;
  pointer-events: inherit;
  opacity: 1;
  transform: none;
  transition:
    opacity 300ms var(--mnav-ease),
    transform 300ms var(--mnav-ease),
    visibility 0s;
}

.mnav-m-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 20px;
}

/* Root rows: Product, Resources, Company, Pricing, Partners. */
.mnav-m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(100% + 16px);
  min-height: 56px;
  margin: 0 -8px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mnav-ink);
  font: inherit;
  font-size: 22px;
  line-height: 28px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mnav-m-chev {
  flex: none;
  color: #8a8b85;
}

.mnav-m-row .mnav-m-chev {
  margin-right: -5px;
}

/* On open the rows fade in 25ms apart. Going back to the root screen
   does not replay it: the rows stay visible while the menu is open. */
.mnav-m-screen.is-root .mnav-m-row {
  opacity: 0;
  transition: opacity 0s linear 180ms;
}

.mnav-m.is-open .mnav-m-screen.is-root .mnav-m-row {
  opacity: 1;
  transition: opacity 200ms ease-out calc(var(--i, 0) * 25ms);
}

/* Sub-screens */
.mnav-m-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  margin: 0 -8px;
  padding: 0 12px 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mnav-muted);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
}

.mnav-m-back .mnav-m-chev {
  color: currentColor;
}

.mnav-m .mnav-label {
  padding: 12px 0 8px;
}

/* Back already leaves room above the first label. */
.mnav-m .mnav-m-back + .mnav-label {
  padding-top: 4px;
}

.mnav-m-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 12px;
  align-items: center;
  box-sizing: border-box;
  min-height: 60px;
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: 8px;
  color: var(--mnav-ink);
  text-decoration: none;
}

.mnav-m-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--mnav-cream);
}

.mnav-m-icon img {
  display: block;
  width: 18px;
  height: 18px;
}

.mnav-m .mnav-name {
  font-size: 16px;
  line-height: 20px;
}

.mnav-m .mnav-desc {
  font-size: 14px;
  line-height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .mnav-m-row:hover,
  .mnav-m-back:hover,
  .mnav-m-item:hover {
    background-color: var(--mnav-cream);
  }
}

/* Press: the row darkens at once. */
.mnav-m-row:active,
.mnav-m-back:active,
.mnav-m-item:active {
  background-color: #f4f3ef;
}

.mnav-m-row:focus-visible,
.mnav-m-back:focus-visible,
.mnav-m-item:focus-visible {
  outline: 2px solid var(--mnav-blue);
  outline-offset: -2px;
}

/* Pinned buttons: fade in from 100ms after the panel starts to open. */
.mnav-m-foot {
  flex: none;
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #efeee9;
  opacity: 0;
  transition: opacity 0s linear 180ms;
}

.mnav-m.is-open .mnav-m-foot {
  opacity: 1;
  transition: opacity 200ms ease-out 100ms;
}

.mnav-m-foot-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}

.mnav-m-login,
.mnav-m-foot .mnav-m-cta {
  order: 0;
  width: auto;
  height: 48px;
  min-width: 0;
  transition: transform 160ms var(--mnav-ease);
}

.mnav-m-login:active,
.mnav-m-foot .mnav-m-cta:active {
  transform: scale(0.98);
}

.mnav-m-login {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dddcd6;
  border-radius: 4px;
  color: var(--mnav-ink);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

.mnav-m-cta .btn-icon-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  justify-content: center;
}

/* 320px phones: a half is 134px and the button's own spacing (12px sides,
   16px before the arrow) needs 149px, so it tightens to fit. */
@media screen and (max-width: 359px) {
  .mnav-m-cta .btn-icon-content {
    padding-right: 8px;
    padding-left: 8px;
    column-gap: 8px;
  }
}

.mnav-m-login:focus-visible,
.mnav-m-cta:focus-visible {
  outline: 2px solid var(--mnav-blue);
  outline-offset: 2px;
}

@media screen and (min-width: 992px) {
  .mnav-m {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  /* Page lock on the root only. With overflow hidden on <body> as well, the
     body would become a scroll container of its own and the sticky navbar
     would stick to it, leaving the header (and the X) off screen when the
     menu opens part-way down a page. The gutter keeps a classic scrollbar's
     space, so the header does not shift. */
  html.mnav-open {
    overflow: hidden;
    overscroll-behavior: none;
    scrollbar-gutter: stable;
  }

  /* The header's Get Free Demo (and, from 768px, its Login) steps aside:
     the panel has its own. */
  .navbar_button-wrapper > .get-started-link {
    transition:
      opacity 150ms ease-out,
      visibility 0s;
  }

  html.mnav-open .navbar_button-wrapper > .get-started-link {
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 150ms ease-out,
      visibility 0s linear 150ms;
  }

  /* Hamburger to X: the outer lines meet in the middle (8px) and turn, the
     middle one fades. !important beats any inline style from Webflow IX2. */
  .w-nav-button .menu-icon2_line-top,
  .w-nav-button .menu-icon2_line-bottom {
    transform: none !important;
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .w-nav-button .menu-icon2_line-middle {
    opacity: 1 !important;
    transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  html.mnav-open .w-nav-button .menu-icon2_line-top {
    transform: translateY(8px) rotate(45deg) !important;
  }

  html.mnav-open .w-nav-button .menu-icon2_line-bottom {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  html.mnav-open .w-nav-button .menu-icon2_line-middle {
    opacity: 0 !important;
  }
}

/* Reduced motion: the fades stay; nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .mnav-m .mnav-m-screens,
  .mnav-m.is-closing .mnav-m-screens,
  .mnav-m .mnav-m-screen,
  .mnav-m .mnav-m-screen.is-root,
  .mnav-m-login:active,
  .mnav-m-foot .mnav-m-cta:active {
    transform: none;
  }

  .w-nav-button .menu-icon2_line-top,
  .w-nav-button .menu-icon2_line-bottom,
  .w-nav-button .menu-icon2_line-middle {
    transition: none;
  }
}