/* Юридические страницы (/privacy/, /consent/): собирает sites/_legal/build.py, тексты в _legal/content.py.
   Язык сайта: тонкие крупные заголовки, тонкие линейки, бирюзовый и моноширинные метки. Знак § у номеров разделов. */

.legal-back { margin-left: auto; }
.legal-page { padding: clamp(48px, 7vw, 104px) 0 clamp(80px, 10vw, 136px); }
.legal-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px clamp(48px, 8vw, 128px); align-items: start; }
@media (min-width: 901px) and (min-height: 780px) { .legal-side { position: sticky; top: calc(var(--top-h) + 32px); } }

.legal-title { color: var(--ink); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.legal-lead { margin-top: 16px; color: var(--slate); font-size: 1.0625rem; font-weight: 300; line-height: 1.5; }

.legal-meta { margin: 32px 0 0; border-top: 1px solid var(--rule); }
.legal-meta > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.legal-meta dt { color: var(--muted); font: 500 0.75rem/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.legal-meta dd { margin: 0; color: var(--ink); font: 500 0.8125rem/1.6 var(--mono); text-align: right; }

.legal-toc { margin-top: 32px; }
.legal-toc ol { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; padding: 7px 0; color: var(--ink); font-size: 0.9375rem; text-decoration: none; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--teal); font: 500 0.75rem/1.6 var(--mono); }
.legal-toc a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 0.25em; }
.legal-other { margin-top: 32px; color: var(--slate); font-size: 0.9375rem; }
.legal-other a { color: var(--ink); }

.legal-body { max-width: 740px; overflow-wrap: break-word; }
.legal-body :is(p, ul) { max-width: 64ch; margin-top: 14px; color: var(--text); }
.legal-body ul { padding: 0; }
.legal-body li { position: relative; margin-top: 8px; padding-left: 24px; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 12px; height: 1px; background: var(--teal); }
.legal-body p a { color: var(--teal); text-decoration-color: var(--teal-glow); text-decoration-thickness: 2px; }
.legal-body p a:hover { background: var(--teal-wash); }

.legal-sec { padding-top: 32px; border-top: 1px solid var(--rule-2); scroll-margin-top: calc(var(--top-h) + 16px); }
.legal-sec + .legal-sec { margin-top: 56px; }
.legal-sec h2 { display: flex; align-items: baseline; gap: 16px; color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.legal-sec h2 + * { margin-top: 20px; }
.legal-n { flex: none; color: var(--teal); font: 500 0.8125rem/1 var(--mono); letter-spacing: 0; }
.legal-n::before { content: "§ "; }
.legal-sec:target .legal-n { background: var(--teal-wash); outline: 6px solid var(--teal-wash); border-radius: 4px; }
.legal-sec h3 { margin-top: 32px; color: var(--ink); font-size: 1.1875rem; font-weight: 500; scroll-margin-top: calc(var(--top-h) + 16px); }
.legal-sec h3 + * { margin-top: 8px; }

.legal-body .legal-intro { max-width: 58ch; margin-top: 0; color: var(--ink); font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem); font-weight: 300; line-height: 1.45; }
.legal-terms { margin: 40px 0 0; border-top: 1px solid var(--rule-2); }
.legal-terms > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.legal-terms dt { color: var(--muted); font: 500 0.75rem/1.9 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.legal-terms dd { margin: 0; }
.legal-terms dd > :first-child, .legal-terms dd > ul > li:first-child { margin-top: 0; }

.foot-docs { display: grid; gap: 10px; align-content: start; font-size: 0.9375rem; }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .legal-toc ol { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .legal-terms > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .legal-sec h2 { gap: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .legal-side, .legal-body { animation: legal-in 0.5s var(--ease-out) both; }
  .legal-body { animation-delay: 0.08s; }
  @keyframes legal-in { from { opacity: 0; transform: translateY(12px); } }
}