/* Mobile safety */
* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* Fix the HOME hero on phones */
@media (max-width: 768px) {

  /* Section 1: stop being a giant empty wall */
  .u-section-1,
  .u-section-1 .u-sheet-1 {
    min-height: 520px !important;  /* enough room for logo + buttons */
    height: auto !important;
    padding: 16px !important;
  }

  /* IMPORTANT: remove Nicepage "valign-bottom" effect on mobile */
  .u-section-1 .u-sheet-1 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* center vertically */
    align-items: center !important;     /* center horizontally */
  }

  /* The big background/group block */
  .u-section-1 .u-group.u-image-1 {
    width: 100% !important;
    max-width: 420px !important;
    min-height: 520px !important;
    height: auto !important;
    margin: 0 auto !important;
    background-position: center center !important;
    background-size: contain !important;  /* keep it from blowing up */
    background-repeat: no-repeat !important;
  }

  /* Center the inside layout */
  .u-section-1 .u-container-layout-1 {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
  }

  /* Images inside hero: constrain sizes */
  .u-section-1 .u-image-2 { /* yourtimeisnow.png */
    width: min(90vw, 360px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .u-section-1 .u-image-3 { /* MAIN111 badge */
    width: min(70vw, 220px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .u-section-1 .u-image-4 { /* words.png */
    width: min(92vw, 380px) !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
  }

  /* Buttons: stack nicely */
  .u-section-1 .u-btn {
    width: min(92vw, 320px) !important;
    text-align: center !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-radius: 999px !important;
    margin: 6px 0 !important;
  }

  /* Optional: If the group is still pushing content down, kill any absolute positioning */
  .u-section-1 .u-image-1,
  .u-section-1 .u-image-2,
  .u-section-1 .u-image-3,
  .u-section-1 .u-image-4,
  .u-section-1 .u-btn-1,
  .u-section-1 .u-btn-2,
  .u-section-1 .u-btn-3,
  .u-section-1 .u-btn-4 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}