/* legal.html: стили страницы (раньше были встроены в <head>). Кнопки и прочие компоненты — из css/base.css. */
/* Юридические страницы — читаемость важнее декора.
   Шрифт и акценты — по UI library (Inter SemiBold заголовки, Inter Regular текст, Stampatello кикеры). */
.legal, .legal * { --display: 'Inter', system-ui, sans-serif; }

.legal { padding: clamp(32px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); background: var(--cream); }
.legal .wrap { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 820px) { .legal .wrap { grid-template-columns: 1fr; } }

.legal-nav { position: sticky; top: calc(76px + 33px + 16px); align-self: start;
  padding: 20px; background: var(--paper); border-radius: 14px; box-shadow: 0 10px 28px rgba(76, 43, 35, .08); }
@media (max-width: 820px) { .legal-nav { position: static; } }
/* телефон: отступы по шкале UI Library и симметрично — секция сверху и снизу одинаково, между блоками один шаг */
@media (max-width: 820px) {
  .legal { padding: var(--space-8) 0; }
  .legal .wrap { gap: var(--space-6); }
  .legal-nav { padding: var(--space-5); }
}
/* «что где / Оглавление» над карточкой оглавления — только на телефоне; оформление как у «правовое / Публичная оферта» */
.legal-nav-head { display: none; }
@media (max-width: 820px) {
  .legal-nav-head { display: block; }
  .legal-nav-head .kicker { display: inline-block; margin: 0 0 var(--space-6); color: var(--rust); font-family: var(--hand, 'Inter'); font-size: 20px; line-height: 1.1; letter-spacing: 0; text-transform: none; transform: rotate(-1deg); }
  .legal-nav-head h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(32px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--cocoa); }
}
.legal-nav h3 { margin: 0 0 10px; color: var(--cocoa); font-family: var(--display); font-weight: 700;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.legal-nav .legal-toc { margin: 0 0 18px; padding: 0 0 0 20px; color: var(--ink-soft);
  font-size: 13.5px; line-height: 1.5; }
.legal-nav .legal-toc li { margin: 4px 0; }
.legal-nav .legal-toc:last-child, .legal-nav .legal-toc:last-child li:last-child { margin-bottom: 0; } /* низ карточки = верх: только padding */
.legal-nav .legal-toc a { color: var(--ink-soft); text-decoration: none; }
.legal-nav .legal-toc a:hover { color: var(--rust); }
.legal-nav .legal-section { margin: 0 0 12px; color: var(--rust); font-family: var(--display);
  font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

.legal-content { max-width: 68ch; color: var(--cocoa); font-size: 15.5px; line-height: 1.65; }
.legal-content h1 { margin: 0 0 8px; font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--cocoa); }
.legal-content > .kicker { display: inline-block; margin: 0 0 24px; color: var(--rust);
  font-family: var(--hand, 'Inter'); font-size: 20px; line-height: 1.1; transform: rotate(-1deg); }
.legal-content h2 { margin: 36px 0 14px; font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -.015em; color: var(--cocoa);
  scroll-margin-top: 120px; }
.legal-content p { margin: 0 0 12px; }
.legal-content p + p { margin-top: 12px; }
.legal-content ul, .legal-content ol { margin: 0 0 14px; padding-left: 24px; }
.legal-content li { margin: 4px 0; }
.legal-content strong { color: var(--cocoa); font-weight: 700; }
.legal-content em { color: var(--ink-soft); font-style: italic; }
/* документы идут подряд без линий: между концом одного и заголовком следующего — большой отступ */
.legal-content h1:not(#oferta) { margin-top: var(--space-12); }
@media (max-width: 820px) { .legal-content h1:not(#oferta) { margin-top: var(--space-10); } }
.legal-content { min-width: 0; }
.legal-content h1 { scroll-margin-top: 120px; }
.legal-content .legal-edition { margin: 0 0 20px; color: var(--ink-soft); font-size: 14px; }
.legal-content .legal-todo { padding: 0 4px; border-radius: 4px; background: #ffe08a; color: var(--cocoa); }
.legal-content .legal-table { margin: 0 0 16px; overflow-x: auto; }
.legal-content table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal-content th, .legal-content td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-content th { color: var(--ink-soft); font-weight: 700; }