/* Behaviour that marketing.css tied to the Webflow runtime (.w--open, .w-nav). */

.site-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.navigation-menu > .site-dropdown {
  display: inline-block;
}

.site-dropdown > summary {
  list-style: none;
}

.site-dropdown > summary::-webkit-details-marker {
  display: none;
}

details.site-dropdown:not(.faq-dropdown):not([open]) > .w-dropdown-list,
details.faq-dropdown:not([open]) > .w-dropdown-list {
  display: none !important;
}

details.site-dropdown:not(.faq-dropdown)[open] > .w-dropdown-list,
details.faq-dropdown[open] > .w-dropdown-list {
  display: block;
}

.buttonnavlink[aria-current="page"] {
  color: var(--dark);
  background-color: #f0f0f0;
}

button.w-nav-button,
button.header-slider-trigger,
button.arrow-left,
button.arrow-right {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button.tag-link {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.dropdown-item-plugin-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media screen and (max-width: 991px) {
  header.navbar-buttons[data-collapse="medium"] .navigation-menu {
    display: none;
  }

  /* Webflow's collapsed navbar stacks the menu (w--nav-dropdown-open is
     display:block) and expands each section in place (w--nav-dropdown-list-open
     is position:static). [data-nav-menu-open] would otherwise force
     display:block and center the inline dropdowns on one row. */
  header.navbar-buttons[data-collapse="medium"] .navigation-menu[data-nav-menu-open] {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  header.navbar-buttons[data-collapse="medium"] .navigation-menu > .site-dropdown,
  header.navbar-buttons[data-collapse="medium"] .navigation-menu > .w-nav-link {
    display: block;
    align-self: stretch;
    width: 100%;
  }

  header.navbar-buttons[data-collapse="medium"] .navigation-menu .w-dropdown-list {
    position: static;
    min-width: 0;
  }

  header.navbar-buttons[data-collapse="medium"] .w-nav-button {
    display: flex;
  }

  /* The 380px panel is anchored to the bell with a -36px shift, which is the
     desktop navbar padding. On a phone that hangs it off the left of the bar. */
  header.navbar-buttons .user-menu-notifications > .site-dropdown {
    position: static;
  }

  header.navbar-buttons details.site-dropdown[open] > .button-dropdown-list.notifications {
    inset: auto 0 auto auto;
    top: calc(100% + 8px);
    width: min(380px, 100%);
  }
}

details.accordion-item > summary {
  list-style: none;
  cursor: pointer;
}

details.accordion-item > summary::-webkit-details-marker {
  display: none;
}

details.accordion-item > .accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

details.accordion-item:not([open]) > .accordion-content {
  visibility: hidden;
}

details.accordion-item[open] > .accordion-content {
  grid-template-rows: 1fr;
}

details.accordion-item > .accordion-content > .accordion-content_spacer {
  min-height: 0;
  overflow: hidden;
}

.accordion-icon,
.faq-icon-2 {
  transition: transform 0.2s ease;
}

details.accordion-item[open] > .accordion-trigger .accordion-icon,
details.faq-dropdown[open] .faq-icon-2 {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  details.accordion-item > .accordion-content,
  .accordion-icon,
  .faq-icon-2 {
    transition: none;
  }
}

.site-slider {
  position: relative;
}

.site-slider > .w-slider-mask {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  white-space: normal;
}

.site-slider > .w-slider-mask::-webkit-scrollbar {
  display: none;
}

.site-slider > .w-slider-mask > .w-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .site-slider > .w-slider-mask {
    scroll-behavior: auto;
  }
}

.header-slider-trigger .slider-button {
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.header-slider-trigger:hover .slider-button,
.header-slider-trigger:focus-visible .slider-button {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .header-slider-trigger .slider-button {
    opacity: 1;
    transition: none;
  }
}

[data-marquee] {
  overflow: hidden;
}

[data-marquee] > .site-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: site-marquee 30s linear infinite;
}

[data-marquee]:hover > .site-marquee-track,
[data-marquee]:focus-within > .site-marquee-track {
  animation-play-state: paused;
}

@keyframes site-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-marquee] > .site-marquee-track {
    animation: none;
  }
}

.wtf-para {
  transition: color 0.6s ease;
}

.wtf-para.is-lit {
  color: #fff;
}

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

.process-line-progress {
  height: 100%;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .process-item {
      view-timeline: --process block;
    }

    .process-line-progress {
      animation: site-process-fill linear both;
      animation-timeline: --process;
      animation-range: entry 10% cover 40%;
    }
  }
}

@keyframes site-process-fill {
  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}