/* ═══════════════════════════════════════════════════════════════
   Home page — Social Proof
   ═══════════════════════════════════════════════════════════════ */

.social-section {
  position: relative;
  padding: clamp(80px, 10vw, 120px) 0 0;
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
}

.sp-glow {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  width: min(820px, 80vw);
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(255, 107, 138, 0.10), transparent 65%),
    radial-gradient(60% 40% at 50% 100%, rgba(255, 155, 120, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

/* ─── Header ────────────────────────────────────────────────── */
.social-head {
  text-align: center;
  margin: 0 auto clamp(40px, 5vw, 56px);
  max-width: 880px;
  position: relative;
  z-index: 1;
}
.social-title {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--grey-100);
  margin: 0;
  text-wrap: balance;
}
.social-sub {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1.2;
  margin: 8px 0 0;
  background: var(--gradient-cherry);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ─── Trust row ─────────────────────────────────────────────── */
.sp-trust {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  justify-items: center;
  column-gap: 28px;
  row-gap: 40px;
  max-width: 880px;
  margin: 0 auto clamp(40px, 5vw, 56px);
  padding: 0 24px;
}

.sp-trust-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sp-trust-col--center {
  flex-direction: row;
  align-items: center;
  align-self: center;
  gap: 10px;
}

.sp-laurel {
  width: clamp(112px, 12vw, 150px);
  height: auto;
  display: block;
  transition: transform var(--duration-normal) var(--ease-spring);
}
.sp-laurel:hover { transform: translateY(-2px) scale(1.02); }

.sp-avatars {
  width: 120px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.sp-trusted-label {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1.2;
  color: var(--grey-100);
  margin: 0;
  white-space: nowrap;
}
.sp-trusted-label strong {
  font-weight: var(--fw-bold);
  background: var(--gradient-cherry);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.sp-store-badge {
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.sp-store-badge svg {
  display: block;
  height: 48px;
  width: auto;
}
.sp-store-badge:hover { transform: translateY(-2px); }

/* ─── Photo stage + chat bubbles ───────────────────────────────
   Photo (288×360) is centered in the stage. The 6 chat bubbles
   are anchored to STAGE CENTER (not stage edges) so their inner
   edges always sit ~80px inside the photo regardless of stage
   width. Bubbles extend outward and overlap the photo edges. ── */
.social-stage {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 720px;
  height: 460px;
  z-index: 1;
}

/* Mobile-only baked-in PNG (photo + bubbles in one image). Hidden on desktop. */
.sp-mobile-collage {
  display: none;
}

.sp-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 288px;
  height: 360px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 2;
}
.sp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── Chat bubbles ─── */
.sp-bubble {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  /* Auto-size to content — each bubble is as wide as its text needs */
  box-shadow:
    0 12px 28px -10px rgba(0, 0, 0, 0.65),
    0 2px 6px -2px rgba(0, 0, 0, 0.4);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.sp-bubble:hover { transform: translateY(-2px); }

.sp-bubble-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sp-bubble-emoji {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.sp-bubble-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.sp-bubble-time {
  font-size: 10px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
}
.sp-bubble-heart {
  width: 12px;
  height: 12px;
  display: block;
}

/* LEFT bubbles — wine red, her replies (21:11) */
.sp-bubble--left {
  background: #3a1518;
  color: #ece4d6;
}
.sp-bubble--left .sp-bubble-time { color: rgba(236, 228, 214, 0.55); }

/* RIGHT bubbles — near-black, his messages (15:25) */
.sp-bubble--right {
  background: #1a1a1a;
  color: #e8e8e8;
}
.sp-bubble--right .sp-bubble-time { color: rgba(232, 232, 232, 0.5); }

/* ─ Positioning: bubbles SIT ON the photo, anchored from stage CENTER.
   Photo half-width = 144px. `50% + 64px` = inner edge at center+64 =
   80px inside the photo's far edge. Each bubble's outer edge extends
   past the photo into negative space. Slight horizontal stagger per
   row keeps the layout playful. ─ */

/* LEFT side */
.sp-bubble--l1 { top:  46px; right: calc(50% + 64px); }
.sp-bubble--l2 { top: 198px; right: calc(50% + 72px); }
.sp-bubble--l3 { top: 350px; right: calc(50% + 56px); }

/* RIGHT side */
.sp-bubble--r1 { top:  46px; left: calc(50% + 64px); }
.sp-bubble--r2 { top: 198px; left: calc(50% + 56px); }
.sp-bubble--r3 { top: 350px; left: calc(50% + 80px); }

/* ─── Responsive ────────────────────────────────────────── */
/* Keep trust row HORIZONTAL across all breakpoints — just shrink. */
@media (max-width: 900px) {
  .sp-trust {
    column-gap: 20px;
    padding: 0 16px;
  }
  .sp-laurel { width: clamp(96px, 14vw, 130px); }
  .sp-avatars { width: 96px; }
  .sp-trusted-label { font-size: 16px; }
  .sp-store-badge svg { height: 42px; }
}

@media (max-width: 760px) {
  .sp-trust {
    column-gap: 16px;
    padding: 0 14px;
  }
  .sp-trust-col { gap: 12px; }
  .sp-trust-col--center { gap: 8px; }
  .sp-laurel { width: clamp(80px, 16vw, 110px); }
  .sp-avatars { width: 84px; }
  .sp-trusted-label { font-size: 14px; line-height: 1.25; }
  .sp-store-badge svg { height: 38px; }

  /* Photo + bubbles shrink */
  .social-stage { height: 420px; }
  .sp-photo { width: 220px; height: 300px; }
  .sp-bubble {
    font-size: 11px;
    padding: 6px 12px;
    gap: 8px;
  }
  .sp-bubble-time { font-size: 9.5px; }
  .sp-bubble--l1 { top:  16px; right: calc(50% + 50px); }
  .sp-bubble--l2 { top: 158px; right: calc(50% + 58px); }
  .sp-bubble--l3 { top: 300px; right: calc(50% + 42px); }
  .sp-bubble--r1 { top:  16px; left:  calc(50% + 50px); }
  .sp-bubble--r2 { top: 158px; left:  calc(50% + 42px); }
  .sp-bubble--r3 { top: 300px; left:  calc(50% + 66px); }
}

@media (max-width: 560px) {
  /* Replace floating photo + bubbles with the baked-in PNG collage. */
  .social-stage {
    height: auto;
    padding: 0 16px;
  }
  .sp-photo,
  .sp-bubble { display: none; }
  .sp-mobile-collage {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin: 0 auto;
  }

  /* Stack vertically: row 1 = two laurels, row 2 = avatars + 125K.
     Store badges are hidden on mobile (they live in the footer).
     Uses display:contents on the side columns so their children become direct
     grid items, then grid-template-areas places them. */
  .sp-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "laurel-l laurel-r"
      "center   center";
    column-gap: 14px;
    row-gap: 18px;
    padding: 0 16px;
    align-items: center;
    justify-items: center;
  }
  .sp-trust-col:nth-child(1),
  .sp-trust-col:nth-child(3) { display: contents; }
  .sp-trust-col:nth-child(1) .sp-laurel       { grid-area: laurel-l; }
  .sp-trust-col--center                       { grid-area: center; flex-direction: row; gap: 10px; }
  .sp-trust-col:nth-child(3) .sp-laurel       { grid-area: laurel-r; }
  .sp-store-badge                             { display: none; }

  .sp-laurel { width: clamp(110px, 28vw, 150px); }
  .sp-avatars { width: 72px; }
  .sp-trusted-label { font-size: 13px; white-space: normal; text-align: left; line-height: 1.3; }
  .sp-trusted-label br { display: inline; }
}

@media (max-width: 480px) {
  .social-section { padding-top: clamp(56px, 14vw, 80px); }
  .social-head { margin-bottom: 28px; }
  .social-title { font-size: clamp(32px, 9vw, 44px); }
  .social-sub   { font-size: clamp(18px, 5.5vw, 26px); }

  .sp-trust { row-gap: 16px; padding: 0 14px; margin-bottom: 28px; }
  .sp-laurel { width: clamp(100px, 30vw, 140px); }
  .sp-avatars { width: 64px; }
  .sp-trusted-label { font-size: 12.5px; }

  /* Photo + bubbles further shrink (hidden at <=560px anyway, but kept for fallback) */
  .social-stage { height: auto; }
  .sp-photo { width: 180px; height: 240px; }
  .sp-bubble {
    font-size: 10px;
    padding: 5px 10px;
    gap: 6px;
  }
  .sp-bubble-time { font-size: 9px; }
  .sp-bubble-emoji { font-size: 11px; }
  .sp-bubble-heart { width: 10px; height: 10px; }
  /* Photo half = 90; inset ~30px inside photo */
  .sp-bubble--l1 { top:  10px; right: calc(50% + 30px); }
  .sp-bubble--l2 { top: 138px; right: calc(50% + 38px); }
  .sp-bubble--l3 { top: 266px; right: calc(50% + 22px); }
  .sp-bubble--r1 { top:  10px; left:  calc(50% + 30px); }
  .sp-bubble--r2 { top: 138px; left:  calc(50% + 22px); }
  .sp-bubble--r3 { top: 266px; left:  calc(50% + 44px); }
}

@media (max-width: 380px) {
  .sp-trust { column-gap: 10px; row-gap: 14px; padding: 0 12px; }
  .sp-laurel { width: clamp(86px, 30vw, 120px); }
  .sp-avatars { width: 56px; }
  .sp-trusted-label { font-size: 11.5px; }
}

@media (max-width: 360px) {
  .sp-trust { column-gap: 8px; padding: 0 10px; }
  .sp-laurel { width: 84px; }
  .sp-avatars { width: 50px; }
  .sp-trusted-label { font-size: 11px; }

  .social-stage { height: auto; }
  .sp-photo { width: 156px; height: 210px; }
  .sp-bubble { font-size: 9.5px; padding: 4px 9px; }
  .sp-bubble--l1 { top:  6px;  right: calc(50% + 22px); }
  .sp-bubble--l2 { top: 122px; right: calc(50% + 30px); }
  .sp-bubble--l3 { top: 238px; right: calc(50% + 14px); }
  .sp-bubble--r1 { top:  6px;  left:  calc(50% + 22px); }
  .sp-bubble--r2 { top: 122px; left:  calc(50% + 14px); }
  .sp-bubble--r3 { top: 238px; left:  calc(50% + 36px); }
}