/* Стиль юридических страниц.
   Самостоятельный файл, а не выжимка из landing.html: там 1800 строк ради
   сцен, мокапов и анимаций, которых здесь нет вообще. Общее с лендингом —
   только палитра, шрифты и шапка с футером, поэтому дублируются ровно они.

   Задача вёрстки одна: длинный юридический текст должен читаться. Отсюда
   узкая колонка, крупный интерлиньяж и нумерация через counter — руками
   проставленные номера в таком документе разъезжаются после первой же
   вставки пункта. */

:root{
  --ink:        #14161F;
  --ink-soft:   #3B4152;
  --muted:      #7A8090;
  --bg:         #FCFBFC;
  --surface:    #FFFFFF;
  --line:       #ECE8E4;

  --accent:     #FF3D77;
  --accent-ink: #E01F5B;
  --accent-wash:#FFEDF3;

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-sans:    'Wix Madefor Text', system-ui, sans-serif;

  --r-s: 12px; --r-m: 20px;
  --header-h: 86px;
  --measure: 760px;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:1180px; margin:0 auto; padding-inline:24px; }

/* ── Шапка ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(252,251,252,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header__row{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand__mark{
  width:34px; height:34px; border-radius:11px; background:var(--ink);
  display:grid; place-items:center; flex:none;
}
.brand__name{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:17px; letter-spacing:-.03em;
}
.brand__sub{ display:block; font-size:12px; color:var(--muted); letter-spacing:.01em; }

.back-link{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink-soft); text-decoration:none; font-size:15px; font-weight:500;
}
.back-link:hover{ color:var(--accent-ink); }

/* ── Документ ──────────────────────────────────────────── */
.doc{ padding:56px 0 96px; }
.doc__head{ max-width:var(--measure); margin-bottom:40px; }
.doc__kicker{
  margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink);
}
.doc h1{
  margin:0 0 14px; font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,4.2vw,40px); line-height:1.16; letter-spacing:-.035em;
}
.doc__meta{ margin:0; color:var(--muted); font-size:15px; }

.doc__body{ max-width:var(--measure); counter-reset:sec; }

/* Нумерация разделов и пунктов — счётчиками. В документе, который правят
   вставкой пункта в середину, ручные номера гарантированно разъезжаются. */
.doc__body section{ counter-increment:sec; counter-reset:sub; margin-top:44px; }
.doc__body section > h2{
  margin:0 0 16px; font-family:var(--font-display); font-weight:600;
  font-size:21px; line-height:1.28; letter-spacing:-.03em;
}
.doc__body section > h2::before{
  content:counter(sec) ". "; color:var(--accent-ink);
}
.doc__body section > p,
.doc__body section > ul,
.doc__body section > ol{ counter-increment:sub; }
.doc__body section > p{ margin:0 0 14px; color:var(--ink-soft); }
.doc__body h3{
  margin:26px 0 12px; font-size:17px; font-weight:650; letter-spacing:-.01em;
}

.doc__body ul, .doc__body ol{ margin:0 0 16px; padding-left:22px; color:var(--ink-soft); }
.doc__body li{ margin-bottom:8px; }
.doc__body li::marker{ color:var(--muted); }

.doc__body a{ color:var(--accent-ink); text-underline-offset:3px; }
.doc__body strong{ color:var(--ink); font-weight:650; }

/* Врезка: то, что читатель должен унести, даже если пролистал документ */
.callout{
  margin:22px 0; padding:18px 22px;
  background:var(--accent-wash); border-radius:var(--r-m);
  border:1px solid #FBD6E2;
}
.callout p{ margin:0; color:var(--ink); }
.callout p + p{ margin-top:10px; }

.doc__body table{
  width:100%; border-collapse:collapse; margin:18px 0 22px;
  font-size:15px; line-height:1.45;
}
.doc__body th, .doc__body td{
  border:1px solid var(--line); padding:11px 13px;
  text-align:left; vertical-align:top; color:var(--ink-soft);
}
.doc__body th{ background:var(--surface); color:var(--ink); font-weight:650; }

/* Широкие таблицы прокручиваются внутри себя, а не растягивают страницу */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.requisites{
  margin-top:40px; padding:24px 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  font-size:15.5px; line-height:1.75;
}
.requisites h2{
  margin:0 0 12px; font-family:var(--font-display); font-weight:600;
  font-size:18px; letter-spacing:-.02em;
}
.requisites dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 18px; }
.requisites dt{ color:var(--muted); }
.requisites dd{ margin:0; color:var(--ink); }

/* ── Подвал ────────────────────────────────────────────── */
.legal-footer{
  border-top:1px solid var(--line); background:var(--surface);
  padding:34px 0 44px; font-size:14.5px; color:var(--muted);
}
.legal-footer__links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:14px; }
.legal-footer a{ color:var(--ink-soft); text-decoration:none; }
.legal-footer a:hover{ color:var(--accent-ink); text-decoration:underline; }

@media (max-width:760px){
  body{ font-size:16px; }
  .wrap{ padding-inline:16px; }
  .doc{ padding:36px 0 64px; }
  .nav{ display:none; }
  .requisites dl{ grid-template-columns:1fr; gap:0; }
  .requisites dt{ margin-top:10px; }
}