/* Shared customer logo strip (infinite marquee). Loaded site-wide from layouts/root.njk. */
.home-redesign-hero + .customer-logos-marquee {
  background-color: #fff;
  padding-bottom: 24px;
  padding-top: 8px;
}

.customer-logos-marquee {
  --marquee-gap: clamp(20px, 3.2vw, 40px);
  background-color: #fff;
  box-sizing: border-box;
  padding: 50px 24px;
}

.feature-hero-social-proof .customer-logos-marquee {
  background-color: transparent;
  margin-top: 8px;
  padding: 0;
}

.feature-hero-social-proof .customer-logos-marquee__heading {
  margin-top: 20px;
}

.customer-logos-marquee__heading {
  margin-bottom: 16px;
}

.customer-logos-marquee__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  margin-left: auto;
  margin-right: auto;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  max-width: min(1180px, calc(100% - 48px));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  overflow: hidden;
  padding-bottom: 10px;
  padding-top: 10px;
}

.customer-logos-marquee__viewport:hover .customer-logos-marquee__track {
  animation-play-state: paused;
}

.customer-logos-marquee__track {
  animation: customer-logos-marquee-scroll 100s linear infinite;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

.customer-logos-marquee__group {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}

.customer-logos-marquee__cell {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 clamp(100px, 11vw, 148px);
  justify-content: center;
  padding-left: clamp(6px, 1.4vw, 12px);
  padding-right: clamp(6px, 1.4vw, 12px);
  width: clamp(100px, 11vw, 148px);
}

.customer-logos-marquee__cell picture {
  align-items: center;
  display: flex;
  justify-content: center;
  max-width: 100%;
  width: 100%;
}

.customer-logos-marquee__cell.customer-logos-marquee__cell--boost {
  flex: 0 0 clamp(214px, 20.25vw, 252px);
  overflow: visible;
  padding-bottom: 2px;
  padding-top: 2px;
  position: relative;
  width: clamp(214px, 20.25vw, 252px);
  z-index: 1;
}

.customer-logos-marquee__cell.customer-logos-marquee__cell--boost-soft {
  flex: 0 0 clamp(186px, 17.75vw, 220px);
  overflow: visible;
  padding-bottom: 2px;
  padding-top: 2px;
  position: relative;
  width: clamp(186px, 17.75vw, 220px);
  z-index: 1;
}

.customer-logos-marquee__cell.customer-logos-marquee__cell--boost-half {
  flex: 0 0 clamp(168px, 15.25vw, 200px);
  overflow: visible;
  padding-bottom: 2px;
  padding-top: 2px;
  position: relative;
  width: clamp(168px, 15.25vw, 200px);
  z-index: 1;
}

.customer-logos-marquee__img {
  display: block;
  filter: grayscale(100%);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
  opacity: .9;
  transition: filter 0.25s ease, opacity 0.25s ease;
  width: auto;
}

.customer-logos-marquee__cell:hover .customer-logos-marquee__img {
  filter: grayscale(0%);
  opacity: 1;
}

.customer-logos-marquee__img.customer-logos-marquee__img--boost {
  height: clamp(70px, 8vw, 82px);
  max-height: none;
  max-width: none;
  transform: scale(2.32);
  transform-origin: center center;
  width: clamp(70px, 8vw, 82px);
}

.customer-logos-marquee__img.customer-logos-marquee__img--boost-soft {
  height: clamp(62px, 7.2vw, 74px);
  max-height: none;
  max-width: none;
  transform: scale(1.92);
  transform-origin: center center;
  width: clamp(62px, 7.2vw, 74px);
}

.customer-logos-marquee__img.customer-logos-marquee__img--boost-half {
  height: clamp(52px, 6.1vw, 62px);
  max-height: none;
  max-width: none;
  transform: scale(1.48);
  transform-origin: center center;
  width: clamp(52px, 6.1vw, 62px);
}

@keyframes customer-logos-marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .customer-logos-marquee__img {
    transition-duration: 0.08s;
  }

  .customer-logos-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    row-gap: 16px;
    width: auto;
  }

  .customer-logos-marquee__group {
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 32px);
    justify-content: center;
    max-width: min(1180px, calc(100% - 48px));
    padding-right: 0;
    width: 100%;
  }

  .customer-logos-marquee__group[aria-hidden='true'] {
    display: none;
  }

  .customer-logos-marquee__viewport {
    -webkit-mask-image: none;
    margin-left: auto;
    margin-right: auto;
    mask-image: none;
    max-width: min(1180px, calc(100% - 48px));
    overflow: visible;
  }

  .customer-logos-marquee__cell {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 148px;
    min-width: 96px;
    width: auto;
  }

  .customer-logos-marquee__cell.customer-logos-marquee__cell--boost {
    max-width: 256px;
    min-width: 192px;
    overflow: visible;
    padding-bottom: 2px;
    padding-top: 2px;
    z-index: 1;
  }

  .customer-logos-marquee__cell.customer-logos-marquee__cell--boost-soft {
    max-width: 224px;
    min-width: 168px;
    overflow: visible;
    padding-bottom: 2px;
    padding-top: 2px;
    z-index: 1;
  }

  .customer-logos-marquee__cell.customer-logos-marquee__cell--boost-half {
    max-width: 204px;
    min-width: 148px;
    overflow: visible;
    padding-bottom: 2px;
    padding-top: 2px;
    z-index: 1;
  }
}