/* IBM brand tokens, from unfairly.ai/brand-guidelines/ibm (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.ibm.com/ (see spec.md).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name IBM's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F4F4F4;
  --color-ink: #161616;
  --color-ink-muted: #525252;
  --color-accent: #0F62FE;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #0043CE;
  --color-night: #161616;
  --color-on-night: #FFFFFF;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-10: #F4F4F4;
  --color-gray-20: #E0E0E0;
  --color-gray-30: #C6C6C6;
  --color-gray-40: #A8A8A8;
  --color-gray-50: #8D8D8D;
  --color-gray-60: #6F6F6F;
  --color-gray-70: #525252;
  --color-gray-80: #393939;
  --color-gray-90: #262626;
  --color-gray-100: #161616;
  --color-layer-hover: #E8E8E8;
  --color-layer-selected-hover: #D1D1D1;
  --color-inverse-hover: #474747;
  --color-blue-10: #EDF5FF;
  --color-blue-20: #D0E2FF;
  --color-blue-30: #A6C8FF;
  --color-blue-40: #78A9FF;
  --color-blue-50: #4589FF;
  --color-blue-60: #0F62FE;
  --color-blue-60-hover: #0050E6;
  --color-blue-70: #0043CE;
  --color-blue-80: #002D9C;
  --color-blue-90: #001D6C;
  --color-blue-100: #001141;
  --color-purple-60: #8A3FFC;
  --color-purple-40: #BE95FF;
  --color-purple-70: #6929C4;
  --color-magenta-60: #D02670;
  --color-cyan-50: #1192E8;
  --color-cyan-60: #0072C3;
  --color-teal-50: #009D9A;
  --color-teal-60: #007D79;
  --color-green-50: #24A148;
  --color-green-60: #198038;
  --color-red-60: #DA1E28;
  --color-alert-40: #FF832B;
  --color-alert-30: #F1C21B;
  --color-cta-blue: #0062FE;
  --color-magenta-50: #EE5396;
  --color-button-primary-fill: #0F62FE;
  --color-button-primary-text: #FFFFFF;
  --color-button-tertiary-text: #0F62FE;
  --color-button-tertiary-ring: #0F62FE;
  --color-text-cta-text: #0062FE;
  --color-recommended-tile-fill: #FFFFFF;
  --color-pictogram-card-fill: #FFFFFF;
  --color-feature-card-fill: #F4F4F4;
  --color-link-list-item-fill: #FFFFFF;
  --color-spotlight-card-fill: #FFFFFF;
  --color-tag-fill: #FFFFFF;
  --color-carousel-button-ring: #0F62FE (enabled) / #C6C6C6 (disabled);
  --color-video-toggle-fill: #161616 at 50% opacity;
  --color-locale-button-text: #FFFFFF;
  --color-locale-button-ring: #FFFFFF;
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, Courier, monospace;
  --page-margin: 32px;
  --container-max: 1440px;
  --card-gap: 16px;
  --nav-height: 49px;
  --grid-gutter: 32px;
  --grid-columns: 16;
  --text-leadspace-headline-h1-size: 53.65px;
  --text-leadspace-headline-h1-line: 1.17;
  --text-leadspace-headline-h1-weight: 300;
  --text-section-headline-h2-size: 53.65px;
  --text-section-headline-h2-line: 1.17;
  --text-section-headline-h2-weight: 300;
  --text-section-intro-size: 21.88px;
  --text-section-intro-line: 1.4;
  --text-section-intro-weight: 400;
  --text-hero-lead-size: 20px;
  --text-hero-lead-line: 1.4;
  --text-hero-lead-weight: 400;
  --text-announcement-line-size: 20px;
  --text-announcement-line-line: 1.4;
  --text-announcement-line-weight: 400;
  --text-case-study-headline-size: 28px;
  --text-case-study-headline-line: 1.29;
  --text-case-study-headline-weight: 400;
  --text-form-section-heading-size: 32px;
  --text-form-section-heading-line: 1.25;
  --text-form-section-heading-weight: 400;
  --text-band-label-heading-size: 20px;
  --text-band-label-heading-line: 1.4;
  --text-band-label-heading-weight: 600;
  --text-small-heading-size: 16px;
  --text-small-heading-line: 1.5;
  --text-small-heading-weight: 600;
  --text-card-title-size: 16px;
  --text-card-title-line: 1.4;
  --text-card-title-weight: 400;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-nav-link-size: 16px;
  --text-nav-link-line: 1.375;
  --text-nav-link-weight: 400;
  --text-button-label-size: 16px;
  --text-button-label-line: 1.375;
  --text-button-label-weight: 400;
  --text-text-cta-size: 16px;
  --text-text-cta-line: 1;
  --text-text-cta-weight: 400;
  --text-stat-figure-size: 20px;
  --text-stat-figure-line: 1.4;
  --text-stat-figure-weight: 600;
  --text-card-body-small-size: 14px;
  --text-card-body-small-line: 1.29;
  --text-card-body-small-weight: 400;
  --text-card-body-small-tracking: 0.16px;
  --text-card-heading-small-size: 14px;
  --text-card-heading-small-line: 1.43;
  --text-card-heading-small-weight: 600;
  --text-card-heading-small-tracking: 0.16px;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1.43;
  --text-footer-link-weight: 400;
  --text-footer-link-tracking: 0.16px;
  --text-tag-size: 12px;
  --text-tag-line: 1.33;
  --text-tag-weight: 400;
  --text-tag-tracking: 0.32px;
  --radius-button-primary: 4px;
  --radius-button-tertiary: 4px;
  --radius-recommended-tile: 0px;
  --radius-pictogram-card: 4px;
  --radius-feature-card: 4px;
  --radius-spotlight-card: 4px;
  --radius-tag: 16px;
  --radius-case-study-card: 4px;
  --radius-carousel-button: 4px;
  --radius-locale-button: 4px;
  --ease-standard-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-standard-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance-productive: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-entrance-expressive: cubic-bezier(0, 0, 0.3, 1);
  --ease-exit-productive: cubic-bezier(0.2, 0, 1, 0.9);
  --ease-exit-expressive: cubic-bezier(0.4, 0.14, 1, 1);
  --duration-duration-fast-01: 70ms;
  --duration-duration-fast-02: 110ms;
  --duration-duration-moderate-01: 150ms;
  --duration-duration-moderate-02: 240ms;
  --duration-duration-slow-01: 400ms;
  --duration-duration-slow-02: 700ms;
  --icon-s: 16px;
  --icon-m: 20px;
  --icon-l: 24px;
  --icon-xl: 32px;
}
/* Phone values measured at 390px; IBM's CSS switches at 671px. */
@media (max-width: 671px) {
  :root {
    --page-margin: 16px;
    --text-leadspace-headline-h1-size: 32.8px;
    --text-section-headline-h2-size: 32.8px;
    --text-section-intro-size: 20px;
    --text-announcement-line-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: 48px; padding: 0 16px; border-radius: 4px;
  background: #0F62FE; color: #FFFFFF;
  font: 400 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #0050E6; } /* observed */
.button-tertiary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 16px; border-radius: 4px;
  background: var(--color-transparent); color: #0F62FE;
  box-shadow: inset 0 0 0 1px #0F62FE;
  font: 400 16px/1 var(--font-body);
}
.button-tertiary:hover { background-color: #0050E6; color: #FFFFFF; } /* observed */