/* ==========================================================
   RESPONSIVE OVERRIDES
   Fixes the Figma-exported CSS which uses absolute positioning
   with hardcoded pixel offsets. All sections are reflowed into
   the normal document layout using flexbox.
   ========================================================== */

/* ── FAQ text clipping fix ────────────────────────────────── */
/* span-text-sm had flex-shrink:0; button-w-full used space-between */
/* This caused FAQ text to get squished by the + icon and clip */
.span-text-sm {
  flex: 1 1 auto !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.span-text-sm > div {
  word-break: break-word !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
.button-w-full,
.button-w-full2 {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Section FAQ container padding fix ───────────────────── */
/* section-faq had padding: 0 440px which bleeds on small screens */
.section-faq {
  padding: 0 !important;
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: 100%;
}
.div-max-w-3-xl {
  padding: 60px 20px !important;
  max-width: 768px;
  margin: 0 auto;
  width: 100%;
}

/* ── Case study stats grid ────────────────────────────────── */
/* div-grid3 had a fixed 120px height with absolutely-positioned children */
.div-grid3 {
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  position: static !important;
}

/* div2/div3/div4/div5 were absolutely positioned inside the stats grid */
.div2, .div3, .div4, .div5 {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  width: auto !important;
  flex: 1 1 120px !important;
}

/* Case study card had min-height: 547px creating a large blank area */
.div-flex6 {
  min-height: 0 !important;
  flex-direction: column !important;
}
@media (min-width: 768px) {
  .div-flex6 { flex-direction: row !important; }
}

/* ── Global container ─────────────────────────────────────── */
._1648-w-default {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.div-min-h-screen {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 100vh;
  position: static !important;
}

/* ── Hide "Edit with Lovable" badge ───────────────────────── */
.edit-with-lovable {
  display: none !important;
}

/* ── Header ───────────────────────────────────────────────── */
.header-fpsc-id-1-1772289818056 {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100%;
  z-index: 50;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.div-max-w-7-xl7 {
  padding: 0 20px !important;
  height: 64px !important;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ── Hero Section ─────────────────────────────────────────── */
.section-bg-foreground {
  position: static !important;
  padding: 0 !important;
  width: 100%;
}

.div-max-w-7-xl {
  flex-direction: column !important;
  padding: 60px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
  gap: 32px !important;
}

@media (min-width: 1024px) {
  .div-max-w-7-xl {
    flex-direction: row !important;
    padding: 96px 32px !important;
    gap: 48px !important;
  }
}

.div-flex-1 { width: 100%; }

.div-flex-12 {
  width: 100%;
  height: 280px !important;
}
@media (min-width: 768px) {
  .div-flex-12 { height: 420px !important; }
}

.scale-high-performing-creator-content {
  font-size: 36px !important;
  line-height: 40px !important;
}
@media (min-width: 768px) {
  .scale-high-performing-creator-content {
    font-size: 50px !important;
    line-height: 54px !important;
  }
}
@media (min-width: 1024px) {
  .scale-high-performing-creator-content {
    font-size: 60px !important;
    line-height: 60px !important;
  }
}

.diverse-creators-recording-tik-tok-content-with-ring-lights {
  border-radius: 12px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ── Testimonials Bar ─────────────────────────────────────── */
.section-bg-card {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}
.div-max-w-7-xl2 {
  flex-direction: column !important;
  padding: 32px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
  gap: 20px !important;
}
@media (min-width: 640px) {
  .div-max-w-7-xl2 { flex-direction: row !important; }
}

/* ── Press / Stats Bar ────────────────────────────────────── */
.section-bg-card2 {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}
.div-max-w-7-xl3 {
  flex-wrap: wrap !important;
  padding: 24px 20px !important;
  justify-content: center !important;
  max-width: 1280px;
  margin: 0 auto;
  gap: 16px !important;
  row-gap: 16px !important;
}

/* ── Features Main Section ────────────────────────────────── */
/* This is the big section with all the feature cards inside */
.div-max-w-7-xl4 {
  position: static !important;
  height: auto !important;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 20px !important;
}

/* Inner feature components that had top: Xpx */
.div-text-center {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  padding: 0 0 32px 0 !important;
}

.span-inline-flex {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  margin-bottom: 16px !important;
}

.div-max-w-2-xl {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  max-width: 100% !important;
  padding: 32px 0 !important;
}

.h-3-text-xl {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  height: auto !important;
  flex-direction: column !important;
  margin-bottom: 24px !important;
}
@media (min-width: 768px) {
  .h-3-text-xl { flex-direction: row !important; }
}

.div-space-y-4 {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  flex-direction: column !important;
}
@media (min-width: 768px) {
  .div-space-y-4 { flex-direction: row !important; }
}

/* ── Case Studies Section ─────────────────────────────────── */
.div-rounded-2-xl3 {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}
.div-max-w-7-xl5 {
  flex-direction: column !important;
  padding: 60px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
  gap: 32px !important;
}
@media (min-width: 768px) {
  .div-max-w-7-xl5 { flex-direction: row !important; }
}

/* Fix side-by-side stats boxes (.div2, .div3, .div4, .div5) */
.div2, .div3, .div4, .div5 {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  width: 100% !important;
}

/* ── CTA Section ─────────────────────────────────────────── */
.section-bg-primary {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}

/* Specifically target the section that had top: 3582.5px */
.div-max-w-3-xl,
.div-max-w-3-xl2 {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 60px 20px !important;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Secondary CTA / Outro (top: 4508.5px) ───────────────── */
.div-max-w-3-xl + *,
[class*="section-"] {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer-bg-foreground {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: 100%;
}
.div-max-w-7-xl6 {
  flex-direction: column !important;
  padding: 48px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
  gap: 32px !important;
  width: 100%;
}
@media (min-width: 768px) {
  .div-max-w-7-xl6 { flex-direction: row !important; }
}

.div-border-t {
  width: 100%;
}
.p-text-xs3 {
  padding: 20px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Mobile Nav toggle ────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-hidden { display: none !important; }
  .div-flex11 { display: none !important; }
}

/* ── Responsive buttons ───────────────────────────────────── */
@media (max-width: 480px) {
  .div-flex {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .button-inline-flex,
  .button-inline-flex2 {
    width: 100% !important;
    justify-content: center !important;
  }
  .launch-campaigns-automate-outreach-negotiate-deals-approve-ugc-and-pay-creators-all-in-one-performance-engine {
    display: none !important;
  }
}

/* ── Scroll padding for sticky header ────────────────────── */
html { scroll-padding-top: 72px; }

/* ── Feature card image containers ───────────────────────── */
.div-rounded-2-xl {
  height: 220px !important;
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important;
}
@media (min-width: 640px) {
  .div-rounded-2-xl { height: 280px !important; }
}

/* ── Features "Discover" Section ─────────────────────────── */
.section-features {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}

.div-max-w-7-xl4 {
  position: static !important;
  height: auto !important;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}

/* Image grid (absolute: top 254px) */
.div-grid {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
@media (min-width: 640px) {
  .div-grid { flex-direction: row !important; }
}

/* "Filter tags" card (absolute: top 810px) */
.div-rounded-2-xl2 {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  height: auto !important;
  padding: 32px 20px !important;
  flex-direction: column !important;
}

/* Bottom feature cards grid (absolute: top 1194px) */
.div-grid2 {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
@media (min-width: 640px) {
  .div-grid2 { flex-direction: row !important; }
}

/* ── Case Studies Section ─────────────────────────────────── */
.section-case-studies {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}

.div-max-w-7-xl5 {
  flex-direction: column !important;
  padding: 60px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
  gap: 32px !important;
  width: 100%;
}
@media (min-width: 768px) {
  .div-max-w-7-xl5 { flex-direction: row !important; }
}

/* Stats grid inside case studies */
.div-grid3 {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
}

/* Side-by-side stat columns (div2 / div3 / div4 / div5) */
.div2, .div3, .div4, .div5 {
  position: static !important;
  right: auto !important; left: auto !important; top: auto !important;
  width: 100% !important;
}

/* ── FAQ Section ──────────────────────────────────────────── */
.section-faq,
[class*="section-faq"],
[class*="faq-bg"] {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}

/* ── CTA Section ─────────────────────────────────────────── */
.section-bg-primary {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important;
  width: 100%;
}
.div-max-w-3-xl,
.div-max-w-3-xl2 {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  padding: 60px 20px !important;
  max-width: 700px;
  margin: 0 auto;
}

/* ── Global catch-all for any remaining absolute sections ─── */
/* Only targets top-level section wrappers, not inner UI components */
.div-min-h-screen > [class*="section-"],
.div-min-h-screen > [class*="-bg-"] {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: 100% !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer-bg-foreground {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: 100%;
}
.div-max-w-7-xl6 {
  flex-direction: column !important;
  padding: 48px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
  gap: 32px !important;
  width: 100%;
}
@media (min-width: 768px) {
  .div-max-w-7-xl6 { flex-direction: row !important; }
}

.div-border-t { width: 100%; }
.p-text-xs3 {
  padding: 20px 20px !important;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Mobile Nav toggle ────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-hidden { display: none !important; }
  .div-flex11 { display: none !important; }
}

/* ── Responsive buttons ───────────────────────────────────── */
@media (max-width: 480px) {
  .div-flex {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .button-inline-flex,
  .button-inline-flex2 {
    width: 100% !important;
    justify-content: center !important;
  }
}

html { scroll-padding-top: 72px; }

/* ── Mobile font-size caps (≤480px) ──────────────────────── */
@media (max-width: 480px) {
  /* Feature card headings ("Scale Creator Partnerships", "Cutting-Edge AI Tech") */
  .scale-creator-partnerships,
  .cutting-edge-ai-tech,
  .h-3-text-lg > div,
  .h-3-text-xl > div {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  /* "The Best in Class Creators" heading */
  .the-best-in-class-creators-capture-and-track-remarkable-results {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  /* Case study card title (GlowUp Beauty) */
  .glow-up-beauty,
  .h-3-text-2-xl > div {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  /* Section headings ("Using Technology...", "Elevating Success...") */
  .using-technology-to-scale-creator-performance,
  .elevating-success-case-studies-of-our-impact,
  .h-2-text-3-xl > div {
    font-size: 28px !important;
    line-height: 34px !important;
  }

  /* FAQ heading "Have any questions?" */
  .have-any-questions,
  [class*="have-any-questions"] {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  /* CTA headings */
  .scale-high-performing-creator-content2 {
    font-size: 28px !important;
    line-height: 34px !important;
  }
}

/* ── Filter tags overflow fix ─────────────────────────────── */
/* The tags row (FAMILY VIBE, AUTUMN, etc.) was escaping left edge */
.div-flex5 {
  overflow: hidden !important;
  justify-content: center !important;
  padding: 0 8px !important;
}

/* ── Prevent body-level horizontal scroll ─────────────────── */
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── FAQ item text clipping fix ───────────────────────────── */
/* FAQ text was going off-screen at 400px */
[class*="when-do-we"],
[class*="what-is-your-creator"],
[class*="how-do-i-get"],
[class*="can-creators"],
[class*="how-do-you-ensure"],
[class*="what-support"],
[class*="how-can-i-track"],
.div-flex8 {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* ── FAQ section container ────────────────────────────────── */
[class*="section-faq"] .div-max-w-3-xl2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}