/* mobile.css — responsive layer. Inline styles are overridden via attribute selectors + !important. */
html, body { overflow-x: clip; }
[data-nav-burger] { display: none; }
[data-marquee-wrap] { overflow: hidden !important; max-width: 100%; }

/* ---------- nav ---------- */
@media (max-width: 900px) {
  [data-nav-desktop] { display: none !important; }
  [data-nav-burger] { display: flex !important; }
}
@media (max-width: 480px) {
  [data-nav-cta] { padding: 9px 16px !important; font-size: 13px !important; }
  nav img { height: 26px !important; }
}

/* ---------- two-column / sidebar splits collapse ---------- */
@media (max-width: 900px) {
  div[style*="grid-template-columns: 1.5fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="grid-template-columns: 1.3fr 1fr"],
  div[style*="grid-template-columns: 1.15fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.8fr"],
  div[style*="grid-template-columns: 1.2fr 1fr 1fr"],
  div[style*="grid-template-columns: 250px 1fr"],
  div[style*="grid-template-columns: 220px 1fr"],
  div[style*="grid-template-columns: 160px 1fr 220px"],
  div[style*="grid-template-columns: 90px 130px 1fr 130px"],
  div[style*="grid-template-columns: 44px 200px 1fr"],
  div[style*="grid-template-columns: 44px 220px 1fr"],
  div[style*="grid-template-columns: 44px 240px 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns: 1.4fr repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* release sticky sidebars — never the nav (top: 0) */
  div[style*="sticky"][style*="top: 110px"],
  div[style*="sticky"][style*="top: 120px"],
  h2[style*="top: 120px"] { position: static !important; }
}
@media (max-width: 600px) {
  div[style*="grid-template-columns: 1.4fr repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns: 1fr 1fr;"],
  div[style$="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- fixed multi-column grids ---------- */
@media (max-width: 700px) {
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
}

/* ---------- fourteen-blocks grid (Home) ---------- */
@media (max-width: 1000px) {
  [data-blocks-grid] { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: auto !important; }
  [data-blocks-grid] > [data-pixel-cell] { grid-row: auto !important; grid-column: auto !important; }
  [data-blocks-center] { grid-row: auto !important; grid-column: 1 / -1 !important; order: -1; }
}
@media (max-width: 600px) {
  [data-blocks-grid] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- comparison tables become labelled cards ---------- */
@media (max-width: 700px) {
  [data-t-head] { display: none !important; }
  [data-t-row] { grid-template-columns: 1fr !important; gap: 8px !important; padding: 18px 20px !important; }
  [data-t-row] > div { font-size: 15px !important; }
  [data-t-row] > div::before { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; margin-bottom: 3px; opacity: .6; }
  [data-t-row] > div:nth-child(1)::before { content: 'THE MOMENT'; }
  [data-t-row] > div:nth-child(2)::before { content: 'TODAY'; }
  [data-t-row] > div:nth-child(3)::before { content: 'WITH THE LAYER'; color: #FF7B00; opacity: 1; }
}

/* ---------- type & spacing ---------- */
@media (max-width: 700px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
  nav { padding-left: 20px !important; padding-right: 20px !important; }
  span[style*="font-size: 9.5px"], span[style*="font-size: 10px"], span[style*="font-size: 10.5px"],
  span[style*="font-size: 11px"], span[style*="font-size: 11.5px"],
  div[style*="font-size: 9.5px"], div[style*="font-size: 10px"], div[style*="font-size: 10.5px"],
  div[style*="font-size: 11px"], div[style*="font-size: 11.5px"] { font-size: 12.5px !important; letter-spacing: .08em !important; }
  p[style*="font-size: 13.5px"], p[style*="font-size: 14px"], p[style*="font-size: 14.5px"],
  div[style*="font-size: 13.5px"], div[style*="font-size: 14px"], div[style*="font-size: 14.5px"],
  span[style*="font-size: 13.5px"], span[style*="font-size: 14px"] { font-size: 15px !important; }
}
@media (max-width: 480px) {
  h1 { font-size: 34px !important; }
}