/* Программы, шаги, вопросы, финальный призыв — по макетам 190:193, 188:193,
   195:205, 199:205. Все размеры взяты из макета числами.
   Колонка контента 1440 при полях 240 (внутри кадра 1920). */

/* ─── На чём можно сэкономить (190:193) ───────────────────────────────────
   Фон #F4F5F7, поля 80, зазор 32; карточки 348×119, поля 24, зазор 6. */
.prg { background: var(--bg-soft); }
.prg__in {
  max-width: var(--wrap); margin: 0 auto; padding: 80px var(--side);
  display: flex; flex-direction: column; gap: 32px;
}
.prg__head { display: flex; flex-direction: column; gap: 8px; }
.prg__h { font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1px; }
.prg__sub { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink-2); }

.prg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.prg__card {
  min-height: 119px; padding: 24px; background: #fff; border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 6px;
}
.prg__name { font-size: 18px; font-weight: 800; line-height: 23.4px; color: var(--ink); }
.prg__note { font-size: 14px; font-weight: 500; line-height: 21px; color: var(--ink-2); }

/* Карточка с призывом: подложка #FFF4EE, заголовок акцентным цветом. */
.prg__card--ask { background: var(--accent-bg); gap: 12px; }
.prg__card--ask .prg__name { color: var(--accent-2); }
.prg__btn {
  align-self: flex-start; margin-top: auto; padding: 12px 18px;
  border-radius: var(--r-fld); background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 20.49px;
}
.prg__btn:hover { background: var(--accent-2); }

.prg__vych {
  display: block; padding: 24px; border-radius: var(--r-card);
  background: var(--bg-dark); color: #fff;
}
.prg__vych b { display: block; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.prg__vych span { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); }

/* ─── Три шага до ключей (188:193) ────────────────────────────────────────
   Белый фон, карточки 469×277 на #F4F5F7, поля 32, зазор 12. */
.stp { background: #fff; }
.stp__in {
  max-width: var(--wrap); margin: 0 auto; padding: 80px var(--side);
  display: flex; flex-direction: column; gap: 32px;
}
.stp__head { display: flex; flex-direction: column; gap: 8px; }
.stp__h { font-size: 40px; font-weight: 800; line-height: 42px; letter-spacing: -0.8px; }
.stp__sub { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink-2); }

.stp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stp__card {
  padding: 32px; background: var(--bg-soft); border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 12px;
}
.stp__n { font-size: 15px; font-weight: 800; line-height: 20.49px; letter-spacing: 1.2px; color: var(--accent); }
.stp__t { font-size: 20px; font-weight: 800; line-height: 27.32px; color: var(--ink); }
.stp__part { display: flex; flex-direction: column; gap: 4px; }
.stp__l { font-size: 11px; font-weight: 600; line-height: 15.03px; color: var(--accent-2); }
.stp__part p { font-size: 15px; font-weight: 500; line-height: 23.25px; color: var(--ink-2); }
.stp__more { align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--accent-2); }

/* ─── Частые вопросы (195:205) ────────────────────────────────────────────
   Фон #F4F5F7, карточки вопросов белые, поля 22/28, зазор списка 10. */
.faq { background: var(--bg-soft); }
.faq__in {
  max-width: var(--wrap); margin: 0 auto; padding: 80px var(--side);
  display: flex; flex-direction: column; gap: 32px;
}
.faq__head { display: flex; flex-direction: column; gap: 8px; }
.faq__h { font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1px; }
.faq__sub { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink-2); }

.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item { padding: 22px 28px; background: #fff; border-radius: var(--r-card); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 18px; font-weight: 600; line-height: 24.3px; color: var(--ink);
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
/* Знак раскрытия — плюс и минус акцентным цветом, как в макете. */
.faq__q::after {
  content: "+"; flex: none;
  font-size: 22px; font-weight: 500; line-height: 30px; color: var(--accent);
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a {
  margin-top: 12px; max-width: 1040px;
  font-size: 16px; font-weight: 500; line-height: 25.6px; color: var(--ink-2);
}

/* ─── Финальный призыв (199:205) ──────────────────────────────────────────
   Фон #1D222A, две колонки с зазором 80: обещание 920 и форма. */
.lead { background: var(--bg-dark); color: #fff; }
.lead__in {
  max-width: var(--wrap); margin: 0 auto; padding: 80px var(--side);
  display: grid; grid-template-columns: minmax(0, 920fr) 440px;
  gap: 80px; align-items: center;
}
.lead__text { display: flex; flex-direction: column; gap: 14px; }
.lead__h { font-size: 44px; font-weight: 800; line-height: 47.52px; letter-spacing: -1.2px; color: #fff; }
.lead__p { font-size: 17px; font-weight: 500; line-height: 26.35px; color: rgba(255,255,255,.85); }

.lead__free { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.lead__free b { font-size: 15px; font-weight: 800; line-height: 20.49px; color: #F8AC7E; }
.lead__free span { font-size: 15px; font-weight: 500; line-height: 21.75px; }

/* Подпись с фотографией: круг 72 и две строки. */
.lead__who { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.lead__ava { width: 72px; height: 72px; border-radius: var(--r-pill); object-fit: cover; object-position: center top; }
.lead__whotxt { display: flex; flex-direction: column; gap: 3px; }
.lead__whotxt b { font-size: 16px; font-weight: 600; line-height: 21.86px; }
.lead__whotxt i { font-style: normal; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6); }

.lead__form {
  background: #fff; border-radius: var(--r-card); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.lead__fld input {
  width: 100%; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-fld); background: #fff; font: inherit;
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.lead__fld input::placeholder { color: var(--ink-3); }
.lead__fld input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lead__agree { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.lead__agree a { color: var(--accent-2); text-decoration: underline; }
.lead__btn {
  margin-top: 4px; padding: 16px 24px; border: 0; border-radius: var(--r-fld);
  background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 600; cursor: pointer;
}
.lead__btn:hover { background: var(--accent-2); }

/* ─── Планшет ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .prg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp__grid { grid-template-columns: 1fr; }
  .lead__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .prg__h, .stp__h, .faq__h { font-size: 32px; line-height: 1.15; }
  .lead__h { font-size: 34px; line-height: 1.1; }
}

/* ─── Телефон 390 ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .prg__in, .stp__in, .faq__in, .lead__in { padding: 48px var(--side); gap: 24px; }
  .prg__grid { grid-template-columns: 1fr; }
  .prg__h, .stp__h, .faq__h { font-size: 26px; letter-spacing: -0.6px; }
  .stp__card { padding: 24px; }
  .faq__item { padding: 18px 20px; }
  .faq__q { font-size: 16px; }
  .faq__a { font-size: 15px; line-height: 23px; }
  .lead__h { font-size: 28px; }
  .lead__p { font-size: 15px; line-height: 23px; }
  .lead__form { padding: 20px; }
  .lead__ava { width: 56px; height: 56px; }
}

/* ─── Подвал (256:834) ────────────────────────────────────────────────────
   Фон #1D222A, поля 64, зазор 40; верх — бренд 320 и колонки 1072. */
.ftr { background: var(--bg-dark); color: #fff; }
.ftr__in {
  max-width: var(--wrap); margin: 0 auto; padding: 64px var(--side);
  display: flex; flex-direction: column; gap: 40px;
}
.ftr__top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }

.ftr__brand { display: flex; flex-direction: column; gap: 16px; }
.ftr__logo { display: flex; align-items: center; gap: 12px; }
.ftr__mark { display: block; flex: none; }
.ftr__word { display: flex; flex-direction: column; gap: 3px; }
.ftr__word b { font-size: 20px; font-weight: 800; line-height: 27.32px; color: #fff; }
.ftr__word i { font-style: normal; font-size: 9px; font-weight: 600; line-height: 12.29px; color: #fff; }
.ftr__about { font-size: 14px; font-weight: 500; line-height: 21px; color: #fff; }

/* Кнопки соцсетей: скруглённые, поля 9/14. В макете заливка белая — на тёмном
   фоне белый текст на белом не читался бы, поэтому здесь прозрачная подложка
   с белой рамкой: форма макета сохранена, текст остался видимым. */
.ftr__soc { display: flex; gap: 8px; flex-wrap: wrap; }
.ftr__soc a {
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 17.76px;
}
.ftr__soc a:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.ftr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ftr__col { display: flex; flex-direction: column; gap: 10px; }
/* Белый, а не серый: в макете (256:348) заголовок колонки #FFFFFF.
   Трекинг задан в пикселях — .06em при кегле 11 даёт 0.66 вместо 0.88. */
.ftr__h { font-size: 11px; font-weight: 600; line-height: 15.03px; letter-spacing: 0.88px; color: #fff; }
.ftr__col a, .ftr__col span { font-size: 14px; font-weight: 500; line-height: 19.6px; color: #fff; }
.ftr__col a:hover { color: var(--accent); }

.ftr__line { height: 1px; background: rgba(255,255,255,.15); }

.ftr__bottom { display: grid; grid-template-columns: minmax(0, 788fr) minmax(0, 620fr); gap: 32px; }
.ftr__req { display: flex; flex-direction: column; gap: 5px; }
.ftr__req div { font-size: 13px; font-weight: 500; line-height: 17.76px; color: #fff; }
.ftr__ip { font-size: 12px !important; line-height: 17.4px !important; }
.ftr__srv { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ftr__links { display: flex; gap: 20px; }
.ftr__links a { font-size: 13px; font-weight: 500; line-height: 17.76px; color: #fff; text-decoration: underline; }
.ftr__note { font-size: 12px; font-weight: 500; line-height: 18px; text-align: right; color: rgba(255,255,255,.7); }

@media (max-width: 1180px) {
  .ftr__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__bottom { grid-template-columns: minmax(0, 1fr); }
  .ftr__srv { align-items: flex-start; }
  .ftr__note { text-align: left; }
}

@media (max-width: 760px) {
  .ftr__in { padding: 40px var(--side); gap: 28px; }
  .ftr__cols { grid-template-columns: 1fr; gap: 20px; }
}