/* legal.css — стили юридических и контентных страниц (policy, consent, terms, offer,
   guarantees, cookies, pep-agreement, about, how, pricing, faq, contacts).
   Наследует палитру/шрифты из tokens.css. Длинные читаемые тексты, оглавление, таблицы. */

.legal-page { background: var(--bg); min-height: 100svh; display: flex; flex-direction: column; }
.legal-main { flex: 1 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; box-sizing: border-box; }

.legal-head { margin: 0 0 8px; }
.legal-head h1 { font-family: var(--serif); font-size: var(--fs-h1); line-height: var(--lh-head); font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.legal-meta { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 8px; }
.legal-lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); margin: 0 0 24px; }

.legal-rule { border: 0; border-top: 1px solid var(--line); margin: 24px 0 28px; }

.legal-toc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 0 0 32px; }
.legal-toc h2 { font-family: var(--sans); font-size: var(--fs-kicker); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; font-weight: 600; }
.legal-toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 6px; }
.legal-toc a { color: var(--teal); text-decoration: none; font-size: var(--fs-small); }
.legal-toc a:hover { text-decoration: underline; }

.legal-section { margin: 0 0 28px; scroll-margin-top: 80px; }
.legal-section h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.legal-section h3 { font-family: var(--sans); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin: 20px 0 8px; }
.legal-section p, .legal-section li { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.legal-section p { margin: 0 0 12px; }
.legal-section ul, .legal-section ol { margin: 0 0 14px; padding-left: 1.4rem; display: grid; gap: 7px; }
.legal-section strong { font-weight: 600; }
.legal-section a { color: var(--teal); }

.legal-clause { margin: 0 0 12px; }
.legal-clause .num { font-weight: 600; color: var(--ink); }

.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 520px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; line-height: 1.45; color: var(--ink); }
.legal-table th { background: var(--surface); font-weight: 600; }

.legal-note { background: var(--sage-bg); border-left: 3px solid var(--sage); border-radius: 0 8px 8px 0; padding: 14px 16px; margin: 0 0 20px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }

.legal-disclaimer { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 24px 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }

.legal-topbar { background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 20px; }
.legal-topbar-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.legal-topbar .logo { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
.legal-topbar nav a { font-size: var(--fs-small); color: var(--teal); text-decoration: none; margin-left: 16px; }
.legal-topbar nav a:hover { text-decoration: underline; }

.legal-footer { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 28px 20px; font-size: var(--fs-small); color: var(--ink-2); }
.legal-footer-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.legal-footer .legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.legal-footer .legal-links a { color: var(--teal); text-decoration: none; }
.legal-footer .legal-links a:hover { text-decoration: underline; }
.legal-footer .legal-reqs { line-height: 1.55; }
.legal-footer .age-badge { display: inline-block; border: 1px solid var(--field-border); border-radius: 6px; padding: 1px 7px; font-weight: 600; color: var(--ink-2); font-size: 0.8125rem; }

.legal-back { display: inline-block; margin: 0 0 20px; font-size: var(--fs-small); color: var(--teal); text-decoration: none; }
.legal-back:hover { text-decoration: underline; }

.legal-page a:focus-visible, .legal-topbar a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 3px; }

@media (max-width: 600px) { .legal-main { padding: 24px 16px 48px; } .legal-head h1 { font-size: 1.75rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }