/* Built by salon owners — Figma 10007:22439 (1728×494) */
/* Lavender band painted as a z:-1 layer under the glows; fades in/out over 120px so it blends into the sections
   above and below instead of starting/stopping in a hard line (Shane feedback). */
.built-by::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -120px; bottom: -120px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(232,232,242,0) 0, #e8e8f2 240px, #e8e8f2 calc(100% - 240px), rgba(232,232,242,0) 100%);
}
/* Desktop/tablet: the band starts with a hard edge at the top (the Features phone mockup sits on it), and only fades
   out at the bottom into Reviews. clip-path stops the band and its glows bleeding up past the top edge (Shane). */
@media (min-width: 900px) {
  .built-by { clip-path: inset(0 0 -1000px 0); }
  .built-by::before { top: 0; background: linear-gradient(to bottom, #e8e8f2 0, #e8e8f2 calc(100% - 240px), rgba(232,232,242,0) 100%); }
}
.built-by { padding: clamp(56px, calc(100 / 1728 * 100vw), 100px) 0; }

.built-by-glow { position: absolute; pointer-events: none; }
.built-by-glow img { position: absolute; }
.built-by-glow.g1 { left: -45.45px; top: -84.66px; width: 729.424px; height: 725.654px; }
.built-by-glow.g1 img { left: -64.6%; top: -64.94%; width: 229.2%; height: 229.88%; }
.built-by-glow.g2 { left: 43.17%; top: -163px; width: 774px; height: 770px; }
.built-by-glow.g2 img { left: -66.94%; top: -67.29%; width: 233.88%; height: 234.58%; }
.built-by-glow.m7, .built-by-glow.m8 { display: none; }

.built-by-inner {
  position: relative; width: 100%; max-width: calc(1441px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: clamp(40px, calc(72 / 1728 * 100vw), 72px);
}
.built-by-title { max-width: 933px; text-align: center; text-wrap: balance; font-size: clamp(36px, calc(54.74 / 1728 * 100vw), 54.74px); line-height: 1.2057; }
.built-by-accent { color: var(--text-success); }

/* Desktop: 3 × 237px items spread edge to edge (365px gaps at 1728); labels may overhang their 237px box, as in Figma */
.built-by-list { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.built-by-item { width: 237px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.built-by-badge { display: flex; align-items: center; padding: 22.727px; border-radius: 9999px; background: rgba(255, 255, 255, 0.3); }
.built-by-badge img { width: 54.55px; height: 54.55px; }
.built-by-label { font-size: clamp(22px, calc(26.4 / 1728 * 100vw), 26.4px); line-height: 1.2121; text-align: center; white-space: nowrap; }

/* Tablet: equal columns, labels wrap inside them */
@media (max-width: 1199px) {
  .built-by-list { align-items: flex-start; gap: 32px; }
  .built-by-item { flex: 1 1 0; width: auto; min-width: 0; }
  .built-by-label { white-space: normal; max-width: 280px; }
}

/* Mobile — Figma 10108:4584 (402 wide): centred two-line headline, then the three points as left-aligned rows
   (icon badge + label), with the phone frame's own two glows. */
@media (max-width: 899px) {
  .built-by { padding: 79px 0 80px; }
  .built-by-glow.g1, .built-by-glow.g2 { display: none; }
  .built-by-glow.m7, .built-by-glow.m8 { display: block; }
  .built-by-glow.m8 { right: -161px; top: -63px; width: 267px; height: 266px; }
  .built-by-glow.m8 img { left: -56.18%; top: -56.39%; width: 212.36%; height: 212.78%; }
  .built-by-glow.m7 { left: -143px; top: 177px; width: 468px; height: 467px; }
  .built-by-glow.m7 img { left: -74.79%; top: -74.95%; width: 249.58%; height: 249.9%; }

  .built-by-inner { max-width: calc(350px + 2 * var(--gutter)); gap: 64px; }
  .built-by-title { font-size: min(27.58px, 7.3vw); line-height: normal; }
  .built-by-accent { display: block; }

  .built-by-list { flex-direction: column; align-items: flex-start; gap: 48px; }
  .built-by-item { flex: none; width: 100%; flex-direction: row; align-items: center; gap: 8px; }
  .built-by-badge { flex: none; padding: 11.363px; }
  .built-by-badge img { width: 27.274px; height: 27.274px; }
  .built-by-label { font-size: 22.98px; line-height: normal; text-align: left; white-space: normal; max-width: none; }
}