/*
 * Юридические тексты. Единственная задача — читаемость длинного текста:
 * узкая колонка, крупный межстрочный интервал, видимая нумерация пунктов,
 * чтобы на них можно было ссылаться в переписке.
 */

.legal { padding: 40px 0 70px; max-width: 820px }
.legal-meta { color: var(--faint); font-size: 13px; margin: 0 0 8px }
.legal h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 18px }

.legal-intro {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 34px;
}

.legal h2 {
  font: 700 17px Manrope;
  letter-spacing: 0;
  margin: 38px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.legal h2:first-of-type { border-top: 0; padding-top: 0 }
.legal h3 { font: 700 14px Manrope; margin: 24px 0 10px }
.legal p, .legal li { color: var(--ink-soft); font-size: 14.5px; line-height: 1.75 }
.legal p { margin: 0 0 14px }
.legal ol, .legal ul { margin: 0 0 16px; padding-left: 26px }
.legal li { margin-bottom: 9px }
.legal ol.plain { list-style: none; padding-left: 0; counter-reset: item }

.legal ol.plain > li {
  counter-increment: item;
  padding-left: 40px;
  position: relative;
}

.legal ol.plain > li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  color: var(--faint);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.legal b, .legal strong { color: var(--ink) }
.legal a { text-decoration: underline }

/* Реквизиты оператора вписываются при регистрации юрлица — до этого места,
   которые нужно заполнить, должны быть заметны, а не прятаться в тексте. */
.fill {
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 20px }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top }
.legal-table th { background: var(--surface-2); font: 700 12px Manrope; color: var(--ink-soft) }

.legal-nav { display: grid; gap: 12px; margin-top: 26px }

.legal-nav a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color .14s;
}

.legal-nav a:hover { border-color: var(--accent-line) }
.legal-nav b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px }
.legal-nav span { color: var(--muted); font-size: 13px }