/* Mobile layout for the inline-styled pages (2026-08-07).
   The site is styled with inline style="" attributes, which media queries in
   page <style> blocks cannot reach without !important. This sheet is linked
   from every page and only acts under 700px. Proven against the live DOM
   before shipping: page scrollWidth 673px -> 375px at a 390px viewport.

   Rule of thumb: every multi-column inline grid stacks to one column, EXCEPT
   - icon/label rows (66px|130px + 1fr) which fit as they are,
   - text+button rows (1fr auto),
   - comparison tables (1.2fr/1.3fr + 3x1fr), which become horizontally
     swipeable so their rows keep meaning. */

@media (max-width: 700px) {
  /* Default: stack every inline multi-column grid. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Label + content rows fit on a phone — keep them. */
  [style*="grid-template-columns: 66px 1fr"] { grid-template-columns: 66px 1fr !important; }
  [style*="grid-template-columns: 130px 1fr"] { grid-template-columns: 130px 1fr !important; }
  [style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr auto !important; }

  /* Two-across tile rows read better than a long single stack. */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Comparison tables: keep the columns, let the thumb do the work. */
  [style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr"] {
    grid-template-columns: 140px 110px 110px 110px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Big display headings scale down so single words stop overflowing. */
  h1 { font-size: clamp(30px, 9vw, 44px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.15 !important; }

  /* Nothing may force a sideways page scroll. */
  html, body { overflow-x: hidden !important; }

  /* --- Pass 2 (2026-08-07 evening): the "cramped" fixes ---------------
     The sticky header measured 196px tall on a phone - a quarter of the
     screen gone on every scroll - with the nav wrapped over three loose
     rows. Compact it to two tight rows: logo + account cluster on top,
     nav as a single swipeable line below. */

  header > div {
    padding: 8px 14px !important;
    gap: 6px 10px !important;
  }
  header nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px !important;
    font-size: 14px !important;
    padding-bottom: 2px;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { white-space: nowrap !important; }

  /* The red CTA button and account links: smaller hit targets that fit. */
  header a[style*="rgb(204, 0, 0)"] {
    padding: 9px 14px !important;
    font-size: 14px !important;
  }

  /* Announcement banner: one tight line of text, CTA below it, smaller. */
  div[style*="rgb(251, 232, 127)"][style*="border-bottom"] > div {
    padding: 8px 14px !important;
    gap: 6px 12px !important;
    font-size: 12.5px !important;
  }
  div[style*="rgb(251, 232, 127)"][style*="border-bottom"] a {
    font-size: 12.5px !important;
    white-space: nowrap;
  }

  /* Sections carry desktop-scale inline padding (60px+); pull every
     large padding down so content breathes at 390px without inches of
     dead space. Grids/flex rows already stack, so side padding is the
     only wall between text and the screen edge. */
  [style*="padding: 66px"], [style*="padding: 60px"],
  [style*="padding: 56px"], [style*="padding: 50px"] {
    padding: 28px 16px !important;
  }
  [style*="padding: 46px"], [style*="padding: 44px"], [style*="padding: 40px"] {
    padding: 24px 16px !important;
  }

  /* --- Pass 3 (2026-08-07 late): readable type floor -------------------
     Audit at 390px found ~75 text nodes between 8px and 12.5px — the
     small-caps kickers, badges, jurisdiction tags and price metadata all
     kept desktop micro-sizes. Floor: nothing renders under 12px on a
     phone. Selectors match the exact inline font-size values in use. */
  [style*="font-size: 8px"], [style*="font-size: 9px"],
  [style*="font-size: 9.5px"], [style*="font-size: 10px"],
  [style*="font-size: 10.5px"] {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  [style*="font-size: 11px"], [style*="font-size: 11.5px"],
  [style*="font-size: 12px"], [style*="font-size: 12.5px"] {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  [style*="font-size: 13px"], [style*="font-size: 13.5px"] {
    font-size: 14px !important;
  }
  /* Wide tracking amplifies smallness on narrow lines — ease it a touch
     on the heavily-tracked micro-labels. */
  [style*="letter-spacing: 1.2"], [style*="letter-spacing: 1.3"],
  [style*="letter-spacing: 1.4"] {
    letter-spacing: 0.8px !important;
  }
}