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

/* ---------- «Что влияет на стоимость» ---------- */
.factors__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;}
.factor{display:flex;align-items:flex-start;gap:20px;background:var(--gray);border-radius:20px;padding:30px;}
.factor__num{width:62px;height:62px;flex:none;border-radius:18px;background:var(--grad);color:#fff;
  font-size:24px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(237,44,47,.35);}
.factor__text{display:flex;flex-direction:column;gap:10px;}
.factor__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);}
.factor__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);}

/* ---------- Адаптив ---------- */
@media (max-width:1440px){
  .factor{padding:25px;gap:15px;}
  /* Кнопки героя в колонку. В styles.css на этой ширине им задан только
     gap:12px и они остаются в строку; ниже 1025px там уже своя колонка,
     так что правило работает на диапазоне 1025–1440px. */
  .hero__btns{gap:12px;max-width:600px;flex-direction:column;align-items:flex-start;}
}
@media (max-width:1280px){
  .factors__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .factors__grid{grid-template-columns:1fr;gap:20px;}
}
@media (max-width:480px){
  .factor{flex-direction:column;}
}