:root {
  --color-navy: #3A5A71; --color-navy-rgb: 58, 90, 113;
  --color-orange: #ED5821; --color-orange-rgb: 237, 88, 33;
  --color-muted: #587286; --color-interaction: #4B9ABB; --color-interaction-rgb: 75, 154, 187;
  --color-surface: #FFFFFF; --color-surface-blue: #E8F4FE; --color-surface-blue-rgb: 232, 244, 254;
  --color-surface-gray: #F3F4F6;
  --color-border: #D3E7EF; --color-blush: #FFEEE7; --color-danger: #A62D21; --color-star: #F6A800;
  --font-sans: "Open Sans", Arial, sans-serif; --font-weight-body: 400; --font-weight-strong: 800;
  --font-size-body: 16px; --font-size-supporting: 14px;
  --font-size-hero: clamp(2rem, 6vw, 4rem); --font-size-section: clamp(1.75rem, 3vw, 2.5rem);
  --line-height-heading: 1.1; --line-height-body: 1.6;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px;
  --section-space: 64px; --section-space-mobile: 48px;
  --container-wide: 1200px; --container-reading: 900px;
  --radius-card: 24px; --radius-control: 14px; --radius-pill: 999px; --control-min-height: 52px;
  --focus-outline: 3px solid var(--color-interaction);
  --shadow-card: 0 8px 24px rgba(var(--color-navy-rgb), .07);
  --shadow-cta: 0 8px 22px rgba(var(--color-navy-rgb), .18);
}