/* Phone fixes for the marketing site.
 *
 * Measured on a 390px screen, not guessed. Kept in its own file so the site
 * bundle is never edited by hand — a minified bundle is the one place a small
 * mistake blanks the whole page.
 */

/* The page scrolled sideways by 57px. The cause is decorative work: absolutely
 * positioned blur blobs and an oversized background SVG that intentionally
 * bleed past the layout. `clip` removes the scroll without creating a scroll
 * container, so the sticky header keeps working — `hidden` would break it.
 */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

@media (max-width: 768px) {
  /* Text at 10-11px is below the readable floor on a phone. These are the
     small stat captions and badges; 12px is the minimum that stays legible. */
  .text-\[10px\],
  .text-\[11px\] {
    font-size: 12px !important;
  }

  /* Inline links sat at 16px tall — under the 24px minimum target size, and
     easy to miss with a thumb. Padding grows the target, not the text. */
  section a:not([class*="rounded"]):not([class*="px-"]) {
    display: inline-block;
    padding-block: 6px;
  }

  /* Anything that still insists on being wider than the screen scrolls inside
     its own box instead of dragging the page with it. */
  table,
  pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  img,
  video,
  svg {
    max-width: 100%;
  }
}

/* The standalone /plans/ and /app/ pages have their own small header whose
   "back" link measured 21px tall. */
@media (max-width: 768px) {
  .wrap {
    padding-inline: 1rem;
  }

  .back,
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The comparison table is the one thing on /plans/ that cannot reflow: five
     columns of ticks. It scrolls, and the feature column stays put so a row
     never loses its label. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    min-width: 34rem;
  }

  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky;
    inset-inline-start: 0;
    background: var(--card, #0f141d);
    z-index: 2;
  }

  thead th:not(:first-child),
  td.tick {
    width: 5.5rem;
  }
}