.motion-control{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid rgba(244,239,229,.7);
  border-radius: 50%;
  background: #17202c;
  color: #f4efe5;
  cursor: pointer;
}
.motion-control[hidden]{ display: none; }
.motion-control:hover{ background: #2f3c50; }
.motion-control:focus-visible{ outline: 3px solid #d4a017; outline-offset: 4px; }
.motion-control svg{ display: block; width: 22px; height: 22px; fill: currentColor; }
.motion-control[data-motion-state="paused"] .motion-control__pause,
.motion-control[data-motion-state="playing"] .motion-control__play{ display: none; }
.hero > .motion-control,
.paid-hero > .motion-control{
  position: absolute;
  z-index: 5;
  right: 20px;
  bottom: 16px;
}
#trusted .trusted-head > .motion-control{
  position: absolute;
  right: 0;
  top: 0;
}
@media (prefers-reduced-motion: no-preference){
  body .hero > .hero-inner,
  body.editorial-consult .paid-hero > .container{
    padding-bottom: max(76px, env(safe-area-inset-bottom, 0px));
  }
  body #trusted .trusted-head{ position: relative; padding-right: 60px; }
}
body #trusted .client-marquee:not([data-motion-ready]) .marquee-inner{
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce){
  body #trusted #client-logo-marquee .marquee-inner{
    display: block !important;
    width: 100% !important;
    animation: none !important;
    transform: none !important;
  }
  body #trusted #client-logo-marquee .marquee-track{
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    box-sizing: border-box;
  }
  body #trusted #client-logo-marquee .marquee-track[aria-hidden="true"]{ display: none !important; }
}