/* Стиль сайта Рации: лендинг и правовые документы.
 *
 * Один файл на всё, а не копия в каждой странице: страниц пять, и когда
 * понадобится поправить отступ, править в пяти местах никто не станет —
 * они разъедутся.
 *
 * Тема следует за системой. Приложение тёмное, но документы читают днём
 * и с рабочего ноутбука, где всё светлое; навязывать свою — неуважение
 * к читателю и лишний повод закрыть вкладку. */

:root {
  color-scheme: light dark;
  --bg:      #ffffff;
  --fg:      #1a1d1e;
  --fg-dim:  #6f7679;
  --line:    #e6e6e6;
  --surface: #fafafa;
  --accent:  #c2540a;   /* на светлом оранжевый нужен темнее — иначе не читается */
  --mark:    #f76b15;   /* сам знак остаётся фирменным при любой теме */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0b0d0e;
    --fg:      #e8eaed;
    --fg-dim:  #8b9196;
    --line:    #23282b;
    --surface: #141719;
    --accent:  #f76b15;
  }
}

* { box-sizing: border-box }

body {
  margin: 0 auto; max-width: 720px; padding: 40px 24px 80px;
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--fg);
}
/* Лендинг шире документов: колонка в 720 пикселей хороша для чтения
   подряд, но карточки и разделы в ней жмутся. */
body.wide { max-width: 940px }

/* ── шапка ──────────────────────────────────────────────────────────────── */

.mark {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--line);
}
.mark svg { flex: none }
.mark b { font-size: 18px; font-weight: 600 }
.mark nav { margin-left: auto; display: flex; gap: 18px }
/* На лендинге вправо уходит nav, на документах — одинокая ссылка
   «На главную». Правило для прямого потомка ловит второй случай. */
.mark > a { margin-left: auto }
.mark a { font-size: 14px; text-decoration: none; color: var(--accent) }

/* ── текст документов ───────────────────────────────────────────────────── */

h1 { font-size: 28px; line-height: 1.25; margin: 0 0 8px }
.upd { color: var(--fg-dim); font-size: 14px; margin: 0 0 36px }
h2 { font-size: 19px; margin: 36px 0 12px }
/* Подзаголовки нужны только справке: там список бед, и каждую надо
   уметь найти глазами, не читая подряд. */
h3 { font-size: 16px; margin: 26px 0 8px }
p { margin: 0 0 14px }
ul, ol { margin: 0 0 14px; padding-left: 22px }
li { margin-bottom: 7px }

table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 15px }
th, td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top }
th { background: var(--surface); font-weight: 600 }

/* Врезка для того, что человек обязан заметить: главный смысл документа
 * и честные оговорки о том, чего продукт пока не умеет. */
.note {
  background: var(--surface); border-left: 3px solid var(--mark);
  padding: 14px 18px; margin: 0 0 18px; border-radius: 0 6px 6px 0;
}

a { color: var(--accent) }
code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace;
       background: var(--surface); padding: 1px 5px; border-radius: 4px }

footer {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--fg-dim); font-size: 14px;
}
footer a { margin-right: 14px }

/* ── лендинг ────────────────────────────────────────────────────────────── */

.hero { padding: 30px 0 8px }
.hero h1 { font-size: 42px; letter-spacing: -.8px; margin-bottom: 16px }
.hero .sub { font-size: 20px; color: var(--fg-dim); max-width: 620px; margin: 0 0 28px }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--mark); color: var(--mark);
}
.btn.solid { background: var(--mark); border-color: var(--mark); color: #fff }
.cta-note { font-size: 14px; color: var(--fg-dim); margin: 14px 0 0 }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 40px 0 }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px }
.card b { display: block; margin-bottom: 6px; font-size: 16px }
.card span { color: var(--fg-dim); font-size: 15px }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 14px }
.steps li {
  counter-increment: s; position: relative; padding-left: 42px; margin-bottom: 16px;
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--mark); color: var(--mark);
  font-size: 14px; font-weight: 600; display: flex;
  align-items: center; justify-content: center;
}
.steps b { display: block }
.steps span { color: var(--fg-dim); font-size: 15px }

/* ── скачивание ─────────────────────────────────────────────────────────── */

.dl { border: 1px solid var(--line); border-radius: 10px;
      padding: 20px 22px; margin: 0 0 16px }
.dl-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
        margin-bottom: 14px }
.dl-h b { font-size: 17px }
.dl-meta { color: var(--fg-dim); font-size: 14px }
.dl .cta { margin-bottom: 0 }
.dl-note { font-size: 14px; color: var(--fg-dim); margin: 14px 0 0 }
/* Отпечаток длинный и переносится посреди строки — иначе распирает карточку. */
.sha { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
       color: var(--fg-dim); margin: 8px 0 0; word-break: break-all }
.sha:empty { display: none }

/* Кнопка-макет: магазина ещё нет, и притворяться ссылкой она не должна —
   мёртвая ссылка хуже честной заглушки. */
.btn.ghost { border-color: var(--line); color: var(--fg-dim); cursor: default }

/* ── окно выбора платформы ──────────────────────────────────────────────── */

dialog.picker {
  border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px;
  background: var(--bg); color: var(--fg); max-width: 420px; width: calc(100% - 32px);
}
dialog.picker::backdrop { background: rgba(0,0,0,.55) }
dialog.picker h2 { margin: 0 0 4px; font-size: 20px }
dialog.picker p { color: var(--fg-dim); font-size: 15px }
.picker-list { display: grid; gap: 10px; margin: 18px 0 0 }
.picker-list a, .picker-list span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: var(--fg); font-weight: 600;
}
.picker-list a:hover { border-color: var(--mark) }
.picker-list em { font-style: normal; font-weight: 400; font-size: 14px; color: var(--fg-dim) }
.picker-list span { color: var(--fg-dim) }
.picker-close { margin-top: 18px; display: flex; justify-content: flex-end }
.picker-close button {
  background: none; border: 0; color: var(--accent);
  font: inherit; font-size: 15px; cursor: pointer; padding: 6px 2px;
}

.rows { border-top: 1px solid var(--line) }
.row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.row b { flex: none; width: 190px; font-weight: 600 }
.row span { color: var(--fg-dim); font-size: 15px }

@media (max-width: 640px) {
  /* Таблица «данные — куда идут — зачем» в три колонки на телефон не влезает
     и распирает всю страницу вправо: уезжает и текст, которого это никак
     не касается. Делаем прокручиваемой саму таблицу — читать её всё равно
     надо целиком, ломать на строки нельзя, смысл в сопоставлении колонок. */
  table { display: block; width: 100%; overflow-x: auto }
  table > tbody { display: table; width: 100%; min-width: 560px }

  .hero h1 { font-size: 32px }
  .hero .sub { font-size: 18px }
  .cards { grid-template-columns: 1fr }
  .row { display: block }
  .row b { width: auto; margin-bottom: 2px }
  /* На телефоне три ссылки не встают в строку рядом со знаком: строка
     распирает страницу, и вправо уезжает вообще весь текст. Переносим
     навигацию под знак. */
  .mark nav { width: 100%; margin-left: 0; gap: 16px }
}

/* ── Слой «Клубок» — лендинг и загрузки (дизайн оператора 2026-08) ─────────
 * Тёмный всегда: это витрина, и она обязана выглядеть как продукт.
 * Документы выше по файлу остаются системными — их читают днём.
 * Палитра 1:1 с приложением: ink-фоны + акцент #e8347c. */

body.kl {
  background: #08070a;
  color: #f2eff4;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  margin: 0;
  max-width: none;
  padding: 0;
}
.kl .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px }
.kl-mono {
  font-family: ui-monospace, 'IBM Plex Mono', monospace;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
}
.kl-head {
  position: sticky; top: 0; z-index: 20;
  background: #08070a; border-bottom: 1px solid rgba(255,255,255,.1);
}
.kl-head .wrap { height: 64px; display: flex; align-items: center; gap: 26px }
.kl-brand { display: flex; align-items: center; gap: 9px; color: inherit; border: 0 }
.kl-brand i { width: 7px; height: 7px; background: var(--kl-ac, #e8347c); display: block }
.kl-brand b { font-family: ui-monospace,'IBM Plex Mono',monospace; font-size: 13.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase }
.kl-head nav { margin-left: auto; display: flex; gap: 26px; align-items: center }
.kl-head nav a { color: #8b8593; border-bottom: 1px solid transparent; padding-bottom: 2px }
.kl-head nav a:hover, .kl-head nav a.on { color: #f2eff4; border-bottom-color: var(--kl-ac, #e8347c) }
.kl-cta {
  height: 36px; padding: 0 18px; background: var(--kl-ac, #e8347c);
  display: inline-flex; align-items: center; color: #fff !important;
  border: 0 !important; white-space: nowrap; cursor: pointer;
}
.kl-cta.big { height: 46px; padding: 0 24px; font-size: 14.5px; font-weight: 600;
  font-family: inherit; letter-spacing: normal; text-transform: none }
.kl-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; padding: 64px 0 0; align-items: start }
.kl-kicker { display: flex; gap: 18px; color: #8b8593 }
.kl-kicker .v { color: var(--kl-ac, #e8347c) }
.kl h1 { margin: 22px 0 0; font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -.04em; text-wrap: pretty; border: 0; padding: 0 }
.kl-sub { margin-top: 24px; font-size: 17px; line-height: 1.6; color: #a49dad; max-width: 520px; text-wrap: pretty }
.kl-actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap }
.kl-link { color: #f2eff4; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; font-weight: 500 }
.kl-specs { margin-top: 44px; border-top: 1px solid rgba(255,255,255,.1) }
.kl-row { display: flex; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07) }
.kl-row .k { width: 190px; flex: 0 0 190px; color: #7a7484; padding-top: 2px }
.kl-row .val { flex: 1; font-size: 14.5px; line-height: 1.5; color: #d5cfda }
.kl-sec { padding-top: 78px }
.kl-sec-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14) }
.kl-sec-head .num { color: var(--kl-ac, #e8347c) }
.kl-sec-head .t { color: #8b8593 }
.kl-sec-head .note { margin-left: auto; font-size: 15px; color: #8b8593; max-width: 420px; text-align: right;
  font-family: inherit; letter-spacing: normal; text-transform: none }
.kl-feats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px }
.kl-feat { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.08) }
.kl-feat .num { font-family: ui-monospace,'IBM Plex Mono',monospace; font-size: 12px; color: var(--kl-ac, #e8347c); padding-top: 4px }
.kl-feat b { display: block; font-size: 18.5px; font-weight: 600; letter-spacing: -.015em }
.kl-feat span { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: #a49dad; text-wrap: pretty }
.kl-grid2 { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; padding-top: 28px }
.kl-grid2 h3 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: pretty; border: 0 }
.kl-grid2 .lead { margin-top: 14px; font-size: 15px; line-height: 1.6; color: #a49dad }
.kl-tbl { border-top: 1px solid rgba(255,255,255,.08) }
.kl-tbl .kl-row .k { width: 210px; flex-basis: 210px; font-family: inherit; letter-spacing: normal; text-transform: none;
  font-size: 15px; font-weight: 600; color: #f2eff4 }
.kl details { border-bottom: 1px solid rgba(255,255,255,.08) }
.kl details summary { display: flex; align-items: baseline; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; letter-spacing: -.015em }
.kl details summary::-webkit-details-marker { display: none }
.kl details summary .num { font-family: ui-monospace,'IBM Plex Mono',monospace; font-size: 12px; color: #6f6979 }
.kl details[open] summary .num { color: var(--kl-ac, #e8347c) }
.kl details summary::after { content: '+'; margin-left: auto; font-family: ui-monospace,monospace; color: #8b8593 }
.kl details[open] summary::after { content: '−' }
.kl details p { margin: 0 0 20px 32px; font-size: 15px; line-height: 1.65; color: #a49dad; max-width: 720px }
.kl-band { margin: 64px 0 88px; display: flex; align-items: center; gap: 32px; padding: 34px 0;
  border-top: 2px solid var(--kl-ac, #e8347c); border-bottom: 1px solid rgba(255,255,255,.14); flex-wrap: wrap }
.kl-band .txt { flex: 1; min-width: 300px }
.kl-band b { font-size: 26px; font-weight: 600; letter-spacing: -.025em }
.kl-band span { display: block; margin-top: 8px; font-size: 15px; color: #8b8593 }
.kl-foot { border-top: 1px solid rgba(255,255,255,.12); margin-top: 0 }
.kl-foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 48px 0 28px }
.kl-foot .about { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: #7a7484; max-width: 290px }
.kl-foot .col b { display: block; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: ui-monospace,'IBM Plex Mono',monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6f6979; font-weight: 600 }
.kl-foot .col a { display: block; padding: 9px 0; font-size: 13.5px; font-weight: 500; color: #a49dad; border: 0 }
.kl-foot .col a:hover { color: #f2eff4 }
.kl-foot .fine { padding: 18px 0 40px; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: 28px; flex-wrap: wrap;
  font-family: ui-monospace,'IBM Plex Mono',monospace; font-size: 11px; letter-spacing: .06em; color: #5f5a69 }
.kl-dl-head { display: flex; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #7a7484;
  font-family: ui-monospace,'IBM Plex Mono',monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase }
.kl-dl { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.08); align-items: baseline }
.kl-dl .plat { width: 150px; flex: 0 0 150px; font-size: 18px; font-weight: 600; letter-spacing: -.015em }
.kl-dl .desc { flex: 1; font-size: 14.5px; line-height: 1.55; color: #a49dad }
.kl-dl .req { width: 110px; flex: 0 0 110px; font-size: 13px; color: #7a7484 }
.kl-dl .size { width: 90px; flex: 0 0 90px; text-align: right; font-family: ui-monospace,monospace; font-size: 12.5px; color: #8b8593 }
.kl-dl .act { width: 190px; flex: 0 0 190px; display: flex; justify-content: flex-end }
.kl-btn2 { height: 38px; padding: 0 16px; display: inline-flex; align-items: center; background: transparent;
  border: 1px solid rgba(255,255,255,.2) !important; font-size: 13.5px; font-weight: 600; color: #f2eff4 !important; white-space: nowrap }
.kl-btn2.primary { background: var(--kl-ac, #e8347c); border-color: var(--kl-ac, #e8347c) !important; color: #fff !important }
.kl-btn2.ghost { opacity: .55; pointer-events: none }
.kl-hash { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08) }
.kl-hash .f { font-family: ui-monospace,monospace; font-size: 13px; font-weight: 500 }
.kl-hash .h { margin-top: 6px; font-family: ui-monospace,monospace; font-size: 12px; line-height: 1.5; color: #6f6979; word-break: break-all }
@media (max-width: 900px) {
  .kl-hero, .kl-feats, .kl-grid2, .kl-foot .cols { grid-template-columns: 1fr }
  .kl h1 { font-size: 38px }
  .kl-head nav { display: none }
  .kl-dl { flex-wrap: wrap }
  .kl-dl .desc { flex-basis: 100% }
}
/* Наследие доковых правил: там ссылки с подчёркиванием, на витрине —
 * только там, где мы просим (kl-link через border). */
.kl a { text-decoration: none }
.kl a:not(.kl-link) { border-bottom: 0 }
.kl-head nav a.on, .kl-head nav a:hover { border-bottom: 1px solid var(--kl-ac, #e8347c) }
/* Акцент — параметр; дефолт лаконичный синий (решение оператора 2026-08-14,
 * розовый остаётся вариантом: поменять можно в одной строке ниже). */
body.kl { --kl-ac: #3f7ad6 }