/* hts-runtime.css — state-driven styles for the vanilla runtime (hts-runtime.js).
 *
 * These rules replace the visual effects that Webflow Interactions (IX2) used
 * to drive with inline styles: burger-to-X morph, mobile menu slide, backdrop
 * fade, dropdown icon rotation + border emphasis, tab fade-in, logo marquee,
 * and the mobile hero slide grow effect.
 *
 * Everything here is keyed off classes toggled by hts-runtime.js
 * (.is-open / .w--open / .hts-active / .hts-dd-open), so the file is safe to
 * load on every page — rules simply never match where a component is absent.
 *
 * Golden rule 3 applies: this file exists because the minified Webflow CSS is
 * SRI-hashed and must never be edited. Additions for chrome behavior belong
 * here (or in page-level <style id="hts-..."> blocks for page-specific work).
 */

/* ---------------------------------------------------------------- burger X */
/* IX2 a-6/a-7: on open, top/bottom bars shrink to width 0 while the middle
   bar rotates 45deg and the (initially display:none) middle-bottom bar
   appears rotated 90deg, forming an X. */
.nav_burger-bar-top,
.nav_burger-bar-bottom {
  transition: width 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.nav_burger-bar-middle,
.nav_burger-middle-bottom {
  transition: transform 0.35s cubic-bezier(0.86, 0, 0.07, 1);
}
.nav_burger.is-open .nav_burger-bar-top,
.nav_burger.is-open .nav_burger-bar-bottom {
  width: 0;
}
.nav_burger.is-open .nav_burger-bar-middle {
  transform: rotate(45deg);
}
.nav_burger.is-open .nav_burger-middle-bottom {
  display: block;
  transform: rotate(90deg);
}

/* ------------------------------------------------------- mobile menu slide */
/* IX2 a-8/a-9: menu drops in from -100% Y over 500ms; JS toggles display
   (base rule is display:none) and then .is-open for the transform. */
.nav_mobile-menu {
  transform: translate3d(0, -100%, 0);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav_mobile-menu.is-open {
  transform: translate3d(0, 0, 0);
}

/* Backdrop blur fade (IX2: opacity 0 -> 1 over 750ms). */
.nav_bg-blur {
  transition: opacity 0.5s ease;
}
.nav_bg-blur.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------- dropdown polish */
/* Chevron rotation for nav dropdowns (IX2 a-15/16/18/19). */
.nav_mobile-menu-drop-icon {
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}
.w-dropdown-toggle.w--open .nav_mobile-menu-drop-icon {
  transform: rotate(180deg);
}

/* Benefits / FAQ accordion chevrons (IX2 a-33..36 / a-20/21). */
.benefits_drop-top-icon,
.faqs_faq-icon {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.benefits_drop-top.w--open .benefits_drop-top-icon,
.faqs_faq-top.w--open .faqs_faq-icon,
.faqs_faq-toggle.w--open .faqs_faq-icon {
  transform: rotate(180deg);
}

/* Open benefits rows switch their bottom border to the dark brand color
   (IX2 STYLE_BORDER rgb(25,29,38); closed is the neutral-300 default). */
.benefits_drop-component.hts-dd-open {
  border-bottom-color: #191d26;
}

/* -------------------------------------------------------------- tabs fade */
/* Webflow tabs faded panes in over data-duration-in="300". */
.w-tab-pane.w--tab-active {
  animation: hts-tab-in 0.3s ease;
}
@keyframes hts-tab-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ------------------------------------------------------------ logo marquee */
/* IX2 a-17 (PAGE_FINISH, loop): .logos_content scrolls 0 -> -200% over 45s.
   Two copies of the track sit side by side, so -200% loops seamlessly. */
@keyframes hts-logos-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-200%, 0, 0);
  }
}
.logos_content {
  animation: hts-logos-scroll 45s linear infinite;
}

/* --------------------------------------------- mobile hero slide emphasis */
/* IX2 a-28/29 (SLIDER_ACTIVE/INACTIVE, small/tiny): the active slide's
   content card grows from 16.5625rem to 18.75rem. Base rules + the 0.25s
   transition already live in the minified CSS; this only restores the
   active-slide size. hts-runtime.js toggles .hts-active on the live slide. */
@media (max-width: 767px) {
  .hero_slider-slide.hts-active .hero_slide-content {
    height: 18.75rem;
  }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logos_content {
    animation: none;
  }
  .nav_mobile-menu,
  .nav_bg-blur,
  .nav_burger-bar-top,
  .nav_burger-bar-bottom,
  .nav_burger-bar-middle,
  .nav_burger-middle-bottom,
  .nav_mobile-menu-drop-icon,
  .benefits_drop-top-icon,
  .faqs_faq-icon {
    transition: none;
  }
  .w-tab-pane.w--tab-active {
    animation: none;
  }
}