/* v21 · телефон (.m): сцена прилипает сверху (40% экрана), под ней сегментный рельс;
   шаги — карточки во всю ширину; «Запросити КП» — нижняя панель. Не ужатый компьютер. */
.m .top { padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); gap: 8px; }
.m .top-cta { display: none; }
.m .brand span { font-size: 11px; }
.m .tl { display: block; padding: 0 0 8px; }
.m .stage-wrap { position: sticky; top: 61px; z-index: 20; background: var(--bg); padding: 8px 12px 6px; }
.m .stage { height: 34svh; min-height: 200px; border-radius: 16px; }
.m .rail { display: flex; gap: 4px; margin-top: 8px; }
.m .rail-i { flex: 1; }
.m .rail a { display: block; height: 22px; position: relative; }
.m .rail a::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--line); }
.m .rail-i.done a::before, .m .rail-i.on a::before { background: var(--ok); }
.m .rail-i.on a::before { height: 6px; top: 8px; }
.m .rail-n { position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin-left: -11px; font-size: 11px; border-width: 1.5px; opacity: 0; transition: opacity .25s; }
.m .rail-i.on .rail-n { opacity: 1; }
.m .rail-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m .rail-fill { display: none; }
.m .col { padding: 0 16px; }
.m .intro { padding: 20px 4px 28px; }
.m .kin { font-size: clamp(40px, 12.5vw, 56px); }
.m .lead { font-size: 16px; }
.m .steps { display: flex; flex-direction: column; gap: 24px; }
.m .step { padding: 18px 16px; min-height: 62svh; scroll-margin-top: 50svh; }
.m .step-h h2 { font-size: 26px; padding-right: 48px; }
.m .role { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; }
.m .chips.logos, .m .chips.prods { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.m .chips.logos::-webkit-scrollbar, .m .chips.prods::-webkit-scrollbar { display: none; }
.m .chip { flex: none; scroll-snap-align: start; }
.m .prod { width: 128px; }
.m .quote { margin-top: 32px; scroll-margin-top: 50svh; }
.m .quote h2 { font-size: 28px; }
.m .foot { padding-bottom: 110px; }
.m .mbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.m .mbar .btn { width: 100%; min-height: 50px; font-size: 17px; }