/* Общие стили юридических страниц: оферта, политики, согласие.
   Одна таблица стилей на пять документов — иначе каждая правка вёрстки
   размножается в пять копий, и они расходятся. Страницы собирает
   _legal-build.py.

   Вид — как у тёмных блоков главной: шапка-островок на тёмном стекле,
   документ на тёмной скруглённой карточке, белые тонкие заголовки, синие
   акценты, подвал плашкой. Разметка документов при этом прежняя: всё
   решают стили. */

:root { --bg: #07080a; --card: #101217; --ink: #ffffff; --text: #c9ccd2; --muted: #9699a0; --faint: #6f747d; --line: rgba(255,255,255,.08); --blue: #004eff; --link: #b9c0ff; --ease: cubic-bezier(.22, 1, .36, 1); }
html, body { margin: 0; padding: 0; background: var(--bg); }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--text); font-family: 'Onest', Helvetica, Arial, sans-serif; font-size: 16.5px; line-height: 1.7; }
* { box-sizing: border-box; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }

/* ── Шапка-островок ───────────────────────────────────────────────────────
   Та же капсула, что на главной: по центру, на матовом стекле, логотип и две
   кнопки. Знак в логотипе живой — его рисует bmc-mark.js поверх картинки,
   у картинки остаётся надпись. */
header { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); width: max-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 6px 6px 6px 20px; border-radius: 999px; }
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(40,42,48,.78); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.logo { display: block; flex-shrink: 0; text-decoration: none; }
.logo .hdr-ink { position: relative; display: block; height: 22px; aspect-ratio: 1394 / 174; }
.logo .hdr-still { display: block; width: 100%; height: 100%; filter: invert(1); }
.logo .hdr-still[hidden] { visibility: hidden; }
.hdr-mark { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: #ffffff; will-change: transform; }
.hdr-ink.has-mark .hdr-still { clip-path: inset(-10% -10% -10% 27.3%); }
.bar-nav { display: flex; align-items: center; gap: 6px; }
.bar-link, .bar-cta { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px; font-size: 15px; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.bar-link { color: var(--ink); box-shadow: inset 0 0 0 1.25px currentColor; }
.bar-link:hover { background: #ffffff; color: #131313; box-shadow: inset 0 0 0 1.25px #ffffff; }
.bar-cta { background: var(--blue); color: #ffffff; }
.bar-cta:hover { background: #0042d9; color: #ffffff; }
@media (max-width: 560px) {
  .bar { padding-left: 14px; gap: 10px; }
  .bar-link { display: none; }
  .bar-cta { padding: 11px 16px; font-size: 14px; }
  .logo .hdr-ink { height: 18px; }
}

/* ── Документ ─────────────────────────────────────────────────────────────
   Карточка по центру, до 1200 px. */
main { width: min(1200px, calc(100% - 2 * clamp(12px, 3vw, 40px))); margin: calc(14px + 58px + clamp(20px, 3vw, 40px)) auto clamp(16px, 2.4vw, 28px); padding: clamp(28px, 5.5vw, 72px) clamp(20px, 6vw, 84px) clamp(36px, 6vw, 80px); border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
/* Метка документа — первой строкой заголовка, тем же кеглем, но тоном
   приглушённым: не спорит с самим названием. */
.kicker { display: block; margin: 0; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 300; color: #4b4f57; }
h1 { margin: 0 0 16px; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 300; color: var(--ink); text-wrap: balance; }
.lead { margin: 0 0 12px; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.updated { margin: 0; font-size: 13px; letter-spacing: .02em; color: var(--faint); }

/* Переключатель между документами: они ссылаются друг на друга по тексту,
   и без него читатель политики не найдёт, где лежит согласие. */
.docs { margin: clamp(28px, 3.6vw, 40px) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: 14px; }
.docs-label { flex-basis: 100%; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.25; letter-spacing: -0.025em; font-weight: 300; color: #4b4f57; }
.docs-links { display: flex; flex-wrap: wrap; gap: 8px; }
.docs a { display: inline-block; padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text); text-decoration: none; line-height: 1.3; transition: background-color .2s var(--ease), color .2s var(--ease); }
.docs a:hover { background: rgba(255,255,255,.12); color: #ffffff; }
.docs a[aria-current="page"] { background: #ffffff; color: #131313; }

/* Содержание: длинный документ без него не листается */
.toc { margin: clamp(26px, 3.6vw, 38px) 0 clamp(30px, 4vw, 48px); padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 34px); border-radius: 22px; background: rgba(255,255,255,.04); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 10px; padding-left: 38px; position: relative; font-size: 15.5px; line-height: 1.5; }
.toc li:last-child { margin-bottom: 0; }
.toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: .15em; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.toc a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.toc a:hover { color: var(--link); }

h2 { margin: clamp(44px, 5.5vw, 64px) 0 18px; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.25; letter-spacing: -0.025em; font-weight: 500; color: var(--ink); text-wrap: balance; }
main > p { margin: 0 0 12px; text-wrap: pretty; }

/* Висячий отступ: номер пункта стоит в поле, текст выровнен по одной линии */
.cl { padding-left: 56px; position: relative; }
.cl .n { position: absolute; left: 0; top: .2em; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .cl { padding-left: 0; }
  .cl .n { position: static; margin-right: 8px; }
}

/* Перечни внутри пункта — с тем же отступом, что и текст пункта,
   иначе список выглядит как новый абзац, а не как продолжение. */
.dash { margin: 0 0 14px; padding-left: 56px; list-style: none; }
.dash li { position: relative; margin: 0 0 8px; padding-left: 20px; text-wrap: pretty; }
.dash li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }
@media (max-width: 560px) { .dash { padding-left: 0; } }

.req { margin: 0; display: grid; grid-template-columns: minmax(190px, auto) 1fr; gap: 1px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.req dt, .req dd { margin: 0; padding: 14px 20px; background: var(--card); }
.req dt { color: var(--muted); }
.req dd { color: var(--ink); overflow-wrap: anywhere; }
.req + p { margin-top: 18px; }
@media (max-width: 560px) {
  .req { grid-template-columns: 1fr; }
  .req dt { padding-bottom: 2px; }
  .req dd { padding-top: 2px; }
}

.back { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(44px, 6vw, 64px); padding: 15px 26px; border-radius: 999px; background: #ffffff; color: #131313; font-size: 16px; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.back:hover { background: var(--blue); color: #ffffff; }

/* ── Подвал — скруглённая плашка, как на главной; страница и так тёмная,
   поэтому плашка тоном карточки. ────────────────────────────────────────── */
footer { margin: 0 clamp(12px, 3vw, 40px) clamp(12px, 3vw, 40px); border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.foot { max-width: 1848px; margin: 0 auto; padding: 30px clamp(22px, 4vw, 40px) 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 15px; line-height: 1.6; color: #8b8f98; }
.foot a { color: #8b8f98; text-decoration: none; transition: color .2s var(--ease); }
.foot-side > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.foot a:hover { color: #ffffff; }
.foot-side { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; }

/* Уведомление о cookie — та же плашка, что на главной */
.ck-bar { display: none; position: fixed; z-index: 90; font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; left: 50%; bottom: 0; transform: translateX(-50%); width: min(680px, calc(100vw - 32px)); margin-bottom: 16px; padding: 16px 18px; align-items: center; gap: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: rgba(11,13,17,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 22px 60px rgba(0,0,0,.5); }
html.ck-show .ck-bar { display: flex; }
.ck-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.ck-btn { flex-shrink: 0; padding: 12px 24px; border: 0; border-radius: 999px; background: #f5f6f8; color: #131313; font-family: inherit; font-size: 14px; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.ck-btn:hover { background: var(--blue); color: #ffffff; }
@media (max-width: 560px) {
  .ck-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .ck-btn { width: 100%; }
}

/* ── Появление — тем же ходом, что первый экран главной ───────────────────
   Капсула опускается сверху, карточка документа поднимается, подвал
   проявляется. Только прозрачность и сдвиг. */
@media (prefers-reduced-motion: no-preference) {
  header { animation: lg-drop 1s cubic-bezier(.16, 1, .3, 1) .05s backwards; }
  .logo { animation: lg-rise .7s var(--ease) .3s backwards; }
  .bar-nav { animation: lg-rise .7s var(--ease) .42s backwards; }
  main { animation: lg-card 1.1s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
  main > .kicker, main > h1, main > .lead, main > .updated, main > .docs { animation: lg-rise .8s var(--ease) backwards; }
  main > .kicker  { animation-delay: .45s; }
  main > h1       { animation-delay: .52s; }
  main > .lead    { animation-delay: .6s; }
  main > .updated { animation-delay: .66s; }
  main > .docs    { animation-delay: .72s; }
  footer { animation: lg-fade 1s var(--ease) .6s backwards; }
}
@keyframes lg-drop { from { opacity: 0; transform: translateY(-26px) scale(.94); } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes lg-card { from { opacity: 0; transform: translateY(48px) scale(.98); } }
@keyframes lg-fade { from { opacity: 0; } }