/* Twilio brand tokens, from unfairly.ai/brand-guidelines/twilio (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.twilio.com/en-us (computed styles, element boxes and canvas font measurement in headless Chromium at 1440x900 and 390x844 after a full scroll (lazy images loaded)).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Twilio's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F3F4F7;
  --color-ink: #000D25;
  --color-ink-muted: #606B85;
  --color-accent: #1866EE;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #EF223A;
  --color-night: #000D25;
  --color-on-night: #FFFFFF;
  --color-ink-blue-900: #000D25;
  --color-white: #FFFFFF;
  --color-utility-gray-gray-50: #F3F4F7;
  --color-action-blue-blue-500: #1866EE;
  --color-action-blue-hover-blue-700: #0E3E92;
  --color-code-navy-blue-850: #081F47;
  --color-card-navy-gray-850: #191F36;
  --color-panel-navy: #191E36;
  --color-twilio-red-logo: #F22F46;
  --color-red-light: #EF223A;
  --color-accessible-red: #B10F23;
  --color-twilio-red-60-paste: #DB132A;
  --color-footer-link-gray-gray-30: #CACDD8;
  --color-hairline-gray-gray-100: #DDE0E6;
  --color-code-comment: #7688C2;
  --color-sky-blue-200: #3ACEFA;
  --color-paper-warm: #FDF7F4;
  --color-night-blue-80: #001489;
  --color-paste-blue-60: #0263E0;
  --color-paste-gray-60: #606B85;
  --color-paste-gray-100: #121C2D;
  --color-paste-green-50: #36D576;
  --color-paste-orange-60: #F47C22;
  --color-paste-purple-60: #6D2ED1;
  --color-paste-yellow-50: #FAD100;
  --color-button-primary-fill: #1866EE;
  --color-button-primary-text: #FFFFFF;
  --color-button-secondary-on-dark-text: #FFFFFF;
  --color-button-secondary-on-dark-ring: #FFFFFF;
  --color-button-nav-primary-fill: #1866EE;
  --color-button-nav-primary-text: #FFFFFF;
  --color-button-nav-outline-text: #1866EE;
  --color-button-nav-outline-ring: #1866EE;
  --color-text-link-on-dark-text: #FFFFFF;
  --color-card-analyst-fill: #191F36;
  --color-badge-new-fill: #EF223A;
  --color-badge-new-text: #FFFFFF;
  --color-code-sample-fill: #081F47;
  --font-display: "Open Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display-original: "Whitney SSm", "Open Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "Whitney SSm", "Open Sans", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-mono-original: "Twilio Sans Mono", "JetBrains Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --page-margin: 120px;
  --section-padding: 64px;
  --container-max: 1200px;
  --hero-text-max: 576px;
  --card-gap: 48px;
  --nav-height: 112px;
  --grid-gutter: 48px;
  --grid-columns: 3;
  --text-display-xl-size: 56px;
  --text-display-xl-line: 1.18;
  --text-display-xl-weight: 750;
  --text-display-xl-tracking: -1.68px;
  --text-display-l-size: 40px;
  --text-display-l-line: 1.3;
  --text-display-l-weight: 750;
  --text-display-l-tracking: -0.8px;
  --text-display-num-size: 64px;
  --text-display-num-line: 1.3;
  --text-display-num-weight: 750;
  --text-display-num-tracking: -1.92px;
  --text-title-xl-size: 28px;
  --text-title-xl-line: 1.286;
  --text-title-xl-weight: 400;
  --text-lead-size: 20px;
  --text-lead-line: 1.6;
  --text-lead-weight: 400;
  --text-lead-tracking: 0.2px;
  --text-title-size: 20px;
  --text-title-line: 1.6;
  --text-title-weight: 750;
  --text-body-l-size: 18px;
  --text-body-l-line: 1.556;
  --text-body-l-weight: 400;
  --text-body-l-tracking: 0.18px;
  --text-caption-strong-size: 18px;
  --text-caption-strong-line: 1.556;
  --text-caption-strong-weight: 600;
  --text-button-size: 16px;
  --text-button-line: 1.5;
  --text-button-weight: 550;
  --text-body-s-size: 14px;
  --text-body-s-line: 1.43;
  --text-body-s-weight: 400;
  --text-label-size: 14px;
  --text-label-line: 1.43;
  --text-label-weight: 500;
  --text-micro-size: 12px;
  --text-micro-line: 1.5;
  --text-micro-weight: 500;
  --text-code-size: 16px;
  --text-code-line: 1.5;
  --text-code-weight: 300;
  --text-stat-size: 80px;
  --text-stat-line: 0.525;
  --text-stat-weight: 800;
  --text-stat-tracking: 5px;
  --radius-button-primary: 999px;
  --radius-button-secondary-on-dark: 999px;
  --radius-button-nav-primary: 999px;
  --radius-button-nav-outline: 999px;
  --radius-card-analyst: 20px;
  --radius-badge-new: 10px;
  --radius-code-sample: 0px;
  --ease-button: ease-in-out;
  --duration-button: 300ms;
  --ease-card: ease-in-out;
  --duration-card: 180ms;
  --ease-media-fade: ease;
  --duration-media-fade: 300ms;
  --ease-badge: ease-in-out;
  --duration-badge: 700ms;
  --icon-ui: 16px;
  --icon-nav: 20px;
  --icon-feature: 32px;
}
/* Phone values measured at 390px; Twilio's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 32px;
    --section-padding: 64px;
    --text-display-xl-size: 34px;
    --text-display-l-size: 28px;
    --text-lead-size: 18px;
    --text-title-size: 18px;
    --text-body-l-size: 16px;
    --text-caption-strong-size: 16px;
    --text-button-size: 14px;
    --text-body-s-size: 12px;
    --text-label-size: 16px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 24px; border-radius: 999px;
  background: #1866EE; color: #FFFFFF;
  font: 550 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #0E3E92; transition: background-color 0.3s ease-in-out; } /* observed */
.button-secondary-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 24px; border-radius: 999px;
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  font: 550 16px/1 var(--font-body);
}
.button-secondary-on-dark:hover { background-color: #1866EE; box-shadow: inset 0 0 0 2px #1866EE; } /* observed */
.button-nav-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 36px; padding: 0 24px; border-radius: 999px;
  background: #1866EE; color: #FFFFFF;
  font: 550 16px/1 var(--font-body);
}
.button-nav-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 36px; padding: 0 24px; border-radius: 999px;
  background: transparent; color: #1866EE;
  box-shadow: inset 0 0 0 2px #1866EE;
  font: 550 16px/1 var(--font-body);
}