/* ═════════ Global layout defense — horizontal overflow ═════════
   Every routed page renders <main class="main-wrapper"> containing
   <main class="page-wrapper">. Several decorative elements across the
   site use negative left/right percentages (hero ribbons, gradient
   blobs, cta::before glows) or absolute positioning that can push
   past their parent at narrow widths. Clipping horizontal overflow
   at both wrapper levels contains those decorations without needing
   per-decoration fixes. nav.css lives everywhere, so this rule
   applies site-wide.

   Uses `overflow-x: clip` (not `hidden`) because `hidden` forces the
   element to become a scroll container (CSS spec: any non-visible
   overflow axis makes the box a scroll container, and `overflow-y`
   is implicitly `auto` when only `overflow-x` is set). A scroll-
   container ancestor breaks `position: sticky` on descendants —
   the sticky element sticks WITHIN the scroll container, which has
   no scrollable content, so it never travels. `overflow-x: clip`
   gives the same visual clipping without creating a scroll container.
   Browser support: Chrome 90+, Firefox 81+, Safari 16+.

   Note: product.css sets overflow: hidden (both axes) on .page-wrapper
   — more restrictive; that rule wins on the product page. Product
   page has no sticky descendants so this is fine there. */
.main-wrapper,
.page-wrapper {
  overflow-x: clip;
}

/* ── Resources mega-menu — FINAL build ──────────────────────────────
   One white sheet (container-width, centered) holds the nav row AND
   the menu panel. Square top corners, rounded bottom corners, soft
   shadow. Scrim greys the page behind the sheet (gutters + above
   visible). Behaviour: click-to-open, Esc / outside-click / re-click
   to close.

   The nav itself stays transparent over the ribbon at rest; the sheet
   provides the white surface under the nav row when the menu opens.
   The body class `nav-resources-menu-open` is the on/off signal CSS
   uses to shift the nav row's content inward by 30px and to darken
   the active Resources trigger. */

/* ── Trigger button (in the nav row) ── */
.nav-resources-trigger {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
  transition: color 0.18s ease;
}

.nav-resources-trigger:focus-visible {
  outline: 2px solid #0E1320;
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-resources-chevron {
  display: inline-flex;
  /* Slow, eased flip — applies symmetrically on open (0°→180°) and
     close (180°→0°). Reduced-motion case skips it via the media query
     near the bottom of this file. */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-resources-trigger[aria-expanded="true"] .nav-resources-chevron {
  transform: rotate(180deg);
}

/* ── Nav link colours ──
   Inactive items in the left list (Products, Resources, Pricing):
     #5B6472 muted gray, no chevron color in green.
   Active Resources (while menu open): #0E1320 + weight 500 — darkening
     only, no green.
   Sign in (right side): always #0E1320.
   Contact Sales button (right side): green #45BE8A.
   These are the nav row's identity. Applies regardless of page. */
/* Default muted state for Products, Pricing, Resources (when not open),
   and Sign in. On hover all four transition to the same dark (#0E1320)
   that the active Resources sits at — gives a consistent "this is
   interactive" signal across the whole nav row. */
.nav-menu-list-wrapper .nav-menu-link,
.navbar-cta-wrapper .nav-menu-link {
  color: #5B6472;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav-menu-list-wrapper .nav-menu-link:hover,
.navbar-cta-wrapper .nav-menu-link:hover {
  color: #0E1320;
}

/* Active Resources: same #0E1320, plus the slight weight bump. Higher
   specificity than the base rule above, lower than the hover — when
   Resources is BOTH active and hovered, hover wins (no visible change,
   since both end at #0E1320) and there's no colour flicker. */
.nav-resources-trigger[aria-expanded="true"],
body.nav-resources-menu-open .nav-resources-trigger {
  color: #0E1320;
  font-weight: 500;
}

.navbar .button-primary.blue-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background-color: #45BE8A !important;
  border-color: #45BE8A !important;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
}

.navbar .button-primary.blue-button:hover {
  background-color: #34A876 !important;
  border-color: #34A876 !important;
}

/* ── Shared arrow effect ──────────────────────────────────────────────
   The .arr SVG sits after the label on the nav Contact Sales button and
   the hero Get Started button. Rest state shows only the chevron (right-
   side polyline). The horizontal shaft is hidden by default and "draws
   in" from the right on hover. stroke="currentColor" makes it inherit
   the button text colour automatically. */
.arr {
  flex-shrink: 0;
}

.arr .shaft {
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.22s ease;
}

.navbar .button-primary:hover .arr .shaft,
.hero-btn:hover .arr .shaft {
  transform: scaleX(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .arr .shaft {
    transition: none;
  }
}

/* ── Nav row layout: pinned in both states ──
   The nav row uses .container-default's natural width and padding
   regardless of whether the menu is open or closed. NO body-class
   padding shift — that was causing the logo + Contact Sales button to
   visibly squish inward on open. The sheet's max-width already mirrors
   .container-default at every breakpoint, so the sheet aligns with the
   nav row's edges without the nav having to re-lay-out. */

/* Reserve scrollbar gutter at document scope so opening the menu can
   never cause a scrollbar to appear/disappear and shift the page (and
   thus the logo's x position) by ~15px on platforms where scrollbars
   are overlaid only when scrollable content exists. */
html {
  scrollbar-gutter: stable;
}

/* ── Scrim ──
   Full-viewport overlay that greys the page behind the sheet —
   including the left/right gutters and above the sheet's top edge. */
.nav-resources-scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 32, 0.4);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.nav-resources-scrim[data-nav-state="open"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}

/* ── Sheet ──
   The white card. Container-width, centered. Top corners SQUARE (flush
   to the viewport top), bottom corners radius 14. Shadow per spec.
   padding-top: 80px reserves vertical space for the nav row that
   visually sits inside the sheet via the header's higher z-index.
   z-index 92 — above scrim (90), below nav text (95 on index / 99
   elsewhere) so the logo, links, Sign in and Contact Sales sit on top. */
/* max-width is `.container-default`'s outer width + 60px (30 on each
   side) so the sheet sits ~30px to the LEFT of the logo and ~30px to
   the RIGHT of the Contact Sales button. The nav row itself stays at
   `.container-default`'s width — it doesn't move. The columns' inner
   30px paddings (Learn padding-left, Contact padding-right) then put
   the Learn heading under the logo and the Contact column's content
   under the Sign in / Contact Sales area. */
.nav-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1020px;     /* container 960 + 60 */
  z-index: 92;
  background: #ffffff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 40px rgba(14, 19, 32, 0.18);
  padding-top: 80px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

@media (min-width: 1280px) {
  .nav-sheet { max-width: 1230px; }    /* container 1170 + 60 */
}

@media (min-width: 1440px) {
  .nav-sheet { max-width: 1380px; }    /* container 1320 + 60 */
}

.nav-sheet[data-nav-state="open"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* 1px hairline between the nav row and the menu columns, full sheet
   width (clipped to the rounded sides by sheet's overflow: hidden). */
.nav-sheet-divider {
  height: 1px;
  background-color: #ECEEF1;
}

/* Panel is now a transparent positioning helper inside the sheet —
   the sheet provides bg / radius / shadow / fade. */
.nav-resources-panel {
  position: relative;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ── Grid — 3 even columns, stretched to identical heights so the
   Contact column's grey fills its cell from divider to rounded
   bottom-right corner. */
.nav-resources-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 0;
}

.nav-resources-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Learn (leftmost) — extra left padding to align with the 30px nav
   inset; vertical divider on the right via border-right. */
.nav-resources-grid > .nav-resources-column:first-child {
  padding: 22px 22px 26px 30px;
  border-right: 1px solid #ECEEF1;
}

/* Company (middle) — even 22px padding, no border. */
.nav-resources-grid > .nav-resources-column:nth-child(2) {
  padding: 22px;
}

/* Contact (rightmost) — grey fill in the cell, darker border on its
   left side (more visible against the grey bg), extra right padding
   to mirror the nav inset. */
.nav-resources-column--contact {
  background-color: #F5F7FA;
  border-left: 1px solid #E3E6EB;
  padding: 22px 30px 26px 22px;
}

/* ── Headings ──
   Title case via the markup, 13px / weight 500 / #3C4250, no transform,
   16px margin-bottom (slightly more breathing room before the link list). */
.nav-resources-heading {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #3C4250;
  margin: 0 0 16px;
}

/* ── Links + hover arrow ──
   Each link is inline-flex with the SVG arrow at the end of the text.
   Default: arrow opacity 0, translated 5px left. Hover/focus: arrow
   slides to 0 and fades in, link colour darkens to #0F6E56. */
.nav-resources-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #14A085;
  text-decoration: none;
  line-height: 1.4;
  padding: 2px 0;
  transition: color 0.15s ease;
}

.nav-resources-link:hover,
.nav-resources-link:focus-visible {
  color: #0F6E56;
  text-decoration: none;
}

.nav-resources-link:focus-visible {
  outline: 2px solid #0F6E56;
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-resources-link-arrow {
  flex-shrink: 0;
  margin-top: 4px;            /* nudges arrow onto the text baseline */
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-resources-link:hover .nav-resources-link-arrow,
.nav-resources-link:focus-visible .nav-resources-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── prefers-reduced-motion ──
   Show the arrow on hover instantly (no slide), no transitions
   anywhere in the menu. */
@media (prefers-reduced-motion: reduce) {
  .nav-resources-trigger,
  .nav-resources-chevron,
  .nav-resources-scrim,
  .nav-sheet,
  .nav-resources-link,
  .nav-resources-link-arrow,
  .container-default > .header-wrapper,
  .nav-menu-list-wrapper .nav-menu-link,
  .navbar-cta-wrapper .nav-menu-link {
    transition: none !important;
  }
  .nav-resources-link-arrow {
    transform: none;
  }
}

/* ══════════ Mobile full-screen menu (.mm) ══════════
   ≤991px only. Replaces Webflow's 320px slide-in drawer. The desktop
   mega-menu (.nav-sheet + scrim + panel) is display:none in this
   band — we render a completely separate full-viewport overlay
   instead. Toggled via [hidden] attribute (JS in nav.js). */

/* Desktop: never render — .mm is scoped to mobile only. */
.mm { display: none; }

@media (max-width: 991px) {
  /* Kill the desktop mega-menu overlay entirely. */
  .nav-resources-scrim,
  .nav-resources-panel,
  .nav-sheet {
    display: none !important;
  }

  /* Hide Webflow's 320px drawer — we replace it with .mm. Left in the
     DOM so the desktop nav row (which shares the same container) keeps
     laying out correctly at >991px. */
  .nav-menu-wrapper.w-nav-menu {
    display: none !important;
  }

  /* Full-viewport container. Author rules override UA-default [hidden]
     specificity so we need an explicit [hidden] override — same trap
     that hit the old inline accordion. */
  .mm {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /* Prevent iOS Safari from over-scrolling the page while the menu
       is open — combined with body.mm-open { overflow: hidden } */
    overscroll-behavior: contain;
  }
  .mm[hidden] { display: none; }

  /* Panes container — clipping viewport for the horizontal slide. */
  .mm-panes {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
  }

  /* Each pane is absolutely stacked so the two can slide past each
     other without reflow. Only the active pane accepts pointer input;
     the offscreen one is inert but rendered (keeps the slide smooth). */
  .mm-pane {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    background: #ffffff;
  }
  .mm-panes[data-mm-view="main"] .mm-pane--main {
    transform: translateX(0);
    pointer-events: auto;
  }
  .mm-panes[data-mm-view="main"] .mm-pane--resources {
    transform: translateX(100%);
  }
  .mm-panes[data-mm-view="resources"] .mm-pane--main {
    transform: translateX(-100%);
  }
  .mm-panes[data-mm-view="resources"] .mm-pane--resources {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Header row: Back (or spacer) on the left, Close on the right.
     Fixed height so the body doesn't jump between panes. */
  .mm-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(env(safe-area-inset-top, 0px), 12px) 18px 12px;
    min-height: 56px;
    border-bottom: 1px solid #ECEEF1;
  }
  .mm-header-spacer {
    display: inline-block;
    width: 44px;
    height: 44px;
  }

  /* Close (× top-right) and Back (‹ top-left) — 44px touch targets. */
  .mm-close, .mm-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0 8px;
    min-width: 44px;
    min-height: 44px;
    color: #0E1320;
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
  }
  .mm-close:active, .mm-back:active { background: #F1F3F5; }
  .mm-close { justify-content: center; padding: 0; }
  .mm-back { padding-left: 4px; }

  /* Scrollable link body. */
  .mm-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px 24px;
  }

  /* Main pane top-level list. Each row is a large tappable link with
     comfortable vertical rhythm — feels like a page of nav, not a
     packed dropdown. */
  .mm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mm-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #F1F3F5;
    color: #0E1320;
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .mm-link:hover, .mm-link:focus-visible { color: #14A085; }
  .mm-link:focus-visible {
    outline: 2px solid #14A085;
    outline-offset: 2px;
    border-radius: 4px;
  }
  .mm-link-arrow { color: #8A9099; flex-shrink: 0; }

  /* Resources pane sections. */
  .mm-section + .mm-section { margin-top: 32px; }
  .mm-section-h {
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8A9099;
    margin: 0 0 12px;
  }
  .mm-sublink {
    display: block;
    padding: 12px 4px;
    color: #0E1320;
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #F1F3F5;
    transition: color 0.15s ease;
  }
  .mm-sublink:hover, .mm-sublink:focus-visible { color: #14A085; }
  .mm-sublink:focus-visible {
    outline: 2px solid #14A085;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Sticky footer with CTAs — pinned bottom, respects safe-area. */
  .mm-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 24px max(env(safe-area-inset-bottom, 0px), 16px);
    border-top: 1px solid #ECEEF1;
    background: #ffffff;
  }
  .mm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 20px;
    border-radius: 10px;
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  .mm-cta--primary {
    background: #16A88B;
    color: #ffffff;
  }
  .mm-cta--primary:hover, .mm-cta--primary:active {
    background: #13977D;
  }
  .mm-cta--secondary {
    background: transparent;
    color: #0E1320;
    border-color: #C9CFD4;
  }
  .mm-cta--secondary:hover, .mm-cta--secondary:active {
    border-color: #16A88B;
    color: #16A88B;
  }

  /* Body scroll lock while menu is open. */
  body.mm-open {
    overflow: hidden;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .mm-pane { transition: none; }
}