/* ============================================================
   03-trust — scoped under .sec-03-trust
   Chip marquee, tilted -2deg on desktop, straightens ≤820px.
   ============================================================ */

.sec-03-trust {
  background: var(--bone);
  padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  border-top: 1px solid var(--line-bone);
  border-bottom: 1px solid var(--line-bone);
  overflow: hidden;
  position: relative;
}

.sec-03-trust__inner {
  width: 100%;
}

.sec-03-trust__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.sec-03-trust__track {
  /* Scaled with track length (was 34s at 17 chips) so the scroll speed stays constant */
  --marquee-dur: 51s;
  gap: 0.85rem;
  /* base.css's shared .marquee__track sets padding-right: 3rem to match ITS
     3rem chip gap, so the trailing gap before the next looping copy matches
     the gap between chips. This track overrides the gap to 0.85rem but not
     the padding, which left a much bigger seam at the loop point than
     between any two chips — match it here, and drive the loop distance off
     the same value so the seam stays consistent through the animation too. */
  padding-right: 0.85rem;
  animation-name: sec-03-trust-marquee-scroll;
}
@keyframes sec-03-trust-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 0.85rem)); }
}

/* --- Pill chips --- */
.sec-03-trust__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--line-bone);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  padding: 0.65rem 1.25rem;
}

.sec-03-trust__chip--logo {
  /* This was a faux wordmark (display font, 700, larger, small-caps) sitting among
     body-font badge chips, which reads as a font-loading glitch rather than a logo. */
  font-family: var(--font-body);
  font-variant-caps: normal;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-on-bone);
}

.sec-03-trust__chip--badge {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-on-bone);
}

.sec-03-trust__icon {
  width: 18px;
  height: 18px;
  fill: var(--accent);
  flex-shrink: 0;
}
.sec-03-trust__icon--star {
  fill: var(--ember);
}

/* --- Accent star-cluster flourish between chips --- */
.sec-03-trust__stars {
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--ember);
  padding-inline: 0.2rem;
}

@media (max-width: 820px) {
  .sec-03-trust__marquee {
    transform: none;
  }
}

@media (max-width: 640px) {
  .sec-03-trust__chip--logo {
    font-size: 0.92rem;
  }
  .sec-03-trust__chip--badge {
    font-size: 0.78rem;
  }
  .sec-03-trust__chip {
    padding: 0.5rem 0.9rem;
  }
}