.trust-marquee {
  width: min(calc(100% - 32px), 1232px);
  margin: 32px auto 0;
}

.trust-marquee-wrapper {
  --marquee-gap: 16px;
  --marquee-surface: color-mix(in srgb, var(--color-surface-tone-07) 28%, var(--color-surface-card-warm));
  position: relative;
  overflow-x: auto;
  padding: 16px 0;
  border-radius: 16px;
  background: var(--marquee-surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px var(--color-shadow-tone-01);
  scrollbar-width: thin;
}

.trust-marquee-track,
.trust-marquee-list {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  width: max-content;
}

.trust-marquee-track { margin-inline: var(--marquee-gap); }
.trust-marquee-list { flex: none; padding: 0; margin: 0; list-style: none; }
.trust-marquee-list[aria-hidden="true"] { display: none; }

.trust-marquee-badge {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 16px;
  color: var(--ink);
  background: var(--color-surface-card-warm);
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px var(--color-shadow-tone-01);
  transition: transform .3s, background-color .3s, box-shadow .3s;
}

.trust-marquee-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--teal);
  background: var(--color-surface-tone-08);
  transition: transform .3s, background-color .3s, color .3s;
}

.trust-marquee-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.trust-marquee-copy { display: flex; flex-direction: column; white-space: nowrap; text-align: left; }
.trust-marquee-copy strong { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: -.025em; }
.trust-marquee-copy > span { color: var(--muted); font-size: 10px; line-height: 15px; font-weight: 500; }

.trust-marquee-badge:hover { transform: translateY(-2px); background: var(--paper); box-shadow: 0 0 0 1px var(--teal), 0 4px 8px var(--color-shadow-tone-01); }
.trust-marquee-badge:hover .trust-marquee-icon { transform: scale(1.05); background: var(--teal); color: var(--color-text-on-dark); }

.trust-marquee-badge--discount {
  background: #f8d47f;
  box-shadow: 0 0 0 1px #bf8c38, 0 1px 3px var(--color-shadow-tone-01);
}

.trust-marquee-badge--discount:hover {
  background: #f5ca69;
  box-shadow: 0 0 0 1px #bf8c38, 0 4px 8px var(--color-shadow-tone-01);
}

@media (min-width: 768px) {
  .trust-marquee { width: min(calc(100% - 48px), 1232px); }
  .trust-marquee-wrapper { --marquee-gap: 24px; padding: 20px 0; border-radius: 24px; }
  .trust-marquee-badge { padding: 12px 20px; }
  .trust-marquee-icon { width: 44px; height: 44px; }
  .trust-marquee-copy strong { font-size: 14px; line-height: 20px; }
  .trust-marquee-copy > span { font-size: 11px; line-height: 16.5px; }
}

@media (prefers-reduced-motion: no-preference) {
  .trust-marquee-wrapper[data-loop] { overflow: hidden; }
  .trust-marquee-wrapper[data-loop]::before,
  .trust-marquee-wrapper[data-loop]::after {
    position: absolute;
    z-index: 1;
    inset-block: 0;
    width: 64px;
    pointer-events: none;
    content: "";
  }
  .trust-marquee-wrapper[data-loop]::before { left: 0; background: linear-gradient(to right, var(--marquee-surface), transparent); }
  .trust-marquee-wrapper[data-loop]::after { right: 0; background: linear-gradient(to left, var(--marquee-surface), transparent); }
  .trust-marquee-wrapper[data-loop] .trust-marquee-list[aria-hidden="true"] { display: flex; }
  .trust-marquee-wrapper[data-loop] .trust-marquee-track { animation: trust-marquee-scroll 35s linear infinite; }
  .trust-marquee-wrapper:hover .trust-marquee-track,
  .trust-marquee-wrapper:focus-within .trust-marquee-track { animation-play-state: paused; }

  @media (min-width: 768px) {
    .trust-marquee-wrapper[data-loop]::before,
    .trust-marquee-wrapper[data-loop]::after { width: 112px; }
  }
}

@keyframes trust-marquee-scroll {
  to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}