/* ==========================================================================
   BREVIS.EXPRESS — ЮРИДИЧЕСКИЕ СТРАНИЦЫ

   Здесь всё подчинено одному: текст должен читаться. Контейнер сайта 1600px,
   для сплошного текста это в три раза шире комфортной строки, поэтому колонка
   отдельно зажата по ширине символов, а не по пикселям.

   Никакого декора сверх общей системы: тот же грунт, та же типографика,
   лаймом отмечены только номера разделов.
   ========================================================================== */

.legal {
  padding: clamp(120px, 12vw, 180px) 0 clamp(80px, 8vw, 120px);
}

.legal__inner {
  /* ch считает по ширине нуля текущего шрифта — строка держится читаемой
     при любом размере кегля, в отличие от фиксированных пикселей */
  max-width: 74ch;
  margin-inline: auto;
}

.legal__title {
  font-size: var(--step-4);
  margin: 18px 0 14px;
}

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--faint);
  font-size: 0.86rem;
}

/* --- Короткая выжимка человеческим языком --------------------------------- */

.legal__tldr {
  margin: 44px 0 12px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime);
  border-radius: var(--r-md);
  background: var(--surface);
}

.legal__tldr h2 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 14px;
}

.legal__tldr ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.legal__tldr li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
}

.legal__tldr li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

.legal__tldr strong { color: var(--white); font-weight: 700; }

/* --- Разделы -------------------------------------------------------------- */

.legal__body {
  counter-reset: legal;
  margin-top: 56px;
}

.legal__sec { margin-bottom: 48px; }

.legal__sec > h2 {
  counter-increment: legal;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: var(--step-1);
  color: var(--white);
  margin-bottom: 16px;
}

.legal__sec > h2::before {
  content: counter(legal, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.legal__sec p,
.legal__sec li {
  color: var(--muted);
  line-height: 1.72;
}

.legal__sec p + p { margin-top: 12px; }

.legal__sec ul,
.legal__sec ol {
  margin: 14px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.legal__sec li::marker { color: var(--faint); }

.legal__sec a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal__sec a:hover { text-decoration-thickness: 2px; }

/* Определения и адреса внутри текста */
.legal__sec dl { margin-top: 14px; display: grid; gap: 12px; }
.legal__sec dt { color: var(--white); font-weight: 700; }
.legal__sec dd { color: var(--muted); line-height: 1.72; }

/* --- Незаполненные реквизиты ---------------------------------------------- */

/* Специально заметно: пока реквизиты не подставлены, их видно и в тексте,
   и в блоке-напоминании сверху. Лучше бросающийся в глаза пропуск,
   чем выдуманные ИНН и ОГРН в документе, который имеет силу. */
.fill {
  background: none;
  color: var(--magenta);
  border-bottom: 1px dashed currentColor;
  padding: 0 2px;
  white-space: nowrap;
}

.legal__todo {
  margin-bottom: 8px;
  padding: 18px 22px;
  border: 1px dashed var(--magenta);
  border-radius: var(--r-sm);
  background: rgba(220, 75, 255, 0.06);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.legal__todo b { color: var(--magenta); }

/* --- Подвал документа ----------------------------------------------------- */

.legal__end {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}