/* GitLab brand tokens, from unfairly.ai/brand-guidelines/gitlab (checked 2026-10-29).
   Sizes, spacing and components were measured on https://design.gitlab.com/brand-introduction/ (GitLab's public brand guide (design.gitlab.com, read from its Markdown source in gitlab-org/gitlab-services/design.gitlab.com, branch main) and its embedded images, plus handbook brand pages, fetched 2026-10-29).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name GitLab's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #FDF1DD;
  --color-ink: #171321;
  --color-ink-muted: #74717A;
  --color-accent: #7759C2;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #FC6D26;
  --color-night: #171321;
  --color-on-night: #FFFFFF;
  --color-white: #FFFFFF;
  --color-charcoal: #171321;
  --color-orange-01p: #FCA326;
  --color-orange-02p: #FC6D26;
  --color-orange-03p: #E24329;
  --color-purple-01p: #A989F5;
  --color-purple-02p: #7759C2;
  --color-orange-01s: #FDF1DD;
  --color-purple-01s: #CEB3EF;
  --color-purple-02s: #5943B6;
  --color-purple-03s: #2F2A6B;
  --color-purple-04s: #232150;
  --color-teal-01s: #C5F4EC;
  --color-teal-02s: #6FDAC9;
  --color-teal-03s: #10B1B1;
  --color-gray-01: #D1D0D3;
  --color-gray-02: #A2A1A6;
  --color-gray-03: #74717A;
  --color-gray-04: #45424D;
  --color-gray-05: #2B2838;
  --color-pink-01g: #FFB9C9;
  --color-pink-02g: #FF1493;
  --color-pink-03g: #AE126C;
  --color-vermillion-01g: #D74026;
  --color-orange-01a: #FFD066;
  --color-pink-01a: #EBA9D8;
  --color-navy-01a: #0B5E99;
  --color-blue-01a: #63A6E9;
  --color-indigo-01a: #4F52B4;
  --color-green-01a: #9CD880;
  --color-green-02a: #0F8A55;
  --color-coral-01a: #FF758C;
  --color-banner-ground-fallback: #35333B;
  --color-banner-gradient-start-rendered: #2A2930;
  --color-banner-gradient-end-rendered: #FA5E32;
  --color-hero-ground-rendered: #1D1927;
  --color-nav-over-hero-rendered: #2B2734;
  --color-hero-card-computed: #2E2B37;
  --color-hero-card-rendered: #322F3B;
  --color-hero-card-19-5-rendered: #35313E;
  --color-industry-card-computed: #3A3642;
  --color-industry-card-rendered: #3C3945;
  --color-dot-field-grey: #8A8A93;
  --color-pink-gradient-stop: #E53C97;
  --color-pixel-stair-grey: #E8E7EB;
  --color-feature-section-ground-rendered: #FCFBFC;
  --color-final-cta-panel-ground: #EAEAEA;
  --color-near-black-heading: #1A1A1A;
  --color-off-white-heading: #F7F7F5;
  --color-flex-banner-title: #FAF9FD;
  --color-quote-support-grey: #A5A3A3;
  --color-ordinal-grey: #B5B6B8;
  --color-button-primary-on-light-fill: #171321;
  --color-button-primary-on-light-text: #FFFFFF;
  --color-button-primary-on-light-ring: #171321;
  --color-button-primary-on-dark-fill: #FFFFFF;
  --color-button-primary-on-dark-text: #171321;
  --color-button-primary-on-dark-ring: #FFFFFF;
  --color-button-secondary-on-dark-fill: #FFFFFF;
  --color-button-secondary-on-dark-text: #171321;
  --color-button-flex-on-dark-fill: #FFFFFF;
  --color-button-flex-on-dark-text: #171321;
  --color-button-flex-on-dark-ring: #FFFFFF;
  --color-button-ghost-on-dark-text: #FFFFFF;
  --color-button-tertiary-text: #171321;
  --color-hero-cta-bar-text: #FFFFFF;
  --color-feature-card-fill: #FFFFFF;
  --color-numbered-card-fill: #171321;
  --color-nav-link-text: #FFFFFF;
  --color-footer-link-text: #FFFFFF;
  --font-display: Inter, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-display-original: "GitLab Sans", Inter, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "GitLab Sans", Inter, Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-mono-original: "GitLab Mono", "JetBrains Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --page-margin: 165px;
  --section-padding: 96px;
  --container-max: 1110px;
  --hero-text-max: 1111px;
  --card-gap: 24px;
  --nav-height: 69px;
  --grid-gutter: 24px;
  --grid-columns: 3;
  --text-display-xl-size: 96px;
  --text-display-xl-line: 1.04;
  --text-display-xl-weight: 660;
  --text-display-xl-tracking: -2.88px;
  --text-display-l-size: 64px;
  --text-display-l-line: 1.0625;
  --text-display-l-weight: 660;
  --text-display-l-tracking: -1.92px;
  --text-title-l-size: 32px;
  --text-title-l-line: 1.125;
  --text-title-l-weight: 580;
  --text-title-l-tracking: -0.64px;
  --text-title-m-size: 24px;
  --text-title-m-line: 1.167;
  --text-title-m-weight: 580;
  --text-title-m-tracking: -0.48px;
  --text-lead-size: 24px;
  --text-lead-line: 1.33;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.48px;
  --text-body-l-size: 18px;
  --text-body-l-line: 1.44;
  --text-body-l-weight: 400;
  --text-body-bold-size: 18px;
  --text-body-bold-line: 1.556;
  --text-body-bold-weight: 660;
  --text-button-size: 18px;
  --text-button-line: 1.25;
  --text-button-weight: 660;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-body-s-size: 14px;
  --text-body-s-line: 1.571;
  --text-body-s-weight: 400;
  --text-stat-size: 64px;
  --text-stat-line: 1.2;
  --text-stat-weight: 500;
  --text-stat-tracking: -1.92px;
  --text-ordinal-size: 32px;
  --text-ordinal-line: 1.2;
  --text-ordinal-weight: 400;
  --text-label-mono-size: 16px;
  --text-label-mono-line: 1.5;
  --text-label-mono-weight: 700;
  --text-eyebrow-size: 14px;
  --text-eyebrow-line: 1.714;
  --text-eyebrow-weight: 400;
  --text-eyebrow-s-size: 12px;
  --text-eyebrow-s-line: 1.5;
  --text-eyebrow-s-weight: 400;
  --text-rail-size: 11px;
  --text-rail-line: 1.5;
  --text-rail-weight: 400;
  --text-rail-tracking: 2.42px;
  --radius-button-primary-on-light: 4px;
  --radius-button-primary-on-dark: 4px;
  --radius-button-secondary-on-dark: 4px;
  --radius-button-flex-on-dark: 4px;
  --radius-button-ghost-on-dark: 4px;
  --radius-button-tertiary: 4px;
  --radius-hero-cta-bar: 0px;
  --radius-hero-glass-card: 0px;
  --radius-feature-card: 0px;
  --radius-numbered-card: 0px;
  --radius-industry-card: 0px;
  --radius-round-arrow-button: 20px;
  --ease-interactive: cubic-bezier(0.70, 0.00, 0.30, 1.00);
  --ease-expressive: cubic-bezier(0.30, 0.80, 0.70, 1.20);
  --duration-icon-reveal: 650ms;
  --ease-lower-third: linear opacity;
  --duration-lower-third: 1000ms;
  --icon-small: 24px;
  --icon-large: 96px;
}
/* Phone values measured at 390px. GitLab's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 64px;
    --text-display-xl-size: 48px;
    --text-display-l-size: 48px;
    --text-title-m-size: 22px;
    --text-lead-size: 22px;
    --text-stat-size: 48px;
  }
}
.button-primary-on-light {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 47px; padding: 0 16px; border-radius: 4px;
  background: #171321; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #171321;
  font: 660 18px/1 var(--font-body);
}
.button-primary-on-light:hover { background-color: #FFFFFF; color: #171321; box-shadow: inset 0 0 0 1px #171321; transition: background-color 0.3s cubic-bezier(0.7, 0, 0.3, 1); } /* observed */
.button-primary-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 47px; padding: 0 16px; border-radius: 4px;
  background: #FFFFFF; color: #171321;
  box-shadow: inset 0 0 0 1px #FFFFFF;
  font: 660 18px/1 var(--font-body);
}
.button-primary-on-dark:hover { background-color: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px #FFFFFF; } /* 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: 45px; padding: 0 16px; border-radius: 4px;
  background: #FFFFFF; color: #171321;
  font: 660 18px/1 var(--font-body);
}
.button-secondary-on-dark:hover { background-color: #E8E7EB; } /* observed */
.button-flex-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 46px; padding: 0 16px; border-radius: 4px;
  background: #FFFFFF; color: #171321;
  box-shadow: inset 0 0 0 1px #FFFFFF;
  font: 580 18px/1 var(--font-body);
}
.button-flex-on-dark:hover { background-color: #E8E7EB; } /* observed */
.button-ghost-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 45px; padding: 0 16px; border-radius: 4px;
  background: transparent; color: #FFFFFF;
  font: 660 18px/1 var(--font-body);
}
.button-ghost-on-dark:hover { background-color: rgba(255,255,255,0.12); } /* observed */
.button-tertiary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 47px; padding: 0 16px; border-radius: 4px;
  background: transparent; color: #171321;
  font: 660 18px/1 var(--font-body);
}