/* Shared type scale based on the homepage's Manrope typography. */
:root {
  --type-page-title: clamp(32px, 3.4vw, 48px);
  --type-section-title: clamp(24px, 2.2vw, 30px);
  --type-intro: 16px;
  --type-body: 14px;
}

body,
.calculator-shell,
.compare-shell,
body:has(.compare-shell) {
  font-family: 'Manrope', 'Segoe UI', sans-serif;
}

/* Page-level headings share the homepage's scale; component and table text
   stays compact so dense tools remain easy to scan. */
.homepage .hero h1,
.kpss-shell:not(.calculator-shell) .kpss-page-intro h1,
.calculator-shell .calculator-content h1,
.compare-intro h1,
.app-shell #pageTitle,
.login-page .login-welcome h1 {
  font-size: var(--type-page-title);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.12;
}

.kpss-shell:not(.calculator-shell) .selection-card h2,
.calculator-content h2,
.compare-panel .panel-heading h2,
.analysis-results .analysis-heading h2,
.analysis-results .year-heading h2,
.results-panel .results-heading h2,
.profile-content .panel-heading h2,
.candidate-profile h2 {
  font-size: var(--type-section-title);
  letter-spacing: -.035em;
  line-height: 1.15;
}

.homepage .hero-description,
.kpss-shell:not(.calculator-shell) .kpss-page-intro > div:first-child > p:last-child,
.calculator-content .kpss-page-intro > div:first-child > p:last-child,
.compare-intro > p:last-child,
.app-shell .intro-description,
.login-page .login-welcome-copy {
  font-size: var(--type-intro);
  line-height: 1.6;
}

.homepage .hero-subdescription,
.kpss-shell:not(.calculator-shell) .selection-description,
.calculator-content .panel-description,
.calculator-content .preview-description,
.profile-content .panel-description,
.candidate-profile .account-intro,
.login-page .account-intro {
  font-size: var(--type-body);
  line-height: 1.6;
}

.login-page .account-card h1 {
  font-size: var(--type-section-title);
  line-height: 1.15;
}

.account-card.wide h1 {
  font-size: var(--type-page-title);
  line-height: 1.12;
}

@media (max-width: 700px) {
  :root {
    --type-page-title: clamp(30px, 8vw, 42px);
    --type-section-title: clamp(22px, 6vw, 28px);
    --type-intro: 15px;
    --type-body: 14px;
  }
}