/* Responsive fixes for the public site. Loaded after the Claude Design styles
   so these win on phones and tablets. Desktop layouts are not affected. */

/* Safety net: never let the page scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
html { overflow-x: clip; }
body { overflow-x: clip; }

@media (max-width: 900px) {
  /* Grid and flex children must be allowed to shrink, or long text pushes the page wider. */
  [data-m-stack], [data-m-stack] > *, section > div, section > div > * { min-width: 0; }
  /* Single column so each block gets the full width of the screen */
  section[data-screen-label] [data-m-stack] { grid-template-columns: minmax(0, 1fr) !important; }
  section[data-screen-label] { padding-left: 20px !important; padding-right: 20px !important; }
  section[data-screen-label] > div > div { max-width: 100% !important; }

  /* Product mockups and cards: fit the screen instead of forcing a fixed width. */
  section [style*="width:4"], section [style*="width:3"], section [style*="width: 4"], section [style*="width: 3"],
  section [style*="min-width:4"], section [style*="min-width:3"],
  section [style*="min-width: 4"], section [style*="min-width: 3"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  img, svg, video { max-width: 100%; height: auto; }

  /* Long rows inside cards wrap instead of running off the card. */
  section [style*="white-space:nowrap"], section [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* Closing band and other full-bleed blocks: keep text inside the screen. */
  [data-screen-label] h2 { overflow-wrap: anywhere; }
}

/* Header on very small phones: keep the logo and menu, drop the header button
   (the same button is in the menu). */
@media (max-width: 359px) {
  .hdr-cta { display: none !important; }
}

/* Full-width bands that use negative margins: keep them inside the screen on phones */
@media (max-width: 900px) {
  [style*="margin:96px -40px"], [style*="margin: 96px -40px"],
  [style*="margin:0px -40px"], [style*="margin: 0px -40px"] {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
}

/* "How it works" stages: on phones, stack the steps and show every title */
@media (max-width: 900px) {
  [data-m-stage] { flex-direction: column !important; min-height: 0 !important; }
  [data-m-stage] > [role="button"] {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important; flex: none !important;
    overflow: visible !important;
  }
  [data-m-stage] > [role="button"] h3 { font-size: 22px !important; }
  [data-m-stage] > [role="button"] p { display: block !important; }
}
@media (max-width: 900px) {
  /* Accordion rows: let the question text wrap and keep the + inside the row */
  [data-screen-label] button { white-space: normal !important; max-width: 100%; text-align: left; }
  [data-screen-label] button > span { flex: 1 1 auto; min-width: 0; }
  /* Leaderboard names wrap inside their column (marquee tracks are excluded) */
  [data-screen-label] [style*="white-space:nowrap"]:not([style*="max-content"]) { white-space: normal !important; }
}

/* Cookie banner: fit inside the screen on phones */
@media (max-width: 900px) {
  div[style*="pointer-events: auto"][style*="max-width: 640px"] {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important;
  }
  div[style*="pointer-events: auto"][style*="max-width: 640px"] p { min-width: 0 !important; overflow-wrap: anywhere; }
  div[style*="pointer-events: auto"][style*="max-width: 640px"] button { flex: 1 1 0 !important; min-width: 0 !important; white-space: normal !important; }
  /* Soft glows are decorative: keep them inside their section */
  section[data-screen-label] { overflow-x: clip; }
}

/* The page's inline styles are rewritten with spaces after colons at run time,
   so match both spellings for the blocks that need fixing. */
@media (max-width: 900px) {
  [style*="margin: 0px -40px"], [style*="margin: 96px -40px"], [style*="margin:0px -40px"], [style*="margin:96px -40px"] {
    margin-left: -20px !important; margin-right: -20px !important;
  }
  section#cta, section[id="cta"] { overflow-x: clip; max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 359px) {
  .hdr-cta, a.hdr-cta, a[href="/waitlist"][style*="background: rgb(36, 26, 71)"] { display: none !important; }
}