/* 404affiliate.marketing · типографика и отступы (ТЗ 2026-10-23-typography-spacing.md).
   Значения только из брендбука (tokens.css): шкала --s-*, ширины строк, интерлиньяж, кегли clamp().
   Подключается после brand.css на /, /en/, /bg/. Разметка предложений: span.ln (typo.py). */
:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --section:var(--s-8);--hero:var(--s-9);--gutter:20px;--grid-gap:16px;
  --measure-text:62ch;--measure-lead:52ch;--measure-h1:20ch;--measure-h2:26ch;
  --lh-h1:1.02;--lh-h2:1.08;--lh-lead:1.5;--lh-text:1.6;
  --fs-lead:clamp(1.0625rem,1.055rem + .286vw,1.3125rem);
  --fs-text:clamp(1rem,1.039rem + .095vw,1.125rem);
}
@media (min-width:768px){:root{--grid-gap:24px}}
@media (min-width:1024px){:root{--section:var(--s-9);--hero:var(--s-10)}}

/* ---------- 1. каждое предложение с новой строки ---------- */
.ln{display:block}
.ln+.ln{margin-top:var(--s-2)}
.fq-a p+p,.fd-body>p+p,.fd-more>p+p,.fd-body>p+.fd-more,.fd-more>ul+p,.fd-body>p+ul{margin-top:var(--s-4)!important}

/* ---------- 2. отступы ---------- */
#results>div,#services>div,#about>div,#cases>div,#steps>div,#faq>div,#founders>div,#start>div{padding-top:var(--section)!important;padding-bottom:var(--section)!important}
#ads>div{padding-bottom:var(--section)!important}
/* первый экран: H1 → подзаголовок 24, подзаголовок → слоган 16, слоган/лид → кнопки 32, между кнопками 12 */
#top h1+p{margin-top:var(--s-5)!important}
#top h1+p+.hero-slogan{margin-top:var(--s-4)!important}
#top h1~.hm-btns{margin-top:var(--s-6)!important;gap:var(--s-3)!important}
/* H2 секции → лид 16, лид → контент 32 */
@media (max-width:639px){.rv-head h2+p,.rv-head h2+.ad-sub,.ab-h+.ab-sub{margin-top:var(--s-4)!important}}   /* на компьютере лид стоит справа от H2 */
.rv-head{margin-bottom:var(--s-6)!important}
/* карточки и пункты: номер → заголовок 8, заголовок → описание 8, между пунктами списка 12 */
.sg-item{row-gap:var(--s-2)!important}.bn-t{gap:var(--s-2)!important}
.sg-name+.sg-pts,.bn-h+.bn-d{margin-top:0!important}.fd-name+.fd-role{margin-top:var(--s-2)!important}
.bn-list li+li,.fd-list li+li{margin-top:var(--s-3)}
.fd-grid,.bn-wrap{gap:var(--grid-gap)}
.hm-cta-row{gap:var(--s-3)!important}
.hm-cta-note,.qz-note{margin-top:var(--s-2)!important}

/* ---------- 3. ширина строки, интерлиньяж, кегли ---------- */
#top h1{line-height:var(--lh-h1)!important;max-width:var(--measure-h1)}
@media (min-width:1024px){#top h1{max-width:none}}
h2.font-display,.ab-h{line-height:var(--lh-h2)!important}
#top h1+p,.ad-sub,.ab-sub,.qz-lead,.fd-lead{font-size:var(--fs-lead)!important;line-height:var(--lh-lead)!important;max-width:var(--measure-lead)!important}
.fq-a p,.fd-body p,.fd-more li,.ab-desc,.rv-next{font-size:var(--fs-text)!important;line-height:var(--lh-text)!important;max-width:var(--measure-text)}

/* ---------- 4. переносы ---------- */
h1,h2,h3,.bn-h,.sg-name,.fq-qt,.fd-name,a.rv-more,.hm-outline,.fq-tg,.qz-submit,.qz-cta,.qz-alt,button,header a,nav a{hyphens:none!important;-webkit-hyphens:none!important;text-wrap:balance;overflow-wrap:normal}
#top h1+p,.ad-sub,.ab-sub,.qz-lead,.fd-lead,.rv-ctx{text-wrap:balance;hyphens:manual;-webkit-hyphens:manual}
p,li,dd,figcaption,.bn-d,.sg-pts,.ln{text-wrap:pretty;hyphens:manual;-webkit-hyphens:manual}