/* ══════════════════════════════════════════════════════════════════
   СЛУЖЕБНЫЕ ДОКУМЕНТЫ  /details.html, /privacy-policy.html, /terms.html

   Стили перенесены из <style> самих страниц, когда те стояли вне общей
   обвязки. Правила те же до значения; изменилось только одно — каждое
   прижато классом области. В исходнике селекторы были глобальные
   (* , body, h2, h3, p, ul, li, a), и внутри шапки с подвалом они
   переписали бы весь сайт.

   Областей две, потому что документы оформлены по-разному:
     .doc--details  реквизиты: h2 — мелкая серая надпись над группой,
                    содержимое строками «название — значение»;
     .doc--legal    политика и оферта: h2 — обычный тёмный заголовок,
                    есть h3, абзацы и списки с тире вместо маркеров.

   Приставка нужна и против бутстрапа: header.php подключает
   bootstrap.min.css, где .row — строка сетки с отрицательными полями.
   Вес .doc .row (0,2,0) перебивает .row (0,1,0), поэтому класс
   в разметке документов переименовывать не пришлось; обнуление margin
   и --bs-gutter-x — оттуда же.

   Обнуление * из исходника не переносилось: box-sizing бутстрап
   ставит сам. Зато там, где исходник полагался на сброшенный margin,
   он теперь проставлен явно — Reboot задаёт свои отступы заголовкам,
   абзацам и спискам.

   Шрифт свой не задаётся: документы наследуют типографику сайта.
   Раньше они грузили Inter с Google Fonts отдельным запросом.
   ══════════════════════════════════════════════════════════════════ */

.doc {
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
}

/* Верхний отступ больше исходного: раньше страницы стояли без шапки,
   и 64 пикселей хватало. Шапка фиксированная, высотой 64, и заголовок
   уходил под неё — на мобильном целиком. Значения взяты не с потолка,
   а те же, что у статей и каталога: h1 начинается на 144 сверху,
   на телефоне на 128. */
.doc .page {
  max-width: 760px;
  margin: 0 auto;
  padding: 144px 32px 100px;
}

.doc .doc-header h1 { font-weight: 600; line-height: 1.3; margin-top: 0; }
.doc a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: #555; }

/* ── Реквизиты ── */

.doc--details .doc-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e5e5;
}

.doc--details .doc-header h1 { font-size: 26px; margin-bottom: 0; }

.doc--details .section {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e5e5e5;
}

/* :last-of-type, а не :last-child: под последней группой стоит
   ссылка на страницу компании, и по :last-child правило перестало
   бы попадать в группу — у неё вернулись бы линия и отступ снизу. */
.doc--details .section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Ссылка под последней группой реквизитов. Отступ свой: у последней
   .section отступ снизу снят, и без него ссылка липла бы к строке
   кор. счёта. Размер и вид — как у .company__more на /ved-company,
   это парные ссылки. */
.doc--details .doc__more { margin: 40px 0 0; font-size: 15px; }

.doc--details h2 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #999;
  margin: 0 0 16px;
}

/* Бутстрап здесь мешает дважды. Сам .row — строка сетки: перенос
   по умолчанию и отрицательные поля по краям. И правило .row > *,
   которое ставит каждому ребёнку width: 100% и верхний отступ —
   из-за него название и значение вставали друг под друга даже
   при работающем flex. Поэтому и перенос, и ширины, и отступы
   детей заданы здесь явно. */
.doc .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  padding: 8px 0;
  margin: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}

.doc .row:last-child { border-bottom: none; }

.doc .row-key {
  flex: 0 0 260px;
  width: 260px;
  max-width: 260px;
  color: #888;
  padding: 0;
  margin-top: 0;
}

.doc .row-val {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  color: #1a1a1a;
  padding: 0;
  margin-top: 0;
}

@media (max-width: 600px) {
  .doc .row { flex-direction: column; gap: 2px; }
  .doc .row-key { flex: none; width: auto; max-width: none; font-size: 13px; }
}

/* ── Политика и оферта ── */

.doc--legal .doc-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e5e5;
}

.doc--legal .doc-header h1 { font-size: 26px; margin-bottom: 6px; }
.doc--legal .doc-header .subtitle { font-size: 15px; color: #666; margin: 0 0 20px; }
.doc--legal .doc-header .meta { font-size: 13px; color: #999; margin: 0; }

.doc--legal .intro {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e5e5;
}

.doc--legal .section { margin-bottom: 40px; }

.doc--legal h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  margin-top: 40px;
  color: #1a1a1a;
}

.doc--legal h3 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 20px;
  color: #1a1a1a;
}

.doc--legal p { margin-top: 0; margin-bottom: 10px; color: #333; }

.doc--legal ul {
  margin: 8px 0 12px 0;
  padding-left: 0;
  list-style: none;
}

.doc--legal li {
  padding: 3px 0 3px 18px;
  position: relative;
  color: #333;
  margin: 0;
}

.doc--legal li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #aaa;
}

.doc--legal .intro-block {
  background: #f7f7f7;
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: 14px;
  color: #444;
  line-height: 1.7;
}

.doc--legal .stamp {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
  font-size: 13px;
  color: #999;
}

@media (max-width: 600px) {
  .doc .page { padding: 128px 20px 80px; }
  .doc .doc-header h1 { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   БЛОК «О КОМПАНИИ» на /ved-company

   Строки набраны той же карточкой, что и реквизиты. Правила .row
   для этого вынесены в базовую область .doc — блоку достаточно её
   одной. Приставку .doc--details он не берёт намеренно: там h2 —
   мелкая серая подпись над группой, и заголовок блока молча получил
   бы её размер, цвет и капитель.
   ══════════════════════════════════════════════════════════════════ */

.company__block {
  /* Ширина не своя: блок занимает всю колонку .section-container,
     как соседние секции страницы — 1200 на десктопе, ширина
     контейнера за вычетом его отступов на узких экранах.
     Боковые 20px повторяют .prl__container: блок встаёт в одну
     линию с карточками секции выше, а не выступает за них.
     На узких экранах их снимает медиазапрос — там контейнер
     страницы сам держит поля, и вторая пара сузила бы блок. */
  max-width: none;
  margin: 0;
  padding: 80px 20px;
}

.company__block .company__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 16px;
  color: #1a1a1a;
}

.company__block .company__lead {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 28px;
}

.company__block .company__rows { margin-bottom: 20px; }

.company__block .company__more { margin: 0; font-size: 15px; }

@media (max-width: 768px) {
  .company__block { padding: 56px 0 80px; }
  .company__block .company__title { font-size: 22px; }
  .company__block .company__lead { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════
   БЛОК ПРО РИСКИ на /ved-company

   Своих цветов и размеров у блока нет: рамка, радиус и тень взяты
   у карточек секции «Внутри платформы» (--card-border #E5E7EB,
   радиус 16), синий — проектный #3C4AFA, а не #4C5FE5 из макета,
   зелёная галочка — тот же SVG, что в списках услуг. Начертание
   заголовка 600, как у company__title и tp01__title: в макете 800,
   но на странице такого веса нет нигде.

   Правила лежат здесь, а не в отдельном файле: doc.css уже
   подключён к этой странице ради блока «О компании». На служебных
   страницах классы .risk__* не встречаются, их вывод не меняется.
   ══════════════════════════════════════════════════════════════════ */

/* Отступ сверху — 75px, то же значение, что у .section__vnutri
   в wed-uslugi.css: им отбиты друг от друга все секции страницы.
   Снизу отступа нет: следующая секция несёт свои 75px сама, вторая
   пара дала бы разрыв вдвое шире, чем между остальными блоками.
   Боковых полей тоже нет — блок занимает всю колонку
   .section-container, 1200, и встаёт кромка в кромку с сеткой
   карточек услуг над ним. */
.risk { padding: 75px 0 0; }

.risk__box {
  border: 1.5px solid #3C4AFA;
  border-radius: 16px;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.risk__head { display: flex; align-items: center; gap: 14px; }

.risk__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #3C4AFA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.risk__title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
  max-width: 780px;
}

.risk__lead {
  margin: -18px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #555;
  max-width: 780px;
}

.risk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

.risk__card {
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.risk__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9CA3AF;
  line-height: 1.5;
}

.risk__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.risk__item { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.5; color: #111827; }

.risk__check { flex: 0 0 auto; width: 20px; height: 20px; display: block; }
.risk__check svg { width: 100%; height: 100%; display: block; }

.risk__note { margin: 0; font-size: 15px; line-height: 1.6; color: #555; }

/* Оговорка внизу карточки: отбита линией и набрана светлее — она
   про чужой договор, а не про наш. Отступ сверху задан margin,
   а не gap карточки: gap одинаков для всех строк, а здесь нужен
   больший, под разделитель. */
.risk__caveat {
  margin: 4px 0 0;
  padding-top: 18px;
  border-top: 1px solid #E5E7EB;
  font-size: 14px;
  line-height: 1.6;
  color: #9CA3AF;
}

.risk__case {
  background: #F6F8FC;
  border-radius: 14px;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.risk__case-sum { display: flex; flex-direction: column; gap: 10px; }

.risk__chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3C4AFA;
  background: #EEF1FE;
  border-radius: 6px;
  padding: 4px 9px;
}

.risk__amount { font-size: 34px; font-weight: 600; line-height: 1.1; color: #1a1a1a; white-space: nowrap; }

.risk__case-text { margin: 0; font-size: 16px; line-height: 1.6; color: #1a1a1a; }
.risk__case-text a { color: #3C4AFA; text-decoration: underline; text-underline-offset: 2px; }
.risk__case-text a:hover { color: #3C4AFA; text-decoration: none; }

@media (max-width: 768px) {
  /* На узких экранах .section__vnutri теряет свои 75px сверху, и нижнего
     отступа блоку взять неоткуда — задаём его сами. 56px — то же число,
     что у .company__block в мобильной раскладке. */
  .risk { padding: 56px 0; }
  .risk__box { border-radius: 14px; padding: 24px 18px; gap: 22px; }
  .risk__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .risk__icon { width: 36px; height: 36px; border-radius: 10px; }
  .risk__icon svg { width: 18px; height: 18px; }
  .risk__title { font-size: 20px; }
  .risk__lead { margin-top: -10px; font-size: 15px; }
  .risk__grid { grid-template-columns: minmax(0, 1fr); }
  .risk__card { border-radius: 12px; padding: 18px 16px; gap: 14px; }
  .risk__item { font-size: 14px; }
  .risk__note { font-size: 14px; }
  .risk__caveat { padding-top: 16px; font-size: 13px; }
  .risk__case { grid-template-columns: minmax(0, 1fr); gap: 10px; border-radius: 12px; padding: 20px 18px; }
  .risk__amount { font-size: 28px; }
  .risk__case-text { font-size: 15px; }
}

/* ── Реквизиты «Крафти»: рамка вокруг строк и чередование ──
   Базовые .doc .row не трогаются: они общие со страницей
   /details.html, и её вывод должен остаться прежним. */

.company__block .company__rows {
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}

.company__block .company__rows .row { padding: 16px 28px; border-bottom: 1px solid #F0F0F0; }
.company__block .company__rows .row:nth-child(even) { background: #FBFCFE; }
.company__block .company__rows .row:last-child { border-bottom: none; }
.company__block .company__rows .row-key { flex-basis: 280px; width: 280px; max-width: 280px; font-size: 14px; }
.company__block .company__rows .row-val { font-weight: 500; color: #111827; }

@media (max-width: 600px) {
  .company__block .company__rows { border-radius: 14px; }
  .company__block .company__rows .row { padding: 14px 16px; }
  .company__block .company__rows .row-key { font-size: 13px; }
}