/* ============================================================
   ZevsHost — fluid-type.css
   Additive typography-refinement layer (Apple optical discipline:
   size-specific tracking, inverse leading, weight-led hierarchy).
   Load AFTER style.css. Does not redefine --font-body/--font-heading.
   Verified against css/style.css + live markup (2026-09).
   Note: .hero-title / .footer-copyright / kbd do not exist in this
   codebase — mapped to .hero h1 / .footer-bottom; kbd dropped.
   ============================================================ */

/* --- 1. Optical sizing + font features ------------------------
   Inter v4 is a variable font with an opsz axis: glyphs literally
   change shape with size (tighter apertures at display sizes,
   open forms at text sizes). Kerning, ligatures and contextual
   alternates are Inter's built-in micro-fit — near-free polish. */
:root { font-optical-sizing: auto; }

body {
    font-feature-settings: "kern", "liga", "calt";
    /* Apple ships subpixel-off AA: lighter stems, crisper Cyrillic
       at small sizes on dark backgrounds. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 8. Cyrillic/Latin harmony --------------------------------
   "locl" activates localized glyph variants where Inter has them
   (e.g. Cyrillic-appropriate forms), so ru/uk pages don't render
   with Latin-biased defaults. */
:lang(ru), :lang(uk) { font-feature-settings: "kern", "liga", "calt", "locl"; }

/* --- 2+3. Tracking & leading, size-specific -------------------
   Apple's rule: tracking is never one value for all sizes.
   Large display type — negative (letters drift apart as they
   grow); body — near zero; tiny uppercase labels — positive.
   Leading runs inverse to size: tight for display, generous for
   body (Cyrillic ascenders/descenders want ~1.65, not Latin 1.5). */
h1, .hero h1 { letter-spacing: -0.03em; line-height: 1.05; }
h2           { letter-spacing: -0.02em; line-height: 1.15; }
h3           { letter-spacing: -0.015em; line-height: 1.25; }
h4, h5, h6   { letter-spacing: -0.01em; line-height: 1.3; }

p, li, .btn { letter-spacing: 0; }

/* Tiny type opens up with positive tracking (uppercase labels
   especially — caps have no ascender rhythm to separate them).
   NB: style.css uses px tracking (1px/2px) on labels; em wins
   here and scales with the font. */
.section-label, .stat-label, .badge, small,
.footer-bottom, .cookie-text, .news-meta {
    letter-spacing: 0.02em;
}
.section-label, .stat-label { letter-spacing: 0.08em; /* uppercase: extra air */ }

/* Buttons/badges are single-line UI chrome — compact leading. */
.btn, .badge, .section-label { line-height: 1.2; }

/* Body prose: 1.65 minimum for comfortable Cyrillic texture.
   style.css body is 1.7 — kept; these cover prose islands that
   set their own tighter values. */
.kb-article-body p, .news-article-full p, .doc-body p,
.faq-answer p, .footer-desc, .footer-brand p {
    line-height: 1.65;
}
.kb-article-body li, .news-article-full li, .doc-body li,
.plan-features li {
    line-height: 1.6;
}

/* --- 4. Weight-led hierarchy ----------------------------------
   Emphasis via weight adds presence without eating space.
   Inter 600 reads as "confident", 700 as "shouting" inline.
   (.hero h1 is already 900 and .section-header h2 is 800 in
   style.css — heavier than spec, intentionally left untouched.) */
strong, b, .plan-name, .faq-question { font-weight: 600; }

/* --- 5. Fluid sizing ------------------------------------------
   .hero h1 and .section-header h1/h2 are ALREADY fluid in
   style.css (clamp 2.5–4.5rem / 1.8–2.8rem) — not duplicated.
   Element-level floor below only catches unstyled headings
   (prose articles, docs); component rules keep their own sizes. */
h3 { font-size: clamp(1.15rem, 0.8vw + 0.9rem, 1.5rem); }

/* Reader-safe measure: 45–75 characters. 68ch caps the line so
   trilingual prose never stretches across a 1200px container. */
.kb-article-body p, .news-article-full p, .doc-body p,
.kb-article-body li, .doc-body li {
    max-width: 68ch;
}

/* --- 6. Tabular figures on numbers ----------------------------
   Proportional digits shift width when values change (price
   toggles, animated counters). Tabular figures keep columns and
   counters rock-steady. Big money numbers also get display-grade
   negative tracking and solid leading. */
.plan-price, .promo-discount, .stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.plan-price { line-height: 1; }

/* --- 7. Small polish ------------------------------------------
   text-wrap:pretty — no orphan word on the last line of
   headings/subtitles; balance on the hero headline only
   (Chromium limits balance to ~6 lines — fine for a hero). */
h1, h2, h3, .section-subtitle { text-wrap: pretty; }
.hero h1 { text-wrap: balance; }

/* Underlines clear Cyrillic descenders (р, у, ф) instead of
   striking through them; thin stroke matches Inter's weight.
   Global links are underline-none in style.css — this styles
   the prose links that do underline. */
a { text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }

/* --- 9. Prose rhythm (KB / news / terms / privacy) ------------
   Heading top-margin in em: space scales with the heading's own
   size, so hierarchy stays proportional at every viewport. */
.kb-article-body h2, .news-article-full h2, .doc-body h2 {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}
.kb-article-body h3, .news-article-full h3, .doc-body h3 {
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}

/* Anchor-linked heading (#section jumps in long docs): a quiet
   ring so the reader lands with orientation, not a highlighter. */
.kb-article-body :target, .doc-body :target, .news-article-full :target {
    scroll-margin-top: 96px; /* clear the fixed header */
    outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    outline-offset: 6px;
    border-radius: 4px;
}

/* Drop cap — opt-in via .article-drop-cap on the article wrapper
   (only worth it on long-form >600 words; length is unknowable in
   CSS, so the server/editor decides). Outfit for display flavor. */
.article-drop-cap > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 3em;
    line-height: 0.85;
    padding: 0.05em 0.12em 0 0;
    font-weight: 800;
}

/* --- 10. Large-screen size bump -------------------------------
   16px body feels small on 27"+ monitors; 106.25% ≈ 17px base,
   everything in rem scales with it (SF Text→Display approach). */
@media (min-width: 1400px) {
    html { font-size: 106.25%; }
}

/* --- 11. Reduced motion ---------------------------------------
   Typography here is static — nothing to switch off. If animated
   counters are ever added to .stat-value, gate them behind
   @media (prefers-reduced-motion: reduce) and show the final
   value immediately; tabular-nums above already prevents jitter. */