body {
  /* Global CSS variables for SelfPay Now */
  --spn-font: 'Barlow';
  --spn-primary: #090fab;
  --spn-primary-dark: #2a30d4;
  --spn-accent: #8dff8d;
  --spn-bg-light: #EAF4FD;
  --spn-bg-page: #ffffff;
  --spn-text: #111;
  --spn-text-muted: #5a6080;
  --spn-text-medium: #555;
  --spn-card-border: #E8EEF8;
  --blue: #090fab;
  --blue-dark: #060980;
  --green: #8dff8d;
  --green-dark: #5ee65e;
  --bg-header: #fff9f1;
  --bg-slider: #EAF2FD;
  --card-bg: #FFFFFF;
  --border: #E5EAF2;
  --text: #1a1d3a;
  --text-muted: #5a6080;
  --spn-hero-bg: #ffffff;
  --spn-hero-h1-size: 3.5rem;
  --spn-hero-h1-weight: 400;
  --spn-hero-subtitle-size: 1.38rem;
  --spn-hero-subtitle-weight: 400;
  --spn-hero-desc-size: 1rem;
  --spn-title-size: 2.5rem;
  --spn-title-weight: 400;
  --spn-section-sub-size: 1.0625rem;
  --spn-card-radius: 14px;
  --spn-card-icon-radius: 10px;
  --spn-card-icon-background: rgba(141, 255, 141, 0.5);
  --spn-card-arrow-bg: #090fab;
  --spn-store-bg: #000;
  --spn-store-bg-hover: #2a2a2a;
  --spn-store-radius: 10px;
  --spn-slider-bg: #EAF2FD;
  --spn-slider-radius: 20px;
  --spn-slide-icon-bg: linear-gradient(135deg, #090fab 0%, #3b42d4 100%);
  --spn-slide-h3-size: 1.5rem;
  --spn-support-bg: #EAF2FD;
  --spn-support-h2-size: 1.9rem;
  --shadow-sm: 0 1px 2px rgba(9,15,171,0.04);
  --shadow-md: 0 4px 16px rgba(9,15,171,0.08);
  --shadow-lg: 0 12px 32px rgba(9,15,171,0.14);
  --radius: 12px;
  --spn-title-letter-spacing: 0.02em;

  /* Global font and color settings for mobile */
  --spn-mobile-hero-subtitle-size: 1.25rem;
  --spn-mobile-hero-desc-size: 0.9rem;
  --spn-mobile-store-icon-size: 1rem;
  --spn-mobile-store-text-size: 0.65rem;
  --spn-mobile-store-small-size: 0.45rem;
  --spn-mobile-slide-h3-size: 1.15rem;
  --spn-mobile-title-size: 1.6rem;
  --spn-mobile-section-sub-size: 1rem;
  --spn-mobile-card-text-size: 0.75rem;
}