/* mobile.css — phone-only refinements (max-width:767px).
   Everything >=768px (tablet/laptop/desktop) is intentionally untouched. */
@media (max-width: 767px) {
  /* Sections ship with 64px desktop side-padding unconditionally, which crushes/overflows
     phone layouts. Use a comfortable phone gutter instead. */
  .px-margin-desktop { padding-left: 20px !important; padding-right: 20px !important; }

  /* Big headings: guarantee line-height so multi-line headings never overlap on phones. */
  h1.font-headline-lg { line-height: 1.12 !important; }

  /* Safety net: never allow a stray wide element to create horizontal scroll. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Tighter vertical rhythm on phones — sections ship desktop-scale padding (up to
     ~112px top+bottom), which reads as big empty gaps on a small screen. Trim ~40%. */
  .py-28 { padding-top: 60px !important; padding-bottom: 60px !important; }
  .py-24 { padding-top: 56px !important; padding-bottom: 56px !important; }
  .py-20 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .py-16 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .pt-28 { padding-top: 60px !important; }
  .pt-24 { padding-top: 56px !important; }
  .pt-20 { padding-top: 48px !important; }
  .pb-20 { padding-bottom: 48px !important; }
  .pb-16 { padding-bottom: 40px !important; }

  /* Collapse the oversized empty area in the live-simulator panel on phones. */
  .min-h-\[560px\] { min-height: 320px !important; }
  .ec-shell { min-height: 300px !important; }
}