/* v9 — телефон (data-layout="m"): одна колонка, коробка во всю ширину сразу под
   заголовком, друзья — карусель со свайпом (scroll-snap), раскрытие — лист снизу. */

[data-layout="m"] .nav { display: none; }
[data-layout="m"] .hero { padding: 8px var(--gut) 0; }
[data-layout="m"] .hero-copy { margin-bottom: 16px; }
[data-layout="m"] .lead { font-size: 17px; }
[data-layout="m"] .stage { margin-inline: -6px; padding: 6px 6px 2px; border-radius: 26px; }
[data-layout="m"] .acts .btn { flex: 1 1 100%; }
[data-layout="m"] .acts .btn-sub { flex: 1 1 auto; }

[data-layout="m"] .car {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut);
  margin: 0 calc(var(--gut) * -1); padding-inline: var(--gut);
  overscroll-behavior-x: contain; scrollbar-width: none;
  touch-action: pan-x pan-y;
}
[data-layout="m"] .car::-webkit-scrollbar { display: none; }
[data-layout="m"] .fr { flex: 0 0 min(70%, 260px); scroll-snap-align: start; }
[data-layout="m"] .car-nav { display: none; }

[data-layout="m"] .reveal {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 94dvh; overflow-y: auto;
  border-radius: 28px 28px 0 0; overscroll-behavior: contain;
}
[data-layout="m"] .rv-stage { aspect-ratio: auto; height: min(52dvh, 92vw); border-radius: 28px 28px 0 0; overflow: hidden; }
[data-layout="m"] .rv-btns .btn { flex: 1 1 100%; }
@media (prefers-reduced-motion: no-preference) {
  [data-layout="m"] .reveal[open] { animation: sheet .45s cubic-bezier(.2, .9, .25, 1); }
}
@keyframes sheet { from { transform: translateY(100%); } }

@media (max-width: 359px) {
  :root { --gut: 12px; }
  .steps li { padding-right: 9px; font-size: 13px; gap: 4px; }
  .steps { gap: 5px; }
  .how-card { padding-left: 76px; }
  .how-card svg { width: 46px; height: 46px; }
  .how-n { left: 46px; top: 50px; }
}