/* template-prom — кастомные стили лендинга поверх базового style.css.
   Все классы префиксованы `prom-`, чтобы не пересекаться с основным сайтом. */

/* ─── Полоса доверия (4 пункта) ─── */
.prom-trust-grid{
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.scard--trust{
    text-align:center;
    align-items:center;
    padding:26px 22px;
    gap:8px;
}
.prom-trust__big{
    font-size:28px;
    font-weight:800;
    color:var(--blue);
    line-height:1.1;
}
.prom-trust__small{
    font-size:14px;
    color:var(--ink-2);
    line-height:1.4;
    max-width:200px;
}

/* ─── Сетка типов систем (5 полупром-форматов: 3 в ряд на десктопе) ─── */
.prom-systems-grid{
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* ─── Сетка сегментов объектов (8 шт.: 4 в ряд на десктопе) ─── */
.prom-segments-grid{
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
.scard--segment{
    text-align:center;
    align-items:center;
    padding:24px 18px;
    gap:10px;
}
.scard--segment .scard__ic{
    margin-bottom:4px;
}
.scard--segment h3{
    font-size:17px;
}
.scard--segment p{
    font-size:13px;
    color:var(--ink-2);
}

/* ─── Шаги процесса (6 шт.: 3 в ряд на десктопе, нумерация в кружке) ─── */
.prom-steps-grid{
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.scard--step{
    padding:24px 22px;
    gap:10px;
}
.prom-step__num{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:16px;
    margin-bottom:8px;
}
.scard--step h3{
    font-size:18px;
}
.scard--step p{
    font-size:14px;
    color:var(--ink-2);
}

/* ─── Список «что в форме» (Безнал / Договор / Гарантия) ─── */
.prom-what{
    list-style:none;
    padding:0;
    margin:18px 0 0;
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:15px;
}
.prom-what li{
    display:flex;
    align-items:center;
    gap:10px;
}
.prom-what__ic{
    flex:none;
    width:22px;
    height:22px;
    display:inline-grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
}
.prom-what__ic svg{
    width:14px;
    height:14px;
    stroke-width:2.6;
}

/* ─── TABLET / MOBILE (≤ 920 px) ─── */
@media (max-width:920px){
    .prom-trust-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .prom-trust__big{font-size:22px}
    .prom-systems-grid{grid-template-columns:1fr;gap:14px}
    .prom-segments-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .prom-steps-grid{grid-template-columns:1fr;gap:14px}

    /* Форма заявки: на ≤ 920 px ОДНА колонка (десктоп grid 1.1fr .9fr ломает узкие
       экраны — суммарная min-content шире viewport). Padding убираем до 24×18 px.
       Это устраняет горизонтальный overflow на узких планшетах и DevTools narrow window. */
    .requestband{
        grid-template-columns:1fr;
        padding:28px 22px;
        gap:24px;
        border-radius:18px;
        max-width:100%;
        box-sizing:border-box;
    }
    .requestband > div h2.h2{font-size:24px;line-height:1.2;word-break:break-word}
    .requestband__form{padding:22px 18px;max-width:100%;box-sizing:border-box}
    .requestband__form input,
    .requestband__form select,
    .requestband__form textarea{max-width:100%;box-sizing:border-box}
}

/* ─── PHONE (≤ 600 px) — блоки доверия на всю ширину, по строкам ─── */
@media (max-width:600px){
    .prom-trust-grid{grid-template-columns:1fr;gap:12px}
    .scard--trust{padding:22px 18px;text-align:left;align-items:flex-start;flex-direction:row;gap:14px}
    .scard--trust .prom-trust__big{font-size:22px;flex:0 0 auto;min-width:90px}
    .scard--trust .prom-trust__small{max-width:none;flex:1}

    /* Дополнительно ужимаем padding requestband на узких phone-ширинах */
    .requestband{padding:24px 16px}
    .requestband__form{padding:20px 14px}
    .requestband > div h2.h2{font-size:22px}
}