/* ============================================================================
   Legal — типографика и раскладка юридических страниц (РКН-документы).
   Читаемость важнее «дизайна»: спокойная колонка, ясная иерархия заголовков.
   ============================================================================ */
@layer legal {
  .legal { padding-block: var(--space-7) var(--space-8); }
  .legal__wrap { width: min(50rem, calc(100% - var(--space-6))); margin-inline: auto; }

  .legal__back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primary); font-weight: 700; font-size: var(--fs-300); margin-bottom: var(--space-5); }
  .legal__back svg { width: 16px; height: 16px; }

  .legal h1 { font: 800 var(--fs-800)/1.1 var(--font-display); letter-spacing: -.02em; margin-bottom: var(--space-3); }
  .legal__meta { color: var(--muted); font-size: var(--fs-200); margin-bottom: var(--space-6); }

  .legal h2 { font: 800 var(--fs-600)/1.25 var(--font-display); margin: var(--space-7) 0 var(--space-3); }
  .legal h3 { font: 700 var(--fs-400)/1.3 var(--font-display); margin: var(--space-5) 0 var(--space-2); }
  .legal p { margin-bottom: var(--space-4); color: var(--ink-soft); line-height: 1.7; }
  .legal ul, .legal ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--ink-soft); line-height: 1.7; }
  .legal li { margin-bottom: var(--space-2); list-style: disc; }
  .legal ol li { list-style: decimal; }
  .legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
  .legal strong { color: var(--ink); }

  /* Карточка с реквизитами оператора */
  .legal__operator {
    background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card);
    padding: var(--space-5); box-shadow: var(--shadow-card); margin-bottom: var(--space-6);
  }
  .legal__operator dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
  .legal__operator dt { color: var(--muted); font-size: var(--fs-200); }
  .legal__operator dd { margin: 0; color: var(--ink); font-size: var(--fs-300); font-weight: 600; }

  @media (max-width: 560px) {
    .legal__operator dl { grid-template-columns: 1fr; gap: 2px; }
    .legal__operator dd { margin-bottom: var(--space-3); }
  }
}