/* Ruah.ai typography, measured against the live homepage on 28 October 2026.
   Manrope: hero 70/78.4 at 200, section titles 54/62.64 at 200,
   lead copy 24/30 at 400, buttons 16/16 at 700.
   Navigation: Libre Franklin 16px at 400.
   This final layer owns campaign typography without changing layout behaviour. */
:root {
  --font: 'Manrope', Arial, sans-serif;
  --font-navigation: 'Libre Franklin', Arial, sans-serif;
}
body { font-size: 18px; font-weight: 400; line-height: 1.666667; }
button, input, select, textarea { font-family: var(--font); }
h1, h2, h3 { font-family: var(--font); }
h1, h2 { font-weight: 200; }
h2, .section-heading h2, .center-heading h2, .compact h2, .faq-intro h2 {
  font-size: 54px;
  line-height: 1.16;
  letter-spacing: -1px;
}
h3 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.hero h1 { font-size: 70px; font-weight: 200; line-height: 1.12; letter-spacing: normal; }
.hero-description { font-size: 24px; font-weight: 400; line-height: 30px; max-width: 570px; }
.desktop-nav, .mobile-menu > a:not(.button) { font-family: var(--font-navigation); font-size: 16px; font-weight: 400; letter-spacing: normal; }
.desktop-nav { line-height: 1; }
.button, .hero-actions .button, .consultation-button.button,
.consultation-strip .button, .closing-inner .button, .dialog-panel .button,
.offer-card .button {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  min-height: 52px;
}
.consultation-button.header-cta { font-size: 16px; min-height: 50px; }
.hero-actions .button { min-height: 56px; }
.eyebrow, .section-heading .eyebrow, .center-heading .eyebrow,
.faq-intro .eyebrow, .offer-card > .eyebrow, .consultation-strip .eyebrow,
.closing-inner > .eyebrow {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: normal;
}
.brand-with-caption .eyebrow, .footer-partner .eyebrow {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
}
.alert-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.alert-date, .breadcrumb { font-size: 12px; letter-spacing: normal; }
.microcopy { font-size: 14px; line-height: 1.7; }
.sf-wordmark { font-weight: 700; }
.visual-topline { font-size: 10px; letter-spacing: .08em; }
.visual-caption strong { font-size: 14px; font-weight: 400; }
.visual-caption > span, .illustration-note, .animation-toggle { font-size: 10px; }
.assurance-inner { font-size: 16px; font-weight: 600; line-height: 1.5; }
.section-heading > p, .center-heading p:not(.eyebrow),
.faq-intro > p:last-child, .closing-inner > p:not(.eyebrow) {
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}
.section-heading.compact { align-items: flex-start; }
.compact > p { max-width: 285px; font-size: 20px; line-height: 30px; padding-top: 36px; }
.advisory-card h3 { font-size: 30px; line-height: 1.3; }
.advisory-card p, .action-list p, .process-grid p,
.faq-list details p { font-size: 18px; line-height: 30px; font-weight: 400; }
.advisory-card p { max-width: none; }
.action-list h3, .process-grid h3 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.severity-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.advisory-number, .step-number { font-size: 16px; }
.cve-list > a { font-family: var(--font); font-size: 12px; }
.source-link { font-size: 16px; font-weight: 600; }
.version-details summary, .version-details p, .version-details a { font-size: 16px; line-height: 1.75; }
.reviewed-date { font-size: 12px; }
.offer-card h3 { font-size: 30px; font-weight: 600; line-height: 1.3; }
.offer-intro { font-size: 18px; line-height: 30px; }
.price { font-size: 20px; }
.price strong { font-size: 70px; font-weight: 200; line-height: 1; letter-spacing: -1px; }
.price > span, .offer-small { font-size: 14px; line-height: 1.7; }
.recommended-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.feature-title { font-size: 18px; font-weight: 600; line-height: 1.5; }
.features li { font-size: 16px; font-weight: 400; line-height: 1.8; }
.features li:before { top: 18px; }
.scope-note { font-size: 11px; line-height: 1.8; }
.consultation-strip h3 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.consultation-strip p:not(.eyebrow) { font-size: 18px; line-height: 30px; }
.process-number { font-weight: 600; letter-spacing: -1px; }
.process-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.faq-list summary { font-size: 18px; font-weight: 600; line-height: 1.5; }
.closing-inner h2 { font-size: 70px; font-weight: 200; line-height: 1.12; letter-spacing: -1px; }
.footer-main > div:first-child > p, .footer-links { font-size: 16px; line-height: 1.75; }
.footer-bottom, .footer-bottom .preview-note { font-size: clamp(8.5px,.72vw,10px); line-height: 1.7; }
.dialog-panel h2, #success-view h2 { font-size: 36px; font-weight: 200; line-height: 1.16; letter-spacing: -1px; }
.dialog-panel .eyebrow { font-size: 12px; letter-spacing: .04em; }
.dialog-description, #success-view > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; }
.dialog-close { font-size: 13px; }
.form-field { font-size: 14px; font-weight: 600; }
.form-field > input, .audit-select-label select, .audit-select-label option { font-size: 16px; line-height: 1.5; font-weight: 400; }
.form-field > input, .audit-select-label select { min-height: 52px; }
.form-field small, .audit-select-label small { font-size: 12px; line-height: 1.7; }
.consent-label, .preview-form-note { font-size: 12px; line-height: 1.75; }
.form-error, .form-consultation > span { font-size: 14px; line-height: 1.7; }
.success-summary { font-size: 18px; }

@media (max-width: 1199px) {
  h2, .section-heading h2, .center-heading h2, .compact h2, .faq-intro h2 { font-size: clamp(40px,5vw,54px); }
  .hero-description { max-width: 700px; }
  .hero-actions .button { min-height: 54px; }
  .eyebrow, .section-heading .eyebrow, .center-heading .eyebrow,
  .faq-intro .eyebrow, .offer-card > .eyebrow, .consultation-strip .eyebrow,
  .closing-inner > .eyebrow { font-size: 13px; }
  .assurance-inner { font-size: 15px; }
  .section-heading > p, .center-heading p:not(.eyebrow), .faq-intro > p:last-child { font-size: 20px; line-height: 30px; }
  .compact > p { max-width: 260px; font-size: 18px; padding-top: 26px; }
  .advisory-card h3, .offer-card h3 { font-size: 28px; }
  .action-list h3, .process-grid h3 { font-size: 22px; }
  .advisory-card p, .action-list p, .process-grid p, .faq-list details p { font-size: 16px; line-height: 1.8; }
  .offer-intro { font-size: 16px; line-height: 1.75; }
  .features li { font-size: 15px; }
  .price strong { font-size: 64px; }
  .scope-note { font-size: 12px; }
  .process-label { font-size: 11px; }
  .footer-bottom, .footer-bottom .preview-note { font-size: 12px; }
  .consent-label { font-size: 13px; }
}

@media (max-width: 899px) {
  .section-heading.compact { display: block; }
  .compact > p { max-width: none; padding-top: 0; margin-top: 18px; }
}

/* The reference homepage scales to a 40px hero, 25px section titles and
   18px lead copy on phones. The narrowest widths get a fluid hero fit. */
@media (max-width: 767px) {
  .hero h1 { font-size: clamp(34px,10.25vw,40px); line-height: 1.12; }
  h2, .section-heading h2, .center-heading h2, .compact h2, .faq-intro h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.5px; }
  .hero-description { font-size: 18px; line-height: 30px; }
  .section-heading > p, .center-heading p:not(.eyebrow), .faq-intro > p:last-child,
  .closing-inner > p:not(.eyebrow) { font-size: 18px; line-height: 30px; }
  .advisory-card h3, .offer-card h3 { font-size: 26px; }
  .consultation-strip h3 { font-size: 22px; }
  .consultation-strip p:not(.eyebrow) { font-size: 16px; line-height: 1.8; }
  .price strong { font-size: 60px; }
  .feature-title { font-size: 16px; }
  .version-details summary, .version-details p { font-size: 14px; }
  .version-details a { font-size: 14px; }
  .faq-list summary { font-size: 16px; }
  .closing-inner h2 { font-size: 40px; line-height: 1.12; letter-spacing: normal; }
  .footer-main > div:first-child > p, .footer-links { font-size: 14px; }
  .mobile-audit-bar .button { font-size: 14px; }
}

@media (max-width: 599px) {
  .consultation-button.header-cta { font-size: 12px; line-height: 1.35; min-height: 44px; }
  .eyebrow, .section-heading .eyebrow, .center-heading .eyebrow,
  .faq-intro .eyebrow, .offer-card > .eyebrow, .consultation-strip .eyebrow,
  .closing-inner > .eyebrow { font-size: 12px; }
  .brand-with-caption .eyebrow, .footer-partner .eyebrow { font-size: 9px; }
  .hero-actions .button, .offer-card .button, .dialog-panel .button { font-size: 16px; line-height: 1.25; }
  .alert-label { font-size: 11px; }
  .alert-date { font-size: 10px; }
  .assurance-inner { font-size: 13px; }
  .microcopy { font-size: 12px; }
  .severity-label { font-size: 10px; }
  .dialog-panel h2, #success-view h2 { font-size: 30px; }
  .dialog-description { font-size: 15px; }
  .dialog-panel .eyebrow { font-size: 11px; }
  #form-submit { font-size: 14px; }
}

@media (max-width: 359px) {
  .hero h1 { font-size: 34px; }
  .hero-actions .button { font-size: 15px; }
  .brand-with-caption .eyebrow { font-size: 8px; }
  .mobile-audit-bar .button { font-size: 13px; }
}