/* FluxFront — integrations logo strip (#clients). Pure CSS marquee; js/modules/logo-marquee.js clones the
   track enough times to always fill the viewport for a seamless gap-free loop and stops it under
   prefers-reduced-motion (then it just wraps). */
/* ===================== INTEGRATION LOGOS ===================== */
.logos { padding-block: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 56px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface); }
.logos-label { font-weight: 500; text-align: center; font-family: var(--font-mono); font-size: var(--t-mono-lbl); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.marquee { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee { --logo-gap: clamp(36px, 4.5vw, 72px); }
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--logo-gap);
  width: max-content; padding-inline: clamp(18px, 2.25vw, 36px); }
.marquee-track li { flex: none; display: grid; place-items: center; }
/* animated mode: spacing lives INSIDE each item so the track is perfectly periodic and the
   translateX(-50%) wrap lands on an identical pixel — no half-gap jump, no blank space */
.marquee.is-animated .marquee-track { gap: 0; padding-inline: 0; }
.marquee.is-animated .marquee-track li { padding-inline: calc(var(--logo-gap) / 2); }
.marquee-track img { height: 52px; width: auto; }
/* square badge marks read smaller than wordmarks at the same height, so they get more */
.marquee-track img[src*="google-calendar"], .marquee-track img[src*="/square"], .marquee-track img[src*="/web"] { height: 62px; }
.marquee.is-animated .marquee-track { animation: marquee var(--marquee-duration, 30s) linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee.is-animated .marquee-track { animation: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; width: auto; }
}
@media (max-width: 560px) { .marquee-track img { height: 40px; } .marquee-track img[src*="google-calendar"], .marquee-track img[src*="/square"], .marquee-track img[src*="/web"] { height: 48px; } }