/* Landing page mobile overrides (modular, no changes to large existing CSS) */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* Background image: avoid distortion */
  .gather-hands-img-left { object-fit: cover !important; }
  .gather-hands-img-left.loaded { opacity: 0.3 !important; }

  /* Section height: handle mobile browser UI correctly */
  .welcome-section {
    height: auto !important;
    min-height: 100dvh;
    padding: 1.5rem;
  }

  .welcome-content { max-width: 100% !important; }

  /* Typography sizing */
  .welcome-title {
    font-size: 2.25rem !important;
    margin-bottom: 1rem !important;
  }

  .welcome-text-container { gap: 0.5rem; }

  /* Normalize line alignment and spacing */
  .welcome-text,
  .welcome-text-left,
  .welcome-text-right {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    padding-left: 0 !important;
    margin: 0 0 0.5rem 0 !important;
  }

  /* Keep only the 4th line centered */
  .welcome-text { text-align: center !important; display: block !important; }

  /* Preserve original left-line layout */
  .welcome-text-left {
    text-align: left !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 1.2rem !important;
  }

  /* Nudge first line "Gather your friends." to the right */
  .welcome-text-left.animate-line-1 { margin-left: 0.2rem !important; }

  .welcome-text.animate-line-4 {
    font-size: 1.75rem !important;
    margin-left: 0 !important;
  }

  .welcome-text .highlight-blue,
  .welcome-text-left .highlight-blue,
  .welcome-text-right .highlight-blue {
    font-size: 1.4rem !important;
  }

  /* Micro-adjust spacing between “Gather” and “your friends.” */
  .welcome-text-left .highlight-blue { margin-right: 0.6rem !important; }

  .welcome-text .highlight-green,
  .welcome-text-left .highlight-green,
  .welcome-text-right .highlight-green {
    font-size: 1.75rem !important;
  }

  .welcome-text-right {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .welcome-text-right .highlight-blue { margin-left: 4.5rem !important; margin-right: 0.9rem !important; }
  .welcome-text-right .right-text {
    font-size: 1.25rem !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* CTA buttons: stack and fit */
  .welcome-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
  }

  .btn, .btn-large {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    font-size: 1rem !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 12px !important;
  }

  /* Align by spacing, no x-shift */
  .welcome-text-right { transform: none !important; }

}