/* =====================================================================
   What sits between the header and the quote engine on a phone.

   The phone sheet carries no hero copy: the green band's kicker ("Kenya
   Premium / Health Covers") and the insurer logo strip come off, so the
   quote card is the first thing under the header, opening with "Get Health
   Cover Quotes".

   What is left of the band is the green the card sits on, and the card's own
   top offset is trimmed to a small, even breath instead of the band's bottom
   padding, the band's bottom margin, the card's top margin and its top
   padding each stacking up. Desktop keeps its own two-column hero, so nothing
   here applies above 1024px.
   ===================================================================== */
@media (max-width: 1024px) {
  body[data-mobile="true"] #hero .hero-text {
    display: none !important;
  }

  body[data-mobile="true"] #hero {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }

  body[data-mobile="true"] #hero #quote-form {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }

  /* The heading carried its own top margin on top of the padding above it. */
  body[data-mobile="true"] #hero #quote-form > h2 {
    margin-top: 0 !important;
  }
}

/* =====================================================================
   The desk sheet, too.

   The results panel always opened three rem below the hero band. While the
   band was tall that read as a deliberate breath; now the hero is short, the
   same 48px shows the page's near-white backdrop as a blank strip between the
   green band and the Compare & Apply Online panel. The panel's own padding
   gives it the breathing room it needs, so the margin goes - the band and the
   panel meet.
   ===================================================================== */
@media (min-width: 1025px) {
  #resultsContainer {
    margin-top: 0 !important;
  }
}
