/* ============================================
   About Page – Parity with React Design
   ============================================ */

/* Container: React uses max-w-5xl (1024px) */
.kixie-about-page .kixie-signup-container {
  max-width: 1024px;
}

/* Hero: match React spacing pt-28 + py-20 lg:py-28 */
.kixie-about-hero {
  padding: 144px 0 80px !important;
}

/* Hero heading: React text-4xl md:text-5xl lg:text-6xl */
.kixie-about-hero-grid h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem) !important;
  letter-spacing: -0.02em;
}

/* Hero description: React text-lg */
.kixie-about-hero-grid p {
  font-size: 1.125rem !important;
  line-height: 1.65 !important;
}

/* Stats: React mt-20 (80px) and text-4xl md:text-5xl */
.kixie-about-stats-grid {
  margin-top: 80px !important;
}

.kixie-about-stat strong {
  font-size: clamp(2.25rem, 3.6vw, 3rem) !important;
}

.kixie-about-stat span {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Mission section: React bg-muted/30 – warm cream tint */
.kixie-about-band {
  padding: 80px 0 !important;
  background: hsl(40 15% 92% / 0.3) !important;
}

/* Culture section: React py-20 */
.kixie-about-section {
  padding: 80px 0 !important;
}

/* Row gap: React gap-12 (48px) */
.kixie-about-row {
  gap: 48px !important;
}

/* Image grid: React gap-4 (16px) */
.kixie-about-image-grid {
  gap: 16px !important;
}

/* Images: React rounded-2xl (16px) h-48 (192px) */
.kixie-about-image-grid img {
  border-radius: 16px !important;
  height: 192px !important;
}

/* Badge: React text-xs font-bold tracking-widest text-primary uppercase */
.kixie-about-copy span {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #7c3aed !important;
}

/* Section headings: React text-2xl md:text-3xl */
.kixie-about-copy h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.875rem) !important;
  margin: 12px 0 !important;
}

/* Section body text: React text-muted-foreground leading-relaxed */
.kixie-about-copy p {
  line-height: 1.65 !important;
}

/* CTA section: React hero-gradient (dark purple) py-20 */
.kixie-about-page .kixie-signup-purple-cta {
  padding: 80px 0 !important;
  background: linear-gradient(135deg,
    hsl(270 60% 18%) 0%,
    hsl(280 70% 30%) 40%,
    hsl(290 65% 40%) 80%,
    hsl(300 60% 45%) 100%
  ) !important;
}

/* CTA heading: React text-3xl md:text-4xl */
.kixie-about-page .kixie-signup-purple-cta-inner h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.25rem) !important;
}

/* CTA description: React text-lg text-white/80 */
.kixie-about-page .kixie-signup-purple-cta-inner p {
  font-size: 1.125rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 42rem !important;
}

/* CTA button: React rounded-md white button */
.kixie-about-page .kixie-signup-purple-cta .kixie-signup-btn.is-light {
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 2rem !important;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 1023px) {
  .kixie-about-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .kixie-about-row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .kixie-about-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .kixie-about-row.is-reverse .kixie-about-copy,
  .kixie-about-row.is-reverse .kixie-about-image-grid {
    order: initial !important;
  }
}

@media (max-width: 639px) {
  .kixie-about-hero {
    padding-top: 112px !important;
  }

  .kixie-about-stats-grid {
    grid-template-columns: 1fr !important;
    margin-top: 48px !important;
  }
}