/* home-mobile.css — новая главная на телефоне (до 767 px).
   Подключён в index.html ПОСЛЕ home.css. Всё в этом файле лежит внутри
   @media (max-width:767px): на компьютере файл не меняет ни пикселя.

   Принцип: на телефоне телефон и есть устройство. Снимки приложения — в
   натуральную величину, не в миниатюре. Время дня — плашкой, прилипшей
   под шапкой. Вторая сцена рассказывает ту же историю, что на компьютере:
   одна заявка едет с доски в телефон мастера — только не по дорожке, а
   вниз, на липкой карточке.

   Часть элементов (сцена, плашка времени, кнопка языка, полосы снимков)
   создаёт home-mobile.js, тоже только на телефоне; их правила тоже здесь.

   Порядок разделов ниже:
     1. шапка — одна строка;
     2. первый экран — на весь экран, шапка над ним прозрачная; слова снизу
        едут под шапку и тают к дому, абзац под видео;
     3. сцена «одна заявка от доски до кармана»: доска, полёт, посадка;
     3б. «кому подходит» — полоса названий и ряд карточек под палец;
     4. «пройти день» — плашка времени и снимки в шагах;
     4б. цена — счётчик и счёт под палец;
     5. появление при входе в экран. */
@media (max-width:767px){
  :root{--mh:53px}   /* высота шапки; точную ставит home-mobile.js */

  /* ======================================================================
     1. ШАПКА — одна строка: марка слева, справа плашка языка и тема.
     Кнопка с почтой убрана: она дублирует «Напишите нам» в первом экране,
     почта остаётся в подвале.
     ====================================================================== */
  .top .wrap{grid-template-columns:minmax(0,1fr) auto;padding-block:10px;gap:0 12px}
  .top .mark{grid-area:1/1/2/2;font-size:21px}
  .top .write{display:none}
  .top .tools{grid-area:1/2/2/3;justify-self:end;position:relative;flex-direction:row-reverse;gap:8px}

  /* плашка текущего языка — создаёт скрипт; тап раскрывает список из пяти */
  .mlang{
    appearance:none;border:0;cursor:pointer;margin:0;
    height:30px;min-width:44px;padding:0 12px;border-radius:var(--r-pill);
    background:var(--brand);color:var(--on-brand);
    font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:12px;
    letter-spacing:.08em;line-height:1;
  }
  .mlang[aria-expanded="true"]{background:color-mix(in srgb,var(--brand) 86%,#FFFFFF)}

  /* пять языков — столбиком под плашкой; закрыт — его нет вовсе */
  .lang{
    display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:5;
    flex-direction:column;align-items:stretch;min-width:200px;padding:6px;
    background:var(--graphite);border:var(--bw) solid var(--line);border-radius:var(--r);
    box-shadow:0 24px 48px -20px rgb(0 0 0 / .6);
  }
  .lang.is-open{display:flex}
  .lang button{
    display:flex;align-items:center;gap:12px;padding:11px 14px;
    font-size:12px;text-align:left;border-radius:calc(var(--r) - 4px);
  }
  /* название языка на нём самом — из data-name, ставит скрипт */
  .lang button::after{content:attr(data-name);letter-spacing:0;font-weight:400;font-size:15px;color:var(--text)}
  .lang button[aria-pressed="true"]::after{color:var(--on-brand)}
  /* Скрипт не отработал (плашки нет): переключатель остаётся капсулой в строке,
     как на компьютере, — язык всё равно можно сменить. */
  .tools:not(:has(.mlang)) .lang{
    display:inline-flex;position:static;flex-direction:row;min-width:0;padding:2px;
    background:none;box-shadow:none;border-radius:var(--r-pill);
  }
  .tools:not(:has(.mlang)) .lang button{padding:6px 7px}
  .tools:not(:has(.mlang)) .lang button::after{content:none}

  /* ======================================================================
     2. ПЕРВЫЙ ЭКРАН — сцена на весь экран, картинка идёт под марку: шапка
     над героем прозрачная. Шапка стоит в потоке страницы, поэтому сцена
     подтянута вверх на её высоту (--mh), иначе картинка начиналась бы под ней.
     Слова прижаты к низу: надзаголовок, заголовок, одна короткая строка,
     кнопки; справа внизу подсказка «листайте». Большой абзац скрипт выносит
     ПОД героя, на фон страницы (.film-lede). По доле хода (home-film.js):
       0 … 0.32     блок слов целиком едет снизу под шапку (--copy-ride-y),
                    затемнение переезжает снизу наверх (--copy-ride);
       0.32 … 0.68  слова тают (--copy-o) и, не останавливаясь, уезжают
                    дальше вверх (--copy-y): у окна видны наполовину, к кухне
                    их нет давно.
     Высота сцены — «большого» экрана, lvh: в Safari и Chrome адресная строка
     уезжает, как только начинают листать, и сцена ростом в «малый» экран
     (svh) оставила бы под собой полосу фона. Слова и подсказка стоят от низа
     «малого» экрана — того, что виден при открытии: разницу lvh − svh сцена
     держит нижним отступом. Где строки нет (компьютер, Chrome без неё),
     разница — ноль. Слова лежат в потоке сцены: если на длинном языке они
     не помещаются, сцена растёт вместе с ними.
     ====================================================================== */
  .film{--film-scrub:190vh;margin-top:calc(-1 * var(--mh))}
  .film-rail{height:auto}
  html.m-film .film-rail{height:calc(100lvh + var(--film-scrub))}
  /* Постер свой: первый кадр телефонного набора (1080x1350), а не лежачий
     2560x1440 компьютера — вдвое легче, вид тот же. Тон и center/cover — из home.css. */
  .film-stage{height:auto;min-height:100lvh;padding-bottom:calc(100lvh - 100svh);
    display:flex;flex-direction:column;justify-content:flex-end;
    background-image:url("media/hero/hero-poster-m.webp")}
  /* Низ кнопок — примерно на 4/5 экрана, как в одобренном наброске: под ними
     видна лужа и остаётся полоса для подсказки. С отступом в 28 px кнопки
     вставали вровень с подсказкой, и на всех пяти языках она налезала на
     вторую кнопку. 15svh, а не пиксели: на низком экране и полоса меньше. */
  .film-copy{position:relative;top:auto;margin-top:auto;padding-top:calc(var(--mh) + 40px);
    padding-bottom:calc(28px + 15svh + env(safe-area-inset-bottom));
    translate:0 var(--copy-ride-y,0px)}
  .film-copy .kicker{margin-bottom:14px;font-size:10.5px;letter-spacing:1.6px;color:#FFB070}
  .film-copy h1{font-size:calc(clamp(34px,10vw,46px) * var(--hs))}
  .film-copy .sub{padding-top:0}
  /* Абзаца в герое нет: скрипт уносит его под героя. Не отработал скрипт —
     абзац не встаёт в герое рядом с короткой строкой, его просто нет. */
  .film-copy .lede{display:none}
  /* одна строка вместо абзаца; тает вместе с остальными словами */
  .film-copy .short{display:block;margin:12px 0 0;font-size:15px;line-height:1.4;color:#EFE7DC;
    opacity:var(--copy-o,1);translate:0 var(--copy-y,0px)}
  .film-copy .cta{margin-top:18px}
  .film-copy .btn{padding:14px 22px;font-size:14px}
  /* «↓ листайте» — справа внизу; гаснет в самом начале хода, пока слова
     ещё только трогаются вверх */
  .film-hint{display:block;position:absolute;right:var(--gut);margin:0;
    bottom:calc(22px + env(safe-area-inset-bottom) + 100lvh - 100svh);
    font-size:11px;line-height:1.2;letter-spacing:1.2px;text-transform:uppercase;
    color:rgb(246 240 232 / .75);pointer-events:none;
    opacity:clamp(0, calc(1 - var(--copy-ride,0) * 3), 1)}
  .film-hint::before{content:"\2193\00a0"}
  .film-stage.is-clear .film-hint{visibility:hidden}
  /* Телефон набок: экран низкий, и полоса под подсказку вытолкнула бы низ
     сцены за край окна — подсказку резало пополам. Слова садятся вниз,
     подсказки нет. */
  @media (max-height:480px){
    .film-copy{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
    .film-hint{display:none}
  }
  /* Затемнение. Общий тон — лёгкий, на всю сцену. */
  .film-veil{background:
    linear-gradient(180deg,
      rgb(14 10 8 / .14) 0%,
      rgb(14 10 8 / .04) 34%,
      rgb(14 10 8 / .20) 58%,
      rgb(14 10 8 / .70) 100%)}
  /* Поверх — два слоя только для слов, оба гаснут вместе с ними (--copy-o):
     снизу вверх — пока слова внизу, сверху вниз — когда они уехали под
     шапку; по ходу подъёма (--copy-ride) один перетекает в другой. */
  .film-veil::before{
    opacity:calc((1 - var(--copy-ride,0)) * var(--copy-o,1));
    background:
    linear-gradient(180deg,
      transparent 38%,
      rgb(14 10 8 / .40) 66%,
      rgb(14 10 8 / .86) 100%)}
  .film-veil::after{
    content:"";position:absolute;inset:0;
    opacity:calc(var(--copy-ride,0) * var(--copy-o,1));
    background:
    linear-gradient(180deg,
      rgb(14 10 8 / .82) 0%,
      rgb(14 10 8 / .50) 28%,
      transparent 52%)}
  /* Шапка, пока герой на экране (html.m-hero ставит home-film.js): без фона
     и без линии, только лёгкий градиент сверху — марка читается на картинке.
     Герой ушёл вверх — шапка снова тёмная. Линия гаснет цветом, а не
     пропадает: иначе шапка стала бы на пиксель ниже и страница дёрнулась бы.
     Градиент — без повтора: он во весь рост шапки без линии, и повтор клал
     его тёмную верхнюю строку на место линии. Марка над картинкой светлая
     и в светлой теме. */
  .top{transition:background-color .25s ease-out,border-color .25s ease-out,backdrop-filter .25s ease-out}
  .top .mark{transition:color .25s ease-out}
  html.m-hero .top{background:linear-gradient(rgb(14 10 8 / .55),transparent) no-repeat;
    border-bottom-color:transparent;backdrop-filter:none}
  html.m-hero .top .mark{color:var(--isle-text)}
  /* абзац под героем (скрипт переносит сюда .lede) */
  .film-lede{padding:26px var(--gut) 0}
  .film-lede .lede{max-width:none;font-size:16px;line-height:1.55;color:var(--body)}

  /* ======================================================================
     3. СЦЕНА — ОДНА ЗАЯВКА ОТ ДОСКИ ДО КАРМАНА. Следим за Vittoria Baldan,
     13:00–14:30: на доске это блок в строке Sorin Botnaru.
     Разметку строит home-mobile.js:
       .mflow-h     заголовок «Диспетчер ставит заявку на доску»;
       .mboard      верх той же доски: шапка в одну строку (.mboard-head —
                    дата слева, Day · Week · Month справа, два куска
                    снимка, не листаются), под ней Unassigned · 2, шкала
                    часов и пять строк мастеров: колонка имён прилипла
                    слева (sticky), сетка часов листается под ней; вокруг
                    блока Vittoria — оранжевое свечение .mglow;
       .mfly-track  родитель высотой 110svh — весь полёт укладывается
                    примерно в один экран прокрутки: в нём подпись под доской,
                    короткий пунктир от блока вниз и липкая карточка
                    заявки .mfly-card — она висит на 40 svh, пока доска
                    уезжает вверх и снизу подъезжает телефон;
       .mland       заголовок «Мастер видит её в телефоне» и сам телефон,
                    подтянутый вверх на --land так, что низ родителя
                    карточки совпадает с местом строки 13:00 в списке дня:
                    карточка перестаёт быть липкой ровно там и дальше едет
                    вместе с телефоном, как будто села в список.
     Ни у одного предка карточки нет overflow: hidden — иначе sticky не
     работал бы (.hero — overflow-x: clip, он прокрутку не создаёт).
     Все мерки (--s, --pt, --card-x, --card-w, --dash-x, --land,
     --shift-land) считает скрипт по настоящим размерам; в CSS — запасные.
     ====================================================================== */
  .v-c .hero{padding-top:36px}
  body.v-c .hero .scene{
    margin-inline:calc(-1 * var(--gut));padding:0;
    border:0;border-radius:0;overflow:visible;
    background:var(--isle);
  }
  body.v-c .hero .scene .laptop,
  body.v-c .hero .scene .jobs{display:none}

  .mflow{
    padding:28px 0 40px;
    --s:calc(100vw / 1272.5);   /* точка файла доски в css px: имена + пять часов = ширина экрана */
    --fly-top:40svh;            /* где висит карточка */
    --dash:128px;               /* длина пунктира = отступ карточки от доски */
  }
  .mflow-h,.mland-h{
    margin:0 var(--gut);
    font-family:var(--display);font-weight:var(--w1);font-size:26px;line-height:1.15;
    letter-spacing:var(--ls-h2);color:var(--text);text-wrap:balance;
  }
  .mflow-h b,.mland-h b{font-weight:var(--w2)}
  .mflow-h{margin-bottom:18px}

  /* --- доска: шапка y 110…326 файла; строки y 326…1270 (линия под шапкой,
     Unassigned · 2, шкала часов, Doina, Mihai, Oleg, Pavel, Sorin),
     имена x 400…830, сетка с 840. Фон #110D0C — фон самого снимка --- */
  .mboard{position:relative;background:#110D0C;border-block:var(--bw) solid var(--isle-line)}
  /* шапка: слева x 400…982.5, справа x 2168…2858 — вместе 1272.5 точки,
     ровно ширина доски; оба края кусков — в пустом фоне снимка */
  .mboard-head{display:flex;justify-content:space-between;height:calc(216 * var(--s))}
  .mboard-date,.mboard-view{position:relative;flex:none;height:100%;overflow:hidden}
  .mboard-date{width:calc(582.5 * var(--s))}
  .mboard-view{width:calc(690 * var(--s))}
  .mboard-scroll{
    display:flex;height:calc(944 * var(--s));overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .mboard-scroll::-webkit-scrollbar{display:none}
  .mboard-names,.mboard-grid{position:relative;flex:none;height:100%;overflow:hidden}
  .mboard-names{position:sticky;left:0;z-index:2;width:calc(430 * var(--s));box-shadow:10px 0 18px -6px rgb(0 0 0 / .75)}
  .mboard-grid{width:calc(2040 * var(--s))}
  body.v-c .mboard img{
    position:absolute;top:calc(-326 * var(--s));width:calc(2880 * var(--s));max-width:none;height:auto;
    display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;
  }
  body.v-c .mboard .mboard-head img{top:calc(-110 * var(--s))}
  .mboard-date img{left:calc(-400 * var(--s))}
  .mboard-view img{left:calc(-2168 * var(--s))}
  .mboard-names img{left:calc(-400 * var(--s))}
  .mboard-grid img{left:calc(-840 * var(--s))}
  /* блок Vittoria Baldan: x 1701…1954, y 1146…1254 файла — в координатах сетки и обрезки */
  .mglow{
    position:absolute;pointer-events:none;
    left:calc(861 * var(--s));top:calc(820 * var(--s));width:calc(253 * var(--s));height:calc(108 * var(--s));
    border-radius:calc(12 * var(--s));background:rgb(255 109 0 / .08);
    box-shadow:0 0 0 1.5px var(--brand),0 0 calc(24 * var(--s)) calc(6 * var(--s)) rgb(255 109 0 / .5);
  }

  /* --- полёт --- */
  /* Отступ до карточки — внутренний у родителя, а не margin у карточки:
     margin первого ребёнка схлопнулся бы с родителем и сдвинул весь блок.
     Высота родителя — весь ход полёта: карточка висит, пока его низ не
     дойдёт до неё. 110svh: телефон начинает подъезжать сразу, как карточка
     повисла, и пустой темноты между доской и телефоном нет. Посадку это не
     трогает — она считается от низа родителя (--land). */
  .mfly-track{position:relative;margin:0 var(--gut);height:var(--fly-h,110svh);padding-top:var(--dash)}
  .mfly-track .mstrip-cap{
    position:absolute;left:0;top:14px;margin:0;padding:0;
    max-width:calc(var(--dash-x,258px) - 24px);
    color:var(--isle-muted);font-size:14px;line-height:1.5;
  }
  .mfly-dash{position:absolute;left:var(--dash-x,258px);top:0;width:0;height:var(--dash);border-left:2px dotted var(--brand);opacity:.9}
  .mfly-card{
    position:sticky;top:var(--fly-top);z-index:3;
    margin:0 0 0 var(--card-x,0px);width:var(--card-w,100%);
  }
  /* карточка — та же строка дня, что и на компьютере, в масштабе телефона (--pt) */
  body.v-c .hero .scene .mfly-card .job{
    position:relative;left:auto;right:auto;top:auto;translate:none;transform:none;
    width:100%;--u:var(--pt,1px);opacity:1;
    box-shadow:0 18px 36px -14px rgb(0 0 0 / .75),0 0 0 1px rgb(255 255 255 / .06);
  }

  /* --- посадка --- */
  .mland{position:relative;z-index:1;margin:calc(-1 * var(--land,220px)) var(--gut) 0}
  /* Заголовок над телефоном появляется в момент посадки: пока телефон поднимается
     снизу, он проезжал бы сквозь висящую карточку. */
  .mland-h{position:absolute;left:0;right:0;bottom:calc(100% + 18px);margin:0;font-size:24px;opacity:0;transition:opacity .35s ease-out}
  .mflow.is-landed .mland-h{opacity:1}
  body.v-c .hero .scene .mland .phone{width:auto;max-width:none;margin:0}
  body.v-c .hero .scene .case{
    border-radius:30px;border-color:#3A322B;
    background:linear-gradient(168deg,#221C17 0%,#15110E 50%,#0E0B09 100%);
    box-shadow:0 30px 56px -26px rgb(0 0 0 / .85);
  }
  body.v-c .hero .scene .case .ph-phone{border-radius:24px}
  /* В списке дня на телефоне — только Vittoria: строк Marta и Fausto нет.
     Её строка в ленте отдаёт место карточке: виден только час слева, он
     загорается при посадке; закрытые строки со снимка сдвигаются вниз
     на высоту карточки (--shift-land, в строках по 79 пунктов). */
  body.v-c .mflow .feed-row:nth-child(1),
  body.v-c .mflow .feed-row:nth-child(2){display:none}
  body.v-c .mflow .feed-row:nth-child(3){--slot:0;--fy:0px}
  body.v-c .mflow .feed-row:nth-child(3) .fr-card{visibility:hidden}
  body.v-c .mflow.is-landed .feed{--shift:var(--shift-land,1.228)}
  body.v-c .mflow.is-landed .feed-row:nth-child(3){--fo:1}

  /* Без полёта (браузер без IntersectionObserver): всё на месте —
     доска, подпись, заголовок и телефон, в котором строка Vittoria уже стоит.
     «Меньше движения» в системе полёт не выключает: карточка едет только
     вслед за прокруткой. */
  .mflow.is-still .mfly-track{height:auto;padding-top:14px}
  .mflow.is-still .mfly-track .mstrip-cap{position:static;max-width:42ch}
  .mflow.is-still .mfly-dash,
  .mflow.is-still .mfly-card{display:none}
  .mflow.is-still .mland{margin-top:28px}
  .mflow.is-still .mland-h{position:static;margin-bottom:16px;opacity:1}
  body.v-c .mflow.is-still .feed{--shift:1}
  body.v-c .mflow.is-still .feed-row:nth-child(3){--fo:1}
  body.v-c .mflow.is-still .feed-row:nth-child(3) .fr-card{visibility:visible}

  /* ======================================================================
     3б. «КОМУ ПОДХОДИТ». Карточка ~72 % ширины экрана, ряд листается пальцем,
     снап по центру: отступ списка ставит в центр и первую карточку, и
     последнюю. В цвет оживает карточка, что ближе к центру экрана (is-live
     ставит home-spheres.js). Стрелок нет. Над рядом — полоса названий
     (.sph-tabs, строит home-spheres.js): одна строка капсул, листается
     пальцем; капсула карточки на месте — оранжевая, тап — карточка встаёт
     в центр.
     ====================================================================== */
  .spheres{padding-block:64px 56px}
  .sph-head .kicker{margin-bottom:14px;font-size:11px}
  .sph-head h2{font-size:30px;line-height:1.12}
  /* отступ полосы по вертикали — место для рамки фокуса: полоса режет всё,
     что выходит за её край */
  .sph-tabs{
    display:flex;gap:8px;margin-top:20px;padding:4px var(--gut);
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;
  }
  .sph-tabs::-webkit-scrollbar{display:none}
  .sph-tab{
    flex:none;appearance:none;margin:0;cursor:pointer;
    display:inline-flex;align-items:center;height:36px;padding:0 16px;
    border:var(--bw) solid var(--line);border-radius:var(--r-pill);background:none;
    font:inherit;font-size:14px;line-height:1;color:var(--body);white-space:nowrap;
    transition:background-color .3s ease-out,border-color .3s ease-out,color .3s ease-out;
  }
  .sph-tab[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
  .sph-tab:focus-visible{outline:2px solid var(--text);outline-offset:2px}
  .sph-row{margin-top:28px}
  .sph-tabs + .sph-row{margin-top:16px}
  .sph-scroll{scroll-padding-inline:0}
  .sph-list{--cw:72cqw;gap:12px;padding:0 calc((100cqw - var(--cw)) / 2)}
  .sph-card{scroll-snap-align:center}
  .sph-tx{padding:16px 18px 20px}
  .sph-tx h3{font-size:18px;margin-bottom:6px}
  .sph-tx p{font-size:14.5px}
  .sph-row::after{display:none}
  .sph-nav{display:none}
  @supports not (width:1cqw){
    .sph-list{--cw:72vw;padding:0 calc((100vw - var(--cw)) / 2)}
  }

  /* ======================================================================
     4. «ПРОЙТИ ДЕНЬ». Час раздела не в самом разделе, а одной плашкой под
     шапкой: position: sticky; top: высота шапки. Она лежит в <main> перед
     первым шагом (создаёт скрипт), у предков нет overflow: hidden — иначе
     sticky не работал бы. Появляется с первым шагом, гаснет после
     последнего; час и подпись меняет скрипт по IntersectionObserver.
     ====================================================================== */
  #board .cap,#field .cap,#money .cap,#month .cap{display:none}
  .chapter{--sec:72px}

  .mwalk{
    position:sticky;top:var(--mh);z-index:15;height:0;margin:0 var(--gut);
    pointer-events:none;opacity:0;visibility:hidden;
    transition:opacity .25s ease-out,visibility 0s linear .25s;
  }
  .mwalk.is-on{opacity:1;visibility:visible;transition:opacity .25s ease-out}
  .mwalk-pill{
    position:absolute;left:0;right:0;top:10px;height:40px;
    display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:var(--r-pill);
    background:color-mix(in srgb,var(--ink) 92%,transparent);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:var(--bw) solid var(--line);box-shadow:0 12px 28px -18px rgb(0 0 0 / .6);
    color:var(--text);
  }
  .mwalk .dot{
    flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);
  }
  .mwalk .t{
    font-family:var(--display);font-weight:var(--w2);font-size:14px;letter-spacing:.02em;
    font-variant-numeric:tabular-nums;color:var(--brand-ink);transition:opacity .16s ease-out;
  }
  .mwalk .sep{color:var(--muted-2)}
  .mwalk .l{
    min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);
    transition:opacity .16s ease-out;
  }
  /* мягкая смена текста: сначала гаснет, потом новый текст проявляется */
  .mwalk.is-swap .t,.mwalk.is-swap .l{opacity:0}

  /* «Кто свободен» (08:15): только правая панель снимка pool-3.webp, x 1922…2880
     файла — 958 точек = ширина экрана, отсюда масштаб --k (в точке 1921 —
     рамка панели: на телефоне она светилась полосой по левому краю). Три окна одно под
     другим, без прокрутки вбок (разметку строит home-mobile.js):
       .mpool-job   заявка, y 30…320; окно уже панели на 120 точек справа —
                    крестик закрытия (x 2805…2826) остаётся за краем;
       .mpool-line  разделитель панели, y 350…352, с тем же зазором над ним,
                    что на снимке (30 точек);
       .mpool-who   Who's free at 17:30 и пять мастеров с Assign, y 772…1482.
     Фон #191512 — фон самой панели на снимке: он же справа от окна заявки. */
  .chapter .shot .mpool{
    margin-inline:calc(-1 * var(--gut));background:#191512;
    border-block:var(--bw) solid var(--line);container-type:inline-size;
  }
  .mpool-job,.mpool-line,.mpool-who{--k:calc(100cqw / 958);position:relative;overflow:hidden}
  .mpool-job{width:calc(838 * var(--k));height:calc(290 * var(--k))}
  .mpool-line{margin-top:calc(30 * var(--k));height:calc(2 * var(--k))}
  .mpool-who{height:calc(710 * var(--k))}
  body.v-c .mpool img{
    position:absolute;left:calc(-1922 * var(--k));
    width:calc(2880 * var(--k));height:calc(1800 * var(--k));max-width:none;
    display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;
    translate:none!important;   /* параллакс из home-motion.js панели не нужен */
  }
  body.v-c .mpool-job img{top:calc(-30 * var(--k))}
  body.v-c .mpool-line img{top:calc(-350 * var(--k))}
  body.v-c .mpool-who img{top:calc(-772 * var(--k))}
  /* панель видна сразу, как и полосы: появление снимков к ней не относится */
  html.m-scroll body.v-c .chapter .shot .mpool .ph{opacity:1;scale:1;transform:none;transition:none}
  @supports not (width:1cqw){
    .mpool-job,.mpool-line,.mpool-who{--k:calc(100vw / 958)}
  }

  /* снимки в шагах: экраны телефона — во всю ширину; экраны компьютера —
     полосой в натуральную величину (файл 2880 точек → 1440 css px),
     листается вбок, справа затемнение и стрелка до первого свайпа */
  #field .shot .ph-phone{width:100%}
  .over{margin-top:20px}
  body.v-c #month .shot{display:block}
  body.v-c #month .shot .ph-phone{width:100%;margin-top:24px}

  .mstrip{position:relative;--strip-bg:var(--ink)}
  .chapter .shot .mstrip{margin-inline:calc(-1 * var(--gut));border-block:var(--bw) solid var(--line)}
  .mstrip-scroll{
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .mstrip-scroll::-webkit-scrollbar{display:none}
  .mstrip-crop{position:relative;width:1440px;height:var(--sh,390px);overflow:hidden;background:#110D0C}
  body.v-c .mstrip-crop img{
    position:absolute;left:0;top:calc(-1 * var(--sy,0px));
    width:1440px;max-width:none;height:auto;display:block;
    margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;
    translate:none!important;   /* параллакс из home-motion.js полосе не нужен */
  }
  /* Полоса видна сразу и без условий: появление снимков (прозрачность до
     класса is-in, подъём на 16 px) к ней не относится. Иначе полоса, пока
     наблюдатель не сработал, — тёмный прямоугольник фона #110D0C. */
  html.m-scroll body.v-c .chapter .shot .mstrip .ph{opacity:1;scale:1;transform:none;transition:none}
  .mstrip-fade{
    position:absolute;top:0;right:0;bottom:0;width:72px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--strip-bg));
  }
  .mstrip-arrow{
    position:absolute;right:16px;top:50%;translate:0 -50%;pointer-events:none;
    color:var(--brand);font-family:var(--display);font-weight:var(--w2);font-size:22px;line-height:1;
    transition:opacity .35s ease-out;
  }
  .mstrip.is-swiped .mstrip-arrow{opacity:0}

  /* ======================================================================
     4б. ЦЕНА — одна колонка, по порядку разметки (home.css уже ставит её
     до 900 px). Здесь только то, что нужно пальцу: вопрос и подсказка —
     строкой, счётчик под ними слева, кнопки «−» и «+» крупнее; счёт не
     сжат; кнопка пробы — во всю ширину.
     ====================================================================== */
  .bill-ask{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:24px}
  .step{gap:12px}
  .step-b{width:48px;height:48px}
  .step-b::before,.step-plus::after{width:16px;margin-left:-8px}
  .step-n{font-size:36px;min-width:2ch}
  .bill-row{padding:16px 0}
  .bill-sum{font-size:calc(48px * var(--hs))}
  .try .btn{width:100%;padding-block:16px}
  .ticks{gap:10px 16px}

  /* ======================================================================
     5. ДВИЖЕНИЕ НА ТЕЛЕФОНЕ — fade и подъём на 16 px при входе в экран
     (классы is-in ставит скрипт по IntersectionObserver), посадка карточки
     и свечение блока. Появление и свечение идут сами, поэтому они только
     при no-preference; появление ещё и только под html.m-scroll: нет
     скрипта или система просит меньше движения — всё видно сразу.
     Посадка идёт вслед за прокруткой — она работает при любой настройке.
     Параллакс снимков на телефоне выключен.
     ====================================================================== */
  @media (prefers-reduced-motion:no-preference){
    html.m-scroll body.v-c .chapter .shot .ph{
      translate:none!important;
      transform:translateY(16px);
      transition:opacity .6s var(--m-ease),scale .9s var(--m-ease),transform .7s var(--m-ease);
    }
    html.m-scroll body.v-c .chapter .shot .ph.is-in{transform:none}

    html.m-scroll body.v-c .mv{opacity:0;translate:0 16px;transition:opacity .55s var(--m-ease),translate .7s var(--m-ease)}
    html.m-scroll body.v-c .mv.is-in{opacity:1;translate:none}

    /* блок на доске дышит: за ним и следим */
    @keyframes mglow-pulse{
      from{box-shadow:0 0 0 1.5px var(--brand),0 0 calc(18 * var(--s)) calc(4 * var(--s)) rgb(255 109 0 / .40)}
      to{box-shadow:0 0 0 1.5px var(--brand),0 0 calc(30 * var(--s)) calc(8 * var(--s)) rgb(255 109 0 / .65)}
    }
    .mglow{animation:mglow-pulse 1.8s ease-in-out infinite alternate}
  }

  /* посадка: короткое сжатие 1.02 → 1 и вспышка синей кромки */
  @keyframes mfly-land{
    0%{transform:scale(1.02);box-shadow:0 0 0 1.5px #5B8DEF,0 0 26px -2px rgb(91 141 239 / .7)}
    100%{transform:none;box-shadow:0 18px 36px -14px rgb(0 0 0 / .75),0 0 0 1px rgb(255 255 255 / .06)}
  }
  .mflow.is-landed .mfly-card .job{animation:mfly-land .5s var(--m-ease) both}

  /* закрытые строки в телефоне съезжают вниз, когда карточка села */
  body.v-c .feed-row{transition:opacity .3s ease-out,transform .4s var(--m-ease)}
  body.v-c .feed-old{transition:transform .4s var(--m-ease)}
  body.v-c .feed::before{transition:height .4s var(--m-ease)}

  /* Параллакса на телефоне нет ни при какой настройке: home-motion.js двигает
     снимки и при «меньше движения», здесь сдвиг гасится. */
  body.v-c .chapter .shot .ph{translate:none!important}
}