/* Maiaveda reviews section. Self-contained: rendered by assets/reviews.js into <div data-reviews>. */
.rvw{padding-block:clamp(3.25rem,7vw,6.5rem);overflow:hidden}
.rvw-head{padding-inline:var(--gutter);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.rvw-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.015em;line-height:1.05;margin:0 0 .6rem}
.rvw-head p{margin:0;color:var(--ink-muted);font-size:clamp(1rem,1.4vw,1.15rem)}
.rvw-row{overflow:hidden;width:100%;margin-bottom:1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rvw-track{display:flex;gap:1rem;width:max-content;animation:rvw-left 90s linear infinite;will-change:transform}
.rvw-row[data-dir="right"] .rvw-track{animation-name:rvw-right}
/* No reaction to the mouse: the rows keep moving under the pointer. Keyboard
   focus inside a row still pauses it, so someone tabbing to "Read on Google" can
   reach the link, and reduced motion stops the rows altogether. */
.rvw-row:focus-within .rvw-track{animation-play-state:paused}
@keyframes rvw-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rvw-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.rvw-tile{flex:none;width:340px;background:var(--parchment-2);border:1px solid var(--hair);border-radius:12px;padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.7rem;color:var(--ink)}
.rvw-stars{display:flex;gap:2px}.rvw-stars svg{width:15px;height:15px;fill:#E9A82E;display:block}
.rvw-q{margin:0;font-family:var(--serif);font-size:1.05rem;line-height:1.5;font-weight:400;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rvw-more{font-size:.82rem;font-weight:600;color:var(--teal-deep);text-decoration:none;width:fit-content}
.rvw-more:hover{text-decoration:underline}
.rvw-who{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--parchment-3);font-size:.86rem;line-height:1.35}
.rvw-who b{display:block;font-weight:600}.rvw-who span{color:var(--ink-muted)}
.rvw-grid{display:grid;gap:1rem;padding-inline:var(--gutter)}
.rvw-grid .rvw-tile{width:auto}
@media(min-width:700px){.rvw-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rvw-grid{grid-template-columns:repeat(3,1fr)}}
.rvw-badges{padding-inline:var(--gutter)}
.rvw-badges .badges{margin-top:clamp(1.25rem,3vw,2rem);padding-top:0;border-top:0;justify-content:center}
.rvw-badges .badge{color:var(--ink)}
@media(max-width:640px){
  .rvw-tile{width:280px;padding:1.1rem 1.15rem}
  /* Side by side, not stacked. Two proofs read as corroboration; one above the
     other reads as a list you stop reading. Only when the reader's text is too
     large for both on one line does the second drop below (ECHOSTUDIO-762). */
  .rvw-badges .badges{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:.75rem}
  .rvw-badges .badge{flex:1 1 0;min-width:auto}
  .rvw-badges .badge-mid{min-width:0}
  /* Each count may use 5px of the 12px gap before it wraps, as it always has at
     390px, so the line stays whole on 375 and 390 phones and the two counts can
     never come closer than 2px. Narrower than that, the count wraps under itself
     (on a 360px phone it used to hang 16px over, 3px from the Google count). */
  .rvw-badges .badge-sub{margin-inline:-5px}
  .rvw-badges .badge b,.rvw-badges .badge span{font-size:.72rem;line-height:1.25}
}
@media(max-width:359px){.rvw-badges .badge{min-width:0}}
/* The right-moving row's own rule is more specific, so it is named here too, or it kept moving under reduced motion (ECHOSTUDIO-517). */
@media(prefers-reduced-motion:reduce){.rvw-track,.rvw-row[data-dir="right"] .rvw-track{animation:none}}
/* Stopped, the rows showed one review on a phone and three on a desktop, and
   the rest sat past the edge with no way to reach them (ECHOSTUDIO-762). Under
   reduced motion each row is a strip you swipe or scroll instead, holding one
   copy of each review; the copies that fill the moving loop are dropped. The
   fade at the edges goes too, so the last review isn't half hidden. */
@media(prefers-reduced-motion:reduce){
  .rvw-row{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);padding-bottom:.5rem;-webkit-mask-image:none;mask-image:none}
  .rvw-track{transform:none}
  .rvw-tile[aria-hidden="true"]{display:none}
  .rvw-tile{scroll-snap-align:start}
}

/* The mark sits on the same line as the stars so each card says where it came
   from without repeating it in the byline. */
.rvw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
}
.rvw-top .rvw-stars { margin: 0; }
.rvw-top .badge-logo {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: .85;
}