/* ============ Публичные страницы KURS ============
   Только то, чего нет в общем слое: главная (герой, компоненты индекса, спарклайн),
   /tools/, /dca и длинные документы /about и /methodology.
   Каркас, шапка, подвал, карточка, кнопка, чип, таблица, лонгрид — assets/css/components.css.
   Токены — assets/css/app.css. Магических px здесь быть не должно. */

/* ---------- Заголовок страницы ----------
   Верхний отступ задаёт main (--space-page-top) — одинаково в обоих движках,
   поэтому своего margin-top у заголовка нет. */
.page-head { max-width: var(--measure-prose); margin: 0 0 var(--space-6); }
.page-head h1 { margin: 0 0 var(--space-3); }
/* Строка-снимок рынка над дашбордом: цифры, которые видны и без JS */
.snapshot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--fs-base); }
.snapshot b { color: var(--ink); }
.snapshot .dot { color: var(--muted); }

.section-more { margin: var(--space-4) 0 0; font-size: var(--fs-base); font-weight: 600; }

/* ---------- Главная: герой ----------
   Две колонки, три ячейки: слева лид и блок «New here?», справа гейдж во всю высоту.
   Гейдж центрирован по обеим строкам, поэтому блок под лидом занимает пустоту и вниз
   его не сдвигает; на узком экране (860px) порядок меняется на copy → гейдж → new. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "copy read" "new read";
  /* align-items: start — общая верхняя линия колонок (контракт A1 №1): карточка гейджа
     начиналась на 46px выше надзаголовка, и две половины героя визуально разъезжались.
     Теперь верх карточки = верх надзаголовка. */
  gap: var(--space-6) var(--space-8); align-items: start; margin: 0 0 var(--space-2);
}
.hero-copy { grid-area: copy; }
.hero-read { grid-area: read; }
.hero-new  { grid-area: new; align-self: start; }
/* единственное исключение из шкалы h1 — герой главной */
.hero h1 { font-size: var(--fs-h1-hero); line-height: 1.05; margin: 0 0 var(--space-4); letter-spacing: -.03em; }
.hero .lede { margin-bottom: 0; }

/* Врезка «New here?»: тише карточки-гейджа. Фон --bg, а не --card-2: в светлой теме
   --card-2 (#f9f9fb) СВЕТЛЕЕ фона страницы (#f0f0f3), и «тихая» врезка выходила ярче
   всего вокруг. Тон страницы + мягкая рамка без тени — врезка действительно отступает. */
/* Поле карточки — один токен --pad-card (B2). Здесь стояло --space-4, у .hero-read
   --space-6, у обычной .card 20 — три внутренних поля в одном экране главной. */
.hero-new { background: var(--bg); border-color: var(--line-soft); box-shadow: none; }
.hero-new p { margin: 0; color: var(--ink2); font-size: var(--fs-base); line-height: 1.55; }
.hero-new .eyebrow { margin-bottom: var(--space-1); }
.hero-new p.hero-new-links { margin-top: var(--space-2); font-weight: 600; }
.hero-new-links .dot { color: var(--muted); margin: 0 var(--space-1); }
.hero-read { text-align: center; }
/* 264px — канонический размер viewBox гейджа: при нём значение внутри дуги
   рисуется ровно в --fs-3xl, а не «примерно похоже» */
.hero-gauge { max-width: 264px; margin: 0 auto; }
.hero-hint { margin: var(--space-4) auto 0; max-width: 42ch; font-size: var(--fs-base); line-height: 1.5; color: var(--ink2); }

/* Движение индекса и цены под гейджем (аудит E3-1, E3-3).
   Три ступени по убыванию веса: дельты --fs-base (их читают), «дней в зоне» и цены
   --fs-sm, дата среза остаётся --fs-xs. Внутри карточки это второй и третий кегли
   помимо заголовка — предел, который ставит контракт B7 (не более двух). Поэтому
   .hero-px и .hero-zone-days делят один кегль, а не берут каждый свой. */
.hero-delta {
  margin: var(--space-4) 0 0; font-size: var(--fs-base); color: var(--ink2);
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); justify-content: center;
}
.hero-delta b { font-weight: 700; color: var(--ink); }
.hero-delta b.up { color: var(--up); }
.hero-delta b.down { color: var(--down); }
.hero-zone-days { margin: var(--space-2) auto 0; max-width: 46ch; font-size: var(--fs-sm); color: var(--muted); }
.hero-zone-days b { color: var(--ink2); font-weight: 700; }
.hero-px {
  margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm); color: var(--ink2);
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); justify-content: center;
}
.hero-px b { font-weight: 700; }
.hero-px .sub { color: var(--muted); }
.hero-cta { margin: var(--space-5) 0 0; display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
/* Нишевый вход (JSON API) — текстовой строкой под кнопками, а не второй кнопкой:
   в CTA-площади героя он занимал половину при доле аудитории в проценты (A6). */
.hero-api { margin: var(--space-3) 0 0; }

/* ---------- Гейдж ---------- */
.gauge-svg { display: block; width: 100%; height: auto; }
.gauge-tick { fill: var(--muted); font-size: var(--fs-2xs); font-family: var(--font); }
/* Значение внутри дуги. Кегль задан в пользовательских единицах viewBox: при канонической
   ширине 264px это ровно --fs-3xl. */
.gauge-val {
  fill: var(--ink); font-family: var(--font); font-size: 44px; font-weight: 700;
  letter-spacing: -.02em;
  /* обводки у числа нет и не нужно: указатель стоит на дуге (r=95…125) и в область
     цифр (r ≤ 71) не заходит ни при каком значении */
}
/* Название зоны — интерпретация числа, поэтому крупно и цветом своей зоны.
   Пилюля 12.5px была самым мелким элементом карточки при числе в 44px: скачок без ступени. */
.reading-zone { margin: var(--space-2) 0 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; }
.reading-zone.z1 { color: var(--therm-1-ink); }
.reading-zone.z2 { color: var(--therm-2-ink); }
.reading-zone.z3 { color: var(--therm-3-ink); }
.reading-zone.z4 { color: var(--therm-4-ink); }
.reading-zone.z5 { color: var(--therm-5-ink); }
.reading-date { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Главная: компоненты индекса ---------- */
.comp-grid { align-items: start; }
.comps { list-style: none; margin: 0; padding: 0; }
.comps li { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.comps li:first-child { border-top: 0; padding-top: 0; }
.comp-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.comp-name { font-weight: 600; font-size: var(--fs-base); }
.comp-score { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.comp-bar {
  height: 8px; margin: var(--space-2) 0; border-radius: var(--radius-pill);
  background: var(--neutral-bg); overflow: hidden;
}
.comp-bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.comp-meta { font-size: var(--fs-xs); color: var(--ink2); }
.comp-meta .dot { color: var(--muted); }
.comps-card .fine { margin: var(--space-4) 0 0; }

.spark-wrap { margin: var(--space-3) 0 0; }
.spark-svg { display: block; width: 100%; height: auto; }
/* Полосы зон: в светлой теме те же цвета, что у гейджа, приглушённые до фона.
   В тёмной полупрозрачные насыщенные цвета сливались в грязный градиент — там берём
   готовые фоновые ступени токенов (--therm-N-bg) в полную силу. */
.spark-svg .band, .chart-svg .band { opacity: .12; }
:root[data-theme="dark"] .spark-svg .band,
:root[data-theme="dark"] .chart-svg .band { opacity: 1; }
:root[data-theme="dark"] .spark-svg .band.z1, :root[data-theme="dark"] .chart-svg .band.z1 { fill: var(--therm-1-bg); }
:root[data-theme="dark"] .spark-svg .band.z2, :root[data-theme="dark"] .chart-svg .band.z2 { fill: var(--therm-2-bg); }
:root[data-theme="dark"] .spark-svg .band.z3, :root[data-theme="dark"] .chart-svg .band.z3 { fill: var(--therm-3-bg); }
:root[data-theme="dark"] .spark-svg .band.z4, :root[data-theme="dark"] .chart-svg .band.z4 { fill: var(--therm-4-bg); }
:root[data-theme="dark"] .spark-svg .band.z5, :root[data-theme="dark"] .chart-svg .band.z5 { fill: var(--therm-5-bg); }
/* Куки нет + тёмная ОС (data-theme="auto", см. app.css): полосы обязаны попасть в тот же
   первый кадр, что и токены, иначе серверный SVG секунду стоит светлыми полосами на тёмном.
   Медиа-условие в селектор не выносится — правило дублируется, держать в синхроне с блоком выше. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .spark-svg .band,
  :root[data-theme="auto"] .chart-svg .band { opacity: 1; }
  :root[data-theme="auto"] .spark-svg .band.z1, :root[data-theme="auto"] .chart-svg .band.z1 { fill: var(--therm-1-bg); }
  :root[data-theme="auto"] .spark-svg .band.z2, :root[data-theme="auto"] .chart-svg .band.z2 { fill: var(--therm-2-bg); }
  :root[data-theme="auto"] .spark-svg .band.z3, :root[data-theme="auto"] .chart-svg .band.z3 { fill: var(--therm-3-bg); }
  :root[data-theme="auto"] .spark-svg .band.z4, :root[data-theme="auto"] .chart-svg .band.z4 { fill: var(--therm-4-bg); }
  :root[data-theme="auto"] .spark-svg .band.z5, :root[data-theme="auto"] .chart-svg .band.z5 { fill: var(--therm-5-bg); }
}
.spark-axis {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-1);
}
.kv-inline { display: flex; gap: var(--space-6); margin: var(--space-4) 0 0; }
.kv-inline div { display: flex; flex-direction: column; gap: 2px; }
.kv-inline dt { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kv-inline dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.what-grid .card p:last-child { margin-bottom: 0; }
/* Ключевая мысль карточки — ступень выше основного текста: две карточки сплошной прозы
   одного кегля читались как FAQ-свалка, а не как ответ на вопрос заголовка. */
.what-key { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--ink); margin: 0 0 var(--space-3); }

/* Состав индекса: пропорция показана длиной, а не прописью. Полоса нейтральная —
   доля веса не температура, и красить её --therm-* нельзя (контракт B3). Дорожка --line,
   заливка --ink2: три оттенка одного серого дают ряд, который читается как одна величина. */
.mix { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mix-top { display: flex; align-items: center; gap: var(--space-2); }
.mix-top .ic { color: var(--muted); flex: none; }
.mix-name { font-weight: 600; color: var(--ink); }
/* Число доли прижато вправо: колонка процентов сравнивается сама с собой сверху вниз */
.mix-w { margin-left: auto; font-weight: 700; color: var(--ink); }
.mix-bar { height: 6px; margin-top: 6px; border-radius: var(--radius-xs); background: var(--line); overflow: hidden; }
.mix-bar i { display: block; height: 100%; background: var(--ink2); border-radius: inherit; }
.mix-note { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink2); }

/* Чего индекс не сделает: три утверждения одного класса, иконка у всех одна и та же —
   она метка класса, а не различие между пунктами. */
.wont { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wont li { display: flex; gap: var(--space-3); }
.wont .ic { color: var(--muted); flex: none; margin-top: 2px; }
.wont div { display: flex; flex-direction: column; gap: 2px; }
.wont b { color: var(--ink); font-weight: 600; }
.wont span { font-size: var(--fs-sm); color: var(--ink2); }

/* ---------- Главная: лента /learn/ ---------- */
/* карточка статьи — общая анатомия .post-card из components.css */
.post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Главная: сетка инструментов ----------
   Иконка та же и того же размера, что в заголовке карточки /tools/ (.tool-ic, 1.3em):
   на главной она работает меткой для просмотра ряда, и её нельзя мельчить — иначе рисунок
   перестаёт узнаваться и остаётся серым пятном слева от названия. */
.tool-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-mini {
  display: flex; align-items: flex-start; gap: var(--space-3);
  color: var(--ink);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tool-mini:hover { text-decoration: none; border-color: var(--muted); box-shadow: var(--shadow-hover); }
.tool-mini-ic { width: 1.5em; height: 1.5em; flex: none; color: var(--ink2); margin-top: 1px; }
.tool-mini:hover .tool-mini-ic { color: var(--brand); }
.tool-mini-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-mini-body b { font-size: var(--fs-base); font-weight: 600; }
.tool-mini-body span { font-size: var(--fs-sm); color: var(--ink2); }

/* ---------- Главная: тизер /tools/ и подписка ---------- */
.teaser {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  color: var(--ink);
}
.teaser:hover { text-decoration: none; border-color: var(--muted); }
.teaser h2 { margin: 0 0 var(--space-1); }
.teaser p { margin: 0; color: var(--ink2); max-width: 62ch; }
.teaser-go { font-size: var(--fs-xl); color: var(--brand); flex: none; }

/* Опознавательный знак карточки-тизера. Два вида, потому что тизеры ведут в разное:
   у парной статьи — её собственная обложка (тот же PNG, что в ленте /learn/), у тула —
   марка инструмента из спрайта. Подменять одно другим нельзя: обложка обещает текст,
   иконка обещает инструмент. Рамка у обложки нужна тёмной теме — сами обложки тёмные
   и без неё сливаются с карточкой (тот же приём, что у .card-thumb). */
.teaser-thumb {
  flex: none; width: 132px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card-2);
}
.teaser-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
/* Марка инструмента живёт в плитке, а не стоит голой: соседняя карточка несёт обложку
   132×69, и одинокая иконка рядом с ней читалась бы недогруженной картинкой. Плитка
   даёт ей сопоставимую массу теми же рамкой и поверхностью, что у обложки. */
.teaser-ic-box {
  flex: none; display: grid; place-items: center; width: 68px; height: 68px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card-2);
}
.teaser-ic { width: 32px; height: 32px; color: var(--ink2); }
.teaser:hover .teaser-ic { color: var(--brand); }
/* У .teaser стоит justify-content: space-between — при двух детях это прижимало стрелку
   вправо, а при трёх средний блок повисал посреди пустоты, оторванным от своей картинки.
   flex:1 возвращает текст вплотную к знаку, стрелка остаётся у правого края. */
.teaser:has(.teaser-thumb) > div, .teaser:has(.teaser-ic-box) > div { flex: 1; }

/* ---------- Хвостовой CTA секции: вход на /markets ----------
   От .teaser отличается не тоном, а РОЛЬЮ: это не третья информационная карточка ряда,
   а дверь. Поверхность --brand-bg и рамка --brand — контракт B3 закрепляет --brand* за
   интерактивным, и брендовая плоскость рядом с двумя --card графиками читается «другим
   видом объекта» ещё до того, как прочитан текст. Запрет B8 №3 касается только графиков.
   Селекторы .teaser.cta (0,2,0) — чтобы перебить .teaser независимо от порядка строк. */
.teaser.cta {
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-cta);
  background: var(--brand-bg);
  border-color: var(--brand);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.cta h3 { margin: 0 0 var(--space-2); color: var(--ink); }
.cta p  { color: var(--ink2); max-width: 76ch; }

/* Пилюля-действие: анатомия .btn.secondary из контракта B6 (высота --control-h, паддинг
   0 --space-4, --radius-s, --fs-base/600, gap --space-2), но брендовым контуром.
   Заливки нет намеренно: в тёмной теме --on-solid на --brand даёт 2.64:1, а .btn:hover
   уводит фон в --brand-hover, где белый текст падает до 1.82:1. Контур — единственный
   вариант, проходящий AA в ОБЕИХ темах. */
.cta-go {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  flex: none; height: var(--control-h); padding: 0 var(--space-4);
  background: var(--card); color: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--radius-s);
  font-size: var(--fs-base); font-weight: 600; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* 2.2 — та же обводка, что у иконок внутри .btn (components.css:140): тонкий → и был
   главной причиной «не считывается». Переход только на стрелке, не на пилюле. */
.cta-go .ic { stroke-width: 2.2; transition: transform var(--dur-fast) var(--ease); }

.teaser.cta:hover { border-color: var(--brand-hover); box-shadow: var(--shadow-hover); }
.cta:hover .cta-go { color: var(--brand-hover); border-color: var(--brand-hover); }
.cta:hover .cta-go .ic { transform: translateX(2px); }
.teaser.cta:active { transform: translateY(1px); }

/* хвостовая карточка-CTA идёт на всю ширину сетки: обрезанная по 60% оставляла дыру справа */
.nl h2 { margin-bottom: var(--space-2); }
.nl p { margin: 0 0 var(--space-3); color: var(--ink2); max-width: 70ch; }
/* Состав письма (аудит E3-16): пять строк с сегодняшними значениями. Список, а не проза —
   он описывает структуру, и структура должна быть видна формой. */
.nl-sample { margin: 0 0 var(--space-4); padding: 0 0 0 var(--space-5); max-width: 70ch; color: var(--ink2); }
.nl-sample li { margin-bottom: var(--space-1); font-size: var(--fs-sm); }
.nl-sample b { color: var(--ink); font-weight: 600; }

.nl-form { display: flex; gap: var(--space-2); flex-wrap: wrap; max-width: 560px; }
.nl-form input[type="email"] {
  flex: 1; min-width: 220px; height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  font: inherit; font-size: var(--fs-base); background: var(--card); color: var(--ink);
}
.nl-form input[type="email"]:focus { outline: 2px solid var(--focus); border-color: var(--brand-2); }
.nl-form .btn { flex: none; }
.nl .fine { margin: var(--space-3) 0 0; }
.nl-ok { color: var(--ink); font-weight: 600; }
/* honeypot: поле есть в DOM, но недоступно человеку */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- /tools/ ---------- */
.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); position: relative; }
a.tool:hover { text-decoration: none; border-color: var(--muted); }
/* «Растянутая ссылка»: карточка кликается целиком, но остаётся <div> — внутри живёт вторая
   ссылка, на парную статью, а вложить <a> в <a> нельзя. Псевдоэлемент перекрывает карточку,
   .tool-guide поднимается над ним по z-index и потому кликается отдельно. */
.tool-go { color: inherit; text-decoration: none; }
.tool-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Подсвечивается только та карточка, по которой есть куда кликнуть: у «Coming soon»
   ссылки нет, и общий .tool:hover обещал переход, которого не существует.
   Тень, а не одна рамка: --line → --muted для карточки-ссылки почти незаметно. */
.tool:has(.tool-go):hover { border-color: var(--muted); box-shadow: var(--shadow-hover); }
.tool:has(.tool-go:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tool-go:focus-visible { outline: none; }
/* Разделитель прижат к низу карточки: свободное место забирает описание (`.tool p{flex:1}`
   ниже), а сноска остаётся своего размера. Без этого оба абзаца делили остаток поровну,
   и в одном ряду три карточки давали линию на трёх разных высотах (разброс до 23px).
   Селектор с `.tool` — сноска сама является <p>, и одиночный класс `.tool p` не перебивал.
   Ряд карточек однороден — B7. */
.tool .tool-guide {
  position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-2);
  margin: auto 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm); color: var(--muted); flex: 0 0 auto;
}
.tool-guide .ic { color: var(--muted); flex: none; }
.tool-guide a { color: var(--ink2); font-weight: 600; }
/* «Coming soon» — пунктирная рамка без заливки: в тёмной теме --card-2 светлее карточки
   и нереализованный инструмент выглядел бы заметнее живого. */
.tool-soon { background: none; border-style: dashed; box-shadow: none; }
.tool-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.tool-head h2 { margin: 0; }
/* Иконка инструмента крупнее иконки заголовка карточки дашборда: на /tools/ она работает
   меткой для просмотра списка, а не украшением строки. flex:none — иначе длинное название
   в две строки сжимает её по ширине. */
.tool-ic { width: 1.3em; height: 1.3em; flex: none; color: var(--ink2); }
.tool-soon .tool-ic { color: var(--muted); }
.tool p { margin: 0; font-size: var(--fs-base); color: var(--ink2); flex: 1; }
.tool-now { font-size: var(--fs-sm); color: var(--ink2); font-weight: 600; }
/* хвостовая карточка-CTA — на всю ширину */
.note { margin-top: var(--space-6); }
.note h2 { margin-bottom: var(--space-2); }
.note p { margin: 0; color: var(--ink2); max-width: 80ch; }

/* ---------- Страницы инструментов (/tools/mayer, /tools/200wma, /tools/fear-greed) ----------
   Карточки, чипы, таблицы и колонка чтения — общие (components.css). Здесь только
   серверный график и карточка «показание по активу». */

.chart-svg { display: block; width: 100%; height: auto; margin-top: var(--space-1); }
.chart-tick {
  fill: var(--muted); font-size: var(--fs-2xs); font-family: var(--font);
}
/* Подпись опорной линии лежит поверх данных: обводка цветом карточки выбивает её из графика */
.chart-tick.strong {
  fill: var(--ink2); font-weight: 700;
  paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round;
}
/* Подпись границы зоны у правого края — тот же приём, но цветом своей зоны:
   раньше зонные полосы стояли вообще без подписей, а ключ к ним лежал на 600px ниже. */
.chart-zone-lbl { font-size: var(--fs-2xs); font-family: var(--font); font-weight: 700;
  paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
/* ---------- Гистограмма: «сегодня» ----------
   Три канала на одну метку, потому что двух не хватало: столбец сегодняшнего значения стоял
   среди двадцати одинаковых и терялся. Подсветка колонки видна даже там, где столбец в один
   пиксель; пилюля — сплошная --ink с текстом --card, то есть инверсия страницы: она читается
   как метка интерфейса, а не как ещё одна подпись оси. Заливка столбца не трогается — цвет
   в этом графике означает зону (контракт B3). */
.hist-now-col { fill: var(--ink); opacity: .07; }
.hist-now-bar { fill: none; stroke: var(--ink); stroke-width: 2; }
.hist-now-lead { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; }
.hist-now-pill { fill: var(--ink); }
.hist-now-label { fill: var(--card); font-size: var(--fs-2xs); font-family: var(--font); font-weight: 700; }

.chart-zone-lbl.z1 { fill: var(--therm-1-ink); }
.chart-zone-lbl.z2 { fill: var(--therm-2-ink); }
.chart-zone-lbl.z3 { fill: var(--therm-3-ink); }
.chart-zone-lbl.z4 { fill: var(--therm-4-ink); }
.chart-zone-lbl.z5 { fill: var(--therm-5-ink); }
.chart-zone-line { stroke-width: 1; opacity: .9; }
.chart-zone-line.z1 { stroke: var(--therm-1); }
.chart-zone-line.z2 { stroke: var(--therm-2); }
.chart-zone-line.z3 { stroke: var(--therm-3); }
.chart-zone-line.z4 { stroke: var(--therm-4); }
.chart-zone-line.z5 { stroke: var(--therm-5); }
.chart-grid { stroke: var(--data-grid); stroke-width: 1; }
.chart-axis { stroke: var(--data-axis); stroke-width: 1; }
.chart-ref { stroke: var(--data-ref); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.chart-key {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--ink2);
}
.chart-key span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-key i { width: 14px; height: 3px; border-radius: 2px; flex: none; }

/* Сегменты из ССЫЛОК (/tools/compare): вид тот же, что у кнопочного .seg в дашборде, но
   каждое окно сравнения обязано иметь собственный адрес — страница работает без JS, и
   ссылку на «10 лет» нужно уметь дать в соцсети. Высота --control-h везде: это единственный
   орган управления страницы, и на телефоне он же — основная цель для пальца. */
.seg-links {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  background: var(--neutral-bg); border-radius: var(--radius-pill); padding: var(--space-1);
  margin: 0 0 var(--space-5); width: max-content; max-width: 100%;
}
.seg-link {
  display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink2); text-decoration: none;
}
.seg-link:hover { color: var(--ink); }
.seg-link.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-inset-sm); }

/* Показание по активу: крупное число, чип зоны, две-три подписи */
.read .read-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.read .read-top h2 { margin: 0; }
.read-sym { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .04em; }
.read-val {
  font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-2xl); letter-spacing: -.025em;
  margin: var(--space-2) 0 var(--space-2);
}
.read-sub { margin: 0; color: var(--ink2); font-size: var(--fs-base); }
.read .kv-inline { margin-top: var(--space-3); }
.read .kv-inline dd { font-size: var(--fs-h3); }
.as-of { margin: var(--space-3) 0 0; }
.tool-doc .tbl { margin-bottom: var(--space-5); }
/* карточка парной статьи стоит внутри колонки чтения — h3 и текст без внешних отступов.
   text-decoration снимается с повышенной специфичностью: .doc a подчёркивает инлайн-ссылки
   лонгрида и без этого подчеркнул бы всю карточку целиком. */
.doc a.teaser, .doc a.teaser:hover { text-decoration: none; }
.tool-related { margin: var(--space-7) 0; align-items: center; }
.tool-related h3 { margin: 0 0 var(--space-1); }
.tool-related p { margin: 0; font-size: var(--fs-base); color: var(--ink2); }
.tool-related .eyebrow { margin-bottom: var(--space-1); }

/* ---------- Обратный отсчёт халвинга (/tools/halving) ---------- */
/* Счётчик собирается на сервере, JS только меняет цифры внутри — потому фиксированная
   ширина ячейки: без неё строка дёргалась бы раз в секунду на смене разрядности.
   Это единственное место, где tabular-nums оставлен на крупном кегле: тикающий раз
   в секунду счётчик с пропорциональными цифрами дёргает подпись под собой. */
.hv-count { display: flex; flex-direction: column; }
.hv-clock { display: flex; gap: var(--space-2); margin: var(--space-4) 0 0; }
.hv-clock > div {
  flex: 1 1 0; min-width: 0; text-align: center;
  background: var(--neutral-bg); border-radius: var(--radius-s); padding: var(--space-2) var(--space-1);
}
.hv-clock .num {
  display: block; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-xl);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hv-clock em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.hv-note { margin: var(--space-3) 0 0; }
.hv-count .hv-note { margin-top: auto; padding-top: var(--space-3); }
/* Месяц-диапазон вместо числа: крупный кегль .read-val на «April 2028 – May 2028» не влезает */
.read-val.hv-band { font-size: var(--fs-xl); letter-spacing: -.015em; }
.hv-paces { margin-bottom: 0; }
/* Строка, которой тикает счётчик — остальные два срока справочные */
.tbl tr.hv-lead > td { background: var(--neutral-bg); font-weight: 600; }

.hv-bar {
  height: 8px; border-radius: var(--radius-pill); background: var(--neutral-bg);
  overflow: hidden; margin: var(--space-3) 0 var(--space-2);
}
.hv-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-2); }

@media (max-width: 640px) {
  .hv-clock { gap: var(--space-1); }
  /* Пять окон в одну строку на 375px не влезают, а перенос внутри пилюли превращает её
     в скруглённую кляксу в две строки. На узком экране контейнер исчезает, и каждое
     окно становится самостоятельной пилюлей с границей. */
  .seg-links { background: none; padding: 0; gap: var(--space-2); width: auto; }
  .seg-link { border: 1px solid var(--line); padding: 0 var(--space-3); }
  .seg-link.is-on { border-color: transparent; background: var(--neutral-bg); }
}

/* ---------- Длинный документ (/about, /methodology) ----------
   Колонка чтения, кегль и заголовки — из общего слоя (.prose, .doc). Здесь только
   то, что есть лишь в документах KURS: разделители секций, формулы, широкие таблицы. */
/* Колонка чтения выравнивается по ЛЕВОМУ краю широкой сетки, а не центрируется:
   на /tools/* лид шёл в 720, карточки в 1140, а документ снова в 720 по центру — левый
   край страницы прыгал на ~200px (design-system A10, правило B2).

   `margin: 0 auto` здесь имел и второй, невидимый эффект: авто-поля отменяют растягивание
   grid-элемента, и внутри .article-layout колонка переходила на fit-content — на 375px
   это давало 475px при доступных 343 и уводило /methodology в горизонтальный скролл. */
.doc { margin: 0; }
.doc h1 { margin: 0 0 var(--space-3); }

/* Шапка документа отдельным элементом сетки (.article-head). Смысл — порядок на ≤1000px:
   раньше боковик с оглавлением поднимался наверх через `order: -1` и вставал ВЫШЕ h1
   (замер: полоса «On this page» на 87px, h1 на 200px), а порядок чтения с клавиатуры
   оставался прежним — расхождение визуального и DOM-порядка, WCAG 1.3.2 / 2.4.3.
   Теперь в разметке идут шапка → оглавление → текст, и на узком экране никакой order
   не нужен вовсе. На десктопе картинка не меняется: обе колонки те же.
   Класс .doc на шапке оставлен намеренно — типографика лонгрида общая, дублировать
   правила для h1/лида незачем. */
.article-head > :last-child { margin-bottom: 0; }   /* стык с первым h2 держит его margin-top */
@media (min-width: 1001px) {
  /* Явные строки нужны ради `1 / -1` у боковика: без grid-template-rows отрицательная
     линия ссылается на несуществующий явный грид. Боковик обязан тянуться через обе
     строки — иначе sticky живёт ровно на высоту шапки и оглавление уезжает с первым
     же экраном. row-gap 0: шапка и текст — один документ, интервал задают их margin. */
  .article-layout:has(> .article-head) { grid-template-rows: auto auto; row-gap: 0; }
  /* Колонка задаётся явно вместе со строкой: элемент с определённой строкой и
     неопределённой колонкой автораскладка ставит в ПЕРВУЮ свободную колонку — боковик
     уезжал влево и забирал 720px, а текст оставался в полосе 260px. */
  .article-layout:has(> .article-head) > .article-side { grid-column: 2; grid-row: 1 / -1; }
}
@media (max-width: 1000px) {
  /* Где шапка вынесена, оглавление уже стоит в разметке на своём месте — поднимать нечем. */
  .article-layout:has(> .article-head) > .article-side { order: 0; }
}
.doc code {
  font-family: var(--font-mono);
  font-size: .9em; background: var(--neutral-bg); padding: 1px var(--space-1); border-radius: var(--radius-xs);
}
.doc .formula {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-5); font-size: var(--fs-h3); font-weight: 600; text-align: center;
}
.doc .formula code { background: none; padding: 0; font-size: var(--fs-base); font-weight: 600; }
.doc .updated { margin-top: var(--space-7); font-size: var(--fs-sm); color: var(--muted); }
.doc .limits li { margin-bottom: var(--space-3); }

/* ---------- Таблицы документа ----------
   Оформление — общее (.tbl в components.css); здесь только прокрутка на узких экранах
   и вылет широких таблиц за колонку чтения. */
/* Прокручивает ОБЁРТКА, а не сама таблица. Раньше здесь стояло
   `.doc .tbl { display: block; overflow-x: auto }` — и это молча ломало семантику:
   смена display снимает неявные роли table/row/cell в Chromium и WebKit, то есть
   четыре таблицы /methodology и одна на /tools/fear-greed переставали быть таблицами
   для скринридера. Таблица остаётся display:table, коробкой служит .tbl-wrap
   (так же устроены карточки KURS и figure.wp-block-table в теме /learn). */
.doc .tbl { margin: 0 0 var(--space-5); }
.doc .tbl-wrap { margin: 0 0 var(--space-5); }
.doc .tbl-wrap > .tbl { margin: 0; }
.doc .u { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.doc .tbl .strong { font-weight: 700; }
.doc .zones-tbl td:first-child { white-space: nowrap; }
/* Таблицы на четыре колонки в колонке 720px превращают текст в лапшу — на широком экране
   они выходят на всю ширину .wrap (720 + 210×2 = 1140). Ниже 1180px запаса нет. */
@media (min-width: 1180px) {
  /* width: auto обязателен — с width: 100% из общего .tbl уравнение блока переопределено
     и отрицательные поля только сдвигают таблицу влево, не расширяя её.
     Поля переехали на обёртку: теперь в потоке стоит .tbl-wrap, и вылезать за колонку
     должна она — у таблицы внутри скролл-коробки отрицательное поле не сработало бы. */
  .doc .tbl-wrap-wide { margin-inline: -210px; }
  .doc .tbl-wide { width: auto; }
  /* …кроме страниц с боковым оглавлением: слева от колонки чтения места больше нет
     (она прижата к левому краю сетки), а справа стоит липкий боковик, и таблица
     уехала бы под него. Там широкая таблица прокручивается — как и на телефоне. */
  .article-layout .doc .tbl-wrap-wide { margin-inline: 0; }
  .article-layout .doc .tbl-wide { width: 100%; }
}

/* ---------- Текущее показание (/methodology) ---------- */
.reading { margin: 0 0 var(--space-7); padding: var(--space-6); }
.reading-head { display: flex; gap: var(--space-7); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-5); }
.reading-gauge { flex: none; width: 264px; text-align: center; }
.reading-meta { flex: 1; min-width: 240px; }
.reading-hint { margin: var(--space-3) 0 0; font-size: var(--fs-prose); line-height: 1.5; color: var(--ink2); }
.reading .comp-now { margin-bottom: var(--space-2); }
.reading .fine { margin-bottom: 0; }

/* ---------- Страница вставки виджетов (/tools/embed) ----------
   Сами виджеты своего CSS отсюда не берут: /embed/* несёт стили инлайном и ни одного
   внешнего файла не тянет (его грузят читатели чужих сайтов). Здесь — только витрина. */
.em-block { margin-bottom: var(--space-6); }
.em-block > p { color: var(--ink2); max-width: 78ch; }
.em-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.em-head h2 { margin: 0; }
.em-sub { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink2); }

/* Витрина виджета: фон на ступень отличается от карточки — видно прозрачные углы iframe */
.em-demo {
  display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-5) 0 var(--space-4); padding: var(--space-5);
  background: var(--card-2); border: 1px solid var(--line-soft); border-radius: var(--radius-s);
}
.em-demo figure { margin: 0; }
.em-demo figcaption { margin-top: var(--space-2); text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.em-frame { display: block; border: 0; max-width: 100%; }
.em-demo-badge { justify-content: center; padding: var(--space-6) var(--space-5); }

/* Сниппет: кнопку Copy дорисовывает assets/js/copy.js, поэтому правое поле держим всегда —
   иначе при появлении кнопки текст под ней прыгал бы. */
.snip { position: relative; margin: 0 0 var(--space-3); }
.snip pre {
  margin: 0; overflow-x: auto; padding: var(--space-3) 96px var(--space-3) var(--space-4);
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.snip code { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); }
.snip-copy {
  position: absolute; top: var(--space-2); right: var(--space-2); height: var(--control-h-xs); padding: 0 var(--space-3); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  color: var(--ink2); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.snip-copy:hover { color: var(--ink); border-color: var(--muted); }
.snip-copy.ok { color: var(--brand-ink); background: var(--brand-bg); border-color: transparent; }

.em-opts { margin: var(--space-2) 0 var(--space-3); }
/* Имя параметра не переносится никогда; список значений — только пока есть место:
   на 375px три инлайн-кода в nowrap распирали таблицу за вьюпорт (карточка при этом
   не в .doc, и общий overflow-x оттуда сюда не достаёт). */
.em-opts td:first-child { white-space: nowrap; }
@media (min-width: 641px) { .em-opts td:nth-child(2) { white-space: nowrap; } }
.em-rules { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); color: var(--ink2); }
.em-rules li { margin-bottom: var(--space-2); }
.em-rules strong { color: var(--ink); }

/* ---------- /dca ----------
   Форма отправляется методом GET и считается на сервере; JS перехватывает submit и
   пересчитывает без перезагрузки. Инлайн-стилей с магическими px здесь больше нет. */
.dca-sub { margin-bottom: var(--space-4); }
.dca-form { display: flex; flex-direction: column; gap: var(--space-3); }
.dca-fields { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dca-f-asset { min-width: 90px; }
.dca-f-amt { flex: 1; min-width: 130px; }
.dca-f-freq { min-width: 130px; }
.dca-f-start { min-width: 160px; }
.dca-toggle { align-items: flex-start; }
.dca-form .btn { align-self: flex-start; }

.dca-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.dca-tile {
  background: var(--card-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-s); padding: var(--space-2) var(--space-3);
}
/* Вес 700, а не 800: восьмисотый упразднён контрактом B1 */
.dca-tile-v { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
.dca-tile-v.up { color: var(--up); }
.dca-tile-v.down { color: var(--down); }
/* Пояснение к паре годовых ставок и доля выигрышей lump sum: продолжение блока плиток,
   поэтому тот же верхний отступ, что между плитками, а не отступ секции. */
.dca-why, .dca-wins { margin: var(--space-3) 0 0; }
.dca-wins strong { color: var(--ink); }

.dca-wi { margin-top: var(--space-4); }
/* Пустое состояние: раньше при негодном вводе на экране просто оставались прежние цифры,
   и человек не мог отличить «посчитано» от «проигнорировано». */
.dca-empty { grid-column: 1 / -1; margin: 0; color: var(--ink2); font-size: var(--fs-sm); }
/* Блок отказа /api/history — тот же паттерн, что showLoadError() на /markets */
.dca-error { grid-column: 1 / -1; margin: 0; }
.dca-error p { margin: 0 0 var(--space-2); color: var(--ink2); font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .dca-stats { grid-template-columns: 1fr; }
}

/* ---------- /glossary ----------
   Лонгрид (.doc) с плоским списком: колонка чтения, ступени заголовков и ссылки — общие.
   Термин с подсказкой (.term / .term-pop) и мостик .gloss-note живут в components.css:
   они встречаются и в теме /learn/. */
/* Селекторы с префиксом .gloss — лонгрид .doc задаёт h2/h3/a своими правилами
   специфичности (0,1,1), и одиночный класс их бы не перебил. */
/* Ряд A–Z липкий: страница 14 287px, и без него после первого прыжка вернуться к
   алфавиту можно было только скроллом наверх. top = высота шапки (63px). */
.gloss-az {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  position: sticky; top: 63px; z-index: 20;
  margin: var(--space-6) 0 0; padding: var(--space-3) 0;
  background: var(--bg);
}
/* Собственной нижней границы у ряда нет намеренно: сразу под ним стоит первая
   буква-разделитель со своей линией, и две волосяные черты в 32px друг от друга
   с одним глифом между ними читались пустой полосой-артефактом. Одна линия на границу. */
/* Буква читается как контрол: рамка в покое, высота --control-h-sm, пилюля.
   Раньше состояния покоя не было вовсе — 27 подписей висели голым текстом. */
.gloss .gloss-az a {
  min-width: var(--control-h-sm); min-height: var(--control-h-sm);
  justify-content: center; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); color: var(--ink2);
}
.gloss .gloss-az a:hover { background: var(--brand-bg); color: var(--brand-ink); border-color: transparent; }
@media (max-width: 640px) {
  /* На телефоне буква была 34×32 при минимуме для пальца 44, а ряд переносился в три
     строки — липкий блок занимал 137px, 17% экрана. Одна строка с горизонтальным
     скроллом и высота --control-h: липкая полоса становится в три раза ниже,
     а цель нажатия дорастает до нормы. */
  .gloss-az { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .gloss .gloss-az a { min-width: var(--control-h); min-height: var(--control-h); flex: none; }
}

/* Буква — разделитель, а не заголовок раздела: кегль мельче h2, роль в структуре — h2 */
/* Буква — не заголовок секции лонгрида: разделительная линия у неё СНИЗУ, под глифом,
   а верхнюю (общее правило .doc h2) снимаем — иначе на каждой букве две черты подряд. */
.gloss .gloss-letter {
  font-size: var(--fs-base); margin: var(--space-7) 0 0;
  padding-top: 0; padding-bottom: var(--space-2);
  border-top: 0; border-bottom: 1px solid var(--line); color: var(--muted);
  letter-spacing: .1em; scroll-margin-top: 84px;
}
/* scroll-margin-top больше: под шапкой теперь стоит ещё и липкий ряд A–Z */
.gloss-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 128px; }
.gloss-group .gloss-item:last-child { border-bottom: 0; }
/* Приход по якорю #mayer из статьи: подсветка гаснет за --dur-slow с задержкой, чтобы
   глаз успел найти термин среди 47. Раньше :target не имел стилей вовсе — человек
   приземлялся в стену текста и искал глазами. Фон, а не рамка: рамка сдвинула бы вёрстку. */
.gloss-item:target {
  animation: target-fade var(--dur-slow) var(--ease) 600ms both;
  border-radius: var(--radius-s);
}
@keyframes target-fade {
  from { background: var(--brand-bg); box-shadow: 0 0 0 var(--space-3) var(--brand-bg); }
  to { background: transparent; box-shadow: 0 0 0 var(--space-3) transparent; }
}

/* «Наверх» в конце каждой группы: 47 терминов на 14 000px, и без него возврат к
   алфавиту — это ручная прокрутка через полстраницы. */
.gloss-top { margin: var(--space-4) 0 0; text-align: right; }
.gloss .gloss-top a { font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.gloss .gloss-top a:hover { color: var(--brand); text-decoration: underline; }
.gloss .gloss-term { margin: 0 0 var(--space-1); font-size: var(--fs-lg); }
/* Якорь-решётка проявляется по наведению на термин и по собственному фокусу */
.gloss a.gloss-anchor {
  margin-left: var(--space-2); font-size: var(--fs-base); font-weight: 400; color: var(--muted);
  text-decoration: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.gloss-item:hover .gloss-anchor, .gloss a.gloss-anchor:focus-visible { opacity: 1; }
.gloss .gloss-aka { margin: 0 0 var(--space-2); font-size: var(--fs-sm); color: var(--muted); }
.gloss .gloss-short { margin: 0 0 var(--space-2); }
.gloss .gloss-note-p { margin: 0 0 var(--space-2); font-size: var(--fs-base); color: var(--ink2); }
.gloss-links { font-size: var(--fs-sm); }
/* Сетка 108px + остальное: при inline-block метке перенос второй строки уезжал ПОД неё,
   и «Where we use it» переставало читаться как подпись к списку. */
.gloss .gloss-links p {
  display: grid; grid-template-columns: 108px 1fr; gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0 0; color: var(--ink2);
}
.gloss-links .dot { color: var(--muted); }
.gloss-lbl {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); line-height: var(--lh-sm);
}
@media (max-width: 640px) {
  .gloss .gloss-links p { grid-template-columns: 1fr; gap: 0; }
}
.gloss-cta { margin-top: var(--space-7); }
.gloss-cta h3 { margin: 0 0 var(--space-1); }
.gloss-cta .eyebrow { margin-bottom: var(--space-1); }
/* .doc задаёт ссылкам сплошное подчёркивание — у карточки-тизера оно лишнее */
.doc a.gloss-cta, .doc a.gloss-cta:hover { text-decoration: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 1000px) {
  .post-grid, .tool-grid, .tool-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Одна колонка: «New here?» уходит ПОД гейдж — иначе он уезжал бы за первый экран */
  .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "read" "new"; gap: var(--space-6); }
  .hero-copy { align-self: auto; }

  /* Здесь был флекс-порядок секций главной (order 1/2/3 у секций #tools-teaser, #learn,
     #newsletter). Снят: перестановка живёт в разметке home.php, порядок на экране и порядок
     чтения совпадают. См. комментарий у секции #tools-teaser.
     Имена классов .s-* убраны из разметки (G29): правил у них не было ни у одной из семи
     секций, а этот комментарий делал три из них невидимыми для scripts/css_check.php. */
  .grid-2 { grid-template-columns: 1fr; }
  .reading { padding: var(--space-5); }
  .reading-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .reading-gauge { width: 100%; max-width: 264px; margin: 0 auto; }
  .reading-meta { min-width: 0; text-align: center; }
}
@media (max-width: 640px) {
  /* Сетка инструментов складывается вместе с остальными: в двух колонках на 390px под текст
     остаётся около 90px, и подпись в одну строку разваливается на семь. */
  .post-grid, .tool-grid, .tool-mini-grid { grid-template-columns: 1fr; }
  /* Три колонки инструментов в карточку 366px не влезали и уезжали в скролл контейнера:
     на узком экране отдаём им кегль и внутренние поля. Стопку это НЕ касается: она
     в ширину помещается, а уменьшенный кегль схлопывал в ней три уровня (ключ,
     значение, служебное) в один и делал блок нечитаемой серой массой. */
  .tbl-wrap .tbl:not(.tbl-stack) { font-size: var(--fs-xs); }
  .tbl-wrap .tbl:not(.tbl-stack) th, .tbl-wrap .tbl:not(.tbl-stack) td {
    padding-left: var(--space-2); padding-right: var(--space-2);
  }
  .teaser { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .teaser-go { align-self: flex-end; }
  /* В стопке обложка идёт во всю ширину, как в карточке статьи на главной: 132 px над
     заголовком читались бы случайной миниатюрой, а не обещанием текста. */
  .teaser-thumb { width: 100%; }
  /* Стопкой: пилюля становится баром во всю ширину карточки — на телефоне это самый
     однозначный вид «нажми сюда». Стрелка уезжает к правому краю бара. */
  .teaser.cta { gap: var(--space-4); }
  .cta-go { align-self: stretch; justify-content: space-between; }
  .kv-inline { gap: var(--space-5); }
}