/* Lab Grotesque, файлы клиента: сабсет под русский текст, woff2 */
/* Light по брендбуку только для справочного и юридического текста */
@font-face{font-family:'Lab Grotesque';src:url('../art/fonts/labgrotesque-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Lab Grotesque';src:url('../art/fonts/labgrotesque-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lab Grotesque';src:url('../art/fonts/labgrotesque-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lab Grotesque';src:url('../art/fonts/labgrotesque-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lab Grotesque Mono';src:url('../art/fonts/labgrotesque-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lab Grotesque Mono';src:url('../art/fonts/labgrotesque-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
b,strong{font-weight:700}
:root{/* бренд-палитра Финтабло 1.1 12.22 */
--blue:#2951CA;--blue-hi:#1E8BF2;--blue-soft:#E4EAFB;--navy:#141418;--logo:#142969;
--paper:#F5F7FD;--card:#FFF;--ink:#141418;--ink-2:#4A4E5C;--ink-3:#7E86A3;--ink-3t:#686F88;/* тёмный вариант для мелкого текста: 4,65:1 на --paper #F5F7FD. Прежний #6B728B давал 4,45 — считали против чистого белого, а текст лежит на подложке */
--line:#E1E6F3;--line-2:#C7CFE4;--green:#01B554;--red:#FF3A1D;
/* Токены схем: те же значения, что на страницах калькуляторов. */
--green-t:#017C39;--navy-deep:#091A4E;--amber:#FFAF36;--blue-h1:#0260E8;--paper-2:#EDF2FE;
--mono:'Lab Grotesque Mono','Lab Grotesque',ui-monospace,monospace;--maxw:min(100% - 48px,820px);--gut:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Lab Grotesque',-apple-system,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Lab Grotesque',sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.14;margin:0;text-wrap:balance}
h1{font-size:clamp(28px,4vw,42px);letter-spacing:-0.03em;margin-bottom:16px}
h2{font-size:clamp(21px,2.4vw,27px);margin:34px 0 12px}
h3{font-size:19px;margin:26px 0 9px}
p,li{color:var(--ink-2);text-wrap:pretty}p{margin:0 0 15px}
ul,ol{padding-left:22px;margin:0 0 16px}li{margin-bottom:8px}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--blue-hi)}
strong{color:var(--ink)}
.wrap{width:min(100% - var(--gut)*2,var(--maxw));margin-inline:auto}
header{position:sticky;top:0;z-index:50;background:rgba(244,247,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  height:56px;max-width:1760px;margin-inline:auto;
  padding:0 clamp(20px,4vw,56px)}
.brand{display:flex;align-items:center}
.brand img{display:block;height:28px;width:auto}
/* Меню раздела в шапке. Михаил 09.09.2026: «в хаб попадаешь и никуда
   не выбраться». Теперь на каждой странице разборов видно все
   инструменты раздела, а логотип ведёт в каталог инструментов. */
.hnav{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);
  margin:0 auto 0 26px;font-size:14.5px;white-space:nowrap;
  overflow-x:auto;scrollbar-width:none}
.hnav::-webkit-scrollbar{display:none}
.hnav a{color:var(--ink-2);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.hnav a:hover{color:var(--blue)}
.hnav a[aria-current="true"]{color:var(--blue);border-bottom-color:var(--blue)}
/* Узкий экран: меню не прячем, а переносим во вторую строку шапки с
   горизонтальной прокруткой. Спрятать значит вернуть ту же ловушку
   «из статьи никуда не выйти», только на телефоне. */
@media (max-width:1180px){
  .hbar{flex-wrap:wrap;height:auto;padding:9px 0}
  .hnav{order:3;flex:1 1 100%;margin:8px 0 0;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
}
/* Правая часть шапки, как на fintablo.ru: соцсети кружками, «Войти»
   обводкой, «Регистрация» заливкой. Формы у клиента живут в попапе
   Tilda, поэтому «Регистрация» ведёт на его страницу с якорем попапа. */
.hright{display:flex;align-items:center;gap:9px;flex:none}
.hsoc{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--blue);
  color:#fff;flex:none}
.hsoc:hover{background:var(--blue-hi);color:#fff}
.hlogin{display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border:1px solid var(--blue);border-radius:9px;color:var(--blue);
  font-size:13.5px;font-weight:500;white-space:nowrap}
.hlogin:hover{background:var(--blue-soft);color:var(--blue)}
.hreg{display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border-radius:9px;background:var(--blue);color:#fff;font-size:13.5px;
  font-weight:500;white-space:nowrap}
.hreg:hover{background:var(--blue-hi);color:#fff}

/* Поиск по разделу. Заменяет перечисление инструментов в меню: пятнадцать
   пунктов туда не влезут, а поиск масштабируется. */
.hsearch{position:relative;flex:1 1 220px;max-width:360px;min-width:150px}
.hsearch input{width:100%;height:34px;padding:0 12px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--card);
  font-family:inherit;font-size:14px;color:var(--ink)}
.hsearch input:focus{outline:2px solid var(--blue);outline-offset:1px}
.hres{position:absolute;top:40px;left:0;right:0;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(9,26,78,.28);overflow:hidden}
.hres a{display:block;padding:11px 14px;text-decoration:none;
  border-bottom:1px solid var(--line)}
.hres a:last-child{border-bottom:0}
.hres a:hover{background:var(--paper)}
@media (max-width:900px){
  .hlogin{display:none}
  .hsoc{display:none}
}
.hcta{background:var(--blue);color:#fff;border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:500}
.hcta:hover{background:var(--blue-hi);color:#fff}
article{padding:40px 0 20px}
.crumbs{font-size:13.5px;color:var(--ink-3t);margin-bottom:16px}.crumbs a{color:var(--ink-3t)}
.meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3t);margin-bottom:14px}
.note,.disclaimer{font-weight:300}
.lead{font-size:19px;color:var(--ink-2);margin-bottom:26px}
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:0 14px 14px 0;padding:16px 18px;margin:22px 0}
.callout p{margin:0;font-size:16px}
/* ---------- схемы в статьях ---------- */
/* Михаил 09.09.2026: «графиков туда добавить». Правила берём
   дословно со страниц калькуляторов: схема на странице сервиса
   и схема в статье должны выглядеть одинаково. */
/* --- схемы разделов --- */
.shema{margin:22px 0 0;padding:clamp(16px,2vw,26px);background:var(--card);
  border:1px solid var(--line);border-radius:18px}
.shema svg{display:block;width:100%;height:auto}
.shema figcaption{margin:14px 0 0;font-size:14.5px;line-height:1.55;
  color:var(--ink-3t);max-width:min(100%,1200px);text-wrap:pretty}
.shema .ax{stroke:var(--line-2);stroke-width:1}
.shema .mark line{stroke:var(--line-2);stroke-width:1}
.shema .mark .dash{stroke-dasharray:3 4}
.shema .z{fill:#8FB0F5}
.shema .d{fill:var(--blue)}
.shema .k{fill:rgba(1,181,84,.22);stroke:var(--green-t);stroke-width:1}
.shema .own{fill:var(--navy-deep)}
.shema .s1{fill:var(--blue)}
.shema .s2{fill:#6C8FE8}
.shema .s3{fill:#8FB0F5}
.shema .s4{fill:var(--amber)}
.shema text{font-family:var(--mono)}
.shema .cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  fill:var(--blue-h1)}
.shema .in{font-size:13px;font-weight:700;fill:#fff}
.shema .in2{font-size:11px;fill:var(--green-t)}
.shema .in3{font-size:11.5px;font-weight:700;fill:#fff}
.shema .pt{font-size:11px;fill:var(--ink-3t)}
.shema .note{font-size:11px;fill:var(--ink-3t)}
@media (max-width:720px){
  .shema svg{min-width:620px}
  .shema{overflow-x:auto}
}
.shema .pm{fill:var(--paper-2);stroke:var(--line);stroke-width:1}
.shema .pt2{font-size:11px;fill:var(--ink-3t)}

/* ---------- рубрикатор раздела слева ---------- */
/* Как в блоге клиента: рубрики слева с иконками. Рубрики у нас это
   инструменты, под текущим раскрыты его разборы. На узком экране
   колонка уступает место select, тоже как у них: четыре инструмента
   с вложенными статьями заняли бы на телефоне целый экран. */
/* Ширина как на страницах калькуляторов: 1760 и боковые отступы
   clamp(20px,4vw,56px). Михаил 09.09.2026: «всё сбито в центр, а слева
   и справа куча места». Узкая колонка чтения при этом сохраняется:
   строка длиннее 90 знаков читается плохо. Свободное место уходит на
   рубрикатор и на оглавление статьи справа. */
.page{display:grid;
  grid-template-columns:260px minmax(0,1fr) 240px;
  gap:clamp(24px,3vw,56px);align-items:start;
  max-width:1760px;margin-inline:auto;
  padding:0 clamp(20px,4vw,56px)}
.page.bez-toc{grid-template-columns:260px minmax(0,1fr)}
.page>article>.wrap{width:100%;max-width:none;margin-inline:0}
.page>article>.wrap>*{max-width:900px}
.page>article>.wrap>.list,.page>article>.wrap>.grp{max-width:none}
.rubr{position:sticky;top:76px;padding:22px 0 10px}
.rubr-t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3t);margin-bottom:12px}
.rubr-l,.rubr-s{list-style:none;margin:0;padding:0}
.rubr-i{margin:0 0 2px}
.rubr-i>a{display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-radius:9px;font-size:14.5px;color:var(--ink-2);
  text-decoration:none;transition:background .18s,color .18s}
.rubr-i>a img{flex:none;opacity:.62}
.rubr-i>a:hover{background:var(--blue-soft);color:var(--blue)}
.rubr-i.now>a{background:var(--blue-soft);color:var(--blue);font-weight:500}
.rubr-i.now>a img{opacity:1}
.rubr-s{margin:4px 0 10px;padding-left:11px;
  border-left:1px solid var(--line-2)}
.rubr-s li{margin:0}
.rubr-s a{display:block;padding:5px 9px;font-size:13.5px;line-height:1.35;
  color:var(--ink-3t);text-decoration:none;border-radius:7px}
.rubr-s a:hover{color:var(--blue);background:rgba(41,81,202,.06)}
.rubr-s a[aria-current="true"]{color:var(--ink);font-weight:500;
  background:rgba(41,81,202,.08)}
.rubr-m{display:none}
@media (max-width:1420px){
  /* Оглавление уходит первым: без него страница ничего не теряет,
     а рубрикатор это навигация по всему разделу. */
  .page{grid-template-columns:260px minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:1080px){
  .page{display:block;max-width:none;
    width:min(100% - var(--gut)*2,var(--maxw))}
  .page>article>.wrap{width:100%;max-width:none;margin-inline:auto}
  .rubr{display:none}
  .rubr-m{display:block;width:100%;margin:0 0 22px;padding:11px 13px;
    font-family:inherit;font-size:15px;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:10px}
}

/* ---------- оглавление разбора справа ---------- */
.toc{position:sticky;top:76px;padding:22px 0 10px;
  border-left:1px solid var(--line);padding-left:18px}
.toc-t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3t);margin-bottom:12px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 2px}
.toc a{display:block;padding:5px 0;font-size:13.5px;line-height:1.35;
  color:var(--ink-3t);text-decoration:none}
.toc a:hover{color:var(--blue)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:500}

/* ---------- кто подготовил разбор ---------- */
/* Михаил 09.09.2026: «нужен блок со Светланой, кто подготовил статью,
   когда написана». У клиента в блоге ровно так: фото, имя, роль, время
   чтения, дата и «поделиться». Разница одна: у них два человека
   (эксперт и автор текста), у нас эксперт один. */
.who{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;
  padding:18px 0 20px;margin:0 0 30px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.who-a{display:flex;align-items:center;gap:14px;margin:0;flex:1 1 320px}
.who-a img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:var(--card)}
.who-a figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-n{font-size:16px;font-weight:500;color:var(--ink)}
.who-r{font-size:13.5px;color:var(--ink-2);line-height:1.35}
.who-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-top:3px}
.who-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  font-size:13.5px;color:var(--ink-3t)}
.who-s{display:flex;align-items:center;gap:10px}
.who-s a{color:var(--blue);text-decoration:none;
  border-bottom:1px solid transparent}
.who-s a:hover{border-bottom-color:var(--blue)}
@media (max-width:560px){
  .who{gap:14px}
  .who-m{flex:1 1 100%;justify-content:space-between}
}

/* Врезка в середине статьи: зовёт посчитать, пока человек читает.
   Светлая, чтобы не спорить с тёмным блоком инструмента в конце. */
.midcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 24px;margin:30px 0;padding:20px 22px;border-radius:14px;
  background:linear-gradient(180deg,rgba(41,81,202,.07),rgba(41,81,202,.03));
  border:1px solid rgba(41,81,202,.16)}
.midcta div{display:flex;flex-direction:column;gap:4px;min-width:0}
.midcta b{font-size:17px;font-weight:500;color:var(--ink)}
.midcta span{font-size:14.5px;color:var(--ink-2)}
.midcta a{flex:none;background:var(--blue);color:#fff;border-radius:10px;
  padding:11px 18px;font-size:15px;font-weight:500;text-decoration:none}
.midcta a:hover{background:var(--blue-hi);color:#fff}

.tool{background:var(--navy);border-radius:14px;padding:24px;margin:30px 0;color:#E7E9F2}
.tool h3{color:#fff;font-size:19px;margin:0 0 8px}
.tool p{color:#A9AEC2;font-size:16px;margin:0 0 16px}
.tool a{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border-radius:10px;padding:12px 20px;font-weight:500;font-size:16px}
.tool a:hover{background:var(--blue-hi);color:#fff}
table{width:100%;border-collapse:collapse;font-size:16px;margin:22px 0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3t);font-weight:400;background:var(--paper)}
tr:last-child td{border-bottom:0}
.next{border-top:1px solid var(--line);margin-top:40px;padding-top:26px}
.next h2{margin-top:0;font-size:21px}
.next a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px;font-weight:500;color:var(--ink)}
.next a:hover{border-color:var(--blue);color:var(--blue)}
footer{background:var(--navy);color:#A9AEC2;padding:34px 0;font-size:14.5px;margin-top:40px}
footer a{color:#6FA8F5}

/* широкая таблица прокручивается, а не сжимает колонки в лапшу */
.tw{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch;border-radius:14px}
.tw table{margin:0;min-width:560px}
td{vertical-align:top}
th[scope=row]{font-family:'Lab Grotesque',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--ink);background:var(--card);vertical-align:top}
/* «Коротко»: ответ для быстрого чтения и для голосовых ассистентов */
.short{background:var(--blue-soft);border:1px solid #CBD8F7;border-radius:16px;padding:22px 24px;margin:36px 0 8px}
.short-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.short ul{margin:0;padding-left:20px}
.short li{font-size:16px}
.short li:last-child{margin-bottom:0}
/* доступность: ссылка «к содержимому» и видимый фокус */
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:10px;z-index:99;background:#fff;color:var(--blue);padding:10px 14px;border-radius:9px;border:2px solid var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
footer .disclaimer{font-size:13px;color:#8E9AC4;margin-top:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* на мобильном текстовым ссылкам крошек и подвала нужна площадь под палец */
@media (max-width:680px){
  .crumbs a,footer .wrap a{display:inline-block;padding:6px 0}
  .short,.callout{padding-left:16px;padding-right:16px}
}
/* вторая кнопка в блоке .tool: приглушённая, чтобы не спорить с первой */
.tool a.alt{background:transparent;border:1px solid rgba(255,255,255,.28);color:#E7E9F2;margin-left:10px}
.tool a.alt:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}
@media (max-width:520px){ .tool a.alt{margin:10px 0 0;display:flex;justify-content:center} }

/* ===================================================================
   Хаб разборов: список карточек.

   Эти правила лежали ИНЛАЙНОМ в написанном руками индексе кассового
   разрыва, а не в этом файле. Мой генератор индекса подключает только
   _tpl.css, поэтому на новых сервисах карточки выходили без стилей
   вообще: прозрачный фон, без рамки и отступов, а кикер и минуты
   печатались синим текстом 17px рядом с заголовком. Михаил это
   и увидел: «не выделены как карточки, там 7 минут, разница, основа
   написана».

   Правила взяты с эталона дословно. Файл общий, поэтому теперь их
   получают и эталон, и все генерируемые индексы.
   =================================================================== */
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin-top:26px}
@media (max-width:1240px){.list{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;transition:border-color .25s,transform .25s;display:block;
  text-decoration:none}
.card:hover{border-color:var(--blue);transform:translateY(-2px)}
.card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.card h2,.card h3{font-size:20px;margin:0 0 8px;color:var(--ink)}
/* Секции общей страницы разборов: по инструменту на секцию. */
.grp{margin:34px 0 0}
.grp-h{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px 20px}
.grp-h h2{margin:0;font-size:clamp(20px,2.2vw,25px)}
.grp-h a{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  white-space:nowrap}
.grp-p{margin:6px 0 0;font-size:14.5px;color:var(--ink-3t)}
.grp .list{margin-top:14px}
.card p{margin:0;font-size:16px}
.card .rd{font-size:13px;color:var(--ink-3t);margin-top:10px}