/* ==== PPTF — дизайн-система Ventriloc, акцент уведён в зелень ====
   Светлая тема основная, тёмная — производная и почти ахроматическая.
   Правила стиля: 95 % ахроматики, jade только для акцентов, rust только
   для потерь (просадка, минусы, отрицательные суммы), без теней,
   заголовки весом 400, кнопки без скругления, nav-pill — капсула. */
:root{
  /* поверхности: ахроматику ведём в зелень на 1-2 % насыщенности, чтобы серый
     не спорил с акцентом; s3 — единственная заметно тонированная плоскость */
  --canvas:#ffffff; --s1:#eef0ed; --s2:#f4f6f3; --s3:#e7ece4; --line:#e6e9e5; --line-2:#d9ddd8;
  /* текст */
  --ink:#1f2320; --ink-2:#4a5049; --ink-3:#787f79;
  /* акценты: jade — основной, olive — второй, rust — только для потерь */
  --jade:#16794f; --olive:#72681f; --rust:#b8492b;
  /* смысловые состояния. Зелень в палитре позволила развести их по смыслу:
     до этого «выполнено» и «нарушено» красились одним оранжевым. */
  --pos:var(--jade); --neg:var(--rust); --warn:var(--olive);
  --jade-soft:#16794f1a; --olive-soft:#72681f1f; --rust-soft:#b8492b1a;
  /* типографика */
  --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(--jade); --accent-text:var(--jade); --accent-soft:var(--jade-soft);
  --line-strong:var(--line-2); --radius:var(--r-card); --shadow:none;
}
:root[data-theme="dark"]{
  --canvas:#131614; --s1:#1b1e1c; --s2:#1f231f; --s3:#1e241f; --line:#2c302d; --line-2:#383d39;
  --ink:#f0f3f0; --ink-2:#c0c6c1; --ink-3:#88908a;
  --jade:#3fbf8f; --olive:#c4b95e; --rust:#ef8a5f;
  --jade-soft:#3fbf8f22; --olive-soft:#c4b95e26; --rust-soft:#ef8a5f22;
  /* pos/neg/warn заданы через var() в :root и подхватывают эти значения сами */
}
*{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(--jade);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}
.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)}
/* Подпись бренда в шапке занимает 213 px: на ноутбуке 1024 из-за неё меню
   переносилось во вторую строку. Ниже 1200 px оставляем знак и название. */
@media(max-width:1200px){header.site .brand .sub{display:none}}
.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)}

/* ==== герой и заголовки ==== */
.hero{padding:60px 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(--olive);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)}
/* .cards — сетка карточек. Класс использует движок (write_404) и страницы, но
   правила у него не было ни здесь, ни в ACTF: `a.card` оставался inline-элементом
   и карточки текли строкой, как текст. */
/* 200px, а не 220: в узкой колонке (.wrap.narrow — 760px минус гаттеры)
   три KPI при 220 не влезали и третий уезжал на вторую строку. */
.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cards>*{display:block}
/* .mono — короткая вставка машинного текста в прозе (формулировки из документов,
   имена полей). Тоже числилась в компонентах, но не была описана. */
.mono{font-family:var(--font-mono);font-size:.9375em;color:var(--ink)}
.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:18px 20px}
.kpi .v{font-family:var(--font-display);font-size:1.75rem;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(--pos)} .kpi.neg .v{color:var(--neg)}

/* ==== выноски ==== */
.callout{background:var(--s3);border-radius:var(--r-feature);padding:24px 28px}
.callout.warn{background:var(--s3)}
.callout.risk{background:var(--rust-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}
/* Живая таблица внутри виджета — часть интерфейса, а не материал для чтения:
   при общих отступах 14/20 семь строк давали 400 px и виджет не влезал в экран. */
.card table{min-width:340px;font-size:var(--fs-sm)}
.card table th,.card table td{padding:9px 14px}
/* таблица и график рядом: по отдельности они давали лишние 200 px высоты */
.calc-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;align-items:center;margin-top:12px}
@media(max-width:860px){.calc-pair{grid-template-columns:1fr}}
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(--jade)}
th[data-sort].desc::after{content:"↓";opacity:1;color:var(--jade)}
.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(--jade-soft);color:var(--jade)}
.badge.neg{background:var(--rust-soft);color:var(--rust)}
.badge.warn{background:var(--olive-soft);color:var(--olive)}
.badge.acc{background:var(--jade-soft);color:var(--jade)}

/* ==== управление ==== */
.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--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ломаем позже общего планшетного порога: на ноутбуке 1024–1280 ползунки и
   пара «таблица + график» должны остаться компактными, иначе виджет опять
   вырастает на 250 px */
@media(max-width:860px){.controls--3,.controls--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* .controls--1 — ползунки в узкой колонке .tool__side (260–340px):
   две колонки там сминаются, подписи переносятся по слову. */
.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(--jade);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}
/* Свой раскрывающийся список. Нативный select рисуется системой: серая рамка,
   системная стрелка и всплывающее меню в стиле ОС — на фоне остального
   оформления это выглядело чужим. Сам select остаётся в разметке источником
   значения (скрипты и вся логика читают его .value), а поверх — кнопка и
   список в стилистике сайта. */
.sel{position:relative}
.sel > select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sel__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  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);
  text-align:left;cursor:pointer}
.sel__btn:hover{border-color:var(--ink-3)}
.sel__btn[aria-expanded="true"]{border-color:var(--ink)}
.sel__btn::after{content:"";flex:none;width:7px;height:7px;margin-bottom:2px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .15s ease}
.sel__btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin:2px 0 0}
.sel__list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);
  margin:0;padding:6px;list-style:none;background:var(--canvas);
  border:1px solid var(--line-2);border-radius:var(--r-card);
  box-shadow:0 14px 34px rgba(20,24,21,.14)}
.sel__list[hidden]{display:none}
/* если до низа окна не хватает места, список раскрывается вверх */
.sel__list--up{top:auto;bottom:calc(100% + 6px)}
.sel__opt{padding:10px 12px;border-radius:var(--r-tag);font-size:var(--fs-sm);
  color:var(--ink-2);cursor:pointer}
.sel__opt:hover{background:var(--s1);color:var(--ink)}
.sel__opt[aria-selected="true"]{background:var(--jade-soft);color:var(--jade)}

input[type=checkbox]{accent-color:var(--jade);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(--jade)}
.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}

/* ==== графики ==== */
/* SVG рисуется в системе 760 единиц по ширине. Без ограничения он тянулся на
   всю карточку (1100 px) и вырастал по высоте в те же 1,45 раза — из-за этого
   виджет не влезал в экран 13". Ограничиваем шириной макета и центрируем. */
.chart{width:100%;max-width:760px;height:auto;display:block;margin-inline:auto;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(--jade);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{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)}
/* Меню подвала — пять колонок во всю ширину. Блок бренда вынесен из сетки в
   отдельную строку под меню: в сетке он забирал четверть ширины, колонка выходила
   163 px и на две строки уходило 18 подписей из 37, теперь около 220 px. */
.foot-grid{display:grid;gap:32px 24px;grid-template-columns:repeat(5,1fr);align-items:start}
.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(--jade)}
/* Строка о сайте — во всю ширину под меню: логотип с подписью, описание, почта.
   Подпись бренда здесь своя строка под названием: инлайном, через «·», она
   рвалась на три строки с висящей точкой. */
.foot-about{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 40px;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.foot-about .brand{flex:none;flex-wrap:wrap;row-gap:2px;align-items:baseline}
.foot-about .brand .mark{align-self:center}
.sub--own-line{flex-basis:100%;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.5}
.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(--jade)}
.foot-legal{margin-top:28px;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--row{margin:28px 0 0}
.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)}
.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(--jade)}

/* ==== шкала зон (#metric-lab) ====
   JS-блок приехал из ACTF, но его стилей не было ни там, ни здесь: полосы
   рендерились невидимыми <i>, маркер не позиционировался. Описываю здесь. */
.mlab{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:32px;align-items:start}
.mlab__panel{background:var(--s1);border-radius:var(--r-card);padding:28px;min-width:0}
.m-head{margin-bottom:20px}
.m-ttl{display:block;font-family:var(--font-display);font-weight:500;font-size:1.0625rem;
  color:var(--ink);margin-bottom:6px}
.m-sub{display:block;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55}
.m-scale{position:relative;margin:26px 0 0}
.m-bands{display:flex;gap:2px;height:14px;border-radius:var(--r-pill);overflow:hidden}
.band{display:block;height:100%;flex:none}
.band--ok{background:var(--jade)}
.band--warn{background:var(--olive)}
.band--bad{background:var(--rust)}
.m-marker{position:absolute;top:-10px;left:0;width:2px;height:34px;background:var(--ink);
  transform:translateX(-1px);transition:left .15s ease}
.m-marker::after{content:"";position:absolute;left:-4px;top:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--ink)}
.m-ends{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:var(--fs-12);color:var(--ink-3);margin-top:12px}
.m-verdict{margin:18px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}
.m-fake{margin:18px 0 0;padding:16px 18px;background:var(--s3);border-radius:var(--r-feature);
  font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
@media(max-width:860px){.mlab{grid-template-columns:1fr}}

/* ==== value props ==== */
.vp{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.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(--jade-soft);color:var(--jade);font-size:1rem}
.vp__item.is-gold .vp__icon,.vp__item.is-violet .vp__icon{background:var(--olive-soft);color:var(--olive)}
.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(--jade)} .fact__v.bad{color:var(--rust)} .fact__v.acc{color:var(--jade)}
.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)}
@media(max-width:1180px){.path{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.path{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.path{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(--jade)} .tool__row b.bad{color:var(--rust)} .tool__row b.gold{color:var(--olive)}
.tool__main{min-width:0}
.tool__verdict{margin:16px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
/* у вердикта margin-bottom:0, у следующего абзаца — margin-top:0: они
   слипались в один блок, и сноска читалась как продолжение вердикта */
.tool__verdict + p{margin-top:14px}

/* ==== чек-листы ==== */
.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(--jade-soft)}
.check.done b{color:var(--jade)}
.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(--jade);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}

/* ==== блоки-разборы ==== */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap)}
.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(--rust-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(--rust)}
.readout__item.ok .readout__tag{color:var(--jade)}
.readout__item.warn .readout__tag{color:var(--olive)}
.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 */
/* Шесть карточек при auto-fit ложились как 4+2 с дырой в конце: ставим три в ряд. */
.readout:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.readout:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.readout:has(> :nth-child(6):last-child){grid-template-columns:1fr}}
.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(--jade-soft);color:var(--jade)}
.pm__item.minus .pm__sign{background:var(--rust-soft);color:var(--rust)}
.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(--olive);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(--jade);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:has(> :nth-child(4):last-child),.crit:has(> :nth-child(8):last-child){grid-template-columns:repeat(4,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(--rust-soft)}
.cand--ok{background:var(--jade-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(--rust)}
.cand--ok .cand__tag{color:var(--jade)}
.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(--olive);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(--jade)}

/* ==== короткие ответы ==== */
/* .qa — две колонки по умолчанию. Но блок из трёх пунктов раскладывался
   как 2+1 и оставлял пустую клетку: три ставим в один ряд, как .crit. */
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.qa:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.qa:has(> :nth-child(3):last-child){grid-template-columns: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}
/* Значение справа в шапке карточки: nowrap-блок не сжимался и налезал на
   название, если строка длинная. Ограничиваем долю ширины и разрешаем
   перенос — название остаётся читаемым при любом значении. */
.svc__min{margin-left:auto;text-align:right;font-family:var(--font-mono);
  flex:0 1 auto;max-width:38%;min-width:0;overflow-wrap:break-word}
.svc__min b{display:block;font-size:1.0625rem;color:var(--jade);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(--jade)}
.svc__soon{font-size:var(--fs-13);color:var(--ink-3);font-family:var(--font-mono)}

/* ==== режимы ==== */
.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(--jade);white-space:nowrap;font-weight:500}

/* ==== экраны продуктов ==== */
/* Официальные скриншоты приложений: показываем вдвое меньше файла, иначе на
   retina картинка мылит. Подложка нарисована внутри файла под каждую тему. */
.shot{margin:0}
/* Экраны продукта идут по ширине колонки — как таблицы и карточки на той же
   странице. При max-width 900 картинка была уже текстового блока и читалась как
   съехавшая. Файл 1800 px, поэтому на 1200 плотность всё ещё двойная. */
.shot img{display:block;width:100%;height:auto;border-radius:var(--r-card)}
/* на телефоне картинка портретная: место под неё резервируется размерами
   из <source>, поэтому width остаётся 100 % — иначе блок схлопывается в ноль */
/* Девять плиток: три в ряд дают 3+3+3 без дыры и превью шире — при четырёх
   колонках последняя плитка оставалась одна в ряду. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:8px}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border-radius:var(--r-card)}
.shots figcaption{margin-top:10px;font-size:var(--fs-13);color:var(--ink-3);line-height:1.4}
.shots figcaption b{display:block;color:var(--ink-2);font-weight:500;font-family:var(--font-display)}
/* восьмая плитка — текстовая: у двух классов из каталога нет единого продукта,
   а ряд из семи картинок оставлял в сетке дыру */
.shots__note{background:var(--s1);border-radius:var(--r-card);padding:24px;
  display:flex;align-items:center}
.shots__note b{display:block;font-family:var(--font-display);font-weight:500;
  color:var(--ink);margin-bottom:10px}
.shots__note p{margin:0 0 14px;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}
@media(max-width:1000px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* девять плиток в две колонки оставляли заметку одну в ряду — растягиваем её */
 .shots__note{grid-column:1/-1}}
@media(max-width:560px){.shots{grid-template-columns:1fr}}

/* ==== схемы ==== */
/* иллюстрация — отдельный объект, а не продолжение текста */
.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}
@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(--jade)}
.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(--jade);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(--jade)}
.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(--jade)}
.cform__hint.ok{color:var(--jade)}
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:28px}
.tcard__head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.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(--jade)}
/* в 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(--olive);font-weight:400;white-space:nowrap}
.tcard__ava{font-size:1.05rem}
/* ползунки внутри карточки героя: сетка та же 2×2, но шаги мельче — карточка узкая */
.tcard .controls{gap:14px 20px;margin-bottom:20px}
.tcard .controls .field label{margin-bottom:4px}
.tcard__rows{display:grid;gap:10px;padding-bottom:18px;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(--jade);opacity:.12}
.spark-line{fill:none;stroke:var(--jade);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark-dot{fill:var(--jade)}
.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(--jade)}
.tcard__foot{display:flex;align-items:baseline;gap:12px;padding-top:16px;font-size:var(--fs-13);color:var(--ink-3)}
.tcard__net{margin-left:auto;font-family:var(--font-mono);color:var(--jade);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)}
}
@media(max-width:1000px){
  .crit{grid-template-columns:repeat(2,1fr)}
  .vp{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .toc ol{columns:2}
  .hero-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:980px){
  .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:760px){
  /* подпись бренда в шапке на телефоне рвалась на три строки и растягивала
     шапку до 145 px: на узком экране остаётся знак и название */
  header.site .brand .sub{display:none}
  .controls,.controls--3,.controls--4{grid-template-columns:1fr}
  .g2,.g4,.g3{grid-template-columns:1fr}
  /* KPI внутри виджета — короткие числа: на телефоне ставим по два в ряд,
     иначе четыре карточки в столбик добавляют к виджету лишние 170 px */
  .card .grid.g3,.card .grid.g4{grid-template-columns:1fr 1fr;gap:10px}
  .card .kpi{padding:14px 16px}
  .card .kpi .v{font-size:1.4rem}
  .qa,.checklist.cols-2,.cform__row{grid-template-columns:1fr}
  .crit,.crit:has(> :nth-child(4):last-child),.crit:has(> :nth-child(8):last-child),.vp{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  /* строка о сайте сложилась в столбик — почта прижимается к левому краю */
  .foot-about .foot-mail{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}