/* Reviews under the tiers: two rows of cards drifting in opposite directions, paused under the pointer
   (after 21st.dev „marquee-01“, rebuilt without React). Hidden until reviews.json has a review Rati showed. */
.reviews { padding-bottom: clamp(72px, 10vw, 140px); overflow: hidden; }
.reviews .lede { margin-bottom: 40px; }
.rv-rows { display: grid; gap: 16px; }
.rv-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rv-track { display: flex; gap: 16px; width: max-content; padding-block: 4px; animation: rv-drift var(--rv-dur, 60s) linear infinite; }
.rv-row.rv-back .rv-track { animation-direction: reverse; }
.rv-row:hover .rv-track, .rv-row:focus-within .rv-track { animation-play-state: paused; }
@keyframes rv-drift { to { transform: translateX(-50%); } }

.rv-card { flex: none; display: flex; flex-direction: column; gap: 12px; width: min(320px, 78vw); margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .035); color: var(--ink); }
.rv-card figcaption { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-ava { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff; font-weight: 700; font-size: 17px; }
.rv-who { min-width: 0; }
.rv-who b { display: block; font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-who small { display: block; font-size: 13px; color: var(--ink-3); }
.rv-stars { margin: 0; letter-spacing: 2px; font-size: 15px; color: var(--ink-3); }
.rv-stars b { font-weight: inherit; color: var(--violet-hi); }
.rv-card blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* no drift for anyone who asked for less motion: the rows simply scroll sideways */
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; }
  .rv-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}