/* v14 — телефон (html[data-mode=m]): своя вертикальная вёрстка, не ужатый десктоп.
   3D — липкая полоса сверху (40 % экрана), сцены едут под ней; карусель — свайпом;
   горизонтальный свайп по тексту сцены — соседняя сцена; внизу одна кнопка действия. */
html[data-mode="m"] body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
html[data-mode="m"] .bar { gap: 8px; padding: 0 12px; }
html[data-mode="m"] .tc-l { display: none; }
html[data-mode="m"] .cart span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html[data-mode="m"] .cart::before { content: ""; width: 22px; height: 22px; flex: none;
  background: currentColor; -webkit-mask: var(--bag) center / contain no-repeat; mask: var(--bag) center / contain no-repeat;
  --bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
html[data-mode="m"] .film { padding-top: 52px; }
html[data-mode="m"] .stage { position: sticky; top: 52px; z-index: 5; height: 40svh; min-height: 250px; border-radius: 0 0 22px 22px;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55); }
html[data-mode="m"] .scenes { padding: 0 16px; }
html[data-mode="m"] .sc { min-height: calc(60svh - 52px); padding: 26px 0 34px; scroll-margin-top: calc(52px + 40svh); }
html[data-mode="m"] .hero { min-height: 0; padding-top: 20px; }
html[data-mode="m"] h1 { font-size: clamp(34px, 10.4vw, 46px); }
html[data-mode="m"] h2 { font-size: clamp(28px, 8.4vw, 36px); }
html[data-mode="m"] .lead { font-size: 15.5px; margin-top: 12px; }
html[data-mode="m"] .hero-go { margin: 18px 0 0; }
html[data-mode="m"] .hero-go .btn { width: 100%; }
html[data-mode="m"] .hint-d { display: none; }
html[data-mode="m"] .picks li { width: 40%; }
html[data-mode="m"] .car-b { width: 36px; height: 36px; }
html[data-mode="m"] .proto { padding: 14px; }
html[data-mode="m"] .proto dl { gap: 8px 12px; }
html[data-mode="m"] .proto dt { font-size: 13.5px; }
html[data-mode="m"] .go .btn { width: 100%; }
html[data-mode="m"] .final { padding-bottom: 24px; }
/* единственное действие — всегда под пальцем; на герое и в финале своя кнопка уже на экране */
html[data-mode="m"] .mbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); transition: transform .35s var(--ease); }
html[data-mode="m"] .mbar-b { width: 100%; }
html[data-mode="m"][data-sc="0"] .mbar, html[data-mode="m"][data-sc="6"] .mbar { transform: translateY(110%); }
html[data-mode="m"]:not([data-sc]) .mbar { transform: translateY(110%); }
@media (max-width: 359px) {
  html[data-mode="m"] .lang button { min-width: 32px; padding: 6px 7px; }
  html[data-mode="m"] .picks li { width: 46%; }
}
/* заливка: сцена длиннее экрана, текст стоит на месте, прокрутка поднимает воск */
html[data-mode="m"] .pour { min-height: 115svh; }
html[data-mode="m"] .pour .pin { position: sticky; top: calc(52px + 40svh + 8px); }