/* ============================================================================
   FLUX — сайт. Общие стили для всех шести страниц.

   Две вещи, ради которых стили переписаны заново.

   1. ШИРИНА. Раньше всё лежало в колонке 1120 px по центру: на мониторе 1920
      это 40 % экрана, а по краям пустота — читалось как «всё сдвинуто в
      середину». Теперь колонка 1400 px, поля растут вместе с экраном, а
      заголовок и текст стоят В РАЗНЫХ колонках, а не друг под другом по центру.

   2. РИТМ. Раньше каждая секция была устроена одинаково: надпись — заголовок —
      абзац — сетка стеклянных карточек. Одинаковые секции подряд читаются как
      одна длинная, и ничего не выделяется. Теперь есть светлые секции («бумага»),
      секции в разбивку текст/картинка и секции во всю ширину.

   Движение: только transform и opacity, и только по делу — появление секции,
   ховер, скролл-фильм, разовые анимации тарифов. Ничего не мигает и не бежит
   по кругу: это первое, что владелец назвал дешёвым.
   ========================================================================== */

:root{
  /* тёмная основа */
  --bg:#0E1A16;
  --ink:#EAF3EF;
  --muted:#A7BCB4;
  --dim:#7B928A;

  /* светлая «бумага» — секции-передышки между тёмными */
  --paper:#EFF4F1;
  --paper-ink:#0D1A15;
  --paper-mut:#4F6760;
  --paper-line:rgba(13,26,21,.10);

  /* УДАРНАЯ ПЛИТА — одна-две секции на сайт, там, где живут большие цифры.
     Это удар, а не обои: если покрасить так всё, удара не будет. */
  --punch:#D9F65C;
  --punch-ink:#15200B;
  --punch-mut:#3B4D1B;
  --punch-rule:rgba(21,32,11,.85);   /* линейка над цифрой */
  --punch-soft:rgba(21,32,11,.66);   /* подпись под цифрой */

  /* КНОПКА-ДЕЙСТВИЕ — отдельный токен, а НЕ цвет плиты.
     Слитые в один, они запирают палитру: там, где плита должна быть глубокой и
     держать текст, кнопка обязана быть звонкой и просить нажать. Развели —
     и палитра получила два голоса вместо одного. */
  --cta:#D9F65C;
  --cta-ink:#15200B;
  --cta-glow:rgba(217,246,92,.55);   /* тень под кнопкой */
  --cta-soft:rgba(217,246,92,.10);   /* заливка выбранной карточки роли */
  --cta-edge:rgba(217,246,92,.55);   /* её же кромка */

  /* ВТОРАЯ СВЕТЛАЯ СЕКЦИЯ — другой климат, чтобы две светлые паузы подряд
     не читались одной. Холодная / ударная / тёплая — три разные паузы. */
  --sand:#F3EDDD;
  --sand-ink:#241C0B;
  --sand-mut:#6F6039;
  --sand-card:#F8F5EC;
  --sand-line:rgba(36,28,11,.12);

  --acc:#1D9E75;
  --acc-lit:#3FD3A2;
  --acc-d:#12735A;
  --blue:#8FE3C4;
  --gold:#F2C662;
  --gold-d:#B98A00;
  --bad:#E5533D;
  --ink-on-acc:#EAF3EF;

  /* Мягкие заливки и кромки служебных плашек — заметка, чипс файла, статусная
     строка. Держим их токенами, иначе после смены палитры плашка остаётся
     цветом прошлого направления. Считаются в tools/site-palette.mjs. */
  --acc-soft:rgba(63,211,162,.10);
  --acc-edge:rgba(63,211,162,.30);
  --gold-soft:rgba(242,198,98,.12);
  --gold-edge:rgba(242,198,98,.32);

  /* Дисплейная гарнитура — та же, что у имён основателей в приложении:
     Unbounded. Широкая и характерная, поэтому только заголовки и большие
     цифры; текст остаётся на Manrope. */
  --disp:"Unbounded", Manrope, system-ui, sans-serif;

  --glass:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  --glass-base:rgba(14,26,22,.55);   /* подложка под стеклом, гасит пятна авроры */
  --glass-blur:blur(20px) saturate(185%);
  --bevel:inset 1.6px 1.6px 1px -1px rgba(255,255,255,.5),
          inset -1.6px -1.6px 1px -1px rgba(255,255,255,.22);
  --bevel-hi:inset 2px 2px 1.5px -1px rgba(255,255,255,.72),
             inset -2px -2px 1.5px -1px rgba(255,255,255,.34);
  --shadow:0 10px 28px -12px rgba(0,0,0,.5);
  --hair:1px solid rgba(255,255,255,.10);
  --r:22px;

  /* ПЛОСКАЯ ПАНЕЛЬ — поверхность карточек на тёмном полотне (см. .glass).
     На полтона светлее полотна и с волосяной кромкой: как тёмные плитки у
     Ландо, без размытия и бликов по краю. */
  --surf:#13221D;
  --surf-hi:#172A23;
  --edge:rgba(234,243,239,.09);

  --e-reveal:cubic-bezier(.22,1,.36,1);
  --e-micro:cubic-bezier(.2,.8,.2,1);

  --pad:clamp(20px,4.5vw,80px);
  --maxw:1400px;
  --gap:clamp(14px,1.4vw,22px);
}

/* Воздух раздела и НОЧЬ — третий климат полотна (см. «ОДНО ПОЛОТНО»).
   Ночь — не цвет палитры, а чернота студии, в которой снят стейк
   (kitchen/cleaver-*.mp4, края кадра #020403…#090B0C): пока идёт ролик,
   полотно темнеет до неё, и вписанный кадр не показывает рамки. Пересняли
   ролик — переснять и этот цвет (и THEME.night в tone.js). */
:root{
  --sect-pad:clamp(72px,9vw,150px);
  --night:#040706;
}

/* На широком мониторе колонка 1400 снова начинает выглядеть «зажатой в
   середину»: по краям остаётся по 260 px пустоты. Отпускаем ширину — поля
   всё равно держит --pad, а секции-«бумага» и фильм и так идут во всю ширину. */
@media (min-width:1660px){ :root{ --maxw:1560px } }
@media (min-width:1900px){ :root{ --maxw:1680px } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 clamp(16px,1.05vw,18px)/1.55 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.03;
  /* Строки заголовка — ровными: без висячего слова в последней строке
     («Коротко цифрами: деньги и / часы»). Разбивка эффектов (fx/split.js)
     снимает переносы с живой вёрстки, так что balance она видит как есть. */
  text-wrap:balance }
/* Unbounded шире Manrope примерно на четверть, поэтому кегль меньше прежнего:
   76 в Unbounded занимает столько же, сколько занимали прежние 104. */
h1{ font-family:var(--disp); font-weight:700; letter-spacing:-.01em;
  line-height:1.06; font-size:clamp(30px,4.8vw,78px) }
h2{ font-family:var(--disp); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(22px,3vw,50px); line-height:1.12 }
h3{ font-size:clamp(19px,1.45vw,25px); line-height:1.22; letter-spacing:-.02em; font-weight:700 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
svg{ display:block }
img{ max-width:100% }

.num{ font-family:"Space Grotesk", Manrope, system-ui, sans-serif;
  font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.02em }

/* Большая витринная цифра — дисплейной гарнитурой. Мелкие табличные числа
   остаются на Space Grotesk: Unbounded в строке таблицы нечитаем. */
.dnum{ font-family:var(--disp); font-weight:800; letter-spacing:0;
  font-variant-numeric:tabular-nums }

.vh{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

.skip{ position:fixed; left:12px; top:-64px; z-index:120; padding:10px 16px;
  border-radius:12px; background:var(--acc); color:var(--ink-on-acc); font-weight:700 }
.skip:focus{ top:12px }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

::selection{ background:rgba(29,158,117,.4); color:var(--ink) }
.paper ::selection{ background:rgba(29,158,117,.28); color:var(--paper-ink) }

.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.ic{ width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }

/* ─────────────────────────── аврора ───────────────────────────
   Блики дрейфуют очень медленно; размытие живёт на дочернем слое, чтобы
   браузер кэшировал растр и не пересчитывал его на каждый кадр. */
.aurora{ position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(130% 95% at 50% -12%, #102A21 0%, var(--bg) 58%) }
.drift{ position:absolute; will-change:transform }
.blob{ display:block; width:100%; height:100%; border-radius:50%; filter:blur(120px) }
.blob-green{ background:rgba(29,158,117,.30) }
.blob-blue{ background:rgba(94,138,46,.22) }
.blob-deep{ background:rgba(12,70,54,.42) }
.drift-1{ left:-12%; top:-16%; width:52vmax; height:44vmax;
  animation:drift-a 52s ease-in-out infinite alternate }
.drift-2{ right:-16%; top:20%; width:48vmax; height:42vmax;
  animation:drift-b 46s ease-in-out infinite alternate }
.drift-3{ left:24%; bottom:-18%; width:56vmax; height:46vmax;
  animation:drift-c 60s ease-in-out infinite alternate }
@keyframes drift-a{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(8vw,6vh,0) } }
@keyframes drift-b{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-7vw,9vh,0) } }
@keyframes drift-c{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(6vw,-8vh,0) } }

/* ПОЛОТНО. Аврора больше не пятна, а ровная краска — общий фон страницы
   под прозрачными разделами (см. «ОДНО ПОЛОТНО»). Пятна и свечение сверху
   прибиты к экрану, а раздел со своим непрозрачным холстом (поле, кадр
   ролика) залит ровным --bg: над пятном край такого холста читался бы
   прямоугольником. Ровное полотно — как у Ландо: весь цвет страницы в одном
   тоне, глубину дают сами разделы. Селектор двойной — palette.css грузится
   последним и красит .aurora своим правилом. Ровное — сразу, а не с
   приходом tone.js: иначе первые доли секунды под шапками внутренних
   страниц мелькали бы пятна.

   Цвет заливки дальше ведёт tone.js (смесь климатов под читающей линией).

   Высота — большой экран (lvh): на телефоне панель браузера, уезжая,
   открывает полосу под неподвижным слоем, и на светлом полотне она мигала
   бы тёмным. */
html .aurora{ background:var(--bg); bottom:auto; height:100vh; height:100lvh }
.aurora .drift{ display:none }

/* ─────────────────────────── каркас ─────────────────────────── */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.wrap-tight{ max-width:1100px }

.sect{ padding-block:var(--sect-pad); position:relative; scroll-margin-top:96px }
.sect-sm{ --sect-pad:clamp(52px,6vw,96px) }

/* ─────────────────────── ОДНО ПОЛОТНО ───────────────────────
   Разделы не плиты и не вкладки: у них нет своей краски, кромки, тени и
   скругления. Фон у страницы ОДИН — неподвижный слой .aurora за всем
   содержимым, — и его цвет перетекает вслед за прокруткой (tone.js).

   Приём снят с landonorris.com. Там на всю главную ровно одна смена цвета,
   тёмный → кремовый, и она растянута на пару экранов пути: меняется не
   раздел, а экран целиком, поэтому линии, которая ехала бы по экрану, нет
   вовсе. Прежние плиты (27.08) давали стык на КАЖДОЙ границе: у тёмных
   разделов были свои, чуть разные замесы, и две почти одинаковые зелени
   встречались по дуге с тенью — глаз ловил кромку там, где смены смысла нет.

   Теперь смена климата (бумага, песок, ночь) случается только там, где
   меняется сам раздел, и всегда целым экраном. Тёмные разделы подряд — одно
   сплошное полотно; всё, что в них непрозрачно (поле, ролик, кадры фильма),
   гаснет к краям в тот же --bg.

   Без JS (нет tone-on) светлые разделы красятся сами — страница читается,
   просто со стыками. */
main > section{ position:relative }
/* Содержимое раздела — над его подложками (холст поля, фигуры, «Велариса»). */
main > section > *{ position:relative; z-index:1 }

/* Светлые разделы отдают краску полотну. Первый кадр полотна tone.js
   ставит ДО этого класса — подмены не видно. */
.tone-on main > section.paper,
.tone-on main > section.warm{ background:none }

/* Светлая секция-передышка. Тёмное подряд без пауз читается как одна плита. */
.paper{ background:var(--paper); color:var(--paper-ink) }
.paper .lead,.paper .kicker + h2 + .lead{ color:var(--paper-mut) }
.paper .kicker{ color:var(--acc-d) }
.paper .card{ background:#fff; border:1px solid var(--paper-line);
  /* Две тени вместо одной: волосяная у самого края даёт карточке кромку
     (белое по почти белому отличается на 1,11:1 — само по себе это не край),
     широкая и мягкая отрывает её от бумаги. */
  box-shadow:0 1px 2px rgba(13,26,21,.06), 0 22px 44px -30px rgba(13,26,21,.55) }
.paper .card p{ color:var(--paper-mut) }
.paper .ic{ color:var(--acc-d) }

/* Кислотная секция — не климат полотна, а ПРЕДМЕТ на нём: карточка со
   скруглением по всем углам и тёмным полем вокруг, как лаймовые вещи у
   Ландо. Пока она шла почти во всю ширину, лайм читался сменой сайта — тем
   самым резким стыком, от которого полотно избавляет остальные разделы. */
.acid{ background:var(--punch); color:var(--punch-ink);
  margin:clamp(12px,2vw,40px) clamp(12px,4.2vw,96px);
  border-radius:clamp(24px,2.6vw,44px) }
.acid .kicker{ color:var(--punch-mut) }
.acid .lead{ color:var(--punch-soft) }
.acid ::selection{ background:var(--punch-ink); color:var(--punch) }
/* Общая обводка фокуса — янтарная (см. palette.css). На лаймовой плите
   янтарь по лайму не читается, поэтому здесь обводим чернилами плиты. */
.acid :focus-visible{ outline-color:var(--punch-ink) }

/* Тёплая песочная секция — зеркало .paper в другом климате. */
.warm{ background:var(--sand); color:var(--sand-ink) }
.warm .lead{ color:var(--sand-mut) }
.warm .kicker{ color:var(--acc-d) }
.warm .card{ background:var(--sand-card); border:1px solid var(--sand-line);
  box-shadow:0 18px 40px -28px rgba(36,28,11,.4) }
.warm .card p,.warm .note{ color:var(--sand-mut) }
.warm .ic{ color:var(--acc-d) }
.warm .go{ color:var(--acc-d) }

/* Заголовок и абзац стоят РЯДОМ, а не друг под другом по центру: это и есть
   разница между «сайтом» и «колонкой текста посередине экрана». */
.head{ display:grid; gap:22px }
/* Заголовок страницы — h1, а не h2: на внутренних страницах h1 не было
   вообще, и первым уровнем шёл второй. Кегль при этом остаётся прежним,
   заголовочным для раздела: h1 в общей шкале — это 78 px главной, и он
   раздавил бы шапку внутренней страницы. Уровень поменялся, вид — нет. */
.head h1,.head h2{ max-width:15ch }
.ptop .head h1{ font-family:var(--disp); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(22px,3vw,50px); line-height:1.12 }
.head .lead{ max-width:52ch }
@media (min-width:1000px){
  .head{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(40px,6vw,110px); align-items:end }
  .head-full{ grid-template-columns:1fr }
  .head-full h2{ max-width:22ch }
}
/* Надпись над заголовком — лаймом. У Ландо лайм один на весь сайт: им
   помечено всё, что «от бренда» (подписи, годы шлемов, кнопка), а мятный
   второй акцент делил страницу на два голоса. Мята у нас осталась за тем, что
   она и есть, — цветом интерфейса приложения: статусы, галочки, экраны. */
.kicker{ margin:0 0 4px; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cta) }

/* Заголовки разделов ГЛАВНОЙ — на ступень крупнее общей шкалы. Рядом с ними
   стоят плакатные надписи (герой до 84 px, «Хорошая кухня…» и «Всё, что
   нужно вашей кухне» около 70), и заголовки в 43 px читались подписями к
   разделам, а не их началом. У Ландо заголовок раздела — всегда событие. */
.is-home .head h2,
.is-home #together h2{ font-size:clamp(28px,4.1vw,66px); line-height:1.02; letter-spacing:-.015em }
.lead{ font-size:clamp(17px,1.32vw,22px); line-height:1.5; color:var(--muted) }

/* появление секции: подъём и проявление, один раз. Скрытое состояние живёт
   под .js: если скрипт не загрузился, страница стоит целиком, а не пустой. */
.js .rv{ opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .4s var(--e-reveal), transform .4s var(--e-reveal) }
.in > .rv,.in .rv{ opacity:1; transform:none }

/* КАРТОЧКА — ПЛОСКАЯ ПАНЕЛЬ, А НЕ СТЕКЛО.
   Класс по-прежнему .glass (он стоит в разметке всех страниц), но стекла в
   нём больше нет: ни размытия, ни бликов по кромке, ни тени. У Ландо все
   поверхности плоские — ровная заливка чуть светлее полотна и волосяная
   кромка, — и вес держат шрифт и лайм, а не блеск. Стекло с бликом рядом
   с огромными заголовками читалось чужим языком: «приложение 2021 года»
   поверх «плаката». Заодно ушла его давняя болезнь — пятна под прозрачной
   карточкой, которые подложка --glass-base гасила, но не до конца.
   Стекло осталось там, где оно работает, а не украшает: плашка шапки над
   бегущей страницей и карточка заказа на кадре фильма. */
.glass{
  background:var(--surf);
  border:1px solid var(--edge);
  border-radius:var(--r); position:relative;
  transition:border-color .25s var(--e-micro), background-color .25s var(--e-micro);
}
/* Карточка-ссылка отвечает кромкой — лаймовой, как рамки у Ландо. */
a.glass:hover{ border-color:var(--cta-edge); background-color:var(--surf-hi) }
.card{ padding:clamp(20px,1.7vw,28px); border-radius:var(--r) }

/* ─────────────────────────── шапка ─────────────────────────── */

.hdr{ position:fixed; z-index:60; left:0; right:0; top:0; padding:12px var(--pad);
  transition:transform .32s var(--e-reveal) }
.hdr.hide{ transform:translate3d(0,-140%,0) }
/* Под стеклом шапки — тёмная подложка (--glass-base). Без неё стекло брало
   цвет того, что едет под ним: над лаймовой плитой «Коротко цифрами» шапка
   становилась лаймовой, и белые «Меню» и разделы на ней пропадали. */
.hdr-in{ max-width:var(--maxw); margin:0 auto; padding:8px 10px 8px 16px;
  display:flex; align-items:center; gap:clamp(12px,2vw,28px); border-radius:18px;
  background:var(--glass); background-color:var(--glass-base); border:var(--hair);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow), var(--bevel) }

.brand{ display:flex; align-items:center; gap:10px; flex:none }
.brand-mark{ width:52px; height:auto; display:block }
.brand-name{ font-weight:800; letter-spacing:.16em; font-size:15px }

.hdr-nav{ display:flex; gap:clamp(14px,1.6vw,26px); margin-left:auto;
  font-size:14.5px; font-weight:600; color:var(--muted) }
.hdr-nav a{ position:relative; padding:6px 0;
  transition:color .16s var(--e-micro) }
.hdr-nav a:hover{ color:var(--ink) }
/* Текущий раздел подчёркнут, а не подсвечен цветом: цвет уже занят действием. */
.hdr-nav a[aria-current="page"]{ color:var(--ink) }
.hdr-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--cta) }

.lang{ display:flex; gap:2px; padding:3px; border-radius:12px;
  background:rgba(255,255,255,.06); flex:none }
.lang-b{ appearance:none; border:0; background:transparent; color:var(--muted);
  font:700 12px/1 Manrope, sans-serif; letter-spacing:.06em; padding:8px 9px;
  border-radius:9px; cursor:pointer;
  transition:color .16s var(--e-micro), background-color .16s var(--e-micro) }
.lang-b:hover{ color:var(--ink) }
.lang-b[aria-pressed="true"]{ background:rgba(255,255,255,.14); color:var(--ink) }

/* ── шапка на светлом полотне ──
   Полотно (tone.js) бывает светлым целиком — и стеклянная шапка со светлыми
   буквами на нём пропадала: #A7BCB4 на бумаге — это 1,8:1. Когда полотно
   переваливает за середину пути к светлому, tone.js ставит html.is-light, и
   шапка перетекает в молочное стекло с тёмными буквами (так же у Ландо
   меняется тема навигации). Молоко — отдельным слоем с прозрачностью:
   фон шапки — градиент, а градиент между двумя видами не перетекает. */
.hdr-in{ position:relative; isolation:isolate;
  transition:border-color .4s var(--e-micro), box-shadow .4s var(--e-micro) }
.hdr-in::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:rgba(249,251,250,.74); opacity:0; pointer-events:none;
  transition:opacity .4s var(--e-micro) }
.brand-name,.hdr-nav,.hdr-in .lang{ transition:color .4s var(--e-micro),
  background-color .4s var(--e-micro), border-color .4s var(--e-micro) }
.is-light .hdr-in{ border-color:rgba(13,26,21,.10);
  box-shadow:0 10px 28px -16px rgba(13,26,21,.30), var(--bevel) }
.is-light .hdr-in::before{ opacity:1 }
/* На светлом полотне тёмная подложка стекла не нужна (её место — молоко) и
   вредна: под молоком она давала серую шапку вместо белой. */
.is-light .hdr-in,.is-light .hdr-in::after{ background-color:transparent }
.is-light .brand-name{ color:var(--paper-ink) }
.is-light .hdr-nav{ color:var(--paper-mut); border-top-color:rgba(13,26,21,.08) }
.is-light .hdr-nav a:hover,
.is-light .hdr-nav a[aria-current="page"]{ color:var(--paper-ink) }
.is-light .hdr-nav a[aria-current="page"]::after{ background:var(--acc-d) }
/* Только язык В ШАПКЕ: в подвале свой переключатель, и он всегда на тёмном. */
.is-light .hdr-in .lang{ background:rgba(13,26,21,.06) }
.is-light .hdr-in .lang-b{ color:var(--paper-mut) }
.is-light .hdr-in .lang-b:hover{ color:var(--paper-ink) }
.is-light .hdr-in .lang-b[aria-pressed="true"]{ background:rgba(13,26,21,.09); color:var(--paper-ink) }

/* Дверь к пробному периоду. Единственная кнопка в шапке — поэтому ей можно
   быть яркой: она не соревнуется ни с чем. Надпись — капсом с разрядкой, как
   «STORE» у Ландо: кнопка читается знаком, а не фразой, и не спорит с
   пунктами меню, набранными строчными. */
.cta{ flex:none; display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px 12px 20px; border-radius:12px;
  background:var(--cta); color:var(--cta-ink);
  font-weight:800; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 10px 24px -12px var(--cta-glow);
  transition:transform .16s var(--e-micro), filter .16s var(--e-micro) }
.cta:hover{ transform:translate3d(0,-1px,0); filter:brightness(1.06) }
.cta .ic{ width:15px; height:15px; stroke-width:2.4 }
.cta:active{ transform:translate3d(0,0,0) }

/* ─────────────────────────── ссылки-действия ───────────────────────────
   Кнопок-«призывов» на сайте нет: разделы открывает шапка, а не дублирующая
   её кнопка в тексте. Осталась одна форма — строчная ссылка со стрелкой. */

/* Ссылка — чернилами, стрелка — лаймом: цвет говорит «от бренда», а не
   «это другой раздел». Мятные ссылки были вторым акцентом страницы. */
.go{ display:inline-flex; align-items:center; gap:9px; font-weight:700;
  font-size:clamp(15px,1.1vw,17px); color:var(--ink); padding:4px 0;
  border-bottom:1px solid transparent;
  transition:border-color .16s var(--e-micro), gap .16s var(--e-micro) }
.go .ic{ width:18px; height:18px; stroke-width:2; color:var(--cta) }
.go:hover{ gap:13px; border-bottom-color:currentColor }
.paper .go{ color:var(--acc-d) }
.paper .go .ic,.warm .go .ic{ color:inherit }

/* две двери рядом: главная — лаймовая, запасная — обычная */
.go-row{ display:flex; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap; align-items:center }
.go-demo{ color:var(--cta) }

/* ─────────────────────────── разбивка текст / визуал ─────────────────────────── */

.split{ display:grid; gap:clamp(28px,4vw,64px); align-items:center }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .split-5-7{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
  .split-7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
  .split-flip > *:first-child{ order:2 }
}

/* ─────────────────────────── плитки разделов ─────────────────────────── */

.tiles{ display:grid; gap:var(--gap); margin-top:clamp(34px,4vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.tile{ display:flex; flex-direction:column; gap:11px; min-height:180px;
  transition:transform .18s var(--e-micro) }
.tile:hover{ transform:translate3d(0,-3px,0) }
.tile .ic{ width:24px; height:24px; color:var(--muted); margin-bottom:6px }
.tile h3{ font-size:clamp(17px,1.2vw,20px) }
.tile p{ color:var(--muted); font-size:14.5px; line-height:1.45 }
.tile-go{ margin-top:auto; padding-top:12px; color:var(--ink); font-weight:700;
  font-size:13.5px; display:flex; align-items:center; gap:7px }
.tile-go .ic{ width:15px; height:15px; margin:0; stroke-width:2.2; color:var(--cta) }
.paper .tile-go{ color:var(--acc-d) }
.paper .tile-go .ic{ color:inherit }
.paper .tile .ic{ color:var(--acc-d) }

/* ВОСЕМЬ МОДУЛЕЙ НА ГЛАВНОЙ — плитки одной породы с «Двумя сторонами» и
   сеткой шлемов у Ландо: номер в углу, круглая стрелка напротив, название
   дисплейным шрифтом у нижней кромки. Слово «Подробнее» на каждой из восьми
   карточек повторяло одно и то же восемь раз — теперь это знак-стрелка, а
   слово осталось для читалки экрана. Лесенку колонн ведёт fx/parallax.js,
   раздачу карт — fx/arrive.js: оба трогают только translate/rotate/scale. */
#what .tiles{ counter-reset:mod }
#what .tile{ counter-increment:mod; position:relative; justify-content:flex-end; gap:10px;
  min-height:clamp(200px,16vw,256px); padding-top:clamp(64px,5vw,78px) }
#what .tile::before{ content:counter(mod, decimal-leading-zero); position:absolute;
  left:clamp(20px,1.7vw,28px); top:clamp(22px,1.9vw,30px);
  font:600 12.5px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing:.14em; color:var(--paper-mut) }
#what .tile .ic{ margin-bottom:2px }
#what .tile h3{ font-family:var(--disp); font-weight:700; letter-spacing:-.01em; line-height:1.08;
  font-size:clamp(18px,1.45vw,24px) }
#what .tile-go{ position:absolute; top:clamp(12px,1.2vw,20px); right:clamp(12px,1.2vw,20px);
  margin:0; padding:0; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--paper-line);
  transition:background-color .3s var(--e-micro), border-color .3s var(--e-micro), color .3s var(--e-micro),
    rotate .55s cubic-bezier(.165,.84,.44,1) }
#what .tile-go > span{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap }
#what .tile-go .ic{ width:16px; height:16px; margin:0 }
#what .tile:hover .tile-go,
#what .tile:focus-visible .tile-go{ background:var(--cta); border-color:var(--cta); color:var(--cta-ink); rotate:-45deg }
/* ДЕВЯТЬ ПЛИТОК (с 23.10.2026 — Академия). Общая сетка auto-fit на 1100–1340 px
   давала четыре колонны, и девятая плитка стояла одна в третьем ряду, а на
   двух колоннах — так же одна в пятом. Здесь колонны заданы под девятку:
   три ряда по три, а на двух колоннах последняя плитка ложится во всю ширину. */
@media (min-width:1100px) and (max-width:1339px){
  #what .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (min-width:1340px){
  #what .tiles{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}
@media (min-width:560px) and (max-width:899px){
  #what .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  #what .tile:last-child:nth-child(odd){ grid-column:1 / -1 }
}
@media (min-width:900px) and (max-width:1099px){
  #what .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
/* Телефон: карточки идут столбиком, и высота «под номер и стрелку» здесь
   только растягивает столбик — оставляем ровно строку номера. */
@media (max-width:640px){
  #what .tile{ min-height:0; padding-top:58px }
  #what .tile::before{ top:22px; left:16px }
  #what .tile-go{ top:12px; right:12px; width:40px; height:40px }
}

/* ─────────────────────────── крупные блоки модулей ─────────────────────────── */

.mrow{ padding-block:clamp(46px,5.4vw,92px); border-top:var(--hair) }
.mrow:first-of-type{ border-top:0 }
.paper .mrow{ border-top-color:var(--paper-line) }

.mrow-in{ display:grid; gap:clamp(24px,3vw,56px) }
@media (min-width:940px){
  .mrow-in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start }
}
.mrow-n{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.mrow-n .ic{ width:26px; height:26px; color:var(--acc-lit) }
.mrow-n b{ font:600 13px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing:.16em;
  color:var(--dim) }
.paper .mrow-n .ic{ color:var(--acc-d) }
.paper .mrow-n b{ color:var(--paper-mut) }
.mrow h3{ font-size:clamp(24px,2.5vw,40px); font-weight:800; letter-spacing:-.028em;
  max-width:16ch }
.mrow-lead{ margin-top:16px; font-size:clamp(16px,1.15vw,19px); color:var(--muted);
  max-width:46ch; line-height:1.5 }
.paper .mrow-lead{ color:var(--paper-mut) }

.mlist{ display:grid; gap:12px; align-content:start }
/* Список галочек, идущий сразу за абзацем-лидом, иначе прилипает к нему
   вплотную: галочка встаёт под последней строкой абзаца, и модуль читается
   одним слипшимся куском. */
.mrow-lead + .mlist{ margin-top:18px }
@media (min-width:640px){ .mlist{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.mlist li{ display:flex; gap:11px; font-size:14.5px; line-height:1.45; color:var(--muted) }
.mlist .ic{ width:17px; height:17px; margin-top:2px; stroke-width:2.2; color:var(--acc) }
.paper .mlist li{ color:var(--paper-mut) }
/* Двери модуля, который живёт по своему адресу (Академия, /academy): войти и попробовать. */
.mrow-go{ margin-top:clamp(22px,2.2vw,30px) }

/* ─────────────────────────── список-галочки ─────────────────────────── */

.checks{ display:grid; gap:13px; margin-top:26px }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:clamp(15px,1.1vw,17px);
  color:var(--muted); line-height:1.45 }
.checks .ic{ width:18px; height:18px; margin-top:2px; stroke-width:2.2; color:var(--acc-lit) }
.paper .checks li{ color:var(--paper-mut) }
.paper .checks .ic{ color:var(--acc-d) }

/* ─────────────────────────── цифры ─────────────────────────── */

.stats{ display:grid; gap:var(--gap); margin-top:clamp(30px,3.4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) }
.stat{ padding:clamp(20px,1.8vw,30px) }
.stat-v{ display:block; font-size:clamp(34px,3.6vw,58px); line-height:1;
  background:linear-gradient(160deg,var(--ink),var(--acc-lit)); -webkit-background-clip:text;
  background-clip:text; color:transparent }
.paper .stat-v{ background:linear-gradient(160deg,var(--paper-ink),var(--acc-d)); -webkit-background-clip:text; background-clip:text }
.stat-l{ display:block; margin-top:12px; color:var(--muted); font-size:14px; line-height:1.4 }
.paper .stat-l{ color:var(--paper-mut) }

/* Цифры на ударной плите — ТАБЛО, как большие цифры у Ландо: каждое число
   получает СТРОКУ во всю ширину плиты — число слева, подпись справа, между
   строками тёмная линейка. Стеклу на плите делать нечего.

   КЕГЛЬ ЗДЕСЬ — НЕ ВКУСОВЩИНА. Плита идёт во всю ширину экрана, и скромные
   числа на ней читаются как «секция не доделана»: краски много, работы мало.
   Число обязано занять свою полосу целиком — тогда площадь отработана и удар
   случается.

   Почему строки, а не пять колонок в ряд. В ряду пять чисел делили ширину,
   и кегль всем пяти диктовало самое длинное: «10–30 %» держало однознаки
   «1» и «0» на 78 px, колонки пришлось делать разной ширины и трижды
   перекладывать на узких экранах (5 → 3 + 2 → 2 + 2 + 1), а подпись стояла
   под числом мелкой строкой в 14 px. В строке у каждого числа своя половина
   плиты: кегль вырос в полтора раза, а подпись встала рядом крупно — число
   и подпись читаются одним утверждением. */
.acid .stats{ display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  margin-top:clamp(28px,3.2vw,48px);
  border-bottom:2px solid var(--punch-rule);
  /* Кегль числа считается от ШИРИНЫ ПЛИТЫ, а не окна (см. ниже) — плите
     нужно быть контейнером запроса. */
  container-type:inline-size }
/* Своя высота у плиты. Общий воздух секции (до 150px сверху и снизу) на
   сплошном лайме читается не как воздух, а как незаполненное место: у
   цветной плиты поля должны быть теснее, чем у страницы. */
.acid{ --sect-pad:clamp(48px,5.4vw,88px) }
.acid .stat{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:baseline;
  background:none; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  padding:clamp(16px,1.6vw,22px) 0;
  border-top:2px solid var(--punch-rule) }
/* Колонки одинаковые в каждой строке, поэтому числа и подписи стоят двумя
   ровными столбцами без общей сетки (subgrid не нужен). */
@media (min-width:900px){
  .acid .stat{ grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(24px,3vw,56px); align-items:center }
}
/* nowrap — чтобы диапазон никогда не разрывался переносом. */
.acid .stat-v{ font-family:var(--disp); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(52px,6vw,108px); line-height:.88; white-space:nowrap;
  background:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--punch-ink) }
/* Кегль от ширины ПЛИТЫ, а не окна: на мониторе 1920 --maxw упирается в
   1680, полоса замирает, а vw продолжал бы расти. 7,6 % плиты — кегль, при
   котором «10–30 %» занимает свою половину строки почти целиком. Строка
   выше во vw — запасная, для движков без запросов к контейнеру. */
.acid .stat-v{ font-size:clamp(52px,7.6cqw,112px) }
.acid .stat-l{ margin:0; color:var(--punch-ink); font-weight:600;
  font-size:clamp(16px,1.5vw,23px); line-height:1.3; letter-spacing:-.01em;
  max-width:30em; text-wrap:pretty }
/* Телефон: подпись встаёт РЯДОМ с числом, если рядом есть место (однозначные
   «3», «1», «0»), и под ним, если нет («10–30 %», «+40 %»). Плита короче на
   три строки, и ни одна подпись не зажата в узкую щель у длинного числа. */
@media (max-width:899px){
  .acid .stat{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px }
  .acid .stat-l{ flex:1 1 11em }
}

/* Единица при числе («%»). Отдельной строкой она читалась бы вторым числом,
   поэтому идёт вплотную к первому и кеглем вдвое меньше. */
.stat-u{ font-style:normal; font-size:.4em; letter-spacing:0; margin-left:.1em }

/* Сноска под числами. Процент без открытого расчёта читается как реклама,
   процент с расчётом — как аргумент; поэтому сноска тут обязательная часть
   плиты, а не примечание, которое можно опустить. */
.stats-note{ margin-top:clamp(22px,2.4vw,34px); max-width:72ch;
  font-size:13px; line-height:1.55; color:var(--muted) }
.acid .stats-note{ color:var(--punch-soft); font-weight:600; opacity:.86 }

/* ─────────────────────────── шаги ─────────────────────────── */

.steps{ display:grid; gap:var(--gap); margin-top:clamp(34px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.step{ padding:clamp(24px,2vw,34px) }
.step-n{ display:block; font-size:clamp(28px,2.6vw,40px); color:var(--cta); margin-bottom:16px;
  font-family:var(--disp); font-weight:800; letter-spacing:0 }
.paper .step-n{ color:var(--acc-d) }
.step h3{ margin-bottom:10px }
.step p{ color:var(--muted); font-size:15px; line-height:1.5 }

/* ─────────────────────────── вопросы ─────────────────────────── */

.faq{ display:grid; gap:10px; margin-top:clamp(34px,4vw,56px); max-width:900px }
/* На мониторе восемь вопросов одной колонкой в 900 px оставляли правую
   треть пустой — та самая пустота «всё в середине». Две колонки: каждая
   раскрывается сама по себе, соседка остаётся прижатой к верху ряда. */
@media (min-width:1000px){
  .faq{ max-width:none; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
}
.faq-i{ padding:0; overflow:hidden }
.faq-i summary{ list-style:none; cursor:pointer; padding:20px 58px 20px 24px;
  font-weight:700; font-size:clamp(16px,1.2vw,19px); letter-spacing:-.015em; position:relative }
.faq-i summary::-webkit-details-marker{ display:none }
/* Знак «плюс» справа — тот же живой знак, что везде на сайте: при раскрытии
   перетекает в минус (icons.js), при закрытии — обратно. Раньше это делали
   два псевдоэлемента поворотом черты. */
.ic-faq{ position:absolute; right:22px; top:50%; translate:0 -50%;
  width:18px; height:18px; stroke-width:2.1; color:var(--dim);
  transition:color .2s var(--e-micro) }
.faq-i[open] .ic-faq{ color:var(--acc-lit) }
.faq-i p{ padding:0 24px 24px; color:var(--muted); font-size:15.5px; line-height:1.55; max-width:70ch }
.paper .faq-i p{ color:var(--paper-mut) }
.paper .faq-i .ic-faq{ color:var(--paper-mut) }
.paper .faq-i[open] .ic-faq{ color:var(--acc-d) }

/* ─────────────────────────── подвал ─────────────────────────── */

/* Подвал — продолжение полотна, а не плита поверх него: ни заливки, ни
   кромки, ни тени. Отделяет его от страницы только воздух и гигантская
   фраза. */
.ftr{ padding:clamp(44px,5vw,76px) 0 30px; position:relative; overflow:hidden }

/* Гигантская фраза над колонками — фирменная подпись сайта. Одним цветом и
   без движения: величина и есть приём. */
.ftr-giant{ margin:0 0 clamp(36px,5vw,84px);
  font-family:var(--disp); font-weight:800; letter-spacing:0; line-height:1;
  font-size:clamp(28px,7vw,124px); color:var(--punch);
  white-space:nowrap }
/* От края до края колонки, как подпись во всю ширину у Ландо: кегль — доля
   ширины САМОЙ колонки. 9,2 % рассчитаны на самую длинную из трёх фраз
   («Hammasi joyida.», «It all adds up.» — по 15 знаков): она встаёт почти во
   всю ширину, русская (13 знаков) — на шесть седьмых. Строка выше — для
   движков без запросов к контейнеру. */
.ftr > .wrap:first-child{ container-type:inline-size }
.ftr-giant{ font-size:clamp(28px,9.2cqi,190px) }

.ftr-in{ display:grid; gap:32px }
@media (min-width:840px){ .ftr-in{ grid-template-columns:1.3fr .7fr .8fr 1.35fr; align-items:start } }
/* Контакты в подвале: знак — и сразу значения. Подписи над строками
   («ТЕЛЕФОН / ФАКС», «ЭЛ. ПОЧТА», «АДРЕС») убраны: колонка уже несёт заголовок
   «СВЯЗЬ», и ещё три капслочные строки поверх знаков превращали живые контакты
   в бланк. Знак слева говорит то же самое молча; слово осталось в .vh — для
   читалки экрана. Правило .ftr-ctl удалено вместе с ними.

   Знак поднят к ПЕРВОЙ строке значения: 16 px значка против строки 14,5/1.45
   (≈21 px) — оптический центр даёт margin-top:2px. */
.ftr-ct{ display:grid; gap:14px; margin-top:6px }
.ftr-ct li{ display:grid; grid-template-columns:16px minmax(0,1fr); gap:10px; align-items:start }
.ftr-ct .ic{ width:16px; height:16px; stroke-width:1.9; color:var(--dim); margin-top:2px }
/* 2 px между двумя телефонами читались как перенос одной строки, а не как два
   номера. 5 px — пара внутри группы, 14 px — расстояние между группами. */
.ftr-ct div{ display:grid; gap:5px; justify-items:start }
.ftr-ct a{ font-size:14px; line-height:1.45 }
.ftr-ct a.num{ font-size:14.5px; letter-spacing:0 }
.ftr-ctv{ color:var(--muted); font-size:14px; line-height:1.45 }
.ftr-brand p{ margin-top:14px; color:var(--muted); font-size:14.5px; max-width:34ch }
.ftr-h{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-bottom:14px }
.ftr-col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.ftr-col a{ color:var(--muted); font-weight:600; font-size:14.5px;
  transition:color .16s var(--e-micro) }
.ftr-col a:hover{ color:var(--ink) }
.ftr-col a.is-glow{ color:var(--cta) }
.ftr-col a.is-glow:hover{ color:var(--ink) }

/* строка со знаком: канал, инстаграм, личный телеграм */
.ftr-soc{ display:inline-flex; align-items:center; gap:9px }
.ftr-soc .ic{ width:16px; height:16px; stroke-width:1.9; color:var(--dim);
  transition:color .16s var(--e-micro) }
.ftr-soc:hover .ic{ color:var(--cta) }
.ftr-soc small{ font-size:12px; font-weight:600; color:var(--dim) }

/* ─────────────── приложение в магазинах ───────────────
   Две кнопки: iPhone → App Store, Android → Google Play. Стоят в подвале КАЖДОЙ
   страницы, в шторке телефона и в хвосте главной (разметку и адреса печатает
   build.mjs, подстановка {{STORE}}). По виду — родня плиткам входа на /demo
   (.dm-app): знак устройства в квадрате, мелкая подпись и название. Лайм — только
   на наведении: главная кнопка страницы одна, и она не здесь. flex-wrap — на
   узком экране кнопки складываются столбиком, а не лезут за край. */
.store{ display:flex; flex-wrap:wrap; gap:10px }
.store-b{ display:inline-grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:11px;
  padding:8px 16px 8px 8px; border-radius:14px; color:var(--ink);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s var(--e-micro), background-color .18s var(--e-micro),
             transform .18s var(--e-micro) }
.store-b:hover{ border-color:var(--cta-edge); background:rgba(255,255,255,.09); transform:translate3d(0,-2px,0) }
.store-b:active{ transform:translate3d(0,0,0) }
.store-ic{ display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
  transition:color .18s var(--e-micro) }
.store-b:hover .store-ic{ color:var(--cta) }
.store-ic .ic{ width:20px; height:20px; stroke-width:1.7 }
.store-play{ width:18px; height:18px; fill:currentColor; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round }
.store-t{ display:grid; gap:1px; text-align:left; min-width:0 }
.store-t small{ font-size:11.5px; font-weight:600; color:var(--dim); letter-spacing:.02em; line-height:1.3 }
.store-t b{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; line-height:1.2; white-space:nowrap }
/* Подвал: заголовок «Скачать приложение» — как у соседних колонок, но он
   принадлежит колонке бренда, которая заголовка не имела, — отсюда отступ сверху. */
.ftr-store-h{ margin:22px 0 12px }

.ftr-cr{ margin-top:clamp(34px,4vw,56px); text-align:center; color:var(--dim); font-size:12.5px }
/* Правовые ссылки живут ВНУТРИ строки копирайта, а не отдельной колонкой: они
   обязаны быть на каждой странице (требование магазинов), но выкрикивать их
   незачем. Строчные элементы в центрированном абзаце переносятся сами —
   раскладку под них менять не нужно. */
.ftr-cr a{ margin-left:18px; color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(167,188,180,.32);
  /* ссылка переносится целиком: на телефоне «данных» уходило на свою строку */
  white-space:nowrap }
.ftr-cr a:hover{ color:var(--ink); text-decoration-color:var(--acc-lit) }

/* ─────────────── первая секция внутренних страниц ───────────────
   Шапка висит поверх, поэтому первому экрану нужен запас сверху. */
.ptop{ padding-top:clamp(122px,15vh,196px); padding-bottom:clamp(28px,3vw,52px) }
/* Шапка страницы и первый блок — это один разворот, а не две секции:
   без этого их отступы складывались и между ними зияла пустая полоса. */
.ptop + .sect-sm{ padding-top:clamp(16px,2.2vw,38px) }

/* ─────────────── цепочка «что за чем» ─────────────── */
.chain{ display:grid; gap:12px }
.chain-i{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px;
  align-items:center; padding:18px 22px }
/* Номер шага — нейтральный: лаймом его зажигает волна поля (field.css,
   .is-lit), когда событие докатилось до шага. Мятная и янтарная заливки
   спорили с этой подсветкой — было три цвета на четыре строки. */
.chain-n{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  font-size:15px; background:rgba(234,243,239,.05);
  border:1px solid var(--edge); color:var(--ink) }
.chain-i p{ color:var(--muted); font-size:15.5px; line-height:1.45 }
.chain-i h4{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.02em }
.chain-3{ grid-template-columns:repeat(auto-fit,minmax(196px,1fr)) }
.chain-3 .chain-i{ grid-template-columns:minmax(0,1fr); gap:11px;
  align-items:start; padding:22px }

/* ─────────────── две стороны ───────────────
   Раскол «Ресторану / Поставщику» — приём «ON TRACK / OFF TRACK» Ландо: две
   половины экрана, в каждой одно огромное слово. На мониторе наведение
   раздвигает выбранную половину (flex-grow) и заливает её лаймом, соседняя
   уступает. Кегль слова считается от ширины САМОЙ половины (cqi): растёт
   половина — растёт и слово, сжимается соседка — её слово ужимается вместе
   с ней, а не вылезает за кромку. Протирку плашкой ведёт fx/reveal.js
   (.sides > .side), въезд половин с боков — fx/parallax.js (.sides). */
.sides{ display:grid; gap:var(--gap) }
/* Поле — через .sides > .side: общее «.card{padding:16px}» телефона стоит
   ниже по файлу и сдвинуло бы слово относительно номера в углу. */
.sides > .side{ padding:clamp(24px,2.8vw,48px) }
.side{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:14px;
  container-type:inline-size; min-width:0;
  min-height:clamp(300px,56vh,600px);
  border-radius:clamp(24px,2.4vw,40px); overflow:hidden;
  background:var(--surf); border:1px solid var(--edge); color:var(--ink);
  transition:flex-grow .75s cubic-bezier(.165,.84,.44,1),
    background-color .45s var(--e-micro), border-color .45s var(--e-micro), color .45s var(--e-micro) }
.side-n{ position:absolute; left:clamp(24px,2.8vw,48px); top:clamp(24px,2.8vw,46px);
  font-size:13px; letter-spacing:.14em; color:var(--dim); transition:color .45s var(--e-micro) }
.side-arrow{ position:absolute; right:clamp(18px,2.2vw,38px); top:clamp(16px,2vw,34px);
  display:grid; place-items:center; width:clamp(50px,4.6vw,76px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--edge); color:var(--cta);
  transition:rotate .7s cubic-bezier(.165,.84,.44,1), background-color .45s var(--e-micro),
    color .45s var(--e-micro), border-color .45s var(--e-micro) }
.side-arrow .ic{ width:40%; height:40%; stroke-width:1.7 }
.side h3{ font-family:var(--disp); font-weight:700; letter-spacing:-.025em; line-height:.94;
  font-size:clamp(32px,4.6vw,84px); font-size:clamp(32px,11.4cqi,110px);
  text-wrap:balance; margin-bottom:6px }
.side p{ color:var(--muted); font-size:clamp(15px,1.1vw,17px); line-height:1.5; max-width:40ch;
  transition:color .45s var(--e-micro) }
.side .go{ color:var(--ink); padding-top:4px; transition:color .45s var(--e-micro) }
@media (min-width:900px){
  .sides{ display:flex }
  .side{ flex:1 1 0 }
}
/* Телефон: половины друг под другом, и каждая — треть экрана, а не
   полэкрана пустоты над словом. Наведения нет — отвечает касание. */
@media (max-width:899px){
  .side{ min-height:clamp(230px,34vh,320px) }
  .side:active{ border-color:var(--cta-edge); background-color:var(--surf-hi) }
}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .sides:hover > .side{ flex-grow:.8 }
  .sides > .side:hover{ flex-grow:1.32; background:var(--cta); border-color:var(--cta); color:var(--cta-ink) }
  .side:hover p{ color:var(--punch-soft) }
  .side:hover .side-n{ color:var(--punch-mut) }
  .side:hover .side-arrow{ rotate:-45deg; background:var(--cta-ink); border-color:var(--cta-ink); color:var(--cta) }
  .side:hover .go,.side:hover .go .ic{ color:var(--cta-ink) }
}
@media (prefers-reduced-motion:reduce){
  .side,.side-arrow{ transition:none }
}

/* ─────────────── хвост страницы ─────────────── */
/* Хвост — ФИНАЛ страницы, как последняя панель у Ландо: плоская тёмная
   плита в лаймовой рамке, заголовок втрое крупнее абзаца и главная ссылка
   дисплейным шрифтом с лаймовым кругом-стрелкой. Кнопкой-призывом она не
   стала (правило сайта: в тексте — ссылки, кнопка одна, в шапке), но и
   строчкой мелкого шрифта в углу больше не теряется. Главная — первая
   ссылка хвоста; вторая остаётся обычной «.go». Разметку страниц это не
   трогает: хвосты всех восьми страниц устроены одинаково. */
.tail{ padding:clamp(32px,5vw,88px); display:grid; gap:18px; justify-items:start;
  border-radius:clamp(26px,2.6vw,44px); border-color:rgba(217,246,92,.55) }
.tail h2{ font-size:clamp(28px,4.4vw,72px); line-height:1.02; letter-spacing:-.02em; max-width:14ch }
.tail .lead{ max-width:52ch }
.tail .go{ margin-top:6px }
.tail > .go,
.tail .go-row > .go:first-child{
  gap:16px; margin-top:14px; padding:0; border:0; color:var(--ink);
  font-family:var(--disp); font-weight:700; font-size:clamp(18px,1.75vw,28px);
  letter-spacing:-.01em; line-height:1.15 }
.tail > .go .ic,
.tail .go-row > .go:first-child .ic{
  order:2; box-sizing:border-box; width:clamp(46px,3.8vw,62px); height:auto; aspect-ratio:1;
  padding:clamp(12px,1vw,17px); border-radius:50%;
  background:var(--cta); color:var(--cta-ink); stroke-width:2;
  transition:rotate .6s cubic-bezier(.165,.84,.44,1) }
.tail > .go:hover,
.tail .go-row > .go:first-child:hover{ gap:20px }
.tail > .go:hover .ic,
.tail .go-row > .go:first-child:hover .ic{ rotate:-45deg }
.tail .go-row{ row-gap:14px }
/* Если в хвосте кнопка (на «Тарифах» — «Подключить»), она крупнее шапочной:
   рядом заголовок в 72 px, и кнопка шапки рядом с ним читалась ярлыком. */
.tail .cta{ padding:17px 24px 17px 26px; font-size:14px; border-radius:14px; gap:12px }
.tail .cta .ic{ width:17px; height:17px }
/* Магазины в хвосте главной: под главными ссылками, крупнее подвальных — рядом
   заголовок в 72 px, и кнопки в 38 px читались бы мелочью. */
.tail-store{ display:grid; gap:12px; margin-top:clamp(8px,1.4vw,22px) }
.tail-store .kicker{ margin:0 }
.tail .store-b{ padding:10px 22px 10px 10px; border-radius:16px; gap:13px }
.tail .store-ic{ width:46px; height:46px; border-radius:12px }
.tail .store-ic .ic{ width:22px; height:22px }
.tail .store-play{ width:20px; height:20px }
.tail .store-t small{ font-size:12px }
.tail .store-t b{ font-size:17px }

.note{ margin-top:24px; color:var(--dim); font-size:13.5px; max-width:66ch; line-height:1.5 }
.paper .note{ color:var(--paper-mut) }

/* ─────────────── схема «одна камера» ───────────────
   Связи — один статичный контур. По проводам ничего не бежит: схема
   объясняет устройство, а не привлекает внимание к себе. */
.flow{ margin-top:8px; display:grid; gap:0; align-items:center }
.flow-src{ display:inline-flex; align-items:center; gap:10px; padding:13px 20px;
  border-radius:15px; font-weight:700; font-size:14.5px; justify-self:start;
  margin-left:20px }
.flow-src .ic{ color:var(--acc-lit) }
.flow-wires{ display:none }
.flow-tree{ position:relative; display:grid; gap:12px; padding-left:44px; margin-top:18px }
.flow-tree::before{ content:""; position:absolute; left:20px; top:-18px; bottom:50%;
  width:2px; background:linear-gradient(180deg, rgba(29,158,117,.55), rgba(217,246,92,.35)) }
.flow-card{ position:relative; padding:17px 21px }
.flow-card::before{ content:""; position:absolute; left:-24px; top:50%; width:24px; height:2px;
  background:linear-gradient(90deg, rgba(29,158,117,.55), rgba(217,246,92,.35)) }
.flow-card h4{ margin:0 0 5px; font-size:17px; font-weight:700; letter-spacing:-.02em }
.flow-card p{ color:var(--muted); font-size:14.5px; line-height:1.45 }
@media (min-width:900px){
  .flow{ grid-template-columns:auto 120px minmax(0,1fr); align-items:stretch }
  .flow-src{ align-self:center; margin-left:0 }
  .flow-wires{ display:block; width:120px; height:auto; align-self:stretch }
  .flow-tree{ padding-left:0; margin-top:0 }
  .flow-tree::before,.flow-card::before{ display:none }
}

/* ─────────────── приватность: что уходит наружу ─────────────── */
.privbox{ display:flex; flex-direction:column; align-items:center }
.privbox-in{ width:100%; max-width:380px; padding:20px }
.privbox-lab{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-mut); margin-bottom:13px }
.privbox-frame{ position:relative; height:132px; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, rgba(29,158,117,.14), rgba(13,26,21,.05));
  border:1px dashed var(--paper-line) }
.pf{ position:absolute; border-radius:6px; border:1.7px solid rgba(21,128,96,.75) }
.pf-a{ left:15%; top:22%; width:46px; height:60px }
.pf-b{ left:47%; top:34%; width:40px; height:52px }
.pf-c{ left:73%; top:26%; width:36px; height:46px; border-color:var(--gold) }
.privbox-tag{ position:absolute; left:12px; bottom:10px; font-size:11px; color:var(--paper-mut) }
.privbox-wire{ width:2px; height:54px;
  background:linear-gradient(180deg, rgba(29,158,117,.6), rgba(217,246,92,.35)) }
.privbox-nums{ display:flex; gap:10px }
.privbox-nums .num{ flex:1; text-align:center; padding:14px 6px; border-radius:12px;
  font-size:20px; background:rgba(13,26,21,.05); border:1px solid var(--paper-line) }

/* ─────────────── паспорт поставщика ─────────────── */
/* Шесть карточек — три в ряд, а не сколько влезет: auto-fit на мониторе
   давал четыре колонки, то есть ряд 4 + 2 с пустотой справа от последних
   двух. Три и три — ровно, на любой ширине от планшета. */
.passgrid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:560px){ .passgrid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.passgrid .card{ padding:20px 18px }
.pass-n{ display:block; font-size:clamp(21px,1.9vw,30px); line-height:1;
  font-family:var(--disp); font-weight:700; letter-spacing:0 }
.warm .pass-n{ color:var(--sand-ink) }
.pass-l{ display:block; margin-top:9px; font-size:13px; color:var(--paper-mut); line-height:1.35 }
.warm .pass-l{ color:var(--sand-mut) }

/* ═══════════════════════════════════════════════════════════════
   ТАРИФЫ
   ═══════════════════════════════════════════════════════════════ */

/* Пять тарифов не делятся на сетку ровно ни на каком экране, поэтому
   раскладок три: узкий — карточка столбиком, средний — строка (картинка
   слева, текст справа), широкий — пять колонок. Иначе на среднем экране
   получались пять сплющенных колонок по 210 px, где не читается ни цена,
   ни картинка. */
.plans{ display:grid; gap:var(--gap); margin-top:clamp(30px,3.4vw,52px);
  grid-template-columns:minmax(0,1fr) }

.plan{ display:grid; grid-template-rows:auto 1fr; padding:0; overflow:hidden }

@media (min-width:700px) and (max-width:1399px){
  .plan{ grid-template-columns:minmax(0,270px) minmax(0,1fr); grid-template-rows:auto;
    align-items:center }
  .plan .pviz{ border-bottom:0; border-right:var(--hair); height:100% }
  .plan > .plan-body{ padding-block:clamp(22px,2vw,30px) }
  .plan-d{ padding-bottom:0 }
}
/* Начиная с планшета строка распадается на четыре колонки — картинка, имя,
   цена, описание. Иначе справа оставалось полэкрана пустоты, а именно она и
   читается как «всё сдвинуто в середину». display:contents отдаёт детей
   .plan-body прямо в сетку карточки, без лишней обёртки. */
@media (min-width:960px) and (max-width:1399px){
  .plan{ grid-template-columns:minmax(0,270px) minmax(0,170px) minmax(0,210px) minmax(0,1fr) }
  .plan > .plan-body{ display:contents }
  .plan-n{ margin-top:0 }
  .plan-p{ margin:0 }
  .plan-d{ margin-top:0; padding-bottom:0 }
}
@media (min-width:1400px){
  .plans{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
.plan-hi{ border-color:rgba(29,158,117,.42);
  background:linear-gradient(160deg, rgba(29,158,117,.22), rgba(255,255,255,.05)) }
.plan-badge{ position:absolute; z-index:2; top:14px; right:14px; padding:5px 11px;
  border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em;
  background:var(--acc); color:var(--ink-on-acc) }
.plan-body{ display:flex; flex-direction:column; min-width:0 }
.plan-n{ margin-top:22px; font-size:13.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); font-weight:700 }
.plan-p{ margin:10px 0 12px; font-size:clamp(19px,1.7vw,25px) }
.plan-p .num{ font-size:inherit; font-family:var(--disp); font-weight:700; letter-spacing:0 }
.plan-p-txt{ font-family:"Space Grotesk", Manrope, sans-serif; font-weight:600 }
.plan-d{ color:var(--muted); font-size:14.5px; line-height:1.45; margin-top:auto;
  padding-bottom:26px }
.plan-n,.plan-p,.plan-d{ padding-inline:clamp(20px,1.7vw,26px) }
.pviz{ display:grid; place-items:center }

/* Картинка тарифа. Играет ОДИН раз, когда карточка доехала до экрана, и
   замирает в конечном виде: бесконечный цикл на пяти карточках сразу —
   это ровно то, что владелец назвал дешёвым. */
.pviz{ border-bottom:var(--hair); background:rgba(0,0,0,.18); color:rgba(234,243,239,.42) }
.pviz svg{ width:100%; height:auto; display:block }
.pviz .v-box,.pviz .v-room,.pviz .v-ic,.pviz .v-line,.pviz .v-head,
.pviz .v-axis,.pviz .v-dash,.pviz .v-ok circle,.pviz .v-ok path,
.pviz .v-pill rect,.pviz .v-pill path,.pviz .v-link,.pviz .v-hub,.pviz .v-hub-i,
.pviz .v-pin circle,.pviz .v-pin path,.pviz .v-qr rect,.pviz .v-qr path,
.pviz .v-cone{ fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.pviz .v-num{ fill:var(--acc-lit); font:600 26px/1 "Space Grotesk", Manrope, sans-serif }

/* 01 — заказ уходит поставщику */
[data-viz="buy"] .v-line{ stroke-dasharray:96; stroke-dashoffset:96;
  transition:stroke-dashoffset .66s var(--e-reveal) .12s }
[data-viz="buy"] .v-head,[data-viz="buy"] .v-ok{ opacity:0 }
[data-viz="buy"] .v-head{ transition:opacity .28s .72s }
[data-viz="buy"] .v-ok{ color:var(--acc-lit); transform-box:fill-box; transform-origin:center;
  transform:scale(.5); transition:opacity .3s .86s, transform .42s var(--e-reveal) .86s }
.is-on[data-viz="buy"] .v-line{ stroke-dashoffset:0 }
.is-on[data-viz="buy"] .v-head,.is-on[data-viz="buy"] .v-ok{ opacity:1 }
.is-on[data-viz="buy"] .v-ok{ transform:scale(1) }

/* 02 — остаток падает, автозаказ собирается сам */
[data-viz="stock"] .v-bar{ fill:rgba(63,211,162,.34); stroke:none;
  transform-box:fill-box; transform-origin:bottom; transform:scaleY(0);
  transition:transform .5s var(--e-reveal) }
[data-viz="stock"] .v-bar.is-low{ fill:rgba(242,198,98,.72) }
[data-viz="stock"] .b1{ transition-delay:.06s } [data-viz="stock"] .b2{ transition-delay:.16s }
[data-viz="stock"] .b3{ transition-delay:.26s } [data-viz="stock"] .b4{ transition-delay:.36s }
[data-viz="stock"] .v-pill{ opacity:0; color:var(--acc-lit);
  transform-box:fill-box; transform-origin:center; transform:translateX(12px);
  transition:opacity .34s .74s, transform .44s var(--e-reveal) .74s }
.is-on[data-viz="stock"] .v-bar{ transform:scaleY(1) }
.is-on[data-viz="stock"] .v-pill{ opacity:1; transform:none }

/* 03 — камера считает зал */
[data-viz="hall"] .v-cone{ fill:rgba(63,211,162,.10); opacity:0; transition:opacity .4s .1s }
[data-viz="hall"] .v-p{ fill:rgba(63,211,162,.8); stroke:none; opacity:0;
  transform-box:fill-box; transform-origin:center; transform:scale(.3);
  transition:opacity .3s var(--e-reveal), transform .38s var(--e-reveal) }
[data-viz="hall"] .p1{ transition-delay:.30s } [data-viz="hall"] .p2{ transition-delay:.44s }
[data-viz="hall"] .p3{ transition-delay:.58s } [data-viz="hall"] .p4{ transition-delay:.72s }
.is-on[data-viz="hall"] .v-cone{ opacity:1 }
.is-on[data-viz="hall"] .v-p{ opacity:1; transform:scale(1) }

/* 04 — столы занимаются, гость сканирует QR */
[data-viz="book"] .v-t{ fill:rgba(234,243,239,.05); stroke:currentColor; stroke-width:1.6;
  transition:fill .4s var(--e-micro), stroke .4s var(--e-micro) }
[data-viz="book"] .t1{ transition-delay:.10s } [data-viz="book"] .t2{ transition-delay:.22s }
[data-viz="book"] .t3{ transition-delay:.34s } [data-viz="book"] .t5{ transition-delay:.46s }
[data-viz="book"] .v-qr{ opacity:0; color:var(--acc-lit);
  transform-box:fill-box; transform-origin:center; transform:scale(.86);
  transition:opacity .36s .62s, transform .46s var(--e-reveal) .62s }
.is-on[data-viz="book"] .t1,.is-on[data-viz="book"] .t2,
.is-on[data-viz="book"] .t3,.is-on[data-viz="book"] .t5{
  fill:rgba(63,211,162,.30); stroke:rgba(63,211,162,.9) }
.is-on[data-viz="book"] .v-qr{ opacity:1; transform:none }

/* 05 — несколько точек одной сети */
[data-viz="net"] .v-link{ stroke-dasharray:120; stroke-dashoffset:120;
  transition:stroke-dashoffset .6s var(--e-reveal) }
[data-viz="net"] .l1{ transition-delay:.14s } [data-viz="net"] .l2{ transition-delay:.26s }
[data-viz="net"] .l3{ transition-delay:.38s }
[data-viz="net"] .v-hub,[data-viz="net"] .v-hub-i{ color:var(--acc-lit) }
[data-viz="net"] .v-pin{ opacity:0; transform-box:fill-box; transform-origin:center;
  transform:scale(.5); transition:opacity .3s var(--e-reveal), transform .4s var(--e-reveal) }
[data-viz="net"] .n1{ transition-delay:.52s } [data-viz="net"] .n2{ transition-delay:.62s }
[data-viz="net"] .n3{ transition-delay:.72s }
.is-on[data-viz="net"] .v-link{ stroke-dashoffset:0 }
.is-on[data-viz="net"] .v-pin{ opacity:1; transform:scale(1) }

/* ─────────────── таблица тарифов ─────────────── */
.matrix{ margin-top:clamp(28px,3vw,44px); border-radius:var(--r);
  border:1px solid var(--paper-line); overflow-x:auto;
  /* Тени по краям гаснут, когда тянуть больше некуда: белые пятна едут
     вместе с содержимым (local), тени стоят на месте (scroll) и оказываются
     закрыты, пока таблица у своего края. Это единственная подсказка «тяните
     вбок», которая не врёт: её нет, когда тянуть нечего. */
  background:
    linear-gradient(to right, #fff 34%, rgba(255,255,255,0)) left / 44px 100% no-repeat local,
    linear-gradient(to left,  #fff 34%, rgba(255,255,255,0)) right / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(13,26,21,.17), transparent) left / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13,26,21,.17), transparent) right / 15px 100% no-repeat scroll,
    #fff }

/* Название строки не уезжает вместе с колонками: иначе, дотянув до
   «Business», уже не понять, о какой возможности речь. */
.mx tbody th, .mx thead th:first-child{
  position:sticky; left:0; z-index:2; background:#fff;
  box-shadow:1px 0 0 var(--paper-line) }
.mx tbody tr:hover > th{ background:#fff }
.mx{ width:100%; min-width:760px; border-collapse:collapse; font-size:14px }
.mx th,.mx td{ padding:15px 14px; text-align:center;
  border-bottom:1px solid var(--paper-line) }
.mx thead th{ font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--paper-mut); white-space:nowrap }
.mx thead th:first-child{ text-align:left }
.mx tbody th{ text-align:left; font-weight:600; color:var(--paper-ink); min-width:250px }
.mx tbody tr:last-child > *{ border-bottom:0 }
.mx tbody tr:hover > *{ background:rgba(13,26,21,.03) }
.mx .ic{ display:inline-block; width:18px; height:18px }
.mx td.y .ic{ color:var(--acc-d); stroke-width:2.3 }
.mx td.n .ic{ color:rgba(85,107,99,.4) }
.mx .num{ font-size:14.5px }

/* ─────────────────────────── телефон ─────────────────────────── */

@media (max-width:860px){
  .hdr{ padding:10px 12px }
  /* Шапка телефона — ОДНА строка: знак, кнопка, «Меню». Разделы и язык
     живут в шторке (#mnav). Раньше разделы ехали вторым рядом и обрывались
     у края экрана: шапка съедала пятую часть первого экрана, а «Тарифы»
     всё равно не помещались. */
  .hdr-in{ padding:8px 8px 8px 10px; gap:8px }
  .brand-name{ display:none }
  .hdr-nav,.hdr-in .lang{ display:none }
  .cta{ margin-left:auto; padding:10px 13px; font-size:12px }
  /* Шесть колонок в 390px не уместить никак — таблица едет вбок. Но чем уже
     первая колонка, тем больше тарифов видно сразу, а значит меньше тянуть. */
  .matrix{ background-size:32px 100%, 32px 100%, 12px 100%, 12px 100%, auto }
  .mx{ min-width:600px; font-size:13.5px }
  .mx th,.mx td{ padding:13px 10px }
  /* Липкая колонка названий — ФИКСИРОВАННОЙ ширины, и снап считается от неё
     же. Раньше стоял min-width:172px, колонка сама вырастала до 226 px под
     самое длинное название, а снап был прибит к 192 px — и браузер ещё до
     первого касания уводил таблицу на 34 px влево: «СТАНДАРТ» прятался
     под липкую колонку, торчал только хвост «…НДАРТ». */
  .matrix{ --mx-th:176px }
  .mx tbody th,.mx thead th:first-child{ width:var(--mx-th); min-width:var(--mx-th);
    max-width:var(--mx-th); white-space:normal }
  /* Колонка встаёт к краю липкого названия, а не замирает посреди слова:
     «BUSINESS», обрезанный пополам, читается как поломка вёрстки. */
  .matrix{ scroll-snap-type:x proximity; scroll-padding-left:var(--mx-th) }
  .mx td,.mx thead th:not(:first-child){ scroll-snap-align:start }
}

/* ─────────────────────────── меню телефона ───────────────────────────
   Кнопка «Меню» в шапке и шторка #mnav (разметка и довод — в _shell.html,
   открывает main.js). На мониторе нет ни того, ни другого: там разделы
   стоят в шапке строкой. */
.menu-b,.mnav{ display:none }
@media (max-width:860px){
  .menu-b{ display:inline-flex; align-items:center; gap:9px; flex:none;
    padding:10px 12px; border-radius:12px;
    background:rgba(255,255,255,.09); color:var(--ink);
    font:800 12px/1 Manrope, sans-serif; letter-spacing:.08em; text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .2s var(--e-micro), color .4s var(--e-micro) }
  .menu-b:active{ background:rgba(255,255,255,.16) }
  /* Знак — две черты, как у Ландо: три читались бы стандартным «бургером». */
  .menu-b-i{ position:relative; width:16px; height:8px }
  .menu-b-i::before,.menu-b-i::after{ content:""; position:absolute; left:0; right:0; height:2px;
    border-radius:2px; background:currentColor }
  .menu-b-i::before{ top:0 }
  .menu-b-i::after{ bottom:0; left:5px }
  .is-light .menu-b{ background:rgba(13,26,21,.07); color:var(--paper-ink) }

  /* Шторка: сплошное полотно поверх всего, крупные разделы, внизу — дверь
     к пробному периоду, язык и телеграм. Открывается дугой сверху, как
     шторка переходов страниц (fx/chrome.css), — один язык движения. */
  .mnav{ display:flex; flex-direction:column; position:fixed; inset:0; z-index:70;
    padding:18px 22px calc(22px + env(safe-area-inset-bottom));
    background:var(--bg); color:var(--ink); overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden; clip-path:ellipse(160% 0% at 50% 0%);
    transition:clip-path .55s cubic-bezier(.645,.045,.355,1), visibility 0s linear .55s }
  .mnav.is-open{ visibility:visible; clip-path:ellipse(160% 140% at 50% 0%);
    transition:clip-path .7s cubic-bezier(.165,.84,.44,1) }
  html.mnav-open{ overflow:hidden }

  .mnav-top{ display:flex; align-items:center; justify-content:space-between; min-height:40px }
  .mnav-x{ appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.09); color:var(--ink);
    font:800 12px/1 Manrope, sans-serif; letter-spacing:.08em; text-transform:uppercase;
    -webkit-tap-highlight-color:transparent }
  .mnav-x-i{ position:relative; width:14px; height:14px }
  .mnav-x-i::before,.mnav-x-i::after{ content:""; position:absolute; left:-1px; right:-1px; top:6px; height:2px;
    border-radius:2px; background:currentColor; rotate:45deg }
  .mnav-x-i::after{ rotate:-45deg }

  /* Разделы — крупным дисплейным шрифтом, с номером, через волосяные
     линии: так пункт — это строка во всю ширину, а не мелкое слово, в
     которое надо попасть пальцем. Текущий раздел — лаймом. */
  .mnav-list{ display:grid; margin-top:clamp(28px,7vh,64px); counter-reset:mn;
    border-top:1px solid rgba(255,255,255,.1) }
  .mnav-list a{ counter-increment:mn; display:flex; align-items:baseline; gap:14px;
    padding:clamp(13px,2.4vh,20px) 0; border-bottom:1px solid rgba(255,255,255,.1);
    font:700 clamp(25px,7.4vw,36px)/1.05 var(--disp); letter-spacing:-.01em;
    -webkit-tap-highlight-color:transparent }
  .mnav-list a::before{ content:counter(mn, decimal-leading-zero);
    font:600 12px/1 "Space Grotesk", Manrope, sans-serif; letter-spacing:.06em;
    color:var(--dim); translate:0 -.2em }
  .mnav-list a[aria-current="page"]{ color:var(--cta) }
  .mnav-list a:active{ color:var(--cta) }

  .mnav-demo{ margin-top:auto; display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:18px 20px; border-radius:16px;
    background:var(--cta); color:var(--cta-ink);
    font:800 14px/1 Manrope, sans-serif; letter-spacing:.08em; text-transform:uppercase }
  .mnav-demo .ic{ width:20px; height:20px; stroke-width:2.2 }
  /* Между списком и кнопкой — воздух даже на низком экране, где margin-top:auto
     у кнопки схлопывается в ноль. */
  .mnav-list{ margin-bottom:28px }
  /* Магазины под дверью к пробному периоду. flex-basis 150 px: на обычном
     телефоне две кнопки в ряд, на узком (320) — столбиком, во всю ширину. */
  .mnav-store{ margin-top:12px }
  .mnav-store .store-b{ flex:1 1 150px }

  .mnav-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    flex-wrap:wrap; margin-top:16px }
  .mnav-tg{ display:inline-flex; align-items:center; gap:9px; color:var(--muted);
    font-weight:600; font-size:14.5px }
  .mnav-tg .ic{ width:17px; height:17px; stroke-width:1.9 }

  /* Пункты поднимаются лесенкой вслед за шторкой. Только появление: на
     закрытии шторка уходит целиком, пункты ей не мешают. */
  @media (prefers-reduced-motion:no-preference){
    .mnav.is-open .mnav-list a,
    .mnav.is-open .mnav-demo,
    .mnav.is-open .mnav-store,
    .mnav.is-open .mnav-foot{ animation:mnav-in .7s cubic-bezier(.165,.84,.44,1) both }
    .mnav.is-open .mnav-list a:nth-child(1){ animation-delay:.10s }
    .mnav.is-open .mnav-list a:nth-child(2){ animation-delay:.15s }
    .mnav.is-open .mnav-list a:nth-child(3){ animation-delay:.20s }
    .mnav.is-open .mnav-list a:nth-child(4){ animation-delay:.25s }
    .mnav.is-open .mnav-list a:nth-child(5){ animation-delay:.30s }
    .mnav.is-open .mnav-list a:nth-child(6){ animation-delay:.35s }
    .mnav.is-open .mnav-demo{ animation-delay:.34s }
    .mnav.is-open .mnav-store{ animation-delay:.37s }
    .mnav.is-open .mnav-foot{ animation-delay:.40s }
  }
}
@keyframes mnav-in{
  from{ opacity:0; translate:0 28px }
  to{ opacity:1; translate:0 0 }
}
@media (prefers-reduced-motion:reduce){
  .mnav,.mnav.is-open{ transition:none; clip-path:none }
}


/* ═══════════════════ ТЕЛЕФОН: тот же сайт, только мельче ═══════════════════
   Сайт написан mobile-first, и на телефоне он не ломается — но говорит теми
   же размерами, что и на мониторе: воздух между разделами в полтора экрана,
   плитки ростом с ладонь, заголовок в три строки. Идея от этого не яснее,
   а до сути приходится ехать.

   Поэтому здесь один проход по МАСШТАБУ, а не по составу: ни один раздел,
   ни одна строка и ни одна картинка не исчезают — они просто занимают
   столько места, сколько нужно, чтобы прочесть. Всё, что ниже, — только
   кегли и отступы.

   Порог 640, а не 760: планшет-портрет с его 768 px держит крупную шкалу
   честно, ему тесно не бывает. */

@media (max-width:640px){
  :root{
    /* Воздух между разделами: было 72 сверху и столько же снизу — почти
       экран пустоты на каждую границу, а границ на главной двенадцать. */
    --sect-pad:clamp(44px,11vw,62px);
    --gap:12px;
  }

  /* Заголовки разделов НЕ трогаем: на 390 px они и так стоят на нижней
     границе своих clamp, а срезать их дальше — это уже другая страница, а
     не та же помельче. Ужимаем ярус ниже: подзаголовок карточки и лид. */
  h3{ font-size:17.5px }
  .lead{ font-size:16px; line-height:1.48 }
  .kicker{ font-size:12px; letter-spacing:.12em }
  .head{ gap:14px }

  /* Плитка перестаёт быть ростом в 180 px: пустая половина карточки не
     объясняет ничего, а на экран их влезает вдвое меньше. */
  .tile{ min-height:0; gap:9px }
  .tiles{ margin-top:24px }
  .card{ padding:16px }
  .tile p{ font-size:14px }
  .tile .ic{ width:21px; height:21px; margin-bottom:2px }
  .tail h2{ font-size:28px }

  .chain-i{ padding:14px 16px; gap:12px }

  /* Модуль на странице «Что умеет»: между соседями было 46+46 px пустоты
     плюс волосяная линия. Тридцать два — линия по-прежнему читается
     границей, а восемь модулей помещаются в полтора экрана меньше. */
  .mrow{ padding-block:32px }
  .mrow-in{ gap:20px }
  .mrow-n{ margin-bottom:12px }
  .mrow h3{ font-size:22px }
  .mrow-lead{ margin-top:12px; font-size:15.5px }

  /* Виньетка тарифа рисуется во всю ширину карточки, и на телефоне одна
     картинка занимает треть экрана — а объясняет она меньше, чем строка
     под ней. Уменьшаем рисунок, а не выбрасываем: тариф без картинки
     становится строкой прайса. */
  .pviz svg{ width:74%; margin-inline:auto }
  .plan-n{ margin-top:16px }
}

/* ─────────────────────────── меньше движения ─────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .drift{ animation:none !important }
  .rv,.js .rv{ opacity:1; transform:none; transition:none }
  .pviz *{ transition:none !important }
  .hdr{ transition:none }
}