@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────────
   eto.bot — дизайн-система. Редакция третья.

   ДВЕ ПРЕДЫДУЩИЕ ЗАБРАКОВАНЫ, и оба диагноза были точные:
   1) «нет выравнивания, всё плавает» — отступы задавались инлайново по
      месту, у каждой секции свои случайные числа;
   2) «нет дизайнерской идеи, нет изюминки, нет воздуха; макеты переписки
      рисовать не нужно нигде».

   ИДЕЯ. Никаких мокапов телефонов и переписок: вся графика — буквы плюс
   очень бледные знаки переписки на фоне первого экрана. Страница говорит
   короткими утверждениями, а маркер подсвечивает в заголовке ровно одно
   место — то, за которое заголовок и написан.

   (Игра со словами «eto.bot = это бот» была идеей третьей редакции и
   забракована владельцем: в заголовке она давала ярлыки вместо обещания.)

   ПРАВИЛА, КОТОРЫЕ НЕЛЬЗЯ НАРУШАТЬ ПРИ ПРАВКАХ:
   — ни одного размера в разметке: вертикальный ритм только здесь, шкала
     кратна восьми, раздаётся классами;
   — ни одного border на разделение: только цвет полосы, тень и воздух;
   — ни одного градиента;
   — заголовок секции идёт во всю ширину секции (владелец спросил об этом
     прямым текстом), поэтому шапка секции двухколоночная: заголовок слева
     на широкой мере, лид справа.

   РЕФЕРЕНСЫ (выбраны владельцем):
   — tilda          — воздух, дисциплина, крупный дисплейный кегль;
   — carrotquest.io — чёрные кнопки r12, подсветка слов маркером и
                      подчёркиванием, отступы секций 120–156px (измерено);
   — chatra.com     — полноширинные пастельные полосы вместо рамок.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Шрифт ─────────────────────────────────────────────────────────────────
   Wix Madefor, две резки одного семейства: Display для заголовков и цифр,
   Text для текста. Этот контраст и даёт «качественную типографику» — у
   одного универсального шрифта, как Cera у Chatra, его нет.

   Почему не Onest, которым набрана первая редакция: он уже занят —
   `font-family:Onest` стоит в десятке файлов ЭТОЧАТБОТ и Chatonaut. Почему
   не PT Root UI: это шрифт carrotquest.io, повторять за референсом буквально
   значит не «в их стилистике», а «то же самое». Кириллицу у кандидатов
   сравнивал рендером в браузере на живых русских заголовках 56px.

   ФАЙЛЫ СОБРАНЫ САМИ, а не взяты с fonts.gstatic.com: в подмножествах
   Google у этого шрифта НЕТ ЗНАКА РУБЛЯ (U+20BD) — проверено измерением,
   ширина «₽» совпадала с чистым serif, то есть браузер молча подставлял
   системный шрифт и «80 000 ₽» набиралось двумя шрифтами. В апстримном TTF
   глиф есть; сборка — scripts/build-fonts.py.

   Оба реза вариативные: один файл на подмножество на весь диапазон веса —
   четыре файла на сайт, 76 КБ, из них на русской странице нужны два. */
@font-face{
  font-family:MadeforDisplay;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/md-display-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+20BD;
}
@font-face{
  font-family:MadeforDisplay;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/md-display-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:MadeforText;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/md-text-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+20BD;
}
@font-face{
  font-family:MadeforText;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/md-text-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Токены ──────────────────────────────────────────────────────────────── */
:root{
  --ink:#16201B;             /* заголовки и текст */
  --ink-2:#4E5A53;           /* второй уровень текста */
  /* Третий уровень держим по контрасту, а не по вкусу: мелкому тексту на
     белом нужно минимум 4,5:1 (WCAG AA). Считаю формулой — на глаз подписи
     под таблицей и строка доверия в герое уже один раз оказались ниже
     нормы. */
  --ink-3:#69756D;           /* подписи, сноски */
  --base:#FFFFFF;

  --band-gray:#F4F6F4;
  --band-sage:#E6EFE8;
  --band-amber:#F7F3E8;
  --band-ink:#12211A;

  /* АКЦЕНТ — глубокий зелёный. Схему выбрал владелец 16.09.2026 из трёх
     предложенных. Зелёный не занят ни одним мессенджером (Telegram
     #229ED9, ВК #0077FF, МАКС #6C47FF, Instagram #E1306C), ни синим
     ЭТОЧАТБОТ, ни референсами — и читается как «работает, доведено до
     конца». Им красятся кнопки и кружки шагов. */
  --accent:#12604A;
  --accent-dark:#0E4E3C;     /* наведение */

  /* МАРКЕР — светлая мята. Подсвечивает СЛОВО, а не заливает блок. У
     carrotquest в этой роли кислотный лайм, у Chatra жёлтый; мята держит
     тот же приём, но без «предупреждающего» оттенка, за который цепляется
     глаз в жёлтом. */
  --mark:#B6E8C6;
  --mark-soft:#DCF1E3;
  --mark-ink:#1E5238;

  --wrap:1180px;
  --r-m:16px; --r-l:24px;

  --sh-s:0 1px 3px rgba(20,22,25,.05);
  --sh-m:0 10px 30px rgba(20,22,25,.07);

  /* Ритм. Всё кратно восьми. */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:80px; --s8:112px; --s9:152px;
}

/* ── Сброс ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--base);color:var(--ink);
  font:400 18px/1.62 MadeforText,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
  margin:0;font-family:MadeforDisplay,system-ui,sans-serif;font-weight:700;
  text-wrap:balance;
  /* Стакающий контекст нужен маркеру: его подложка лежит на z-index:-1 и без
     isolation ушла бы под фон секции. */
  isolation:isolate;
}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--mark);color:var(--ink)}

/* ── Каркас ──────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.band{padding:var(--s9) 0}
.band--tight{padding:var(--s8) 0}
.band--gray{background:var(--band-gray)}
.band--sage{background:var(--band-sage)}
.band--amber{background:var(--band-amber)}
.band--ink{background:var(--band-ink);color:#E7E9EB}
.band--ink h1,.band--ink h2,.band--ink h3{color:#fff}
.band--ink .lead{color:#A9B0B7}
.band--ink .note{color:#787F86}
/* Сноска ставится и на цветных полосах: там фон светлее белого, и того же
   серого уже не хватает. Считал формулой: на #E7EFE9 нужно темнее. */
.band--sage .note,.band--amber .note,.band--gray .note{color:#5C6268}
/* На тёмной полосе второй уровень текста обязан посветлеть: #565C64 на
   #141619 даёт контраст около 3:1 — на рендере абзацы читались как
   выключенные. */
.band--ink .job p{color:#A9B0B7}
.band--ink .job h3{color:#fff}

/* ── Типографика ─────────────────────────────────────────────────────────── */
.h1{font-size:clamp(40px,7vw,86px);line-height:1.0;letter-spacing:-.04em}
.h2{font-size:clamp(30px,4.2vw,54px);line-height:1.06;letter-spacing:-.032em}
.h3{font-size:21.5px;line-height:1.26;letter-spacing:-.016em}
.lead{font-size:clamp(18.5px,1.4vw,21px);line-height:1.52;color:var(--ink-2);max-width:56ch}
.note{font-size:15px;line-height:1.6;color:var(--ink-3)}

/* ПОДСВЕТКА СЛОВ — то, что владелец просил прямым текстом, и главный приём
   carrotquest в заголовках. Подложка ниже базовой линии, чуть повёрнутая, с
   выносом по бокам: читается как след маркера, а не как плашка. Размеры в
   em, поэтому одинаково работает и на 86px, и на 30px. */
/* z-index:0 ОБЯЗАТЕЛЕН, и вот почему. Подложка маркера лежит на z-index:-1.
   Пока подсвечивались только заголовки, её удерживал isolation:isolate на
   h1–h4. Но слоган на тёмной полосе — это <p class="claim">, у него такого
   правила нет, подложка ушла ЗА фон секции и маркер исчез совсем (видно на
   рендере: белый текст без подсветки). Собственный z-index:0 делает сам
   .hl стакающим контекстом, и подложка остаётся внутри него при любом
   родителе. */
.hl{position:relative;z-index:0;white-space:nowrap}
.hl::before{
  content:"";position:absolute;z-index:-1;
  /* Геометрия снята с carrotquest: маркер закрывает примерно треть высоты
     строчной буквы и сидит у самой базовой линии. Выше — начинает съедать
     буквы и мешать читать (проверено на рендере 86px). */
  left:-.07em;right:-.07em;bottom:.04em;height:.29em;
  background:var(--mark);border-radius:3px;transform:rotate(-.7deg);
  transform-origin:left center;
}
/* Подсвечивается КАЖДОЕ СЛОВО отдельно (см. hl() в helpers.php): иначе
   псевдоэлемент не даёт фразе переноситься. Всем словам, кроме последнего,
   подложка дотягивается до следующего — иначе след маркера выглядит
   пунктиром вместо непрерывной полосы. Скругление на стыках убираем. */
.hl--mid::before{right:-.34em;border-top-right-radius:0;border-bottom-right-radius:0}
/* Группа подсвеченных слов: переносится целиком (см. порог в hl()). */
.hlw{white-space:nowrap}
.hl--mid+.hl::before,.hl--mid+.hl--mid::before{border-top-left-radius:0;border-bottom-left-radius:0}
.ul{position:relative;white-space:nowrap}
.ul::after{
  content:"";position:absolute;left:0;right:0;bottom:.01em;
  height:.07em;background:currentColor;border-radius:99px;
}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:99px;background:var(--band-gray);
  font:400 15px/1 MadeforText,sans-serif;color:var(--ink-2);
}
.band--gray .pill{background:#fff}
.band--sage .pill,.band--amber .pill{background:rgba(255,255,255,.75)}
.band--ink .pill{background:#22252A;color:#C3C9CF}

/* ── Шапка секции ────────────────────────────────────────────────────────
   Владелец спросил прямо: «почему заголовок секций не во всю ширину
   секции?» — в прошлой редакции шапка была центрированной колонкой в 760
   пикселей и болталась в середине. Теперь шапка занимает всю ширину и
   делится на две части: заголовок слева на широкой мере, лид справа. Так
   работают и Тильда, и carrotquest в разделах внутри сайта. */
/* Выравнивание по ВЕРХУ. Сначала было по низу — красиво, пока лид короче
   заголовка; как только лид длиннее (а это половина секций), он начинал
   стоять выше заголовка, и шапка выглядела съехавшей. Смещение лида на
   высоту ярлыка делает первые строки обеих колонок оптически одной
   линией. */
.sh{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--s5) var(--s6);align-items:start;margin-bottom:var(--s7);
}
.sh__t{grid-column:1}
.sh__t .pill{margin-bottom:var(--s3)}
.sh__d{grid-column:2;padding-top:58px}   /* высота ярлыка + его отступ */
.sh--solo{grid-template-columns:1fr}
.sh--solo .sh__d{grid-column:1;padding-top:0;margin-top:var(--s3);max-width:62ch}
.sh--tight{margin-bottom:var(--s6)}

/* ── Кнопки ──────────────────────────────────────────────────────────────
   Прошлая редакция получила «кнопки — ужасные». Теперь язык carrotquest:
   основная чёрная, r12, крупная; вторая — серая заливка без обводки. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 30px;border:0;border-radius:12px;
  font:400 17.5px/1 MadeforText,system-ui,sans-serif;
  cursor:pointer;transition:background .16s ease,color .16s ease;white-space:nowrap;
}
.btn__arr{font-size:19px;line-height:1;transition:transform .16s ease}
.btn:hover .btn__arr{transform:translateX(3px)}
/* Основная кнопка красится АКЦЕНТОМ. Класс назван по роли, а не по цвету:
   имя со словом «чернила» врало бы про зелёную заливку, а следующий
   человек поверил бы имени. */
.btn--main{background:var(--accent);color:#fff}
.btn--main:hover{background:var(--accent-dark)}
.btn--soft{background:var(--band-gray);color:var(--ink)}
.btn--soft:hover{background:#ECECE8}
.band--gray .btn--soft,.band--sage .btn--soft,.band--amber .btn--soft{background:#fff}
.band--ink .btn--soft{background:#22252A;color:#fff}
.band--ink .btn--soft:hover{background:#2C3037}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#F1F1EF}
.btn--sm{padding:13px 22px;font-size:16px;border-radius:10px}

/* ── Сетки ───────────────────────────────────────────────────────────────── */
.cols{display:grid;gap:var(--s5)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols--wide{gap:var(--s6) var(--s5)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.measure{max-width:64ch}

/* ── Шапка сайта ─────────────────────────────────────────────────────────── */
/* ШАПКА НЕ ЛИПКАЯ — решение владельца. Отсюда два следствия, которые важно
   не потерять при правках: полупрозрачный фон с блюром больше не нужен (под
   шапкой всегда начало страницы), а наблюдатель, ставивший тень при
   прокрутке, удалён из app.js вместе с этим правилом. */
.top{position:relative;z-index:50;background:var(--base)}
.top__in{display:flex;align-items:center;height:88px;gap:var(--s5)}
/* Словесный знак: ЭТОБОТ одним словом. Русские заглавные в дисплейной
   резке требуют разрядки — без неё слово читается как слипшееся пятно. */
.logo{
  display:inline-flex;align-items:center;
  font:700 21px/1 MadeforDisplay,sans-serif;letter-spacing:.02em;color:var(--ink);
}
.nav{display:flex;gap:var(--s4);margin-left:auto}
.nav a{font-size:16.5px;color:var(--ink-2);transition:color .15s ease}
.nav a:hover,.nav a.is-on{color:var(--ink)}
.nav>.btn{display:none}   /* копия кнопки нужна только в мобильном меню */
.top__act{display:flex;align-items:center;gap:var(--s2);margin-left:var(--s5)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:12px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ── Герой ───────────────────────────────────────────────────────────────
   Чистая типографика: ни одного мокапа, ни одной картинки. Фраза «Это бот.
   Это мини-приложение. Это поддержка» — это сам домен, прочитанный
   по-русски, и она же композиция первого экрана. */
.hero{position:relative;padding:var(--s7) 0 var(--s8);overflow:hidden}
/* Мера под самую длинную строку заголовка: переносы задаёт разметка
   (.hero__l — блоки), мера лишь страхует от растяжки на большом мониторе. */
.hero .h1{margin-top:var(--s4);max-width:24ch}
.hero__l{display:block}
.hero__l+.hero__l{margin-top:.06em}
.hero .lead{margin-top:var(--s5);max-width:52ch}
.hero__cta{margin-top:var(--s5)}
/* Строка доверия: три коротких факта, разделённые точкой. Не галочки —
   галочки в прошлой редакции читались как список возможностей тарифа. */
.hero__trust{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s5);font-size:15.5px;color:var(--ink-3)}
.hero__trust li{display:flex;align-items:center;gap:var(--s3)}
.hero__trust li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:#D7DADD;flex:0 0 auto;margin-right:0}

/* ФОН ПЕРВОГО ЭКРАНА. Владелец разрешил «на фон мессенджеры/иконки» —
   поэтому знаки каналов, но очень бледные, крупные и без движения по
   умолчанию: фон не должен спорить с заголовком. Позиции заданы в
   процентах, поэтому не ломаются на других ширинах. */
.hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero__bg i{
  position:absolute;display:block;width:var(--sz,120px);height:var(--sz,120px);
  color:var(--ink);opacity:.045;
}
.hero__bg i svg{width:100%;height:100%}

/* ── Задачи ──────────────────────────────────────────────────────────────
   Шесть повторяющихся работ, которые бот забирает. Без плашек: заголовок,
   абзац, воздух — как в колоночных сетках обоих референсов. */
.job h3{margin-bottom:var(--s2)}
.job p{color:var(--ink-2);font-size:17px;line-height:1.62;max-width:42ch}

/* ── Каналы: редакционный список ─────────────────────────────────────────
   Третий подход к этой секции. Карточки с абзацами владелец назвал
   отвратительными, сравнительную таблицу — «полностью переделать». И в
   обоих случаях он прав: карточки не несли мысли, а таблица выглядела как
   выгрузка из базы, а не как страница агентства.

   Теперь это список во всю ширину: настоящий знак канала, крупное имя и
   ОДНА главная мысль про него — кто может написать первым. Строки делит
   воздух, ни одной линейки. Знаки берём официальные (см. marks.php), а не
   буквы «TG» в квадратике. */
.chn{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s4);align-items:start;padding:var(--s5) 0;
}
.chn+.chn{padding-top:var(--s5)}
.chn__mk{
  width:64px;height:64px;border-radius:19px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.chn__mk svg{width:34px;height:34px}
.chn__mk--tg{background:#229ED9} .chn__mk--vk{background:#0077FF}
.chn__mk--max{background:#6C47FF} .chn__mk--ig{background:#E1306C}
.chn__nm{font:700 clamp(26px,2.6vw,34px)/1.05 MadeforDisplay,sans-serif;letter-spacing:-.03em}
.chn__note{margin-top:var(--s2);color:var(--ink-2);font-size:17px;line-height:1.62;max-width:34ch}
.chn__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.chn__tag{background:var(--band-gray);color:var(--ink-2);font-size:14px;padding:6px 12px;border-radius:99px}
/* Главная мысль строки. Крупнее описания: именно за ней сюда и смотрят. */
.chn__first{font:400 clamp(18px,1.6vw,21px)/1.45 MadeforText,sans-serif;isolation:isolate}
.chn__lbl{
  display:block;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s1);
}

/* ── Секция про ИИ: спецификация ─────────────────────────────────────────
   Владелец забраковал два варианта подряд и оба раза сказал «без воды».
   Поэтому здесь не колонки с абзацами, а список пар: слева вопрос, справа
   ответ одной строкой. Читается сканированием, а не чтением.

   Разделителей нет — только воздух и разница в цвете подписи и значения.
   Подсветка фона строки при наведении показывает, что строки читаются как
   строки, а не как сплошной текст. */
.spec{display:grid;gap:2px;margin:0}
.spec__r{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:var(--s3) var(--s5);padding:var(--s3) var(--s3) var(--s3) var(--s2);
  border-radius:12px;transition:background .15s ease;align-items:baseline;
}
.spec__r:hover{background:rgba(255,255,255,.04)}
.band--ink .spec dt{color:#8E959C}
.spec dt{
  font:400 14px/1.4 MadeforText,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.spec dd{
  margin:0;font:400 clamp(18px,1.6vw,21px)/1.45 MadeforText,sans-serif;color:#fff;
}
.band--ink .spec dd{color:#EDEFF1}

/* ── Цены ────────────────────────────────────────────────────────────────
   Тарифных плашек здесь нет намеренно: две карточки с крупной цифрой —
   стандартный приём ниши, и владелец справедливо попросил переосмыслить.

   Осталась чистая типографика: две опорные цены рядом, без рамок и фона, и
   под ними две колонки «смета меньше / смета больше». Галочка и стрелка не
   нужны — направление читается из заголовка колонки, а лишний знак у
   каждого пункта превратил бы список в интерфейс. */
.pr{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5) var(--s6);
}
.pr__i{min-width:0}
.pr__l{
  font:400 13px/1.4 MadeforText,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
}
.pr__n{
  margin-top:var(--s2);
  font:700 clamp(38px,4.6vw,58px)/1 MadeforDisplay,sans-serif;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
/* «/мес» — часть цены, но не её величина: набираем мельче и спокойнее,
   иначе строка читается как две цифры подряд. */
.pr__n span{font:400 .42em/1 MadeforText,sans-serif;letter-spacing:0;color:var(--ink-3)}
.pr__d{margin-top:var(--s3);color:var(--ink-2);font-size:17px;line-height:1.62;max-width:40ch}

/* Что двигает смету. Две колонки без плашек; заголовок колонки задаёт
   направление, поэтому у пунктов нет ни галочек, ни минусов. */
.pf{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5) var(--s6);margin-top:var(--s7);
}
.pf__h{
  font:700 19px/1.3 MadeforDisplay,sans-serif;letter-spacing:-.014em;color:var(--ink);
  margin-bottom:var(--s3);
}
.pf__l{display:grid;gap:var(--s2)}
.pf__l li{
  position:relative;padding-left:var(--s3);
  color:var(--ink-2);font-size:17px;line-height:1.55;
}
/* Метка пункта — короткая черта, а не точка: список читается как перечень
   условий, а не как содержание. */
.pf__l li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:10px;height:2px;border-radius:2px;background:var(--accent);
}
.pf__l--up li::before{background:var(--ink-3)}

/* ── Ход работы: ведомость ───────────────────────────────────────────────
   ЭТОТ БЛОК Я УЖЕ ОДИН РАЗ СНЁС. Правил стили цен вырезанием куска между
   комментариями «Цены» и «Цифры», не заметив, что «Цены» лежат в файле
   ВЫШЕ «Хода работы»: замена унесла вместе с плашками цен всю ведомость.
   Разметка осталась, стилей не стало, и секция на бою рассыпалась в столбик
   простого текста. Теперь порядок разделов в файле проверяет
   scripts/check-classes.py, а не моя память.

   Главное вынесено в правую колонку: не что мы делаем, а что оказывается у
   заказчика на руках. Поэтому правая колонка крупнее левой, а у списка есть
   подписанная шапка — без неё три колонки читались бы как обычная сетка.
   Ни одной линейки: строки делит воздух и подсветка фона при наведении. */
.wf{display:grid;gap:2px}
.wf__h,.wf__r{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--s3) var(--s5);
}
.wf__h{
  padding:0 var(--s3) var(--s2);
  font:400 13px/1.4 MadeforText,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
}
.wf__r{
  padding:var(--s4) var(--s3);border-radius:14px;align-items:start;
  transition:background .15s ease;
}
.wf__r:hover{background:rgba(255,255,255,.55)}
.wf__n{
  font:700 26px/1 MadeforDisplay,sans-serif;letter-spacing:-.03em;
  color:var(--accent);font-variant-numeric:tabular-nums;padding-top:2px;
}
.wf__do{margin-top:var(--s1);color:var(--ink-2);font-size:16.5px;line-height:1.55;max-width:34ch}
.wf__out{
  font:400 clamp(18px,1.7vw,22px)/1.4 MadeforText,sans-serif;color:var(--ink);
  max-width:34ch;
}

/* ── Цифры ───────────────────────────────────────────────────────────────── */
.kpi__n{
  font:700 clamp(40px,4.6vw,60px)/1 MadeforDisplay,sans-serif;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.kpi__l{margin-top:var(--s2);color:#A9B0B7;font-size:16px;line-height:1.5}
/* Цифры стоят и на тёмной полосе, и на светлой — подпись должна читаться
   на обеих. Задаём правилом, а не инлайново по месту. */
.band--sage .kpi__l,.band--amber .kpi__l,.band--gray .kpi__l{color:var(--ink-2)}

/* ── Заявление (слоган владельца) ────────────────────────────────────────
   Отдельная полоса под одну фразу. Это его собственная формулировка
   оффера, и она должна читаться как заявление, а не как ещё один абзац. */
.claim{font:700 clamp(30px,4.4vw,58px)/1.08 MadeforDisplay,sans-serif;letter-spacing:-.032em;max-width:24ch}
.claim--wide{max-width:34ch}



/* ── Вопросы ─────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:var(--s1)}   /* во всю ширину секции, как и заголовок */
.faq details{background:#fff;border-radius:var(--r-m);padding:0 var(--s4);box-shadow:var(--sh-s);transition:box-shadow .16s ease}
.faq details[open]{box-shadow:var(--sh-m)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s3) 0;display:flex;align-items:flex-start;gap:var(--s3);
  font:700 18.5px/1.4 MadeforDisplay,sans-serif;letter-spacing:-.014em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font:400 27px/1 MadeforText,sans-serif;color:var(--ink-3);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 0 var(--s4);color:var(--ink-2);font-size:17px;line-height:1.68;max-width:68ch}

/* ── Блог ────────────────────────────────────────────────────────────────
   Список статей — без карточек и обложек. Иллюстратора у нас нет, а четыре
   плашки с серым прямоугольником вместо картинки выглядят хуже честного
   списка. Поэтому строка статьи: слева дата и время чтения мелко, справа
   крупный заголовок — то, по чему выбирают, что читать.

   Вся строка — ссылка, поэтому у неё своя подсветка фона при наведении:
   кликабельная область должна быть видна целиком, а не только на тексте. */
.pl{display:grid;gap:2px}
.pl__r{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:var(--s2) var(--s5);padding:var(--s4) var(--s3);border-radius:14px;
  transition:background .15s ease;align-items:baseline;
}
/* Строка статьи больше не ссылка целиком: ссылка — заголовок, а вся строка
   кликается растянутым ::after. Так анкор ссылки состоит из названия статьи,
   а не начинается с даты и времени чтения. */
.pl__r{position:relative}
.pl__r:hover{background:var(--band-gray)}
.pl__t a{color:inherit;text-decoration:none}
.pl__t a::after{content:"";position:absolute;inset:0}
.pl__r:hover .pl__t a{color:var(--accent)}
/* Мета строки статьи — СТОЛБИКОМ, а не строкой с переносом. Строкой она
   ломалась по-разному от статьи к статье: у одной «дата / 8 мин / каналы и
   лимиты» вставало в три строки, у соседней в две, и список выглядел
   рваным. Порядок фиксированный: дата, время чтения, раздел. */
.pl__m{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  font:400 13px/1.4 MadeforText,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.pl__min{color:var(--accent)}
/* Раздел в строке списка — ссылка, но набрана как служебная метка: она не
   должна спорить с заголовком статьи за внимание. z-index нужен, потому что
   ссылка заголовка растянута ::after на всю строку и перекрыла бы её. */
.pl__cat{
  position:relative;z-index:1;color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid transparent;
}
.pl__cat:hover{color:var(--accent);border-bottom-color:currentColor}
/* display:block, потому что это больше не h2, а span: названия чужих статей
   в блоке «Читать дальше» не должны попадать в оглавление страницы. Тег
   сменился, вид остался. */
.pl__t{
  display:block;
  font:700 clamp(21px,2.1vw,27px)/1.22 MadeforDisplay,sans-serif;letter-spacing:-.022em;
}
.pl__r:hover .pl__t{color:var(--accent)}
.pl__d{margin-top:var(--s2);color:var(--ink-2);font-size:17px;line-height:1.6;max-width:62ch}

/* ── Герой статьи ────────────────────────────────────────────────────────
   Отдельная полоса над текстом. Без неё открытая статья начиналась прямо с
   заголовка на белом и ничем не отличалась от списка статей: непонятно,
   вошёл ты в текст или всё ещё выбираешь.

   Мера заголовка шире, чем у текста (34 знака против 72): заголовок должен
   ломаться крупными строками, абзац — мелкими. Раз уж я на этом уже
   попадался, повторю: мера ставится на САМ заголовок, а не на контейнер,
   иначе лид внутри получает ту же узкую меру.

   ОБЛОЖКА В ГЕРОЕ НЕ ПЕЧАТАЕТСЯ. Она у нас типографская, то есть на ней
   тот же заголовок, что рядом в h1, и на снимке это читалось как заголовок,
   написанный дважды. Обложка ушла в og:image — работать туда, где её видят.
   Поэтому двухколоночного варианта героя здесь больше нет. */
.phero__in{display:grid;gap:var(--s5)}
/* min-width:0 обязателен: без него длинное слово в заголовке растягивает
   колонку сетки. */
.phero__t{min-width:0}
.phero .crumbs{margin-bottom:var(--s4)}
.phero .pill{background:#fff}
.phero__h{max-width:34ch;margin-top:var(--s3)}
.phero__lead{margin-top:var(--s4);max-width:64ch;font-size:clamp(19px,1.5vw,22px)}
.phero__m{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s5);
  font:400 13px/1.4 MadeforText,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
/* Точки-разделители между датой, временем чтения и автором. */
.phero__m > *+*{display:flex;align-items:center;gap:var(--s3)}
.phero__m > *+*::before{content:"";width:4px;height:4px;border-radius:50%;background:#BCC7C0}
/* Полоса после героя не нуждается в полном отступе сверху: герой уже
   отделил текст цветом. Без этого правила между шапкой и первым абзацем
   набегало 224 пикселя — сто двенадцать снизу у героя плюс столько же
   сверху у текста, и статья открывалась пустотой. */
.phero + .band{padding-top:var(--s6)}

/* ── Статья ──────────────────────────────────────────────────────────────── */
/* Крошки. Последний элемент — не ссылка и обрезается, если заголовок
   длинный: путь должен оставаться одной строкой, иначе он спорит с
   заголовком страницы, ради которого человек и пришёл. */
.crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1);
  font-size:15px;color:var(--ink-3);margin-bottom:var(--s5);
}
/* Каждая крошка — на одной строке. Без этого «Цены и сметы» переносилось
   ВНУТРИ себя, и путь читался как четыре пункта вместо трёх: переноситься
   должна строка крошек, а не название раздела. */
.crumbs a,.crumbs__c{color:var(--ink-3);white-space:nowrap}
.crumbs a:hover{color:var(--accent)}
.crumbs__s{color:#C2CCC6}
.crumbs__c{
  color:var(--ink-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.post__b{margin-top:var(--s6)}
/* Внутри статьи заголовки нужны заметнее, чем в юридическом документе:
   по ним листают. */
.post__b h2{font-size:clamp(24px,2.4vw,32px);margin-top:var(--s7)}
.post__b h3{font-size:21px;margin-top:var(--s5)}
.post__b blockquote{
  margin:var(--s4) 0;padding:var(--s3) 0 var(--s3) var(--s4);
  font-size:19px;line-height:1.55;color:var(--ink);
}
/* Цитата отмечается не рамкой, а полосой маркера — тем же приёмом, что и
   подсветка слов в заголовках. */
.post__b blockquote{position:relative}
.post__b blockquote::before{
  content:"";position:absolute;left:0;top:var(--s2);bottom:var(--s2);
  width:4px;border-radius:99px;background:var(--mark);
}
.post__b hr{border:0;height:1px;background:#E4E7E4;margin:var(--s6) 0}
.post__b code{
  font:400 .92em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--band-gray);padding:.14em .38em;border-radius:5px;
}
.post__cta{
  margin-top:var(--s7);padding:var(--s5) 0 0;
}
.post__ctat{
  font:700 clamp(22px,2.2vw,28px)/1.25 MadeforDisplay,sans-serif;
  letter-spacing:-.022em;margin-bottom:var(--s4);max-width:24ch;
}
.post__next{margin-top:var(--s7)}
.post__next .pl{margin-top:var(--s3)}

/* ── Лист выбора знака ───────────────────────────────────────────────────
   Страница /logos. Строка на знак: номер, замысел словами, четыре
   состояния справа. Состояния показаны рядом намеренно — знак, который
   разваливается на 16 пикселях, отбрасывается сразу, каким бы умным ни был
   замысел. */
.lg{display:grid;gap:2px}
.lg__r{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;
  gap:var(--s3) var(--s5);padding:var(--s4) var(--s3);border-radius:16px;
  align-items:center;transition:background .15s ease;
}
.lg__r:hover{background:var(--band-gray)}
.lg__n{
  font:700 24px/1 MadeforDisplay,sans-serif;letter-spacing:-.03em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.lg__t h2{margin-bottom:var(--s2)}
.lg__i{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:56ch}
.lg__risk{margin-top:var(--s2);font-size:15px;line-height:1.5;color:var(--ink-3);max-width:56ch}
.lg__risk span{
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mark-ink);background:var(--mark-soft);
  padding:3px 8px;border-radius:99px;margin-right:6px;
}
.lg__s{display:flex;align-items:flex-end;gap:var(--s4)}
.lg__c{display:flex;flex-direction:column;align-items:center;gap:8px}
.lg__c em{font-style:normal;font-size:11.5px;letter-spacing:.05em;color:var(--ink-3)}
/* Тёмный фон — на самой плашке, а не на ячейке: иначе подпись «подвал»
   оказывается ВНУТРИ плашки, съезжает с общей базовой линии подписей и
   вдобавок печатается серым по тёмному (контраст ниже нормы). */
.lg__dk{
  width:52px;height:52px;border-radius:14px;background:var(--band-ink);
  color:var(--mark);display:flex;align-items:center;justify-content:center;
}
.lg__big{color:var(--accent)}
.lg__big svg{width:56px;height:56px}
.lg__sm{color:var(--ink)}
.lg__sm svg{width:16px;height:16px}
.lg__sq{
  width:52px;height:52px;border-radius:14px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lg__sq svg{width:28px;height:28px}
.lg__dk svg{width:32px;height:32px}

/* ── Вкладки разделов блога ─────────────────────────────────────────────
   Не рамки, а мягкие плашки: в этой системе границ нет нигде. Активная
   вкладка залита акцентом — иначе, когда разделов семь, человек теряет,
   где он находится.

   Число рядом с названием стоит не для симметрии: раздел из одной статьи и
   раздел из восьми выглядят одинаково, и без числа человек кликает вслепую. */
.btabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.btabs__i{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px var(--s3);border-radius:99px;background:var(--band-gray);
  font:400 15px/1.2 MadeforText,sans-serif;color:var(--ink);text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.btabs__i:hover{background:var(--mark-soft);color:var(--mark-ink)}
.btabs__i--on{background:var(--accent);color:#fff}
.btabs__i--on:hover{background:var(--accent-dark);color:#fff}
.btabs__n{font-variant-numeric:tabular-nums;opacity:.6;font-size:13px}

/* ── Оглавление статьи ──────────────────────────────────────────────────
   Строится по h2 и печатается только если разделов хотя бы три (см.
   views/blog/post.php). Не рамка, а мягкая полоса — в этой системе границ
   нет нигде, и оглавление не повод их заводить.

   Нумерация своя, через счётчик: родной маркер ol списку с list-style:none
   не вернуть, а порядок здесь несёт смысл — он повторяет порядок чтения. */
/* Ширина — по мере текста статьи (.doc = 72ch), а не на всю полосу: на
   снимке оглавление в 1 280 пикселей выглядело пустой плашкой с короткими
   строчками у левого края. */
.ptoc{
  max-width:72ch;background:var(--band-gray);border-radius:16px;
  padding:var(--s4) var(--s5);margin-top:var(--s6);
}
.ptoc__t{
  font:400 13px/1.4 MadeforText,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.ptoc__l{counter-reset:toc;margin-top:var(--s3);display:grid;gap:6px}
.ptoc__l li{counter-increment:toc;display:flex;gap:var(--s3);font-size:17px;line-height:1.5}
.ptoc__l li::before{
  content:counter(toc);color:var(--accent);font-weight:700;
  font-variant-numeric:tabular-nums;min-width:1.4em;
}
.ptoc__l a{color:var(--ink);text-decoration:none}
.ptoc__l a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── Таблица в статье ───────────────────────────────────────────────────
   БЕЗ РАМОК, как всё на этом сайте: строки разделены не линиями, а заливкой
   через одну. Читаемость таблицы держится на трёх вещах — шаге между
   строками, выравнивании цифр и том, что заголовок явно не похож на данные.

   Оболочка с прокруткой обязательна: таблица из четырёх колонок на телефоне
   либо расползётся за край страницы, либо сожмёт текст в столбик по слову.
   Прокрутка — у САМОЙ таблицы, а не у страницы: страница, которая ездит
   боком, выглядит сломанной.

   tabular-nums — чтобы «20 000 ₽» и «45 000 ₽» стояли разряд под разрядом;
   без этого колонка цен выглядит рваной. */
.post__tw{margin:var(--s6) 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.post__tw table{
  border-collapse:collapse;width:100%;min-width:34rem;
  font-size:16px;line-height:1.5;
}
.post__tw th{
  text-align:left;vertical-align:bottom;padding:0 var(--s3) var(--s2);
  font:400 12.5px/1.3 MadeforText,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.post__tw td{
  padding:var(--s3);color:var(--ink-2);vertical-align:top;
  font-variant-numeric:tabular-nums;
}
.post__tw tbody tr:nth-child(odd){background:var(--band-gray)}
.post__tw td:first-child{color:var(--ink);font-weight:700}
.post__tw tr td:first-child{border-radius:10px 0 0 10px}
.post__tw tr td:last-child{border-radius:0 10px 10px 0}

/* ── Картинка в статье ──────────────────────────────────────────────────
   Настоящий тег img, а не фон в CSS: фоновую картинку поисковик не
   индексирует, и в поиске по картинкам её не существует. Ширину и высоту
   печатает разбор markdown — без них страница дёргается при загрузке. */
.post__fig{margin:var(--s6) 0}
.post__fig img{width:100%;height:auto;display:block;border-radius:16px}
.post__fig figcaption{
  margin-top:var(--s2);font-size:15px;line-height:1.5;color:var(--ink-3);
}

/* ── Генерация знаков на /logos ─────────────────────────────────────────
   Сетка карточек для сгенерированных знаков. Они приходят готовыми SVG со
   своими цветами и белым фоном, поэтому перекрасить их через currentColor
   нельзя — выводятся тегом img, а не встраиваются в разметку. Плюс к
   честности: видно ровно то, что отдала модель.

   Второй размер (18 пикселей) стоит рядом с большим не для красоты: именно
   на нём видно, что кружево из окружностей превращается в пятно, а спор о
   том, «красиво ли», на этом заканчивается. */
.gn{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:var(--s5);margin-top:var(--s6);
}
.gn__c{margin:0}
/* Без подложки. Сгенерированные файлы приходят со своим белым квадратом и
   широкими полями внутри, поэтому серая плашка вокруг давала белый квадрат
   в серой рамке — двойная коробка, видно на снимке сразу. */
.gn__b{display:flex;align-items:center;justify-content:center}
.gn__b img{width:100%;height:auto;display:block}
.gn__s{margin-top:var(--s2);display:flex;align-items:center;gap:8px}
.gn__s img{display:block}
.gn__n{display:block;margin-top:var(--s2);font-weight:600;font-size:15px;color:var(--ink)}
.gn__v{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-3)}

/* ── Оговорка про Meta ───────────────────────────────────────────────────
   Узкая полоса перед подвалом: тон между белой страницей и тёмным
   подвалом, мелкий спокойный текст. Задача полосы — быть найденной по
   звёздочке, а не привлекать внимание. */
.metanote{background:var(--band-gray);padding:var(--s4) 0}
.metanote p{font-size:13.5px;line-height:1.6;color:#5C6268;max-width:96ch}
.metanote__ast{font-weight:700;color:var(--ink-2);margin-right:2px}

/* ── Длинный документ ────────────────────────────────────────────────────
   Юридические страницы. Здесь важна не выразительность, а то, чтобы текст
   можно было ЧИТАТЬ и НАХОДИТЬ в нём пункт: мера около 72 знаков,
   нумерованные разделы, крупный интерлиньяж, заметные ссылки.

   Отдельная типографика, а не общие классы страницы: на лендинге абзац
   короткий и его меру держат по 42 знака, в документе абзац длинный, и та
   же мера превратила бы его в колонку из двадцати строк. */
/* МЕРА СТРОКИ — НА ТЕКСТОВЫХ БЛОКАХ, А НЕ НА КОНТЕЙНЕРЕ.
   Было max-width:72ch на .doc, и всё внутри оказывалось зажато — включая
   таблицы. Четырёхколоночная таблица не влезала в меру, и на снимке
   последняя колонка была ОБРЕЗАНА даже на мониторе: прокрутка появлялась
   там, где места на экране полно.

   Теперь читаемая ширина живёт на абзацах, списках, цитатах и заголовках —
   то есть там, где она и нужна, — а таблица и картинка занимают всю
   доступную ширину. Тот же приём уже применён к лиду статьи, который
   раньше сжимался до 26 знаков. */
.doc{font-size:17px;line-height:1.72;color:var(--ink-2)}
.doc>p,.doc>ul,.doc>ol,.doc>blockquote,.doc>h2,.doc>h3,.doc>h4,.doc>hr{max-width:72ch}
.doc>*+*{margin-top:var(--s3)}
.doc h2{
  font-size:26px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);
  margin-top:var(--s6);
}
.doc h3{font-size:19.5px;line-height:1.3;color:var(--ink);margin-top:var(--s5)}
.doc strong{color:var(--ink);font-weight:700}
.doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--accent-dark)}
.doc ul,.doc ol{display:grid;gap:var(--s2);padding-left:1.4em}
.doc ul{list-style:disc} .doc ol{list-style:decimal}
.doc li{padding-left:.2em}
.doc li::marker{color:var(--ink-3)}
/* Реквизиты — парами «поле — значение», без табличных линеек. */
.doc dl{display:grid;gap:var(--s2)}
.doc dl div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:var(--s1) var(--s3)}
.doc dt{color:var(--ink-3);font-size:15.5px}
.doc dd{margin:0;color:var(--ink)}
/* Дата редакции и оговорка «не оферта» — мелким в конце. */
.doc__meta{margin-top:var(--s6);font-size:15px;color:var(--ink-3)}

/* ── Подвал ──────────────────────────────────────────────────────────────── */
.foot{background:var(--band-ink);color:#8A9097;padding:var(--s7) 0 var(--s5);font-size:15.5px}
/* Четыре колонки вместо трёх: документов стало столько, что в подвал
   добавился отдельный столбец. Первая колонка шире — в ней имя, фраза о
   деле и прямые контакты, то есть то, за чем в подвал чаще всего идут. */
.foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s5)}
.foot a{color:#D3D8DD}
.foot a:hover{color:#fff}
.foot .logo{color:#fff}
.foot__t{color:#fff;font:700 16px/1 MadeforDisplay,sans-serif;margin-bottom:var(--s3)}
.foot__about{max-width:34ch}
.foot__list{display:flex;flex-direction:column;gap:10px}
/* Юридическая полоса подвала: реквизиты и номер в реестре операторов.
   Номер проверяемый — его сверяют в открытом реестре РКН, поэтому он стоит
   рядом с ИНН, а не спрятан в документе. */
.foot__legal{margin-top:var(--s6);font-size:13.5px;line-height:1.6;color:#8E959C}
.foot__legal p+p{margin-top:var(--s1)}
.foot__reg{color:#B6C2BA}

/* ── Анимация ────────────────────────────────────────────────────────────
   Ровно две, обе служат смыслу, а не украшают.

   1. Первый экран собирается по строкам: «Это бот.» → «Это мини-приложение.»
      → «Это поддержка…». Фраза читается как речь, и порядок в ней есть.
   2. Маркер прочерчивается слева направо, как настоящим маркером, — после
      того как строка встала на место.

   ВАЖНО: прятать элементы можно ТОЛЬКО под классом .js-anim, который
   ставит встроенный скрипт в <head>. Если спрятать их безусловно, то при
   отключённом JS (или если скрипт не загрузился) заголовок первого экрана
   останется невидимым — страница окажется пустой. Класс ставится до первой
   отрисовки, поэтому мигания нет. */
/* ЛОВУШКА, которая уже стоила целого первого экрана: строки прячутся здесь
   через opacity:0 и проявляются кадрами `rv`. Когда я выпиливал анимацию
   появления секций, вместе с ней уехали и @keyframes rv — правило осталось,
   кадров не стало, и заголовок навсегда остался прозрачным. Правило и кадры
   живут рядом и удаляются только вместе. */
.js-anim .hero .h1 .hero__l{opacity:0;transform:translateY(18px);animation:rv .62s cubic-bezier(.2,.7,.3,1) forwards}
.js-anim .hero .h1 .hero__l:nth-child(2){animation-delay:.12s}
.js-anim .hero .h1 .hero__l:nth-child(3){animation-delay:.24s}
.js-anim .hero .hl::before{transform:rotate(-.7deg) scaleX(0);animation:mk .5s .58s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rv{to{opacity:1;transform:none}}
@keyframes mk{to{transform:rotate(-.7deg) scaleX(1)}}

/* АНИМАЦИИ ПОЯВЛЕНИЯ СЕКЦИЙ ЗДЕСЬ НЕТ, И ЭТО РЕШЕНИЕ, А НЕ ПРОПУСК.
   Она была, прятала секции до срабатывания наблюдателя — и на первом же
   снимке страницы целые полосы оказались пустыми: наблюдатель не успел
   сработать. Ради короткого эффекта content зависел от того, отработал ли
   JS. Для лендинга это неприемлемо: анимация осталась только на первом
   экране, где скрипт гарантированно уже выполнен.

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-anim .hero .h1 .hero__l{opacity:1!important;transform:none!important}
  .js-anim .hero .hl::before{transform:rotate(-.7deg)!important}
}

/* ── Адаптив ─────────────────────────────────────────────────────────────
   Правило, на котором я уже попался: класс с padding НЕЛЬЗЯ вешать на тот
   же элемент, что .wrap — селекторы одноклассовые, и объявленный ниже
   стирает боковые отступы. Поэтому .hero и .band всегда обёртки. */
@media (max-width:1080px){
  /* Ведомость: номер уезжает в строку с названием, результат — под них. */
  .wf__h{display:none}
  .wf__r{grid-template-columns:52px minmax(0,1fr);gap:var(--s2) var(--s3)}
  .wf__out{grid-column:1 / -1;margin-top:var(--s1)}
  .sh{grid-template-columns:1fr;align-items:start;gap:var(--s3)}
  .sh__d{grid-column:1;padding-top:0;max-width:62ch}
}
@media (max-width:1000px){
  .duo{grid-template-columns:1fr;gap:var(--s5)}
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  /* Строка канала на узком экране: знак и имя рядом, мысль — под ними. */
  .chn{grid-template-columns:56px minmax(0,1fr);gap:var(--s3)}
  .chn__mk{width:56px;height:56px;border-radius:17px}
  .chn__mk svg{width:30px;height:30px}
  .chn__first{grid-column:1 / -1;margin-top:var(--s2)}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .band{padding:var(--s7) 0}
  .band--tight{padding:var(--s6) 0}
  .hero{padding:var(--s5) 0 var(--s7)}
  .hero .h1{max-width:none}
  .cols,.cols-2,.cols-3,.cols-4,.pr,.pf{grid-template-columns:1fr;gap:var(--s5)}
  /* Строка статьи на телефоне: дата над заголовком, а не рядом. */
  .pl__r{grid-template-columns:1fr;gap:var(--s2);padding:var(--s3) var(--s2)}
  /* Лист знаков на телефоне: состояния уходят под текст, номер к названию. */
  .lg__r{grid-template-columns:44px minmax(0,1fr);gap:var(--s2) var(--s3)}
  .lg__s{grid-column:1 / -1;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
  .phero__h{max-width:none}
  .foot__grid{grid-template-columns:1fr;gap:var(--s4)}
  .nav,.top__act{display:none}
  .burger{display:block}
  .top__in{height:68px}
  .hero__bg i{--sz:84px!important}
  /* Пункты строки доверия на телефоне встают в столбик, и точка-разделитель
     из горизонтального ряда превращается в кривой маркер списка. */
  .hero__trust{display:block}
  .hero__trust li{display:block;margin-top:var(--s1)}
  .hero__trust li+li::before{display:none}
  /* Панель считает верх от окна, а шапка теперь уезжает при прокрутке.
     Поэтому перед открытием меню app.js возвращает страницу наверх — иначе
     панель встала бы под уехавшую шапку. */
  .nav.is-open{
    display:flex;position:fixed;inset:68px 0 0;background:var(--base);z-index:60;
    flex-direction:column;gap:0;padding:var(--s3) 20px var(--s6);overflow-y:auto;
  }
  .nav.is-open a{padding:var(--s2) 0;font:700 22px/1.3 MadeforDisplay,sans-serif;color:var(--ink)}
  .nav.is-open>.btn{display:inline-flex;margin-top:var(--s3);width:100%}
}