/*
 * Страница с юридическим текстом (privacy-policy.html). Подключается только там,
 * поверх общих стилей: шапка, подвал и контейнер берутся из css/main.css.
 * Ширина колонки меньше контейнера — длинные строки читать тяжело.
 */
.legal {
  padding-block: 56px 80px;
}

.legal__inner {
  max-width: 760px;
}

.legal__title {
  font: 800 var(--h1-size) / 1.1 var(--font-raleway);
  color: var(--color-text);
}

.legal__updated {
  margin-top: 12px;
  font: var(--text-small);
  color: var(--color-placeholder);
}

.legal h2 {
  margin-top: 48px;
  font: 700 24px/32px var(--font-raleway);
  color: var(--color-text);
}

.legal h3 {
  margin-top: 28px;
  font: var(--text-title);
  color: var(--color-text);
}

/*
 * Номера пунктов и ссылки — синий из градиента (5.4:1 на фоне страницы).
 * Брендовый #0280ec на таком кегле не проходит по контрасту (3.8:1 при норме 4.5).
 */
.legal__num {
  color: var(--color-blue-end);
}

.legal p,
.legal li {
  font: 400 16px/26px var(--font-raleway);
  color: var(--color-text-secondary);
}

.legal p {
  margin-top: 16px;
}

.legal ul {
  margin-top: 16px;
  padding-left: 22px;
  list-style: disc;
}

.legal li {
  margin-top: 8px;
}

.legal li::marker {
  color: var(--color-brand-light);
}

.legal blockquote {
  margin-top: 20px;
  padding: 4px 0 4px 20px;
  border-left: var(--stroke-line) solid var(--color-brand-light);
}

.legal blockquote em {
  font-style: italic;
}

.legal a {
  color: var(--color-blue-end);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Телефон: заголовки и отступы между разделами меньше. */
@container page (width < 768px) {
  .legal {
    padding-block: 32px 56px;
  }

  .legal h2 {
    margin-top: 36px;
    font-size: 21px;
    line-height: 28px;
  }
}