/* Shared presentation-only patch. Content and desktop layouts stay intact. */
@media (max-width: 767px) {
  main, main .wrap, main .grid > *, .mz-demo-body > * { min-width: 0; }
  main img { max-width: 100%; }
  main :has(> .phone) { max-width: 100%; }
  main .btn { white-space: normal; text-align: center; justify-content: center; }
  .hero-phone { position: relative; inset: auto; width: 230px; min-width: 0; max-width: 80%; margin: 24px auto 0; }
  .phone { border-radius: 30px; padding: 7px; }
  .phone > .screen { border-radius: 24px; }
  .phone::after { height: 12px; top: 12px; width: 26%; }
  .hero-browser > .bar { padding-inline: 8px; gap: 4px; }
  .hero-browser > .bar i { width: 6px; height: 6px; flex-shrink: 0; }
  .hero-browser > .bar span { min-width: 0; padding-inline: 8px; font-size: 10px; }
  main .overflow-x-auto { overflow: visible; max-width: 100%; }
  main ol.overflow-x-auto, main [role="tablist"].overflow-x-auto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; scroll-snap-type: none; }
  main ol.overflow-x-auto > *, main [role="tablist"].overflow-x-auto > * { width: 100%; min-width: 0; max-width: 100%; }
  .mz-steps { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .mz-step { width: 100%; min-width: 0; white-space: normal; }
  .mz-next { flex-wrap: wrap; gap: 12px; }
  .mz-next .mz-progress { flex: 1 0 100%; text-align: center; order: 3; }
  .mz-demo-head { flex-wrap: wrap; gap: 12px; }
  .tour-dots { flex-wrap: wrap; }
  header > .wrap { gap: 8px; }
  header .ms-auto { gap: 4px; }
}
@media (max-width: 639px) {
  /* The unlayered .btn display rule otherwise overrides Tailwind's hidden. */
  header .ms-auto > a.btn { display: none; }
}