/* Kubernetes brand tokens, from unfairly.ai/brand-guidelines/kubernetes (checked 2026-10-30).
   Sizes, spacing and components were measured on https://kubernetes.io/ (Playwright computed styles at 1440 and 390, observed 2026-10-30).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Kubernetes's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F9F9F9;
  --color-ink: #212529;
  --color-ink-muted: #6F6F6F;
  --color-accent: #326CE5;
  --color-on-accent: #FFFFFF;
  --color-night: #303030;
  --color-on-night: #FFFFFF;
  --color-kubernetes-blue: #326CE5;
  --color-white: #FFFFFF;
  --color-black-wordmark: #000000;
  --color-body-ink: #212529;
  --color-secondary-grey: #495057;
  --color-light-grey: #F9F9F9;
  --color-medium-light-grey: #6F6F6F;
  --color-medium-grey: #4C4C4C;
  --color-dark-grey: #303030;
  --color-dark-mode-ground-2: #4F4F4F;
  --color-dark-mode-link-blue: #3371E3;
  --color-feature-card-blue: #DAEAF9;
  --color-announcement-navy: #113E82;
  --color-video-ground: #13110F;
  --color-footer-ground: #403F4C;
  --color-footer-base: #202020;
  --color-footer-text: #E9E9E9;
  --color-cta-blue: #0662EE;
  --color-illustration-blue: #316CE6;
  --color-illustration-teal: #09C1D1;
  --color-illustration-pale-teal: #C9E9EC;
  --color-illustration-navy: #466BB2;
  --color-illustration-charcoal: #414141;
  --color-hover-blue: #1A53CA;
  --color-input-scrolled-nav-grey: #DEE2E6;
  --color-focus-ring-blue: #84A7EF;
  --color-focus-border: #F5F8FE;
  --color-cncf-blue: #0086FF;
  --color-cncf-light-blue: #93EAFF;
  --color-footer-rendered: #1E1E24;
  --color-button-primary-fill: #326CE5;
  --color-button-primary-text: #FFFFFF;
  --color-button-video-fill: #FFFFFF;
  --color-button-video-text: #495057;
  --color-feature-card-fill: #DAEAF9;
  --font-display: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-mono-original: SFMono-Regular, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --page-margin: 120px;
  --section-padding: 60px;
  --container-max: 1200px;
  --hero-text-max: 1200px;
  --card-gap: 20px;
  --nav-height: 64px;
  --grid-gutter: 20px;
  --grid-columns: 2;
  --text-h2-size: 32px;
  --text-h2-line: 1.2;
  --text-h2-weight: 400;
  --text-h2-bold-size: 32px;
  --text-h2-bold-line: 1.2;
  --text-h2-bold-weight: 700;
  --text-h1-phone-size: 27.85px;
  --text-h1-phone-line: 1.2;
  --text-h1-phone-weight: 400;
  --text-h4-size: 21.6px;
  --text-h4-line: 1.2;
  --text-h4-weight: 400;
  --text-card-title-size: 20.8px;
  --text-card-title-line: 1.346;
  --text-card-title-weight: 400;
  --text-lead-size: 19.2px;
  --text-lead-line: 1.5;
  --text-lead-weight: 400;
  --text-event-size: 24px;
  --text-event-line: 1.5;
  --text-event-weight: 400;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-small-size: 14px;
  --text-small-line: 1.5;
  --text-small-weight: 400;
  --text-nav-size: 14px;
  --text-nav-line: 1.5;
  --text-nav-weight: 700;
  --radius-button-primary: 6px;
  --radius-button-video: 8px;
  --radius-feature-card: 8px;
}
/* Phone values measured at 390px; Kubernetes's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 20px;
    --section-padding: 60px;
    --text-h2-size: 24.71px;
    --text-h2-bold-size: 24.71px;
    --text-h4-size: 20.6px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 33px; padding: 0 20px; border-radius: 6px;
  background: #326CE5; color: #FFFFFF;
  font: 400 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #1A53CA; } /* observed */
.button-video {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 134px; padding: 0 24px; border-radius: 8px;
  background: #FFFFFF; color: #495057;
  font: 400 28.8px/1 var(--font-body);
}
.button-video:hover { color: #326CE5; transition: color 0.15s; } /* observed */