/* RAW Matcher Pro — mobile layout.
 *
 * The Claude Design export is a fixed desktop composition. It ships no media
 * queries at all, and at 375px the header alone measured 777px, which pushed
 * the language picker and the waitlist button off-screen — where the
 * wrapper's overflow-x:hidden made them impossible to scroll to. Since every
 * visitor arriving from TikTok, Reels or Threads is on a phone, the only
 * button that matters did not exist for them.
 *
 * The classes below are added at build time by build.py; the design itself is
 * untouched, and desktop renders exactly as exported. Every rule needs
 * !important because the export styles each element inline, and an inline
 * style outranks any stylesheet declaration without it.
 */

/* ── Tablet and below ─────────────────────────────────────────────────── */
@media (max-width: 860px) {

  /* Header.
     The four in-page anchors are the least useful thing in a narrow bar —
     each one duplicates a section the visitor scrolls past anyway — so they
     give up their space to the two controls that do something: the language
     picker and the waitlist button. */
  .rmp-nav {
    padding: 12px 20px !important;
    gap: 12px !important;
  }
  .rmp-navlink { display: none !important; }
  .rmp-nav-actions { gap: 10px !important; }
  .rmp-nav select {
    font-size: 12px !important;
    padding: 7px 8px !important;
  }
  .rmp-nav-cta {
    font-size: 13px !important;
    padding: 9px 14px !important;
  }

  /* Vertical rhythm, compressed rather than flattened: the export's own
     proportions are kept, just at phone scale. */
  .rmp-sec-hero   { padding: 56px 20px 0 !important; }
  .rmp-sec        { padding: 72px 20px 0 !important; }
  .rmp-sec-tight  { padding: 64px 20px 0 !important; }
  .rmp-sec-footer { padding: 56px 20px 40px !important; }
  .rmp-sec-legal  { padding: 48px 20px 64px !important; }

  /* Type scale. */
  .rmp-h1       { font-size: 38px !important; }
  .rmp-h1-legal { font-size: 32px !important; }
  .rmp-h2       { font-size: 27px !important; }
  .rmp-h2-sm    { font-size: 25px !important; }
  .rmp-h2-legal { font-size: 24px !important; }
  .rmp-stat     { font-size: 26px !important; }

  /* Side-by-side blocks stack. */
  .rmp-stack {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  /* Four across is unreadable on a phone. Two is not. */
  .rmp-grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Card padding. */
  .rmp-card          { padding: 22px !important; }
  .rmp-card-lg       { padding: 24px !important; }
  .rmp-waitlist-card { padding: 40px 22px !important; }

  /* The waitlist form.
     A fixed 320px input cannot fit a 375px screen once page and card padding
     are removed, so it stretches, and the button takes the full width to get
     a proper tap target. */
  #waitlist form {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #waitlist form input,
  #waitlist form button {
    width: 100% !important;
    /* The design never sets border-box, so a plain width:100% adds the 18px
       side padding on top of the container width and the field ends up wider
       than the card holding it. */
    box-sizing: border-box !important;
  }
  #waitlist form input {
    /* Anything under 16px makes iOS Safari zoom the page on focus, which
       leaves the visitor scrolled sideways mid-signup. */
    font-size: 16px !important;
  }
  #waitlist form button {
    padding: 15px 28px !important;
  }
}

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 420px) {

  /* The wordmark goes first: the icon still identifies the site, and the row
     has to carry a picker and a button. */
  .rmp-logo-text { display: none !important; }

  .rmp-h1    { font-size: 33px !important; }
  .rmp-h2    { font-size: 24px !important; }
  .rmp-h2-sm { font-size: 22px !important; }

  /* The camera-brand strip reads better in one column than two cramped ones. */
  .rmp-grid4-brands {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}