/* =====================================================================
   Team Hatch — Social proof components
   Google review badge, review cards, proof band, reels strip.

   SINGLE SOURCE OF TRUTH. Linked by index, pricing, getstarted, about,
   careers, skip and compare. Edit here and every page updates.

   Uses only existing Team Hatch tokens (defined in shared.css for pages
   that link it, and inline in :root for index/pricing/getstarted).
   No new colours, radii or type scales.
   ===================================================================== */

/* ---------- Google rating badge ---------- */
.gr-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 14px;
  background: var(--glass-fill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.gr-badge:hover { background: var(--glass-fill-hover); }
.gr-badge:focus-visible { outline: 2px solid var(--th-blue); outline-offset: 3px; }
.gr-g { width: 18px; height: 18px; flex: none; display: block; }
.gr-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.gr-stars { display: inline-flex; gap: 2px; }
.gr-stars svg { width: 14px; height: 14px; fill: var(--th-gold); display: block; }
.gr-count { font-size: 13.5px; color: var(--fg-3); white-space: nowrap; }
.gr-sep { width: 1px; height: 15px; background: var(--border-strong); flex: none; }

/* Hero placement: base .hero-ctas carries margin-bottom 72px which would
   strand the badge. Two-class specificity wins regardless of source order. */
.hero .hero-ctas { margin-bottom: 24px; }
.hero .hero-proof { margin-bottom: 64px; }

/* skip.html and compare.html use .page-hero, not .hero, so the rule above
   does not reach them. Give the badge its own breathing room there. */
.page-hero .hero-proof { margin-top: 24px; }

/* ---------- Review cards / proof band ---------- */
.proof-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  max-width: 1100px;
  margin: 40px auto 0;
}
.rv-card {
  background: var(--glass-fill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-24);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.rv-stars { display: inline-flex; gap: 3px; }
.rv-stars svg { width: 15px; height: 15px; fill: var(--th-gold); display: block; }
.rv-quote { color: var(--fg-2); font-size: 16px; line-height: 1.6; margin: 0; flex: 1; }
.rv-foot {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--border-weak);
}
.rv-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #0B0A0C;
}
.rv-avatar.p1 { background: var(--th-blue); }
.rv-avatar.p2 { background: var(--th-lilac); }
.rv-avatar.p3 { background: var(--th-green); }
.rv-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.rv-name { color: var(--fg-1); font-size: 14.5px; font-weight: 600; }
.rv-via { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-4); font-size: 12px; }
.rv-via svg { width: 11px; height: 11px; display: block; }

.band-foot { text-align: center; margin-top: 34px; }
.band-link {
  font-size: 14.5px;
  color: var(--th-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 203, 248, 0.32);
  padding-bottom: 2px;
}
.band-link:hover { border-bottom-color: var(--th-blue); }
.band-link:focus-visible { outline: 2px solid var(--th-blue); outline-offset: 3px; }

/* ---------- Single feature quote (about / careers) ---------- */
.feature-quote {
  max-width: 720px;
  margin: 0 auto;
  background: var(--glass-fill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-24);
  padding: 36px 38px 30px;
  text-align: left;
}
.feature-quote .rv-stars { margin-bottom: 16px; }
.feature-quote .rv-quote { font-size: 17.5px; line-height: 1.68; }
.feature-quote .rv-quote p { margin: 0 0 13px; }
.feature-quote .rv-quote p:last-child { margin-bottom: 0; }
.feature-quote .rv-foot { margin-top: 20px; }

/* ---------- Reels strip (mirrors getstarted.html) ---------- */
.feed-strip {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 980px;
  margin: 44px auto 0;
}
.feed-item { margin: 0; }
.feed-frame {
  position: relative;
  width: 320px;
  max-width: 80vw;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-24);
  background: #000;
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.feed-frame .feed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

@media (max-width: 900px) {
  .proof-band { grid-template-columns: 1fr; max-width: 460px; }
  .feature-quote { padding: 28px 24px 24px; }
}

/* Small phones: "Read our Google reviews" makes the pill ~351px, which
   overflows the hero content box at 375px and scrolls the page at 320px.
   Tighten the internals rather than shortening the copy. REQUIRED. */
@media (max-width: 430px) {
  .gr-badge {
    gap: 7px;
    padding: 8px 13px 8px 11px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .gr-g { width: 16px; height: 16px; }
  .gr-score { font-size: 14px; }
  .gr-stars svg { width: 12px; height: 12px; }
  .gr-count { font-size: 12.5px; }
  .gr-sep { display: none; }
}