/* iOS Safari: stop automatic text inflation ("font boosting") on desktop-formatted pages. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Touch devices: hover cannot open the language menu; lang-menu.js adds tap toggle. */
[data-lang-hover] > span:first-child { cursor: pointer; }

/* Mobile layer for impromatrix.com — linearizes the desktop-first inline-styled layouts. */
@media (max-width: 840px) {
  /* — page scaffolding grids collapse to one column — */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* card strips: side borders become bottom borders when stacked */
  [style*="grid-template-columns: repeat(4, 1fr)"] > [style*="border-right"],
  [style*="grid-template-columns: repeat(3, 1fr)"] > [style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(18, 49, 47, 0.14);
  }
  /* data-table rows (mixed-ratio fr grids, tagged at build time): keep columns, compress */
  [data-imx-row] { font-size: 12px !important; gap: 6px !important; overflow-wrap: anywhere; }
  [data-imx-row] > * { padding: 10px 7px !important; }
  /* px-column scaffolding grids (e.g. case-study cards 200px 1fr auto): stack */
  [data-imx-stack] { grid-template-columns: 1fr !important; }

  /* — flex rows may wrap (inline styles never set flex-wrap) — */
  header, header nav, footer, [style*="display: flex"] {
    flex-wrap: wrap;
  }
  header { row-gap: 10px; }
  header nav { gap: 10px 14px !important; }

  /* — spacing & type scale — */
  header, section, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section { padding-top: 40px !important; padding-bottom: 40px !important; }
  h1 { font-size: clamp(30px, 8.5vw, 38px) !important; }
  h2 { font-size: clamp(22px, 6.5vw, 27px) !important; }
  body { overflow-wrap: break-word; }

  /* — details — */
  aside { position: static !important; }              /* calculator estimate panel */
  footer [style*="text-align: right"] { text-align: left !important; }
  table { display: block; overflow-x: auto; }
  input[type="range"] { width: 100%; }
}

/* Mid-size screens (small tablets, landscape phones): wrap the header before it overflows. */
@media (max-width: 1100px) {
  header, header nav { flex-wrap: wrap; }
  header { row-gap: 10px; }
}

/* Small phones: tighten article comparison rows and large CTAs. */
@media (max-width: 430px) {
  [data-imx-row] { font-size: 11px !important; gap: 4px !important; }
  [data-imx-row] > * { padding: 8px 5px !important; }
  [style*="min-width: 130px"] { min-width: 100px !important; }
  [style*="padding: 15px 28px"] { padding: 13px 16px !important; }
}