/* ============================================================
   inner.css — блоки внутренних страниц: «Как идёт работа»,
   «Цены», «Вопросы», юридические. 2026-09-19.

   Те же правила, что в tkan.css: коробок нет, держат линии и
   типографика, единственный цвет — жёлтый. Значения — только
   из токенов tkan.css.
   ============================================================ */

/* --- Первый экран внутренней страницы --------------------------
   Он короче главного: заголовок, лид и оглавление. Полную высоту
   не занимает — иначе человек, пришедший за ценой, листает пустоту. */
.hero--inner {
  min-height: auto;
  padding-top: clamp(120px, 17vh, 210px);
  padding-bottom: clamp(40px, 6vh, 80px);
}
/* ⚠️ Первый экран «Как идёт работа» — во всю высоту окна. Ян 2026-09-21:
   «нужно сделать первый экран чуть пониже, потому что снизу наслаивается
   уже второй». Замер: глава 1 была 616px при окне 900, и «01 · Первый
   расчёт» заглядывал на 284px. Правило висит на наличии строки ступеней,
   поэтому «Цены» и «Вопросы» его не получают: там короткий первый экран
   сделан намеренно — человек, пришедший за ценой, не должен листать
   пустоту. svh, а не vh: на телефоне vh считается по окну без адресной
   строки и экран выходит выше видимого. */
.hero--inner:has(.route) { min-height: 100vh; min-height: 100svh; }
.hero--inner h1 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.028em; line-height: .88; margin: 0;
  font-size: clamp(34px, 6vw, 104px); max-width: 14ch;
}
.hero--inner .hero__body { margin-top: clamp(20px, 2.4vw, 40px); }

/* --- Оглавление страницы --------------------------------------- */
.toc {
  display: flex; flex-wrap: wrap; gap: clamp(8px, .9vw, 14px);
  margin-top: clamp(22px, 2.4vw, 40px);
}
.toc a {
  /* Не inline-block, а флекс с минимальной высотой: на телефоне пункты
     оглавления были 35px при норме 44 — палец мажет. */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: clamp(8px,.8vw,13px) clamp(14px,1.4vw,22px);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ln);
  color: var(--fg); text-decoration: none;
  font-size: clamp(12px,.95vw,15px); font-weight: 500;
  transition: box-shadow .25s, color .25s;
}
.toc a:hover { box-shadow: inset 0 0 0 1px var(--yellow); color: var(--yellow); }
.toc a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* --- Ступени пути («Как идёт работа») ----------------------------
   Станции — обычные ссылки в ряд на широком экране и колонкой на
   узком. Своей отрисовки у блока больше нет: волну ведёт фоновое поле
   на весь экран (shared/threads.js), а shared/route.js только зажигает
   черту той ступени, над которой стоит гребень.

   ⚠️ Овалы сняты — Ян 2026-09-21: «эти овалы нужно убрать, смотрится
   не очень». Подложка стояла ровно потому, что линия шла сквозь буквы;
   волна фона проходит за подписями и спорить с ними не может. */
.route {
  position: relative;
  /* ⚠️ Холста внутри блока больше нет: волну ведёт фоновое поле на весь
     экран. Прежний отступ сверху был полосой под тот холст — он же и
     срезал верхушку горба.

     Теперь это просто воздух над строкой ступеней, и он же место под
     волну. Ян 2026-09-21: «этот пайплайн опустить чуть ниже и дать
     больше пространства как раз для этой волны, чтобы она была более
     масштабная». На телефоне отступ скромный: там ступени идут
     колонкой и места нет. */
  margin-top: clamp(72px, 18vw, 320px);
  padding: 0 0 clamp(20px, 2.4vw, 44px);
}
.route__stops {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(14px, 1.6vw, 26px);
}
@media (min-width: 900px) {
  .route__stops { grid-template-columns: repeat(5, 1fr); align-items: start; }
}
.route__stop {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 44px; justify-content: center;
  /* Подпись, а не кнопка: цвет ведёт скрипт через --fg, ни подложки,
     ни рамки. Жёлтая черта сверху — единственная связь с волной:
     она загорается, когда гребень проходит над этой ступенью. */
  padding: 8px clamp(4px,.5vw,10px) 4px;
  border-top: 2px solid var(--ln);
  color: var(--fg); text-decoration: none;
  transition: border-color .25s, color .25s;
}
/* Перпендикулярная полоска над названием ступени. Ян 2026-09-21: «мне
   ещё нравились в прошлой версии такие перпендикулярные полоски над
   надписью „расчёт, оцифровка“ — хочу, чтобы они появлялись под волной,
   когда идёт волна, чтоб появлялась и исчезала».

   Близость гребня к этой ступени скрипт отдаёт числом 0..1 в --near
   (shared/route.js). Полоска по нему проявляется, подрастает и тает —
   плавно и без мигания, потому что это непрерывная величина, а не класс.
   Никакого рисунка: полоска висит на самой подписи. */
.route__stop::before {
  content: ""; position: absolute; left: 0; bottom: calc(100% + 2px);
  width: 2px; height: clamp(16px, 2.4vw, 44px);
  background: var(--fg);
  transform-origin: bottom;
  transform: scaleY(calc(0.3 + 0.7 * var(--near, 0)));
  opacity: calc(var(--near, 0) * 0.8);
}
/* Без движения гребня нет, и полоски остаются еле заметными вместо того,
   чтобы исчезнуть совсем: статика обязана быть осмысленным кадром. */
html[data-motion="off"] .route__stop::before,
.route__stop:hover::before { opacity: .38; transform: none; }
/* ⚠️ На узком экране ступени стоят колонкой, и середины у них на одной
   доле ширины — близость гребня выходит одинаковой у всех пяти, и
   полоски мигали бы разом. Волна идёт по горизонтали, ступени по
   вертикали, сопоставить их там нечем: полоски стоят неподвижно. */
@media (max-width: 899px) {
  .route__stop::before { opacity: .3; transform: none; }
}
.route__stop:hover { border-top-color: var(--yellow); }
.route__stop:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
/* Гребень прошёл над ступенью — её имя коротко разгорается. Ставит и
   снимает класс route.js; без движения класс не появляется вовсе. */
.route__stop.is-crest { border-top-color: var(--yellow); }
.route__stop.is-crest .route__no { color: var(--fg); }
.route__no {
  font-family: var(--mono); font-size: clamp(10px,.78vw,13px);
  letter-spacing: .06em; color: var(--mute);
  transition: color .25s;
}
.route__name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .95;
  font-size: clamp(14px, 1.25vw, 21px);
}
/* Станция развилки помечена и в тексте, а не только точкой на волне:
   точку не прочитает тот, кто идёт по странице клавиатурой. */
/* Плашкой, чёрным на жёлтом, как цены .pack__price: жёлтые буквы на
   сером фоне первой главы не читались (контраст около 1,3:1). Аудит 2026-09-24. */
.route__stop[data-fork] .route__no::after {
  content: "развилка"; margin-left: .6em; padding: .1em .45em;
  background: var(--yellow); color: #000;
}
.route__note {
  position: relative; z-index: 1;
  margin: clamp(14px,1.6vw,26px) 0 0; max-width: none;
  font-family: var(--mono); font-size: clamp(10px,.8vw,13px);
  letter-spacing: .03em; color: var(--mute);
}
.route__note a { color: var(--fg); }

/* --- Продолжение главы без нового отступа ------------------------
   «Вопросы» разрезаны на четыре главы по группам ответов, чтобы сцене
   было куда идти (кадр последней главы залипает, и ниже него линии
   стояли бы сведёнными). Шов не должен быть виден: фон у глав один,
   а вертикальный отступ у продолжения снимается — иначе между
   группами вопросов вырастала бы пустая полоса на два экрана. */
.screen--tight { padding-top: 0; }
.screen--tight + * { margin-top: 0; }

/* --- Развилка: заголовок по центру, экран на две половины --------
   Единственный экран сайта, выстроенный по центральной оси, и это
   оправдано: здесь человек выбирает из двух, и ось — сама развилка.
   Волна фона расходится под заголовком в ту же сторону (`fork`
   в shared/threads.js), поэтому заголовок обязан стоять посередине,
   а не в левой колонке сетки.

   Правка Яна 2026-09-21: «после этих слов, которые будут по центру,
   я хочу, чтобы экран поделился на две части». */
/* Центрируем и текст, и сам блок: у заголовка экрана стоит max-width
   в 16ch, и одного text-align мало — строки встают по центру внутри
   узкого блока, а блок остаётся прижатым влево. */
.center { text-align: center; margin-left: auto; margin-right: auto; }
/* Строка чтения остаётся той же ширины, просто стоит по середине:
   центрированный абзац во всю ширину экрана не читается. */
.measure-c { max-width: 52ch; margin-left: auto; margin-right: auto; }
/* На телефоне абзац по центру рвёт правый край на каждой строке —
   там строка короткая, и таких строк четыре. По центру остаётся
   только заголовок: он в две строки и держит ось. */
@media (max-width: 899px) { .measure-c.center { text-align: left; } }

.fork {
  display: grid; gap: clamp(28px,3vw,52px);
  /* Воздух между лидом по центру и двумя половинами. Раньше его держала
     полоса игрека; полоса удалена — отступ стоит здесь. */
  margin-top: clamp(30px,3.6vw,72px);
}
.fork__side {
  border-top: 2px solid var(--ln);
  padding-top: clamp(14px,1.4vw,22px);
}
@media (min-width: 900px) {
  /* Черта между половинами — та же линия, что держит весь сайт.
     Ни рамок, ни плашек: половины делит одна вертикаль. */
  .fork { grid-template-columns: 1fr 1fr; gap: 0; }
  .fork__side { padding-left: clamp(22px,2.6vw,48px); padding-right: clamp(22px,2.6vw,48px); }
  .fork__side:first-child { padding-left: 0; border-right: 2px solid var(--ln); }
  .fork__side:last-child  { padding-right: 0; }
}
/* Второй заголовок в половине («И идём до цели») отбивается от списка
   выше. Класса mt-7 тут мало: `.pack__name` объявлен с `margin: 0`
   в этом же файле, то есть позже, и перебивает его при равной
   специфичности. Та же грабля, что была у пары ступеней 09-21. */
.fork__side .pack__name + .pack__price { margin-top: clamp(8px,.8vw,14px); }
.fork__side .pack__name.mt-7 { margin-top: clamp(28px,3vw,52px); }
.fork__side ul { margin: clamp(12px,1.2vw,20px) 0 0; padding-left: 1.1em; }
.fork__side ul li {
  margin-bottom: .5em; line-height: 1.5;
  font-size: clamp(13px,1vw,16px); color: var(--mute);
}

/* --- Списки в тексте ----------------------------------------------
   До 2026-09-24 здесь стояли маркеры браузера: точки, во вложенных —
   полые кружки. Единственное место, где оформление оставалось «как у
   шаблона» (аудит). Маркер — черта толщиной с линии сетки, номера —
   моноширинные «01», как индексы глав. Списки со своим классом (.packs,
   .index-list и т. п.) не задеваем: только без класса или с одной утилитой
   отступа .mt-*. */
:is(.measure, .pack, .fork__side) :is(ul, ol):is(:not([class]), [class^="mt-"]) {
  list-style: none; padding-left: 0;
}
:is(.measure, .pack, .fork__side) :is(ul, ol):is(:not([class]), [class^="mt-"]) > li {
  position: relative; padding-left: 1.4em;
}
:is(.measure, .pack, .fork__side) :is(ul, ol):is(:not([class]), [class^="mt-"]) > li + li { margin-top: .4em; }
:is(.measure, .pack, .fork__side) ul:is(:not([class]), [class^="mt-"]) > li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .6em; height: 2px; background: var(--mute);
}
:is(.measure, .pack, .fork__side) ol:is(:not([class]), [class^="mt-"]) { counter-reset: li; }
:is(.measure, .pack, .fork__side) ol:is(:not([class]), [class^="mt-"]) > li { counter-increment: li; padding-left: 2.2em; }
:is(.measure, .pack, .fork__side) ol:is(:not([class]), [class^="mt-"]) > li::before {
  content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .2em;
  font-family: var(--mono); font-size: .8em; letter-spacing: .02em; color: var(--mute);
}

/* --- Две колонки внутри блока ----------------------------------- */
.split { display: grid; gap: clamp(24px,3vw,56px); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* --- Ценник списком: название слева, цена справа ---------------- */
.dl { margin: 0; }
.dl dt {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em; font-size: clamp(17px, 1.9vw, 30px);
  margin-top: clamp(20px,2vw,34px); padding-top: clamp(12px,1.2vw,20px);
  border-top: 2px solid var(--ln);
}
.dl dt:first-child { margin-top: 0; }
/* Подчёркивание — линией текста, а не тенью блока. Тень рисовалась по низу
   поля, и на телефоне, где поле выросло до 44px, жёлтая черта легла на
   строку цены: «€50 · 48 часов» читалось зачёркнутым. Аудит 2026-09-24. */
.dl dt a {
  color: inherit; text-decoration-line: underline; text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px; text-underline-offset: .16em; text-decoration-skip-ink: none;
}
.dl dt a:hover { color: var(--yellow); text-decoration-color: transparent; }
/* На телефоне ссылка-заголовок была высотой 20px. Добавляем поле и
   гасим его отрицательным отступом: область нажатия 44px, вид прежний. */
@media (max-width: 899px) {
  .dl dt a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.dl dd {
  margin: clamp(6px,.6vw,10px) 0 0;
  font-family: var(--mono); font-size: clamp(12px,1vw,16px);
  color: var(--mute); letter-spacing: .02em;
}

/* --- Пакеты: что входит и сколько стоит -------------------------- */
.packs { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px,3vw,54px); }
@media (min-width: 900px)  { .packs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1300px) { .packs--3 { grid-template-columns: repeat(3, 1fr); } }

.pack { padding-top: clamp(14px,1.4vw,22px); border-top: 2px solid var(--ln); }
.pack__name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em; font-size: clamp(20px, 2.3vw, 38px);
  line-height: .95; margin: 0;
}
/* Цена — чёрным на жёлтой плашке, как в логотипе. Ян 2026-09-23: жёлтые
   цифры на белом и сером не видно (контраст #f2e23c к фону около 1,3:1).
   Все цены стоят на светлых главах, но плашка читается на любом фоне:
   чёрное на жёлтом не зависит от того, куда перелился --bg. */
.pack__price {
  font-family: var(--mono); font-size: clamp(12px,1vw,16px);
  letter-spacing: .04em; margin: clamp(8px,.8vw,14px) 0 0;
  width: fit-content; padding: .2em .55em;
  background: var(--yellow); color: #000;
}

/* «Заявку получили» на «Оплате» (.notice-sent, якорь #poluchili) снята
   2026-09-24 вместе с формой «Цен», которая туда вела: форм на сайте нет. */
.pack__who { margin: clamp(10px,1vw,18px) 0 0; font-size: clamp(14px,1.05vw,18px); line-height: 1.5; }
.pack ul { margin: clamp(12px,1.2vw,20px) 0 0; padding-left: 1.1em; }
.pack ul li { margin-bottom: .5em; font-size: clamp(13px,1vw,16px); color: var(--mute); line-height: 1.5; }
.pack__note { margin: clamp(10px,1vw,16px) 0 0; font-size: clamp(12px,.9vw,15px); color: var(--mute); }

/* --- Пример расчёта на work#raschet ------------------------------
   2026-09-23, Ян: незаполненный лист с плейсхолдерами (.sheet) снят,
   вместо него блок с кнопкой в бота @Wavesettbot. Стоит в правой колонке
   .split на месте листа, отступ сверху тот же. Рамки нет: это обычный
   текст с кнопкой, а не документ. */
.primer { margin: clamp(22px,2.4vw,40px) 0 0; max-width: 62ch; }

/* --- Вопрос и ответ ---------------------------------------------- */
.objection { margin-top: clamp(30px,3.4vw,64px); }
.objection:first-of-type { margin-top: 0; }
.objection__said {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.024em; line-height: .95;
  font-size: clamp(22px, 3vw, 54px); margin: 0; max-width: 20ch;
}
.objection__answer {
  margin-top: clamp(14px,1.4vw,24px);
  padding-left: clamp(16px,1.6vw,28px);
  border-left: 2px solid var(--yellow);
  max-width: 62ch;
}
.objection__answer p { margin: 0; font-size: clamp(14px,1.08vw,19px); line-height: 1.55; }
/* Правило выше сильнее утилиты .mt-4 и съедало отступ между абзацами
   ответа: три абзаца читались одним. Аудит 2026-09-24. Значение — как у .mt-4. */
.objection__answer p + p { margin-top: clamp(14px,1.4vw,24px); }

/* --- «Вопросы»: текст справа, нити слева --------------------------
   Слева — широкое поле нитей, справа — колонка с текстом. Пучок нитей
   проходит под ней, поэтому колонка и стоит справа: там нити уже сведены
   в одну полосу и не мешают строкам. */
@media (min-width: 900px) {
  html[data-page="questions"] .g-wide  { grid-column: 6 / 13; }
  html[data-page="questions"] .g-title { grid-column: 1 / 6; }
  html[data-page="questions"] .g-body  { grid-column: 6 / 13; }
  /* Лид прижат к низу первого экрана, а не к верху высокой строки
     сетки: иначе между ним и первым вопросом оставалась дыра во весь
     рост заголовка — почти экран пустоты. */
  html[data-page="questions"] .hero--inner .grid { align-items: end; }
  /* Кегль заголовка считается от ширины колонки, а не от окна. На 1920
     строка «спросили» была 471px в колонке 449px — и маска появления
     срезала у неё хвост. */
  html[data-page="questions"] .hero--inner h1 { font-size: clamp(34px, 4.4vw, 78px); }
}

/* --- Отступы, которых не было на главной -------------------------- */
.mt-3 { margin-top: clamp(10px, 1vw, 16px); }

/* --- Вопросы без ответов: список с прочерками ---------------------
   Блок с главной: слева вопрос, который владелец решает каждую неделю,
   справа прочерк вместо числа. Это довод экрана, а не украшение.
   Перенесён в систему «Ткань» 2026-09-19: из 87 классов боевых страниц
   он был единственным неоформленным и рендерился голым списком. */
.gaps { margin: 0; }
.gaps__list { list-style: none; margin: 0; padding: 0; }
.gaps__list li {
  display: flex; gap: clamp(16px,2vw,32px);
  align-items: baseline; justify-content: space-between;
  padding: clamp(12px,1.2vw,20px) 0;
  border-bottom: 1px solid var(--ln);
}
.gaps__list li:first-child { border-top: 2px solid var(--ln); }
.gaps__q { color: var(--fg); font-size: clamp(14px,1.05vw,18px); line-height: 1.4; }
/* Место под ответ. Раньше здесь стоял жёлтый прочерк «не посчитано» —
   то есть мы отвечали за читателя, хотя не знаем, посчитано у него или
   нет (правка Яна 2026-09-21). Теперь это пустая строка: вопрос задан,
   отвечает он. */
.gaps__a {
  flex: none; width: clamp(56px,7vw,120px);
  border-bottom: 2px solid var(--yellow); align-self: center; height: 0;
}
.gaps figcaption {
  margin-top: clamp(10px,1vw,16px);
  font-family: var(--mono); font-size: clamp(10px,.78vw,13px);
  letter-spacing: .04em; color: var(--mute);
}
/* Подпись-шапка стоит НАД списком: это условие проверки, а не вывод. */
.gaps__head {
  margin: 0 0 clamp(10px,1vw,16px); color: var(--fg);
  font-family: var(--mono); font-size: clamp(11px,.85vw,14px);
  letter-spacing: .04em;
}

/* --- Подвал -------------------------------------------------------
   В прототипе подвала не было. При переносе оставлен: он несёт ссылки
   на Mentions légales и Politique de confidentialité, отзыв согласия и
   реквизиты — во Франции это требование закона, а не украшение. */
.site-foot {
  position: relative; z-index: 1;
  /* Снизу к отступу прибавляется безопасная зона: последняя строка
     подвала иначе уходит под нижний ярлык айфона. */
  padding: clamp(48px,7vh,96px) 0 calc(clamp(28px,4vh,56px) + var(--safe-b));
  border-top: 2px solid var(--ln);
  font-size: clamp(13px,.95vw,16px);
  /* Плотный фон обязателен: холст сцены прибит к окну и просвечивает
     сквозь всё, что его не закрывает. Нити шли прямо по названию и
     заголовкам колонок. Здесь сцена и заканчивается. */
  background: var(--bg);
}
.site-foot__grid { display: grid; gap: clamp(26px,3vw,48px); }
@media (min-width: 760px)  { .site-foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-foot__brand {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em; font-size: clamp(18px,1.7vw,28px);
  line-height: 1; margin: 0 0 clamp(10px,1vw,16px);
}
.site-foot__title {
  font-family: var(--mono); font-size: clamp(10px,.78vw,13px);
  letter-spacing: .06em; text-transform: uppercase; color: var(--mute);
  margin: 0 0 clamp(10px,1vw,16px);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* Цель нажатия 44px: на телефоне ссылки подвала стоят плотно. */
.site-foot li a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-foot li a:hover { color: var(--yellow); }
.site-foot__bottom {
  /* max-width снимаем: это <p>, а абзацы в системе ограничены 52ch —
     из-за этого черта над копирайтом шла только на ширину колонки. */
  max-width: none;
  margin: clamp(30px,4vw,60px) 0 0; padding-top: clamp(16px,1.6vw,26px);
  border-top: 1px solid var(--ln); color: var(--mute);
  font-family: var(--mono); font-size: clamp(11px,.85vw,14px); letter-spacing: .02em;
}