/* ══════════════════════════════════════════════════════════════════════════
   /razbor/ — AI-разбор бизнеса. Дополнение к automy.css: базовые компоненты
   (шапка, hero, .inc, .plan, .mod, FAQ, модалка) берутся оттуда без изменений,
   здесь только то, чего на основном лендинге не было.
   ══════════════════════════════════════════════════════════════════════════ */

/* подзаголовок hero: на главной его нет, там роль лида играет сам заголовок.
   balance выравнивает строки по длине: без него на широком экране последняя
   строка висела одна по центру, а заголовок рвался в неудачном месте */
.hero-sub{
  margin:clamp(16px,2vw,24px) auto 0;max-width:min(680px,92vw);
  font-size:clamp(16px,1.6vw,23px);line-height:1.5;color:var(--muted);
  text-wrap:balance;
}
.hero-title{text-wrap:balance;}
/* подпись про оплату: на muted2 её не видно с телефона, держим читаемый контраст */
.hero-cap{margin-top:2px;font-size:14px;color:rgba(255,255,255,.62);text-align:center;max-width:min(420px,88vw);}
.hero .eyebrow{margin-bottom:18px;}

/* планшет: заголовок в две строки, подпись под кнопкой уже стоит в потоке */
@media (max-width:980px){
  .hero-sub{max-width:min(560px,90vw);}
}
@media (max-width:620px){
  .hero-sub{font-size:16px;line-height:1.45;max-width:100%;}
  .hero-cap{font-size:12.5px;}
}

/* лид под заголовком секции */
.sec-lead{
  margin-top:clamp(14px,1.6vw,20px);max-width:820px;
  font-size:clamp(15.5px,1.4vw,19px);line-height:1.6;color:var(--muted);
}

/* в карточках .inc на этой странице есть текст под заголовком */
.inc{justify-content:flex-start;min-height:clamp(150px,13vw,196px);}
.inc p{font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.5;color:var(--muted);max-width:34ch;}

/* «что получите»: четыре карточки, на десктопе двумя рядами по две */
.inc-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:820px){.inc-grid.four{grid-template-columns:1fr;}}

/* «кому подходит» — две колонки со списками */
.fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;}
.fit{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,2.4vw,38px);
}
.fit-yes{border-color:rgba(237,126,47,.3);background:linear-gradient(150deg,rgba(237,126,47,.1),rgba(255,255,255,.012));}
.fit .ptag{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:18px;
}
.fit-no .ptag{color:var(--muted);}
.fit ul{list-style:none;display:flex;flex-direction:column;gap:14px;}
.fit li{position:relative;padding-left:30px;font-size:clamp(15px,1.3vw,17.5px);line-height:1.5;color:var(--ink);}
.fit li::before{
  content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--orange);
}
.fit-no li{color:var(--muted);}
.fit-no li::before{background:none;border:1px solid var(--muted2);}

/* одна карточка тарифа: сетка на три колонки её растягивала на всю ширину */
.price-grid.one{grid-template-columns:minmax(0,460px);justify-content:center;}

.pay-note{
  margin-top:clamp(22px,2.4vw,32px);max-width:820px;
  font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:var(--muted);
}

@media (max-width:820px){
  .fit-grid{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .inc p{max-width:none;}
  .price-grid.one{grid-template-columns:1fr;}
  .hero-cap{font-size:13px;}
}

/* длинные русские заголовки на 106px рвутся в кашу — тот же приём, что на главной */
#problema h2.sec,#kak h2.sec,#itog h2.sec,#komu h2.sec{font-size:clamp(30px,4.4vw,68px);}

/* якоря из шапки: без этого заголовок секции уезжает под прилипшую шапку */
#kak,#itog,#komu,#cena{scroll-margin-top:86px;}