/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}

/* Set color style to inherit */
.inherit-color * {
  color: inherit;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext > :last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}

/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Apply "..." after 3 lines of text */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* These classes are never overwritten */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .hide,
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

.margin-0 {
  margin: 0rem !important;
}

.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
  padding: 0rem !important;
  margin: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* Rotate dropdown arrow on hover */
.navbar-dropdwn-toggle-2 .dropdown-chevron-2 {
  transition: transform 0.3s ease;
}

/* We want it to rotate when open */
.navbar-dropdwn-toggle-2.w--open .dropdown-chevron-2 {
  transform: rotate(180deg);
}

/* Expand hamburger/mobile-nav breakpoint from Webflow's default 991px to 1095px.
   Webflow's JS detects collapse state via button visibility, so CSS is sufficient.
   All styles that mwd.webflow.css only defines inside its ?991px block must be
   duplicated here so they also apply at 992px–1095px. */

/* Match nav horizontal padding to .padding-global for consistent alignment with hero/content sections.
   mwd.webflow.css uses 2rem on .nav-absolute-holder-2, but .padding-global is 2.5rem.
   This rule must be declared BEFORE the ?1095px block so the media query can override it. */
.nav-absolute-holder-2 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

@media screen and (max-width: 1155px) {
  /* Show hamburger button */
  .w-nav[data-collapse='medium'] .w-nav-button {
    display: block;
  }
  /* Hide desktop nav links */
  .w-nav[data-collapse='medium'] .w-nav-menu {
    display: none;
  }
  /* Hide desktop CTA buttons (Login / Free Trial / Book Demo row) */
  .hide-tablet-2 {
    display: none !important;
  }
  /* Show mobile buttons (inside nav-menu and in nav-button-wrapper) */
  .hide-desktop {
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
  }
  /* Switch nav-container to flex (logo + hamburger row) */
  .nav-container-2 {
    grid-template-columns: .25fr 1fr;
    width: 100%;
    display: flex;
  }
  /* Zero out holder padding so .w-nav spans the full viewport width.
     The overlay is position:absolute on .w-nav, so full-width .w-nav = full-width overlay. */
  .nav-absolute-holder-2 {
    padding-left: 0;
    padding-right: 0;
  }
  /* Apply matching padding to the inner nav row instead */
  .nav-container-2 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  /* Nav menu: mobile overlay styles (white background, full width, absolute inside overlay).
     mwd.webflow.css only defines these inside its ?991px block. */
  .nav-menu {
    -webkit-text-fill-color: inherit;
    background-color: #fff;
    background-clip: border-box;
    border-bottom: 1px solid #000;
    justify-content: center;
    width: 100%;
    padding: 1rem 5% 2.5rem;
    display: flex;
    position: absolute;
    overflow: auto;
  }

    .nav-menu.is-page-height-tablet {
      border-bottom-style: none;
      border-bottom-width: 0;
      height: auto;
      padding: 2rem;
      transition: height .5s;
    }
  /* Make nav menu scrollable */
  .nav-menu {
    overflow-y: auto !important;
    max-height: 80vh !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Nav content: dropdown toggles become full-width tap targets */
  .navbar-dropdwn-toggle-2 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: .75rem 0;
    font-size: 1.125rem;
    display: flex;
  }

  .text-block-5 {
    font-size: 16px;
  }
  /* Nav content: dropdown links */
  .navbar-dropdown-link-2 {
    width: auto;
    padding: .75rem 0 .75rem 0%;
  }
  /* Nav content: dropdown link grid and wrapper become stacked/wrapped */
  .dropdown-link-grid-2 {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .navbar-dropdown-links-wrapper-2 {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    box-shadow: none;
    border-style: none;
    flex-flow: wrap;
    justify-content: flex-start;
    padding: 1rem 0;
  }
  /* Nav content: Pricing link becomes block/left-aligned */
  .nav-link-2 {
    text-align: left;
    padding: .75rem 0;
    font-size: 16px;
    display: block;
  }
  /* Nav content: CTA buttons full-width */
  .button-group-3.center {
    width: 100%;
  }

  .button-2,
  .button-2.is-secondary {
    width: auto;
  }
  /* Chevron positioning in mobile toggle */
  .dropdown-chevron-2 {
    inset: auto 0% auto auto;
  }
  /* Hamburger icon — only defined in mwd.webflow.css ?991px block */
  .menu-icon-2 {
    border: 1px solid #ececec;
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .menu-icon-line-middle-2 {
    background-color: #0a0d14;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .menu-icon-line-bottom-2,
  .menu-icon-line-top-2 {
    background-color: #0a0d14;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .nav-button-wrapper-2 {
    justify-content: center;
    align-items: center;
  }
}

/* At mobile landscape (?767px), .padding-global drops to 1.25rem.
   Override the webflow 1.5rem on .nav-container-2 to match. */
@media screen and (max-width: 767px) {
  .nav-container-2 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Keep icon + text nicely aligned in navbar dropdown links */
.navbar-dropdown-link-2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

  .navbar-dropdown-link-2 svg {
    display: block;
    flex: 0 0 auto;
    min-width: 20px;
    text-align: center;
  }