/* freemi.ai phone layer, 7 Nov 2026.
   Loaded last on every page by build.mjs, so the same phone rules apply site-wide.
   Every rule sits inside a max-width query: desktop and tablet are unchanged. */

@media (max-width: 760px) {

  /* ---------- footer: brand on top, links two-up ---------- */
  footer [data-two] { grid-template-columns: 1fr !important; gap: 36px !important; }
  footer .ff-cols {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important; grid-auto-columns: auto !important;
    overflow: visible !important; margin: 0 !important; padding: 0 !important;
    max-width: none !important; gap: 34px 20px !important;
  }
  footer .ff-cols > * { margin: 0 !important; }
  footer .ff-cols a { display: block; padding: 3px 0; }
  footer p { max-width: none !important; }

  /* ---------- multi-column grids stack (pages that never had these rules) ---------- */
  [data-two]:not([data-swipe]),
  [data-three]:not([data-swipe]),
  [data-four]:not([data-swipe]),
  [data-five]:not([data-swipe]) { grid-template-columns: 1fr !important; }
  [data-quad]:not([data-swipe]) { grid-template-columns: 1fr 1fr !important; }

  /* ---------- decorative shapes: they sat on top of headings and got cut off ---------- */
  [data-hide-md],
  [style*="floaty"],
  .sp-shape { display: none !important; }

  /* ---------- button pairs (any flex row made only of links): full-width, even, thumb-sized ---------- */
  section div[style*="flex"]:has(> a + a):not(:has(> :not(a))):not(nav *):not(header *):not(footer *) {
    gap: 10px !important; width: 100%;
  }
  section div[style*="flex"]:has(> a + a):not(:has(> :not(a))):not(nav *):not(header *):not(footer *) > a {
    flex: 1 1 100% !important; display: flex !important; align-items: center; justify-content: center;
    text-align: center; min-height: 52px; white-space: nowrap; box-sizing: border-box;
  }

  /* ---------- sub-page hero panel ---------- */
  .sp-hero { padding: 0 16px !important; margin-top: 12px !important; }
  .sp-panel { border-radius: 26px !important; padding: 40px 22px 34px !important; }

  /* ---------- forms: 16px stops iPhone zooming in on focus ---------- */
  input, select, textarea { font-size: 16px !important; }

  /* ---------- long words never push the page sideways ---------- */
  h1, h2, h3 { overflow-wrap: break-word; }
  html, body { overflow-x: clip; }

  /* ---------- home hero: section padding + copy padding stacked into a 100px gap ---------- */
  .hero-copy { padding-top: 8px !important; }

  /* ---------- "More from Freemi" link cards: compact rows, not three tall blocks ---------- */
  a.card:has(> span:first-child + .dsp) {
    display: grid !important; grid-template-columns: 40px 1fr 18px; column-gap: 14px; align-items: center;
    padding: 16px 18px !important;
  }
  a.card:has(> span:first-child + .dsp) > span:first-child { grid-row: 1 / 3; width: 40px !important; height: 40px !important; border-radius: 11px !important; }
  a.card:has(> span:first-child + .dsp) > .dsp { margin: 0 !important; font-size: 17px !important; align-self: end; }
  a.card:has(> span:first-child + .dsp) > div:last-child { align-self: start; }
  a.card:has(> span:first-child + .dsp)::after { content: "\2192"; grid-column: 3; grid-row: 1 / 3; color: #6D4AFF; font-weight: 700; }

  /* ---------- grid columns never grow past the screen (a dashboard mock pushed Control Tower to 377px) ---------- */
  section > *, [style*="display:grid"] > *, [style*="display: grid"] > * { min-width: 0; }

  /* ---------- legal tables: each row becomes a small card instead of a sideways-scrolling table ---------- */
  table { min-width: 0 !important; display: block; }
  table thead { display: none; }
  table tbody, table tr, table td { display: block; width: auto !important; }
  table tr { padding: 14px 16px; border-bottom: 1px solid rgba(33,30,56,.07); }
  table tr:last-child { border-bottom: 0; }
  table td { padding: 0 !important; border: 0 !important; }
  table td:first-child { font-weight: 700; color: #1E1A38 !important; margin-bottom: 4px; }

  /* ---------- "On this page" contents list: one column, not two cramped ones ---------- */
  ol[style*="columns"] { columns: 1 !important; }

  /* ---------- legal tables: third column reads as a quiet note ---------- */
  table td:nth-child(3) { color: #8F88AE !important; font-size: 14px; margin-top: 4px; }

  /* ---------- phone menu: fills the screen below the bar instead of stopping at 80% ---------- */
  .fh-nav { max-height: calc(100dvh - 76px) !important; height: calc(100dvh - 76px); overscroll-behavior: contain; }

  /* ---------- a heading that opens its block doesn't need a desktop-sized top margin ---------- */
  section h1:first-child { margin-top: 8px !important; }
}