/* P26M — typography base.
 * Page-level rules; section-specific overrides live in /sections/*.
 */

html { font-size: 100%; }

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    letter-spacing: var(--tracking-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    font-feature-settings: "ss01", "cv11", "tnum";
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-text);
    text-wrap: balance;
}

h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 600; }
h4 { font-size: var(--fs-xl);  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 600; }
h5 { font-size: var(--fs-lg);  line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); font-weight: 600; }
h6 { font-size: var(--fs-base);line-height: var(--lh-snug); letter-spacing: var(--tracking-wider);  font-weight: 600; text-transform: uppercase; }

p {
    color: var(--color-text-secondary);
    max-width: 65ch;
    line-height: var(--lh-relaxed);
}

p strong, p b { color: var(--color-text); font-weight: 600; }

a:not(.btn) {
    color: var(--color-brand);
    transition: color var(--dur-fast) var(--ease-out);
}
a:not(.btn):hover { color: var(--color-brand-strong); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-feature-settings: "ss02", "ss03", "calt";
    font-size: 0.92em;
}

mark {
    background-color: rgba(115, 196, 75, 0.18);
    color: inherit;
    padding: 0 0.2em;
    border-radius: var(--radius-xs);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-7) 0;
}

/* Eyebrow text — small caps-y label above headings. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-brand);
}
.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand);
    box-shadow: 0 0 0 4px rgba(115, 196, 75, 0.18);
}

/* Lead paragraph after a heading. */
.lead {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    max-width: 60ch;
    line-height: var(--lh-relaxed);
}

/* Numeric metrics — Geist Mono with tabular numerals. */
.metric {
    font-family: var(--font-mono);
    font-feature-settings: "tnum", "ss02";
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tight);
}

/* ── Центрированные абзацы ─────────────────────────────────────────────────
   Глобальный p { max-width: 65ch } режет абзац по длине строки, но сама
   коробка при этом остаётся прижатой к левому краю: text-align центрирует
   текст ВНУТРИ коробки, а не коробку. В центрированных блоках абзац обязан
   получить margin-inline: auto, иначе визуально уезжает влево.

   Плюс компенсация трейлинговой разрядки: letter-spacing добавляет интервал
   после последнего символа, он входит в ширину строки и при центрировании
   сдвигает глифы влево ровно на один интервал.
   ───────────────────────────────────────────────────────────────────────── */
.solution__stat-block p,
.pricing__head p,
.cta p,
.finder-cta__inner p,
.section__head--center p {
    margin-inline: auto;
}

.solution__stat-pretitle,
.tier__price-unit,
.tier__included-label,
.tier__badge,
.pricing__footnote,
.cta__pretitle,
.roi__actions-note {
    text-indent: var(--tracking-wider);
}