/* Findr — mobile responsive overrides
   Forces stacked columns, smaller paddings, and hides hero demo on phones.
   Works by overriding inline styles with high-specificity attribute selectors. */

@media (max-width: 860px) {

  /* ---- Global: let the body breathe ---- */
  html, body { overflow-x: hidden; }

  /* ---- Any 2-col or multi-col grid → single column ---- */
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 2fr 3fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 2fr repeat(4, 1fr)"],
  [style*="grid-template-columns: 2fr repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Small chip grids stay multi-col but shrink */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ---- Section paddings ---- */
  section,
  [style*="padding: '96px 32px'"],
  [style*="padding: '64px 32px'"],
  [style*="padding: '48px 32px"],
  [style*="padding: '8px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Bring everything in to fit viewport */
  [style*="maxWidth: 1400"],
  [style*="max-width: 1400"] {
    max-width: 100% !important;
  }

  /* ---- Nav: show burger, hide text links ---- */
  .findr-nav-links { display: none !important; }
  .findr-nav-login { display: none !important; }
  .findr-nav-burger { display: inline-flex !important; }
  .findr-nav {
    margin: 12px 10px 0 !important;
    padding: 8px 8px 8px 16px !important;
    max-width: calc(100vw - 20px) !important;
  }
  .findr-nav button[style*="padding: 10px 18px"] {
    padding: 9px 14px !important;
    font-size: 13px !important;
  }

  /* ---- Hero: hide the big right-side demo card on phones ---- */
  /* Mark the hero demo cards directly via data attr from JSX side would be cleaner,
     but we target by style substrings that React renders (rgb form). */
  section [style*="rgb(10, 10, 10)"][style*="border-radius: 24"],
  section [style*="rgb(10, 10, 10)"][style*="border-radius: 24px"],
  .findr-hero-demo {
    display: none !important;
  }

  /* ---- Headlines: smaller on mobile ---- */
  h1 {
    font-size: clamp(40px, 10vw, 56px) !important;
    line-height: 0.98 !important;
  }
  h2 {
    font-size: clamp(30px, 7.5vw, 42px) !important;
    line-height: 1.05 !important;
  }
  h3 {
    font-size: 20px !important;
  }

  /* ---- Stats/metrics dark band: allow horizontal scroll inside 4-col grid,
     or stack as 2x2 — we already force 1 col above, so override here: ---- */
  /* Metrics band: React renders #22222A as rgb(34, 34, 42) */
  [style*="background: rgb(34, 34, 42)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
  }
  [style*="background: rgb(34, 34, 42)"] > div {
    padding: 28px 18px !important;
  }

  /* ---- Steps cards min-height cap ---- */
  [style*="min-height: 380"],
  [style*="minHeight: 380"] {
    min-height: 0 !important;
  }

  /* ---- Buttons: bigger tap target, no wrap ---- */
  button {
    white-space: nowrap;
  }

  /* ---- Avatar + trust strip wrap ---- */
  [style*="flex-wrap: wrap"] {
    row-gap: 16px !important;
  }

  /* ---- Trust logos strip ---- */
  section [style*="opacity: 0.55"] {
    gap: 20px !important;
  }
  section [style*="opacity: 0.55"] > span {
    font-size: 15px !important;
  }

  /* ---- Outreach card (Elena) — stack nicely ---- */
  [style*="min-height: 400"],
  [style*="minHeight: 400"] {
    min-height: 0 !important;
  }

  /* ---- Footer: compress ---- */
  footer {
    padding: 48px 20px 28px !important;
  }
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  footer > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ---- FAQ: smaller padding ---- */
  [style*="padding: '20px 24px'"] {
    padding: 18px 20px !important;
    font-size: 15px !important;
  }

  /* ---- Generic big sections with fixed padding ---- */
  [style*="padding: 48px 40px"] {
    padding: 28px 20px !important;
  }
  [style*="padding: '48px 40px'"] {
    padding: 28px 20px !important;
  }
}

/* Very small phones — iPhone SE etc */
@media (max-width: 390px) {
  h1 { font-size: 40px !important; }
  h2 { font-size: 28px !important; }
  nav[style*="position: sticky"] > div:first-child > div {
    font-size: 12px !important;
    gap: 12px !important;
  }
}