/*
  Voxly Vision type guide — the single source of truth for text size, line height, spacing and colour.
  Agreed with Ravi on 26 Oct 2026 (see the "Voxly Vision Type Style Guide" doc).

  Rules
  - Every text style is set here, once. Pages never set their own text size or colour.
  - Headings use Urbanist; everything else uses Geist.
  - Desktop values apply by default; phone values apply at 767px and below.
  - Exception: the Regulation Library index (rl-* classes) keeps its own smaller card styles.
  - Selectors are prefixed with `html` so they win over older page-level <style> blocks.
*/

:root {
  --vv-black: #000000;
  --vv-slate: #4f5d75;
  --vv-grey: #62666d;
  --vv-blue: #0066ff;
  --vv-white: #ffffff;
  --vv-font-heading: Urbanist, sans-serif;
  --vv-font-text: Geist, sans-serif;
}

/* ---------- Headings (Urbanist 600) ---------- */

/* Page title, landing pages (Homepage, Pricing, Team, Hiring, Blog index): 80px, phone 40px.
   The shared stylesheet already steps it 80 > 70 > 49 > 40 across breakpoints; only font and colour are pinned here. */
html .sr-h1 { font-family: var(--vv-font-heading); font-weight: 600; letter-spacing: -.035em; color: var(--vv-black); }

/* Page title, content pages: 56px / 1.1, phone 38px */
html .post-title,
html .sr-h2.vv-hub-h1,
html .ct-h1,
html .vv-lh-title,
html .utility-content h1 {
  font-family: var(--vv-font-heading); font-weight: 600; font-size: 56px; line-height: 1.1; letter-spacing: -.03em; color: var(--vv-black);
}

/* Section heading, landing pages: 64px / 1.08, phone 40px (shared stylesheet steps 64 > 52 > 40) */
html .sr-h2:not(.vv-hub-h1),
html .sr-h2-center { font-family: var(--vv-font-heading); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: var(--vv-black); }

/* Section heading, content pages: 32px / 1.2, phone 26px */
html .sr-h3.is-reg-section,
html .sr-h3-lg,
html .post-rich h2 {
  font-family: var(--vv-font-heading); font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -.025em; color: var(--vv-black);
}

/* Article sub-heading: 24px / 1.2, phone 21px */
html .sr-h3:not(.is-reg-section),
html .post-rich h3 {
  font-family: var(--vv-font-heading); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; color: var(--vv-black);
}

/* Legal page heading: 22px / 1.3 */
html .vv-legal-h2 {
  font-family: var(--vv-font-heading); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; color: var(--vv-black);
}

/* Card heading: Geist 600, 21px / 1.25 (the one heading set in Geist, as agreed) */
html .post-author-name,
html .sr-plan-name,
html .sr-reg-name,
html .sr-reg-name.is-wide,
html .ind-card-title,
html .blog-card-title,
html .vv-trust-card h3,
html .vv-team h3 {
  font-family: var(--vv-font-text); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; color: var(--vv-black);
}

/* Regulation box value: 22px / 1.25 */
html .reg-glance-value {
  font-family: var(--vv-font-heading); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: var(--vv-black);
}

/* Role page quote on the dark panel: Urbanist 500, 28px / 1.3, phone 22px */
html .role-proof-text,
html .role-proof-text p {
  font-family: var(--vv-font-heading); font-weight: 500; font-size: 28px; line-height: 1.3; letter-spacing: -.015em; color: var(--vv-white);
}

/* ---------- Text (Geist 400) ---------- */

/* Hero intro: 19px / 1.48, slate */
html .post-summary,
html .sr-lead,
html .vv-lh-lead {
  font-family: var(--vv-font-text); font-weight: 400; font-size: 19px; line-height: 1.48; letter-spacing: -.01em; color: var(--vv-slate);
}

/* Blog quote: 19px / 1.55, slate */
html .post-rich blockquote {
  font-family: var(--vv-font-text); font-weight: 400; font-size: 19px; line-height: 1.55; letter-spacing: 0; color: var(--vv-slate);
}

/* Body text: 18px / 1.48, black; bold lead-ins stay black */
html .post-rich,
html .post-rich p,
html .post-rich li,
html .sr-card-text,
html .sr-reg-footer-text,
html .vv-team ul,
html .ct-detail-value,
html .sr-faq-more-text,
html .vv-legal-p,
html .vv-legal-li,
html .utility-content p {
  font-family: var(--vv-font-text); font-weight: 400; font-size: 18px; line-height: 1.48; letter-spacing: -.01em; color: var(--vv-black);
}
html .post-rich strong { color: var(--vv-black); }

/* Supporting text: 17px / 1.48, grey */
html .sr-sub-center,
html .reg-example-caption,
html .con-caption,
html .sr-team-intro-p,
html .vv-teams-more {
  font-family: var(--vv-font-text); font-weight: 400; font-size: 17px; line-height: 1.48; letter-spacing: 0; color: var(--vv-grey);
}

/* Card text: 15px / 1.45, grey */
html .sr-reg-item,
html .sr-plan-item,
html .sr-case-label,
html .ind-card-text,
html .sr-plan-desc,
html .sr-plan-desc-hl,
html .sr-reg-desc,
html .pr-howit,
html .vv-trust-card p {
  font-family: var(--vv-font-text); font-weight: 400; font-size: 15px; line-height: 1.45; letter-spacing: 0; color: var(--vv-grey);
}

/* Card link ("See how it works →"): 15px / 1.33, 600, blue */
html .post-author-link,
html .sr-reg-more,
html .sr-reg-footer-link,
html .ind-card-more,
html .vv-proof-link {
  font-family: var(--vv-font-text); font-weight: 600; font-size: 15px; line-height: 1.33; letter-spacing: 0; color: var(--vv-blue);
}

/* Small print: 14px / 1.43, grey (ruling status lines, bylines, dates, stat labels) */
html .post-rich.is-rulings p:has(> strong + br),
html .post-byline,
html .post-byline div,
html .blog-card-foot div,
html .post-author-label,
html .post-author-title,
html .sr-member-role,
html .sr-reg-aka,
html .vv-lh-crumbs,
html .vv-lh-crumb,
html .ct-detail-label,
html .ct-consent-text,
html .post-author-bio,
html .vv-lh-date,
html .vv-proof-label,
html .vv-proof-brand span {
  font-family: var(--vv-font-text); font-weight: 400; font-size: 14px; line-height: 1.43; letter-spacing: 0; color: var(--vv-grey);
}
/* The ruling title inside that line keeps body size, in black */
html .post-rich.is-rulings p:has(> strong + br) > strong { font-size: 18px; line-height: 1.48; color: var(--vv-black); }

/* Regulation box label ("Official Name"): 14px / 1, 600, grey */
html .reg-glance-label {
  font-family: var(--vv-font-text); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: 0; color: var(--vv-grey);
}

/* Tag pill: 12.8px / 1, 600, uppercase */
html .sr-tag-text,
html .con-tag-name,
html .role-proof-tag {
  font-family: var(--vv-font-text); font-weight: 600; font-size: 12.8px; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
}
html .sr-tag-text, html .con-tag-name { color: var(--vv-black); }
html .role-proof-tag { color: var(--vv-white); }

/* Card label ("Voxly Vision for"): 12px / 1.4, 600, uppercase, blue */
html .vv-lh-eyebrow,
html .sr-reg-enforcer,
html .ind-card-kicker,
html .vv-team-kicker {
  font-family: var(--vv-font-text); font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--vv-blue);
}

/* Yellow blog cards on the issue pages are a deliberate variant: blue and grey fail contrast on yellow,
   so those pages' own yellow-card rule keeps dark text, a bolder title and a dark label/link. */

/* Not covered by the guide on purpose (interface components, left as designed): pricing table and prices,
   tool chips, the homepage demo feed, case-study numbers, stat numbers, map pins, pill buttons,
   status pills, the two-tone landing headline (.sr-h1-muted) and the 404 code. */

/* ---------- Phone (767px and below) ---------- */
@media screen and (max-width: 767px) {
  html .post-title,
  html .sr-h2.vv-hub-h1,
  html .ct-h1,
  html .vv-lh-title,
  html .utility-content h1 { font-size: 38px; }
  html .sr-h3.is-reg-section,
  html .sr-h3-lg,
  html .post-rich h2 { font-size: 26px; }
  html .sr-h3:not(.is-reg-section),
  html .post-rich h3 { font-size: 21px; }
  html .role-proof-text,
  html .role-proof-text p { font-size: 22px; }
}