/* #reviews (owner P5) · blueprint 3.9 · CALL-E P09 "Pegged notes wall" on yellow.
   Split header (eyebrow + H2 left, rating note right) -> 6 cream notes pegged on cords:
   3 + 3 on two cords >= 992 px, 2 + 2 + 2 at 768-991 px, one note per cord <= 767 px.
   Each note: 5 star tiles, quote with one butter swipe, figcaption (avatar, name, role, Verified pill).
   Semantic variables only (dark mode is a variable swap). No JS. */

#reviews .head .t-h2 { max-width: 12em; text-wrap: balance; }
#reviews .rate b { font-weight: 600; color: var(--fg); }
#reviews .rate .stars { margin: 0 2px; vertical-align: -3px; }

/* ---------- the notes wall */
#reviews .notes-row { margin-top: 48px; }
#reviews .notes {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 28px; align-items: start;
}
#reviews .notes > li { position: relative; }
/* one cord per row, drawn by the first note of the row (same line as the kit cord: 10 px above the note top) */
#reviews .notes > li::before {
  position: absolute; z-index: 1; top: -24px; left: -100vw; right: -100vw; height: 28px;
  background: var(--cord-img) repeat-x 0 0 / 12px 28px; pointer-events: none;
}
#reviews .notes > li:nth-child(3n+1)::before { content: ""; }
/* slow left-to-right stagger per cord (CALL-E notes: .25 / .55 / .85 s) */
#reviews .notes > li .hg { --d: 0.25s; }
#reviews .notes > li:nth-child(3n+2) .hg { --d: 0.55s; }
#reviews .notes > li:nth-child(3n) .hg { --d: 0.85s; }

#reviews .rnote { display: grid; gap: 16px; padding: 32px 26px 22px; }
#reviews .rnote blockquote { margin: 0; font-size: 17px; line-height: 1.45; }
#reviews figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding-top: 16px; border-top: 1px solid var(--hair);
}
#reviews .av { flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#reviews .by { flex: 1 1 120px; min-width: 0; display: grid; gap: 3px; }
#reviews .nm { font-size: 15px; font-weight: 600; line-height: 1.25; }
#reviews .rl { font: 400 12px/1.27 var(--mono); text-transform: uppercase; color: var(--fg3); }
#reviews .ver { margin-left: auto; padding: 6px 12px; font-size: 12px; }
#reviews .ver i {
  flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--tick-mask) center / contain no-repeat; mask: var(--tick-mask) center / contain no-repeat;
}

/* ---------- tablet: 2 + 2 + 2 */
@media (768px <= width <= 991px) {
  #reviews .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #reviews .notes > li:nth-child(3n+1)::before { content: none; }
  #reviews .notes > li:nth-child(2n+1)::before { content: ""; }
  #reviews .notes > li:nth-child(n) .hg { --d: 0.25s; }
  #reviews .notes > li:nth-child(2n) .hg { --d: 0.55s; }
}

/* ---------- phones: one note per cord */
@media (width <= 767px) {
  #reviews .notes-row { margin-top: 40px; }
  #reviews .notes { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  #reviews .notes > li::before { content: ""; }
  #reviews .notes > li:nth-child(n) .hg { --d: 0.15s; }
  #reviews .rnote { padding: 30px 22px 20px; }
}