/* Mobile and tablet corrections for the landing page.
 *
 * The Claude Design export is desktop-first and styles everything with inline
 * `style` attributes, so there is nowhere to hang a media query. Worse, the
 * page is rendered by React, which re-serializes every style attribute on the
 * way to the DOM — `padding:0 28px` in the export arrives in the DOM as
 * `padding: 0px 28px`, so [style*=...] selectors fail silently.
 *
 * So build.py stamps the elements these rules need with data-m tokens, and it
 * fails the build if any token stops matching after a re-import. Everything
 * still needs !important to outrank the inline styles (and, for the nav, the
 * styles support.js assigns at runtime).
 */

/* ── Tablet and below ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Section headers sit in a wrap-flex row; as flex items they take their
     max-content width and push past the viewport. */
  [data-m~="hdr"] {
    width: 100% !important;
  }

  /* Desktop section rhythm is too airy once everything is one column. */
  [data-m~="pad-lg"] {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }
  [data-m~="pad-hero"] {
    padding-top: 44px !important;
    padding-bottom: 60px !important;
  }
}

/* ── Nav collapses before the links would collide with the CTA ─────── */
@media (max-width: 760px) {
  [data-navlinks] {
    display: none !important;
  }
}

/* ── Phone ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Narrower gutters buy back real estate on a 390px screen. */
  [data-m~="gutter"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* The heart of the mobile breakage: auto-fit tracks declare a minimum (up
     to 430px) wider than the viewport itself, so the columns overflowed and
     were clipped by the root's overflow-x:clip. One column, always. */
  [data-m~="autofit"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* The hero headline's clamp() bottoms out at 54px, too heavy at this width. */
  #top h1 {
    font-size: clamp(40px, 11.5vw, 54px) !important;
  }

  /* Give the email field and its button a full-width row each rather than
     letting them wrap into a lopsided pair. */
  #start > input,
  #start > button {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  /* "Same shop, one month": the fixed 180px label column left the two value
     columns at 57px and 41px, shredding every figure in them. */
  [data-m~="cmp"] {
    grid-template-columns: minmax(0, 1.15fr) 1fr 1fr !important;
    gap: 10px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Tracked-out uppercase mono is the widest content in those cells; at this
     size the letter-spacing costs more than it buys. */
  [data-m~="cmp"] span {
    letter-spacing: 0.04em !important;
  }

  /* Booking-demo phone mock is pinned to 330px inside an already-padded card. */
  [data-m~="phone"] {
    max-width: 100% !important;
  }

  /* Floating "+$45" markers are positioned outside their parent's right edge,
     so on a narrow screen they are clipped rather than read as a flourish. */
  [data-earned-pop],
  [data-live-pop],
  [data-rev-pop] {
    display: none !important;
  }
}