.elementor-2805 .elementor-element.elementor-element-95a7de2{--display:flex;}.elementor-2805 .elementor-element.elementor-element-cc2bbfc{--display:flex;}/* Start custom CSS for html, class: .elementor-element-08924be *//* ============================================================
   MOBILE RESPONSIVE FIXES for the referral landing page
   Paste this at the END of your existing Custom CSS
   (Site Settings -> Custom CSS), after what's already there.
   ============================================================ */

@media (max-width: 780px) {

  /* Force every two/three-column grid section to stack into
     a single column instead of squeezing side by side */
  section, div, form {
    grid-template-columns: 1fr !important;
  }

  /* Shrink the headline sizes so they don't overflow their column */
  h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  h3 {
    font-size: 19px !important;
  }

  /* Reduce the big $100 number in the hero card */
  div[style*="font-size: 72px"] {
    font-size: 44px !important;
  }

  /* Cut down side padding on the big sections so content
     doesn't feel cramped against the edges */
  section, div[style*="padding: 56px"], div[style*="padding: 48px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Let long headings wrap normally instead of stretching */
  h1, h2, h3, p {
    text-wrap: pretty;
  }
}/* End custom CSS */