/* Salesforce brand tokens, from unfairly.ai/brand-guidelines/salesforce (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.salesforce.com/ (Measured with Playwright (headless Chrome, normal user agent) from computed styles at 1440 and 390, 2026-10-31; brand rules from brand.salesforce.com and the Lightning Design System (v1) guidelines.).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Salesforce's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #EAF5FE;
  --color-ink: #032D60;
  --color-ink-muted: #444444;
  --color-accent: #022AC0;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #04E1CB;
  --color-night: #001E5B;
  --color-on-night: #FFFFFF;
  --color-blue-20-slds: #032D60;
  --color-hero-blue: #022AC0;
  --color-bright-blue: #066AFE;
  --color-teal-80-slds: #04E1CB;
  --color-cloud-blue-20-slds: #023248;
  --color-deep-navy: #001E5B;
  --color-cloud-blue-95-slds: #EAF5FE;
  --color-cloud-blue-80-slds: #90D0FE;
  --color-green-50-slds: #2E844A;
  --color-blue-40-slds: #0B5CAB;
  --color-blue-50-slds: #0176D3;
  --color-violet-30-slds: #730394;
  --color-violet-50-slds: #BA01FF;
  --color-neutral-10-slds: #181818;
  --color-neutral-30-slds: #444444;
  --color-neutral-90-slds: #E5E5E5;
  --color-neutral-95-slds: #F3F3F3;
  --color-body-default: #080707;
  --color-footer-bar-navy: #032E61;
  --color-yellow-80-slds: #FCC003;
  --color-teal-20-slds: #023434;
  --color-customer-360-teal: #1F827C;
  --color-indigo-50-slds: #5867E8;
  --color-indigo-20-slds: #321D71;
  --color-aiforce-blue: #3451DE;
  --color-aiforce-navy: #001E4A;
  --color-cloud-logo-blue: #00B3FF;
  --color-resources-violet: #D17DFE;
  --color-community-violet: #7C3AED;
  --color-red-50-slds: #EA001E;
  --color-orange-60-slds: #DD7A01;
  --color-green-60-slds: #3BA755;
  --color-cloud-blue-60-slds: #0D9DDA;
  --color-hot-orange-60-slds: #FF5D2D;
  --color-purple-50-slds: #9050E9;
  --color-pink-50-slds: #E3066A;
  --color-glass-rim-left-rendered: #8FA1E4;
  --color-glass-rim-right-rendered: #BEC8EF;
  --color-glass-rim-bottom-rendered: #DFE5F8;
  --color-glass-stage-rendered: #F8F3FE;
  --color-caption-violet-top: #8324AA;
  --color-caption-violet-bottom: #692289;
  --color-social-glyph-gray: #59575C;
  --color-glass-rim-top-left-rendered: #AEBBEB;
  --color-button-white-on-blue-fill: #FFFFFF;
  --color-button-white-on-blue-text: #023248;
  --color-button-glass-on-blue-fill: #FFFFFF33;
  --color-button-glass-on-blue-text: #FFFFFF;
  --color-button-glass-on-blue-ring: #FFFFFF26;
  --color-button-bright-fill: #066AFE;
  --color-button-bright-text: #FFFFFF;
  --color-button-bright-ring: #FFFFFF26;
  --color-button-nav-green-fill: #2E844A;
  --color-button-nav-green-text: #FFFFFF;
  --font-display: Poppins, Poppins, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-display-original: "ITC Avant Garde", Poppins, Poppins, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-body-original: "Salesforce Sans", "Open Sans", "Open Sans", "Segoe UI", Arial, sans-serif;
  --page-margin: 144px;
  --section-padding: 96px;
  --container-max: 1152px;
  --hero-text-max: 1024px;
  --card-gap: 64px;
  --nav-height: 96px;
  --grid-gutter: 24px;
  --grid-columns: 2;
  --text-display-xxl-size: 80px;
  --text-display-xxl-line: 1.1;
  --text-display-xxl-weight: 500;
  --text-display-xxl-tracking: -3px;
  --text-display-xl-size: 72px;
  --text-display-xl-line: 1;
  --text-display-xl-weight: 500;
  --text-display-xl-tracking: -0.9px;
  --text-display-l-size: 42px;
  --text-display-l-line: 1.25;
  --text-display-l-weight: 500;
  --text-display-l-tracking: -0.5px;
  --text-display-m-size: 32px;
  --text-display-m-line: 1.25;
  --text-display-m-weight: 500;
  --text-display-m-tracking: -0.6px;
  --text-display-s-size: 24px;
  --text-display-s-line: 1.375;
  --text-display-s-weight: 500;
  --text-display-s-tracking: -0.3px;
  --text-display-lead-size: 20px;
  --text-display-lead-line: 1.5;
  --text-display-lead-weight: 500;
  --text-display-lead-tracking: -0.24px;
  --text-display-xs-size: 18px;
  --text-display-xs-line: 1.25;
  --text-display-xs-weight: 500;
  --text-display-xs-tracking: -0.2px;
  --text-label-size: 16px;
  --text-label-line: 1.5;
  --text-label-weight: 500;
  --text-label-tracking: -0.4px;
  --text-body-lead-size: 20px;
  --text-body-lead-line: 1.5;
  --text-body-lead-weight: 400;
  --text-body-l-size: 18px;
  --text-body-l-line: 1.5;
  --text-body-l-weight: 400;
  --text-body-m-size: 16px;
  --text-body-m-line: 1.625;
  --text-body-m-weight: 400;
  --text-nav-size: 16px;
  --text-nav-line: 1.75;
  --text-nav-weight: 700;
  --text-body-xs-size: 12px;
  --text-body-xs-line: 1.5;
  --text-body-xs-weight: 400;
  --text-faq-h-size: 40px;
  --text-faq-h-line: 1.2;
  --text-faq-h-weight: 700;
  --text-faq-h-tracking: -0.32px;
  --text-faq-q-size: 20px;
  --text-faq-q-line: 1.4;
  --text-faq-q-weight: 700;
  --text-faq-q-tracking: -0.08px;
  --radius-button-white-on-blue: 9999px;
  --radius-button-glass-on-blue: 9999px;
  --radius-button-bright: 9999px;
  --radius-button-nav-green: 9999px;
  --radius-demo-tab: 9999px;
  --radius-circle-control: 9999px;
  --radius-product-card: 30px;
  --radius-dark-panel: 32px;
  --radius-quote-card: 24px;
  --radius-logo-pill: 9999px;
  --radius-story-card: 27px;
  --radius-bento-card: 16px;
  --radius-segmented-tabs: 9999px;
  --radius-glass-frame: 24px;
  --duration-kx-duration-xshort: 75ms;
  --duration-kx-duration-short: 150ms;
  --duration-kx-duration-normal: 250ms;
  --duration-kx-duration-long: 400ms;
  --duration-kx-duration-xlong: 600ms;
  --ease-kx-ease-in-out: cubic-bezier(0.3, 0, 0.15, 1);
  --ease-kx-ease-out: cubic-bezier(0, 0.3, 0.15, 1);
  --ease-kx-ease-in: cubic-bezier(0.3, 0, 1, 0.3);
  --ease-kx-ease-over: cubic-bezier(0.3, 1.75, 0.3, 1);
  --ease-kx-ease-under-over: cubic-bezier(0.7, -0.4, 0.4, 1.4);
  --icon-utility-16: 16px;
  --icon-utility-24: 24px;
  --icon-action-48: 48px;
  --icon-object-60: 60px;
}
/* Phone values measured at 390px. Salesforce's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 64px;
    --text-display-xxl-size: 40px;
    --text-display-xl-size: 32px;
    --text-display-l-size: 24px;
    --text-display-m-size: 24px;
    --text-display-s-size: 18px;
    --text-display-lead-size: 18px;
    --text-body-lead-size: 18px;
    --text-body-l-size: 16px;
    --text-faq-h-size: 32px;
    --text-faq-q-size: 16px;
  }
}
.button-white-on-blue {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 20px; border-radius: 9999px;
  background: #FFFFFF; color: #023248;
  font: 500 16px/1 var(--font-body);
}
.button-white-on-blue:hover { background-color: #EAF5FE; } /* our reading */
.button-glass-on-blue {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 58px; padding: 0 32px; border-radius: 9999px;
  background: #FFFFFF33; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #FFFFFF26;
  font: 500 16px/1 var(--font-body);
}
.button-bright {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 20px; border-radius: 9999px;
  background: #066AFE; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #FFFFFF26;
  font: 500 16px/1 var(--font-body);
}
.button-nav-green {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 24px; border-radius: 9999px;
  background: #2E844A; color: #FFFFFF;
  font: 700 16px/1 var(--font-body);
}