/* ═══════════════════════════════════════════════════════════════
   Юридические документы — та же ночная диспетчерская, что и лендинг.
   Атмосфера живёт в шапке, панелях и акцентах; сам текст остаётся
   спокойным и читаемым — в юридическом документе ничего не должно
   светиться и мигать под глазами.
   ═══════════════════════════════════════════════════════════════ */

.legal { position: relative; background: var(--bg); overflow: hidden; }

/* Свечение горизонта за шапкой — как в герое главной */
.legal::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 620px;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 50% 0%, rgba(198,244,50,0.13), transparent 68%);
}
/* Уходящая в перспективу сетка — потолок диспетчерской над шапкой */
.legal::after {
  content: ''; position: absolute; top: 0; left: 50%; z-index: 0;
  width: 300%; height: 300px; transform: translateX(-50%) perspective(300px) rotateX(-62deg);
  transform-origin: top center; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--lime-12) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(180deg, var(--lime-12) 0 1px, transparent 1px 76px);
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 78%);
  mask-image: linear-gradient(0deg, transparent, #000 78%);
}

/* Верхняя панель переиспользует .nav / .nav-inner с главной; кастомна только кнопка «назад» */
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fn); font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t2); text-decoration: none;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: color .2s, border-color .2s, box-shadow .25s;
}
.legal-back:hover { color: var(--lime); border-color: var(--lime-28); box-shadow: 0 0 24px rgba(198,244,50,0.12); }

/* Раскладка */
.legal-wrap {
  position: relative; z-index: 1;
  max-width: 920px; margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad) clamp(60px, 8vw, 110px);
}

/* ─── Шапка документа ─── */
.legal-head { position: relative; margin-bottom: 40px; padding-bottom: 36px; }
.legal-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--lime-50), var(--lime-12) 45%, transparent 85%);
  box-shadow: 0 0 20px rgba(198,244,50,0.28);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fm); font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lime);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--lime); box-shadow: 0 0 10px var(--lime-50);
}
.legal-title {
  font-size: clamp(30px, 4.6vw, 56px); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.04em; line-height: 1.0; margin: 18px 0 16px;
  text-shadow: 0 0 70px rgba(198,244,50,0.18);
}
.legal-sub { font-size: clamp(15px, 1.4vw, 18px); color: var(--t2); line-height: 1.6; max-width: 62ch; }
.legal-meta {
  margin-top: 20px; font-family: var(--fm); font-size: 11px;
  color: var(--t3); letter-spacing: 0.1em; text-transform: uppercase;
}
.legal-meta b { color: var(--lime); font-weight: 700; }

/* ─── Переключатель документов ─── */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 4px; }
.legal-nav a {
  font-size: 13px; font-weight: 600; color: var(--t2);
  text-decoration: none; padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--s2);
  transition: color .2s, border-color .2s, background .2s, box-shadow .25s;
}
.legal-nav a:hover { color: var(--t1); border-color: var(--lime-28); background: var(--s3); }
.legal-nav a[aria-current="page"] {
  color: var(--lime); border-color: var(--lime-28); background: var(--lime-12);
  box-shadow: 0 0 26px rgba(198,244,50,0.15);
}

/* ─── Оглавление: панель прибора ─── */
.legal-toc {
  margin: 36px 0; padding: 28px 30px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 70% 130% at 0% 0%, rgba(198,244,50,0.08), transparent 62%),
    var(--s1);
}
.legal-toc h2 {
  font-family: var(--fm); font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lime);
  margin-bottom: 18px;
}
.legal-toc h2::before { content: '// '; color: var(--t3); }
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 10px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 15px; font-weight: 500; color: var(--t1); text-decoration: none; line-height: 1.4;
  transition: color .2s;
}
.legal-toc a:hover { color: var(--lime); }
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--fm); font-size: 12px; color: var(--lime);
  min-width: 22px; font-weight: 700;
}

/* ─── Тело документа: графитовая панель, а не голая простыня ─── */
.legal-body {
  padding: clamp(26px, 3.4vw, 48px) clamp(22px, 3vw, 44px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--s1);
  font-size: 16px; line-height: 1.72; color: rgba(255,255,255,0.78);
}
.legal-body h2 {
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; color: var(--t1);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.35;
  margin: 48px 0 20px; padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; gap: 14px; align-items: center;
  scroll-margin-top: 90px;
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Номер секции — лаймовый чип, как индексы на главной */
.legal-body h2 .sec-n {
  flex-shrink: 0;
  font-family: var(--fm); font-size: 12px; font-weight: 700; color: var(--lime);
  background: var(--lime-12); border: 1px solid var(--lime-28);
  border-radius: var(--r-sm); padding: 5px 9px; line-height: 1;
  box-shadow: 0 0 20px rgba(198,244,50,0.10);
}
.legal-body .lead {
  font-size: 17px; line-height: 1.65; color: var(--t1);
  margin-bottom: 16px; max-width: 68ch;
}
.legal-body .cl { margin: 0 0 13px; max-width: 74ch; }
.legal-body .cl .cl-n {
  font-family: var(--fm); font-size: 13px; font-weight: 700;
  color: var(--t3); margin-right: 8px;
}
.legal-body .cl-3 { padding-left: 20px; }
.legal-body b, .legal-body strong { color: var(--t1); font-weight: 600; }
.legal-body ul {
  list-style: none; margin: 8px 0 18px; padding-left: 4px;
  display: grid; gap: 9px; max-width: 74ch;
}
.legal-body ul li { position: relative; padding-left: 22px; }
.legal-body ul li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--lime);
  box-shadow: 0 0 8px var(--lime-50);
}
.legal-body a { color: var(--lime); text-decoration: none; border-bottom: 1px solid var(--lime-28); }
.legal-body a:hover { border-bottom-color: var(--lime); text-shadow: 0 0 14px var(--lime-50); }

/* Незаполненный плейсхолдер — видно сразу */
.ph {
  font-family: var(--fm); font-size: 0.9em; font-weight: 700;
  color: var(--amber); background: rgba(232,144,31,0.12);
  padding: 1px 7px; border-radius: 6px;
  border: 1px dashed rgba(232,144,31,0.4);
  white-space: nowrap;
}

.legal .footer { border-top: 1px solid var(--line); margin-top: 0; }

@media (max-width: 560px) {
  .legal-body { padding: 22px 18px; }
  .legal-body .cl-3 { padding-left: 12px; }
  .legal-body h2 { flex-direction: column; align-items: flex-start; gap: 10px; }
}