/* ============================================================
   GOOGLE REVIEWS (Nov 11 2026, MH): the "5 stars from 12 Google reviews
   in our first month" line plus six real member quotes. Started on /join,
   then carries to home and /trial (same section everywhere).
   Quotes are the reviewers' own words, trimmed; names are first name +
   last initial (MH). No link to Google yet (MH).
   ============================================================ */
/* tan band so section colors keep alternating (MH Nov 11): on /join it sits between the teal tour and the cream perks */
.reviews { position: relative; background: var(--ground-3); padding: var(--pad-section, 96px) 24px; text-align: center; overflow: hidden; }
/* cream where the neighbors are tan or teal-then-tan (/trial: teal community above, tan tour below) */
.reviews--cream { background: var(--open-0); }
.reviews__head { display: flex; flex-direction: column; align-items: center; width: fit-content; max-width: 100%; margin: 0 auto; }
.reviews__script { font-family: var(--font-hand); font-size: clamp(36px, 28px + 2vw, 56px); color: var(--aperitivo-0); line-height: 1; margin: 0; transform: rotate(-3deg); }
.reviews__stars-big { display: flex; gap: clamp(6px, .8vw, 10px); justify-content: center; margin: 0 0 16px; color: var(--aperitivo-0); }
.reviews__stars-big svg { width: clamp(38px, 30px + 1.8vw, 58px); height: auto; }
/* header (MH Nov 11): big stars, handwritten "From our members", one plain sentence. The H2 is for screen readers only. */
.reviews__h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.reviews .sec-h { margin: 0; }
.reviews__sub { max-width: 21em; margin: 18px auto 0; font-family: var(--font-body); font-size: clamp(17px, 15px + .5vw, 21px); line-height: 1.45; color: var(--deep-1); text-wrap: balance; }

.rv-list { list-style: none; padding: 0; margin: clamp(36px, 5vw, 64px) auto 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); text-align: left; align-items: start; }
.rv { position: relative; background: var(--open-3); border-radius: var(--radius, 10px); padding: 30px 26px 22px;
  box-shadow: 0 1px 2px rgba(1,31,35,.06), 0 10px 26px -14px rgba(1,31,35,.22);
  display: flex; flex-direction: column; gap: 16px; }
.rv:nth-child(3n+1) { --r: -1.2deg; }
.rv:nth-child(3n+2) { --r: .8deg; margin-top: 18px; }
.rv:nth-child(3n)   { --r: -.5deg; margin-top: 6px; }
/* a strip of tape, like the taped photos elsewhere on the site */
.rv::before { content: ""; position: absolute; top: -11px; left: 50%; width: 86px; height: 22px; transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--ground-1) 70%, transparent); box-shadow: 0 1px 2px rgba(1,31,35,.08); }
.rv:nth-child(even)::before { transform: translateX(-50%) rotate(4deg); }
.rv__stars { display: flex; gap: 3px; color: var(--aperitivo-0); }
.rv__stars svg { width: 17px; height: 17px; }
.rv__q { margin: 0; font-family: var(--font-body); font-size: clamp(17px, 15.5px + .3vw, 19px); line-height: 1.5; color: var(--deep-0); }
.rv__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.rv__name { font-family: var(--font-display); font-size: 20px; line-height: 1.1; color: var(--deep-0); }

/* ---------- avatar: illustrated headshot (GPT Image 2.5 via Runware, coffee-cup illustration style) with a small Google mark (MH picked "C", Nov 11) ---------- */
.rv__av { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--deep-0); background: var(--open-subtle); }
.rv__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.rv__g { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); display: grid; place-items: center; }
.rv__g svg { width: 12px; height: 12px; }

@media (max-width: 999px) {
  .rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv:nth-child(n) { margin-top: 0; }
}
/* phones: one row you swipe through */
@media (max-width: 639px) {
  .reviews { padding-inline: 0; }
  .reviews__head { padding-inline: 16px; }
  /* the swipe row runs edge to edge of the screen, not the content column (MH Nov 11: no clipped cards) */
  .rv-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 18px 8vw 22px; margin: 22px calc(50% - 50vw) 0; width: 100vw; max-width: none; box-sizing: border-box; scroll-padding-inline: 8vw;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rv-list::-webkit-scrollbar { display: none; }
  /* swipe row: no tilt, no fade-in per card, so swiping feels like a plain carousel (MH Nov 11) */
  .rv-list { overscroll-behavior-x: contain; scroll-behavior: smooth; align-items: stretch; }
  .rv { flex: 0 0 84%; scroll-snap-align: center; scroll-snap-stop: always; --r: 0deg !important; }
  .js .rv.rise { opacity: 1; transform: none; transition: none; }
  .rv__hint { display: block; }
}
.rv__hint { display: none; margin: 4px 0 0; font-family: var(--font-hand); font-size: 22px; color: var(--deep-2); }
@media (min-width: 640px) { .reviews__sub { max-width: none; } }