/* ============================================================
   SupaLab — куки-баннер и юридические страницы

   Баннер сделан по инструкции по размещению юридических
   документов (пункт 3): две равнозначные кнопки на первом
   экране, контент под баннером остаётся доступен, выбор
   хранится в cookie supalab_cookie_consent 12 месяцев.

   Кнопка «Отклонить» намеренно того же размера и того же веса,
   что «Принять все». Баннер с одной кнопкой «Принять» считается
   некорректным: согласие должно быть свободным.
   ============================================================ */

.ck{position:fixed;left:24px;right:24px;bottom:24px;z-index:900;
  max-width:var(--container);margin:0 auto;
  background:var(--surface-page);border:1px solid var(--line-box);
  border-radius:var(--radius);box-shadow:var(--shadow-sheet);
  padding:22px 26px;display:none;gap:28px;align-items:center}
.ck[open],.ck.ck--on{display:flex}
.ck__text{margin:0;font-size:16px;line-height:1.5;color:var(--ink-3)}
.ck__text b{display:block;font-size:17px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:4px}
.ck__text a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.ck__acts{margin-left:auto;display:flex;gap:12px;flex:none}

/* Обе кнопки одного размера и одного веса — это требование, а не вкус */
.ck__btn{font-family:var(--font);font-size:15px;font-weight:700;
  padding:11px 20px;border-radius:var(--radius);cursor:pointer;
  white-space:nowrap;border:var(--border-strong) solid var(--ink);
  color:var(--ink);background:none;transition:all var(--dur-hover) var(--ease)}
.ck__btn--accept{box-shadow:4px 4px 0 var(--pink)}
.ck__btn--accept:hover{box-shadow:2px 2px 0 var(--pink);transform:translate(2px,2px)}
.ck__btn--decline:hover{background:var(--surface-paper)}
.ck__btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

@media (max-width:860px){
  .ck{left:12px;right:12px;bottom:12px;flex-direction:column;
    align-items:stretch;gap:18px;padding:20px}
  .ck__acts{margin-left:0}
  .ck__btn{flex:1}
}

/* ---- Ссылки и кнопка в подвале ---- */
.ft__cookies{font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:none}
.ft__cookies:hover{color:var(--ink-invert)}

/* ============================================================
   Юридическая страница

   Документы размещаются как HTML, а не как PDF и не картинкой:
   Роскомнадзор проверяет их автоматизированными средствами.
   ============================================================ */

.doc{max-width:820px;margin:0 auto;padding:56px 0 72px}
.doc__title{margin:0 0 10px;font-size:var(--t-section-size);
  font-weight:var(--t-section-weight);letter-spacing:var(--t-section-tracking);
  line-height:var(--t-section-leading)}
.doc__lead{margin:0 0 40px;font-size:var(--t-lead-size);color:var(--ink-3)}
.doc h2{margin:38px 0 14px;font-size:22px;font-weight:800;letter-spacing:-.03em}
.doc h3{margin:26px 0 10px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.doc p,.doc li{font-size:17px;line-height:1.65;color:var(--ink-body)}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:16px}
.doc th,.doc td{border:1px solid var(--line-box);padding:10px 14px;
  text-align:left;vertical-align:top}
.doc th{background:var(--surface-docs);font-weight:700}

/* Номер редакции и дата утверждения обязательны в конце каждой
   страницы: по ним доказывается, на какую редакцию давал
   согласие конкретный пользователь. */
.doc__rev{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-muted)}

/* Реквизиты оператора в шапке документа: те же данные, что в подвале,
   но внутри самого текста — они часть документа, а не оформление. */
.doc__req{margin:0 0 6px;font-size:16px;color:var(--ink-3)}
.doc__req:last-of-type{margin-bottom:22px}

/* Заголовок приложения — оно открывается по тому же адресу, что оферта,
   поэтому нужен явный разрыв, чтобы читатель видел границу документа. */
.doc__app{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);
  font-size:20px;text-transform:none}

/* Таблица шире экрана прокручивается внутри себя, а не тянет страницу */
.doc__tablewrap{overflow-x:auto;margin:0 0 20px}
.doc__tablewrap .doc__table{margin:0;min-width:520px}

/* Реквизиты: слева название поля, справа значение. Заголовок строки
   сделан через th — так строка читается как пара, а не как ячейка
   таблицы, и экранный диктор произносит её целиком. */
.doc__table th[scope="row"]{width:42%;font-weight:500;color:var(--ink-3);
  background:none;white-space:nowrap}
@media (max-width:560px){
  .doc__table th[scope="row"]{width:auto;white-space:normal}
}

/* Ссылка на файл под таблицей реквизитов. Размер рядом — человек
   должен понимать, что нажатие начнёт загрузку, а не откроет
   ещё одну страницу. */
.doc__dl{margin:28px 0 0;font-size:17px;color:var(--ink-muted)}
.doc__dl a{color:var(--link);text-decoration:underline;text-underline-offset:2px}