/* ============================================================
   Страница «Согласование» — блоки только этой страницы.
   Общие компоненты (шаги, карточки с иконкой, hero-строки) — в pages.css.
   Подключается ПОСЛЕ styles.css и pages.css.
   ============================================================ */

/* ---------- HERO ---------- */
.hero--appr .hero__title{max-width:760px;}
.hero--appr .hero__meta{gap:15px;}
.hero--appr .hero__features{gap:40px;flex-wrap:wrap;}
.hero--appr .feat svg{width:21px;height:21px;flex:none;}

/* ---------- «Конкретные суммы штрафов» — секция на градиенте ---------- */
.fines{position:relative;z-index:1;margin-top:100px;padding:90px 0;overflow:hidden;}
.fines__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.fines__grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#fd1400 0%,#ED2C2F 100%);opacity:.65;}
.fines__inner{position:relative;z-index:1;}
/* Заголовок в макете идёт одной строкой — базовых 1050px не хватает */
.fines .head__text{max-width:1400px;}
.fines__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;}
.fine{background:var(--gray);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:20px;}
.fine__icon{width:62px;height:62px;flex:none;border-radius:18px;background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(237,44,47,.35);}
.fine__text{display:flex;flex-direction:column;gap:10px;}
.fine__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);}
.fine__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);}

/* ---------- Пилюля внутри заголовка: «= скидка 10%» ---------- */
.h2__pill{display:inline-flex;align-items:center;padding:8px 36px;border-radius:999px;
  background:var(--grad);color:#fff;line-height:1.2; border-radius:15px; text-transform:uppercase;}

/* Заголовки этих секций в макете идут одной строкой */
.facade .head__text,.package .head__text{max-width:1300px;}

/* ---------- Адаптив ---------- */
@media (max-width:1280px){
  .fines__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1024px){
  .hero--appr .hero__title{max-width:none;}
}
@media (max-width:768px){
  .fines{padding:60px 0;}
  .fines__grid{grid-template-columns:1fr;gap:20px;}
  .hero--appr .hero__features{gap:12px;flex-direction:column;align-items:flex-start;}
  .h2__pill{padding:0 18px;}
}

/* ---------- Радужная полоса под «Кейсами» и «Пакетным предложением» ----------
   Приём тот же, что у .faq__bg в styles.css: картинка абсолютом внутри
   relative-обёртки, с запасом сверху и снизу — чтобы полоса заходила за
   границы секций, а не обрывалась ровно по ним. Секции уже
   position:relative;z-index:1 (styles.css), поэтому контент остаётся поверх. */
.cases-band{position:relative;}
.cases-band__img{position:absolute;left:0;top:-140px;width:100%;height:calc(100% + 280px);
  object-fit:fill;opacity:.3;z-index:0;pointer-events:none;}

/* На этой странице полоса переехала выше, поэтому у FAQ своей быть не должно:
   две одинаковые картинки перекрывались бы на стыке «Пакетного» и «Вопросов». */
.faq__bg{display:none;}