/* Страницы документов: политика конфиденциальности, хранение данных,
   удаление данных, cookie и анализ посещений.

   Юридический текст длинный, поэтому страница устроена так, чтобы его
   было удобно читать, а не пролистывать:
   — наверху переключатель между четырьмя документами;
   — «Коротко» — главное простыми словами, с круглыми иконками сайта;
   — на компьютере слева содержание, подсвечивается текущий раздел;
   — сам текст — узкой колонкой ~68 знаков, таблицы прокручиваются внутри.

   Страницы собирает tools/build_site_pages.py. */

.legal-page{
  --ink:#1D1D1F;
  --muted:#6e6e73;
  --soft:#86868b;
  --line:rgba(29,29,31,.1);
  --blue:#1f7ff2;
  --blue-ink:#0a66d1;
  --surface:#f5f5f7;
  --ease:cubic-bezier(.16,1,.3,1);
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Onest','Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
.legal-page *,.legal-page *:before,.legal-page *:after{box-sizing:border-box}
/* Синими делаем только ссылки внутри самого документа: раньше правило
   красило и подвал, и заключительный блок, из-за чего на юридических
   страницах текст внизу отличался по цвету от остального сайта. */
.legal-body a,.legal-hero a:not(.legal-switch a):not(.legal-hero__crumb a),.legal-text a{color:var(--blue-ink)}
.legal-page :focus-visible{outline:2px solid #0071E3;outline-offset:3px;border-radius:6px}

/* ---------- шапка документа ---------- */

.legal-hero{
  padding:calc(max(14px,env(safe-area-inset-top)) + 58px + clamp(40px,6vw,76px)) 20px clamp(28px,4vw,44px);
  text-align:center;
}
.legal-hero__crumb{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--soft);font-size:14px;font-weight:600}
.legal-hero__crumb a{color:var(--soft);text-decoration:none}
.legal-hero__crumb a:hover{color:var(--ink)}
.legal-hero__crumb .legal-lang{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:5px 11px;border-radius:999px;background:var(--surface);color:var(--ink)}
.legal-hero__crumb .legal-lang i{color:#1782e8}
.legal-hero h1{
  max-width:16ch;margin:0 auto;
  font-size:clamp(30px,8.4vw,68px);
  font-weight:750;letter-spacing:-.055em;line-height:.98;
  text-wrap:balance;
  /* «конфиденциальности» длиннее ширины маленького телефона — разрешаем перенос. */
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}
.legal-hero__lead{max-width:52ch;margin:18px auto 0;color:var(--muted);font-size:clamp(17px,1.9vw,20px);line-height:1.45}
.legal-hero__meta{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.legal-hero__meta span{padding:6px 12px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600}

/* Переключатель документов — та же белая капсула, что у переключателей сайта. */
.legal-switch{
  display:flex;justify-content:center;
  margin:clamp(24px,3vw,34px) auto 0;
  padding:0 12px;
}
.legal-switch__track{
  display:flex;gap:4px;
  max-width:100%;
  padding:5px;
  overflow-x:auto;
  border-radius:999px;
  background:var(--surface);
  scrollbar-width:none;
}
.legal-switch__track::-webkit-scrollbar{display:none}
.legal-switch a{
  flex:none;
  padding:10px 16px;
  border-radius:999px;
  color:var(--muted);font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.legal-switch a:hover{color:var(--ink)}
.legal-switch a[aria-current='page']{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(33,44,62,.08)}

/* ---------- коротко ---------- */

.legal-summary{
  width:min(1120px,calc(100% - 32px));
  margin:0 auto;
  padding:clamp(24px,3.4vw,40px);
  border-radius:32px;
  background:var(--surface);
}
.legal-summary h2{margin:0 0 20px;font-size:clamp(22px,2.4vw,28px);font-weight:750;letter-spacing:-.035em}
.legal-summary__grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:12px}
/* Шесть пунктов — три колонки, четыре — две или четыре: без одиноких карточек в последнем ряду. */
@media (max-width:980px){.legal-summary__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.legal-summary__grid{grid-template-columns:1fr}}
.legal-point{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 1px 0 rgba(29,29,31,.03),0 10px 26px rgba(33,44,62,.05);
  animation:legal-rise .7s var(--ease) both;
}
.legal-point:nth-child(2){animation-delay:.06s}
.legal-point:nth-child(3){animation-delay:.12s}
.legal-point:nth-child(4){animation-delay:.18s}
.legal-point:nth-child(5){animation-delay:.24s}
.legal-point:nth-child(6){animation-delay:.3s}
@keyframes legal-rise{from{transform:translateY(12px)}to{transform:none}}
.legal-point__icon{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  font-size:21px;
}
.legal-point strong{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.legal-point p{margin:5px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.is-blue{background:#dceeff;color:#1782e8}
.is-violet{background:#eee1ff;color:#9b50df}
.is-gold{background:#fff0c8;color:#c78912}
.is-orange{background:#ffe8c9;color:#ee8b12}
.is-pink{background:#ffdfe8;color:#ec4775}
.is-green{background:#dff5e9;color:#1f9b64}

/* ---------- текст и содержание ---------- */

.legal-body{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:clamp(32px,6vw,88px);
  width:min(1120px,calc(100% - 40px));
  margin:clamp(40px,6vw,72px) auto clamp(64px,8vw,110px);
}
.legal-toc{position:sticky;top:96px;align-self:start;max-height:calc(100svh - 120px);overflow:auto;scrollbar-width:none}
.legal-toc::-webkit-scrollbar{display:none}
.legal-toc summary{display:none}
.legal-toc p{margin:0 0 12px;color:var(--soft);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.legal-toc ol{position:relative;display:grid;gap:2px;margin:0;padding:0;list-style:none}
.legal-toc a{
  display:block;
  padding:7px 12px;
  border-radius:10px;
  color:var(--muted);font-size:14px;line-height:1.3;text-decoration:none;
  transition:color .2s ease,background .2s ease;
}
.legal-toc a:hover{color:var(--ink);background:var(--surface)}
.legal-toc a[aria-current='true']{color:var(--ink);background:var(--surface);font-weight:650}

.legal-text{min-width:0;max-width:68ch;font-size:17px;line-height:1.6;color:#2c2c2e}
.legal-section{scroll-margin-top:96px}
.legal-section+.legal-section{margin-top:clamp(40px,5vw,56px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
.legal-section h2{
  display:flex;gap:14px;align-items:baseline;
  margin:0 0 16px;
  color:var(--ink);font-size:clamp(24px,2.6vw,30px);font-weight:750;letter-spacing:-.035em;line-height:1.12;
}
/* Номер пункта в документе — часть юридического текста, на него ссылаются. */
.legal-section h2 span{flex:none;color:var(--soft);font-size:.62em;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.legal-text h3{margin:28px 0 10px;color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.02em}
.legal-text p{margin:0 0 14px}
.legal-text ul,.legal-text ol{margin:0 0 16px;padding-left:22px}
.legal-text li{margin:6px 0}
.legal-text li::marker{color:var(--soft)}
.legal-text strong{color:var(--ink);font-weight:650}

.legal-note{
  display:flex;gap:12px;align-items:flex-start;
  margin:18px 0;
  padding:16px 18px;
  border-radius:18px;
  background:#f0f6ff;
  color:#26374d;font-size:15px;line-height:1.5;
}
.legal-note i{flex:none;margin-top:1px;color:#1782e8;font-size:20px}
.legal-note.is-warn{background:#fff6e8;color:#5a3d0b}
.legal-note.is-warn i{color:#ee8b12}

.legal-table{margin:16px 0 20px;overflow-x:auto;border-radius:18px;border:1px solid var(--line)}
.legal-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.45}
.legal-table th{padding:12px 16px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.04em;text-align:left;text-transform:uppercase}
.legal-table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
.legal-table td:first-child{color:var(--ink);font-weight:600}

/* Реквизиты юридических лиц. */
.legal-entities{display:grid;gap:10px;margin:16px 0}
.legal-entity{padding:18px 20px;border-radius:20px;background:var(--surface)}
.legal-entity strong{display:block;font-size:18px;letter-spacing:-.02em}
.legal-entity dl{display:grid;gap:6px;margin:10px 0 0}
.legal-entity dl div{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:15px}
.legal-entity dt{min-width:170px;color:var(--muted)}
.legal-entity dd{margin:0;font-weight:600;color:var(--ink)}

/* Шаги запроса на удаление. */
.legal-text .legal-steps{display:grid;gap:12px;margin:18px 0 22px;padding:0;list-style:none;counter-reset:step}
.legal-steps li{
  position:relative;
  margin:0;padding:18px 18px 18px 70px;
  border-radius:20px;
  background:var(--surface);
  counter-increment:step;
}
.legal-steps li:before{
  content:counter(step);
  position:absolute;left:18px;top:16px;
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:#fff;color:var(--blue-ink);font-size:15px;font-weight:750;
  box-shadow:0 4px 12px rgba(33,44,62,.08);
}
.legal-steps strong{display:block;margin-bottom:3px}

.legal-template{
  margin:18px 0 22px;
  border-radius:22px;
  background:#1D1D1F;
  color:#f5f5f7;
  overflow:hidden;
}
.legal-template__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:650;color:rgba(255,255,255,.7)}
.legal-template pre{margin:0;padding:18px 20px 22px;overflow-x:auto;font:15px/1.6 -apple-system,BlinkMacSystemFont,'Onest','Segoe UI',sans-serif;white-space:pre-wrap}
.legal-copy{
  display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 14px;
  border:0;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;
  font:inherit;font-size:13px;font-weight:650;
  cursor:pointer;
}
.legal-copy:hover{background:rgba(255,255,255,.2)}

.legal-cta{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
  margin-top:clamp(40px,5vw,56px);
  padding:22px;
  border-radius:26px;
  background:var(--surface);
}
.legal-cta__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:24px}
.legal-cta strong{display:block;font-size:18px;letter-spacing:-.02em}
.legal-cta p{margin:3px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.legal-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;
  border-radius:999px;
  background:var(--blue);color:#fff!important;
  font-size:16px;font-weight:650;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 24px rgba(31,127,242,.22);
  transition:transform .35s var(--ease);
}
.legal-button:hover{transform:translateY(-1px)}

@media (max-width:900px){
  .legal-body{grid-template-columns:minmax(0,1fr);gap:24px}
  .legal-toc{position:static;max-height:none;overflow:visible}
  .legal-toc details{border-radius:20px;background:var(--surface)}
  .legal-toc summary{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:15px;font-weight:650;cursor:pointer;list-style:none}
  .legal-toc summary::-webkit-details-marker{display:none}
  .legal-toc summary i{transition:transform .3s var(--ease)}
  .legal-toc details[open] summary i{transform:rotate(180deg)}
  .legal-toc p{display:none}
  .legal-toc ol{padding:0 8px 10px}
  .legal-toc a[aria-current='true']{background:#fff}
}
@media (max-width:560px){
  /* Четыре документа не помещаются в одну капсулу — ставим двумя рядами. */
  .legal-switch__track{flex-wrap:wrap;justify-content:center;border-radius:26px;overflow:visible}
  .legal-switch a{padding:9px 14px}
  .legal-text{font-size:16px}
  .legal-summary{border-radius:26px}
  .legal-cta{grid-template-columns:auto minmax(0,1fr)}
  .legal-cta .legal-button{grid-column:1/-1}
  .legal-steps li{padding:16px 16px 16px 62px}
  .legal-steps li:before{left:14px}
}
@media (prefers-reduced-motion:reduce){
  .legal-point{animation:none}
}