/* ─────────────────────────────────────────────────────────────────────────
   Оформление трёх юридических страниц: pp.html, pp-no-data-collected.html,
   tos.html. Один файл на три страницы, а не инлайн в каждой: правка стиля
   должна быть правкой в одном месте, иначе они разъедутся на первой же.

   Токены те же, что в index.html, — страницы обязаны выглядеть частью сайта,
   а не чужим приложением к нему. Шрифты системные, внешних запросов ноль.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;
  --bg:#FBF6EC;
  --surface:#FFFCF6;
  --chip:#F5EADA;
  --ink:#2B211A;
  --ink-2:#5C4B3E;
  --muted:#7A6759;
  --line:#E8DBC6;
  --brand:#45B8FF;
  --brand-ink:#0A6FA8;
  --focus:#1B7FC4;
  --e:cubic-bezier(.2,.72,.3,1);
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17120F;
    --surface:#221B16;
    --chip:#2A211B;
    --ink:#F3E9DE;
    --ink-2:#DAC9B8;
    --muted:#AD9B8B;
    --line:#3B2F26;
    --brand-ink:#82D1FF;
    --focus:#82D1FF;
  }
}

*,*::before,*::after{box-sizing:border-box}
/* Тот же резерв, что на главной: без него короткая страница без прокрутки и
   длинная с прокруткой центрируются по-разному, и переход между ними дёргается. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:var(--bg);
  background-image:radial-gradient(760px 380px at 6% -12%, rgba(255,199,132,.30), rgba(255,199,132,0) 72%);
  background-repeat:no-repeat;
  color:var(--ink);
  font:16px/1.68 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-synthesis-weight:none;
}
@media (prefers-color-scheme: dark){
  body{background-image:radial-gradient(760px 380px at 6% -12%, rgba(255,150,66,.10), rgba(255,150,66,0) 72%)}
}
::selection{background:rgba(69,184,255,.28)}

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

/* Мера строки -- 68 символов: юридический текст читают подряд, и слишком
   длинная строка здесь дороже, чем на любой другой странице сайта. */
.wrap{max-width:68ch;margin:0 auto;padding:clamp(24px,5vw,44px) 20px 32px}

/* ── Шапка: знак ведёт на главную ───────────────────────────────────────── */
.top{
  display:flex;align-items:center;gap:11px;
  padding-bottom:clamp(18px,4vw,26px);
  border-bottom:1px solid var(--line);
}
.top a.mark{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);
  border-radius:14px;
}
.top svg{display:block;width:38px;height:38px;flex:0 0 auto;border-radius:11px;
  filter:drop-shadow(0 2px 5px rgba(76,50,26,.20));
  transition:transform .17s var(--e)}
.top a.mark:hover svg{transform:translateY(-2px) rotate(-2deg)}
.top b{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
/* Не ссылка, а метка: говорит, куда посетитель попал, если пришёл сюда
   прямо из карточки магазина, минуя сайт. */
.top .back{
  margin-left:auto;font:600 11.5px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}

/* ── Заголовок страницы ─────────────────────────────────────────────────── */
h1{
  margin:clamp(26px,6vw,40px) 0 0;
  font-size:clamp(28px,7vw,40px);line-height:1.1;
  letter-spacing:-.03em;font-weight:800;
}
.meta{
  margin:12px 0 0;
  font:600 11.5px/1.5 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.lead{
  margin:20px 0 0;font-size:clamp(16.5px,4vw,18px);
  line-height:1.55;color:var(--ink-2);
}

/* ── Разделы ────────────────────────────────────────────────────────────── */
h2{
  margin:clamp(34px,7vw,46px) 0 0;
  font-size:clamp(19px,4.6vw,22px);line-height:1.25;
  letter-spacing:-.018em;font-weight:700;
  scroll-margin-top:18px;
}
/* Номер раздела висит в поле слева, где оно есть, и встаёт в строку, где нет */
h2 .n{color:var(--brand-ink);font-variant-numeric:tabular-nums}
@media (min-width:900px){
  h2{position:relative}
  h2 .n{position:absolute;right:calc(100% + 14px);font-weight:600;opacity:.75}
}
h3{
  margin:26px 0 0;
  font-size:16px;line-height:1.4;font-weight:650;
  letter-spacing:-.005em;color:var(--ink);
}
p{margin:12px 0 0;color:var(--ink-2)}
h2+p,h3+p{margin-top:10px}
strong{color:var(--ink);font-weight:650}
a{color:var(--brand-ink);text-decoration-thickness:1px;text-underline-offset:2px}

/* ── Оглавление (только tos.html: 24 раздела без него не найти) ─────────── */
.toc{
  margin:clamp(28px,6vw,38px) 0 0;padding:18px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
.toc h2{
  margin:0 0 12px;font:600 11.5px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.toc ol{
  margin:0;padding:0;list-style:none;
  display:grid;gap:2px 22px;
}
@media (min-width:620px){.toc ol{grid-template-columns:1fr 1fr}}
.toc li{display:flex;gap:9px;align-items:baseline;font-size:14.5px;line-height:1.5}
.toc .n{flex:0 0 1.9em;text-align:right;color:var(--muted);
  font:12px/1.6 var(--mono);font-variant-numeric:tabular-nums}
.toc a{color:var(--ink-2);text-decoration:none;padding:2px 0}
.toc a:hover{color:var(--brand-ink);text-decoration:underline}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
footer{
  margin-top:clamp(40px,8vw,60px);padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-size:14px;color:var(--muted);
}
footer a{color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px}
footer a:hover{color:var(--brand-ink);border-color:var(--brand)}
footer a[aria-current="page"]{color:var(--muted);border-bottom-style:dotted}
footer .sign{margin-left:auto;font-family:var(--mono);font-size:12.5px}

/* ── Печать: юридическую страницу сохраняют в PDF чаще, чем любую другую ── */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .top .back,.toc{display:none}
  h2,h3{break-after:avoid}
  p{break-inside:avoid}
  a{color:#000;text-decoration:none}
  a[href^="http"]::after,a[href^="mailto"]::after{
    content:" (" attr(href) ")";font-size:9pt;color:#444}
  footer{border-top:1px solid #ccc}
}