/*  ───────────────────────────────────────────────────────────────
    styles‑mobile.css   ⟩  Mobile‑only overrides for ≤ 768 px
    (Place in same folder as styles.css)
    ─────────────────────────────────────────────────────────────── */

@media only screen and (max-width: 768px) {

  /* ---------- Global container widths ---------- */
  .header,
  .hero-section,
  .grow-section,
  .pricing-section,
  .action-section,
  .how-section,
  .reporting-section,
  .testimonials-section,
  .contact-section,
  .faq-section,
  .footer-section,
  .footer-base,
  .about-hero,
  .about-section,
  .mission-vision,
  .team-section,
  .contact-page,
  .policy-page,
  .terms-page,
  .disclaimers-page {
    width: 100%;
    margin: 16px 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  /* ---------- Header ---------- */
  .header {
    height: 70px;
    padding: 0 20px;
  }
  .logo__text       { font-size: 20px; }
  .header__nav      { flex-direction: column; align-items: flex-start; gap: 8px; margin-left: 0; }
  .header__nav a,
  .header__nav .dropbtn { margin: 0; font-size: 14px; }

  /* ---------- Hero section ---------- */
  .hero-section           { flex-direction: column; height: auto; padding: 40px 20px; }
  .hero-section__content  { text-align: center; }
  .hero-section__subtitle { font-size: 16px; }
  .hero-section__title    { font-size: 36px; }
  .hero-section__image    { margin-top: 24px; display: flex; justify-content: center; }
  .hero-section__image img{ width: 90%; max-height: 260px; margin: 0; }

  /* ---------- Grow section ---------- */
  .grow-section__container { flex-direction: column; align-items: center; }
  .grow-section__features  { margin: 0; width: 100%; }
  .feature                 { width: 100%; height: auto; }
  .grow-section__content,
  .grow-section__image     { margin: 0; width: 100%; }
  .grow-section__image img { width: 100%; }
  .grow-section__title     { text-align: center; font-size: 28px; }
  .grow-section__text      { text-align: center; }
  .grow-section__btn       { width: 100%; }

  /* ---------- Pricing section ---------- */
  .pricing-section { padding: 40px 20px; }
  .pricing-grid    { flex-direction: column; gap: 24px; }
  .pricing-card    { max-width: 100%; padding: 2rem 1.5rem; }

  /* ---------- Action (video) section ---------- */
  .action-section{ padding: 40px 0 0; }
  section.action-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
  .action-section__video-container{ width: 90%; margin: 0; }
  .action-section__video-container video{ height: 240px; }

  /* ---------- How‑it‑works section ---------- */
  .how-section       { padding: 40px 20px; }
  .how-section__steps{ flex-direction: column; gap: 24px; }

  /* ---------- Reporting section ---------- */
  .reporting-section            { height: auto; padding: 40px 20px; }
  .reporting-section__container { flex-direction: column; }
  .reporting-section__image img { max-height: 260px; width: 100%; }
  .reporting-section__title     { font-size: 28px; text-align: center; }
  .reporting-section__text      { text-align: center; }

  /* ---------- Testimonials ---------- */
  .testimonials-section            { height: auto; padding: 40px 20px; }
  .testimonials-section__container { flex-direction: column; }
  .testimonial                    { height: auto; }

  /* ---------- Contact section ---------- */
  .contact-section              { padding: 40px 20px; }
  .contact-section__container   { flex-direction: column; }
  .contact-form__row--inline    { flex-direction: column; }
  .contact-form__submit         { align-self: stretch; }

  /* ---------- FAQ ---------- */
  .faq-section { padding: 40px 20px; }

  /* ---------- Footer ---------- */
  .footer-section  { padding: 40px 20px; }
  .footer-container{ flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-base     { width: 100%; margin-bottom: 32px; }

}
/*  ─────────────────────────────────────────────────────────────── */