/* Шрифты лежат у нас, а не тянутся с fonts.googleapis.com.
 * Причина не техническая: политика конфиденциальности сайта утверждает, что
 * сторонних счётчиков и скриптов нет, — а запрос за шрифтом раскрывал бы
 * Google IP каждого посетителя на каждой странице. Файлы скачаны из Google
 * Fonts (IBM Plex, лицензия OFL) и раздаются со своего домена.
 * Подмножества: latin, latin-ext, cyrillic, cyrillic-ext — по unicode-range
 * браузер грузит только нужное. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-serif-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Document Analyzer — единая система оформления.
 *
 * Почему не Tailwind с дефолтной палитрой: индиговый градиент, стеклянные
 * карточки, скруглённые углы и эмодзи вместо иконок опознаются с первого
 * взгляда как шаблонная страница. Продукт читает и разбирает документы —
 * оформление должно выглядеть как деловой документ, а не как витрина.
 *
 * Три решения, на которых держится всё остальное:
 *   1. Гарнитура IBM Plex — корпоративная по происхождению, с полной
 *      кириллицей в Sans, Serif и Mono. Serif работает заголовками (вес
 *      издания), Sans — интерфейсом, Mono — цифрами и метками проверок.
 *   2. Ни одного градиента, размытия и тени. Разделение — волосяная линия
 *      в 1px, как в типографской вёрстке.
 *   3. Один акцент. Цвет несёт смысл: акцент — действие, семантические —
 *      степень риска. Декоративного цвета нет вовсе.
 */

/* ---------------------------------------------------------------- токены */
:root {
  --paper:        #fbfaf8;   /* тёплая бумага, не стерильно-белый */
  --paper-raised: #ffffff;
  --ink:          #14181d;   /* почти чёрный с холодным уклоном */
  --ink-muted:    #5b636d;
  --ink-faint:    #8b939d;
  --rule:         #e0ddd7;   /* волосяная линия */
  --rule-strong:  #c8c4bc;

  --accent:       #1f4f73;   /* приглушённый чернильно-синий */
  --accent-ink:   #163a55;
  --accent-wash:  #eef3f7;

  --risk-high:    #8f2f2a;
  --risk-mid:     #8a6416;
  --risk-low:     #2f6b45;

  --measure: 68ch;           /* комфортная длина строки для чтения */
}

:root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #14161a;
    --paper-raised: #1a1d22;
    --ink:          #e8e6e1;
    --ink-muted:    #a3a8b0;
    --ink-faint:    #767c85;
    --rule:         #2b2f36;
    --rule-strong:  #3d434c;
    --accent:       #7fb0d4;
    --accent-ink:   #a8cbe6;
    --accent-wash:  #1b2732;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #14161a;
  --paper-raised: #1a1d22;
  --ink:          #e8e6e1;
  --ink-muted:    #a3a8b0;
  --ink-faint:    #767c85;
  --rule:         #2b2f36;
  --rule-strong:  #3d434c;
  --accent:       #7fb0d4;
  --accent-ink:   #a8cbe6;
  --accent-wash:  #1b2732;
  color-scheme: dark;
}

/* ------------------------------------------------------------- основание */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; max-width: var(--measure); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }

/* Цифры — моноширинные и табличные: в колонке сумм они обязаны стоять
 * друг под другом, иначе таблица баланса выглядит небрежно. */
.num, td.num, .amount {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- каркас */
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap-narrow { max-width: 30rem; margin: 0 auto; padding: 0 1.25rem; }

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-head .wrap, .site-head .wrap-wide {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .9rem; padding-bottom: .9rem;
}
.brand {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 600; font-size: 1.05rem; color: var(--ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.brand span { color: var(--ink-faint); font-weight: 400; }

main { padding: 2.5rem 0 4rem; }

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0;
  font-size: .85rem;
  color: var(--ink-muted);
}
.site-foot a { color: var(--ink-muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* -------------------------------------------------------------- панели */
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;          /* почти прямой угол: документ, не карточка */
  padding: 1.5rem;
}
.panel + .panel { margin-top: 1rem; }

.panel-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .75rem;
}

.lede { color: var(--ink-muted); max-width: var(--measure); }

/* --------------------------------------------------------------- формы */
label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .35rem; }

input[type="email"], input[type="text"] {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Поле вопроса о разборе. Рамка и отступы те же, что у текстовых полей: иначе
 * оно выглядит инородным элементом на той же странице. Растягивать разрешено
 * только по высоте — поле, растянутое вбок, ломает вёрстку всей страницы. */
textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  resize: vertical;
}
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Ответ модели: обычный текст абзацами. Перенос внутри «слова» обязателен —
 * в ответе попадаются длинные ссылки и номера, и без него страница на
 * телефоне уезжает вбок. */
.answer { max-width: var(--measure); overflow-wrap: anywhere; }
.answer p { margin: 0 0 .75rem; }
.answer p:last-child { margin-bottom: 0; }

input.code-field {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.5rem;
  letter-spacing: .4em;
  text-align: center;
}

.btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  font: inherit; font-weight: 500;
  color: var(--paper-raised);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  /* Центрирование нужно ссылке-кнопке: <button> центрует текст сам, а <a> нет,
   * и на широкой кнопке лендинга надпись прижималась бы влево. */
  text-align: center;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper-raised); }
.btn-wide { width: 100%; }
.btn-quiet {
  background: transparent; color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-quiet:hover { background: var(--accent-wash); color: var(--ink); border-color: var(--accent); }

.form-note { font-size: .85rem; color: var(--ink-muted); margin-top: .75rem; }

/* Кнопка, выглядящая ссылкой: «отправить код ещё раз» — это POST-форма, а не
 * переход, поэтому по разметке кнопка, а по виду ссылка. */
.btn-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.btn-link:hover { color: var(--accent-ink); }

.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.inline-actions form { display: inline; }

/* --------------------------------------------------------------- метки */
.mark {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.mark-high { color: var(--risk-high); }
.mark-mid  { color: var(--risk-mid); }
.mark-low  { color: var(--risk-low); }

.notice {
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  padding: .8rem 1rem;
  font-size: .9rem;
  color: var(--ink);
}
.notice-error { border-left-color: var(--risk-high); background: transparent; color: var(--risk-high); }

/* -------------------------------------------------------------- таблица */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left; font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule-strong);
  padding: .5rem .6rem;
}
td { padding: .65rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: none; }

.stat { display: flex; align-items: baseline; gap: .6rem; }
.stat .amount { font-size: 1.9rem; font-weight: 500; line-height: 1; }
.stat .unit { color: var(--ink-muted); font-size: .9rem; }

.right { text-align: right; }
.center { text-align: center; }

/* Таблица на телефоне.
 *
 * Пять колонок (дата, документ, разбор, стоимость, файлы) на 375 px не
 * помещаются никак: замер показывал 560 px при экране 375 — 185 пикселей
 * уезжали за край. Горизонтальная прокрутка внутри страницы — плохой ответ
 * для основного содержимого: половина таблицы просто не видна, и человек
 * не знает, что она там есть.
 *
 * Поэтому на узких экранах строка перестаёт быть строкой и становится
 * блоком, а заголовки колонок переезжают к самим значениям подписями из
 * `data-label`. Ячейка без `data-label` подписи не получает — так блок
 * действий (ссылки на файлы) не обрастает лишней надписью. */
@media (max-width: 640px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }               /* шапка переехала в подписи ячеек */

  tr {
    border-bottom: 1px solid var(--rule-strong);
    padding: .85rem 0;
  }
  tr:last-child { border-bottom: none; }

  td {
    border: none;
    padding: .15rem 0;
    text-align: left;                    /* правое выравнивание сумм здесь ни к чему */
  }
  td.right { text-align: left; }

  td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* Ссылки на файлы столбиком не нужны — они короткие и лучше читаются
   * в строку с переносом. */
  .inline-actions { gap: .9rem; }
}

@media (max-width: 640px) {
  .site-head .wrap { flex-wrap: wrap; }
  main { padding: 1.75rem 0 3rem; }
  .panel { padding: 1.15rem; }
}

/* ================================================================== */
/* ПУБЛИЧНЫЕ СТРАНИЦЫ (лендинг, оферта, политика)                     */
/*                                                                    */
/* Кабинету этих примитивов не нужно — это ритм секций, первый экран,  */
/* перечни, тарифы и аккордеон. Файл один намеренно: две копии стилей  */
/* расходятся на второй правке, и сайт с кабинетом перестают выглядеть */
/* одним продуктом. Правила те же: линия вместо тени, один акцент,     */
/* почти прямой угол, цвет только со смыслом.                         */
/* ================================================================== */

/* Единственная утилита-исключение: site.js прячет ею панели вкладок,  */
/* меню и модальное окно. Держать её именем `hidden` дешевле, чем      */
/* переписывать пять мест в скрипте. */
.hidden { display: none !important; }

.wrap-wide { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* ------------------------------------------------------- шапка сайта */
.site-head-sticky { position: sticky; top: 0; z-index: 40; }

.nav-main { display: flex; align-items: center; gap: 1.35rem; font-size: .9rem; }
.nav-main a { color: var(--ink-muted); text-decoration: none; }
.nav-main a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.head-tools { display: flex; align-items: center; gap: .5rem; }

/* Квадратная кнопка-иконка (тема, гамбургер): та же рамка и угол, что у
 * полей ввода, — чтобы органы управления читались одним семейством. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  padding: 0; background: transparent; cursor: pointer;
  color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }

/* Переключатель языка — не кнопка, а указатель текущего состояния,
 * поэтому моноширинный и без заливки. */
.lang-switch {
  display: inline-flex; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .08em;
  border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden;
}
.lang-switch a, .lang-switch span { padding: .35rem .5rem; text-decoration: none; }
.lang-switch a { color: var(--ink-faint); }
.lang-switch a:hover { color: var(--accent); background: var(--accent-wash); }
.lang-switch .is-current { color: var(--paper-raised); background: var(--accent); }

/* ------------------------------------------------------- ритм секций */
.section { padding: 3.75rem 0; border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: none; }

.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); margin-bottom: .6rem; }
.section-head .lede { margin-bottom: 0; }

/* Надзаголовок: моноширинный, как метка на полях документа. */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .5rem; max-width: none;
}

/* ---------------------------------------------------- перечни-сетки */
/* Ячейки разделены волосяной линией: зазор в 1px по цвету линии вместо
 * рамки у каждой карточки — так перечень читается таблицей, а не
 * витриной плиток. */
.rule-grid {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.rule-grid > * { background: var(--paper-raised); padding: 1.35rem; margin: 0; }
.rule-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rule-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rule-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.item-title {
  font-weight: 600; color: var(--ink);
  margin: 0 0 .4rem; max-width: none;
}
.item-text { color: var(--ink-muted); font-size: .92rem; margin: 0; max-width: none; }
.item-text + .item-text { margin-top: .5rem; }
ul.item-text { padding-left: 1.15rem; }
ul.item-text li { margin-bottom: .45rem; }
ul.item-text li:last-child { margin-bottom: 0; }

/* Ячейка-ссылка (примеры отчётов): подсветка фоном, стрелка вместо
 * подчёркивания — подчёркивать блок целиком нечитаемо. */
a.item-link { display: block; text-decoration: none; color: inherit; }
a.item-link:hover { background: var(--accent-wash); color: inherit; }
a.item-link .item-more { color: var(--accent); font-size: .9rem; margin: .6rem 0 0; }

/* ------------------------------------------------------- первый экран */
.hero { padding: 3rem 0 3.5rem; }
.hero-grid {
  display: grid; gap: 2.75rem;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: start;
}
.hero h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.1rem); margin-bottom: 1rem; }
.hero-lede { font-size: 1.08rem; color: var(--ink-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.hero-points {
  list-style: none; margin: 2rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: .9rem;
}
.hero-points > li { display: grid; gap: .1rem; }
.hero-points b { font-weight: 600; font-size: .95rem; }
.hero-points span { color: var(--ink-faint); font-size: .85rem; }

/* --------------------------------------------------- фрагмент отчёта */
/* Первый экран показывает то, что реально приходит клиенту: сверенные
 * цитаты, пересчитанные проверки, риск со степенью. Схемы «нейро-слоёв»
 * здесь быть не может — сервис продаёт себя тем, что ничего не выдумывает. */
.report-sample {
  margin: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
}
.report-sample-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem .95rem;
  border-bottom: 1px solid var(--rule);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.report-lines { list-style: none; margin: 0; padding: 0; }
.report-lines > li {
  padding: .95rem;
  border-bottom: 1px solid var(--rule);
  display: grid; gap: .35rem;
}
.report-lines > li:last-child { border-bottom: none; }
.report-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.report-val { font-size: .95rem; color: var(--ink); }
.report-val .num { font-weight: 500; }
/* Сводка рисков: три метки степеней и вердикт одной строкой — так эта
 * строка и приходит в отчёте по договору. */
.report-marks { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.report-note {
  padding: .8rem .95rem;
  border-top: 1px solid var(--rule);
  font-size: .82rem; color: var(--ink-faint);
  margin: 0; max-width: none;
}

/* --------------------------------------------------------------- шаги */
/* Список нумерованный по смыслу (порядок шагов важен), поэтому <ol>, а
 * собственный отступ списка снят — сетку он бы сломал. */
.steps {
  display: grid; gap: 1px; margin: 0; padding: 0;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: 3px; overflow: hidden;
}
.steps > li { background: var(--paper-raised); padding: 1.35rem; list-style: none; }
.step-num {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem; letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: .5rem;
}

/* ------------------------------------------------------------ вкладки */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.tabs > button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .7rem 1.1rem; margin-bottom: -1px;
  font: inherit; font-size: .95rem; color: var(--ink-muted);
  white-space: nowrap; cursor: pointer;
}
.tabs > button:first-child { padding-left: 0; }
.tabs > button:hover { color: var(--ink); }
/* Активная вкладка определяется aria-selected — тем же атрибутом, что
 * читает скринридер. Отдельного класса состояния нет намеренно: два
 * источника истины рано или поздно разъезжаются. */
.tabs > button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.tab-panel { padding-top: 1.75rem; }

/* --------------------------------------------------- выпадающий список */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; left: 0; top: calc(100% + .4rem); z-index: 50;
  min-width: 17rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: .35rem;
}
.dropdown-menu a {
  display: block; padding: .55rem .65rem;
  color: var(--ink); text-decoration: none; font-size: .9rem;
}
.dropdown-menu a:hover { background: var(--accent-wash); color: var(--accent-ink); }

/* Вывод отчёта со степенью: цвет здесь несёт тот же смысл, что и метки
 * рисков, — иначе цветной абзац был бы украшением. */
.callout-risk { border-left: 2px solid var(--risk-high); padding-left: .75rem; color: var(--risk-high); }
.callout-ok   { border-left: 2px solid var(--risk-low);  padding-left: .75rem; color: var(--risk-low); }

/* -------------------------------------------------------- цитата-врез */
.quote-block {
  border-left: 2px solid var(--rule-strong);
  padding: .2rem 0 .2rem 1rem;
  margin: 0 0 1rem;
  color: var(--ink-muted);
  font-family: 'IBM Plex Serif', Georgia, serif;
}

/* ------------------------------------------------------------ тарифы */
.table-price td:last-child, .table-price th:last-child { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------- аккордеон */
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.05rem 0;
  background: none; border: 0;
  font: inherit; font-weight: 500; color: var(--ink);
  text-align: left; cursor: pointer;
}
.faq-q:hover { color: var(--accent); }
.faq-q svg { flex: 0 0 auto; width: 1rem; height: 1rem; transition: transform .2s ease; }
[data-accordion-panel] { overflow: hidden; transition: max-height .25s ease, opacity .25s ease; }
.faq-a { color: var(--ink-muted); font-size: .95rem; padding-bottom: 1.05rem; margin: 0; }

/* ------------------------------------------------------- мобильное меню */
.mobile-menu {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: min(20rem, 84vw); height: 100%;
  background: var(--paper-raised);
  border-left: 1px solid var(--rule-strong);
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--rule);
}
.mobile-menu-links { display: grid; gap: .25rem; padding: 1rem 1.25rem; }
.mobile-menu-links a { color: var(--ink); text-decoration: none; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.mobile-menu-links a:hover { color: var(--accent); }
.mobile-menu-links .btn { margin-top: 1rem; border-bottom: none; }
/* Затемнение — не тень, а модальная подложка: без неё клик мимо меню
 * попадает по странице под ним. */
.mobile-menu-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(10, 12, 15, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.mobile-menu-overlay.is-open { opacity: 1; pointer-events: auto; }
body.no-scroll { overflow: hidden; }

/* ------------------------------------------------------ skip-link и фокус */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1.1rem;
  background: var(--accent); color: var(--paper-raised);
  text-decoration: none; border-radius: 2px;
  transition: top .15s ease;
}
.skip-link:focus { top: .75rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------ появление секций */
body.js-enabled .reveal { opacity: 0; transform: translateY(12px); }
body.js-enabled .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s ease;
}

/* ------------------------------------------------- юридические страницы */
/* Оферта и политика должны читаться деловым документом: одна колонка,
 * нумерация внутри текста, никаких карточек. */
/* Своя ширина обёртки, а не узкая колонка внутри широкой: иначе шапка и
 * подвал уезжают правее текста и страница выглядит съехавшей. */
.wrap-doc { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.site-head .wrap-doc {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .9rem; padding-bottom: .9rem;
}
.doc-body { max-width: none; }
.doc-body h2 { font-size: 1.15rem; margin: 2.4rem 0 .7rem; }
.doc-body p, .doc-body li { max-width: none; color: var(--ink-muted); }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body ul, .doc-body ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.doc-body li { margin-bottom: .4rem; }
.doc-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem; color: var(--ink-faint);
  margin-bottom: 2rem;
}
/* Незаполненные реквизиты: жёлтая заливка-маркер была бы декоративным
 * цветом, а это предупреждение — поэтому янтарный текст с пунктиром. */
.req-placeholder {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--risk-mid);
  border-bottom: 1px dashed currentColor;
}

/* --------------------------------------------------------------- узко */
/* Единственная пара утилит показа: на узком экране навигация уезжает в
 * меню, на широком кнопка меню не нужна. */
@media (max-width: 980px) { .wide-only { display: none !important; } }
@media (min-width: 981px) { .narrow-only { display: none !important; } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .rule-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rule-grid-3, .steps { grid-template-columns: 1fr; }
  .section { padding: 2.5rem 0; }
  .hero { padding: 2rem 0 2.5rem; }
}
@media (max-width: 560px) {
  .rule-grid-2, .rule-grid-4 { grid-template-columns: 1fr; }
  .rule-grid > *, .steps > li { padding: 1.1rem; }
  .hero-actions .btn { width: 100%; }
}
/* Название в шапке на узком экране переносилось на вторую строку («Document
 * Analyzer» / «AI») и читалось как вёрстка, съехавшая по ошибке. Кегль чуть
 * меньше — и строка целая рядом с тремя органами управления. */
@media (max-width: 480px) {
  .site-head .brand { font-size: .92rem; white-space: nowrap; }
  .site-head .wrap, .site-head .wrap-wide { gap: .5rem; padding-left: 1rem; padding-right: 1rem; }
  .head-tools { gap: .35rem; }
}

/* Анимация — украшение: при системном запрете движения гаснет вся. */
@media (prefers-reduced-motion: reduce) {
  body.js-enabled .reveal,
  body.js-enabled .reveal.is-visible {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .mobile-menu, .mobile-menu-overlay, [data-accordion-panel], .faq-q svg, .skip-link {
    transition: none !important;
  }
}