/* ─────────────────────────────────────────────────────────────────────
   БЛОКИ СТАТЬИ

   Восемнадцать форм, которыми писатель оформляет то, что уже написал:
   чек-лист, вопрос к ассистенту, схема, две карточки «до и после».
   Собираются в `sayso/web/blocks.py`, одеваются здесь.

   Правила те же, что у всего сайта (`docs/identity.md`), и они здесь
   не повторяются словами, а соблюдаются:

   * бумажная карточка: `--paper`, рамка 1px, скругление 13–16px,
     мягкая двухслойная тень — как у `.ui-card`. Серых плоских
     прямоугольников в системе нет;
   * вставная панель — `--sage-tex`, с бумажным зерном;
   * `--leaf` только штрихом и линией состояния, `--mint-soft` —
     мазком под смыслом. Фонов из них не делаем;
   * заголовок блока — Space Grotesk, метка — Space Mono, текст —
     Hanken. Целиком моноширинного блока в библиотеке нет;
   * «выход за рамку» — не больше одного на блок;
   * движение — только при `prefers-reduced-motion: no-preference`.

   Разделы:
     0. Общее
     1. try            9. versus
     2. answer        10. proscons
     3. checklist     11. selfcheck
     4. fact          12. annotated
     5. stats         13. code
     6. callout       14. beforeafter
     7. diagram       15. term
     8. assistants    16. details
                      17. cta
   ───────────────────────────────────────────────────────────────────── */

/* --- 0. Общее ------------------------------------------------------- */

.blk {
  margin: var(--space-6) 0;
}

/* Метка блока: где человек находится. Смысл несёт заголовок, а не она */
.blk__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.blk__head {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}

/* Подпись под блоком: «Illustrative», источник, оговорка */
.blk__note {
  margin: var(--space-2) 0 0;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* Имя блока, которого нет в библиотеке. Видно на экране нарочно:
   молча пропавший абзац хуже некрасивого */
.blk-broken {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-signal);
  background: var(--sage);
  font-family: var(--font-label);
  font-size: var(--text-sm);
}

/* Внутри блоков текст живёт по тем же правилам, что в статье, но
   плотнее: блок — вставка, а не глава */
.blk p { margin: 0 0 var(--space-3); }
.blk p:last-child { margin-bottom: 0; }
.blk ul, .blk ol { margin: 0; padding-left: 1.1rem; }

/* Статья рисует свой маркер — зелёный штрих и номер шага. В блоке
   маркер свой: галочка, знак «работает», номер точки. Два маркера
   на один пункт — это не список, это опечатка */
.bpost__body .blk ul,
.bpost__body .blk ol { margin: 0; padding-left: 0; }
.bpost__body .blk li { padding-left: 0; }
.bpost__body .blk li::before { content: none; }
.bpost__body .blk li + li { margin-top: 0; }
.bpost__body .chk { gap: var(--space-2); }
.bpost__body .blk > *, .bpost__body .blk { max-width: none; }
/* внутри блока свой ритм абзацев */
.bpost__body .blk p { margin: 0 0 var(--space-3); }
.bpost__body .blk p:last-child { margin-bottom: 0; }

/* Карточка блока: одна форма на всю библиотеку */
.blk .ui-card,
.vs__card, .ba__card, .try__card, .ans, .trm, .stats, .pcs, .bcta,
.blk--check {
  background: var(--paper);
  border: 1px solid var(--color-ink-28);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px oklch(0.19 0.0068 78 / 0.05),
              0 12px 28px -18px oklch(0.19 0.0068 78 / 0.28);
}

/* --- 1. try: вопрос, который читатель задаёт сам -------------------- */

.try {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--color-ink-28);
  border-radius: var(--radius-lg);
  background: var(--sage-tex);
}

.try__ask {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 var(--space-3);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-ink);
}

/* Выход за рамку: знак вопроса наезжает на край панели. Один
   на блок — больше превращается в узор */
.try__icon {
  display: inline-flex;
  margin: -0.9rem 0 -0.9rem -2.2rem;
}

.try__card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
}

.try__q {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-ink);
}

.try__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.try__copy { margin-top: var(--space-4); }

/* --- 2. answer: как выглядел бы ответ ассистента -------------------- */

.ans { padding: var(--space-5); }

.ans__who {
  margin: 0 0 var(--space-3);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.ans__body { font-size: var(--text-md); line-height: 1.6; }

.ans__src {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-ink-28);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* --- 3. checklist: настоящие галочки -------------------------------- */

.blk--check { padding: var(--space-5); }

.chk { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }

.chk__item { display: flex; align-items: flex-start; gap: 0.7rem; }

/* Квадратик рисуем сами, но галочка настоящая: её видно с клавиатуры,
   её читает скринридер, и состояние у неё своё, а не наше */
.chk__box {
  appearance: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  border: 1.5px solid var(--leaf);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
}

.chk__box:checked {
  background: var(--leaf);
  /* галочка — та же линия, что в знаке `check` */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 0.85rem;
  background-position: center;
  background-repeat: no-repeat;
}

.chk__box:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

.chk__text { cursor: pointer; line-height: 1.55; }

.chk__box:checked + .chk__text {
  text-decoration: line-through;
  text-decoration-color: var(--color-ink-28);
  color: var(--color-ink-muted);
}

/* --- 4. fact: одно число крупно ------------------------------------- */

.blk--fact {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-left: 3px solid var(--leaf);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--paper);
  border-top: 1px solid var(--color-ink-28);
  border-right: 1px solid var(--color-ink-28);
  border-bottom: 1px solid var(--color-ink-28);
}

.fact__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--green-ink);
}

.fact__what { font-size: var(--text-md); line-height: 1.55; }

.fact__src {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* --- 5. stats: две-четыре цифры в ряд ------------------------------- */

.stats {
  display: grid;
  gap: 0;
  padding: var(--space-5);
  grid-template-columns: 1fr;
}

.stat { padding: var(--space-4) 0; }
.stat + .stat { border-top: 1px solid var(--color-ink-28); }
.stat:first-child { padding-top: 0; }
.stat:last-child { padding-bottom: 0; }

.stat__value {
  margin: 0 0 0.2rem;
  font-family: var(--font-label);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--green-ink);
}

.stat__what { margin: 0 0 0.3rem; font-size: var(--text-base); line-height: 1.45; }

.stat__src {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

@media (min-width: 40rem) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .stat { padding: 0 var(--space-5); }
  .stat + .stat { border-top: none; border-left: 1px solid var(--color-ink-28); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { padding-right: 0; }
}

/* --- 6. callout: tip / watch / myth --------------------------------- */

.note {
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: 3px solid var(--leaf);
  background: var(--sage);
}

.note__word {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-2);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-ink);
}

.note__body { font-size: var(--text-base); line-height: 1.6; }

/* Предупреждение — единственное место янтаря на сайте */
.note--watch { border-left-color: var(--amber-ink); background: var(--amber-soft); }
.note--watch .note__word { color: var(--amber-ink); }
.note--watch .icn__leaf { stroke: var(--amber-ink); }
.note--watch .icn__brush { stroke: oklch(0.88 0.06 85); }

/* Заблуждение — нейтральное: мы не кричим «неправда», мы объясняем */
.note--myth { border-left-color: var(--color-ink-28); background: var(--color-surface-sunken); }
.note--myth .note__word { color: var(--color-ink); }
.note--myth .icn__leaf { stroke: var(--color-ink); }
.note--myth .icn__brush { stroke: var(--color-ink-28); }

/* --- 7. diagram: четыре шаблона схемы ------------------------------- */

.blk--dia { margin: var(--space-6) 0; }

/* Ширина ограничена: схема нарисована в своих координатах, и если
   растянуть её на всю колонку, вместе с ней вырастут и подписи */
.dia { display: block; width: 100%; max-width: 42rem; height: auto; overflow: visible; }

.dia__box { fill: var(--paper); stroke: var(--color-ink-28); stroke-width: 1; }
.dia__shadow { fill: oklch(0.19 0.0068 78 / 0.07); }

/* Выделенный узел — мазок под смыслом и контур знака */
.dia__node--lit .dia__box { fill: var(--mint-soft); stroke: var(--green-ink); }

.dia__text {
  font-family: var(--font-label);
  font-size: 11.5px;
  fill: var(--color-ink);
  text-anchor: middle;
}

.dia__link {
  fill: none;
  stroke: var(--green-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* Главная связь — смысловая, и только она зелёная */
.dia__link--main { stroke: var(--leaf); stroke-width: 2.6; }

.dia__cap {
  margin: var(--space-3) 0 0;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

@media (prefers-reduced-motion: no-preference) {
  /* Связи прорисовываются, когда схема появилась на экране.
     `pathLength="1"` стоит на самих путях в разметке */
  .dia[data-draw] .dia__link { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .dia[data-draw="run"] .dia__link {
    animation: dia-draw 520ms var(--ease) both;
  }
  .dia[data-draw="run"] .dia__link--main { animation-delay: 60ms; }
  @keyframes dia-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }
}

/* --- 8. assistants: вкладки без скрипта ----------------------------- */

.asst__r { position: absolute; opacity: 0; pointer-events: none; }

.asst__tabs { flex-wrap: wrap; max-width: 100%; }

.asst__panels { margin-top: var(--space-4); }

.asst__panel {
  display: none;
  padding: var(--space-5);
  border: 1px solid var(--color-ink-28);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: 0 1px 2px oklch(0.19 0.0068 78 / 0.05),
              0 12px 28px -18px oklch(0.19 0.0068 78 / 0.28);
}

/* Выбор делает форма, а не скрипт: отмеченный переключатель
   показывает свою карточку и красит свою вкладку */
.asst__r--1:checked ~ .asst__panels .asst__panel--1,
.asst__r--2:checked ~ .asst__panels .asst__panel--2,
.asst__r--3:checked ~ .asst__panels .asst__panel--3,
.asst__r--4:checked ~ .asst__panels .asst__panel--4 { display: block; }

.asst__r--1:checked ~ .asst__tabs .asst__tab[for$="-1"],
.asst__r--2:checked ~ .asst__tabs .asst__tab[for$="-2"],
.asst__r--3:checked ~ .asst__tabs .asst__tab[for$="-3"],
.asst__r--4:checked ~ .asst__tabs .asst__tab[for$="-4"] {
  background: var(--mint);
  border-color: var(--green-ink);
  color: var(--color-ink);
  font-weight: 600;
}

.asst__r:focus-visible ~ .asst__tabs { outline: 2px solid var(--color-ink); outline-offset: 3px; }

/* Без CSS-поддержки (и в печати) видны все четыре карточки подряд —
   это и есть читаемая версия без скрипта */
@media print { .asst__panel { display: block; margin-bottom: var(--space-4); } }

/* --- 9. versus: две карточки и вывод -------------------------------- */

.vs { display: grid; gap: var(--space-4); }

.vs__card { padding: var(--space-5); }

.vs__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.vs__body { font-size: var(--text-base); line-height: 1.6; }

/* Рекомендуемая сторона: контур знака и короткая линия `--leaf`,
   которая выходит за край карточки — один выход на блок */
.vs__card--win { border-color: var(--green-ink); overflow: visible; position: relative; }
.vs__card--win::before {
  content: "";
  position: absolute;
  left: -12px;
  top: var(--space-5);
  width: 3px;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--leaf);
}

.vs__verdict {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: var(--space-4) 0 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--leaf);
  font-size: var(--text-md);
  line-height: 1.55;
}

.vs__verdict-word {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .vs { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* --- 10. proscons: работает и не работает --------------------------- */

.pcs { display: grid; gap: var(--space-5); padding: var(--space-5); }

.pcs__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.pcs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }

.pc__item { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--text-base); line-height: 1.55; }

.pc__mark { display: inline-flex; flex: 0 0 auto; margin-top: 0.1rem; }

/* У «не работает» смысловой штрих гаснет до контура: это не ошибка
   и не тревога, это просто другая колонка */
.pcs__col--no .icn__leaf { stroke: var(--color-ink); }
.pcs__col--no .icn__brush { stroke: var(--color-ink-28); }
.pcs__col--no .pc__item { color: var(--color-ink-muted); }

@media (min-width: 44rem) {
  .pcs { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .pcs__col--no { padding-left: var(--space-6); border-left: 1px solid var(--color-ink-28); }
}

/* --- 11. selfcheck: три-пять вопросов ------------------------------- */

.blk--self {
  padding: var(--space-5);
  border: 1px solid var(--color-ink-28);
  border-radius: var(--radius-lg);
  background: var(--sage-tex);
}

.self__list { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: var(--space-4); }

.self__q { font-size: var(--text-base); }

.self__text { margin: 0 0 var(--space-2); line-height: 1.5; }

.self__pills { display: flex; gap: var(--space-2); }

.self__pill { min-width: 3.6rem; justify-content: center; }
.self__pill.is-on { background: var(--mint); border-color: var(--green-ink); color: var(--color-ink); }

.self__result {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--leaf);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--paper);
  font-size: var(--text-md);
  line-height: 1.55;
}

.self__out { margin: 0; }
.self__result .self__out[hidden] { display: none; }

/* Без скрипта выводы показаны списком: читатель видит, к какому
   из них он ближе. Скрипт ставит на блок `data-live` и список убирает */
.self__plain {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-ink-28);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-ink-muted);
}

.blk--self[data-live] .self__plain { display: none; }

/* --- 12. annotated: снимок с точками -------------------------------- */

.ann__frame {
  position: relative;
  border: 1px solid var(--color-ink-28);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}

.ann__img { display: block; width: 100%; height: auto; }

.ann__dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--paper);
  border-radius: 999px;
  background: var(--leaf);
  box-shadow: 0 0 0 6px oklch(0.79 0.1 125 / 0.28);
  font-family: var(--font-label);
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}

.ann__dot:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

.ann__notes {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.ann__note {
  display: flex;
  gap: 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.ann__num {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--leaf);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--green-ink);
}

.ann__note.is-on { color: var(--color-ink); }
.ann__note.is-on .ann__num { background: var(--mint); }

/* --- 13. code: настройка или разметка ------------------------------- */

.code {
  border-radius: var(--radius-md);
  background: var(--green-ink);
  overflow: hidden;
}

.code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.6rem var(--space-4);
  border-bottom: 1px solid oklch(1 0 0 / 0.12);
}

.code__name {
  margin: 0;
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.93 0.02 132 / 0.75);
}

.code__copy {
  padding: 0.3rem 0.8rem;
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-label);
  font-size: 11.5px;
  color: var(--mint-soft);
  cursor: pointer;
}

.code__copy:hover { border-color: var(--mint-soft); }
.code__copy:focus-visible { outline: 2px solid var(--mint-soft); outline-offset: 2px; }

.code__pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 1.7;
  color: oklch(0.93 0.02 132 / 0.92);
}

.code__line { display: block; padding: 0 var(--space-4); margin: 0 calc(var(--space-4) * -1); }

/* Отмеченная строка: мягкая подложка и штрих слева — то, на что
   в настройке надо смотреть */
.code__line--lit {
  background: oklch(0.79 0.1 125 / 0.16);
  box-shadow: inset 3px 0 0 var(--leaf);
}

/* --- 14. beforeafter ------------------------------------------------ */

.ba { display: grid; gap: var(--space-3); align-items: center; }

.ba__card { padding: var(--space-5); }

.ba__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.ba__body { font-size: var(--text-base); line-height: 1.6; }

.ba__card--before { background: var(--sage); box-shadow: none; color: var(--color-ink-muted); }
.ba__card--after { border-color: var(--green-ink); }

.ba__arrow {
  display: inline-flex;
  justify-content: center;
  transform: rotate(90deg);
}

@media (min-width: 48rem) {
  .ba { grid-template-columns: 1fr auto 1fr; }
  .ba__arrow { transform: none; }
}

/* --- 15. term ------------------------------------------------------- */

.trm { display: flex; gap: var(--space-4); padding: var(--space-5); }

.trm__icon { flex: 0 0 auto; display: inline-flex; }

.trm__name {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.trm__what { margin: 0; font-size: var(--text-base); line-height: 1.6; }

.trm__see {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.trm__see span {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- 16. details: «Go deeper» --------------------------------------- */

.deep {
  border-top: 1px solid var(--color-ink-28);
  border-bottom: 1px solid var(--color-ink-28);
}

.deep__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
}

.deep__head::-webkit-details-marker { display: none; }
.deep__head:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

/* Плюс превращается в минус — как у вопросов в FAQ */
.deep__sign { display: inline-flex; flex: 0 0 auto; }
.deep__sign .icn:last-child { display: none; }
.deep[open] .deep__sign .icn:first-child { display: none; }
.deep[open] .deep__sign .icn:last-child { display: inline-flex; }

.deep__body { padding: 0 0 var(--space-5); font-size: var(--text-base); line-height: 1.65; }

/* --- 17. cta: бесплатная проверка посреди статьи -------------------- */

.bcta {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  align-items: center;
}

.bcta__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.bcta__what { margin: 0; font-size: var(--text-base); color: var(--color-ink-muted); }

.bcta__go { justify-self: start; }
.bcta__arrow { display: inline-flex; }

@media (min-width: 40rem) {
  .bcta { grid-template-columns: 1fr auto; }
  .bcta__go { justify-self: end; }
}

/* --- Отклик ---------------------------------------------------------
   Наведение: подъём, рамка `--green-ink`, прорисовка смыслового
   штриха. Движение — только когда его не просили отключить. */

@media (prefers-reduced-motion: no-preference) {
  .try, .ans, .vs__card, .ba__card, .trm, .stats, .pcs, .bcta,
  .asst__panel, .ann__frame, .blk--fact, .blk--self, .blk--check {
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
  }

  .try:hover, .ans:hover, .vs__card:hover, .ba__card--after:hover,
  .trm:hover, .bcta:hover, .blk--fact:hover, .blk--check:hover {
    transform: translateY(-2px);
    border-color: var(--green-ink);
    box-shadow: 0 2px 4px oklch(0.19 0.0068 78 / 0.06),
                0 20px 40px -20px oklch(0.19 0.0068 78 / 0.36);
  }

  /* Штрих дорисовывается — тот же приём, что у знаков на главной */
  .try:hover .icn__leaf, .trm:hover .icn__leaf, .bcta:hover .icn__leaf,
  .note:hover .icn__leaf, .pc__item:hover .icn__leaf {
    animation: icn-draw 300ms var(--ease) both;
  }

  .ann__dot { transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
  .ann__dot:hover, .ann__dot.is-on { transform: translate(-50%, -50%) scale(1.12); }
}

/* Узкий экран: ничего не уезжает вбок, выходы за рамку обрезаются */
@media (max-width: 30rem) {
  .try, .ans, .vs__card, .ba__card, .trm, .stats, .pcs, .bcta,
  .asst__panel, .blk--self, .blk--fact, .blk--check { padding: var(--space-4); }
  .try__icon { margin-left: -0.9rem; }
  .vs__card--win::before { left: -6px; }
  .fact__value { font-size: 2rem; }
  .code__pre { font-size: 12px; }
}