/* Чек-лист «73 пункта». Надстройка над tokens.css + site.css + palette.css.
   Правила этого файла:
   1. Ни одного своего цвета. Только переменные палитры, иначе смена палитры
      на сайте перестанет тянуть за собой чек-лист, а ради этого всё и делалось.
   2. Все классы с префиксом cl-. В site.css уже заняты .box, .head, .n, .metrics
      и ещё десяток имён, совпадение молча сломает вёрстку одной из страниц.
   3. Шрифты не объявляются: Lora и Inter приходят из tokens.css. */

/* ── Шапка сайта ────────────────────────────────────────────────
   Перенесена из внутреннего <style> главной один в один. Причина дубля:
   геометрия шапки на главной живёт не в site.css, а в самой странице, а
   первый экран главной утверждён 17.08 и не переделывается. Цвета и шрифты
   здесь переменные, поэтому смена палитры тянет обе страницы одинаково.
   Меняешь шапку на главной: продублируй сюда. */
.top{border-bottom:1px solid var(--hair);background:var(--paper);position:sticky;top:0;z-index:30}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:clamp(54px,7vh,70px);padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:var(--s3);min-width:0}
.brand .ava{width:clamp(36px,4.6vh,44px);height:clamp(36px,4.6vh,44px);border-radius:50%;
  background:var(--wash);flex:none;object-fit:cover;object-position:50% 12%}
.brand .name{font-family:Lora,Georgia,serif;font-weight:500;font-size:1.1rem;line-height:1.15;display:block}
.brand .desc{display:none;color:var(--text2);font-size:.8rem;line-height:1.3;max-width:52ch;margin-top:2px}
@media(min-width:860px){.brand .desc{display:block}}
.top .act{display:flex;align-items:center;gap:var(--s4);flex:none}
.top .tel{display:none;font-size:1.02rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.top .tel:hover{color:var(--ochre)}
@media(min-width:700px){.top .tel{display:inline}}
/* Правка Дмитрия 17.08.2026: кнопка в том же формате, что блоки, то есть контур,
   а не сплошная чёрная заливка. Заливка была последним крупным чёрным пятном
   на светлой странице и спорила с карточками. */
.top .btn{padding:11px 22px;font-size:1rem}
.top .btn-p{background:var(--card);color:var(--ink);border:1.5px solid var(--ink)}
.top .btn-p:hover{background:var(--wash)}
/* Оглавление слева перекрыло бы шапку: сдвигаем её на широких экранах. */
@media(min-width:1180px){.top .wrap{max-width:none;padding-left:calc(320px + var(--s4))}}

/* ── Каркас страницы: оглавление слева, контент справа ───────────── */
.cl-page{max-width:1180px;margin:0 auto;padding:0 var(--s4)}
@media(min-width:768px){.cl-page{padding:0 var(--s6)}}
@media(min-width:1180px){
  .cl-page{margin:0 auto;padding-left:calc(320px + var(--s6));
    padding-right:var(--s6);max-width:1500px}
  .cl-inner{max-width:780px;margin:0 auto}
}
.cl-inner{max-width:780px;margin:0 auto}

/* ── Оглавление слева ───────────────────────────────────────────── */
.cl-toc{position:fixed;left:0;top:0;width:320px;height:100vh;z-index:40;
  background:var(--fog);border-right:1px solid var(--hair);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .26s var(--ease)}
.cl-toc.open{transform:none;box-shadow:24px 0 60px -30px var(--shadow)}
@media(min-width:1180px){.cl-toc{transform:none;box-shadow:none}}

.cl-toc-h{padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--hair);flex:none}
.cl-toc-h .k{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ash)}
.cl-toc-h .cl-big{font-family:Lora,Georgia,serif;font-size:1.9rem;line-height:1;margin-top:6px;
  display:flex;align-items:baseline;gap:8px}
.cl-toc-h .cl-big i{font-style:normal;font-size:.95rem;color:var(--ash);font-family:Inter,sans-serif}
.cl-toc-track{height:6px;background:var(--card);border:1px solid var(--edge);
  border-radius:100px;overflow:hidden;margin-top:var(--s3)}
.cl-toc-track i{display:block;height:100%;width:0;background:var(--ochre);
  transition:width .3s var(--ease)}

.cl-toc-b{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--s3) var(--s3) var(--s6)}
.cl-toc-b::-webkit-scrollbar{width:7px}
.cl-toc-b::-webkit-scrollbar-thumb{background:var(--hair-2,var(--hair));border-radius:4px}

/* Правка Дмитрия 17.08.2026: «добавь контуры, чтобы было понятно, какой на каком этапе».
   Каждый пункт стал карточкой в контуре, и контур несёт состояние раздела:
   серый это не начат, золотой это в работе, зелёный это закрыт целиком.
   Текущее место дополнительно помечено чёрным контуром и золотой полосой слева. */
.cl-toc a{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:baseline;
  padding:11px 13px;margin-bottom:6px;text-decoration:none;color:var(--text);
  font-size:1rem;line-height:1.38;background:var(--card);
  border:1px solid var(--edge);border-radius:var(--r-s);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease)}
.cl-toc a:last-child{margin-bottom:0}
.cl-toc a:hover{border-color:var(--ash);color:var(--ink)}
.cl-toc a i{font-style:normal;font-family:Lora,Georgia,serif;color:var(--stone);font-size:1rem}
.cl-toc a em{font-style:normal;font-size:.9rem;color:var(--stone);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* Этап: начат, но не закрыт. */
.cl-toc a.part{border-color:var(--ochre)}
.cl-toc a.part em{color:var(--ochre-deep);font-weight:600}
/* Этап закрыт целиком. */
.cl-toc a.done{border-color:var(--ok);background:var(--card)}
.cl-toc a.done em{color:var(--ok);font-weight:600}
.cl-toc a.done em::after{content:" ✓"}
/* Место, где читатель находится сейчас. Полоса нарисована внутренней тенью,
   а не бордюром: бордюр сдвигал бы текст на 2px при каждом переходе. */
.cl-toc a.act{border-color:var(--ink);color:var(--ink);font-weight:500;
  box-shadow:inset 3px 0 0 var(--ochre)}
.cl-toc a.act i{color:var(--ochre-deep)}

.cl-toc .cl-toc-sep{padding:var(--s4) 4px 8px;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--stone)}
.cl-toc-f{flex:none;padding:var(--s3) var(--s4);border-top:1px solid var(--hair)}
.cl-toc-f button{width:100%;font:inherit;font-size:.94rem;color:var(--stone);background:none;
  border:none;cursor:pointer;text-decoration:underline;padding:4px}
.cl-toc-f button:hover{color:var(--ochre-deep)}

/* Кнопка оглавления на узких экранах */
/* Кнопка стоит с той же стороны, с какой выезжает панель. */
.cl-toc-btn{position:fixed;left:16px;bottom:16px;z-index:45;
  display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:100px;
  background:var(--wash);color:var(--ink);border:1.5px solid var(--ink);cursor:pointer;
  font:inherit;font-size:1rem;box-shadow:0 12px 30px -14px var(--shadow)}
.cl-toc-btn b{font-family:Lora,Georgia,serif;font-weight:500}
@media(min-width:1180px){.cl-toc-btn{display:none}}
.cl-scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:39;opacity:0;
  pointer-events:none;transition:opacity .26s var(--ease)}
.cl-scrim.on{opacity:1;pointer-events:auto}
@media(min-width:1180px){.cl-scrim{display:none}}

/* ── Титул ──────────────────────────────────────────────────────── */
.cl-hero{padding:clamp(38px,6vh,72px) 0 0}
.cl-hero h1{font-size:clamp(2rem,1.5rem + 2.4vw,3.1rem);line-height:1.06;margin-top:var(--s2);
  letter-spacing:-.01em;max-width:20ch}
.cl-hero .cl-sub{margin-top:var(--s4);color:var(--stone);max-width:52ch;
  font-size:clamp(1.06rem,1rem + .4vw,1.22rem)}

/* ── Продающий блок: формула прибыли ────────────────────────────── */
/* Липкая шапка перекрывает цель якоря, поэтому у всех целей есть отступ. */
.cl-form,.cl-how,.cl-res,.cl-sec{scroll-margin-top:78px}
/* Правка Дмитрия 17.08.2026: «очень много чёрного, всё в черноте».
   Блок переведён с чёрной заливки на светлую карточку с чёрным контуром и золотом.
   Контраст на светлом посчитан до сборки: на плашках --wash нельзя ни --ash (2,94),
   ни --ochre (4,21), поэтому там только --ochre-deep (7,65) и --stone (5,54). */
.cl-form{margin-top:clamp(28px,4vh,44px);background:var(--card);color:var(--text);
  border:1.5px solid var(--ink);border-radius:var(--r);padding:clamp(24px,3.4vh,40px)}
.cl-form h2,.cl-form h3{color:var(--ink)}
.cl-form .cl-k{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-deep)}
.cl-form h2{margin-top:var(--s2);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);
  line-height:1.12;max-width:24ch}
.cl-form h3{margin-top:var(--s6);font-size:1.25rem}
.cl-form .cl-eq{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--s2);
  margin-top:var(--s4);font-family:Lora,Georgia,serif;color:var(--ink);
  font-size:clamp(1.05rem,.95rem + .7vw,1.5rem)}
.cl-form .cl-eq span{white-space:nowrap}
.cl-form .cl-eq b{font-weight:500;border-bottom:2px solid var(--ochre);padding-bottom:2px}
.cl-form .cl-eq k{color:var(--stone);font-family:Inter,sans-serif;font-size:.72em}
.cl-form p{color:var(--text);margin-top:var(--s3)}
.cl-form p b{color:var(--ink)}

/* Пять множителей: список строк друг за другом, а не сетка.
   Правка Дмитрия 17.08.2026: «плашки можно сделать не в шахматном порядке, а просто
   одну за другой». Множителей пять, а колонок было три, поэтому шестая ячейка всегда
   оставалась пустой и читалась серым блоком. Одна колонка убирает и дыру, и тесноту:
   описанию достаётся вся ширина, а не треть. */
.cl-mult{list-style:none;display:grid;gap:0;margin-top:var(--s5);
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-s);overflow:hidden}
.cl-mult li{background:var(--paper);padding:var(--s3) var(--s4);
  display:grid;gap:2px var(--s3);align-items:baseline;border-top:1px solid var(--hair)}
.cl-mult li:first-child{border-top:0}
/* Буква, название и объяснение в одну строку: читается как таблица величин. */
@media(min-width:640px){
  .cl-mult li{grid-template-columns:2.6em minmax(0,11em) 1fr}
  .cl-mult k{grid-row:1;grid-column:1}
  .cl-mult b{grid-row:1;grid-column:2;margin-top:0}
  .cl-mult span{grid-row:1;grid-column:3;margin-top:0}
}
.cl-mult k{display:block;font-family:Lora,Georgia,serif;font-size:1.45rem;color:var(--ochre-deep);
  line-height:1.1;font-style:italic}
.cl-mult b{display:block;margin-top:8px;font-weight:500;font-size:1.06rem;line-height:1.35;color:var(--ink)}
.cl-mult span{display:block;margin-top:4px;color:var(--text2);font-size:1rem;line-height:1.5}

/* Арифметика. Два выигрышных сценария на бумаге, проигрышный на золотой плашке. */
.cl-math{display:grid;gap:var(--s2);margin-top:var(--s5)}
@media(min-width:720px){.cl-math{grid-template-columns:repeat(3,1fr)}}
.cl-math div{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-s);
  padding:var(--s4)}
.cl-math div.bad{background:var(--wash);border-color:var(--hair-2,var(--hair));
  border-left:3px solid var(--ochre)}
.cl-math k{display:block;font-family:Lora,Georgia,serif;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  line-height:1;color:var(--ink)}
.cl-math div.bad k{color:var(--ochre-deep)}
.cl-math p{margin-top:var(--s2);font-size:1rem;line-height:1.55;color:var(--text2)}
.cl-math div.bad p{color:var(--text)}

/* Цепочка: что рушит какой множитель. Слева причина, справа следствие. */
.cl-chain{list-style:none;margin-top:var(--s4);display:grid;gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-s);overflow:hidden}
.cl-chain li{background:var(--paper);padding:var(--s3) var(--s4);
  display:grid;gap:4px var(--s3);align-items:baseline}
/* Три колонки в ряд оставляют объяснению узкую ленту в пять слов на строку.
   Поэтому причина и следствие идут строкой, объяснение под ними во всю ширину. */
@media(min-width:600px){
  .cl-chain li{grid-template-columns:auto 1fr;column-gap:var(--s3)}
  .cl-chain b{grid-row:1;grid-column:1}
  .cl-chain k{grid-row:1;grid-column:2}
  .cl-chain span{grid-row:2;grid-column:1 / -1}
}
.cl-chain b{font-weight:500;color:var(--ink);font-size:1.06rem}
.cl-chain k{color:var(--ochre-deep);font-size:.98rem;white-space:nowrap}
.cl-chain span{color:var(--text2);font-size:1rem;line-height:1.55}

.cl-quote{margin-top:var(--s5);padding-left:var(--s4);border-left:2px solid var(--ochre);
  font-family:Lora,Georgia,serif;font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--ink)}
.cl-quote cite{display:block;margin-top:var(--s2);font-style:normal;font-family:Inter,sans-serif;
  font-size:.94rem;color:var(--stone)}

/* ── Как пользоваться ───────────────────────────────────────────── */
.cl-how{margin-top:clamp(28px,4vh,44px);background:var(--card);border:1px solid var(--hair);
  border-radius:var(--r);padding:clamp(22px,3vh,34px)}
.cl-how h3{font-size:1.15rem}
.cl-how ol{margin:var(--s3) 0 0;padding-left:1.3em;color:var(--text)}
.cl-how li{margin-bottom:var(--s2)}
.cl-how li:last-child{margin-bottom:0}
.cl-how .cl-note{margin-top:var(--s3);font-size:.98rem;color:var(--stone)}

/* ── Раздел ─────────────────────────────────────────────────────── */
.cl-sec{padding-top:clamp(48px,7vh,86px);scroll-margin-top:70px}
.cl-sec-h{border-top:2px solid var(--ink);padding-top:var(--s4)}
.cl-sec-h .k{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.cl-sec-h .k em{font-style:italic;font-family:Lora,Georgia,serif;font-size:1.25rem;color:var(--ochre);
  text-transform:none;letter-spacing:0;line-height:1}
.cl-sec-h h2{margin-top:var(--s2);font-size:clamp(1.5rem,1.2rem + 1.3vw,2.15rem);line-height:1.12;
  max-width:24ch}
.cl-sec-h .cl-lead{margin-top:var(--s3);color:var(--stone);max-width:60ch}
.cl-sec-h .cl-cnt{margin-top:var(--s3);font-size:1rem;color:var(--ochre-deep);font-weight:500}

.cl-items{list-style:none;margin-top:var(--s4)}
.cl-it{border-bottom:1px solid var(--hair)}
.cl-it:first-child{border-top:1px solid var(--hair)}
.cl-it label{display:flex;gap:var(--s3);padding:var(--s4) var(--s2);cursor:pointer;align-items:flex-start;
  transition:background .16s var(--ease)}
.cl-it label:hover{background:var(--card)}
/* Нативный чекбокс прячем прозрачностью, но с реальным размером:
   нулевой размер выбрасывает его из вьюпорта и ломает клик и клавиатуру. */
.cl-it input{position:absolute;width:24px;height:24px;margin:2px 0 0;opacity:0;cursor:pointer}
.cl-mark{flex:none;width:24px;height:24px;border:2px solid var(--edge);border-radius:6px;
  background:var(--card);margin-top:2px;position:relative;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.cl-mark::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;
  border:solid var(--card);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .18s var(--ease)}
.cl-it input:checked ~ .cl-mark{background:var(--ok);border-color:var(--ok)}
.cl-it input:checked ~ .cl-mark::after{transform:rotate(45deg) scale(1)}
.cl-it input:focus-visible ~ .cl-mark{outline:2px solid var(--ochre);outline-offset:3px}
.cl-body{display:block;min-width:0}
.cl-t{display:block;font-weight:500;color:var(--ink);line-height:1.45}
.cl-num{display:inline-block;min-width:2.3em;color:var(--stone);font-weight:400;font-size:.94em;
  font-family:Lora,Georgia,serif}
.cl-w{display:block;margin-top:7px;color:var(--text2);font-size:1.02rem;line-height:1.55;padding-left:2.2em}
.cl-tag{display:inline-block;margin-left:8px;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ochre-deep);background:var(--wash);border:1px solid var(--hair-2,var(--hair));
  border-radius:100px;padding:2px 9px;vertical-align:2px;font-weight:600}
.cl-it input:checked ~ .cl-body .cl-t{color:var(--ash)}

/* ── Итог ───────────────────────────────────────────────────────── */
/* Тот же перевод с чёрной заливки на контур, что и у блока формулы. */
.cl-res{margin-top:clamp(52px,8vh,96px);background:var(--card);color:var(--text);
  border:1.5px solid var(--ink);
  border-radius:var(--r);padding:clamp(28px,4vh,56px);scroll-margin-top:80px}
.cl-res h2{color:var(--ink);font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);line-height:1.1}
.cl-res .cl-score{font-family:Lora,Georgia,serif;font-size:clamp(2.8rem,2.2rem + 4vw,4.6rem);
  line-height:1;color:var(--ink);margin-top:var(--s4)}
.cl-res .cl-score span{color:var(--stone);font-size:.42em}
.cl-res .cl-lede{margin-top:var(--s3);color:var(--text);max-width:54ch}
.cl-rows{margin-top:var(--s5);display:grid;gap:var(--s2)}
.cl-row{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s3) 0;border-top:1px solid var(--hair)}
.cl-row .nm{font-size:1.06rem;color:var(--ink)}
.cl-row .nm i{font-style:italic;color:var(--stone);font-family:Lora,Georgia,serif;margin-left:6px}
.cl-row .val{font-family:Lora,Georgia,serif;font-size:1.45rem;white-space:nowrap;color:var(--ink)}
.cl-row .meter{grid-column:1 / -1;height:6px;background:var(--fog);border-radius:100px;
  overflow:hidden}
.cl-row .meter i{display:block;height:100%;width:0;background:var(--ink);border-radius:100px;
  transition:width .4s var(--ease)}
/* Слабый множитель метится золотом. Раньше стоял хардкод #e8b33a: он был подобран
   под чёрную заливку, на светлом фоне давал 1,9 по контрасту и не читался. */
.cl-row.weak .val{color:var(--ochre-deep)}
.cl-row.weak .meter i{background:var(--ochre)}
.cl-verdict{margin-top:var(--s5);padding:var(--s4);background:var(--wash);
  border:1px solid var(--hair-2,var(--hair));
  border-radius:var(--r-s);border-left:3px solid var(--ochre);line-height:1.55;color:var(--text)}
.cl-verdict b{color:var(--ink)}
.cl-cta{margin-top:clamp(28px,4vh,44px);display:flex;gap:var(--s3);flex-wrap:wrap}
/* Тот же язык, что у карточек: чёрный контур, золото несёт главное действие.
   Иерархия держится заливкой --wash, а не чёрным пятном. */
.cl-cta .btn{padding:16px 30px;font-size:1.05rem}
.cl-cta .btn-p{background:var(--wash);color:var(--ink);border:1.5px solid var(--ink)}
.cl-cta .btn-p:hover{background:var(--card)}
.cl-cta .btn-s{background:var(--card);color:var(--ink);border:1.5px solid var(--ink)}
.cl-cta .btn-s:hover{background:var(--fog)}

/* ── Подвал ─────────────────────────────────────────────────────── */
/* Снизу запас под плавающую кнопку «Разделы», иначе она накрывает подвал. */
.cl-foot{padding:clamp(44px,6vh,80px) 0 96px;color:var(--text2);font-size:.98rem;line-height:1.55}
@media(min-width:1180px){.cl-foot{padding-bottom:clamp(32px,5vh,60px)}}
.cl-foot p+p{margin-top:var(--s2)}
.cl-foot a{color:var(--stone)}

/* ── Печать и PDF ───────────────────────────────────────────────── */
@media print{
  .cl-toc,.cl-toc-btn,.cl-scrim,.readbar,.top,.cl-cta,.cl-how .cl-note{display:none !important}
  .cl-page{max-width:none;padding:0;margin:0}
  .cl-inner{max-width:none}
  body{background:#fff;font-size:10.5pt;line-height:1.42}
  .cl-sec{padding-top:18pt}
  .cl-sec-h{break-after:avoid}
  .cl-it{break-inside:avoid}
  .cl-it label{padding:6pt 0}
  .cl-mark{border-color:#555;width:14pt;height:14pt}
  .cl-w{font-size:9pt}
  /* break-inside:avoid здесь запрещён: блок про формулу длиннее страницы,
     и запрет разрыва выбрасывал его целиком на следующий лист, оставляя
     первую страницу пустой на две трети. Проверено рендером PDF.
     Экранная версия с 17.08 сама светлая, поэтому перекрашивать её здесь
     больше не нужно: остаются только сжатие отступов и правила разрывов. */
  .cl-form{padding:12pt}
  .cl-res{padding:12pt;break-inside:avoid}
  .cl-mult li,.cl-math div,.cl-chain li{break-inside:avoid}
  .cl-row .meter{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
}