/* Phone-only rules shared by every page. Desktop and tablet are untouched. */
@media (max-width: 640px) {
  /* Space between sections: the vh-based section padding comes out at 90–135px
     on a phone; bring it to one steady rhythm. Classes are set in the templates. */
  .zm-pt { padding-top: 56px !important; }
  .zm-pb { padding-bottom: 56px !important; }
  .zm-pt-h { padding-top: 72px !important; }
}

/* Swipe row: a stack of cards becomes one horizontal row on phones, with the
   next card peeking in. Add class "zm-swipe" to the container whose children
   are the cards. If the section's side padding isn't 20px, set --zm-gutter. */
@media (max-width: 640px) {
  .zm-swipe {
    display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 12px !important;
    margin-left: calc(-1 * var(--zm-gutter, 20px)) !important; margin-right: calc(-1 * var(--zm-gutter, 20px)) !important;
    padding-left: var(--zm-gutter, 20px) !important; padding-right: var(--zm-gutter, 20px) !important;
    scroll-padding-left: var(--zm-gutter, 20px);
  }
  .zm-swipe::-webkit-scrollbar { display: none; }
  .zm-swipe > * { flex: 0 0 84% !important; width: auto !important; max-width: none !important; min-width: 0 !important; scroll-snap-align: start; }
}

/* Whole site, every width: no monospace. Labels set in a mono font use
   Instrument Sans instead. Real code snippets (class zm-code) stay monospace. */
[style*="monospace"]:not(.zm-code), [style*="Mono"]:not(.zm-code) { font-family: 'Instrument Sans', sans-serif !important; }

/* No italics anywhere (client preference). The homepage headline toolbar's own "Italic" toggle is the only exception. */
em, i, cite, :not(h1):not(button > span)[style*="font-style:italic"], :not(h1):not(button > span)[style*="font-style: italic"] { font-style: normal !important; }