/* GLX campaign landing pages: mobile layer
 *
 * 100% of ChatGPT ad traffic is mobile (Mobile Safari, Chrome mobile,
 * Samsung Internet), so these pages are effectively mobile-first in practice.
 * Loaded after each page's own <style> block so it wins on source order.
 */

/* ---------------------------------------------------------------
   iOS ZOOM FIX (applies at every width, not just mobile)
   Safari on iOS zooms the viewport whenever a focused input has a
   font-size below 16px. That shifts the layout mid-typing and is a
   known cause of abandoned mobile forms. 16px is the threshold.
   --------------------------------------------------------------- */
.play-form input,
.play-form select,
.play-form textarea,
.contact-form input,
.contact-form select,
.contact-form textarea,
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
  font-size: 16px !important;
}

@media (max-width: 820px) {
  /* Nav: the CTA was overlapping the wordmark on narrow screens */
  .lp-nav { padding: 14px 18px; gap: 12px; flex-wrap: nowrap; }
  .lp-nav .topnav-logo { flex: 0 0 auto; }
  .lp-nav .topnav-logo span { font-size: 18px !important; }
  .lp-nav .btn-cta {
    flex: 0 1 auto; height: 40px; padding: 0 14px; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw;
  }
}

@media (max-width: 620px) {
  /* Hero: 50px over four lines pushed the CTA past the fold once
     Safari's URL bar is accounted for. Tighten type and spacing so a
     CTA is reachable in the first screen. */
  .content-hero { padding: 24px 20px 32px; }
  .content-hero h1 { font-size: 34px !important; line-height: 1.1; margin-bottom: 14px; }
  .content-hero .eyebrow { font-size: 10.5px; margin-bottom: 10px; }
  .content-hero .lede { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
  .content-hero .soundbite { font-size: 18px; }
  .content-hero .actions { gap: 10px; margin-bottom: 24px; }

  /* Full-width tap targets: easier to hit one-handed, no accidental misses */
  .content-hero .actions .btn-cta,
  .content-hero .actions .btn-ghost,
  .cta-band .actions .btn-cta,
  .cta-band .actions .btn-ghost {
    width: 100%; justify-content: center; min-height: 48px;
  }

  /* Proof strip: two clean columns instead of a cramped four */
  .proof-strip { gap: 14px 20px; padding-top: 18px; }
  .proof-strip .p-stat { flex: 1 1 40%; }
  .proof-strip .p-num { font-size: 22px; }
  .proof-strip .p-label { font-size: 10.5px; }
  .proof-src { font-size: 11.5px; }

  /* Sections: reclaim vertical space so the page is not endless on a phone */
  .section-block { padding: 44px 20px; }
  .section-h2 { font-size: 27px; line-height: 1.15; }
  .section-lede { font-size: 15.5px; }
  .pillar-card, .surface-card, .diff-card, .step-card, .who-card { padding: 22px 20px; }
  .pillar-card h3, .surface-card h3 { font-size: 17px; }

  /* Offer block + form */
  .offer-block { padding: 26px 20px; }
  .offer-block h2 { font-size: 24px; line-height: 1.2; }
  .play-form { gap: 12px; margin-top: 20px; }
  .play-form input, .play-form select { padding: 13px 14px; min-height: 48px; }
  .play-form label { font-size: 11.5px; }
  .play-form .btn-cta { min-height: 52px; font-size: 16px; }

  /* Sound toggle: bigger tap target, out of the way of content */
  .sound-btn { bottom: 10px; right: 10px; padding: 9px 13px; min-height: 40px; }

  /* Video: full-bleed feel without horizontal overflow */
  .hero-video-wrap, .hero-media { margin-left: -4px; margin-right: -4px; }

  /* Tables scroll rather than blow out the layout */
  .table-wrap { -webkit-overflow-scrolling: touch; }

  .cta-band { padding: 48px 20px; }
  .cta-band h2 { font-size: 28px; line-height: 1.15; }
  .cta-band p { font-size: 15.5px; }

  /* Thanks page */
  .ty-wrap { padding: 24px 20px 48px; }
  .ty-wrap h1 { font-size: 32px; line-height: 1.12; }
  .ty-lede { font-size: 16px; }
  .ty-primary { padding: 24px 20px; }
  .ty-primary h2 { font-size: 23px; line-height: 1.2; }
  .ty-primary .actions .btn-cta,
  .ty-primary .actions .btn-ghost { width: 100%; justify-content: center; min-height: 48px; }
  .ty-secondary { gap: 14px; flex-direction: column; }
}

/* Anything genuinely tiny (SE, older Androids) */
@media (max-width: 380px) {
  .content-hero h1 { font-size: 30px !important; }
  .section-h2 { font-size: 24px; }
  .lp-nav .btn-cta { max-width: 52vw; font-size: 12.5px; }
}

/* Respect reduced-motion preferences on the autoplaying hero */
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap video, .hero-media video { animation: none !important; }
}