/* ============================================================
   type-system.css — unified typographic system (loaded LAST)
   Browserbase-inspired discipline on the Geist / Geist Mono stack:
   · bold tight display headlines, sentence case
   · quiet regular subheads directly beneath them
   · MONO for everything meta: labels, tags, captions, chips,
     stat sublabels — small, tracked, uppercase
   · body 16px/1.6 · big bold stat numbers · sans buttons
   Scoped to shared semantic classes only — component-internal
   micro-type (demo windows, lenses, rails) is deliberately
   untouched.
   ============================================================ */

:root {
    /* display */
    --t-disp-xl: clamp(2.75rem, 5.4vw, 4rem);
    --t-disp-lg: clamp(2rem, 3.6vw, 2.75rem);
    --t-disp-md: clamp(1.5rem, 2.6vw, 2rem);
    --t-track-tight: -0.025em;
    /* body */
    --t-body-xl: clamp(1.0625rem, 1.5vw, 1.1875rem);
    --t-body: 1rem;
    --t-body-sm: 0.875rem;
    /* mono meta */
    --t-mono-label: 0.75rem;    /* uppercase tracked labels */
    --t-mono-meta: 0.8125rem;   /* dates, captions, chips    */

    /* keep legacy size vars coherent with the new scale */
    --font-size-hero: var(--t-disp-xl);
    --font-size-2xl: var(--t-disp-lg);
}

/* ---- display headlines ------------------------------------- */
h1 {
    font-size: var(--t-disp-xl);
    font-weight: 700;
    letter-spacing: var(--t-track-tight);
    line-height: 1.06;
    text-wrap: balance;
}

.section-title {
    font-size: var(--t-disp-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.eh,
.domain-title,
.coda-statement {
    letter-spacing: -0.02em;
}
.eh { font-size: var(--t-disp-md); font-weight: 700; line-height: 1.2; }
.domain-title { font-size: var(--t-disp-md); font-weight: 700; line-height: 1.2; }

.act-statement { font-size: var(--t-disp-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.coda-statement { font-size: clamp(2.25rem, 4.4vw, 3.25rem); font-weight: 700; line-height: 1.05; }

/* ---- subheads & body --------------------------------------- */
.subtitle,
.section-header .section-desc,
.act-support,
.coda-support {
    font-size: var(--t-body-xl);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
}

.section-desc { font-size: var(--t-body); line-height: 1.6; }
.section-header .section-desc { font-size: var(--t-body-xl); }

.body,
.about-body p,
.faq details p {
    font-size: var(--t-body);
    line-height: 1.65;
}

/* ---- card typography --------------------------------------- */
.card h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.card h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; }
.card p  { font-size: 0.9375rem; line-height: 1.6; }

.team-info h3 { font-size: 1.125rem; font-weight: 600; }
.faq summary  { font-size: 1.0625rem; font-weight: 600; }

/* ---- mono meta layer (the "data voice") -------------------- */
.section-label,
.card-label,
.card-meta,
.ptag,
.demo-tag,
.split-tag,
.quadrant-axis,
.quadrant-poles,
.quadrant-tag,
.marquee-label,
.eyebrow,
.team-role,
.card-badge,
.status-chip,
.stat-label,
.act-label {
    font-family: var(--font-mono, monospace);
    font-size: var(--t-mono-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

figcaption,
.pd-wrap figcaption,
.ui-shot figcaption,
.ua-wrap figcaption,
.chartcard figcaption,
.demo-caption,
.rlegend,
.vkey {
    font-family: var(--font-mono, monospace);
    font-size: var(--t-mono-meta);
    letter-spacing: 0.01em;
    text-transform: none;
}

.chip {
    font-family: var(--font-mono, monospace);
    font-size: var(--t-mono-meta);
    letter-spacing: 0.01em;
}

/* ---- audit fixes ------------------------------------------- */
/* labels inside cards: beat type-system's own .card p rule */
.card p.card-label,
.card p.card-meta { font-size: var(--t-mono-label); }

/* product CTA pills speak button-sans, not mono */
#products .card-meta {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none;
}

/* ---- stats: big bold number over mono sublabel ------------- */
.stat-num { font-weight: 700; letter-spacing: -0.03em; }

/* ---- buttons: clean sans (mono is for text-CTAs only) ------ */
.btn {
    font-family: var(--font-sans, sans-serif);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
}

/* ---- nav / footer ------------------------------------------ */
.nav-links a { font-size: 0.875rem; font-weight: 500; }
.footer-text, .footer-links a { font-size: 0.875rem; }

/* ---- small screens: keep the scale calm -------------------- */
@media (max-width: 560px) {
    h1 { font-size: clamp(2.25rem, 9.5vw, 2.75rem); }
    .section-title { font-size: clamp(1.6rem, 6.8vw, 2rem); }
    .nav-links { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
    .nav-links a, .logo { white-space: nowrap; font-size: 0.8125rem; }
}