/* ============================================================
   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 {
  --marquee-dur: 34s;
  gap: 0.85rem;
  /* base.css's shared .marquee__track ships padding-right: 3rem and a keyframe
     offset of calc(-100% - 3rem), both matched to its own default 3rem gap so
     the loop seam reads identical to every other gap. This component overrides
     gap to 0.85rem for tighter chip spacing, so both of those must be
     re-matched here too, or the seam between the two looped tracks stays stuck
     at the old 3rem while every other gap is 0.85rem. */
  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.55rem 1.1rem;
}

.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: 16px;
  height: 16px;
  fill: var(--accent);
  flex-shrink: 0;
}
/* light surface: purple, never gold (gold stars on white fail contrast) */
.sec-03-trust__icon--star {
  fill: var(--accent);
}

/* --- Accent star-cluster flourish between chips ---
   An SVG star row, not repeated Unicode "★" characters: the glyph's own font
   side-bearing (invisible spacing baked into the character's advance width) made
   the gap after the text version wider than every other chip-to-chip transition.
   The remaining "gap" isn't a spacing bug (the track's flex `gap` measures
   pixel-identical on every side of every chip, stars included) — it's that a
   thin, sparse star row floating in open air reads as emptier than a solid pill.
   Giving it the same pill background/border/shadow as every other chip (via the
   shared .sec-03-trust__chip class) makes it read as "another item in the row"
   instead of punctuation, which is what actually closes the visual gap. */
.sec-03-trust__stars {
  padding-inline: 0.7rem;
  color: var(--accent);
}

@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;
  }
}