/* ============================================================
   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 .marquee__track (base.css) sets padding-right: 3rem and animates the
     loop with a matching -3rem offset, sized for that default 3rem gap. This
     section tightened its own chip gap to 0.85rem but inherited the 3rem
     trailing padding unchanged, which read as a dead gap right at the loop
     seam (after the last chip, before the track repeats) - much wider than
     the normal chip-to-chip spacing. Override both the padding and the loop
     distance together so the seam matches the rest of the rhythm. Scoped to
     this section only: 16-comebacks.html uses the same shared .marquee base
     and must keep its own 3rem timing untouched. */
  padding-right: 0.85rem;
  animation-name: marquee-scroll-trust;
  /* Base .marquee__track also sets min-width: 100%, which forces each track
     to fill the whole container even when this section's actual chip content
     is narrower than that (common on wide viewports) - the flex chips don't
     stretch to fill it, so the leftover space showed up as a large blank gap
     before the next track's content. Content here is always wide enough on
     its own to fill any real viewport once duplicated, so let it size to its
     own content instead. Scoped here only; comebacks.html keeps the base
     min-width: 100% behavior. */
  min-width: max-content;
}

@keyframes marquee-scroll-trust {
  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 chip used to be a faux wordmark (display font, 700, 1.05rem, small-caps), which
     read as a font-loading glitch next to the body-font badge chips. Matched to them. */
  font-family: var(--font-body);
  font-variant-caps: normal;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text-on-bone);
  /* Slightly tighter pill padding around the real BCBS logo image, which already
     carries its own visual weight/whitespace unlike the text-only badge chips. */
  padding-block: 0.4rem;
}

.sec-03-trust__logo-img {
  display: block;
  height: 20px;
  width: auto;
}

@media (max-width: 640px) {
  .sec-03-trust__logo-img {
    height: 17px;
  }
}

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

.sec-03-trust__icon {
  width: 15px;
  height: 15px;
  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.75rem;
  letter-spacing: 0.12em;
  color: var(--ember);
  padding-inline: 0.15rem;
}

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

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