/* home.css — каркас новой главной. Три варианта: body.v-a / v-b / v-c.
   Цвета и шрифты у всех трёх одинаковые (Reference.md/DESIGN-SYSTEM.md, раздел 2).
   Различается только композиция: сетка, ритм разделов, место заголовков.
   Снимков здесь нет — они отдельным шагом. Движение есть только у варианта C,
   в самом конце файла, и всё оно под body.v-c. */

/* ======================================================================
   РАЗМЕРЫ — одни на все палитры.
   --r и --bw держат обещание «один радиус и одна толщина линии»:
   все карточки, коробки и рамки снимков берут их и только их.
   ====================================================================== */
:root{
  --maxw:1280px;
  --gut:64px;
  --gap:24px;
  --sec:140px;
  --r:14px;        /* ЕДИНСТВЕННЫЙ радиус: карточки, коробки, рамки снимков */
  --r-pill:999px;  /* капсулы: кнопки, чипы, метки фирм */
  --r-panel:28px;  /* полоса сцены — не карточка, а панель во всю ширину */
  --bw:1px;        /* ЕДИНСТВЕННАЯ толщина линии */
  --on-brand:#140A00;  /* текст на оранжевой заливке */

  /* заголовочный шрифт: A по умолчанию, B/C/D переключает панель (body.f-b …) */
  --display:"Onest","Helvetica Neue",Arial,sans-serif;
  --w1:300;   /* тонкое начертание */
  --w2:800;   /* плотное начертание */
  --i2:normal;
  --ls-xl:-.04em;
  --ls-l:-.03em;
  --ls-h2:-.02em;
  --hs:1;     /* множитель кегля заголовков: 0.85 / 1 / 1.15 */
}

/* ======================================================================
   ТЕМЫ. Атрибут data-theme на <html>: dark (по умолчанию) и light.
   Тёмная — «тёплый графит»: не чёрная, а тёплая тёмно-коричневая.
   Светлая — песочно-кремовая; тёмными в ней остаются ровно два места.

   В каждой теме три набора:
     основной  (--ink … --muted-2) — страница;
     --isle-*  — ТЁМНЫЙ ОСТРОВ: сцена первого экрана. Она остаётся тёмной
                 и в светлой теме, и от этого звучит сильнее;
     --sec-*   — РАЗДЕЛ ДРУГОГО ТОНА. В тёмной теме их три (деньги,
                 «что внутри», цена) и они светлые; в светлой теме
                 такой раздел один — деньги, и он наоборот тёмный.

   --brand     — оранжевый как заливка (кнопка). Всегда #FF6D00.
   --brand-ink — оранжевый как ТЕКСТ. На светлом фоне #FF6D00 даёт 2,5:1
                 и читается плохо, поэтому там он #B04600 — тот же тон, глубже.
   ====================================================================== */
:root,
:root[data-theme="dark"]{
  --ink:#191412;
  --graphite:#221B17;
  --ink-2:#292019;
  --line:#3B2F27;
  --line-soft:#251E19;
  --text:#F6F0E8;
  --body:#D0C5B8;
  --muted:#9C8E80;
  --muted-2:#7C6F63;
  --brand:#FF6D00;
  --brand-ink:#FF6D00;

  --isle:#221B17;      --isle-2:#2A2119;    --isle-line:#3B2F27;
  --isle-text:#F6F0E8; --isle-body:#D0C5B8; --isle-muted:#9C8E80;
  --isle-lift:#2C241D;   /* полоса сцены: на тон выше острова, иначе техника в ней тонет */
  --metal:#6A635B;       /* светлый край корпуса ноутбука и телефона */
  --metal-2:#4C4640;     /* тот же алюминий в тени */

  --sec-bg:#F0E9DD;    --sec-2:#E6DDCE;     --sec-line:#D9CFC0;
  --sec-text:#241D16;  --sec-body:#4C4239;  --sec-muted:#7C6E60;  --sec-brand:#B04600;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --ink:#F4EFE7;
  --graphite:#EBE4D8;
  --ink-2:#EBE4D8;
  --line:#D7CDBD;
  --line-soft:#E4DCD0;
  --text:#1B1713;
  --body:#4A423A;
  --muted:#6E655B;
  --muted-2:#7E7468;
  --brand:#FF6D00;
  --brand-ink:#B04600;

  --isle:#14110E;      --isle-2:#1F1B16;    --isle-line:#302A23;
  --isle-text:#F5F0E8; --isle-body:#CAC1B6; --isle-muted:#8F8478;
  --isle-lift:#221D18;
  --metal:#6A635B;
  --metal-2:#4C4640;

  --sec-bg:#14110E;    --sec-2:#1F1B16;     --sec-line:#302A23;
  --sec-text:#F5F0E8;  --sec-body:#CAC1B6;  --sec-muted:#8F8478;  --sec-brand:#FF6D00;
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;
  font-size:19px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--brand);color:var(--on-brand)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display)}

/* переход по якорю из шапки («Price» и остальные): раздел не должен уехать
   под липкую шапку, поэтому у целей якоря свой верхний запас */
:target,.chapter,.langs{scroll-margin-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

main{position:relative}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;align-items:start}

/* ---------- полоска A · B · C (только на время подбора) ---------- */
.abc{
  height:28px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  background:var(--graphite);border-bottom:var(--bw) solid var(--line-soft);
}
.abc span{margin-right:10px}
.abc a{text-decoration:none;color:var(--muted);padding:4px 8px}
.abc a:hover{color:var(--text)}
.abc a[aria-current]{color:var(--text);border-bottom:var(--bw) solid var(--brand)}
.abc i{font-style:normal;color:var(--muted)}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:var(--bw) solid var(--line-soft);
}
.top .wrap{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;padding-block:16px;gap:10px 18px}
.top nav{justify-self:center}
.mark{font-family:var(--display);font-weight:var(--w2);font-size:22px;letter-spacing:-.02em;text-decoration:none;justify-self:start;white-space:nowrap}
.mark i{font-style:normal;color:var(--brand)}
.top nav{display:flex;align-items:center;gap:28px;font-size:14px}
.top nav a{color:var(--muted);text-decoration:none;padding-block:6px}
.top nav a:hover{color:var(--text)}
.top .write{
  justify-self:end;color:var(--text);text-decoration:none;font-size:14px;white-space:nowrap;
  padding:9px 18px;border:var(--bw) solid var(--line);border-radius:var(--r-pill);
  transition:border-color .18s ease-out,background-color .18s ease-out;
}
.top .write:hover{border-color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent)}

/* ---------- типографика ---------- */
.kicker,.cap .l{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;font-weight:400;
}
.cap{display:flex;align-items:center;gap:16px;min-width:0}
.cap .t{
  font-family:var(--display);font-weight:var(--w2);font-size:13px;color:var(--brand-ink);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.cap .rule{flex:1;height:1px;background:var(--line)}

h1{
  font-weight:var(--w1);
  font-size:calc(clamp(56px,9vw,132px) * var(--hs));
  line-height:.92;letter-spacing:var(--ls-xl);
  text-wrap:balance;
}
h1 .l2{display:block;font-weight:var(--w2);font-style:var(--i2)}
.mani{
  font-family:var(--display);font-weight:var(--w1);
  font-size:calc(clamp(40px,5.5vw,76px) * var(--hs));
  line-height:1;letter-spacing:var(--ls-l);text-wrap:balance;margin:0;
}
.mani b{font-weight:var(--w2);font-style:var(--i2)}
h2{
  font-weight:var(--w1);
  font-size:calc(clamp(28px,3.4vw,44px) * var(--hs));
  line-height:1.1;letter-spacing:var(--ls-h2);text-wrap:balance;
}
h2 b,h1 b{font-weight:var(--w2);font-style:var(--i2)}
h3{font-weight:var(--w2);font-style:var(--i2);font-size:22px;line-height:1.2;letter-spacing:-.01em;margin-bottom:14px}
/* Крупное число встаёт на ту же ступень, что час раздела (Display L).
   Было 96 против 76 — две почти одинаковые величины рядом читались как сбой.
   Множитель --hs тут раньше не применялся, теперь шкала двигается целиком. */
.num{
  font-family:var(--display);font-weight:var(--w1);
  font-size:calc(clamp(40px,5.5vw,76px) * var(--hs));line-height:1;letter-spacing:var(--ls-l);
  font-variant-numeric:tabular-nums;
}
.num + .kicker{margin-top:14px}

.copy p{color:var(--body);max-width:46ch;margin-bottom:18px}
.copy p:last-child{margin-bottom:0}
.lede{color:var(--body);max-width:46ch}
.lede b{font-weight:500;color:var(--text)}   /* «текстура внутри абзаца», один раз на странице */
.pin{
  margin-top:28px;padding-left:18px;border-left:var(--bw) solid var(--brand);
  color:var(--text);max-width:40ch;font-size:17px;line-height:1.5;
}
.copy .pin{color:var(--text)}

.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:15px;
  padding:15px 26px;border-radius:var(--r-pill);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:var(--bw) solid transparent;line-height:1.2;
  transition:background-color .18s ease-out,border-color .18s ease-out,box-shadow .22s ease-out,transform .16s ease-out;
}
/* Главная кнопка: мягкая тень своего же цвета — так она заметна на любом фоне,
   и на светлой палитре тоже. Наведение светлее и тень глубже, нажатие тень убирает. */
.btn.primary{
  background:var(--brand);color:var(--on-brand);
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--brand) 75%,transparent);
}
.btn.primary:hover{
  background:color-mix(in srgb,var(--brand) 86%,#FFFFFF);
  box-shadow:0 14px 28px -12px color-mix(in srgb,var(--brand) 82%,transparent);
}
.btn.primary:active{box-shadow:0 3px 9px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn.ghost{border-color:var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent)}

/* ---------- заглушки снимков ---------- */
.ph{
  width:100%;background:var(--isle-2);border:var(--bw) solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;text-align:center;padding:12px;
  color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;
}
.ph-board{aspect-ratio:2880/1800}
.ph-phone{aspect-ratio:750/1624;border-radius:var(--r)}
.ph-report{aspect-ratio:2880/1800}
.job{
  background:var(--isle-2);border:var(--bw) solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;aspect-ratio:2.6;
  color:var(--muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.shot{position:relative;min-width:0}
/* Карточка-подпись. Стоит СПРАВА ОТ снимка, не на нём: под ней пусто (текст раздела
   кончается выше), а поля и кнопки на finish-2.webp остаются видны целиком.
   Сдвиг вправо равен ширине карточки, поэтому её левый край совпадает с правым краем
   телефона и не наезжает ни на пиксель снимка. */
.over{
  position:absolute;right:-86%;bottom:6%;width:86%;
  background:color-mix(in srgb,var(--graphite) 86%,transparent);
  backdrop-filter:blur(10px);
  border:var(--bw) solid var(--line);border-radius:var(--r);padding:18px 20px;
  font-size:14px;line-height:1.5;color:var(--text);
}

/* ======================================================================
   АТМОСФЕРНЫЕ ФОТОГРАФИИ (media/rabota/). Оба кадра — украшение, не содержание:
   ПРАВИЛО: фотография живёт только фоном за сценой или полосой во всю ширину.
   Рядом со снимком программы фотографии не бывает (DESIGN-SYSTEM.md, раздел 8).
   подключены фоном в CSS и скрыты от читалки через aria-hidden в html.
   Пока файла нет, фон просто не рисуется — вёрстка от этого не ломается.
   Снимков программы это не касается: они остаются тегом <img> с alt.
   ====================================================================== */

/* --- A. фон первого экрана: мастерская в сумерках ---
   Снимок лежит на 35 %, поверх — заливка градиентом: у слов она сплошная,
   поэтому контраст текста там ровно такой же, как на голом фоне, а фотография
   видна только за сценой, где мелкого текста нет. */
.atmo-a{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.atmo-a::before,.atmo-a::after{content:"";position:absolute;inset:0}
.atmo-a::before{
  background:url("media/rabota/atmo-a.webp") center/cover no-repeat;
  opacity:.35;will-change:transform;
}
.atmo-a::after{
  background:linear-gradient(to bottom,
    var(--ink) 0%,
    var(--ink) 48%,          /* весь текст первого экрана кончается на 45 % — он на сплошной заливке */
    color-mix(in srgb,var(--ink) 55%,transparent) 66%,
    color-mix(in srgb,var(--ink) 28%,transparent) 86%,
    var(--ink) 100%);
}
/* Запасной путь вместо видео: медленный наезд со сдвигом, круг 28 секунд.
   При «меньше движения» в системе не запускается вовсе. */
@media (prefers-reduced-motion:no-preference){
  .atmo-a::before{animation:atmo-drift 14s ease-in-out infinite alternate}
}
@keyframes atmo-drift{
  from{transform:scale(1.06) translate3d(-1.2%,.9%,0)}
  to{transform:scale(1.15) translate3d(1.2%,-.9%,0)}
}

/* В светлой палитре фотографии меняются на дневные: тёмная мастерская под
   кремовым первым экраном читалась бы грязью. Кадры сняты ровно под неё. */
/* В светлой теме фотографии меняются на дневные: тёмная мастерская под
   кремовым первым экраном читалась бы грязью. Кадры сняты ровно под неё. */
:root[data-theme="light"] .atmo-a::before{background-image:url("media/rabota/light-a.webp")}
:root[data-theme="light"] .fin-bg{background-image:url("media/rabota/light-c.webp")}

/* ======================================================================
   ПЕРВЫЙ ЭКРАН — ПРОЛЁТ КАДРАМИ.
   Рельса .film-rail даёт ход прокрутки, сцена на ней прилипает к верху окна.
   Кадры рисует home-film.js в холст; под холстом всегда лежит постер, поэтому
   белой вспышки не бывает ни на загрузке, ни при выключенном скрипте.
   Нет скрипта или кадры не пришли — рельса остаётся высотой в один экран,
   и первый экран просто фотография. Высоту хода задаёт --film-scrub.
   ====================================================================== */
.film{
  position:relative;
  /* Кадр снят в сумерках и остаётся тёмным в ОБЕИХ темах, поэтому слова
     поверх него берут светлые тона острова, а не тона страницы. */
  --text:var(--isle-text);
  --body:var(--isle-body);
  --muted:var(--isle-muted);
  --film-scrub:300vh;
}
.film-rail{height:100svh}
html.m-film .film-rail{height:calc(100svh + var(--film-scrub))}

.film-stage{
  position:sticky;top:0;
  height:100svh;overflow:hidden;isolation:isolate;
  background:#100C09 url("media/hero/hero-poster.webp") center/cover no-repeat;
}
.film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Затемнение. Сверху плотное — там лежат слова и там же в середине пролёта
   проходит светлая стена дома; к низу почти сходит на нет, чтобы картинка
   была видна; у самого низа опять темнеет и переходит в фон страницы. */
.film-veil{
  position:absolute;inset:0;
  /* Общий тон: темнее вверху и у самого низа, светлее посередине. */
  background:
    linear-gradient(180deg,
      rgb(14 10 8 / .34) 0%,
      rgb(14 10 8 / .18) 40%,
      rgb(14 10 8 / .04) 66%,
      rgb(14 10 8 / .10) 86%,
      rgb(14 10 8 / .44) 100%);
}
/* Тёмное пятно в левом верхнем углу — ровно под словами. Тень эллипсом,
   а не полосой: полоса гасила бы и низ кадра, где в конце стоит машина.
   Нужно оно только словам, поэтому и гаснет вместе с ними (--copy-o). */
.film-veil::before{
  content:"";position:absolute;inset:0;
  opacity:var(--copy-o,1);
  background:
    radial-gradient(128% 74% at 4% 2%,
      rgb(14 10 8 / .70) 0%,
      rgb(14 10 8 / .46) 40%,
      rgb(14 10 8 / .12) 68%,
      transparent 84%);
}

/* Слова. Сидят в верхней трети: блок прижат к верху и растёт ВНИЗ сам,
   высота ему нигде не задана. Итальянский и румынский длиннее английского
   примерно на пятую часть — они просто занимают больше строк. */
.film-copy{
  position:absolute;left:0;right:0;top:0;
  /* Отступ сверху считается от ПРИЛИПШЕЙ сцены: когда она встала к верху окна,
     шапка (76 px на компьютере, 102 px на телефоне) лежит поверх неё, и меньший
     отступ спрятал бы под шапкой первую строку подписи. */
  padding-top:clamp(104px,12vh,150px);
  color:var(--text);
  text-shadow:0 2px 22px rgb(0 0 0 / .55);
}
.film-copy .kicker{color:var(--isle-body);margin-bottom:22px}
.film-copy h1{font-size:calc(clamp(40px,6.4vw,92px) * var(--hs))}
.film-copy .lede{color:var(--isle-body)}
.film-copy .lede b{color:var(--isle-text)}
/* Ссылка-обводка на фотографии: линия острова слишком тёмная, берём светлую. */
.film-copy .btn.ghost{
  border-color:color-mix(in srgb,var(--isle-text) 40%,transparent);
  color:var(--isle-text);
  background:color-mix(in srgb,#0E0A08 34%,transparent);
  backdrop-filter:blur(6px);
  text-shadow:none;
}
.film-copy .btn.ghost:hover{
  border-color:var(--isle-text);
  background:color-mix(in srgb,#0E0A08 52%,transparent);
}
.film-copy .btn.primary{text-shadow:none}
/* Последнюю треть пролёта слова гаснут: --copy-o и --copy-y ставит home-film.js
   по доле хода. Прозрачность — на каждом куске, а не на всём блоке: у кнопки-
   обводки размытие фона, и общая прозрачность предка выключила бы его рывком.
   Погасли совсем (is-clear) — прячутся и от мыши с клавиатурой. */
.film-copy .kicker,
.film-copy h1,
.film-copy .lede,
.film-copy .btn{
  opacity:var(--copy-o,1);
  translate:0 var(--copy-y,0px);
}
.film-stage.is-clear .film-copy{visibility:hidden}
/* Короткая строка вместо абзаца и подсказка «листайте» — только на телефоне
   (home-mobile.css). На компьютере их нет. */
.film-copy .short,
.film-hint{display:none}

/* ---------- первый экран ---------- */
.hero{padding-block:96px 0;overflow-x:clip;position:relative;isolation:isolate}
.hero .kicker{margin-bottom:28px}
.hero .sub .lede{margin-bottom:40px}
/* Сцена первого экрана — ТЁМНЫЙ ОСТРОВ. В светлой палитре она остаётся тёмной,
   и снимки программы на ней звучат сильнее. Перекрашивается переменными:
   всё внутри — карточки заявок, метки фирм, линии — берёт тон отсюда. */
.scene{position:relative;min-width:0}
body.v-c .hero .scene{
  --ink:var(--isle);
  --graphite:var(--isle-2);
  --ink-2:var(--isle-2);
  --line:var(--isle-line);
  --line-soft:var(--isle-line);
  --text:var(--isle-text);
  --body:var(--isle-body);
  --muted:var(--isle-muted);
  /* Тон выше острова, а за ноутбуком и телефоном — два тёплых пятна: без них
     серый алюминий сливается с полосой и техника в ней тонет. */
  background:
    radial-gradient(58% 104% at 27% 52%, color-mix(in srgb,var(--brand) 13%,transparent) 0%, transparent 70%),
    radial-gradient(46% 92% at 84% 46%, color-mix(in srgb,#FFC489 12%,transparent) 0%, transparent 68%),
    var(--isle-lift);
}
.scene .jobs{display:grid;gap:14px}

/* ---------- разделы ---------- */
.chapter{padding-block:var(--sec);border-top:var(--bw) solid var(--line-soft);overflow-x:clip}
/* Раздел другого тона. Перекрашивается ТОЛЬКО переменными: всё внутри —
   подписи, линии, коробки, час — подхватывает нужный тон само, без единого
   отдельного правила на цвет. В палитре B таких разделов три, и они
   чередуются с тёмными. «Светлый раздел: Выкл» в панели просто снимает правило. */
.chapter.cream,
:root[data-theme="dark"] #inside,
:root[data-theme="dark"] #price{
  --ink:var(--sec-bg);
  --graphite:var(--sec-2);
  --ink-2:var(--sec-2);
  --line:var(--sec-line);
  --line-soft:var(--sec-line);
  --text:var(--sec-text);
  --body:var(--sec-body);
  --muted:var(--sec-muted);
  --muted-2:var(--sec-muted);
  --brand-ink:var(--sec-brand);
  background:var(--sec-bg);
  color:var(--sec-text);
  border-top:0;
}

.chapter .cap{margin-bottom:56px}
.chapter .h{margin-bottom:28px}
.shot .ph{margin:0}

.nums{display:flex;flex-wrap:wrap;gap:40px 56px}
.nums > div{min-width:0}

/* строки списка — линиями, не карточками */
.rows{margin:0;border-top:var(--bw) solid var(--line)}
.rows .row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:var(--bw) solid var(--line)}
.rows dt{font-family:var(--display);font-weight:var(--w2);font-style:var(--i2);font-size:17px;letter-spacing:-.01em;color:var(--text)}
.rows dd{margin:0;color:var(--body);font-size:17px;line-height:1.55}

/* три колонки «как вы устроены» (#who) */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.cols > div{border-top:var(--bw) solid var(--line);padding-top:24px}
.cols p{color:var(--body);font-size:17px;line-height:1.55}

/* ---------- цена ----------
   Раздел на главной, отдельной страницы нет. Сверху вниз: подпись, заголовок,
   две короткие строки, счёт строками (сколько мастеров → сколько в месяц),
   проба с кнопкой, «всё включено», вопросы. На компьютере счёт и проба —
   правая колонка рядом с заголовком. Оранжевое в разделе одно — кнопка.
   Кнопок «купить» и форм нет — только mailto. Счёт считает home-price.js. */
.price-lede{max-width:54ch}

/* счёт — строками, как в приложении, не карточкой; оранжевого в нём нет */
.bill-ask{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding-bottom:22px}
.bill-q{min-width:0}
.bill-h{
  font-family:var(--display);font-weight:var(--w2);font-style:var(--i2);
  font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--text);
}
.bill-hint{margin-top:4px;color:var(--muted);font-size:14px;line-height:1.45}

/* «−» и «+»: круглые кнопки, знак нарисован линиями — по центру круга
   ровно, а не по метрикам шрифта. На краю (1 или 30) кнопка тускнеет,
   но остаётся в фокусе: aria-disabled, а не disabled. */
.step{display:flex;align-items:center;gap:6px;flex:none}
.step-b{
  appearance:none;margin:0;padding:0;cursor:pointer;flex:none;position:relative;
  width:44px;height:44px;border-radius:50%;background:none;color:var(--text);
  border:var(--bw) solid color-mix(in srgb,var(--text) 34%,transparent);
  touch-action:manipulation;
  transition:border-color .18s ease-out,background-color .18s ease-out,opacity .18s ease-out;
}
.step-b::before,.step-plus::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;
  background:currentColor;border-radius:1px;
}
.step-plus::after{transform:rotate(90deg)}
.step-b[aria-disabled="true"]{opacity:.32;cursor:default}
@media (hover:hover){
  .step-b:not([aria-disabled="true"]):hover{border-color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
}
.step-n{
  min-width:2.2ch;text-align:center;
  font-family:var(--display);font-weight:var(--w1);font-size:32px;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text);
}

.bill-rows{margin:0;border-top:var(--bw) solid var(--line)}
.bill-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:var(--bw) solid var(--line)}
.bill-row dt{min-width:0;font-size:17px;line-height:1.4;color:var(--text)}
.bill-row dd{margin:0;flex:none;text-align:right;font-size:17px;line-height:1.4;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.bill-row dd.free{color:var(--muted)}
.bill-x{margin-left:8px;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* итог: подпись капсом слева, крупная тонкая сумма справа */
.bill-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:22px}
.bill-sum{
  font-family:var(--display);font-weight:var(--w1);
  font-size:calc(clamp(44px,4.4vw,60px) * var(--hs));line-height:1;letter-spacing:-.03em;
  color:var(--text);white-space:nowrap;
}
.bill-note{color:var(--muted);font-size:14px;line-height:1.5}
.bill-total + .bill-note{margin-top:14px}
.bill-note + .bill-note{margin-top:2px}

/* проба: не коробка, а строки под счётом; кнопка — единственное оранжевое */
.try{margin-top:40px}
.try h3{font-size:20px;line-height:1.3;margin-bottom:8px}
.try p{color:var(--body);font-size:15px;line-height:1.55;max-width:52ch}
.try .btn{margin-top:22px}

/* «всё включено»: восемь пунктов с галочкой в две колонки */
.incl .kicker,.faq .kicker{margin-bottom:18px}
.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--gap);list-style:none;margin:0;padding:0}
.ticks li{position:relative;min-width:0;padding-left:24px;font-size:15px;line-height:1.45;color:var(--body)}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.38em;width:10px;height:5px;
  border-left:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);
}
.incl-note{margin-top:20px;color:var(--muted);font-size:14px;line-height:1.5}

/* вопросы: <details>, свёрнуты, справа «+»; открытый — «−». Без скрипта. */
.faq-col{border-top:var(--bw) solid var(--line)}
.faq details{border-bottom:var(--bw) solid var(--line)}
.faq summary{
  display:block;position:relative;list-style:none;cursor:pointer;
  padding:17px 40px 17px 0;font-size:17px;line-height:1.4;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:4px;top:calc(17px + .7em);width:13px;height:1.5px;margin-top:-.75px;
  background:var(--muted);border-radius:1px;transition:transform .2s ease-out;
}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:none}
.faq summary:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media (hover:hover){
  .faq summary:hover::before,.faq summary:hover::after{background:var(--text)}
}
.faq details p{padding:0 40px 20px 0;color:var(--body);font-size:16px;line-height:1.55;max-width:60ch}

/* цены вариантов A и B — две строки-заглушки, цифр нет */
.price-rows{border-top:var(--bw) solid var(--line)}
.price-rows .row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 0;border-bottom:var(--bw) solid var(--line)}
.price-rows .row span:first-child{font-family:var(--display);font-weight:var(--w2);font-style:var(--i2);font-size:20px;letter-spacing:-.01em}
.price-rows .row span:last-child{font-family:var(--display);font-weight:var(--w1);font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;color:var(--muted);text-align:right}
.trial{margin-top:24px;color:var(--muted);font-size:15px}

/* языки — одна строка на весь экран */
.langs{padding-block:200px;border-top:var(--bw) solid var(--line-soft)}
.langs .kicker{margin-bottom:40px}
.set{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;
  font-family:var(--display);font-weight:var(--w1);
  font-size:calc(clamp(32px,4.4vw,64px) * var(--hs));line-height:1;letter-spacing:-.02em;
}

/* ---------- подвал ---------- */
footer{border-top:var(--bw) solid var(--line-soft);padding-block:56px 40px;font-size:14px;color:var(--muted)}
.fgrid{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
footer .mark{font-size:20px;color:var(--text)}
footer .mail{display:block;margin-top:10px;color:var(--text);text-decoration:none}
.flinks{display:flex;gap:22px;flex-wrap:wrap}
.flinks a{color:var(--muted);text-decoration:none}
.flinks a:hover{color:var(--text)}
.legal{margin-top:40px;line-height:1.7;color:var(--muted)}
.legal b{font-weight:500;color:var(--text)}

/* ======================================================================
   ВАРИАНТ A — «лестница»: текст узкой колонкой слева, снимок справа
   и уходит за правый край окна. Пары 5/7.
   ====================================================================== */
@media (min-width:901px){
  .breakout-r{margin-right:min(calc(-1 * var(--gut)), calc((var(--maxw) - 100vw) / 2 - var(--gut)))}

  .v-a .hero .kicker{grid-area:1/1/2/13}
  .v-a .hero h1{grid-area:2/1/3/13}
  .v-a .hero .sub{grid-area:3/1/4/6;padding-top:48px}
  .v-a .hero .scene{grid-area:3/6/4/13;margin-top:48px;aspect-ratio:4/3}
  .v-a .hero .scene .ph-board{position:absolute;left:0;top:0;width:74%}
  .v-a .hero .scene .ph-phone{position:absolute;right:0;bottom:0;width:26%}
  .v-a .hero .scene .jobs{position:absolute;left:49%;top:54%;width:20%}
  .v-a h1 .l2{padding-left:1ch}

  .v-a .chapter .cap{grid-area:1/1/2/13}
  .v-a .chapter .h{grid-area:2/1/3/6}
  .v-a .chapter .copy{grid-area:3/1/4/6}
  .v-a #board .shot{grid-area:2/6/4/13}
  .v-a #field .shot{grid-area:2/1/4/6;padding-right:16%}
  .v-a #field .shot .ph-phone{width:62%}
  .v-a #field .h{grid-area:2/7/3/13}
  .v-a #field .copy{grid-area:3/7/4/13}
  .v-a #money .h{grid-area:2/1/3/6}
  .v-a #money .mani{grid-area:3/1/4/11;margin-top:48px}
  .v-a #money .copy{grid-area:4/8/5/13;margin-top:64px}
  .v-a #month .nums{grid-area:2/7/4/13;padding-top:8px}
  .v-a #month .shot{grid-area:4/1/5/13;margin-top:80px}
  .v-a #inside .h{grid-area:2/1/3/6}
  .v-a #inside .rows{grid-area:2/6/3/13}
  .v-a #who .h{grid-area:2/1/3/8}
  .v-a #who .cols{grid-area:3/1/4/13;margin-top:40px}
  .v-a #price .h{grid-area:2/1/3/6}
  .v-a #price .price-rows{grid-area:2/6/3/13}
  .v-a #price .trial{grid-area:3/6/4/13}
  .v-a .langs .kicker{grid-area:1/1/2/13}
  .v-a .langs .set{grid-area:2/1/3/13}

/* ======================================================================
   ВАРИАНТ B — «плакат»: заголовок сдвинут вправо на 8 колонок,
   снимок во всю ширину под ним, текст узкой колонкой под снимком.
   Второй ряд заголовка сдвинут на 2 знака (ref-2).
   ====================================================================== */
  .v-b .hero .kicker{grid-area:1/1/2/13}
  .v-b .hero h1{grid-area:2/1/3/13}
  .v-b h1 .l2{padding-left:2.2ch}
  .v-b .hero .sub{grid-area:3/8/4/13;padding-top:40px}
  .v-b .hero .scene{grid-area:4/1/5/13;margin-top:96px;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap)}
  .v-b .hero .scene .ph-board{width:58%}
  .v-b .hero .scene .jobs{width:14%;margin-bottom:12%}
  .v-b .hero .scene .ph-phone{width:19%}

  .v-b .chapter .cap{grid-area:1/1/2/13}
  .v-b .chapter .h{grid-area:2/5/3/13}
  .v-b #board .shot{grid-area:3/1/4/13;margin-top:40px}
  .v-b #board .copy{grid-area:4/5/5/10;margin-top:56px}
  .v-b #field .shot{grid-area:3/1/4/5;margin-top:40px}
  .v-b #field .copy{grid-area:3/6/4/11;align-self:center}
  .v-b #money .mani{grid-area:3/2/4/13;text-align:right;margin-top:48px}
  .v-b #money .copy{grid-area:4/8/5/13;margin-top:64px}
  .v-b #month .copy{grid-area:3/5/4/10}
  .v-b #month .nums{grid-area:4/1/5/13;margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
  .v-b #month .nums > div{border-top:var(--bw) solid var(--line);padding-top:24px}
  .v-b #month .shot{grid-area:5/1/6/13;margin-top:72px}
  .v-b #inside .rows{grid-area:3/5/4/13;margin-top:24px}
  .v-b #who .cols{grid-area:3/1/4/13;margin-top:40px}
  .v-b #who .cols > div:nth-child(2){margin-top:64px}
  .v-b #who .cols > div:nth-child(3){margin-top:128px}
  .v-b #price .price-rows{grid-area:3/5/4/13;margin-top:24px}
  .v-b #price .trial{grid-area:4/5/5/13}
  .v-b .langs .kicker{grid-area:1/1/2/13}
  .v-b .langs .set{grid-area:2/1/3/13;justify-content:flex-end;gap:16px 64px}

/* ======================================================================
   ВАРИАНТ C — «позвоночник»: слева липкая колонка на 4 с временем дня
   крупно, справа 8 колонок содержимого. Сцена первого экрана идёт
   первой, на графитовой полосе; слова под ней.
   ====================================================================== */
  /* Слова лежат на пролёте, сеткой той же, что была у первого экрана: подпись
     во всю ширину, заголовок на 10 колонок, абзац и кнопки в один ряд под ним. */
  .v-c h1 .l2{padding-left:1ch}
  .v-c .film-copy .kicker{grid-area:1/1/2/13}
  .v-c .film-copy h1{grid-area:2/1/3/11}
  .v-c .film-copy .sub{grid-area:3/1/4/13;display:grid;grid-template-columns:subgrid;column-gap:var(--gap);padding-top:36px}
  .v-c .film-copy .sub .lede{grid-column:1/6;margin-bottom:0}
  .v-c .film-copy .sub .cta{grid-column:7/13;align-self:start}

  .v-c .hero{padding-top:120px}
  .v-c .hero .scene-rail{grid-area:1/1/2/13}
  .v-c .hero .scene{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap);
    border:var(--bw) solid var(--line-soft);border-radius:var(--r-panel);padding:40px}
  .v-c .hero .scene .ph-board{width:58%}
  .v-c .hero .scene .jobs{width:14%;margin-top:10%}
  .v-c .hero .scene .phone{width:19%}

  .v-c .chapter .cap{grid-area:1/1/2/5;position:sticky;top:104px;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:0}
  .v-c .chapter .cap .t{font-weight:var(--w1);font-size:calc(clamp(40px,5.5vw,76px) * var(--hs));line-height:1;letter-spacing:var(--ls-l)}
  .v-c .chapter .cap .rule{display:none}
  .v-c .chapter .h{grid-area:1/5/2/13}
  .v-c #board .shot{grid-area:2/5/3/13;margin-top:40px}
  .v-c #board .copy{grid-area:3/5/4/10;margin-top:56px}
  .v-c #field .shot{grid-area:2/5/3/8;margin-top:40px}
  .v-c #field .copy{grid-area:2/9/3/13;margin-top:40px;align-self:start}
  .v-c #money .mani{grid-area:2/1/3/13;margin-top:64px}
  .v-c #money .copy{grid-area:3/5/4/10;margin-top:64px}
  .v-c #month .copy{grid-area:2/5/3/10}
  .v-c #month .shot{grid-area:3/5/4/13;margin-top:64px}
  .v-c #month .nums{grid-area:4/5/5/13;margin-top:56px}
  .v-c #inside .rows{grid-area:2/5/3/13;margin-top:24px}
  .v-c #who .cols{grid-area:2/5/3/13;margin-top:40px}
  /* Цена — две колонки. Слева подпись, заголовок, две строки и «всё включено»;
     справа счёт и проба. Правая колонка лежит на строках 1–5, и пятая строка
     сетки гибкая (1fr): высокий счёт растягивает только её, а строки слева
     остаются высотой по своему тексту. Вопросы — ниже, на всю ширину, двумя
     колонками под теми же. Подпись здесь не липкая и с линией в строку. */
  .v-c #price .g{grid-template-rows:auto auto auto auto 1fr auto}
  .v-c #price .cap{grid-area:1/1/2/6;position:static;flex-direction:row;align-items:center;gap:16px;margin-bottom:36px}
  body.v-c #price .cap .rule{display:block;position:static;flex:1;height:1px}
  .v-c #price .h{grid-area:2/1/3/6}
  .v-c #price .price-lede{grid-area:3/1/4/6}
  .v-c #price .incl{grid-area:4/1/5/6;margin-top:56px}
  .v-c #price .price-side{grid-area:1/7/6/13}
  .v-c #price .try .btn{width:100%}
  .v-c #price .faq{grid-area:6/1/7/13;margin-top:96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .v-c #price .faq .kicker{grid-area:1/1/2/6}
  .v-c #price .faq-col{grid-row:2}
  .v-c #price .faq-col:first-of-type{grid-column:1/6}
  .v-c #price .faq-col:last-of-type{grid-column:7/13}
  .v-c .pin{border-left-color:var(--line)}   /* в C оранжевое на экране — время дня */
  .v-c .langs .kicker{grid-area:1/1/2/13}
  .v-c .langs .set{grid-area:2/1/3/13}
}

/* ---------- телефон: всё в одну колонку ---------- */
@media (max-width:900px){
  :root{--gut:20px;--sec:80px}
  body{font-size:17px}
  /* На узком экране меню прячется, а переключатели уезжают ровным рядом
     под шапку: первая строка — марка и почта, вторая — тема и язык. */
  .top .wrap{grid-template-columns:1fr auto;padding-block:12px;gap:10px 12px}
  .top .mark{grid-area:1/1/2/2}
  .top .write{grid-area:1/2/2/3;justify-self:end;padding:7px 14px;font-size:13px}
  .top .tools{grid-area:2/1/3/3;justify-self:start}
  .top nav{display:none}
  .hero{padding-top:56px}
  .v-c .hero{padding-top:72px}
  .hero .g > *,.chapter .g > *,.langs .g > *,.film .g > *,.fin .g > *{grid-column:1/-1}
  /* Пролёт короче: на телефоне кадров вдвое меньше и ход в 300 vh был бы вязким. */
  .film{--film-scrub:210vh}
  .film-copy{padding-top:130px}
  .film-copy h1{font-size:calc(clamp(34px,10.5vw,54px) * var(--hs))}
  .film-copy .sub{padding-top:26px}
  .film-copy .cta{margin-top:26px}
  /* На узком экране слова занимают почти всю ширину — вместо пятна плотное
     затемнение сверху. Оно тоже только для слов и гаснет вместе с ними;
     остаётся лёгкий общий тон и переход в фон страницы у низа. */
  .film-veil{background:
    linear-gradient(180deg,
      rgb(14 10 8 / .30) 0%,
      rgb(14 10 8 / .14) 44%,
      rgb(14 10 8 / .06) 80%,
      rgb(14 10 8 / .48) 100%)}
  .film-veil::before{background:
    linear-gradient(180deg,
      rgb(14 10 8 / .50) 0%,
      rgb(14 10 8 / .50) 44%,
      rgb(14 10 8 / .18) 64%,
      transparent 80%)}
  .hero .sub{padding-top:36px}
  .hero .scene{margin-top:56px}
  .scene .ph-board{width:100%}
  .scene .jobs{grid-template-columns:repeat(3,1fr);margin:16px 0;width:100%}
  .scene .phone{width:48%}
  .v-c .hero .scene{border:var(--bw) solid var(--line-soft);border-radius:var(--r-panel);padding:20px}
  .chapter .cap{margin-bottom:36px}
  .chapter .h{margin-bottom:24px}
  .chapter .shot{margin-block:8px 32px}
  /* Карточка-подпись уходит ПОД снимок: поверх него она закрывала поля и кнопку.
     Зазор 52 px, а не 18: параллакс сдвигает снимок вниз на 40 px, и при меньшем
     зазоре снимок наезжал бы на подпись на подходе раздела к середине экрана. */
  #field .shot{padding-right:0}
  #field .shot .ph-phone{width:64%}
  .over{position:static;right:auto;bottom:auto;width:auto;margin-top:52px}
  .mani{margin-block:32px}
  #month .nums{margin-top:40px}
  #month .shot{margin-top:40px}
  .nums{gap:28px 40px}
  .rows .row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .cols{grid-template-columns:1fr;gap:32px}
  /* цена: всё в одну колонку по порядку разметки — счёт, проба, «всё
     включено», вопросы. Счёт не шире 600 px: на планшете сумма иначе
     уезжала бы от своей строки на всю ширину экрана. */
  #price .price-side{margin-top:40px;max-width:600px}
  #price .incl{margin-top:52px}
  #price .faq{margin-top:52px}
  .faq-col + .faq-col{border-top:0}
  .langs{padding-block:120px}
  .set{gap:12px 24px;justify-content:flex-start}
  h1,h2,.mani,.set,.num{overflow-wrap:anywhere}
  h1{font-size:calc(clamp(44px,13vw,56px) * var(--hs))}
}

/* ======================================================================
   ВАРИАНТ C — НАСТОЯЩИЕ СНИМКИ И СЦЕНА ПЕРВОГО ЭКРАНА.
   Всё под body.v-c: варианты A и B остаются с серыми заглушками.
   Снимок — это <img class="ph …">: рамка, скругление и класс те же, что у
   заглушки, поэтому параллакс и наведение из home-motion.js работают как были.
   ====================================================================== */

/* снимок: тёмный на тёмном — нужна рамка #272220 (--line) и мягкая тень.
   height:auto и aspect-ratio:auto — пропорции берутся из атрибутов width/height,
   страница не прыгает при загрузке; padding:0 — у заглушки была подпись внутри */
body.v-c img.ph{
  display:block;height:auto;aspect-ratio:auto;padding:0;
  box-shadow:0 20px 40px -20px rgb(0 0 0 / .6);
  font-size:13px;letter-spacing:0;text-transform:none;line-height:1.4;   /* alt-текст, если снимок не загрузился */
}
/* никогда не крупнее натуральной ширины файла — иначе замылится */
body.v-c .hero .scene .board{max-width:2880px}      /* board-3 */
body.v-c .hero .scene .phone{max-width:750px}       /* visit-3 */
body.v-c #board .shot .ph{max-width:2880px}         /* pool-3 */
body.v-c #field .shot .ph{max-width:750px}          /* finish-3 */
body.v-c #month .shot .ph-report{max-width:2880px}  /* report-3 */
body.v-c #month .shot .ph-phone{max-width:750px}    /* money-3 */

/* ---------- сцена первого экрана: карточки заявок и дорожки ---------- */
body.v-c .hero .scene .jobs{position:relative;z-index:2;display:block;margin:0}
body.v-c .tracks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:block}
body.v-c .tracks path,
body.v-c .tracks line{
  fill:none;stroke:var(--brand);stroke-width:1;stroke-dasharray:4 7;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.9;
}
body.v-c .tracks .dot{stroke-dasharray:none;stroke-width:5}   /* точки на концах: отрезки нулевой длины с круглыми концами */
body.v-c .tracks circle{fill:var(--brand)}

/* КАРТОЧКА ЗАЯВКИ — строка дня из приложения (features/visits/TimelineRow.tsx,
   снимок img/en/day-3.webp), один в один: плитка без рамки со скруглением 12,
   слева кромка 3; сверху диапазон времени и справа слово состояния; ниже имя
   (метки фирмы нет: эти три заявки — свои клиенты, без фирмы); ниже поломка.
   Цвета — тёмной темы приложения (theme/colors.ts), а не сайта: это кусок
   программы, он одинаков в обеих темах страницы.
   Все размеры — в пунктах приложения, умноженных на --u (сколько px в пункте):
   у летящей карточки 1 px, на узком экране меньше, в телефоне — доля ширины
   корпуса. Поэтому летящая карточка и строка в телефоне — одно и то же правило.
   Работа ещё не сделана: у такой заявки в приложении статус waiting, строка
   пишет ASSIGNED тихим серым (statusInk → paperTextMuted), а кромка синяя
   (edgeTint → ahead). Суммы нет — она бывает только у закрытой заявки. */
body.v-c .scene .job,
body.v-c .fr-card{
  --u:1px;
  --app-tile:#1A1512;--app-text:#F6F1EB;--app-muted:#9B8D82;--app-ahead:#5B8DEF;
  display:block;position:relative;overflow:hidden;text-align:left;
  place-items:normal;justify-items:stretch;   /* у общего .job центровка: без сброса строки ужимаются к середине */
  padding:calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  background:var(--app-tile);border:0;border-radius:calc(12 * var(--u));
  color:var(--app-text);font-family:"Onest","Golos Text",system-ui,sans-serif;
  letter-spacing:0;text-transform:none;line-height:1.2;
}
/* кромка слева — цветом состояния: у назначенной, но не начатой — синяя («впереди») */
body.v-c .scene .job::before,
body.v-c .fr-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:calc(3 * var(--u));
  background:var(--app-ahead);
}
body.v-c .j-top{display:flex;align-items:baseline;gap:calc(8 * var(--u));margin-bottom:calc(3 * var(--u))}
body.v-c .j-t{
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;
  font-weight:600;font-size:calc(13.5 * var(--u));letter-spacing:calc(-.2 * var(--u));
  line-height:normal;   /* как в приложении: у blockTime высота строки не задана */
  font-variant-numeric:tabular-nums;color:var(--app-text);
}
/* слово состояния: капитель с разрядкой, без точки, тихим серым (blockStatus) */
body.v-c .j-s{
  margin-left:auto;flex:none;
  font-weight:700;font-size:calc(9.5 * var(--u));letter-spacing:var(--u);text-transform:uppercase;
  line-height:1;color:var(--app-muted);
}
body.v-c .j-row{display:flex;align-items:baseline;gap:calc(7 * var(--u));min-width:0}
body.v-c .j-n{
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;font-size:calc(15.5 * var(--u));line-height:calc(19 * var(--u));
  letter-spacing:calc(-.15 * var(--u));color:var(--app-text);
}
body.v-c .j-p{
  display:block;margin-top:calc(2 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:calc(12.5 * var(--u));line-height:calc(16 * var(--u));color:var(--app-muted);
}

/* летящая карточка: та же строка, только в воздухе — с тенью */
body.v-c .scene .job{
  position:absolute;width:var(--cw,54%);aspect-ratio:auto;
  box-shadow:0 18px 36px -14px rgb(0 0 0 / .75),0 0 0 1px rgb(255 255 255 / .05);
}

/* компьютер: полоса уходит за левый край окна; ноутбук крупный, в его экране
   обрезка доски (см. .screen ниже). Телефон у правого края колонки; узкая зона
   между ними растянута на всю высоту — по ней заявки уходят в телефон */
@media (min-width:901px){
  body.v-c .hero .scene{
    align-items:center;
    margin-left:calc(min(calc(-1 * var(--gut)), calc((var(--maxw) - 100vw) / 2 - var(--gut))) - 40px);
    padding:40px;border-left:0;border-radius:0 var(--r-panel) var(--r-panel) 0;
  }
  body.v-c .hero .scene .phone{flex:none;width:17.5%}
  body.v-c .hero .scene .jobs{flex:1 1 0;width:auto;align-self:stretch;min-width:0}
  body.v-c .scene .job{--cw:clamp(236px,18.3vw,263px)}   /* 263 пункта — ширина строки в приложении */
  /* три карточки на трёх дорожках: уходит с доски · в пути · прибывает на телефон */
  body.v-c .scene .job:nth-of-type(1){left:-48px;top:75%;translate:0 -50%}
  body.v-c .scene .job:nth-of-type(2){left:28.3%;top:45.9%;translate:-50% -50%}
  body.v-c .scene .job:nth-of-type(3){right:-32px;top:17.8%;translate:0 -50%}
  body.v-c .tracks-m{display:none}
  /* Сцена не играет (скрипта нет или браузер без IntersectionObserver): коридор между
     ноутбуком и телефоном узкий, карточкам в нём не место. Показываем то, чем
     сцена кончается: заявки уже в телефоне, строками дня. */
  html:not(.m-scene) body.v-c .scene .job,
  html:not(.m-scene) body.v-c .tracks-d{display:none}
  html:not(.m-scene) body.v-c .feed{--shift:3}
  html:not(.m-scene) body.v-c .feed-row{opacity:1;--fy:0px}
  html:not(.m-scene) body.v-c .feed-row:nth-child(1){--slot:0}   /* 11:00 Marta Trevisan */
  html:not(.m-scene) body.v-c .feed-row:nth-child(2){--slot:2}   /* 15:30 Fausto Schiavon */
  html:not(.m-scene) body.v-c .feed-row:nth-child(3){--slot:1}   /* 13:00 Vittoria Baldan */

  /* 20:00 — отчёт и рядом телефон с деньгами мастера, телефон свисает ниже отчёта */
  body.v-c #month .shot{display:grid;grid-template-columns:minmax(0,1fr) 25%;align-items:start}
  body.v-c #month .shot .ph-report{grid-area:1/1/2/3;width:86%}
  body.v-c #month .shot .ph-phone{grid-area:1/2/3/3;margin-top:24%;z-index:1}
}

/* телефон: доска показана целиком, ниже одна дорожка наискось через три
   карточки к телефону; телефон справа, его низ уходит под край полосы */
@media (max-width:900px){
  body.v-c .hero .scene{
    margin-left:calc(-1 * var(--gut) - 20px);
    padding:20px 20px 0;border-left:0;border-radius:0 var(--r-panel) var(--r-panel) 0;overflow:hidden;
  }
  body.v-c .hero .scene .jobs{width:100%;height:320px;margin:8px 0}
  /* на узком экране карточка мельче: пункт приложения — 0.8 px */
  body.v-c .scene .job{--cw:58%;--u:.8px}
  body.v-c .scene .job:nth-of-type(1){left:4%;top:18%;translate:0 -50%}   /* не вплотную к краю: иначе пропадает кромка */
  body.v-c .scene .job:nth-of-type(2){left:23%;top:50%;translate:0 -50%}
  body.v-c .scene .job:nth-of-type(3){left:42%;top:80%;translate:0 -50%}
  body.v-c .hero .scene .phone{width:46%;margin-left:auto;margin-bottom:-43%}
  body.v-c .tracks-d{display:none}

  body.v-c #month .shot{display:grid;grid-template-columns:minmax(0,1fr) 44%}
  body.v-c #month .shot .ph-report{grid-area:1/1/2/3}
  body.v-c #month .shot .ph-phone{grid-area:1/2/3/3;align-self:start;margin-top:68%;z-index:1}
}

/* ======================================================================
   ВАРИАНТ C — ДВИЖЕНИЕ (Reference.md/DESIGN-SYSTEM.md, раздел 7).
   Каждое правило ниже — под body.v-c: варианты A и B его не видят.

   Классы на <html> ставит home-motion.js (подключён только в index.html):
     m-on     — «Анимации: вкл» в панели подбора; от него зависят эффекты наведения;
     m-ride   — плюс браузер умеет IntersectionObserver: сцена, нить и параллакс.
                Они движутся только вслед за прокруткой, поэтому «меньше движения»
                в системе их не выключает;
     m-scroll — плюс система не просит меньше движения;
                только при нём элементы прячутся до появления.
   Нет скрипта — нет классов, и страница видна целиком, как каркас.
   Первый экран (сцена «доска — заявки — телефон») не анимируется.
   ====================================================================== */
body.v-c{--m-ease:cubic-bezier(.16,1,.3,1);--scrub:150vh}

/* линия у микро-подписи: на компьютере она была скрыта — ставим под подписью
   на всю колонку, вне потока, чтобы раздел не стал выше */
@media (min-width:901px){
  body.v-c .chapter .cap .rule{display:block;position:absolute;left:0;right:0;top:calc(100% + 16px);height:1px;flex:none}
}

/* слова и строки, на которые скрипт разбил текст */
body.v-c .rv-words .w,
body.v-c .rv-lines .w{display:inline-block}

/* крупные числа: итог и бегущее значение лежат в одной клетке — ширина
   всегда по итогу, соседние числа не прыгают; читалка слышит итог */
body.v-c .num.rv-num{display:grid;justify-items:start}
body.v-c .num.rv-num > span{grid-area:1/1}
body.v-c .num .n-run{visibility:hidden}

/* цвет, с которым смешивается «непогасший» час */
/* с чем смешивается «непогасший» час: с фоном того раздела, где он стоит.
   --ink внутри раздела другого тона уже переопределён, поэтому правило одно. */
body.v-c .chapter{--hour-bg:var(--ink)}

/* ---------- появление по прокрутке: один раз на элемент ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  /* пока скрипт не разбил текст на слова — держим прозрачным, чтобы не мигнуло */
  html.m-scroll body.v-c .chapter .h:not(.rv-words),
  html.m-scroll body.v-c .chapter.cream .mani:not(.rv-lines),
  html.m-scroll body.v-c .chapter.cream .copy p:not(.rv-lines){opacity:0}

  /* 1. заголовки разделов — по словам, 12 px снизу, 60 мс между словами */
  html.m-scroll body.v-c .rv-words .w{
    opacity:0;transform:translateY(12px);
    transition:opacity .5s var(--m-ease),transform .7s var(--m-ease);
    transition-delay:calc(var(--i,0) * 60ms);
  }
  html.m-scroll body.v-c .rv-words.is-in .w{opacity:1;transform:none}

  /* 2. линия у микро-подписи — слева направо за 600 мс */
  html.m-scroll body.v-c .chapter .cap .rule{transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--m-ease)}
  html.m-scroll body.v-c .chapter .cap.is-in .rule{transform:none}

  /* 7. час загорается до #FF6D00 за 400 мс, когда раздел входит в экран */
  html.m-scroll body.v-c .chapter .cap .t{color:color-mix(in oklab,var(--brand-ink) 30%,var(--hour-bg));transition:color .4s ease-out}
  html.m-scroll body.v-c .chapter .cap.is-in .t{color:var(--brand-ink)}

  /* 4. крупные числа — пока идёт счёт, видно бегущее значение */
  html.m-scroll body.v-c .num.rv-num:not(.is-done) .n-final{color:transparent}
  html.m-scroll body.v-c .num.rv-num:not(.is-done) .n-run{visibility:visible}

  /* 5. светлый раздел — строка за строкой (номер строки --l ставит скрипт) */
  html.m-scroll body.v-c .rv-lines .w{
    opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--m-ease),transform .8s var(--m-ease);
    transition-delay:calc(var(--l,0) * 110ms);
  }
  html.m-scroll body.v-c .rv-lines.is-in .w{opacity:1;transform:none}

  /* 3б. снимки программы — проявляются с .98 до 1. Берём свойство scale, а не transform:
     transform занят подъёмом при наведении, translate — параллаксом, и они не спорят. */
  html.m-scroll body.v-c .chapter .shot .ph{
    opacity:0;scale:.98;
    transition:opacity .6s var(--m-ease),scale .9s var(--m-ease);
  }
  html.m-scroll body.v-c .chapter .shot .ph.is-in{opacity:1;scale:1}

  /* 6. «Что внутри» — строки по очереди, 40 мс между строками */
  html.m-scroll body.v-c #inside .rows .row{
    opacity:0;transform:translateY(12px);
    transition:opacity .5s var(--m-ease),transform .6s var(--m-ease);
    transition-delay:calc(var(--i,0) * 40ms);
  }
  html.m-scroll body.v-c #inside .rows .row.is-in{opacity:1;transform:none}
}

/* 3. параллакс заглушек ставит скрипт свойством translate. Он идёт только вслед за
   прокруткой, поэтому при «меньше движения» не сбрасывается. */

/* ======================================================================
   ПЕРЕКЛЮЧАТЕЛИ В ШАПКЕ: тема и язык.
   Оба помнят выбор в localStorage, ставит их home-i18n.js.
   ====================================================================== */
.tools{display:flex;align-items:center;gap:10px;min-width:0}

/* тема: капсула с бегунком; бегунок стоит на той стороне, которая включена,
   и значок под ним становится тёмным на оранжевом */
.theme{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center}
.theme .track{
  position:relative;display:block;width:50px;height:28px;border-radius:var(--r-pill);
  border:var(--bw) solid var(--line);background:var(--graphite);
  transition:border-color .18s ease-out,background-color .18s ease-out;
}
.theme:hover .track{border-color:var(--muted)}
.theme .knob{
  position:absolute;z-index:0;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--brand);
  transition:transform .24s var(--m-ease);
}
.theme svg{position:absolute;z-index:1;top:50%;width:13px;height:13px;margin-top:-6.5px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
.theme .i-moon{left:6.5px;fill:var(--muted);stroke:none}
.theme .i-sun{right:6.5px}
:root[data-theme="light"] .theme .knob{transform:translateX(22px)}
:root[data-theme="light"] .theme .i-sun{stroke:var(--on-brand)}
:root:not([data-theme="light"]) .theme .i-moon{fill:var(--on-brand)}

/* язык: сегментная капсула, пять коротких кодов */
.lang{
  display:inline-flex;align-items:center;padding:2px;
  border:var(--bw) solid var(--line);border-radius:var(--r-pill);
}
.lang button{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:11.5px;
  letter-spacing:.06em;line-height:1;color:var(--muted);
  padding:6px 7px;border-radius:var(--r-pill);
  transition:color .16s ease-out,background-color .16s ease-out;
}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{color:var(--on-brand);background:var(--brand)}

/* ======================================================================
   НОУТБУК И ТЕЛЕФОН — нарисованы кодом, без логотипов и брендов.
   ====================================================================== */
/* КРЫШКА. Рамка экрана тонкая по бокам и сверху, снизу — подбородок вдвое
   шире: по нему ноутбук и узнаётся. Корпус — алюминий: светлая грань сверху,
   тень снизу и косой отблеск поперёк. Никаких логотипов, на подбородке
   просто светлая чёрточка. Доворот крышки (--ry) ставит home-motion.js. */
body.v-c .hero .scene .board{
  padding:1.05% 1.05% 3.1%;
  border:var(--bw) solid var(--metal);
  border-radius:calc(var(--r) * .85) calc(var(--r) * .85) calc(var(--r) * .28) calc(var(--r) * .28);
  background:linear-gradient(176deg,
    color-mix(in srgb,var(--metal) 72%,#000) 0%,
    var(--metal-2) 34%,
    color-mix(in srgb,var(--metal-2) 62%,#000) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#FFFFFF 22%,transparent),
    0 34px 70px -34px rgb(0 0 0 / .85),
    0 0 60px -14px color-mix(in srgb,var(--brand) 22%,transparent);
  transform:perspective(1600px) rotateY(var(--ry,0deg));
  transform-origin:right center;
  will-change:transform;
}
/* Отблеск по алюминию: мягкая косая полоса, гаснет к середине крышки. */
body.v-c .hero .scene .board::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(106deg,
    rgb(255 255 255 / .16) 0%,
    rgb(255 255 255 / .05) 18%,
    transparent 42%);
}
/* Чёрточка на подбородке — вместо логотипа. */
body.v-c .hero .scene .board::after{
  content:"";position:absolute;left:50%;bottom:1.05%;translate:-50% 0;
  width:6.5%;height:2px;border-radius:var(--r-pill);pointer-events:none;
  background:color-mix(in srgb,var(--isle-text) 26%,transparent);
}

/* КРАЙ БАЗЫ. Полоса шире крышки, скруглённая по переднему краю, с вырезом
   под палец посередине и тенью в стыке — по ней видно, что крышка на чём-то
   стоит, а не висит в воздухе. */
body.v-c .hero .scene .lap-base{
  display:block;position:relative;
  width:105.5%;margin-left:-2.75%;aspect-ratio:54/1;
  border-radius:0 0 calc(var(--r) * .5) calc(var(--r) * .5) / 0 0 130% 130%;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--metal) 86%,#000) 0%,
    var(--metal-2) 26%,
    color-mix(in srgb,var(--metal-2) 48%,#000) 72%,
    color-mix(in srgb,var(--isle) 60%,#000) 100%);
  box-shadow:0 22px 34px -18px rgb(0 0 0 / .85);
}
body.v-c .hero .scene .lap-base::before{
  content:"";position:absolute;left:0;right:0;top:0;height:34%;
  background:linear-gradient(180deg,rgb(0 0 0 / .55),transparent);
}
body.v-c .hero .scene .lap-base::after{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:17%;height:44%;border-radius:0 0 var(--r-pill) var(--r-pill);
  background:linear-gradient(180deg,rgb(0 0 0 / .45),rgb(0 0 0 / .05));
}
/* Тень на полосе под ноутбуком: техника стоит, а не парит. */
body.v-c .hero .scene .laptop::after{
  content:"";position:absolute;left:4%;right:4%;top:100%;height:26px;
  pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgb(0 0 0 / .55),transparent 72%);
}

/* Корпус телефона: рамка, скругление по эллипсу, кнопка сбоку.
   Рамка — на внутреннем .case, а не на .phone: проценты у padding считаются
   от ширины РОДИТЕЛЯ, а .phone лежит во флексе сцены, и 2.6 % там означали бы
   2.6 % от всей сцены. Внутри .phone тот же процент даёт нужные пиксели.
   container-type на .phone нужен строкам ленты: их кегль считается от ширины корпуса. */
body.v-c .hero .scene .phone{position:relative;min-width:0;container-type:inline-size}
body.v-c .hero .scene .case{
  position:relative;
  padding:2.6%;
  border:var(--bw) solid var(--metal);
  border-radius:12%/5.6%;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--metal) 66%,#000) 0%,
    var(--metal-2) 40%,
    color-mix(in srgb,var(--metal-2) 58%,#000) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#FFFFFF 20%,transparent),
    0 30px 56px -26px rgb(0 0 0 / .85),
    0 0 52px -12px color-mix(in srgb,#FFC489 24%,transparent);
}
body.v-c .hero .scene .case .ph-phone{width:100%;max-width:none;display:block;border-radius:9.5%/4.2%}
body.v-c .hero .scene .case::after{
  content:"";position:absolute;right:-1px;top:25%;width:2px;height:9%;
  border-radius:2px;background:var(--isle-line);
}

/* Строки, которые приезжают в телефон. Это строки дня со снимка day-3.webp,
   повторённые по его же мерке: снимок — 375 пунктов в ширину, и --pt — один
   пункт в долях ширины корпуса (cqw), поэтому строка совпадает со снимком при
   любом масштабе сцены. Мерки сняты со снимка по пикселям:
     список начинается на 178.5 пункта (верх первой строки), фон списка #110D0C;
     час — от 17.5 пункта, тонкий Onest 17; ось — на 77 пункта, цвет #24201D;
     карточка — от 96 до 359 пункта, высота 59, шаг строк 79;
     три закрытые строки занимают 235 пунктов (третья выше: у неё есть заметка);
     шесть строк кончаются на 650.5, кнопка «+» начинается на 663 — не наезжает.
   День в приложении всегда отсортирован по времени, поэтому приехавшая заявка
   встаёт СВЕРХУ списка на своё место по часу, а закрытые строки сдвигаются вниз.
   Закрытые строки — это пиксели снимка, поэтому они повторены отдельным слоем
   .feed-old (кусок того же снимка), который едет вниз на --shift строк; под ним
   зона списка залита фоном снимка, и старые пиксели не просвечивают.
   Место строки --slot (0, 1, 2), сдвиг --shift, видимость --fo и подъезд --fy
   ставит home-motion.js — ровно в тот миг, когда карточка уходит под корпус. */
body.v-c .feed{
  --pt:calc((100cqw - 5.2cqw - 2 * var(--bw)) / 375);
  position:absolute;left:2.6cqw;right:2.6cqw;
  top:calc(2.6cqw + 178.5 * var(--pt));
  height:calc(472 * var(--pt));
  overflow:hidden;background:#110D0C;
  pointer-events:none;font-size:calc(10 * var(--pt));
}
/* ось дня: одна линия на весь список — от первой строки до 18 пунктов ниже последней */
body.v-c .feed::before{
  content:"";position:absolute;left:calc(77 * var(--pt));top:0;
  height:calc((253 + var(--shift,0) * 79) * var(--pt));
  width:max(1px,var(--pt));background:#24201D;   /* PhoneSpine: ширина 1 */
}
body.v-c .feed-row{
  position:absolute;z-index:1;left:0;right:0;top:0;height:calc(59 * var(--pt));
  opacity:var(--fo,0);
  transform:translateY(calc(var(--slot,0) * 79 * var(--pt) + var(--fy,.6em)));
  transition:opacity .3s ease-out;
}
/* закрытые строки со снимка — слоем, который сдвигается вниз на --shift строк */
body.v-c .feed-old{
  position:absolute;z-index:0;left:0;right:0;top:0;height:calc(235 * var(--pt));overflow:hidden;
  transform:translateY(calc(var(--shift,0) * 79 * var(--pt)));
}
body.v-c .feed-old img{
  position:absolute;left:0;top:calc(-178.5 * var(--pt));width:100%;height:auto;max-width:none;
  display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;
}
body.v-c .fr-h{
  position:absolute;left:calc(17.5 * var(--pt));top:calc(2 * var(--pt));   /* PhoneSpine: paddingTop 2 */
  font-family:"Onest",system-ui,sans-serif;font-weight:200;font-size:calc(17 * var(--pt));
  letter-spacing:calc(-.3 * var(--pt));font-variant-numeric:tabular-nums;line-height:calc(19 * var(--pt));color:#9B8D82;
}
body.v-c .fr-card{
  --u:var(--pt);
  position:absolute;left:calc(96 * var(--pt));right:calc(16 * var(--pt));top:0;height:calc(59 * var(--pt));
}

/* ======================================================================
   ФИНАЛ СТРАНИЦЫ. Фото фургона во всю ширину, поверх заливка цветом темы:
   в тёмной она затемняет, в светлой осветляет, и текст читается в обеих.
   ====================================================================== */
.fin{position:relative;isolation:isolate;overflow:hidden;border-top:var(--bw) solid var(--line-soft);padding-block:var(--sec)}
.fin .wrap{position:relative;z-index:1}
.fin-bg{position:absolute;inset:0;z-index:-1;background:url("media/rabota/atmo-c.webp") center/cover no-repeat}
.fin-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--ink) 0%,var(--ink) 40%,
      color-mix(in srgb,var(--ink) 78%,transparent) 66%,
      color-mix(in srgb,var(--ink) 52%,transparent) 100%),
    linear-gradient(to bottom,var(--ink) 0%,transparent 20%,transparent 78%,var(--ink) 100%),
    color-mix(in srgb,var(--ink) 28%,transparent);
}
.fin-h{
  font-family:var(--display);font-weight:var(--w1);
  font-size:calc(clamp(34px,4.4vw,60px) * var(--hs));line-height:1.06;letter-spacing:var(--ls-l);
  color:var(--text);margin:0;max-width:19ch;
}
.fin-h b{font-weight:var(--w2);font-style:var(--i2)}
.fin-s{color:var(--body);font-size:19px;line-height:1.6;margin:22px 0 0;max-width:34ch}
.fin-cta{margin-top:40px;justify-self:start}
@media (min-width:901px){
  .v-c .fin{padding-block:180px}
  .v-c .fin-h{grid-area:1/1/2/9}
  .v-c .fin-s{grid-area:2/1/3/7}
  .v-c .fin-cta{grid-area:3/1/4/4}
}
@media (max-width:900px){
  /* Узкий экран: фото — полосой ПОД словами, а не на весь раздел. Панорама
     3,2 : 1, растянутая на высоту раздела, показала бы на телефоне кусок
     двери. Высота полосы --fin-photo: в неё фургон входит почти целиком.
     Слова сверху — на сплошном тоне темы, ниже фон виден. Затемнение не
     вбок, как на компьютере, а сверху вниз: сплошное до низа кнопки,
     сходит на нет по верху фото и чуть темнеет у подвала. */
  .fin{--fin-photo:300px;padding-block:96px calc(var(--fin-photo) + 24px)}
  .fin-bg{background-size:auto var(--fin-photo);background-position:59% 100%}
  :root[data-theme="light"] .fin-bg{background-position:23% 100%}
  .fin-bg::after{
    background:linear-gradient(to bottom,
      var(--ink) 0%,
      var(--ink) calc(100% - var(--fin-photo)),
      color-mix(in srgb,var(--ink) 45%,transparent) calc(100% - var(--fin-photo) + 60px),
      transparent calc(100% - var(--fin-photo) + 130px),
      transparent calc(100% - 50px),
      color-mix(in srgb,var(--ink) 60%,transparent) 100%);
  }
  .fin-h{max-width:none}
  .fin-cta{margin-top:32px}
}

/* ---------- сцена-проигрыватель: первый экран держит экран, карточки едут ----------
   Класс m-scene ставит home-motion.js — только на широком экране. «Меньше движения»
   в системе его не снимает: карточки едут только вслед за прокруткой. Нет класса —
   рельса схлопывается в высоту сцены, карточки стоят по статичным правилам выше,
   всё ровно как было.
   --sh (высота сцены) и --st (на каком расстоянии от верха окна она прилипает)
   считает скрипт; --scrub — сколько прокрутки сцена держит экран. */
html.m-scene body.v-c .hero .scene-rail{height:calc(var(--sh,560px) + var(--scrub))}
html.m-scene body.v-c .hero .scene{position:sticky;top:var(--st,88px)}

/* Доска в обёртке: место во флексе занимает обёртка, экран внутри — на всю её ширину.
   Так на экран можно положить подсветку блоков, не трогая раскладку сцены. */
body.v-c .hero .scene .laptop{position:relative;min-width:0}
body.v-c .hero .scene .board{position:relative}

/* ЭКРАН — ОБРЕЗКА СНИМКА ВЁРСТКОЙ. Файл board-3.webp тот же (2880 × 1800,
   снят в двойном разрешении), но в экран входит только кусок по смыслу:
     x 0…2572    — боковое меню, колонка мастеров и часы с 08 до 18
                   (правее 18 уже стрелки дней — они обрезаны целиком, не пополам);
     y 96…1426   — от заголовка дня до низа шестой строки мастеров
                   (верхняя полоса со счётчиками обрезана целиком).
   Экран принимает пропорцию обрезки, 2572 : 1330; снимок внутри растянут так,
   чтобы 2572 точки легли на всю ширину экрана, и поднят на 96 точек. */
body.v-c .hero .scene .screen{
  position:relative;overflow:hidden;
  aspect-ratio:2572/1330;
  border-radius:calc(var(--r) * .22);      /* экран почти прямоугольный: углы скругляет рамка */
  background:#110D0A;                      /* пока снимок не пришёл — тёмный экран, не алюминий */
  box-shadow:0 0 0 1px rgb(0 0 0 / .55);
}
body.v-c .hero .scene .screen .ph-board{
  position:absolute;left:0;top:-7.218%;    /* 96 / 1330 */
  width:111.975%;max-width:none;height:auto;margin:0;display:block;   /* 2880 / 2572 */
  border:0;border-radius:0;background:none;box-shadow:none;
}
/* блик стекла поверх снимка — экран, а не наклейка */
body.v-c .hero .scene .screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 40px rgb(0 0 0 / .35);
}

/* Ширина: ноутбук забирает бывший пустой промежуток до телефона — остаётся
   узкий коридор, по которому заявки уходят в телефон. Отступ слева — чтобы
   край базы (он шире крышки) не уехал за край окна. Запас снизу остался от
   убранной карточки-увеличения: высота сцены не менялась. */
@media (min-width:901px){
  body.v-c .hero .scene .laptop{flex:none;width:68%;margin-left:3%}
  /* запас снизу (от бывшей карточки-увеличения; оставлен, чтобы сцена не стала ниже) */
  body.v-c .hero .scene{padding-bottom:calc(40px + min(114px, 8.7vw - 8px))}
}
@media (max-width:900px){
  body.v-c .hero .scene .laptop{width:94%;margin-left:3%}
}

/* Подсвеченный блок заявки на доске. Силу света (--bo) ставит скрипт: горит, пока
   заявка на доске, и гаснет, когда карточка от неё отрывается. Без сцены не виден. */
body.v-c .hero .scene .bslot{
  position:absolute;pointer-events:none;opacity:var(--bo,0);
  border:1.5px solid var(--brand);border-radius:calc(var(--r) / 3);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent),
             0 0 22px -2px color-mix(in srgb,var(--brand) 50%,transparent);
}
/* Места трёх настоящих блоков в процентах от ОБРЕЗКИ (2572 × 1330, от y 96),
   замерены по пикселям board-3.webp. */
body.v-c .bs-a{left:53.07%;top:33.01%;width:13.10%;height:8.50%}   /* 11:00–13:00 Marta Trevisan:   x 1365…1702, y 535…648 */
body.v-c .bs-b{left:82.47%;top:44.36%;width:9.91%;height:8.72%}    /* 15:30–17:00 Fausto Schiavon:  x 2121…2376, y 686…802 */
body.v-c .bs-c{left:66.14%;top:78.95%;width:9.84%;height:8.12%}    /* 13:00–14:30 Vittoria Baldan: x 1701…1954, y 1146…1254 */

/* Карточку полностью ведёт скрипт: --jx и --jy — точка в зоне дорожек, --js — размер
   (с блок доски на старте, полный в пути, уменьшенный на входе в телефон),
   --jo — видимость (до своей очереди и после входа в телефон карточки нет). */
html.m-scene body.v-c .scene .job{
  left:0;right:auto;top:0;translate:none;opacity:var(--jo,1);
  transform:translate3d(var(--jx,0px),var(--jy,0px),0) translate(-50%,-50%) scale(var(--js,1));
  will-change:transform,opacity;
}
/* кто приехал последним — тот сверху: карточки ложатся стопкой сверху вниз */
html.m-scene body.v-c .scene .job:nth-of-type(1){z-index:3}
html.m-scene body.v-c .scene .job:nth-of-type(2){z-index:2}
html.m-scene body.v-c .scene .job:nth-of-type(3){z-index:1}

/* Телефон лежит ПОВЕРХ карточек: приехавшая заявка уходит под его край, как в лоток,
   и снимок остаётся читаемым целиком. Без этого три карточки закрывают весь экран. */
html.m-scene body.v-c .hero .scene .phone{position:relative;z-index:4}

/* Дорожка рисуется по мере проезда: пока сцена играет, сам путь и точки на концах
   не видны вовсе, виден только его дубль .lit, обрезанный клином по x вслед за
   карточкой. До старта карточки от дорожки нет ничего. */
body.v-c .tracks .lit{opacity:0}
html.m-scene body.v-c .tracks-d path:not(.lit){opacity:0}
html.m-scene body.v-c .tracks-d .lit{opacity:1}

/* ---------- нить времени: от 08:15 до 20:00 ----------
   Тонкая линия слева от разделов. Пройденная часть горит, по ней едет метка.
   Положение (--tx, --ty), длину (--th) и метку (--tp) считает скрипт.
   Только широкий экран и только при m-ride: на телефоне и без скрипта нити нет.
   «Меньше движения» её не прячет: метка едет только вслед за прокруткой. */
.thread{display:none}
@media (min-width:901px){
  html.m-ride body.v-c .thread{
    display:block;position:absolute;pointer-events:none;z-index:1;
    left:var(--tx,52px);top:var(--ty,0px);width:1px;height:var(--th,0px);
    /* Один цвет на всю нить, разной силы: линия проходит и по тёмным разделам,
       и по светлому, а var(--line) на кремовом читался бы как чужая тёмная черта. */
    background:color-mix(in srgb,var(--brand) 18%,transparent);
  }
  body.v-c .thread i{position:absolute;left:0;display:block}
  body.v-c .thread .t-lit{top:0;width:1px;height:var(--tp,0px);background:var(--brand);opacity:.55}
  body.v-c .thread .t-dot{
    top:var(--tp,0px);width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;
    background:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
  }
}

/* ---------- наведение: только там, где есть мышь ---------- */
@media (hover:hover){
  /* 8. кнопки — осветление (основная светлеет правилом .btn.primary:hover) */
  html.m-on body.v-c .btn{transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out,transform .18s var(--m-ease)}
  html.m-on body.v-c .btn.ghost:hover{background-color:color-mix(in srgb,var(--text) 6%,transparent)}

  /* 9. заглушка снимка — рамка светлее, тень глубже */
  html.m-on body.v-c .chapter .shot .ph{transition:border-color .3s ease-out,box-shadow .3s var(--m-ease),transform .3s var(--m-ease)}
  html.m-on body.v-c .chapter .shot .ph:hover,
  html.m-on body.v-c .chapter .shot:has(.over:hover) .ph{
    border-color:color-mix(in srgb,var(--muted) 55%,var(--line));
    box-shadow:0 28px 56px -24px rgb(4 3 2 / .9);
  }

  /* 10. строка «Что внутри» — фон светлее, слева оранжевая полоска 2 px */
  html.m-on body.v-c #inside .rows .row{position:relative;isolation:isolate}
  html.m-on body.v-c #inside .rows .row::before{
    content:"";position:absolute;inset:0 -16px;z-index:-1;
    background:var(--ink-2);opacity:0;transition:opacity .2s ease-out;
  }
  html.m-on body.v-c #inside .rows .row::after{
    content:"";position:absolute;left:-16px;top:0;bottom:0;width:2px;
    background:var(--brand);opacity:0;transition:opacity .2s ease-out,transform .24s var(--m-ease);
  }
  html.m-on body.v-c #inside .rows .row:hover::before,
  html.m-on body.v-c #inside .rows .row:hover::after{opacity:1}

  /* 11. пункт меню — подчёркивание */
  html.m-on body.v-c .top nav a{position:relative;transition:color .18s ease-out}
  html.m-on body.v-c .top nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
    opacity:0;transition:opacity .18s ease-out,transform .26s var(--m-ease);
  }
  html.m-on body.v-c .top nav a:hover::after,
  html.m-on body.v-c .top nav a:focus-visible::after{opacity:1}

  /* 12. карточка «Как вы устроены» (#who) — фон светлее, справа стрелка */
  html.m-on body.v-c #who .cols > div{position:relative;isolation:isolate}
  html.m-on body.v-c #who .cols > div::before{
    content:"";position:absolute;inset:0 -14px -20px;z-index:-1;border-radius:0 0 var(--r) var(--r);
    background:var(--ink-2);opacity:0;transition:opacity .2s ease-out;
  }
  html.m-on body.v-c #who .cols > div::after{
    content:"";position:absolute;top:5px;right:0;width:18px;height:14px;background:var(--text);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 7h15.5M10.5 1.5 16.5 7l-6 5.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 7h15.5M10.5 1.5 16.5 7l-6 5.5'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity:0;transition:opacity .2s ease-out,transform .26s var(--m-ease);
  }
  html.m-on body.v-c #who .cols > div:hover::before,
  html.m-on body.v-c #who .cols > div:hover::after{opacity:1}

  /* 13. раздел под курсором — его час ярче остальных: остальные горящие часы приглушаются */
  html.m-on:not(.m-scroll) body.v-c main:has(.chapter:hover .cap .t) .chapter:not(:hover) .cap .t,
  html.m-scroll body.v-c main:has(.chapter:hover .cap .t) .chapter:not(:hover) .cap.is-in .t{
    color:color-mix(in oklab,var(--brand-ink) 60%,var(--hour-bg));
  }
  html.m-on body.v-c .chapter .cap .t{transition:color .3s ease-out}
}

/* движение при наведении — только если система не просит меньше движения */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.m-on body.v-c .btn:hover{transform:translateY(-2px)}
  html.m-on body.v-c .btn:active{transform:none;transition-duration:.08s}
  html.m-on body.v-c .chapter .shot .ph:hover,
  html.m-on body.v-c .chapter .shot:has(.over:hover) .ph{transform:translateY(-4px)}
  html.m-on body.v-c #inside .rows .row::after{transform:translateX(-8px)}
  html.m-on body.v-c #inside .rows .row:hover::after{transform:none}
  html.m-on body.v-c .top nav a::after{transform:scaleX(0);transform-origin:right center}
  html.m-on body.v-c .top nav a:hover::after,
  html.m-on body.v-c .top nav a:focus-visible::after{transform:none;transform-origin:left center}
  html.m-on body.v-c #who .cols > div::after{transform:translateX(-8px)}
  html.m-on body.v-c #who .cols > div:hover::after{transform:none}
}

/* ======================================================================
   «КОМУ ПОДХОДИТ» — ДЕВЯТЬ СФЕР. Раздел 2б, сразу после сцены «доска → телефон».
   Ряд карточек листается сам в себе, страница вбок не едет: на компьютере —
   колесом и двумя стрелками под рядом, на телефоне — пальцем (home-mobile.css).
   Левый край ряда стоит по левому краю текста (как у .wrap), правый уходит
   до края окна; на 1440 в кадре три с половиной карточки, край справа
   мягко затемнён. Фото серые и чуть темнее; в цвет за 400 мс оживает карточка
   под курсором, рамка у неё оранжевая. Какая карточка «живая» на телефоне —
   решает home-spheres.js (класс is-live). Мерки ряда — в долях ширины .sph-row
   (container-type, единицы cqw): так 100 % не включает полосу прокрутки окна.
   ====================================================================== */
.spheres{padding-block:var(--sec);border-top:var(--bw) solid var(--line-soft);overflow-x:clip}
.sph-head .kicker{color:var(--brand-ink);margin-bottom:20px}
.sph-row{position:relative;margin-top:48px;container-type:inline-size}
.sph-scroll{
  --sph-l:max(var(--gut), calc((100cqw - var(--maxw)) / 2 + var(--gut)));   /* левый край текста */
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--sph-l);
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sph-scroll::-webkit-scrollbar{display:none}
.sph-scroll:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
/* Отступы — у списка, а не у прокрутки: правый отступ у самой прокрутки
   Safari в ширину хода не засчитывает, и последняя карточка липла бы к краю. */
.sph-list{
  --cw:min(440px, calc((100cqw - var(--sph-l) - 3 * var(--gap)) / 3.5));   /* 3,5 карточки в кадре */
  display:flex;gap:var(--gap);width:max-content;
  list-style:none;margin:0;padding:0 var(--sph-l);
}
@media (max-width:1100px){
  .sph-list{--cw:calc((100cqw - var(--sph-l) - 2 * var(--gap)) / 2.5)}
}
.sph-card{
  flex:0 0 var(--cw);min-width:0;scroll-snap-align:start;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-2);border:var(--bw) solid var(--line);border-radius:var(--r);
  transition:border-color .4s ease-out;
}
.sph-ph{aspect-ratio:4/5;overflow:hidden;background:var(--graphite)}
.sph-ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.78);transition:filter .4s ease-out;
}
.sph-tx{padding:20px 22px 24px}
.sph-tx h3{font-size:19px;line-height:1.25;margin-bottom:8px}
.sph-tx p{color:var(--body);font-size:15px;line-height:1.5}

/* ожившая карточка: под курсором — только где есть мышь; is-live ставит скрипт */
@media (hover:hover){
  .sph-card:hover{border-color:var(--brand)}
  .sph-card:hover .sph-ph img{filter:grayscale(0) brightness(1)}
}
.sph-card.is-live{border-color:var(--brand)}
.sph-card.is-live .sph-ph img{filter:grayscale(0) brightness(1)}

/* мягкое затемнение правого края; дошли до конца ряда — гаснет (is-end) */
.sph-row::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:clamp(56px,9vw,150px);pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 0%,transparent),var(--ink));
  transition:opacity .3s ease-out;
}
.sph-row.is-end::after{opacity:0}

/* две круглые стрелки под рядом, по правому краю текста. Без скрипта они
   ничего бы не делали — поэтому видны только при .is-ready */
.sph-nav{display:flex;justify-content:flex-end;gap:12px;margin-top:28px;visibility:hidden}
.spheres.is-ready .sph-nav{visibility:visible}
.sph-btn{
  appearance:none;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;
  border:var(--bw) solid var(--line);border-radius:50%;background:none;color:var(--text);cursor:pointer;
  transition:border-color .18s ease-out,background-color .18s ease-out,opacity .18s ease-out;
}
.sph-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sph-btn:hover{border-color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent)}
.sph-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.sph-btn[aria-disabled="true"]:hover{border-color:var(--line);background:none}

/* точки — только на телефоне (home-mobile.css) */
.sph-dots{display:none}

/* «Меньше движения»: все фото сразу цветные, без переходов */
@media (prefers-reduced-motion:reduce){
  .sph-card,.sph-ph img{transition:none}
  .sph-ph img{filter:none}
}

/* Старый браузер без единиц cqw: те же мерки от ширины окна */
@supports not (width:1cqw){
  .sph-scroll{--sph-l:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)))}
  .sph-list{--cw:min(440px, calc((100vw - var(--sph-l) - 3 * var(--gap)) / 3.5))}
}
@supports not (width:1cqw){
  @media (max-width:1100px){ .sph-list{--cw:calc((100vw - var(--sph-l) - 2 * var(--gap)) / 2.5)} }
}