/* ТЕЛЕФОН — вертикальная история: повод → решение → живая коробка → ролик → рецепт → піца → кнопка */
.m{padding:0 16px calc(96px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.m-top{display:flex;justify-content:space-between;align-items:center;padding:18px 0 4px}
.m-top .lang-sw{margin:-12px -8px -12px 0}
.m h1,.m #m-h1{font:700 clamp(31px,9.6vw,44px)/1.06 var(--serif);letter-spacing:-.01em;margin:14px 0 10px;text-wrap:balance}
.m h2{font:700 clamp(25px,7.4vw,32px)/1.12 var(--serif);margin:0 0 12px;text-wrap:balance}
.m h2.hand{font-family:var(--hand);font-weight:400;font-size:clamp(24px,7vw,30px)}
.m p{margin:0 0 12px}
.m section{padding:28px 0}

.m-hero{padding-top:6px!important}
.m-hook{font-size:clamp(19px,5.6vw,23px);line-height:1.3;color:var(--berry-d);margin:0 0 4px!important;transform:rotate(-1.2deg);transform-origin:left}
.m-scene{margin:0 -6px 8px}
.m-cta1{width:100%}

.m-solve{position:relative}
.m-step{font-size:20px;color:var(--ink2);margin:0 0 2px!important;transform:rotate(-2deg);transform-origin:left}
.m-scene2{margin:0 -6px 10px}

/* живая коробка: рама-паспарту гуашью, вход в 3D по касанию — страница не застревает */
.m-live-p{color:var(--ink2)}
.m-frame{position:relative;height:clamp(400px,128vw,540px);border-radius:22px 26px 20px 28px;background:var(--frame);
  padding:10px;box-shadow:0 18px 40px -20px rgba(40,20,10,.6);margin:14px 0 34px}
.m-frame::after{content:"";position:absolute;inset:-6px;border-radius:26px 30px 24px 32px;pointer-events:none;
  border:4px solid color-mix(in srgb,var(--berry) 75%,transparent);filter:url(#f-rough);opacity:.55}
.m-frame iframe{display:block;width:100%;height:100%;border:0;border-radius:14px;background:#15181d;pointer-events:none;position:relative;z-index:1;opacity:0;transition:opacity .5s}
.m-frame.ready iframe{opacity:1}
.m-frame-wait{position:absolute;inset:10px;display:grid;place-items:center;border-radius:14px;color:#f1e4cf;font-size:20px;
  background:radial-gradient(70% 60% at 50% 45%,#3b3530,#15181d)}
.m-frame.active iframe{pointer-events:auto}
.m-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;font:inherit}
.m-cover-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(251,246,236,.94);color:#3b2a23;font:700 15px/1.2 var(--sans);
  padding:11px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translateY(50%);border:2px solid #3b2a23}
.m-cover-pill svg{width:22px;height:22px}
.m-frame.active .m-cover{display:none}

.m-exit{position:absolute;z-index:3;bottom:0;left:50%;transform:translate(-50%,50%);border:2px solid #3b2a23;border-radius:999px;background:rgba(251,246,236,.94);color:#3b2a23;
  font:700 14px/1 var(--sans);min-height:40px;padding:0 14px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.m-state{min-height:2.7em;font-size:19px;line-height:1.35;color:var(--berry-d);margin:4px 0 8px!important;padding-left:30px;position:relative}
.m-state::before{content:"";position:absolute;left:0;top:-6px;width:24px;height:24px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20 C6 12 10 7 19 4 M13 3 L19 4 L16 10' fill='none' stroke='%239e2a4c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.m-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 10px}
.m .chip{min-height:48px;border-radius:14px 16px 12px 18px;border:2px solid var(--ink);background:color-mix(in srgb,var(--paper) 70%,#fff);
  color:var(--ink);font:700 15px/1.15 var(--sans);padding:8px 10px;cursor:pointer}
.m .chip[aria-pressed=true]{background:var(--butter);color:#3b2a23;border-color:#3b2a23;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.m-dims{font-size:13px;color:var(--ink2)}
.m-yours{font-size:18px;line-height:1.35}

/* ролик 9:16 */
.m-vid{position:relative;margin:0 auto;max-width:360px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--paper2);
  box-shadow:0 18px 40px -22px rgba(40,20,10,.6);transform:rotate(-1deg)}
.m-vid video{width:100%;height:100%;object-fit:cover;display:block}
.m .vbtn{position:absolute;right:14px;bottom:14px;width:56px;height:56px;border-radius:50%;border:0;background:var(--cta);color:var(--cta-ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.m .vbtn svg{width:26px;height:26px}
.m .vbtn.on svg path{d:path("M7 5h4v14H7zM13 5h4v14h-4z")}

/* рецепт — карточка с линовкой и скотчем */
.m-card{position:relative;background:#fffaf0;color:#3b2a23;border-radius:6px;padding:26px 20px 18px;transform:rotate(.8deg);
  box-shadow:0 14px 30px -16px rgba(40,20,10,.55);}
.m-card::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;margin-left:-55px;transform:rotate(-3deg);
  background:color-mix(in srgb,var(--butter) 65%,transparent);filter:url(#f-rough)}
.m-card h2{color:#9e2a4c}
.m-card ul{list-style:none;margin:0;padding:0}
.m-card li{display:grid;grid-template-columns:42% 1fr;gap:10px;padding:7px 0;border-bottom:1px solid rgba(143,176,207,.55);line-height:1.35;font-size:15px}
.m-card b{font-weight:700}

.m-pizza-art{width:72%;max-width:260px;margin:0 0 4px -4px}
.m-pizza p{color:var(--ink2)}

.m-final{text-align:center;padding:40px 0 20px!important}
.m-final p{color:var(--ink2)}
.m-cta2{width:100%}
.m-foot{text-align:center;font-size:12px;color:var(--ink2);padding:18px 0}

/* липкая кнопка: появляется, когда первая ушла, прячется у финальной */
.m-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 62%,transparent);transform:translateY(110%);transition:transform .3s ease;pointer-events:none}
.m-sticky .cta{width:100%;max-width:528px;margin:0 auto;display:flex;min-height:52px}
.m-sticky.on{transform:none;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.m-sticky{transition:none}.m-vid{transform:none}}
@media (max-width:360px){.m .cta{font-size:16px;padding:14px 16px;gap:.35em}}
@media (max-width:340px){.m-chips{grid-template-columns:1fr}.m-card li{grid-template-columns:1fr;gap:0}}