/* Единая типографика сайта. Подключается последней на всех страницах и задаёт
   размеры и отступы текста по уровням — одинаково в любом месте сайта.

   Заголовок первого экрана (H1) ........ 40px (телефон 32)
   Заголовок экрана (H2) ................ 32px (телефон 28)
   Заголовок второго уровня (H3) ........ 20px — карточки, этапы, марки, версии, тезисы
   Описание и подзаголовок .............. 14px — под заголовком экрана и под заголовком второго уровня
   Отступы: надзаголовок → заголовок 12px, заголовок экрана → подзаголовок 8px,
            заголовок второго уровня → описание 6px, линии/иконка → заголовок второго уровня 20px */
:root{
  --h2-size:2rem;--h2-lh:2.25rem;
  --h3-size:1.25rem;--h3-lh:1.5rem;
  --desc-size:.875rem;--desc-lh:1.25rem;
  --h3-top:1.25rem;--desc-gap:.375rem;
}

/* Заголовок экрана */
.sec h2,.start h2,.process h2,.pick-panel h2,.contacts-card h2,.final h2{
  font:500 var(--h2-size)/var(--h2-lh) var(--font-h);letter-spacing:-.04em}

/* Подзаголовок экрана */
.sec-sub,.pick-sub,.contacts-sub,.cb-sub,.faq-call,.final-text p:not(.eyebrow){
  font:300 var(--desc-size)/var(--desc-lh) var(--font-t)}
.sec-sub,.pick-sub,.contacts-sub,.faq-call,.final-text p:not(.eyebrow){margin-top:.5rem}
/* «Перезвоните мне» — заголовок второго уровня внутри экрана, описание под ним через 6px */
.cb-h{margin-top:.75rem}
.cb-sub{margin-top:var(--desc-gap)}

/* Заголовок второго уровня */
.scard h3,.feat h3,.pay-card h3,.st4 h3,.brand h3,.ver h3,.car-t,.colors-t,.cb-h{
  font:500 var(--h3-size)/var(--h3-lh) var(--font-h);letter-spacing:-.03em}
.scard h3,.feat h3,.pay-card h3,.st4 h3{margin-top:var(--h3-top)}

/* Описание под заголовком второго уровня */
.scard p,.feat p,.pay-card p,.st4 p,.brand p,.car-cta p,.ver-note,.fq-a p{
  font:300 var(--desc-size)/var(--desc-lh) var(--font-t)}
.scard p,.feat p,.pay-card p,.st4 p,.brand p,.car-cta p{margin-top:var(--desc-gap)}
.scard p,.pay-card p{margin-bottom:1.25rem}
.brand p{max-width:23rem}

@media (max-width:640px){
  :root{--h2-size:1.75rem;--h2-lh:1.9rem;--h3-top:.75rem}
}

/* Этапы процесса — в две строки, как в макете: описание занимает всю ширину колонки */
.st4 p{max-width:none;padding-right:1rem}

.scard p:last-child,.pay-card p:last-child{margin-bottom:0}