/* vyrobnyky — телефон. Своя последовательность: H1 + CTA → живая коробка → ролик → свайп «клієнту» → «вам» → кроки. */
.M{padding-bottom:env(safe-area-inset-bottom)}
.M .m-pad{padding-left:16px;padding-right:16px}
.M h1,.M #m-h1,.M h2,.M h3{font-family:var(--g);font-stretch:78%;text-transform:uppercase;margin:0;letter-spacing:-.005em}
.M .m-top{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:var(--ink);color:#efe6d6;
  font-family:var(--g);text-transform:uppercase;letter-spacing:.04em;font-size:13px}
.M .m-logo{text-decoration:none;font-weight:700}
.M .m-logo span{color:var(--kraft-l);font-weight:400}
.M .m-tag{background:var(--yel);color:var(--ink);padding:2px 8px;font-weight:700}

/* первый экран */
.M .m-hero{background:var(--kraft);color:var(--ink);padding-bottom:28px}
.M .m-edge{height:64px;border-bottom:3px solid var(--ink)}
.M .m-eyebrow{margin:20px 0 12px;font:600 12px var(--g);text-transform:uppercase;letter-spacing:.07em}
.M .m-h1{font-size:clamp(38px,12.4vw,58px);line-height:.88;font-weight:800;font-stretch:72%;margin-bottom:18px}
.M .m-h1 .ln{display:block;clip-path:inset(-0.35em -0.3em -0.12em -0.1em)}
.M .m-h1 .ln>span{display:inline-block;transform:translateY(105%);animation:m-up .8s cubic-bezier(.2,.8,.2,1) forwards}
.M .m-h1 .ln:nth-child(2)>span{animation-delay:.07s}
.M .m-h1 .ln:nth-child(3)>span{animation-delay:.14s}
.M .m-h1 .ln:nth-child(4)>span{animation-delay:.21s}
.M .m-h1 em{font-style:normal;background:var(--yel);padding:0 .06em}
@keyframes m-up{to{transform:none}}
.M .m-hook{margin:0 0 20px;font-size:16.5px;line-height:1.45}
.M .m-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;background:var(--yel);color:var(--ink);text-decoration:none;
  font:800 18px var(--g);text-transform:uppercase;letter-spacing:.02em;box-shadow:5px 5px 0 var(--ink);margin-right:5px;text-align:center;padding:10px 12px}
.M .m-cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.M .m-note{margin:12px 0 0;font-size:13px;color:var(--ink-2)}

/* общие подписи */
.M .m-k{margin:0 0 8px;font:12px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.M .m-h2{font-size:clamp(28px,8.6vw,38px);line-height:.95;font-weight:800;margin-bottom:18px}

/* живая коробка */
.M .m-demo{padding:36px 0 28px;background:var(--bg)}
.M .m-phone{margin:0 16px;border:3px solid var(--ink);background:#fbf8f2;color:#1d1a16;box-shadow:8px 8px 0 var(--kraft)}
.M .m-fake-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #e3dccf}
.M .m-fake-logo{border:2px dashed #b9ab96;color:#8e816f;font:700 11px var(--g);letter-spacing:.08em;padding:5px 8px}
.M .m-burger{display:grid;gap:4px}
.M .m-burger i{display:block;width:20px;height:2px;background:#1d1a16}
.M .m-chips{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.M .m-chips::-webkit-scrollbar{display:none}
.M .m-chip{flex:0 0 auto;scroll-snap-align:start;font:600 13px var(--t);padding:0 12px;min-height:40px;border:1.5px solid #d6cbb8;background:#fff;color:#1d1a16;white-space:nowrap}
.M .m-chip[aria-checked="true"]{background:#1d1a16;color:#fbf8f2;border-color:#1d1a16;box-shadow:inset 0 -4px 0 var(--yel)}
.M .m-stage{position:relative;height:min(92vw,400px);background:#e9e3d8}
.M .m-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.M .m-stage-ph{position:absolute;inset:0;width:100%;border:0;padding:0;background:#e9e3d8;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;color:#1d1a16}
.M .m-ph-edge{display:block;width:70%;height:54px;border:2px solid #1d1a16}
.M .m-ph-t{font:800 16px var(--g);text-transform:uppercase;letter-spacing:.03em;background:var(--yel);padding:12px 16px;box-shadow:4px 4px 0 #1d1a16}
.M .m-stage.ready .m-stage-ph{display:none}
.M .m-dims{margin:0;padding:10px 12px;font:12.5px/1.4 var(--mono);border-top:1px solid #e3dccf}
.M .m-make{display:flex;align-items:center;justify-content:center;min-height:48px;background:var(--kraft);color:#1d1a16;text-decoration:none;
  font:800 14px var(--g);text-transform:uppercase;letter-spacing:.03em}
.M .m-hint{margin:14px 0 0;font-size:13px;color:var(--muted)}

/* ролик 9:16 */
.M .m-vid{background:var(--ink);padding:24px 16px}
.M .m-vid-frame{aspect-ratio:9/16;max-height:78vh;margin:0 auto;background:#000;border:2px solid #3b342c}
.M .m-vid-frame video{display:block;width:100%;height:100%;object-fit:cover}

/* клиенту — свайп-карусель */
.M .m-client{background:var(--ink);color:#efe6d6;padding:8px 0 32px}
.M .m-client .m-k{color:#b3a693}
.M .m-car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.M .m-car::-webkit-scrollbar{display:none}
.M .m-slide{flex:0 0 86%;scroll-snap-align:start;background:#1b1814;border:2px solid #3b342c;padding:20px 18px;display:flex;flex-direction:column;gap:10px;min-height:330px}
.M .m-slide p{margin:0;color:#cfc3b1;font-size:15px}
.M .m-slide h3{font-size:22px;line-height:1}
.M .m-slide-k{font:800 54px/.9 var(--g);font-stretch:72%;color:var(--yel);text-transform:uppercase}
.M .m-pills{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.M .m-pills li{font:11px var(--mono);text-transform:uppercase;border:1px solid #5a5048;padding:4px 8px}
.M .m-die{background:#fbf8f2;aspect-ratio:16/10;display:grid;place-items:center;padding:6px}
.M .m-die img{width:100%;height:100%;object-fit:contain}
.M .m-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.M .m-dots i{width:24px;height:4px;background:#4a423a}
.M .m-dots i.on{background:var(--yel)}

/* вам */
.M .m-you{background:var(--kraft);color:var(--ink);padding:36px 0 12px}
.M .m-you .m-k{color:var(--ink-2)}
.M .m-block{background:#efe6d6;color:#141210;border:3px solid var(--ink);padding:18px 16px;margin-bottom:16px}
.M .m-block h3{font-size:21px;margin-bottom:6px}
.M .m-block>p{margin:0 0 12px;font-size:15px;color:#3d352d}
.M .m-ticket{margin:0;border:2px solid var(--ink);background:#fbf8f2;font:12.5px var(--mono);padding:4px 10px}
.M .m-ticket div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding:7px 0;border-bottom:1px dashed #cdbfa8}
.M .m-ticket div:last-child{border-bottom:0}
.M .m-ticket dt{color:#7a6f61}
.M .m-ticket dd{margin:0;font-weight:700;text-align:right}
.M .m-seg{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink)}
.M .m-seg button{font:700 13px var(--g);text-transform:uppercase;min-height:44px;border:0;background:transparent;color:var(--ink);padding:0 4px}
.M .m-seg button+button{border-left:2px solid var(--ink)}
.M .m-seg button[aria-selected="true"]{background:var(--ink);color:var(--yel)}
.M .m-where{font-size:14px;margin:10px 0}
.M .m-code{margin:0;background:var(--ink);color:#efe6d6;padding:12px;font:12px/1.55 var(--mono);white-space:pre-wrap;word-break:break-all}
.M .m-copy{margin-top:10px;width:100%;min-height:48px;background:var(--yel);color:var(--ink);border:2px solid var(--ink);font:800 15px var(--g);text-transform:uppercase}
.M .m-types summary{cursor:pointer;font:700 14px var(--g);text-transform:uppercase;min-height:44px;display:flex;align-items:center;border-top:2px solid var(--ink)}
.M .m-types ul{list-style:none;margin:0;padding:0}
.M .m-types li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #d6cbb8;font-size:14px}
.M .m-types li span{font:12px var(--mono);color:#6f6558;white-space:nowrap}

/* скорость */
.M .m-speed{background:var(--bg);padding:36px 0}
.M .m-nums{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.M .m-nums div{border-left:5px solid var(--yel);padding-left:12px}
.M .m-nums b{display:block;font:800 clamp(44px,15vw,64px)/.9 var(--g);font-stretch:72%}
.M .m-nums span{font-size:13.5px;color:var(--muted)}
.M .m-k2{font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.M .m-flutes{display:grid;gap:10px}
.M .m-flute{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:12px}
.M .m-flute b{font:800 22px var(--g)}
.M .m-flute div{height:calc(var(--mm) * 9px + 6px);border:2px solid var(--fg)}
.M .m-flute span{grid-column:2;font:11px var(--mono);color:var(--muted);margin-top:-6px}
.M .m-src{margin:16px 0 0;font:11px var(--mono);color:var(--muted)}

/* шаги */
.M .m-how{background:var(--ink);color:#efe6d6;padding:36px 0}
.M .m-how .m-k{color:#b3a693}
.M .m-steps{list-style:none;margin:0;padding:0 0 0 30px;counter-reset:s;position:relative}
.M .m-steps::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:3px;background:repeating-linear-gradient(180deg,var(--kraft) 0 10px,transparent 10px 16px)}
.M .m-steps li{counter-increment:s;position:relative;padding:0 0 20px 12px;color:#cfc3b1;font-size:15px}
.M .m-steps li::before{content:counter(s);position:absolute;left:-30px;top:0;width:25px;height:25px;display:grid;place-items:center;background:var(--yel);color:var(--ink);font:800 14px var(--g)}
.M .m-steps b{display:block;color:#efe6d6;font:800 18px var(--g);text-transform:uppercase}

/* финал */
.M .m-final{background:var(--yel);color:var(--ink);padding:40px 0 44px}
.M .m-final h2{font-size:clamp(32px,10vw,44px);line-height:.9;font-weight:800;font-stretch:72%;margin-bottom:22px}
.M .m-cta-ink{background:var(--ink);color:var(--yel);box-shadow:5px 5px 0 rgba(20,18,16,.35)}
.M .m-foot{background:var(--ink);color:#b3a693;font-size:13px;padding:18px 16px 86px}
.M .m-foot a{color:#efe6d6;display:inline-block;padding:10px 0}

/* нижняя планка с действием */
.M .m-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--ink);color:#efe6d6;transform:translateY(110%);transition:transform .3s ease;font:600 13px var(--g);text-transform:uppercase;letter-spacing:.03em}
.M .m-bar.on{transform:none}
.M .m-bar span{flex:1;min-width:0}
.M .m-bar a{background:var(--yel);color:var(--ink);text-decoration:none;font-weight:800;font-size:15px;padding:0 18px;min-height:44px;display:flex;align-items:center}

@media (max-width: 340px){
  .M .m-slide{flex-basis:90%}
  .M .m-nums{grid-template-columns:1fr}
  .M .m-bar span{display:none}
  .M .m-bar a{flex:1;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .M .m-h1 .ln>span{transform:none;animation:none}
}

/* переключатель языков в шапке */
.M .m-top-r{display:flex;align-items:center;gap:6px}
.M .m-top .lang-sw{font-size:13px;margin-right:-8px}
@media (max-width: 340px){
  .M .m-top{padding:0 12px}
  .M .m-top-r{gap:2px}
}