/* ============================================================
   2. Trust strip — infinite marquee, short dark band
   ============================================================ */

.trust-strip {
  padding-block: var(--space-5);
  background: var(--color-bg-inverted);
  overflow: hidden;
}

.trust-strip__track {
  display: flex;
  width: max-content;
}

.trust-strip__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-6);
  padding-inline-end: var(--space-6);
}

.trust-strip__group span:not(.trust-strip__dot) {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
  color: var(--color-text-on-inverted);
  white-space: nowrap;
}

.trust-strip__group span:nth-child(4n+1):not(.trust-strip__dot) {
  color: var(--color-accent-secondary);
}

.trust-strip__dot {
  color: var(--color-accent-primary);
  font-size: 0.75rem;
}

/* The loop itself is a GSAP tween (js/marquee.js), not a CSS animation.
   Pause-on-hover/focus (WCAG 2.2.2) is implemented there via tween.pause()/play(),
   triggered by the .trust-strip:hover/:focus-within state. */