/* Homepage "What users are saying": selected Chrome Web Store reviews as short,
   anonymous excerpts. A horizontal scroll-snap track that works without JS
   (swipe / scroll); reviews.js adds prev/next, dots and a pausable auto-advance. */
.rv { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rv-inner { max-width: var(--content-width); margin: 0 auto; padding: 3.5rem 1.5rem 3rem; }
.rv h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.01em; margin: 0 0 0.5rem; text-align: center; }
.rv .section-sub { margin-bottom: 2rem; }

.rv-track {
  margin: 0; padding: 0.25rem 0.1rem 0.75rem;
  display: flex; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
.rv-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.rv-card {
  flex: 0 0 calc((100% - 1.25rem) / 2);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.85rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
}
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rv-stars { color: #d98a1b; letter-spacing: 0.12em; font-size: 1.05rem; line-height: 1; }
.rv-kind { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.rv-quote { margin: 0; font-size: 1.12rem; line-height: 1.55; color: var(--fg); }
.rv-quote p { margin: 0; }
.rv-quote p::before { content: "“"; color: var(--accent); font-weight: 700; margin-right: 0.08em; }
.rv-quote p::after { content: "”"; color: var(--accent); font-weight: 700; margin-left: 0.04em; }
.rv-orig { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--fg-muted); }
.rv-orig q { quotes: "“" "”"; font-style: italic; }
.rv-by { margin-top: auto; padding-top: 0.25rem; font-size: 0.88rem; color: var(--fg-muted); }

.rv-controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; }
.rv-controls[hidden] { display: none; }
.rv-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.8rem;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 999px;
  font: 600 0.9rem var(--font-sans); cursor: pointer; }
.rv-btn:hover { border-color: var(--border-strong); }
.rv-btn:focus-visible, .rv-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-dots { display: flex; gap: 0.15rem; }
.rv-dot { width: 1.75rem; height: 1.75rem; border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rv-dot::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--border-strong); transition: background 0.2s, transform 0.2s; }
.rv-dot[aria-current="true"]::before { background: var(--accent); transform: scale(1.25); }
.rv-more { text-align: center; margin: 1.25rem 0 0; font-size: 0.95rem; }

@media (max-width: 760px) {
  .rv-card { flex-basis: 86%; padding: 1.25rem 1.2rem 1.1rem; }
  .rv-quote { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-track { scroll-behavior: auto; }
  .rv-dot::before { transition: none; }
}