/* =====================================================================
   uDesk landing — GLOBAL TYPOGRAPHY SYSTEM (single source of truth)
   Loaded LAST so it wins the cascade. All font-family rules live here;
   font-family is the ONLY property this file sets on existing sections
   (sizes / weights / colors / spacing are left untouched), except where
   Task 1 explicitly overrides hero/nav/CTA metrics in landing.css.

   Roles:
     Jersey 20          -> oversized pixel display headlines, Jersey CTAs,
                           animation/short labels, badges, stat numerals
     Plus Jakarta Sans  -> long body paragraphs, links, nav items, pills
     Stack Sans Notch   -> hero secondary headings / summary lines,
                           feature card titles
   ===================================================================== */

:root {
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-head: 'Jersey 20', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-eyebrow: 'Jersey 20', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-label: 'Jersey 20', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display: 'Jersey 25', 'Jersey 20', 'Plus Jakarta Sans', sans-serif;
    --font-notch: 'Stack Sans Notch', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-card-title: 'Stack Sans Notch', 'Jersey 20', 'Plus Jakarta Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-head h2,
.feature-copy h3 {
    font-family: var(--font-head);
}

/* ---------- H2 responsive type (size/weight/leading only; families untouched)
   Hero .heading-summary-hero is excluded — keeps its original metrics. ---------- */
h2:not(.heading-summary-hero),
.section-head h2,
.final-cta h2 {
    font-weight: 400;
    /* ~48px mobile → ~96px large desktop — two-line display heads */
    font-size: clamp(3rem, calc(1rem + 5.5vw), 6rem);
    line-height: 0.78;
    letter-spacing: -0.01em;
}

/* Force Jersey / Notch halves onto two stacked lines (except demo intro) */
h2:not(.heading-summary-hero) .h2-jersey,
h2:not(.heading-summary-hero) .h2-notch {
    display: block;
}

.demo-intro h2 .h2-jersey,
.demo-intro h2 .h2-notch {
    display: inline;
}

.eyebrow,
.spot-tag,
.price-badge,
.launch-badge,
.install-service-tag,
.demo-view-badge,
.req-ext-kicker,
.req-ext-count,
.rec-badge,
.tech-badge,
.iw-step .nm,
.wf-node .lbl-top,
.side-card h5,
.req-card h4,
.footer-col h5 {
    font-family: var(--font-label);
}

.spot-stat .num,
.price-amount .amt,
.price-amount .cur,
.step .n,
[data-count-to] {
    font-family: var(--font-display);
}

body,
p,
a,
li,
.nav-links a,
.feature-list li,
.price-features li,
.faq-a p,
.hero-sub,
.section-head p,
.feature-copy > p,
.buy-item,
.tech-badge b {
    font-family: var(--font-body);
}

.fcard-title,
.tabpanel .layoutc-card h4,
.heading-summary-hero,
.hero-lede {
    font-family: var(--font-notch);
}

/* ---------- H2 two-font split — family only; size/leading inherit ---------- */
.h2-jersey {
    font-family: 'Jersey 20', var(--font-head);
}

.h2-notch {
    font-family: 'Stack Sans Notch', var(--font-notch);
}

/* ---------- FAQ typography — question buttons use standard body size ---------- */
.faq-q {
    font-family: 'Plus Jakarta Sans', var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
}

.faq-a p {
    font-family: 'Plus Jakarta Sans', var(--font-body);
    font-weight: 400;
    font-size: 1rem; /* page body default (16px) — not the prior clamp override */
    line-height: 1.7;
    letter-spacing: normal;
}