/* Customer reviews on a white band: a star pill and the title centred on top, then one row of
   light grey quote cards drifting slowly across, fading out at both edges.

   Motion:
   - the row is one belt holding its cards a few times over; the belt slides by exactly one set
     (100% / --copies) and loops, so the seam never shows. Speed follows the number of cards
     (9s a card). Transform only: no layout work.
   - the pointer over the row pauses it (to read a card); so does keyboard focus inside it.
   - off screen the section skips rendering (content-visibility), so the loop costs nothing there.
   - reduced motion: no drift; the row becomes a plain horizontal scroller with one set of cards. */

.testimonials {
  --gutter: clamp(24px, 5vw, 96px);
  --card-w: clamp(280px, 27vw, 380px);
  --card-gap: 16px;
  position: relative; overflow: hidden;
  padding-block: clamp(96px, 12vh, 144px);
  background: #FFFFFF;
  color: var(--h10-ink);
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

.testimonials__head {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 820px; margin: 0 auto clamp(40px, 6vh, 64px); padding-inline: var(--gutter);
  text-align: center;
}
.testimonials__head .section-eyebrow { margin: 0; justify-content: center; }
.testimonials__badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 16px 8px 14px;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-muted);
}
.testimonials__stars, .review__rating { display: inline-flex; gap: 2px; color: var(--h10-yellow); }
.testimonials__stars svg, .review__rating svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.testimonials__lead { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.85; color: var(--ink-muted); }

/* the belt is laid out left to right in both languages so the slide maths is the same; each card
   keeps the page's own direction */
.testimonials__row {
  direction: ltr;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.testimonials__belt {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: testimonials-drift calc(var(--per) * 9s) linear infinite;
}
:root[dir="rtl"] .testimonials__belt { animation-direction: reverse; }   /* mirrored: new cards come in at the end of the line */
@keyframes testimonials-drift {
  to { transform: translateX(calc(-100% / var(--copies))); }
}
@media (hover: hover) and (pointer: fine) {
  .testimonials__row:hover .testimonials__belt { animation-play-state: paused; }
}
.testimonials__row:focus-within .testimonials__belt { animation-play-state: paused; }

/* a card: quote mark, the review, then its stars (and the name, when given) */
.review {
  flex: none; display: flex; flex-direction: column; gap: 18px;
  width: var(--card-w); margin-inline-end: var(--card-gap);
  padding: clamp(22px, 2vw, 28px);
  border-radius: 24px;
  background: var(--surface-alt);
}
:root[dir="rtl"] .review { direction: rtl; }
.review__quote { width: 30px; height: 22px; fill: var(--h10-yellow); }
.review__text { flex: 1; margin: 0; }
.review__text p { margin: 0; font-size: 16px; line-height: 1.9; color: var(--h10-ink); }
.review__by { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.review__name { font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-muted); }   /* who said it, or where (e.g. the app store) */

.testimonials__foot { display: flex; justify-content: center; margin-top: clamp(36px, 5vh, 56px); padding-inline: var(--gutter); }

@media (max-width: 560px) {
  .testimonials { --gutter: 16px; --card-gap: 12px; }
  .testimonials__row { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__belt { animation: none; }
  .testimonials__row {
    direction: inherit;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: var(--gutter);
    -webkit-mask-image: none; mask-image: none;
  }
  .testimonials__row::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: start; }
  .review[aria-hidden="true"] { display: none; }
}