/* Cobiz — служебные страницы (Политика конфиденциальности, Публичная
   оферта и т.д.). Верстается по Figma (файл kjcnN2Gxb4Bp6FtAjiQTtM,
   фрейм "09 · Политика конфиденциальности", node 2968:1172).

   Переиспользует токены и общие классы из landing.css (--ll-*, .ll-header,
   .ll-footer, .ll-contact, .cobiz-landing__container/__title/__btn) — по
   прямому решению владельца: эти компоненты уже сверстаны пиксель-в-пиксель
   для лендинга, служебные страницы просто используют их как есть. Файл
   держит только то, что специфично для служебных страниц: заголовок
   документа и раскладку "оглавление + статьи".

   Мобильная версия — по фрейму "M10 · Политика конфиденциальности"
   (node 3013:5378), брейкпоинт 767.98px, тот же принцип, что и у лендинга
   (см. codex/landing_page_rebuild.md §8). */

/* Компактная шапка при скролле (.ll-header.is-scrolled) — на лендинге
   12px сверху/снизу смотрятся нормально из-за primary-кнопки CTA. Тут
   шапка узкая (лого + "Регистрация", без кнопки) — с теми же 12px она
   визуально ниже лендинговой, добавлено +8px (12→20), по прямому
   указанию владельца 2026-09-24. Мобиль не трогаем — там высота уже
   фиксирована независимо от скролла. */
@media (min-width: 768px) {
  .ll-header.is-scrolled .ll-header__inner {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* ---------- Заголовок документа ---------- */

.ll-legal-hero {
  /* Шапка тут .ll-header БЕЗ модификатора — то есть fixed, как на лендинге
     (владелец явно попросил вернуть; статичным был неверный первый заход).
     Раз шапка вне потока, секция сама компенсирует её высоту: 88.67px
     (измерено) + 112px зазор из Figma = 200.67 ≈ 201px — ровно совпадает с
     абсолютным y=200 хедера "Frame 148" в самой Figma-сцене. */
  padding: 201px 0 0;
}

.ll-legal-hero__eyebrow {
  font-size: 16px;
  font-weight: 600;
  color: var(--ll-text-3);
  margin: 0 0 12px;
}

.ll-legal-hero__title {
  font-family: var(--ui-font-display, 'Manrope');
  font-weight: 800;
  font-size: 48px;
  line-height: 1.16;
  color: var(--ll-text);
  margin: 0 0 12px;
}

.ll-legal-hero__lead {
  font-size: 16px;
  color: var(--ll-text-2);
  margin: 0 0 32px;
}

.ll-legal-hero__meta {
  font-size: 16px;
  color: var(--ll-text-3);
  margin: 0;
}

/* ---------- Оглавление + статьи ---------- */

.ll-legal-body {
  margin-top: 80px;
}

.ll-legal-layout {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.ll-legal-toc {
  background: var(--ll-panel);
  border: 1px solid var(--ll-border);
  border-radius: 16px;
  padding: 24px;
  width: 310px;
  flex: 0 0 310px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Шапка fixed (88.67px) — sticky-меню обязано липнуть НИЖЕ неё, а не
     под верхним краем окна. Было 88.67+24 воздуха≈113px — по прямому
     указанию владельца 2026-09-24 сокращено до 96px (меньше воздуха над
     оглавлением). scroll-margin-top у .ll-legal-section ниже НЕ трогаем —
     он отвечает за другое (не прятать заголовок статьи под шапкой при
     переходе по якорю), владелец просил именно top оглавления. */
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 96px - 24px);
  overflow-y: auto;
}

.ll-legal-toc__title {
  font-weight: 600;
  font-size: 16px;
  color: var(--ll-text);
  margin: 0;
}

.ll-legal-toc a {
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  transition: color 150ms ease-out;
}

.ll-legal-toc a:hover {
  color: var(--ll-primary);
}

.ll-legal-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ll-legal-section {
  /* та же величина, что и top у sticky-оглавления выше — переход по пункту
     оглавления не должен прятать заголовок статьи под fixed-шапкой */
  scroll-margin-top: 113px;
}

.ll-legal-section h2 {
  font-family: var(--ui-font-display, 'Manrope');
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ll-text);
  margin: 0 0 8px;
}

.ll-legal-section p,
.ll-legal-section ul {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.48;
  color: var(--ll-text-2);
  margin: 0 0 12px;
}

.ll-legal-section ul {
  padding-left: 20px;
}

.ll-legal-section li {
  margin-bottom: 4px;
}

.ll-legal-section p:last-child,
.ll-legal-section ul:last-child {
  margin-bottom: 0;
}

.ll-legal-section a {
  color: var(--ll-primary);
}

/* ================= Адаптив =================
   Один брейкпоинт 767.98px, как на лендинге (см. codex/
   landing_page_rebuild.md §0/§8) — мобильная шапка/подвал/блок "Остались
   вопросы" уже адаптивны сами по себе (те же классы .ll-header/.ll-footer/
   .ll-contact, что на лендинге, чей мобильный CSS уже лежит в landing.css
   и применяется здесь автоматически) — тут только то, что специфично для
   этой страницы. */
@media (max-width: 767.98px) {
  /* Узкая шапка (лого + "Регистрация") на мобиле раньше показывала только
     lang-switch (общее правило landing.css прячет .ll-header__login на
     мобиле — рассчитано на лендинг, где вместо него бургер). Lang-switch
     убрали (Правка №19) — без переопределения мобильная шапка осталась бы
     пустой справа, кроме лого. Возвращаем ссылку, тем же размером 16px,
     что и на десктопе. */
  .ll-header__login {
    display: inline-block;
    font-size: 16px;
  }

  .ll-legal-hero {
    /* мобильная шапка высотой ~61px (измерено) + 40px зазор из Figma */
    padding-top: 101px;
  }

  .ll-legal-hero__title {
    font-size: 28px;
  }

  .ll-legal-hero__lead {
    margin-bottom: 24px;
  }

  .ll-legal-body {
    /* сверху 60px (было 40 — перепутала местами с нижним) */
    margin-top: 60px;
  }

  .ll-legal-layout {
    flex-direction: column;
    /* снизу (оглавление → статьи) 40px (было 60) */
    gap: 40px;
  }

  .ll-legal-toc {
    position: static;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .ll-legal-content {
    gap: 24px;
  }

  /* #contact — общий id с лендингом, там уже переопределён margin-top:108px
     на мобиле (landing.css) — у этой страницы по Figma другое значение
     (80px), специфичности одинаковые (оба голый #id), выигрывает файл,
     подключённый позже (legal_page.css грузится после landing.css) */
  #contact {
    margin-top: 80px;
  }
}