/* v31 — телефон (< 768): своя вёрстка — сцена сверху, полка лентой, шаги каруселью, плашка КП снизу. */
main { padding-bottom: 76px; }
.hero { padding: 26px 16px 30px; }
.hero-h { font-size: 18.5vw; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .16em; }
.hero-h .mask:last-child { flex-basis: 100%; }
.hero-h .mask:last-child { font-size: .44em; margin-top: .2em; }
.hero-lead { font-size: 16px; margin: 14px 0 0; }
.hero-act .btn { flex: 1 1 auto; }
.hero-line { display: flex; gap: 8px; overflow: hidden; margin: 18px -16px 0; padding: 0 16px; order: 9; }
.hero-line .hl { flex: 0 0 96px; font-size: 11px; }
.hero-line .hl small { display: none; }
.hero { display: flex; flex-direction: column; }

.drop { padding: 20px 0 10px; }
.drop .sec-h { padding: 0 16px; font-size: 34px; }
.view { padding: 0 16px; }
.stage { height: min(56vh, 92vw); }
.shelf-k { margin-top: 10px; }
.shelf { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.shelf::-webkit-scrollbar { display: none; }
.slot { flex: 0 0 44vw; scroll-snap-align: start; }
.card-t { font-size: 13px; }

.steps { margin-top: 14px; }
.dots { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.dots li { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: width .2s; }
.dots li.on { width: 22px; border-radius: 4px; background: var(--brand); }
.track { display: flex; align-items: flex-start; transition: height .3s; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.step { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 14px 16px 6px; min-width: 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 16px 0; }
.nav-b { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; }
.nav-b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav-b:disabled { opacity: .35; }
.nav-t { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }

.fears { padding: 26px 0 10px; }
.fears .sec-h { padding: 0 16px; font-size: 28px; }
.fear-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.fear-track::-webkit-scrollbar { display: none; }
.fear { flex: 0 0 86%; scroll-snap-align: center; }
.fear-nav { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.fear-nav i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: width .2s; }
.fear-nav i.on { width: 18px; border-radius: 3px; background: var(--brand); }

.kpbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.kpbar-t { flex: 1; margin: 0; font: 700 14px/1.2 var(--mono); min-width: 0; }
.kpbar .btn { min-height: 44px; padding: 8px 20px; }
.top-lab { display: none; }
.sheet { margin: auto 0 0; max-width: none; }
.sheet-in { border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }