/* ═══════════════════════════════════════════════════════════════════════════
   Оформление юридических страниц (соглашение и политика).

   Те же токены, что на главной, но верстается как документ: узкая колонка,
   крупный межстрочный интервал, разделы через волосяную линию.

   ЗАЧЕМ ЗДЕСЬ ШАПКА И ПОДВАЛ. Разметка этих страниц старше главной и называет
   их `.topbar` / `.foot__logo`. Переписывать два длинных документа ради
   переименования классов означало бы трогать текст оферты, а его правит не
   разработчик. Поэтому старые имена описаны здесь поверх новых токенов.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Текст документа светлее второстепенного: оферту читают целиком, и на
   приглушённом тоне это утомляет уже к третьему разделу. */
body.legal { --doc-text: #C6C6CE; }

/* ───────────────────────── шапка документа ───────────────────────── */

/* Шапка во всю ширину окна, содержимое внутри выровнено по колонке документа.
   Через padding, а не через 100vw у подложки: 100vw шире окна на полосу
   прокрутки и даёт горизонтальный скролл на всю страницу. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  height: 64px;
  padding-inline: max(var(--pad), calc((100% - var(--shell)) / 2 + var(--pad)));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar__logo, .foot__logo { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.topbar__suffix { color: var(--blue-2); margin-left: 5px; }
.topbar__cta { margin-left: auto; padding: 9px 16px; font-size: 13.5px; }

/* ───────────────────────── тело документа ───────────────────────── */

.doc {
  width: min(760px, 100% - clamp(40px, 9vw, 96px));
  margin: 0 auto;
  padding-block: clamp(48px, 8vh, 88px) clamp(56px, 9vh, 100px);
}
.doc__title { font-size: clamp(30px, 5vw, 50px); letter-spacing: -.035em; line-height: 1.04; margin: 0 0 14px; }
.doc__meta {
  margin: 0 0 clamp(32px, 6vh, 56px);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}

.doc section { padding-block: clamp(26px, 4vh, 36px); border-top: 1px solid var(--line); }
.doc section:first-of-type { border-top: 0; padding-top: 0; }

.doc h2 { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.22; margin: 0 0 16px; }
.doc p { margin: 0 0 14px; color: var(--doc-text); font-size: 16px; line-height: 1.68; max-width: 64ch; }
.doc p:last-child { margin-bottom: 0; }
.doc b { color: var(--fg); font-weight: 600; }
.doc a { color: var(--blue-2); border-bottom: 1px solid rgba(127, 168, 255, .35); }
.doc a:hover { border-bottom-color: var(--blue-2); }

.doc ul { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.doc li { position: relative; padding-left: 20px; color: var(--doc-text); font-size: 16px; line-height: 1.62; max-width: 64ch; }
.doc li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--line-2); }

@media (max-width: 560px) {
  .doc p, .doc li { font-size: 15px; }
  .topbar__cta { padding: 8px 13px; }
}