/* The phone version: fewer, fuller screens. Stacks of cards become rows you swipe. */
@media (max-width: 760px) {
  /* hero: the copy and the phone share one screen */
  .hero .hero-note, .hero-clock { display: none !important; }
  .hero .lead { font-size: 1rem; }
  .hero-stage .phone { --pw: min(56vw, 230px); }

  /* shared: a sideways row that snaps card by card */
  .can-grid, .steps, .pr-tiers {
    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 80vw;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter, 16px)); padding: 6px var(--gutter, 16px) 18px; scrollbar-width: none;
  }
  .can-grid::-webkit-scrollbar, .steps::-webkit-scrollbar, .pr-tiers::-webkit-scrollbar { display: none; }
  .can-grid > *, .steps > li, .pr-tiers > * { scroll-snap-align: center; min-width: 0; grid-column: auto !important; grid-row: auto !important; }
  .steps > li .ticket { height: 100%; rotate: 0deg !important; }
  .swipe-hint { display: flex; justify-content: center; gap: 6px; margin-top: -4px; }
  .swipe-hint i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s, width .3s; }
  .swipe-hint i.on { opacity: .9; width: 18px; border-radius: 4px; }

  /* dashboard: the tab list becomes a row of chips under the picture */
  .dshow-tabs { display: flex !important; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px) 6px; }
  .dshow-tabs::-webkit-scrollbar { display: none; }
  .dshow-tabs li { flex: none; }
  .dtab { white-space: nowrap; padding: 10px 16px !important; border-radius: 999px !important; }
  .dtab > span, .dtab .dtab-bar { display: none !important; }

  /* pricing: the three tiers are swiped, Signature first in view */
  .pr-tiers { grid-auto-columns: 84vw; max-width: none !important; }
  .pr-card { padding: 24px 20px 20px; }
  .pr-badge { top: -10px; }
}