/* Mobile layer.
 *
 * The pages were converted from fixed-width 1180px desktop design mockups, and
 * all their styling is inline. Inline styles outrank stylesheet rules, so these
 * overrides need !important, and they match on inline style text because a
 * class would otherwise have to be threaded through four files.
 *
 * Goal: keep the desktop composition — its type hierarchy, its spacing rhythm,
 * its overlapping hero cards — rather than flattening it. Sizes are clamp()ed
 * against vw so everything scales together the way the desktop canvas does,
 * with floors that keep text readable. Reference proportions from the 1180px
 * canvas: side padding 48/1180 = 4.1%, section padding 96/1180 = 8.1%.
 */

@media (max-width: 900px) {

  /* Unlock the fixed desktop canvas. */
  [style*="min-width:1180px"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Multi-column grids stack. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: clamp(22px, 6vw, 48px) !important;
  }

  /* Grid and flex children default to min-width:auto, which refuses to shrink
   * below their content and pushes past the viewport. */
  [style*="grid-template-columns"] > *,
  [style*="display:flex"] > * {
    min-width: 0 !important;
  }

  /* ---- Type scale -------------------------------------------------------
   * Desktop runs 80 / 60 / 24 / 21 / 17. These hold the same steps, floored
   * for readability. At 390px: 41 / 32 / 20 / 17 / 16.
   */
  h1 {
    font-size: clamp(34px, 10.6vw, 62px) !important;
    line-height: 1.04 !important;
  }
  h2 {
    font-size: clamp(26px, 8.2vw, 48px) !important;
    line-height: 1.1 !important;
  }
  h3 { font-size: clamp(19px, 5.2vw, 24px) !important; }

  /* Panel titles ("Join the waitlist", "Tell us about your venue"). */
  [style*="font-size:22px"] { font-size: clamp(18px, 5.2vw, 22px) !important; }

  /* Lead paragraphs. */
  [style*="font-size:21px"],
  [style*="font-size:20px"],
  [style*="font-size:19px"] {
    font-size: clamp(16px, 4.4vw, 20px) !important;
    line-height: 1.5 !important;
  }
  [style*="font-size:18px"],
  [style*="font-size:17px"] { font-size: 16px !important; }

  /* The big "+37%" stat keeps its weight in the composition. */
  [style*="font-size:46px"] { font-size: clamp(30px, 9vw, 46px) !important; }

  /* ---- Spacing rhythm --------------------------------------------------- */
  body > div > div {
    padding: clamp(36px, 9.5vw, 80px) clamp(16px, 5vw, 48px) !important;
  }

  /* Nav keeps the desktop arrangement — logo left, Request Demo right — and
   * drops only the link row beneath, instead of stacking all three. */
  body > div > div:first-child {
    padding: 12px clamp(16px, 5vw, 48px) !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    justify-content: space-between !important;
  }
  body > div > div:first-child > div {
    order: 3 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 16px !important;
    font-size: 14px !important;
  }
  body > div > div:first-child > a[href="book-demo.html"] {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }

  /* Hero CTAs stay side by side as on desktop; trimmed so neither wraps. */
  [style*="padding:88px 48px 96px"] [style*="display:flex;gap:12px"] > a {
    padding: 14px 16px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Waitlist/contact/book-demo are full-bleed two-column bodies: the panels
   * carry the padding themselves so their backgrounds still span edge to edge. */
  body > div > div[style*="flex:1"] { padding: 0 !important; }
  body > div > div[style*="flex:1"] > div {
    padding: clamp(32px, 8.5vw, 72px) clamp(16px, 5vw, 48px) !important;
    border-left: none !important;
  }

  /* Card and form-panel interiors. */
  [style*="border-radius:18px"][style*="padding:34px"],
  [style*="border-radius:18px"][style*="padding:36px"],
  [style*="border-radius:18px"][style*="padding:30px"],
  [style*="border-radius:20px"][style*="padding:56px"],
  [style*="border-radius:18px"][style*="padding:34px"] {
    padding: clamp(20px, 5.5vw, 34px) !important;
  }

  /* ---- Hero ------------------------------------------------------------- */
  /* The phone, sized to leave room for the cards to overlap it as on desktop. */
  [style*="width:300px"] { width: 62% !important; max-width: 250px !important; }
  [style*="width:250px"] { width: 58% !important; max-width: 230px !important; }

  /* Keep the floating cards overlapping the phone rather than hiding them —
   * they're a signature part of the hero. Pulled inside the viewport and
   * scaled down proportionally. */
  [style*="position:absolute"][style*="top:76px"] {
    top: 8% !important;
    left: 0 !important;
    transform: scale(.82);
    transform-origin: left top;
    padding: 11px 14px !important;
  }
  [style*="position:absolute"][style*="bottom:64px"] {
    bottom: 8% !important;
    right: 0 !important;
    transform: scale(.82);
    transform-origin: right bottom;
    padding: 11px 14px !important;
  }

  /* The "how it works" connector line spans three columns that no longer
   * sit side by side. */
  [style*="left:16.6%"] { display: none !important; }

  /* Give the rotating hero word its own line. At mobile type sizes the longest
     variants ("Buzzer-Beater", "Performance") can't share a line with "Not the"
     without being clipped, and letting them wrap naturally would change the
     headline's height on every rotation. */
  .rotator-break { display: inline !important; }

  /* The logo strip stays full-bleed so the scroll runs edge to edge. */
  #c-press { padding: 26px 0 30px !important; }
  .marquee-set { gap: 38px !important; padding-right: 38px !important; }
  .marquee-item { font-size: 14px !important; gap: 9px !important; }

  /* ---- Bands ------------------------------------------------------------ */
  #c-contact {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  body > div > div:last-of-type > div:last-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* ---- Modal ------------------------------------------------------------ */
  #demo-modal { padding: 16px 12px !important; }
  #demo-modal > div { padding: clamp(22px, 6vw, 40px) clamp(18px, 5vw, 44px) 28px !important; }
  #demo-modal h3 { font-size: clamp(24px, 7vw, 34px) !important; }

  /* 16px inputs avoid iOS auto-zoom on focus. */
  input, select, textarea { font-size: 16px !important; }
}