/* ======================================================
   Social Proof Styles — Trust Bar + App Store Reviews
   Tokens reused from landing.css (warm "Lyrical Keepsake" palette)
   ====================================================== */

/* ---------- Trust Bar ---------- */

.trust-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px auto 8px;
  padding: 18px 28px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  max-width: 640px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 24px -16px rgba(48, 46, 44, 0.12);
}

.trust-bar-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 22px;
  letter-spacing: 1px;
}

.trust-star {
  color: #F5A623;
  /* Subtle gold gradient depth */
  background: linear-gradient(180deg, #FFC857 0%, #F5A623 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.trust-bar-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.trust-stat-num {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--on-surface);
  line-height: 1;
}

.trust-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trust-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--surface-container-high);
}

/* ---------- App Store Reviews section ---------- */

.app-store-proof {
  margin: 80px auto 60px;
  padding: 0 20px;
  max-width: var(--max-width);
}

.app-store-proof-header {
  text-align: center;
  margin-bottom: 36px;
}

.app-store-proof .proof-heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 8px;
}

.app-store-proof .proof-heading::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AA2C32'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.app-store-proof .proof-lede {
  font-size: 15px;
  color: var(--on-surface-variant);
  max-width: 480px;
  margin: 0 auto;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px 22px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 12px 28px -20px rgba(48, 46, 44, 0.15);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 18px 36px -20px rgba(48, 46, 44, 0.22);
}

.review-stars {
  font-size: 16px;
  letter-spacing: 2px;
  color: #F5A623;
  background: linear-gradient(180deg, #FFC857 0%, #F5A623 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.review-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.3;
}

.review-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface);
  flex: 1;
}

.review-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-container-high);
}

.review-author strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--on-surface);
}

.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-variant);
}

.review-badge-icon {
  color: #F5A623;
  flex-shrink: 0;
}

.reviews-footer-note {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--on-surface-variant);
}

.reviews-footer-note a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.reviews-footer-note a:hover {
  text-decoration: underline;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .trust-bar {
    margin: 18px 16px 8px;
    padding: 14px 18px;
  }
  .trust-bar-stats {
    gap: 16px;
  }
  .trust-stat-num {
    font-size: 20px;
  }
  .trust-stat-label {
    font-size: 11px;
  }
  .trust-stat-divider {
    height: 24px;
  }
  .app-store-proof {
    margin: 56px auto 40px;
  }
  .app-store-proof .proof-heading {
    font-size: 22px;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .review-card {
    padding: 22px 20px 18px;
  }
}