/* Общий стиль страниц документов Yotta (privacy.html, offer.html).
   Тот же язык, что на главной: белый холст, графит, синий акцент, Inter Tight для заголовков, Inter для текста. */
/* шрифты лежат на сайте (site/fonts), как на главной: без запросов к Google Fonts */
@font-face{font-family:"Inter Tight"; src:url("fonts/InterTight.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Inter"; src:url("fonts/Inter.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
:root{
  --bg:#FFFFFF; --ink:#1D1D1F; --muted:#6E6E73; --hair:#E8E8ED; --soft:#F5F5F7; --band:#EEF1F6; --band-line:#D8DEE8;
  --blue:#0071E3;
  --f-display:"Inter Tight", "SF Pro Display", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:"Inter", "SF Pro Text", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --narrow:720px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; letter-spacing:-.01em; overflow-wrap:break-word}
a{color:var(--blue); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--f-display); font-weight:600; letter-spacing:-.03em; text-wrap:balance; margin:0}
p{margin:0}

.skip{position:absolute; left:16px; top:-60px; z-index:20; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:500}
.skip:focus{top:10px}

.wrap{max-width:var(--narrow); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}

/* шапка: как на главной, полупрозрачная и закреплённая */
header.top{position:sticky; top:0; z-index:5; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hair)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:52px}
.logo{font:600 19px/1 var(--f-display); letter-spacing:-.03em; color:var(--ink); text-decoration:none; padding:12px 0}
.back{display:inline-flex; align-items:center; gap:6px; min-height:44px; font:500 15px/1 var(--f-body); color:var(--blue); text-decoration:none}
.back::before{content:"‹"; font-size:20px; line-height:1; margin-top:-2px}
.back:hover{text-decoration:underline}

/* плашка «черновик» */
.draft{margin-top:28px; display:flex; gap:12px; align-items:flex-start; background:var(--band); border:1px solid var(--band-line); border-radius:14px; padding:16px 18px; font-size:16px; line-height:1.5}
.doc .draft p{margin:0}
.draft b{font-weight:600}
.draft .dot{flex:none; width:10px; height:10px; border-radius:50%; background:var(--blue); margin-top:7px}
/* та же плашка внутри разделов: заметки «проверить с юристом» стоят только в ней */
.doc .draft-note{margin-top:20px}

/* заголовок документа */
.doc-head{padding-top:40px}
.eyebrow{font:600 14px/1.3 var(--f-body); letter-spacing:.01em; color:var(--muted)}
.doc-head h1{margin-top:10px; font-size:clamp(30px, 8vw, 56px); font-weight:700; letter-spacing:-.04em; line-height:1.05}
.lead{margin-top:20px; font-size:clamp(18px, 2.2vw, 21px); line-height:1.5; color:var(--muted); letter-spacing:-.015em}
.edition{margin-top:16px; font-size:15px; color:var(--muted)}

/* оглавление */
.toc{margin-top:36px; background:var(--soft); border-radius:18px; padding:22px 24px}
.toc h2{font-size:19px; letter-spacing:-.02em}
.toc ol{margin:12px 0 0; padding:0; list-style:none; counter-reset:toc; columns:2; column-gap:28px}
.doc .toc li{counter-increment:toc; break-inside:avoid; margin:0; padding:0}
.toc a{display:flex; gap:10px; padding:7px 0; color:var(--ink); text-decoration:none; font-size:16px; line-height:1.4}
.toc a::before{content:counter(toc); flex:none; min-width:1.4em; color:var(--muted); font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--blue)}
@media (max-width:640px){ .toc ol{columns:1} .toc{padding:18px 20px} }

/* разделы */
.doc section{padding-top:48px; scroll-margin-top:68px}
.doc section + section{margin-top:48px; border-top:1px solid var(--hair)}
.doc h2{font-size:clamp(26px, 4vw, 32px); line-height:1.15; display:flex; gap:12px; align-items:baseline}
.doc h2 .n{color:var(--blue); font-variant-numeric:tabular-nums; flex:none}
.doc h3{font-size:20px; line-height:1.25; margin-top:28px; letter-spacing:-.02em}
.doc p{margin-top:16px}
.doc ul, .doc ol.list{margin:14px 0 0; padding-left:1.3em}
.doc li{margin-top:8px; padding-left:.2em}
.doc li::marker{color:var(--muted)}
.doc .note{margin-top:20px; background:var(--soft); border-radius:14px; padding:16px 18px; font-size:16px}

/* реквизиты */
.req{margin:20px 0 0; display:grid; grid-template-columns:minmax(150px, 34%) 1fr; border-top:1px solid var(--hair)}
.req dt, .req dd{margin:0; padding:12px 0; border-bottom:1px solid var(--hair)}
.req dt{color:var(--muted); padding-right:16px}
.req dd{min-width:0; overflow-wrap:anywhere}
@media (max-width:560px){
  .req{grid-template-columns:1fr}
  .req dt{border-bottom:0; padding-bottom:0; font-size:15px}
  .req dd{padding-top:2px}
}

/* место-заполнитель для реквизитов, которых пока нет */
.tbd{color:var(--muted); background:var(--soft); border-radius:6px; padding:1px 6px; white-space:nowrap; font-style:normal}
/* пометки для юриста: что уточнить */
.todo{background:rgba(0,113,227,.08); color:var(--ink); border-radius:6px; padding:1px 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* подвал */
.foot{margin-top:72px; background:var(--soft); border-top:1px solid var(--hair); color:var(--muted); font-size:15px}
.foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:28px; padding-bottom:max(28px, env(safe-area-inset-bottom,0px))}
.foot nav{display:flex; flex-wrap:wrap; gap:4px 20px}
.foot a{color:var(--ink); text-decoration:none; display:inline-block; padding:6px 0}
.foot a:hover, .foot a[aria-current="page"]{color:var(--blue)}

@media (max-width:560px){
  body{font-size:17px}
  .back, .edition, .foot, .req dt{font-size:16px}
  .doc-head{padding-top:28px}
  .doc section{padding-top:36px}
  .doc section + section{margin-top:36px}
}

@media print{
  header.top, .skip, .toc, .foot nav{display:none}
  body{font-size:12pt}
  a{color:inherit; text-decoration:none}
  .doc section{break-inside:auto; padding-top:18pt}
}