/* Правовые документы (политика, соглашение, тарифы) — экран #screen-legal.
   Читаемая типографика длинного текста + карточки тарифов. Материалы, радиусы,
   акцент — из токенов; в JS стилей и цветов нет (контракт). */

.legal { padding: 0 var(--gutter) 8px; color: var(--t2); font-size: 15px; line-height: 1.62; }
.legal__updated { font-size: 12.5px; color: var(--t4); margin-bottom: 18px; }
/* Кодовое слово для согласования кассы — ВИДНОЙ плашкой вверху документа
   (акцентный тинт, чтобы менеджер сразу заметил). Временное — снять после кассы. */
.legal__code { margin: 4px 0 18px; padding: 11px 14px; border-radius: 12px; background: var(--accent-tint); color: var(--t2); font-size: 13.5px; }
.legal__code b { color: var(--accent-hi); font-weight: 800; letter-spacing: 0.02em; }
.legal__lead { color: var(--t1); font-size: 15.5px; line-height: 1.6; margin-bottom: 12px; }
.legal__op { color: var(--t3); font-size: 13.5px; margin-bottom: 6px; }

.legal h2 { color: var(--t1); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 26px 0 8px; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 12px; padding-left: 4px; display: flex; flex-direction: column; gap: 7px; }
.legal li { position: relative; padding-left: 18px; }
.legal li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.legal b { color: var(--t1); font-weight: 700; }

/* Выделенный абзац (важное про данные/оплату) — залитой карточкой, без
   цветной левой планки (её штампует любой шаблон). */
.legal__note {
  background: var(--surface-2); border-radius: 12px; padding: 12px 14px;
  color: var(--t2); font-size: 14px; line-height: 1.5; margin: 6px 0 14px;
  box-shadow: var(--shadow-1);
}

/* Тарифные карточки */
.tariff { background: var(--surface-1); border-radius: var(--r-card); padding: 16px; margin: 0 0 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-1); }
.tariff__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tariff__head h2 { margin: 0; font-size: 19px; }
.tariff__badge { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); padding: 3px 9px; border-radius: var(--pill); }
.tariff__price { display: flex; align-items: baseline; gap: 7px; }
.tariff__price b { color: var(--t1); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.tariff__price span { color: var(--t3); font-size: 13px; }
.tariff__price--alt { margin-top: 2px; }
.tariff__price--alt b { font-size: 17px; color: var(--t2); }
.tariff ul { margin: 12px 0 0; }

/* Reduced-transparency / prefers-contrast: карточки плотнее. */
@media (prefers-contrast: more) {
  .legal__note, .tariff { background: var(--surface-2); }
}

/* Десктоп: колонка документа читаемой ширины, не на весь экран. */
@media (min-width: 768px) {
  .legal { max-width: 720px; }
}