/* ─────────────────────────────────────────────────────────────────────
   mobile.css — responsive overrides for the inline-styled landing/sub
   pages. The JSX components hard-code grid + padding inline (no CSS
   classes), so we use [style*="..."] attribute selectors with !important
   to surgically collapse layouts at narrow widths. The string fragments
   match what React serialises numeric props as (numbers → "Npx", colour
   shorthands → as-written), so they are intentionally exact.

   Breakpoint: 720px. Below that the layout collapses to single-column
   for almost every section, the top-nav links hide (logo + CTA stay),
   section padding contracts, and the vision page's wide gutter goes.
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {

  /* ─── Container padding ─────────────────────────────────────────── */
  /* React renders padding:'0 40px' as `padding: 0px 40px;` */
  div[style*="padding: 0px 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ─── Section vertical padding — pull tight ──────────────────────── */
  section[style*="padding: 140px 0px"] { padding: 64px 0 !important; }
  section[style*="padding: 120px 0px"] { padding: 56px 0 !important; }
  section[style*="padding: 96px 0px"]  { padding: 48px 0 !important; }
  section[style*="padding: 80px 0px"]  { padding: 40px 0 !important; }
  section[style*="padding: 60px 0px"]  { padding: 32px 0 !important; }

  /* Hero specifically overrides paddingTop/paddingBottom inline — */
  /* keep its top breathing room moderate */
  section#top { padding-top: 32px !important; padding-bottom: 48px !important; }

  /* ─── Grids — collapse to single column ──────────────────────────── */

  /* Standard fraction-pair splits — all collapse to 1col on mobile.
     The :not() rejects the 3-col phone status-bar grid (1fr 1fr 1fr)
     which would otherwise also match the 2-col substring. */
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important; gap: 32px !important;
  }
  [style*="grid-template-columns: 1.05fr 1fr"]   { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns: 1.1fr 1fr"]    { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns: 1.4fr 1fr"]    { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns: 1fr 1.05fr"]   { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns: 1fr 1.1fr"]    { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns: 1fr 1.4fr"]    { grid-template-columns: 1fr !important; gap: 32px !important; }
  [style*="grid-template-columns: 1fr 1.6fr"]    { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* repeat() splits */
  [style*="grid-template-columns: repeat(2,"]    { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3,"]    { grid-template-columns: 1fr !important; gap: 24px !important; }
  [style*="grid-template-columns: repeat(4,"]    { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer 4-col */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Wide left-gutter layouts (numbered section heads, ladder) */
  [style*="grid-template-columns: 120px 1fr"]    { grid-template-columns: 1fr !important; gap: 12px !important; }
  [style*="grid-template-columns: 100px 1fr"]    { grid-template-columns: 1fr !important; gap: 8px !important; }
  [style*="grid-template-columns: 92px 1fr"]     { grid-template-columns: 1fr !important; gap: 8px !important; }
  [style*="grid-template-columns: 80px 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  [style*="grid-template-columns: 60px 1fr"]     { grid-template-columns: 28px 1fr !important; gap: 8px !important; }
  /* Vision page PhaseRow: 76px (circled n) + 112px ("PHASE 2" label) + 1fr (body).
     Collapse the label column away on mobile; keep a small number column. */
  [style*="grid-template-columns: 76px 112px 1fr"] {
    grid-template-columns: 56px 1fr !important;
    gap: 14px !important;
  }
  [style*="grid-template-columns: 76px 112px 1fr"] > div:nth-child(2) {
    display: none !important;
  }

  /* 1fr auto — used in /next stratum panels; the right "auto" column has
     whiteSpace:nowrap which squeezes the left col to single-word lines.
     :not() rejects the 1fr auto auto onboarding row variants */
  [style*="grid-template-columns: 1fr auto"]:not([style*="1fr auto auto"]) {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }
  /* The right-column mono label inside these should reflow under the title */
  [style*="grid-template-columns: 1fr auto"]:not([style*="1fr auto auto"]) > .mono {
    text-align: left !important; white-space: normal !important;
  }

  /* Mac diagram on /next — 5-col 550px-wide grid. Stack as 1col and
     reflow the connector lines as horizontal hairlines between rows. */
  [style*="grid-template-columns: minmax(150px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Connector-line cells (the 40-80px columns 2 and 4) become a hairline
     under the previous node — small, centred, dotted. */
  [style*="grid-template-columns: minmax(150px"] > *:nth-child(2),
  [style*="grid-template-columns: minmax(150px"] > *:nth-child(4) {
    height: 18px !important;
    width: 1px !important;
    margin: 0 auto !important;
    border-left: 1px dashed var(--ink-faint) !important;
    background: transparent !important;
    transform: none !important;
  }
  /* Hide the connector label spans inside those middle cells (the
     "phone → mac" type text was vertical). */
  [style*="grid-template-columns: minmax(150px"] > *:nth-child(2) > *,
  [style*="grid-template-columns: minmax(150px"] > *:nth-child(4) > * {
    display: none !important;
  }

  /* ─── Vision page body indent (148px gutter on VSection body) ───── */
  div[style*="margin-left: 148px"] { margin-left: 0 !important; }
  /* Section_Mac uses a -148px pull to escape that gutter for the diagram.
     With the gutter gone on mobile, the negative pull bleeds off-screen. */
  div[style*="margin-left: -148px"] { margin-left: 0 !important; }

  /* ─── TopBar — hide secondary nav, keep brand + CTA ──────────────── */
  header nav > div {
    gap: 10px !important;
  }
  /* Hide every NavLink (anchor inside the right-hand div).
     The CTA is a PrimaryButton — also an <a>, but it has
     border-radius:999px so we keep it via :last-child. */
  header nav > div > a:not(:last-child) {
    display: none !important;
  }
  /* Make the brand stay tidy */
  header nav > a span.serif {
    font-size: 18px !important;
  }
  /* Smaller CTA in mobile top bar */
  header nav > div > a:last-child {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
  }

  /* ─── Marginalia (absolute-positioned manuscript notes) ─────────── */
  /* They sit outside the column flow with translateX(-100%) — on a
     390px viewport that puts them off-screen. Hide entirely. */
  div[style*="translateX(-100%)"],
  div[style*="translateX(100%)"] {
    display: none !important;
  }

  /* ─── Phone mockups — keep them centred and not overflowing ─────── */
  /* LandingPhone defaults are 320px wide; with 20px container padding
     they fit (350 available). Just make sure step phones don't run
     edge-to-edge.  The flex centering already handles it. */

  /* ─── G1Display — scales 0.62/0.66/0.7 overflow on a 350px col.
     Use CSS zoom to shrink the whole element (layout + visual). */
  [data-g1] { zoom: 0.78; }
  /* For the largest hero one (scale 0.7), pull a little harder */
  [data-g1][style*="width: 403.2"] { zoom: 0.68; }

  /* ─── Footer — column hierarchy on mobile ───────────────────────── */
  /* The 4-col Footer is already collapsed above; tighten its inner gaps. */
  footer ul, footer ol {
    margin: 12px 0 0 !important;
  }

  /* ─── Hero CTAs row — let the device-tag chip flow under ────────── */
  /* The CTA row uses flex-wrap already; nothing to do — but reduce
     the mono device-tag size so "Android · 16+ · AU · US · UK · CA · NZ"
     doesn't push to two ragged lines. */
  span.mono[style*="font-size: 11.5px"] {
    font-size: 10.5px !important;
  }

  /* ─── Next page contents strip (8 items in 4 cols) ──────────────── */
  /* Covered by repeat(4,…) rule above → 2 cols. Tighten the borders so
     the right-edge separator falls correctly on a 2-col grid. */
  [style*="grid-template-columns: repeat(4,"] > a:nth-child(2n) {
    border-right: none !important;
  }
  [style*="grid-template-columns: repeat(4,"] > a:nth-child(2n+1) {
    border-right: 0.5px solid var(--hairline) !important;
  }
  [style*="grid-template-columns: repeat(4,"] > a:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  [style*="grid-template-columns: repeat(4,"] > a:nth-child(-n+6) {
    border-bottom: 0.5px solid var(--hairline) !important;
  }

  /* ─── Hero serif size — clamp min was 64px → wraps weird on 390 ── */
  h1.serif[style*="clamp(64px"] {
    font-size: 56px !important;
    line-height: 1.0 !important;
  }
  /* Vision and Next page heroes share the same clamp */

  /* ─── Section titles — also slightly smaller ────────────────────── */
  h2.serif[style*="clamp(40px"] { font-size: 36px !important; }
  h2.serif[style*="clamp(36px"] { font-size: 32px !important; }

  /* ─── Waitlist card — let it breathe edge-to-edge ───────────────── */
  /* The card has its own padding; just ensure no overflow on the
     phone & country chip text. */

  /* ─── G1 displays on hero — center & reduce gap with phone ──────── */
  /* They sit in the right column of the now-stacked hero split */

  /* ─── FAQ rows — already a stack ────────────────────────────────── */
}

/* Tighter media query for very narrow phones (iPhone SE width = 375) */
@media (max-width: 380px) {
  div[style*="padding: 0px 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1.serif[style*="clamp(64px"] {
    font-size: 48px !important;
  }
}