/* ==== APTF — дизайн-система Ventriloc ====
   Светлая тема основная, тёмная — производная и ахроматическая.
   Правила стиля: 95 % ахроматики, акцент только на акцентах, без теней,
   заголовки весом 400, кнопки без скругления, nav-pill — капсула.

   Имена переменных --ember/--brass достались от родительского проекта сети
   и оставлены: на них завязаны 600 строк ниже. Значения свои — сайт не должен
   выглядеть перекрашенной копией. Пара «результат по плану / срыв» разведена
   по индиго и охре, а не по привычной зелёно-красной: зелёный и красный
   в тексте о психологии сами по себе подсказывают вердикт. */
:root{
  /* поверхности */
  --canvas:#ffffff; --s1:#efefef; --s2:#f5f5f5; --s3:#eae8f2; --line:#e8e8e8; --line-2:#dcdcdc;
  /* текст */
  --ink:#202020; --ink-2:#4d4d4d; --ink-3:#828282;
  /* акценты */
  --ember:#5b53a6; --brass:#8a6d3b;
  /* смысловые состояния: строго в рамках палитры */
  --pos:#5b53a6; --neg:#8a6d3b; --warn:#8a6d3b;
  --ember-soft:#5b53a61a; --brass-soft:#8a6d3b1a;
  /* типографика */
  --font-display:"Inter Tight","Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-display:clamp(2.6rem,5.6vw,4.125rem);   /* 66px */
  --fs-h1:clamp(2rem,3.6vw,2.5rem);            /* 40px */
  --fs-h2:clamp(1.55rem,2.6vw,2rem);           /* 32px */
  --fs-h3:1.125rem;                            /* 18px */
  --fs-body:1rem; --fs-15:.9375rem; --fs-sm:.875rem; --fs-13:.8125rem; --fs-12:.75rem;
  --track:-.02em;
  /* геометрия */
  --maxw:1200px; --maxw-narrow:760px; --gutter:clamp(1rem,4vw,2.5rem);
  --section-gap:80px; --card-pad:40px; --gap:20px;
  --r-card:8px; --r-tag:20px; --r-btn:8px; --r-pill:200px; --r-feature:8px;   /* было 6px 0 0 0 — скруглялся только левый верхний угол,
                        и 171 блок на сайте выглядел прямоугольным среди скруглённых */
  /* алиасы для движка графиков */
  --bg:var(--canvas); --bg-elev:var(--s1); --bg-sunk:var(--s2);
  --text:var(--ink); --text-dim:var(--ink-2); --text-faint:var(--ink-3);
  --accent:var(--ember); --accent-text:var(--ember); --accent-soft:var(--ember-soft);
  --line-strong:var(--line-2); --radius:var(--r-card); --shadow:none;
}
:root[data-theme="dark"]{
  --canvas:#141414; --s1:#1c1c1c; --s2:#202020; --s3:#1e1c28; --line:#2e2e2e; --line-2:#3a3a3a;
  --ink:#f2f2f2; --ink-2:#c4c4c4; --ink-3:#8a8a8a;
  --ember:#a79ff0; --brass:#c9a04a;
  --pos:#a79ff0; --neg:#c9a04a; --warn:#c9a04a;
  --ember-soft:#a79ff022; --brass-soft:#c9a04a22;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink-2);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--ember);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--maxw-narrow)}

/* ==== шапка ==== */
header.site{position:sticky;top:0;z-index:50;background:var(--canvas);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:12px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;
  font-size:1.0625rem;letter-spacing:var(--track);color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
/* Знак вставлен через <img>, поэтому currentColor внутрь SVG не проходит и
   перекрасить его нельзя — под тёмную тему подменяется сам файл. display
   задаётся отдельными односоставными правилами, а не в `.brand .mark`:
   правило из двух классов перебивало `.mark--dark{display:none}` по
   специфичности, и оба знака показывались разом. */
.mark--light,.mark--dark{display:block}
.mark--dark{display:none}
:root[data-theme="dark"] .mark--light{display:none}
:root[data-theme="dark"] .mark--dark{display:block}
/* Аватар в подписи редакции — тот же приём двух файлов. */
.author__ava.mark--dark{display:none}
:root[data-theme="dark"] .author__ava.mark--light{display:none}
:root[data-theme="dark"] .author__ava.mark--dark{display:block}
.brand .sub{color:var(--ink-3);font-weight:400}
.nav-links{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;background:var(--s1);
  border-radius:var(--r-pill);padding:4px}
.nav-links a{padding:8px 14px;border-radius:var(--r-pill);color:var(--ink-2);font-size:var(--fs-sm)}
.nav-links a:hover{background:var(--canvas);color:var(--ink);text-decoration:none}
.nav-links a[aria-current]{background:var(--canvas);color:var(--ink)}
.nav-tools{display:flex;align-items:center;gap:6px;margin-left:10px}
.icon-btn{width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--canvas);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;padding:0}
.icon-btn:hover{border-color:var(--line-2);color:var(--ink)}
.icon-btn svg{width:18px;height:18px;display:block}
.icon-btn .i-sun{display:none}
:root[data-theme="dark"] .icon-btn .i-sun{display:block}
:root[data-theme="dark"] .icon-btn .i-moon{display:none}
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--canvas);color:var(--ink-2);cursor:pointer;
  font:inherit;font-size:var(--fs-13);font-family:var(--font-mono);text-transform:uppercase}
.lang__btn:hover{border-color:var(--line-2);color:var(--ink)}
.lang__list{position:absolute;right:0;top:44px;min-width:190px;background:var(--canvas);
  border:1px solid var(--line);border-radius:var(--r-card);padding:6px;display:none;z-index:60}
.lang__list.open{display:block}
.lang__list a,.lang__list span{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;
  border-radius:6px;color:var(--ink-2);font-size:var(--fs-sm)}
.lang__list a:hover{background:var(--s2);color:var(--ink);text-decoration:none}
.lang__list [aria-current]{background:var(--s1);color:var(--ink)}
.lang__off{opacity:.55;cursor:default}
.lang__soon{color:var(--ink-3);font-family:var(--font-mono);font-size:var(--fs-12)}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--canvas);color:var(--ink);cursor:pointer;font-size:17px}

/* ==== крошки ==== */
.crumbs{padding:20px 0 0;font-size:var(--fs-13);color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs__sep{margin:0 8px;opacity:.6}
.crumbs [aria-current]{color:var(--ink-2)}

/* ==== герой и заголовки ==== */
/* Верхний отступ героблока считается от нижнего края карточки расчёта:
   на 13-дюймовом экране (760 px под шапкой — 687) при 60 px карточка
   обрезалась по последней строке «Сделок по плану». */
.hero{padding:40px 0 20px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.hero h1{font-family:var(--font-display);font-size:var(--fs-display);font-weight:400;
  line-height:.95;letter-spacing:-.03em;color:var(--ink);margin:0 0 20px}
.hero p.lead{font-size:1.125rem;line-height:1.5;color:var(--ink-2);max-width:56ch;margin:0 0 28px}
.page-head{padding:40px 0 0;margin-bottom:20px}
.page-head h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:400;
  letter-spacing:var(--track);line-height:1.15;color:var(--ink);margin:0 0 16px}
.page-head p{color:var(--ink-2);max-width:70ch;margin:0;font-size:1.0625rem;line-height:1.5}
.eyebrow{display:block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass);margin-bottom:16px}
section{padding:var(--section-gap) 0}
h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:400;letter-spacing:var(--track);
  line-height:1.19;color:var(--ink);margin:0 0 16px}
h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;letter-spacing:var(--track);
  color:var(--ink);margin:0 0 8px;line-height:1.25}
p{margin:0 0 16px}
.muted{color:var(--ink-3)}
.small{font-size:var(--fs-sm)}
main ul,main ol{margin:0 0 16px;padding-left:22px}
main li{margin-bottom:8px}
main li::marker{color:var(--ink-3)}
b,strong{color:var(--ink);font-weight:600}

/* ==== единый вертикальный ритм ==== */
section > .wrap > *{margin-top:0;margin-bottom:0}
section > .wrap > * + *{margin-top:20px}
section > .wrap > p + p{margin-top:16px}
section > .wrap > p + ul,section > .wrap > p + ol{margin-top:12px}
section > .wrap > h2{margin-top:60px;margin-bottom:16px}
section > .wrap > h2:first-child,section > .wrap > .eyebrow + h2{margin-top:0}
section > .wrap > h3{margin-top:40px;margin-bottom:8px}
section > .wrap > h2 + *,section > .wrap > h3 + *{margin-top:0}

/* ==== сетки и карточки ==== */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--s1);border-radius:var(--r-card);padding:var(--card-pad)}
.card h3{margin-top:0}
.card.flat{background:var(--s2)}
.kpi{background:var(--s1);border-radius:var(--r-card);padding:24px}
.kpi .v{font-family:var(--font-display);font-size:2rem;font-weight:400;letter-spacing:var(--track);
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .l{font-size:var(--fs-13);color:var(--ink-3);margin-top:8px;line-height:1.35}
.kpi.pos .v{color:var(--brass)} .kpi.neg .v{color:var(--ember)}

/* ==== выноски ==== */
.callout{background:var(--s3);border-radius:var(--r-feature);padding:24px 28px}
.callout.warn{background:var(--s3)}
.callout.risk{background:var(--ember-soft)}
.callout p:last-child{margin-bottom:0}

/* ==== таблицы ==== */
.table-wrap{overflow-x:auto;background:var(--s1);border-radius:var(--r-card)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-15)}
th,td{padding:14px 20px;text-align:left;vertical-align:top}
thead th{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;white-space:nowrap;background:var(--s1);
  border-bottom:1px solid var(--line-2);padding-top:16px;padding-bottom:12px}
/* чередование строк: без линий, различие даёт фон */
tbody tr{background:var(--canvas)}
tbody tr:nth-child(even){background:var(--s1)}
tbody tr.zw{background:var(--canvas)}
tbody tr.zz{background:var(--s1)}
tbody tr:hover{background:var(--s3)}
tbody td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:var(--fs-sm)}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--ink)}
th[data-sort]::after{content:"↕";opacity:.5;margin-left:6px}
th[data-sort].asc::after{content:"↑";opacity:1;color:var(--ember)}
th[data-sort].desc::after{content:"↓";opacity:1;color:var(--ember)}
.badge{display:inline-block;padding:4px 12px;border-radius:var(--r-tag);font-size:var(--fs-13);
  background:var(--s2);color:var(--ink-2);white-space:nowrap}
.badge.pos{background:var(--brass-soft);color:var(--brass)}
.badge.neg{background:var(--ember-soft);color:var(--ember)}
.badge.warn{background:var(--brass-soft);color:var(--brass)}
.badge.acc{background:var(--ember-soft);color:var(--ember)}

/* ==== управление ==== */
.controls{display:grid;gap:20px 28px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px}
/* блок, где один объект описывается тремя полями: строка = один объект */
.controls--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* один параметр в строку: узкая колонка героблока и врезки в тексте */
.controls--1{grid-template-columns:1fr}
/* каждый контрол — колонка на всю высоту строки: подпись сверху, бегунок прижат книзу,
   поэтому в паре бегунки стоят на одном уровне независимо от длины подписи */
.controls > *,.controls .field{display:flex;flex-direction:column;min-width:0}
.controls > div > .field{flex:1}
.controls .field > input,.controls .field > select{margin-top:auto}
.field label{display:block;font-size:var(--fs-13);color:var(--ink-3);margin-bottom:8px}
.field .val{float:right;color:var(--ink);font-family:var(--font-mono);font-size:var(--fs-13)}
input[type=range]{width:100%;accent-color:var(--ember);height:22px;margin:0;cursor:pointer}
input[type=number],input[type=text],input[type=email],input[type=search],select,textarea{width:100%;
  padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--canvas);
  color:var(--ink);font:inherit;font-size:var(--fs-15)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:none}
input[type=checkbox]{accent-color:var(--ember);margin-right:8px}
.btn{display:inline-block;padding:14px 24px;border-radius:var(--r-btn);background:var(--ink);
  color:var(--canvas);font-size:var(--fs-15);border:none;cursor:pointer;font-family:var(--font-body)}
.btn:hover{background:var(--ink-2);color:var(--canvas);text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--s1);color:var(--ink)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:8px 16px;border-radius:var(--r-tag);border:1px solid var(--line-2);background:var(--canvas);
  color:var(--ink-2);cursor:pointer;font:inherit;font-size:var(--fs-sm)}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}

/* ==== торговые сессии ==== */
.sess{position:relative;background:var(--s1);border-radius:var(--r-card);padding:24px 24px 12px}
.sess__row{position:relative;height:44px;margin-bottom:10px}
.sess__track{position:absolute;left:0;right:0;top:14px;height:16px;border-radius:8px;background:var(--s3)}
.sess__bar{position:absolute;top:14px;height:16px;border-radius:8px;background:var(--line-2)}
.sess__bar.is-open{background:var(--ember)}
.sess__name{position:absolute;top:-4px;left:0;font-size:var(--fs-13);color:var(--ink-2)}
.sess__time{position:absolute;top:-4px;right:0;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-3)}
.sess__now{position:absolute;top:0;bottom:26px;width:2px;background:var(--ink);z-index:2}
.sess__scale{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:var(--fs-12);color:var(--ink-3);margin-top:4px}

/* ==== графики ==== */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--fs-13);color:var(--ink-3);margin-top:12px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
figcaption{font-size:var(--fs-13);color:var(--ink-3);margin-top:12px;line-height:1.45}

/* ==== FAQ ==== */
details.faq{background:var(--s1);border-radius:var(--r-card)}
details.faq + details.faq{margin-top:8px}
section > .wrap > details.faq + details.faq{margin-top:8px}
details.faq summary{padding:20px 24px;cursor:pointer;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:16px;font-size:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--ember);font-size:1.25rem;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .body{padding:0 24px 20px;color:var(--ink-2);font-size:var(--fs-15);max-width:82ch}
details.faq .body p:last-child{margin-bottom:0}

/* ==== следующие материалы ==== */
.next-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.next-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.next-grid:has(> :nth-child(6):last-child),.next-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.next{display:block;padding:28px;background:var(--s1);border-radius:var(--r-card);color:var(--ink)}
.next:hover{background:var(--s3);text-decoration:none}
.next b{display:block;margin-bottom:6px;font-family:var(--font-display);font-weight:500;font-size:1rem}
.next span{font-size:var(--fs-sm);color:var(--ink-3)}

/* ==== подвал ==== */
footer.site{border-top:1px solid var(--line);margin-top:60px;padding:60px 0 40px;background:var(--s2)}
/* Пять равных колонок. Было `1.3fr repeat(4,1fr)`: широкая первая колонка
   осталась от макета родительского проекта, где в ней стоял блок бренда.
   Здесь бренд вынесен под сетку, и разная ширина ничем не оправдана. */
.foot-grid{display:grid;gap:36px;grid-template-columns:repeat(5,1fr);align-items:start}

/* Блок бренда под сеткой ссылок.
   Классы .foot-about, .foot-about__txt и .sub--own-line пришли из разметки
   вместе с шаблоном, а стилей к ним не было вовсе: абзац рендерился обычным
   текстом во всю ширину подвала, вплотную к последней ссылке первой колонки,
   а подпись бренда прилипала к самому названию. */
/* Колонки подвала разной высоты: в разделах разное число страниц,
   и выравнивать их, перекладывая страницы между разделами, значит
   ломать структуру ради пикселей. Вместо этого низ колонок упирается
   в линию — тем же приёмом, что и дисклеймер ниже, — и рваный край
   читается как конец блока.

   Сам блок — строка, а не столбик: знак с подписью слева, описание
   в середине, почта у правого края. Столбиком он занимал четыре яруса
   на всю ширину подвала и разъезжался с рядом служебных ссылок под ним.
   Раскладка та же, что в ARMF: одна строка на всех сайтах сети. */
.foot-about{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 40px;
  margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
/* align-items тут именно center. С baseline базовой линией картинки считается
   её нижний край, поэтому знак вставал на 9 px выше центра надписи и блок
   выглядел съехавшим. Подпись уходит на свою строку через flex-basis:100 %
   и отступ 40 px = ширина знака (30) + gap (10), чтобы встать ровно под
   названием.

   max-width:max-content тут не работает: он ограничивает использованный
   размер элемента, и flex-basis:100 % перестаёт вызывать перенос — подпись
   возвращалась на первую строку. Растяжение блока на всю ширину невидимо:
   текст выровнен по левому краю. */
.foot-about .brand{flex:none;flex-wrap:wrap;align-items:center;row-gap:2px}
.sub--own-line{flex-basis:100%;margin-left:40px;
  font-size:var(--fs-sm);line-height:1.4}
.foot-about__txt{flex:1 1 380px;max-width:64ch;margin:0;
  font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55}
.foot-about .foot-mail{flex:none;margin-left:auto}
.foot-mail{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ember)}
.foot-col h4{font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);margin:0 0 16px;font-weight:400}
.foot-col a{display:block;color:var(--ink-2);font-size:var(--fs-sm);padding:6px 0}
.foot-col a:hover{color:var(--ember)}
.foot-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
/* Служебные ссылки подвала — такие же пилюли, как в шапке: на остальном сайте
   всё блоками со скруглением, голая строка текста выбивалась из системы. */
.foot-legal__nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;
  background:var(--s1);border-radius:var(--r-pill);padding:4px;width:fit-content}
.foot-legal__nav a{padding:8px 14px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--ink-2)}
.foot-legal__nav a:hover{background:var(--canvas);color:var(--ink);text-decoration:none}
.foot-legal__nav a[aria-current]{background:var(--canvas);color:var(--ink)}
/* --row: пилюли служебных ссылок стоят отдельной строкой под блоком бренда,
   а не в общем ряду с ним. Модификатор был в разметке и без правил. */
.foot-legal__nav--row{margin-top:24px}
.disclaimer{margin:0;font-size:var(--fs-13);color:var(--ink-3);line-height:1.5;max-width:96ch}

/* ==== оглавление ==== */
.toc-sec{padding:0 0 20px}
.toc{background:var(--s2);border-radius:var(--r-card);padding:24px 28px}
.toc b{font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);font-weight:400}
.toc ol{margin:12px 0 0;padding-left:20px;columns:3;column-gap:32px}
.toc li{margin-bottom:6px;font-size:var(--fs-sm)}
.toc li::marker{color:var(--ink-3);font-family:var(--font-mono);font-size:var(--fs-12)}
.toc a{color:var(--ink-2)}
.toc a:hover,.toc a[aria-current]{color:var(--ember)}

/* ==== value props ==== */
.vp{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.vp:has(> :nth-child(6):last-child),.vp:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.vp__item{background:var(--s1);border-radius:var(--r-card);padding:28px}
.vp__icon{width:36px;height:36px;border-radius:var(--r-tag);display:grid;place-items:center;margin-bottom:16px;
  background:var(--ember-soft);color:var(--ember);font-size:1rem}
.vp__item.is-gold .vp__icon,.vp__item.is-violet .vp__icon{background:var(--brass-soft);color:var(--brass)}
.vp__item b{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;margin-bottom:8px}
.vp__item span{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}

/* ==== explorer: список + стенд ==== */
.explorer{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:20px;align-items:start}
.exp__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.exp__row{width:100%;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;text-align:left;
  background:var(--s1);border:none;border-radius:var(--r-card);padding:16px 20px;color:var(--ink-2);
  cursor:pointer;font:inherit}
.exp__row:hover{background:var(--s3);color:var(--ink)}
.exp__row[aria-pressed=true]{background:var(--ink);color:var(--canvas)}
.exp__num{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-3)}
.exp__row[aria-pressed=true] .exp__num{color:var(--canvas)}
.exp__ttl{display:block;font-size:var(--fs-15);line-height:1.3}
.exp__sub{display:block;font-size:var(--fs-12);color:var(--ink-3);font-family:var(--font-mono);margin-top:2px}
.exp__row[aria-pressed=true] .exp__sub{color:var(--canvas);opacity:.7}
.stage{background:var(--s1);border-radius:var(--r-card);padding:var(--card-pad)}
.stage h3{margin:0 0 12px;font-size:1.25rem}
.stage__lead{color:var(--ink-2);font-size:var(--fs-15);margin-bottom:20px}
.stage__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;
  padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}
.fact__k{display:block;font-size:var(--fs-12);color:var(--ink-3);margin-bottom:4px}
.fact__v{font-family:var(--font-mono);font-size:1.0625rem;color:var(--ink)}
.fact__v.ok{color:var(--brass)} .fact__v.bad{color:var(--ember)} .fact__v.acc{color:var(--ember)}
.stage__note{font-size:var(--fs-sm);color:var(--ink-3);margin:0}
.stage__body{color:var(--ink-2);font-size:var(--fs-15)}
.stage__body p{margin-bottom:12px}
.stage__body ul{margin:0 0 12px;padding-left:20px}

/* ==== путь ==== */
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.path:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
.path:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.path,.path:has(> :nth-child(6):last-child),.path:has(> :nth-child(4):last-child){grid-template-columns:repeat(3,1fr)}}
/* :has() поднимает специфичность до двух классов, поэтому в узких
   медиазапросах те же селекторы надо повторить — иначе шесть шагов
   остаются в три колонки и на телефоне. */
@media(max-width:860px){.path,.path:has(> :nth-child(6):last-child),
  .path:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.path,.path:has(> :nth-child(6):last-child),
  .path:has(> :nth-child(4):last-child){grid-template-columns:1fr}}
@media(min-width:1181px){.path__step{padding:24px 20px}.path__step b{font-size:.9375rem}}
.path__step{background:var(--s1);border-radius:var(--r-card);padding:28px}
.path__step:hover{background:var(--s3)}
.path__node{display:inline-block;margin-bottom:16px;font-family:var(--font-mono);font-size:var(--fs-12);
  color:var(--ink-3)}
.path__step b{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;margin-bottom:8px;color:var(--ink)}
.path__step p{margin:0;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}
.path__tag{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:var(--fs-12);
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}

/* ==== инструмент ==== */
.tool{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:40px;align-items:start;
  background:var(--s1);border-radius:var(--r-card);padding:var(--card-pad)}
.tool__side{display:grid;gap:20px;align-content:start}
.tool__out{display:grid;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.tool__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:var(--fs-sm);
  color:var(--ink-3)}
.tool__row b{font-family:var(--font-mono);font-size:1.0625rem;color:var(--ink)}
.tool__row b.ok{color:var(--brass)} .tool__row b.bad{color:var(--ember)} .tool__row b.gold{color:var(--brass)}
.tool__main{min-width:0}
.tool__verdict{margin:16px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}

/* Калькулятор в один экран. Требование не косметическое: пока панель
   не помещается целиком, читатель двигает ползунок вслепую и прокручивает
   страницу, чтобы посмотреть, что изменилось. На 13-дюймовом ноутбуке
   под шапкой остаётся около 720 px — в них должна влезать вся секция. */
section:has(> .wrap > .tool){padding-top:48px;padding-bottom:48px}
.tool{padding:32px}

/* Панель без графика и без таблицы справа (.tool--wide ставит tool()):
   поля идут сеткой на всю ширину, строки вывода — в ряд. Так девять полей
   занимают три ряда вместо девяти, а пустая правая колонка исчезает. */
.tool--wide{grid-template-columns:1fr;gap:20px}
.tool--wide .controls{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
.tool--wide .tool__out{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 28px}
.tool--wide .tool__verdict{margin-top:0}

/* Таблица внутри панели расчёта живёт плотнее обычной: она здесь не
   самостоятельный блок, а вторая половина одного экрана с ползунками. */
.tool .table-wrap td{padding:9px 20px}
.tool .table-wrap th{padding:12px 20px 9px}

/* ==== чек-листы ==== */
.checklist{display:grid;gap:8px}
.checklist.cols-2{grid-template-columns:1fr 1fr}
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;background:var(--s2);
  border-radius:var(--r-card);padding:16px 20px;cursor:pointer}
.check:hover{background:var(--s3)}
.check input{margin:2px 0 0}
.check b{display:block;font-size:var(--fs-15);color:var(--ink);margin-bottom:2px;font-weight:500}
.check span{font-size:var(--fs-13);color:var(--ink-3);line-height:1.45}
.check.done{background:var(--ember-soft)}
.check.done b{color:var(--ember)}
.progress{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.progress__bar{flex:1;height:6px;border-radius:var(--r-pill);background:var(--s1);overflow:hidden}
.progress__fill{height:100%;background:var(--ember);width:0;transition:width .3s ease}
.progress__txt{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--ink-3);white-space:nowrap}

/* Тест на двадцать пунктов. В один экран он не помещается и не должен:
   каждый пункт — утверждение с пояснением, и сжимать их до строки значит
   убрать то, ради чего пункт читают. Вместо этого список идёт в три
   колонки, а счёт и ведущий сценарий прилипают к низу экрана — результат
   складывается на глазах, как число рядом с ползунком в калькуляторе. */
.checklist--test{grid-template-columns:repeat(3,1fr);gap:6px}
.checklist--test .check{padding:10px 14px}
.tt-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:12px;padding:12px 16px;border-radius:var(--r-card);
  background:var(--s1);border:1px solid var(--line)}
.tt-bar__live{color:var(--ink-2)}
.tt-bar__live b{color:var(--ember);font-weight:500}
@media(max-width:1180px){.checklist--test{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.checklist--test{grid-template-columns:1fr}}

/* ==== блоки-разборы ==== */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap)}
.readout:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.readout:has(> :nth-child(6):last-child),.readout:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.readout:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.readout__item{background:var(--s1);border-radius:var(--r-feature);padding:28px}
.readout__item.ok,.readout__item.warn{background:var(--s3)}
.readout__item.bad{background:var(--ember-soft)}
.readout__tag{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.readout__item.bad .readout__tag{color:var(--ember)}
.readout__item.ok .readout__tag,.readout__item.warn .readout__tag{color:var(--brass)}
.readout__item b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.0625rem;
  color:var(--ink);margin-bottom:8px}
.readout__item span{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
/* Списки внутри карточек: без этого перечисления теряли оформление карточки */
.readout__item ul{margin:10px 0 0;padding-left:18px}
.readout__item li{margin-bottom:8px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.readout__item li:last-child{margin-bottom:0}
.readout__item li::marker{color:var(--ink-3)}
/* Заголовок карточки — блок, но выделение внутри пункта списка должно
   остаться в строке, иначе фраза рвётся пополам. */
.readout__item li b{display:inline;font-family:inherit;font-size:inherit;
  font-weight:600;color:var(--ink);margin:0}
/* Три колонки вместо автоподбора: пять-шесть карточек иначе рвутся на 4+1 */
.readout--3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.readout--2{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}

/* ==== плюсы и минусы ==== */
.pm{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
/* .pm--2 — блок «плюсы против минусов»: пары должны стоять парами, но жёсткие две
   колонки инлайном давали внутренний скролл на мобильном, а auto-fit — висящую
   карточку при четырёх плашках. Поэтому явные две колонки только от 720 px. */
.pm--2{grid-template-columns:1fr}
@media (min-width:720px){.pm--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pm__item{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:16px 20px;
  background:var(--s1);border-radius:var(--r-card)}
.pm__sign{width:22px;height:22px;border-radius:var(--r-tag);display:grid;place-items:center;font-size:.8rem;
  background:var(--brass-soft);color:var(--brass)}
.pm__item.minus .pm__sign{background:var(--ember-soft);color:var(--ember)}
.pm__item b{display:block;font-size:var(--fs-15);color:var(--ink);margin-bottom:2px;font-weight:500}
.pm__item span{font-size:var(--fs-13);color:var(--ink-3);line-height:1.45}

/* ==== таймлайн ==== */
.tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap)}
.tl__item{background:var(--s1);border-radius:var(--r-card);padding:28px}
.tl__era{display:block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.1em;
  color:var(--brass);margin-bottom:12px}
.tl__item b{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;color:var(--ink);margin-bottom:8px}
.tl__item p{margin:0;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}

/* ==== определение ==== */
.def{background:var(--s3);border-radius:var(--r-feature);padding:var(--card-pad)}
.def__lead{font-size:1.25rem;line-height:1.45;color:var(--ink);margin:0 0 24px;max-width:62ch;
  font-family:var(--font-display);font-weight:400;letter-spacing:var(--track)}
.def__lead b{color:var(--ember);font-weight:400}
.def__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;
  padding-top:24px;border-top:1px solid var(--line-2)}

/* ==== нумерованные критерии ==== */
.crit{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
/* Правило раскладки блоков, общее для .crit, .readout и .vp:
   четыре плашки — строка из четырёх, шесть — две ровные строки по три,
   две — пара. Пятой плашки на сайте нет намеренно: auto-fit давал «4 + 1»
   и висящую карточку на широком экране, поэтому набор всегда дополняется
   до чётной раскладки. */
.crit:has(> :nth-child(4):last-child),.crit:has(> :nth-child(8):last-child){grid-template-columns:repeat(4,1fr)}
.crit:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.crit__item{background:var(--s1);border-radius:var(--r-card);padding:28px}
.cand{background:var(--s1);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;min-width:0}
.cand--bad{background:var(--ember-soft)}
.cand--ok{background:var(--brass-soft)}
.cand__tag{display:block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.1em;
  color:var(--ink-3);margin-bottom:10px}
.cand--bad .cand__tag{color:var(--ember)}
.cand--ok .cand__tag{color:var(--brass)}
.cand > b{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;
  color:var(--ink);margin-bottom:14px;line-height:1.3}
.cand__tbl{margin:0 0 14px}
.cand__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-13);color:var(--ink-2)}
.cand__row:last-child{border-bottom:none}
.cand__row b{font-family:var(--font-mono);font-weight:400;color:var(--ink);white-space:nowrap}
.cand p{margin-bottom:16px}
.cand .btn{margin-top:auto;align-self:flex-start;padding:10px 16px;font-size:var(--fs-13)}
.crit__item:hover{background:var(--s3)}
.crit__n{display:block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.1em;
  color:var(--brass);margin-bottom:12px}
.crit__item b{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;color:var(--ink);margin-bottom:8px}
.crit__item p{margin:0;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}
.crit__tag{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:var(--fs-12);
  color:var(--ink-3);padding:4px 10px;background:var(--s2);border-radius:var(--r-tag)}
.crit__tag a{color:var(--ember)}

/* ==== короткие ответы ==== */
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
/* Девять справочных пар в две колонки дают 4 ряда и висящую девятую.
   Три колонки раскладывают их ровно 3×3; тексты в таких блоках короткие,
   поэтому узкая колонка читается нормально. */
.qa:has(> :nth-child(9):last-child),.qa:has(> :nth-child(3):last-child)
  {grid-template-columns:repeat(3,1fr)}
@media(max-width:1180px){.qa:has(> :nth-child(9):last-child),
  .qa:has(> :nth-child(3):last-child){grid-template-columns:repeat(2,1fr)}}
.qa__item{background:var(--s1);border-radius:var(--r-card);padding:24px}
.qa__q{font-size:var(--fs-15);color:var(--ink);margin:0 0 8px;font-weight:500}
.qa__a{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}

/* ==== карточки сервисов ==== */
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gap)}
.svc__card{background:var(--s1);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:16px}
.svc__card:hover{background:var(--s3)}
.svc__top{display:flex;align-items:flex-start;gap:12px}
.svc__top > span:nth-child(2){min-width:0;flex:1}
.svc__logo{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-sm);background:var(--canvas);color:var(--ink)}
.svc__name{display:block;font-family:var(--font-display);font-size:1.0625rem;font-weight:500;color:var(--ink)}
.svc__class{display:block;font-size:var(--fs-12);color:var(--ink-3);font-family:var(--font-mono);margin-top:2px}
.svc__min{margin-left:auto;text-align:right;font-family:var(--font-mono);white-space:nowrap}
.svc__min b{display:block;font-size:1.0625rem;color:var(--ember);font-weight:400}
.svc__min span{font-size:var(--fs-12);color:var(--ink-3);letter-spacing:.05em}
.svc__desc{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5;margin:0;flex:1}
.svc__rows{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--line-2)}
.svc__row{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-13);color:var(--ink-3)}
.svc__row b{color:var(--ink-2);font-weight:400;text-align:right}
.svc__more{display:inline-block;font-size:var(--fs-sm);color:var(--ember)}
.svc__soon{font-size:var(--fs-13);color:var(--ink-3);font-family:var(--font-mono)}
/* Короткая карточка: только имя, класс и ссылка. Стоит в подвале страниц
   раздела, где полный текст каталога был бы дублем. */
.svc--short{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.svc__card--short{padding:20px;gap:12px}

/* ==== режимы ==== */
.mode__kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.mode__kpi div{background:var(--s2);border-radius:var(--r-card);padding:16px}
.mode__kpi span{display:block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.mode__kpi b{font-family:var(--font-mono);font-size:var(--fs-15);color:var(--ink);font-weight:400}
.mode__who{display:flex;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  font-size:var(--fs-15);color:var(--ink-2)}
.mode__who b{color:var(--ember);white-space:nowrap;font-weight:500}

/* ==== схемы ==== */
/* иллюстрация — отдельный объект, а не продолжение текста */
.scheme{margin:1.8rem 0;padding:22px 24px 24px;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r-card)}
.scheme__cap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:500;font-size:1rem;color:var(--ink)}
.scheme__tag{flex:none;font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}
.scheme img{display:block;width:100%;height:auto;border-radius:calc(var(--r-card) - 6px);
  background:var(--bg)}
.scheme__src{margin:14px 0 0;font-size:var(--fs-12);color:var(--ink-3);line-height:1.55;opacity:.85}
/* Снимок интерфейса, а не наша схема: у него собственный светлый фон,
   поэтому в тёмной теме он не перекрашивается, а получает рамку и лёгкое
   затемнение — иначе белый прямоугольник бьёт по глазам на тёмной странице. */
.scheme--shot img{border:1px solid var(--line-2);background:#fff}
:root[data-theme="dark"] .scheme--shot img,
:root:not([data-theme="light"]) .scheme--shot img{filter:brightness(.92)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .scheme--shot img{filter:none}
}
@media(max-width:640px){.scheme{padding:18px}}

/* ==== автор ==== */
.author{padding:0 0 40px}
.author__box{display:flex;gap:20px;align-items:flex-start;padding:28px;background:var(--s2);border-radius:var(--r-card)}
.author__ava{flex:none;width:56px;height:56px;border-radius:6px}
/* Логотип во врезке — тот же файл, что в шапке. Размер задаём в CSS:
   у марки viewBox 32x32, и без явной ширины flex-элемент сжимается в ноль. */
.author__name{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink);margin-bottom:6px;font-weight:500}
.author__role{display:block;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5;max-width:70ch}
.author__link{display:inline-block;margin-top:12px;font-size:var(--fs-sm);color:var(--ember)}
.author__date{display:block;margin-top:10px;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-3)}

/* ==== контакты ==== */
.mailbox{display:grid;gap:6px;padding:28px;background:var(--s3);border-radius:var(--r-feature);
  margin:20px auto 0;max-width:560px;text-align:center;justify-items:center}
.mailbox__k{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mailbox__v{font-family:var(--font-mono);font-size:1.125rem;color:var(--ember);word-break:break-all}
.mailbox__note{font-size:var(--fs-sm);color:var(--ink-3)}
.cform{display:grid;gap:20px;max-width:720px;margin:24px auto 0;padding:var(--card-pad);
  background:var(--s1);border-radius:var(--r-card)}
.cform__head b{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--ink);margin-bottom:8px;font-weight:400}
.cform__head span{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5;display:block;max-width:60ch}
.cform__topics{display:flex;flex-wrap:wrap;gap:8px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cform .field span{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-13);
  color:var(--ink-3);margin-bottom:8px}
.cform__count{font-family:var(--font-mono);font-style:normal;font-size:var(--fs-12);color:var(--ink-3)}
.cform__count.ok{color:var(--brass)}
.cform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.cform__alt{font-size:var(--fs-sm);color:var(--ink-3)}
.cform__hint{margin:0;font-size:var(--fs-13);color:var(--ink-3);line-height:1.45}
.cform__hint.err{color:var(--ember)}
.cform__hint.ok{color:var(--brass)}
section:has(> .wrap > .cform) > .wrap > h2{text-align:center;max-width:none}

/* ==== карточка трейдера в герое ==== */
.hero-visual{position:relative}
.tcard{background:var(--s1);border-radius:var(--r-card);padding:24px}
.tcard__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tcard__ava{width:40px;height:40px;border-radius:6px;background:var(--ink);color:var(--canvas);
  display:grid;place-items:center;font-size:var(--fs-13);flex:none;font-family:var(--font-display)}
.tcard__name{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink);font-weight:500}
.tcard__meta{font-size:var(--fs-12);color:var(--ink-3)}
.tcard__head .badge{margin-left:auto;font-family:var(--font-mono)}
.tcard__spark{width:100%;height:auto;display:block;margin-bottom:20px}
/* Карточка-расчёт в герое: полоса риска и строки «ключ — значение».
   Полоса показывает, какая доля депозита стоит на одной сделке. */
.tcard__risk{width:100%;height:auto;display:block;margin-bottom:8px}
.tcard__risk .risk-off{fill:var(--line-2)}
.tcard__risk .risk-on{fill:var(--ember)}
/* в RTL чтение идёт справа: зеркалим гребёнку, чтобы закрашенные деления были в начале */
[dir="rtl"] .tcard__risk{transform:scaleX(-1)}
.tcard__cap{font-size:var(--fs-12);color:var(--ink-3);margin:0 0 22px;display:flex;
  align-items:baseline;justify-content:space-between;gap:12px}
.tcard__cap b{font-family:var(--font-mono);color:var(--brass);font-weight:400;white-space:nowrap}
.tcard__ava{font-size:1.05rem}
/* ползунки внутри карточки героя: сетка та же 2×2, но шаги мельче — карточка узкая */
.tcard .controls{gap:10px 20px;margin-bottom:16px}
.tcard .controls .field label{margin-bottom:2px}
.tcard__rows{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.tcard__rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.tcard__rows .tcard__k{display:inline}
.hero-visual>.small{margin-top:12px}
.spark-area{fill:var(--ember);opacity:.12}
.spark-line{fill:none;stroke:var(--ember);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark-dot{fill:var(--ember)}
.tcard__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.tcard__k{display:block;font-size:var(--fs-12);color:var(--ink-3)}
.tcard__v{font-family:var(--font-mono);font-size:var(--fs-15);color:var(--ink)}
.tcard__v.ok{color:var(--brass)}
.tcard__foot{display:flex;align-items:baseline;gap:12px;padding-top:12px;font-size:var(--fs-13);color:var(--ink-3)}
.tcard__net{margin-left:auto;font-family:var(--font-mono);color:var(--ember);font-size:1rem;white-space:nowrap}

@media(max-width:1180px){
  .crit:has(> :nth-child(4):last-child),.crit:has(> :nth-child(8):last-child){grid-template-columns:repeat(2,1fr)}
}
/* Точка слома подвала считается по самой длинной подписи: «Психология рынка
   форекс» занимает 182 px, значит пять колонок живут до 5×182 + 4×36 + 80 =
   1134 px. Ниже — три колонки (5 разделов дают ряды 3 + 2; при двух получались
   бы 2 + 2 + 1 с одинокой колонкой в последнем ряду). Прежний слом стоял
   на 1000 px, и в диапазоне 1000–1134 подписи переносились на вторую строку. */
@media(max-width:1140px){
  .foot-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
  .crit{grid-template-columns:repeat(2,1fr)}
  .vp{grid-template-columns:1fr 1fr}
  .toc ol{columns:2}
  .hero-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:980px){
  /* Подпись бренда длиннее, чем у родительского проекта, и на 375 px
     выдавливала бургер за правый край: страница получала горизонтальный
     скролл на 32 px. В шапке остаётся только имя, подпись живёт в подвале. */
  header.site .brand .sub{display:none}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--canvas);
    border-bottom:1px solid var(--line);padding:12px 16px;flex-direction:column;border-radius:0}
  .nav-links.open{display:flex}
  .burger{display:block;order:3}
  .nav-tools{order:2;margin-left:auto}
  .explorer,.tool{grid-template-columns:1fr}
}
@media(max-width:1180px){
  .crit:has(> :nth-child(4):last-child),.crit:has(> :nth-child(8):last-child),
  .readout:has(> :nth-child(4):last-child),.cards:has(> :nth-child(4):last-child),
  .next-grid:has(> :nth-child(4):last-child),.vp{grid-template-columns:repeat(2,1fr)}
  .readout:has(> :nth-child(6):last-child),.vp:has(> :nth-child(6):last-child),
  .cards:has(> :nth-child(6):last-child),.next-grid:has(> :nth-child(6):last-child)
    {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .controls,.controls--3,.tool--wide .controls{grid-template-columns:1fr}
  .g2,.g4,.g3{grid-template-columns:1fr}
  .qa,.qa:has(> :nth-child(9):last-child),.qa:has(> :nth-child(3):last-child),
  .checklist.cols-2,.cform__row{grid-template-columns:1fr}
  .crit,.crit:has(> :nth-child(4):last-child),.crit:has(> :nth-child(8):last-child),
  .crit:has(> :nth-child(2):last-child),.vp,.vp:has(> :nth-child(6):last-child),
  .vp:has(> :nth-child(3):last-child),.readout,.readout:has(> :nth-child(2):last-child),
  .readout:has(> :nth-child(3):last-child),.readout:has(> :nth-child(4):last-child),
  .readout:has(> :nth-child(6):last-child),.cards,.cards:has(> :nth-child(4):last-child),
  .cards:has(> :nth-child(6):last-child),.cards:has(> :nth-child(3):last-child),
  .next-grid,.next-grid:has(> :nth-child(4):last-child),
  .next-grid:has(> :nth-child(6):last-child),.next-grid:has(> :nth-child(3):last-child)
    {grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-about{margin-top:32px;padding-top:24px}
  /* строка о сайте сложилась в столбик — почта прижимается к левому краю */
  .foot-about .foot-mail{margin-left:0}
  .sub--own-line{margin-left:0}
  .toc ol{columns:1}
  :root{--card-pad:24px;--section-gap:48px}
}

/* ==== карточка инструмента на тематической странице ==== */
.toolcard{margin:1.6rem 0;padding:26px 28px;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r-card);border-left:3px solid var(--accent)}
.toolcard__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.toolcard__tag{font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase;
  letter-spacing:.08em;color:var(--accent)}
.toolcard__head b{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;color:var(--ink)}
.toolcard__what{margin:0 0 18px;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55}
.toolcard__ex{padding:16px 18px;background:var(--bg);border-radius:calc(var(--r-card) - 6px);margin-bottom:18px}
.toolcard__exlabel{font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3)}
.toolcard__in{margin:6px 0 14px;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-3);line-height:1.7}
.toolcard__out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.toolcard__out div{display:flex;flex-direction:column;gap:4px}
.toolcard__out span{font-size:var(--fs-12);color:var(--ink-3)}
.toolcard__out b{font-family:var(--font-mono);font-size:1.125rem;color:var(--ink)}
@media(max-width:640px){.toolcard{padding:20px}.toolcard__out{grid-template-columns:1fr;gap:10px}}

/* Блок иллюстраций под FAQ: несколько схем идут вертикально с одним отступом */
.figs .scheme+.scheme{margin-top:28px}

/* ==== APTF: блоки, которых не было в родительском проекте ==== */
/* Сетка карточек: её использует страница 404 и подборки разделов. */
.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.cards:has(> :nth-child(6):last-child),.cards:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.cards .card{padding:24px;color:var(--ink)}
.cards .card:hover{background:var(--s3);text-decoration:none}
.cards .card b{font-family:var(--font-display);font-weight:500}
/* Адаптив для .cards стоит здесь, а не в общих медиазапросах выше.
   Блок .cards дописан в конец файла, и его правила той же специфичности
   перебивали ранние @media по порядку следования: четыре плитки KPI
   оставались в четыре колонки и на 375 px, давая горизонтальный скролл
   страницы на 215 px. */
@media(max-width:1180px){
  .cards,.cards:has(> :nth-child(4):last-child),
  .cards:has(> :nth-child(6):last-child),.cards:has(> :nth-child(3):last-child)
    {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .cards,.cards:has(> :nth-child(4):last-child),
  .cards:has(> :nth-child(6):last-child),.cards:has(> :nth-child(3):last-child)
    {grid-template-columns:1fr}
}
/* Ярлык инструмента в карточке «Читать дальше»: TOOLS отдаёт его пятым полем. */
.next__tag{display:inline-block;margin-top:12px;font-family:var(--font-mono);
  font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.08em;color:var(--ember)}
/* Полосы результата теста: пять групп, у каждой своя доля отмеченного. */
.mrow{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow__k{font-size:var(--fs-sm);color:var(--ink)}
.mrow__bar{display:block;height:8px;background:var(--s2);border-radius:var(--r-pill);overflow:hidden}
.mrow__bar i{display:block;height:100%;background:var(--ember);border-radius:var(--r-pill)}
.mrow__v{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--ink-3);white-space:nowrap}
@media(max-width:560px){
  .mrow{grid-template-columns:1fr auto;gap:6px 12px}
  .mrow__bar{grid-column:1/-1}
}
/* Строка формулы: показываем вывод, а не только результат. */
.formula{font-family:var(--font-mono);font-size:var(--fs-sm);background:var(--s2);
  border-left:2px solid var(--ember);padding:14px 18px;margin:20px 0;overflow-x:auto;color:var(--ink)}
.formula b{font-weight:400;color:var(--ember)}

/* Подпись таблицы: объясняет, что сравнивается. Стоит над сеткой и читается
   как лид, поэтому caption-side:top и выравнивание по левому краю. */
/* Подпись таблицы объясняет, что сравнивается. Она стоит над сеткой
   и снаружи прокручиваемой области: внутри <caption> подпись наследовала
   ширину таблицы и на телефоне уезжала за экран вместе с ней. */
.tablefig{margin:0}
.tablefig figcaption{text-align:left;font-size:var(--fs-sm);color:var(--ink-3);
  line-height:1.5;margin:0 0 12px;max-width:82ch}