/* Base + layout utilities (Tailwind via Play CDN in pages/index.html) */

html {
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem !important;
  }
}

.container-page {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-page {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-page {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 1280px) {
  .container-page {
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* —— Responsive rhythm (Figma 3110:13093 mobile · 3139 desktop) —— */

/* Figma 3110:13093 mobile inner y=20 · ~64px between section frames · 3139 desktop y=60 */
.py-section-r {
  padding-bottom: 2rem;
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .py-section-r {
    padding-bottom: 3.75rem;
    padding-top: 3.75rem;
  }
}

/* Social proof + steps share one Figma band — avoid double 60px gap on desktop */
.pt-section-social-r {
  padding-top: 2rem;
}

.pb-section-social-r {
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .pt-section-social-r {
    padding-top: 3.75rem;
  }

  .pb-section-social-r {
    padding-bottom: 0;
  }
}

.pt-section-steps-r {
  padding-top: 2rem;
}

.pb-section-steps-r {
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .pt-section-steps-r {
    padding-top: 4rem;
  }

  .pb-section-steps-r {
    padding-bottom: 3.75rem;
  }
}

.text-display-home-r {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1.22;
}

@media (min-width: 640px) {
  .text-display-home-r {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}

@media (min-width: 768px) {
  .text-display-home-r {
    font-size: 2.75rem;
    letter-spacing: -0.08em;
  }
}

@media (min-width: 1024px) {
  .text-display-home-r {
    font-size: 3.5rem;
    letter-spacing: -0.12rem;
    line-height: 1.3;
  }
}

@media (min-width: 1280px) {
  .text-display-home-r {
    font-size: 4rem;
    letter-spacing: -0.14875rem;
    line-height: 1.3;
  }
}

.text-heading-2-r {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1875;
}

@media (min-width: 640px) {
  .text-heading-2-r {
    font-size: 2.125rem;
    line-height: 1.2;
  }
}

@media (min-width: 768px) {
  .text-heading-2-r {
    font-size: 2.25rem;
    letter-spacing: -0.05em;
  }
}

@media (min-width: 1024px) {
  .text-heading-2-r {
    font-size: 2.5rem;
    letter-spacing: -0.06rem;
    line-height: 1.15;
  }
}

@media (min-width: 1280px) {
  .text-heading-2-r {
    font-size: 2.75rem;
    letter-spacing: -0.0825rem;
    line-height: 1.136;
  }
}

.text-heading-faq-r {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .text-heading-faq-r {
    font-size: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .text-heading-faq-r {
    font-size: 2.75rem;
    letter-spacing: -0.075rem;
    line-height: 1;
  }
}

.text-body-lg-r {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .text-body-lg-r {
    font-size: 1.125rem;
    line-height: 1.555;
  }
}

.text-stat-xl-r {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

@media (min-width: 640px) {
  .text-stat-xl-r {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .text-stat-xl-r {
    font-size: 3rem;
  }
}

@media (min-width: 1280px) {
  .text-stat-xl-r {
    font-size: 3rem;
    letter-spacing: -0.0275rem;
  }
}

.text-social-proof-r {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .text-social-proof-r {
    font-size: 1rem;
    letter-spacing: 0.08em;
  }
}

@media (min-width: 1024px) {
  .text-social-proof-r {
    font-size: 1.5rem;
    letter-spacing: 1.1px;
  }
}

/* Hero floating chips — Figma 3110:13135 (clear face center on mobile) */
.hero-chip {
  position: absolute;
  z-index: 20;
}

.hero-chip--verified {
  left: 0.25rem;
  top: 0.25rem;
}

.hero-chip--liveness {
  right: 0.25rem;
  top: 58%;
}

.hero-chip--matched {
  bottom: 0.75rem;
  left: 0.25rem;
}

@media (min-width: 640px) {
  .hero-chip--verified {
    left: 0;
    top: 22%;
  }

  .hero-chip--liveness {
    right: 4%;
    top: 38%;
  }

  .hero-chip--matched {
    bottom: 48%;
    left: -8%;
  }
}