/* D01 — "Works with your device" strip at the foot of the medical protocol hero.
   Two identical logo sets in one track; the track slides by exactly one set (-50%) so the
   loop is seamless. Transform-only animation, paused on hover, static centred row under
   prefers-reduced-motion. Logo heights are tuned per brand so the four read at equal weight. */
/* Sits under the portrait and its cards, closing the hero, so the first screen keeps its
   composition (the portrait's head stays in view). */
.devices {
  --logo-h: 26px;
  --logo-gap: 3.5rem;
  --loop-duration: 40s;
  position: relative;
  z-index: 1;
  width: calc(100% - 32px);
  max-width: 64rem;
  /* Bottom margin leaves the hero's "Scroll to explore" cue its own space below. */
  margin: 2.5rem auto 6.5rem;
  padding: 1.75rem 1.25rem 2rem;
  text-align: center;
  /* A soft dark glass panel: the hero's glow is light here, so white text needs it. */
  background: rgba(90, 22, 8, .32);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.devices__eyebrow { color: inherit; opacity: 0.9; }
.devices__lede {
  max-width: 38rem;
  margin: 0.6rem auto 0;
  font-size: var(--text-small);
  line-height: 1.5;
  text-wrap: balance;
}

.devices__strip {
  margin-top: 1.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.devices__track {
  display: flex;
  width: max-content;
  animation: devices-loop var(--loop-duration) linear infinite;
}
.devices__strip:hover .devices__track { animation-play-state: paused; }

.devices__set {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding: 0 var(--logo-gap) 0 0;   /* trailing gap = inner gap, so set 2 starts where set 1 would repeat */
  margin: 0;
  list-style: none;
}
.devices__item {
  display: flex;
  align-items: center;
  height: var(--logo-h);
  opacity: 0.85;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.devices__item:hover { opacity: 1; }
.devices__item img { display: block; width: auto; filter: drop-shadow(var(--shadow-text-on-color)); }

/* Optical sizes: wide wordmarks sit shorter, the Fitbit mark (symbol + word) taller. */
.devices__item--withings img { height: calc(var(--logo-h) * 0.56); }
.devices__item--whoop img    { height: calc(var(--logo-h) * 0.62); }
.devices__item--fitbit img   { height: calc(var(--logo-h) * 1.0); }
.devices__word {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(var(--logo-h) * 0.66);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white);
}

@keyframes devices-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (min-width: 768px) {
  .devices { --logo-h: 32px; --logo-gap: 3.5rem; }
  .devices__lede { font-size: var(--text-body); }
}

@media (prefers-reduced-motion: reduce) {
  .devices__strip { -webkit-mask-image: none; mask-image: none; }
  .devices__track { width: auto; animation: none; justify-content: center; }
  .devices__set { flex-wrap: wrap; justify-content: center; row-gap: 1rem; column-gap: 2rem; padding: 0; }
  .devices__set[aria-hidden="true"] { display: none; }
}