/* Shared type scale. Relative units respect the reader's browser font settings. */
:root {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --text-caption: .8125rem;
  --text-control: .875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-card-title: 1.25rem;
  --text-page-title: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  --text-section-title: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --text-hero-title: clamp(2.5rem, 1.75rem + 3vw, 4rem);
}
body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; }
button, input, select, textarea { font-family: var(--font-body); }
input, select, textarea { font-size: var(--text-body); line-height: 1.5; }
h1 { font-size: var(--text-page-title); line-height: 1.15; }
.page-heading h1 { font-size: clamp(1.625rem, 1.4rem + .8vw, 2rem); line-height: 1.2; }
.page-breadcrumbs{margin-top:10px}.page-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;padding:0;margin:0;font-size:.8125rem;line-height:1.6;color:var(--muted)}.page-breadcrumbs li{display:flex;align-items:center;gap:10px;min-width:0}.page-breadcrumbs a{color:var(--muted);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}.page-breadcrumbs a:hover{color:var(--green);text-decoration:underline}.page-breadcrumbs [aria-current="page"]{color:var(--ink);font-weight:500;overflow-wrap:anywhere}.breadcrumb-separator{color:#a0aaa3}
h2 { font-size: 1.375rem; line-height: 1.3; }
h3 { font-size: var(--text-card-title); line-height: 1.35; }
p { line-height: 1.65; }
#content, .session-card { overflow-wrap: anywhere; }
small { font-size: var(--text-caption); line-height: 1.5; }
.brand { font-size: 1.125rem; }
.brand-mark { font-size: 1.125rem; }
.brand small, .nav-label { font-size: .75rem; line-height: 1.5; }
.nav-label, .eyebrow, .ref-eyebrow { letter-spacing: .09em; }
.sidebar select { font-size: var(--text-body); min-height: 44px; }
.nav-item { font-size: var(--text-control); line-height: 1.5; min-height: 44px; }
.nav-icon { font-size: 1rem; }
.session-card strong { font-size: var(--text-control); }
.session-card small { font-size: var(--text-caption); }
.session-card .tag, .tag { font-size: .75rem; line-height: 1.5; white-space: normal; }
.topbar { height: auto; min-height: 75px; padding-block: 12px; font-size: var(--text-control); flex-wrap: wrap; }
.topbar > div { font-size: var(--text-control); }
.control-row strong { font-size: var(--text-body); }
.control-row p, .scenario-control label { font-size: var(--text-control); }
.scenario-control select { font-size: var(--text-body); min-height: 44px; }
.button, .button.small, .text-button { font-size: var(--text-control); line-height: 1.5; min-height: 44px; }
.text-button { display: inline-flex; align-items: center; }
.eyebrow { font-size: .75rem; line-height: 1.5; }
.page-heading p:not(.eyebrow), .panel-head p, .callout, .check, .choice-row,
.progress-list li, .empty, .guide p, .timeline li, .integration p,
.scenario-note, .notice, dialog p { font-size: var(--text-body); line-height: 1.6; }
.text-small { font-size: var(--text-control); line-height: 1.6; }
.stat-label, .field label, fieldset legend { font-size: var(--text-control); line-height: 1.5; }
.stat-value { font-family: var(--font-body); font-size: clamp(1.75rem, 1.5rem + .7vw, 2.125rem); line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat small, .field small, .progress-list small, .timeline time, .integration small { font-size: var(--text-caption); line-height: 1.5; }
.field input, .field select, .field textarea { font-size: var(--text-body); line-height: 1.5; min-width: 0; min-height: 44px; }
.field, .panel, .stat, .auth-panel { min-width: 0; }
.check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; }
table { font-size: var(--text-control); line-height: 1.55; }
th { font-size: .75rem; line-height: 1.5; letter-spacing: .025em; }
td small, .permission-id { font-size: var(--text-caption); line-height: 1.5; }
.details > div { font-size: var(--text-control); line-height: 1.6; }
.details dt { min-width: 0; overflow-wrap: anywhere; }
.details dd { min-width: 0; }
.step-dot { font-size: .75rem; }
.guide h2 { font-size: var(--text-card-title); }
.mono { font-size: var(--text-caption); }
.assign-role-form { flex-wrap: wrap; }
.assign-role-form select { font-size: var(--text-body); min-height: 44px; width: 100%; }
.repayment-value { font-family: var(--font-body); font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); font-variant-numeric: tabular-nums; }
.receipt h3 { font-size: 1.5rem; }
.auth-story h1 { font-size: var(--text-page-title); line-height: 1.15; }
.auth-story > p:not(.eyebrow), .auth-panel > p { font-size: var(--text-body); line-height: 1.65; }
.auth-panel h2 { font-size: 1.75rem; line-height: 1.25; }
.auth-alternate, .demo-account { font-size: var(--text-control); line-height: 1.5; }
.demo-account small { font-size: var(--text-caption); }
.demo-account > * { min-width: 0; }

/* Reference website: preserve the serif identity with readable supporting text. */
.ref-brand { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.25; white-space: normal; text-align: left; min-width: 0; max-width: 100%; }
.ref-brand > span { font-size: .875rem; }
.ref-header nav a, .ref-login, .ref-header .button { font-size: var(--text-control); line-height: 1.5; min-height: 44px; display: inline-flex; align-items: center; }
.ref-header nav { gap: 16px; flex-wrap: wrap; }
.ref-nav-wrap { gap: 20px; padding-block: 12px; }
.ref-donate, .ref-gold-button, .ref-outline-button, .ref-green-button,
.ref-dark-button, .ref-white-button, .ref-outline-green { font-size: var(--text-control); line-height: 1.5; min-height: 44px; }
.ref-menu-toggle { font-size: 1.375rem; min-width: 44px; min-height: 44px; }
.ref-eyebrow { font-size: .75rem; line-height: 1.5; }
.ref-hero h1 { font-family: var(--font-heading); font-size: var(--text-hero-title); line-height: 1.1; }
.ref-hero-copy { max-width: 660px; }
.ref-hero-copy > p:not(.ref-eyebrow) { font-size: var(--text-lead); line-height: 1.65; max-width: 56ch; }
.ref-hero-stats { width: min(320px, 100%); }
.ref-hero-stats span { font-size: var(--text-control); line-height: 1.5; }
.ref-hero-stats strong { font-size: 2.25rem; line-height: 1.2; }
.ref-hero-disclaimer { font-size: var(--text-caption); line-height: 1.5; max-width: 42ch; }
.ref-about h2, .ref-mission h2, .ref-section h2, .ref-technology h2,
.ref-mobile h2, .ref-impact h2, .ref-cta h2 { font-family: var(--font-heading); font-size: var(--text-section-title); line-height: 1.2; text-wrap: balance; }
.ref-about-copy, .ref-mission > .ref-container > p, .ref-intro,
.ref-program-panel p, .ref-impact > .ref-container > p,
.ref-values p, .ref-event-body p, .ref-theory p, .ref-paper-copy,
.ref-tech-grid p, .ref-mobile > .ref-container > div > p:not(.ref-eyebrow),
.ref-involvement-card #involvement-panel > p, .ref-interest-success p, .ref-cta p {
  font-size: var(--text-body); line-height: 1.65;
}
.ref-about-copy, .ref-paper-copy { max-width: 70ch; }
.ref-intro { max-width: 68ch; }
.ref-values h3, .ref-event-body h3, .ref-theory h3 { font-size: var(--text-card-title); line-height: 1.3; }
.ref-mission-cards strong { font-size: var(--text-body); line-height: 1.4; }
.ref-programs [role=tab] { font-size: var(--text-control); line-height: 1.5; min-height: 48px; }
.ref-program-panel h3 { font-size: 1.75rem; line-height: 1.25; }
.ref-program-status, .ref-reference-note, .ref-impact small, .ref-impact cite,
.ref-technology cite { font-size: var(--text-caption); line-height: 1.6; }
.ref-impact-grid strong { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); line-height: 1.2; }
.ref-impact-grid span { font-size: var(--text-control); line-height: 1.5; }
.ref-impact blockquote, .ref-technology blockquote { font-size: var(--text-lead); line-height: 1.65; }
.ref-calculator label { font-size: var(--text-control); line-height: 1.5; gap: 12px; flex-wrap: wrap; }
.ref-calculator input[type=number] { font-size: var(--text-body); }
.ref-savings-result > span, .ref-savings-result > p, .ref-savings-result dl div { font-size: var(--text-control); line-height: 1.6; }
.ref-savings-result > strong { font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem); line-height: 1.2; overflow-wrap: anywhere; }
.ref-savings-result small { font-size: var(--text-caption); line-height: 1.5; }
.ref-event-date strong { font-size: 1.5rem; line-height: 1.1; }
.ref-event-date span { font-size: .75rem; line-height: 1.3; }
.ref-event-type, .ref-event-meta > span { font-size: var(--text-caption); line-height: 1.5; }
.ref-event-body > button { font-size: var(--text-control); line-height: 1.5; min-height: 44px; }
.ref-theory article > span { font-size: var(--text-control); }
.ref-theory small { font-size: .75rem; line-height: 1.5; letter-spacing: .06em; }
.ref-tech-grid h3 { font-size: var(--text-body); line-height: 1.4; overflow-wrap: anywhere; }
.ref-tech-grid h3 small { font-size: var(--text-caption); line-height: 1.5; }
.ref-tech-grid article > div { align-items: flex-start; }
.ref-mobile-features strong { font-size: var(--text-body); line-height: 1.4; }
.ref-mobile-features small, .ref-store-buttons small { font-size: var(--text-caption); line-height: 1.5; }
.ref-store-buttons button { font-size: var(--text-body); line-height: 1.5; }
.ref-phone { width: min(22rem, 100%); }
.ref-phone-top, .ref-phone-top span, .ref-phone > p, .ref-phone-balance small,
.ref-phone-balance > span, .ref-phone-row > span, .ref-phone-note { font-size: var(--text-caption); line-height: 1.5; }
.ref-phone h3 { font-size: var(--text-lead); line-height: 1.4; }
.ref-phone-balance strong { font-size: 2.125rem; line-height: 1.2; }
.ref-phone-row { font-size: var(--text-control); line-height: 1.5; flex-wrap: wrap; }
.ref-involvement-tabs button { font-size: var(--text-control); line-height: 1.5; min-height: 44px; }
.ref-involvement-card label, .ref-involvement-card .check { font-size: var(--text-control); line-height: 1.6; }
.ref-involvement-card #involvement-panel > small, .ref-cta small { font-size: var(--text-caption); line-height: 1.6; }
.ref-interest-success h3, .ref-dialog h2 { font-size: 1.75rem; line-height: 1.25; }
.ref-dialog p { font-size: var(--text-body); line-height: 1.65; }
.ref-footer-top > div > p { font-size: var(--text-control); line-height: 1.6; }
.ref-footer a, .ref-footer-bottom button { font-size: var(--text-control); line-height: 1.5; min-height: 44px; display: inline-flex; align-items: center; }
.ref-footer-bottom small { font-size: var(--text-caption); line-height: 1.6; }

@media (max-width: 1200px) {
  .ref-nav-wrap { flex-wrap: wrap; }
  .ref-header nav { gap: 12px; }
  .ref-nav-wrap > .ref-brand { flex-shrink: 1; }
  .ref-section, .ref-about, .ref-mission, .ref-impact, .ref-mobile, .ref-cta { scroll-margin-top: 10rem; }
}
@media (max-width: 700px) {
  .ref-section, .ref-about, .ref-mission, .ref-impact, .ref-mobile, .ref-cta { scroll-margin-top: 6rem; }
  .ref-nav-wrap { flex-wrap: wrap; }
  .ref-header nav { gap: 8px 16px; }
  .ref-header nav .ref-donate { font-size: var(--text-control); }
  .ref-hero-copy > p:not(.ref-eyebrow) { font-size: var(--text-body); }
  .ref-values { grid-template-columns: 1fr; }
  .ref-mission-cards { grid-template-columns: 1fr; }
  .ref-mission-cards > div { display: flex; justify-content: center; gap: 16px; padding: 20px; }
  .ref-mission-cards strong { font-size: var(--text-body); }
  .ref-programs [role=tab] { padding: 14px 12px; }
  .ref-program-panel { padding: 28px 22px; }
  .ref-tech-grid { grid-template-columns: 1fr; }
  .ref-tech-grid article > div { flex-wrap: nowrap; }
  .ref-mobile-features { grid-template-columns: 1fr; }
  .ref-event-date { width: 46px; height: 56px; }
  .ref-timeline article { grid-template-columns: 46px minmax(0, 1fr); }
  .ref-timeline article:not(:last-child)::after { left: 23px; }
  .ref-event-body { padding: 20px 16px; }
  .ref-event-meta { gap: 12px; }
  .ref-event-meta > span { align-items: flex-start; }
  .ref-event-meta svg { flex-shrink: 0; margin-top: 3px; }
  .ref-phone { transform: none; }
  .ref-footer nav { gap: 12px 20px; }
  .ref-involvement-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .nav-item { font-size: var(--text-control); }
  .topbar > div { gap: 8px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .details > div { flex-wrap: wrap; }
  .details dd { max-width: 100%; }
}
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .ref-programs [role=tablist] { grid-template-columns: 1fr; }
  .ref-impact-grid { grid-template-columns: 1fr; }
  .ref-involvement-tabs { grid-template-columns: 1fr; }
}