/* legal.css — длинный текст правовых страниц (/privacy, /terms).
 *
 * Едет ТОЛЬКО на эти две страницы: остальному сайту колонка на 68 знаков и
 * ритм заголовков документа не нужны, а на главной с её фильмом лишний файл
 * стилей — это лишний запрос в самый занятый момент загрузки.
 *
 * Колонка 68ch, а не вся ширина обёртки: правовой текст читают подряд, а не
 * сканируют глазами, и строка в 140 знаков на ноутбуке теряет начало следующей.
 */

.legal {
  max-width: 68ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

/* Дата редакции — первое, что ищут в таком документе, и единственная строка,
   которую мы позволяем себе выделить цветом акцента. */
.legal-upd {
  margin: 0 0 clamp(26px, 3vw, 40px);
  color: var(--acc-lit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Заголовок раздела отбивается СВЕРХУ втрое сильнее, чем снизу: так глаз
   видит, что он относится к тексту ПОД собой, а не над. */
.legal h2 {
  margin: clamp(34px, 4vw, 54px) 0 12px;
  color: var(--ink);
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.25;
}

.legal h3 {
  margin: 26px 0 8px;
  color: var(--ink);
  font-family: var(--disp);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.004em;
}

.legal p { margin: 0 0 14px }
.legal b { color: var(--ink); font-weight: 700 }

.legal ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

/* Маркер — своя точка цветом акцента вместо системной: она мельче, стоит на
   базовой линии первой строки и не уезжает при переносе. */
.legal li {
  position: relative;
  padding-left: 20px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc-lit);
}

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--acc-edge);
  transition: text-decoration-color .18s ease;
}
.legal a:hover { text-decoration-color: var(--acc-lit) }

/* Вводная плашка документа — «это оферта, принимаете целиком». Единственный
   выделенный фоном абзац: читатель обязан увидеть статус текста ДО текста. */
.legal-note {
  padding: 14px 16px;
  border-left: 3px solid var(--acc-lit);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--acc-lit) 10%, transparent);
  color: var(--ink);
}

/* Таблицы оснований и сроков хранения. Без рамок-сеток: строки делит одна
   тонкая линия, заголовок — чуть плотнее фон. На телефоне таблица прокручивается
   внутри себя, а не ломает страницу. */
.legal-tbl {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.45;
}
.legal-tbl th,
.legal-tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line, rgba(14,26,22,0.12));
  text-align: left;
  vertical-align: top;
}
.legal-tbl th {
  color: var(--ink);
  font-weight: 700;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
@media (max-width: 560px) {
  .legal-tbl { display: block; overflow-x: auto; }
}