/* ============================================================
   FBM CARDS v2 — legal pages (privacy / terms, ru + en)
   Подключается ПОСЛЕ styles/v2.css. Шапка и футер стилизуются
   самим v2.css; здесь — двухколоночный макет документа:
   слева заголовок + дата + sticky-оглавление,
   справа узкая читабельная колонка текста (r31 п.34).
   Активный пункт оглавления подсвечивает инлайн-скрипт страницы.
   ============================================================ */

/* шапка без скролл-скрипта: фон и волосок всегда включены */
.legal2 .hdr{
  background:rgba(250,250,250,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
/* r38 п.9: при открытом бургер-меню blur ОБЯЗАН выключаться — backdrop-filter
   делает шапку containing block для fixed-потомков, и панель .hdr-mob
   (top:60px;bottom:0) схлопывалась в ноль ВНУТРИ 60px-шапки. На главной это
   решает .hdr.menu-open.scrolled{backdrop-filter:none} (head.css), но у legal2
   нет скролл-скрипта и класса .scrolled — гасим blur по .menu-open напрямую;
   фон #fafafa даёт head.css. */
.legal2 .hdr.menu-open{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* ---------- сетка: слева колонка-навигатор, справа документ ---------- */
.lg-main{padding:124px 0 72px}
.lg-grid{
  display:grid;
  grid-template-columns:minmax(280px,404px) minmax(0,620px);
  column-gap:56px;justify-content:space-between;
  align-items:start;
}

/* ---------- левая колонка: заголовок + дата + оглавление ----------
   r33 п.8: закреплена ЦЕЛИКОМ (sticky был на .lg-toc, но его родитель .lg-side
   ниже статьи по высоте — прилипать было некуда, колонка уезжала).
   Теперь sticky сам .lg-side: top с учётом фикс-шапки (60px + воздух).
   При body{zoom:.9} (r32, >=992px) top и высота шапки в одном зум-пространстве,
   поэтому offset не пересчитываем; vh зумом НЕ масштабируется — max-height
   на десктопе делим на .9. padding-left 2px + margin-left -2px — чтобы
   overflow-скролл не срезал зелёную риску активного пункта (::after на -1px). */
.lg-side{
  position:sticky;top:92px;align-self:start;
  max-height:calc(100vh - 108px);overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#d9d9d6 transparent;
  padding:0 0 16px 2px;margin-left:-2px;
}
@media(min-width:992px){
  .lg-side{max-height:calc(100vh/.9 - 118px)}
}
.lg-head h1{
  font-size:clamp(30px,3.15vw,40px);
  font-weight:500;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);
}
/* r36: рукописный подзаголовок и рукописная дата убраны — два hand-элемента
   подряд читались плохо. Решение клиента «что-то одно, остальное обычным»:
   подзаголовка нет вовсе, дата — обычным мелким серым текстом. */
.lg-date{
  display:block;margin-top:14px;
  font-size:13px;line-height:1.5;color:#9a9a94;
  font-variant-numeric:tabular-nums;
}

/* оглавление: само по себе больше не sticky — прилипает вся .lg-side */
.lg-toc{margin-top:34px}
.lg-toc-cap{
  margin:0 0 10px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:#9a9a94;
}
.lg-toc-toggle{display:none}
.lg-toc-list{
  border-left:.5px solid #e0e0de;
  counter-reset:lgtoc;
}
.lg-toc-list li{counter-increment:lgtoc}
.lg-toc-list a{
  position:relative;display:flex;align-items:baseline;gap:10px;
  padding:6px 8px 6px 16px;
  font-size:14px;line-height:1.4;color:#7d7d7a;
  transition:color .2s ease;
}
.lg-toc-list a::before{
  content:counter(lgtoc,decimal-leading-zero);
  flex:none;
  font-size:11.5px;font-weight:500;color:var(--gray-2);
  font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
/* зелёная риска активного пункта — поверх волоска списка */
.lg-toc-list a::after{
  content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:2px;
  border-radius:2px;background:var(--green);
  opacity:0;transition:opacity .2s ease;
}
.lg-toc-list a:hover{color:var(--ink)}
.lg-toc-list a.on{color:var(--ink)}
.lg-toc-list a.on::before{color:var(--green-ink)}
.lg-toc-list a.on::after{opacity:1}

/* ---------- тело документа ---------- */
.lg-art section{
  padding:26px 0 8px;
  border-top:.5px solid #e0e0de;
  scroll-margin-top:96px;
}
.lg-art section:first-child{border-top:0;padding-top:8px}
.lg-art h2{
  font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.3;
  color:var(--ink);margin:0 0 14px;
}
.lg-art h3{
  font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35;
  color:var(--ink);margin:20px 0 8px;
}
.lg-art p{
  font-size:15.5px;line-height:1.7;color:#4a4a48;margin:0 0 12px;
}
.lg-art ul{margin:0 0 14px;padding:0}
.lg-art li{
  position:relative;padding-left:22px;margin-bottom:8px;
  font-size:15.5px;line-height:1.65;color:#4a4a48;
}
.lg-art li::before{
  content:"";position:absolute;left:6px;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--green);
}
.lg-art strong{font-weight:600;color:var(--ink)}
.lg-art a{
  color:var(--green-ink);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(18,138,68,.35);
  transition:text-decoration-color .2s ease;
}
.lg-art a:hover{text-decoration-color:var(--green-ink)}
.lg-art section > :last-child{margin-bottom:0}

/* ---------- акцентная карточка-пояснение (комиссия за пополнение) ---------- */
.lg-note{
  display:flex;align-items:flex-start;gap:14px;
  margin:18px 0 8px;padding:18px;
  background:var(--green-soft);
  border:.5px solid var(--green-line);
  border-radius:var(--r-lg);
}
.lg-note-ic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:#fff;border:.5px solid var(--green-line);
  color:var(--green-ink);
}
.lg-note-ic svg{width:19px;height:19px}
.lg-note-tx{min-width:0}
.lg-note-tx b{
  display:block;margin-bottom:6px;
  font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);
}
.lg-note-tx p{font-size:14.5px;line-height:1.6;color:#3f4a43;margin:0 0 10px}
.lg-note-tx p:last-child{margin-bottom:0}
.lg-note-ex{
  padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.65);
  border:.5px solid var(--green-line);
  font-variant-numeric:tabular-nums;
}

/* ---------- планшет: колонка-навигатор уже, текст тянется ---------- */
@media(max-width:1024px) and (min-width:768px){
  .lg-grid{grid-template-columns:minmax(240px,300px) minmax(0,1fr);column-gap:40px}
  .lg-head h1{font-size:clamp(26px,3vw,30px)}
}

/* ---------- моб: одна колонка, оглавление сворачивается над текстом ---------- */
@media(max-width:767px){
  .lg-main{padding:100px 0 48px}
  .lg-grid{display:block}
  /* одна колонка: sticky не нужен, иначе шапка документа перекроет статью */
  .lg-side{position:static;max-height:none;overflow:visible;padding:0;margin-left:0}
  .lg-head h1{font-size:clamp(28px,8.6vw,38px)}
  .lg-date{font-size:12.5px;margin-top:12px}

  .lg-toc{
    position:static;margin-top:24px;
    background:var(--card);
    border:.5px solid #e0e0de;border-radius:var(--r-md);
  }
  .lg-toc-cap{display:none}
  .lg-toc-toggle{
    display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 16px;
    font-size:14.5px;font-weight:500;color:var(--ink);text-align:left;
  }
  .lg-toc-toggle svg{flex:none;color:var(--gray);transition:transform .25s ease}
  .lg-toc.is-open .lg-toc-toggle svg{transform:rotate(180deg)}
  .lg-toc-list{display:none;border-left:0;padding:0 16px 10px}
  .lg-toc.is-open .lg-toc-list{display:block}
  .lg-toc-list a{padding:7px 0}
  .lg-toc-list a::after{display:none}

  .lg-art{margin-top:28px}
  .lg-art section{padding:22px 0 6px}
  .lg-art section:first-child{border-top:.5px solid #e0e0de;padding-top:22px}
  .lg-art h2{font-size:19px}
  .lg-art p,.lg-art li{font-size:15px}

  .lg-note{padding:14px;gap:12px}
  .lg-note-ic{width:32px;height:32px}
  .lg-note-ic svg{width:17px;height:17px}
  .lg-note-tx b{font-size:14.5px}
  .lg-note-tx p{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .lg-toc-list a,.lg-toc-list a::before,.lg-toc-list a::after,
  .lg-toc-toggle svg,.lg-art a{transition:none}
}