@font-face{font-family:Onest;src:url(/assets/Onest-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url(/assets/Onest-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
:root{
  --петроль:#0E5E68; --петроль-тёмный:#0a464e; --охра:#D08A2C;
  --бумага:#F2F3F0; --белый:#fff; --текст:#13201F; --серый:#5c6b6a; --рамка:#dfe3df;
  /* единая шкала отступов: всё в вёрстке берётся только отсюда */
  --ш1:8px; --ш2:16px; --ш3:24px; --ш4:32px; --ш5:48px; --ш6:64px;
  --поле:24px;              /* отступ от краёв экрана */
}
@media (min-width:700px){ :root{ --поле:40px } }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--бумага);color:var(--текст);
  font:400 17px/1.6 Onest,'Segoe UI',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}

/* поля от краёв экрана — с запасом под вырезы и скруглённые углы телефонов */
.обёртка{max-width:1000px;margin:0 auto;width:100%;
  padding-left:max(var(--поле), env(safe-area-inset-left));
  padding-right:max(var(--поле), env(safe-area-inset-right))}

a{color:var(--петроль)}
h1,h2,h3{line-height:1.2;font-weight:600;margin:0}
h1{font-size:clamp(30px,5.4vw,46px);letter-spacing:-.01em}
h2{font-size:clamp(23px,3.4vw,31px)}
p{margin:0}

/* --- шапка --- */
header{padding-top:var(--ш4)}
header img{height:38px;width:auto;display:block}
@media (min-width:700px){ header{padding-top:var(--ш5)} header img{height:48px} }

/* --- первый экран --- */
.первый{padding-top:var(--ш5);padding-bottom:var(--ш6)}
.первый p{margin-top:var(--ш3);font-size:clamp(17px,2.2vw,21px);color:var(--серый);max-width:620px}
.кнопка{display:inline-block;background:var(--петроль);color:#fff;text-decoration:none;
  padding:16px 32px;border-radius:10px;font-weight:600;font-size:18px;
  margin-top:var(--ш4);transition:background .15s}
.кнопка:hover{background:var(--петроль-тёмный)}
.мелко{margin-top:var(--ш3);font-size:15px;color:var(--серый);max-width:560px}

/* --- разделы: сверху и снизу поровну --- */
/* Линия-разделитель рисуется фоном по КОНТЕНТНОЙ области, а не рамкой:
   рамка тянулась бы на всю ширину вместе с полями, и линия оказывалась шире текста. */
.черта{background-image:linear-gradient(var(--рамка),var(--рамка));background-size:100% 1px;
  background-repeat:no-repeat;background-position:top;
  background-origin:content-box;background-clip:content-box}
section{padding-top:var(--ш6);padding-bottom:var(--ш6)}
@media (max-width:699px){ section{padding-top:var(--ш5);padding-bottom:var(--ш5)} }
section > h2 + p{margin-top:var(--ш2);color:var(--серый);max-width:620px}

.карточки{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--ш3);margin-top:var(--ш4)}
.карточка{background:var(--белый);border:1px solid var(--рамка);border-radius:14px;padding:var(--ш3)}
.карточка h3{font-size:18px}
.карточка p{margin-top:var(--ш1);font-size:16px;color:var(--серый)}
.цифра{display:block;font-size:32px;font-weight:600;color:var(--петроль);line-height:1.05}
.цифра small{font-size:15px;color:var(--серый);font-weight:400;display:block;
  margin-top:2px;margin-bottom:var(--ш2)}

/* пример разбора: настоящий отчёт, а не рисунок */
.пример{margin-top:var(--ш4);border:1px solid var(--рамка);border-radius:14px;overflow:hidden;
  background:var(--белый);box-shadow:0 1px 2px rgba(19,32,31,.04)}
.пример-кадр{position:relative;max-height:640px;overflow:hidden}
@media (max-width:640px){ .пример-кадр{max-height:520px} }
.пример-кадр img{display:block;width:100%;height:auto}
/* отчёт длинный, и кадр обрывается на полуслове — уводим низ в бумагу,
   чтобы обрыв читался как «дальше есть ещё», а не как брак вёрстки */
.пример-кадр::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(rgba(255,255,255,0),#fff)}
.пример-подпись{display:flex;flex-wrap:wrap;gap:var(--ш2);align-items:center;
  justify-content:space-between;padding:var(--ш3);border-top:1px solid var(--рамка)}
.пример-подпись p{color:var(--серый);font-size:15px;max-width:520px}
.ссылка-файл{display:inline-block;border:1px solid var(--петроль);color:var(--петроль);
  text-decoration:none;padding:10px 20px;border-radius:9px;font-weight:600;font-size:16px;
  white-space:nowrap}
.ссылка-файл:hover{background:var(--петроль);color:#fff}

.значок{display:block;margin-bottom:var(--ш2)}
.карточка .цифра + h3{margin-top:0}
.оговорка{margin-top:var(--ш3);font-size:15px;color:var(--серый);max-width:640px}

ol.шаги{counter-reset:ш;list-style:none;padding:0;margin:var(--ш4) 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--ш3)}
ol.шаги li{counter-increment:ш;background:var(--белый);border:1px solid var(--рамка);
  border-radius:14px;padding:var(--ш3)}
ol.шаги li::before{content:counter(ш);display:block;width:30px;height:30px;border-radius:50%;
  background:var(--охра);color:#fff;font-weight:600;font-size:16px;text-align:center;
  line-height:30px;margin-bottom:var(--ш2)}
ol.шаги b{display:block}
ol.шаги span{display:block;margin-top:var(--ш1);color:var(--серый);font-size:16px}

.вопросы{margin-top:var(--ш4)}
.вопрос{border-left:3px solid var(--охра);padding-left:var(--ш3)}
.вопрос + .вопрос{margin-top:var(--ш4)}
.вопрос b{display:block}
.вопрос span{display:block;margin-top:var(--ш1);color:var(--серый)}

/* --- полоса с призывом --- */
.полоса-обёртка{padding-top:var(--ш6);padding-bottom:var(--ш6)}
.полоса{background:var(--петроль);color:#fff;border-radius:16px;
  padding:var(--ш5) var(--ш3);text-align:center}
@media (min-width:700px){ .полоса{padding:var(--ш6) var(--ш5)} }
.полоса h2{color:#fff}
.полоса p{color:#d6e5e6;max-width:520px;margin:var(--ш2) auto 0}
.полоса .кнопка{background:#fff;color:var(--петроль)}
.полоса .кнопка:hover{background:#e8efef}

/* --- подвал --- */
footer{padding-top:var(--ш5);
  padding-bottom:max(var(--ш6), calc(env(safe-area-inset-bottom) + var(--ш5)));
  color:var(--серый);font-size:15px}
footer img{height:30px;width:auto;opacity:.75;display:block}
footer p{margin-top:var(--ш3)}
footer p + p{margin-top:var(--ш2)}
footer a{color:var(--петроль)}

/* --- текстовая страница (условия использования) --- */
/* Ширину задаём самим абзацам, а не колонке: если сузить колонку, она перестаёт
   быть общей обёрткой и текст разъезжается с логотипом и подвалом. */
.текст{padding-top:var(--ш5);padding-bottom:var(--ш6)}
.текст h1,.текст h2,.текст p,.текст ul,.текст .врезка{max-width:760px}
.текст h1{font-size:clamp(26px,4.4vw,38px);margin-bottom:var(--ш3)}
.текст h2{font-size:clamp(19px,2.6vw,23px);margin-top:var(--ш5);margin-bottom:var(--ш2)}
.текст p{margin-top:var(--ш2)}
.текст ul{margin:var(--ш2) 0 0;padding-left:22px}
.текст li{margin-top:var(--ш1)}
.текст .дата{margin-top:var(--ш5);font-size:15px;color:var(--серый)}
.текст .врезка{margin-top:var(--ш3);background:var(--белый);border:1px solid var(--рамка);
  border-radius:14px;padding:var(--ш3)}
/* внутри врезки список не должен добавлять свой верхний отступ к отступу самой
   врезки — иначе сверху зияет пустая строка */
.текст .врезка > :first-child{margin-top:0}
.текст .врезка li:first-child{margin-top:0}
.назад{display:inline-block;margin-top:var(--ш4);font-size:16px}