/* Integration wall below the scene.
   The trailer carries these marks at 5-9 px on a phone, which is recognisable
   at best. Here each one is served at its full size on a light tile, because
   brand artwork is drawn for light backgrounds and the page is dark. */
.integrations {
  position: relative;
  z-index: 5;
  background: var(--background);
  border-top: 1px solid var(--line);
  padding: clamp(66px, 11dvh, 118px) 6vw clamp(58px, 9dvh, 96px);
}
.integrations-inner { max-width: 1180px; margin: 0 auto; }
.integrations h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  max-width: 14ch;
}
.integrations .description { max-width: 500px; }
.logo-wall {
  list-style: none;
  margin: clamp(38px, 5dvh, 58px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 10px;
}
.logo-wall li {
  display: grid;
  place-items: center;
  height: 78px;
  padding: 16px 20px;
  background: #fbfbf9;
  border-radius: 15px;
}
.logo-wall img {
  max-width: 100%;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.integrations-note {
  margin: 26px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #8e8f94;
  max-width: 560px;
}

@media (max-width: 760px) {
  .integrations { padding: 74px 26px 62px; }
  .integrations h2 { font-size: clamp(32px, 8.2vw, 46px); }
  .logo-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .logo-wall li { height: 62px; padding: 11px 13px; border-radius: 12px; }
  .logo-wall img { max-height: 27px; }
}

@media (max-width: 380px) {
  .logo-wall li { height: 56px; padding: 9px 10px; }
  .logo-wall img { max-height: 24px; }
}