/* Mobile-first polish. Desktop stays the same. */
@media (max-width: 768px){
  .mobile-hide{ display:none !important; }

  /* Hero: less tall + nicer rhythm */
  #top > .mx-auto{ padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  #top h1{ font-size: 40px !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
  #top p{ font-size: 15px !important; line-height: 1.55 !important; }

  /* Packages: horizontal swipe instead of long stack */
  #pricing{
    display:flex !important;
    gap:14px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom: 10px !important;
  }

  #pricing > article{
    flex: 0 0 86% !important;
    scroll-snap-align: start !important;
  }
  #pricing > article:last-child{ margin-right: 16px !important; }

  #pricing > *{
    flex: 0 0 88% !important;
    scroll-snap-align:start !important;
  }

  /* Section spacing */
  section{ scroll-margin-top: 72px; }

  /* Mobile hero CTA: smaller + side-by-side */
  #top .reveal.mt-7{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  #top .reveal.mt-7 a{
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    font-size: 13px !important;
  }

  /* Mobile hero: make the 3 info cards compact + swipe */
  #top .reveal.mt-8{
    display:flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 6px !important;
    margin-top: 14px !important;
  }
  #top .reveal.mt-8 > div{
    flex: 0 0 auto !important;
    min-width: 170px !important;
    padding: 12px 12px !important;
    border-radius: 22px !important;
    scroll-snap-align: start !important;
  }
  #top .reveal.mt-8 > div > div:first-child{
    font-size: 11px !important;
  }
  #top .reveal.mt-8 > div > div:last-child{
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  /* Headline a bit smaller + more modern spacing on mobile */
  #top h1{ font-size: 34px !important; }
  #top p{ font-size: 14px !important; }



  /* hero badge smaller */
  #top .reveal.mt-2{ font-size: 12px !important; padding: 6px 10px !important; }

}

/* --- Hero: mobile polish + prevent horizontal overflow --- */
@media (max-width: 768px){
  html, body{ overflow-x: hidden; }
  #top{ overflow-x: hidden; }

  /* Hide desktop-only panels that can accidentally show up on some browsers */
  .show-desktop{ display: none !important; }
  .heroRight{ display: none !important; }

  /* Keep hero content inside the viewport */
  #top .heroGrid{ grid-template-columns: 1fr; gap: 16px; }
  #top .heroLeft{ min-width: 0; }

  /* Make headline + copy more compact on phones */
  #top .heroLeft h1{
    font-size: clamp(34px, 9.5vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.02em;
  }
  #top .heroCopy{
    font-size: 16px;
    line-height: 1.55;
    max-width: 38ch;
  }

  /* CTAs: stack to avoid cut-off pills */
  #top .heroCtas{
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  #top .heroCtas .btn{ width: 100%; }

  /* Mini cards: horizontal scroll instead of oversized blocks */
  #top .heroMiniCards{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  #top .heroMiniCards::-webkit-scrollbar{ display: none; }
  #top .miniCard{
    flex: 0 0 auto;
    min-width: 220px;
    scroll-snap-align: start;
  }
  #top .miniLabel{ font-size: 12px; }
  #top .miniValue{ font-size: 16px; }

  /* Tap interactions shouldn’t shift layout */
  #top .iconBtn, #top .btn{ transform: translateZ(0); }
}


@media (min-width: 769px){
  .mobile-hide{ display:block !important; }
}