/*
  button.css — две кнопки действия четырёх сайтов (атом ОБ-02d, пакет K2).

  Что это: пара кнопок в конце каждого сайта и там, где паспорт ставит действие (решение главного
  редактора п. 7 по слову владельца 26.09: «никаких заявок, можно вообще две кнопки»).
    главная  — сплошная индиго #7171FB «Зарегистрироваться», адрес-заглушка #register до выпуска;
    вторая   — контурная «Поговорить с основателем» с подписью «онбординг или консалтинг с командой TO.BE»,
               адрес-заглушка #talk с data-stub="talk" (канал называет владелец).
  Чем НЕ является: не форма заявки — формы, хранения и доставки заявок нет (атомы Х-02a…e сняты).
  «Покажите мою компанию.» — только заголовок над парой (.kit-actions-title), не надпись на кнопке.
  Разметка — button.html рядом; токены (tokens-dark.css / tokens-mono.css) и шрифт (fonts.css) подключены раньше.

  Решения:
  - Надпись главной тёмная (--on-indigo): белая на #7171FB даёт 3,85:1, тёмная — 5,14:1 (замер check-kit.mjs);
    решение п. 6 редактора, до ответа владельца на показе.
  - Вторая кнопка цвета текста главы (--text), а не индиго: индиго — только главное действие, а индиго-надпись
    на белой главе монохрома даёт 3,5:1 и не проходит 4,5:1. Рамка 2 px того же цвета — контраст к главе ≥ 3:1.
  - Подпись второй кнопки лежит под ней отдельной строкой и связана aria-describedby: кнопки в ряду одной высоты,
    а экранный диктор читает подпись вместе с кнопкой.
  - Высота 56 px на широком окне и 52 px на телефоне — больше порога 44 px с запасом на палец.
  - Кольцо фокуса — --focus главы (белое в чёрной, чёрное в белой), 3 px с отступом 3 px; только :focus-visible.
  - Наведение главной светлее базы, а не темнее: тёмная надпись на затемнённом индиго теряет контраст.
  - Движение только под prefers-reduced-motion: no-preference.
*/
.kit-actions { display: grid; gap: 20px; justify-items: start; }
.kit-actions-title {
  margin: 0;
  font-family: var(--font, system-ui, sans-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  font-stretch: 150%;
  line-height: 1.05;
  color: var(--text);
}
.kit-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}
.kit-talk { display: grid; gap: 8px; justify-items: start; }

.kit-cta,
.kit-cta-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 14px;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kit-cta {
  border: 0;
  background-color: var(--indigo);
  color: var(--on-indigo);
}
.kit-cta:hover { background-color: var(--indigo-hover); }

.kit-cta-2 {
  border: 2px solid var(--text);
  background-color: transparent;
  color: var(--text);
}
.kit-cta-2:hover { background-color: var(--surface-2); }

.kit-cta:focus,
.kit-cta-2:focus { outline: none; }
.kit-cta:focus-visible,
.kit-cta-2:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.kit-cta-note {
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  .kit-cta, .kit-cta-2 { transition: background-color .16s ease, transform .12s ease; }
  .kit-cta:active, .kit-cta-2:active { transform: translateY(1px); }
}

@media (max-width: 480px) {
  .kit-cta, .kit-cta-2 { min-height: 52px; padding: 0 22px; font-size: 17px; }
  .kit-actions-row, .kit-talk { width: 100%; }
  .kit-actions-row > .kit-cta, .kit-talk > .kit-cta-2 { width: 100%; }
}