/* Two equal groups form one continuous strip, including on wide screens. */
.marquee { position: relative; padding: 0; }
.marquee > .marquee-track {
  display: flex; align-items: stretch; gap: 0; width: max-content;
  animation: ddUsefulMarquee var(--dd-marquee-duration, 110s) linear infinite;
}
.marquee-group {
  display: flex; align-items: center; justify-content: space-around; flex: 0 0 auto;
  min-width: 100vw; margin: 0; padding: 0; list-style: none;
}
.marquee-item {
  display: flex; align-items: center; flex: 0 0 auto; gap: 32px; padding: 23px 24px;
  font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 1.4px;
  color: #454f40; white-space: nowrap;
}
.marquee-item > span { flex: 0 0 auto; font-size: 16px; color: var(--accent); }
.marquee::after {
  content: ''; position: absolute; inset: 0 0 0 auto; width: 148px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--paper) 48%);
}
body[data-dd-ui] .marquee-toggle {
  position: absolute; z-index: 1; top: 50%; right: 70px; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  font-size: 13px; line-height: 1; --dd-button-ink: #303a2e; --dd-button-bg: transparent;
}
.marquee-toggle > span { font-size: 13px; color: inherit; }
.marquee[data-paused="true"] > .marquee-track { animation-play-state: paused !important; }
@keyframes ddUsefulMarquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .marquee-item { padding: 19px 18px; gap: 24px; font-size: 11px; letter-spacing: .8px; }
  .marquee-item > span { font-size: 14px; }
  body[data-dd-ui] .marquee-toggle { right: 6px; }
  .marquee::after { width: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee > .marquee-track { animation: none !important; transform: none !important; width: 100%; }
  .marquee-group { width: 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-start; padding: 12px; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee-item { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 8px; gap: 16px; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
  .marquee::after, body[data-dd-ui] .marquee-toggle { display: none; }
}