/* Atlassian brand tokens, from unfairly.ai/brand-guidelines/atlassian (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.atlassian.com/ (Playwright computed styles, bounding boxes and canvas text metrics at 1440 and 390 px (768 for the type steps) on 2026-10-29; pixel samples where computed color and render disagreed).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Atlassian's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-ink: #292A2E;
  --color-ink-muted: #505258;
  --color-accent: #1868DB;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #964AC0;
  --color-night: #1E1F21;
  --color-on-night: #FFFFFF;
  --color-homepage-ink: #101214;
  --color-blue800-brand-hover: #1558BC;
  --color-blue850-brand-pressed: #144794;
  --color-blue600-chart-brand: #357DE8;
  --color-blue500-focus: #4688EC;
  --color-blue100-selected: #E9F2FE;
  --color-neutral200: #F0F1F2;
  --color-neutral300: #DDDEE1;
  --color-neutral500: #8C8F97;
  --color-neutral700-subtlest: #6B6E76;
  --color-red700-danger: #C9372C;
  --color-lime700-success: #5B7F24;
  --color-orange300-warning: #FBC828;
  --color-red300-alexandria: #FD9891;
  --color-magenta300-rosie: #F797D2;
  --color-dark-surface: #1F1F21;
  --color-dark-text: #CECFD2;
  --color-tile-yellow-service-collection: #FFC716;
  --color-tile-orange-strategy-collection: #FB9700;
  --color-lime400-software-collection-tile: #94C748;
  --color-purple400-product-collection-tile: #C97CF4;
  --color-logo-neutral: #6C6F77;
  --color-home-white: #FFFFFF;
  --color-home-text: #292A2E;
  --color-home-text-subtle: #505258;
  --color-home-text-subtlest: #63666B;
  --color-home-footer-link-strong: #1C2B42;
  --color-home-language: #42526E;
  --color-home-blue: #1868DB;
  --color-home-blue-pressed-dark: #123263;
  --color-home-sunken: #F8F8F8;
  --color-hero-grid-line: #F6F6F6;
  --color-hero-grid-line-light: #FAFAFA;
  --color-home-night: #1E1F21;
  --color-home-night-mark: #111213;
  --color-card-blue-soft: #CFE1FD;
  --color-card-orange: #C75300;
  --color-card-lime-soft: #D3F1A7;
  --color-card-green: #4C6B1F;
  --color-card-yellow-soft: #FFE48F;
  --color-card-purple: #803FA5;
  --color-card-lilac-soft: #EED7FC;
  --color-tag-lime: #EFFFD6;
  --color-tag-purple: #F8EEFE;
  --color-tag-yellow: #FFF5D4;
  --color-tag-orange-text: #9E4C00;
  --color-graph-purple-2: #BF63F3;
  --color-graph-orange-2: #F47B00;
  --color-graph-green: #82B536;
  --color-graph-blue-light: #8FB8F6;
  --color-secondary-hover-tint: #100F0E;
  --color-marquee-logo-grey: #3B3D42;
  --color-hero-grid-line: #EFEFEF;
  --color-hero-grid-line-faint: #F9F9F9;
  --color-button-primary-fill: #1868DB;
  --color-button-primary-text: #FFFFFF;
  --color-button-secondary-text: #101214;
  --color-button-secondary-ring: #101214;
  --color-text-link-text: #1868DB;
  --color-footer-link-text: #101214;
  --color-tab-bar-fill: #F0F1F2;
  --color-tab-bar-on: #101214;
  --color-carousel-arrow-fill: #101214;
  --color-carousel-arrow-text: #FFFFFF;
  --color-media-frame-ring: #DDDEE1;
  --color-search-button-fill: #F8F8F8;
  --color-pause-button-fill: #DDDEE1;
  --color-pause-button-text: #101214;
  --color-carousel-dots-fill: #6C6F77;
  --color-carousel-dots-on: #101214;
  --font-display: "Rethink Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display-original: "Charlie Display", "Rethink Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Wix Madefor Text", "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "Charlie Text", "Wix Madefor Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-mono-original: "Atlassian Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --page-margin: 136px;
  --section-padding: 80px;
  --container-max: 1168px;
  --hero-text-max: 968px;
  --card-gap: 32px;
  --nav-height: 68px;
  --grid-gutter: 32px;
  --grid-columns: 4;
  --text-hero-size: 64px;
  --text-hero-line: 1.04;
  --text-hero-weight: 600;
  --text-hero-tracking: -2.44px;
  --text-section-size: 48px;
  --text-section-line: 1.16;
  --text-section-weight: 600;
  --text-section-tracking: -1.67px;
  --text-subsection-size: 40px;
  --text-subsection-line: 1.2;
  --text-subsection-weight: 600;
  --text-subsection-tracking: -1.23px;
  --text-pillar-size: 32px;
  --text-pillar-line: 1.24;
  --text-pillar-weight: 600;
  --text-pillar-tracking: -0.78px;
  --text-card-title-size: 24px;
  --text-card-title-line: 1.24;
  --text-card-title-weight: 600;
  --text-card-title-tracking: -0.46px;
  --text-story-size: 24px;
  --text-story-line: 1.36;
  --text-story-weight: 400;
  --text-story-tracking: -1.06px;
  --text-lead-size: 20px;
  --text-lead-line: 1.56;
  --text-lead-weight: 450;
  --text-lead-tracking: -0.04px;
  --text-body-size: 16px;
  --text-body-line: 1.56;
  --text-body-weight: 450;
  --text-body-tracking: -0.1px;
  --text-button-size: 20px;
  --text-button-line: 1.2;
  --text-button-weight: 450;
  --text-button-tracking: 0.06px;
  --text-tab-size: 18px;
  --text-tab-line: 1.44;
  --text-tab-weight: 600;
  --text-tab-tracking: -0.02px;
  --text-nav-size: 16px;
  --text-nav-line: 1;
  --text-nav-weight: 450;
  --text-nav-tracking: 0.06px;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1;
  --text-footer-link-weight: 400;
  --text-footer-link-tracking: -0.06px;
  --text-footer-head-size: 13px;
  --text-footer-head-line: 1.2;
  --text-footer-head-weight: 700;
  --text-footnote-size: 12px;
  --text-footnote-line: 1.56;
  --text-footnote-weight: 450;
  --text-stat-xl-size: 128px;
  --text-stat-xl-line: 1;
  --text-stat-xl-weight: 700;
  --text-stat-size: 96px;
  --text-stat-line: 1;
  --text-stat-weight: 700;
  --text-stat-tracking: -3px;
  --text-stat-label-size: 16px;
  --text-stat-label-line: 1.2;
  --text-stat-label-weight: 500;
  --text-stat-label-tracking: 1.28px;
  --radius-button-primary: 999px;
  --radius-button-secondary: 999px;
  --radius-tab-bar: 40px;
  --radius-carousel-arrow: 999px;
  --radius-story-card: 20px;
  --radius-lab-card: 20px;
  --radius-media-frame: 20px;
  --radius-search-button: 999px;
  --radius-pause-button: 999px;
  --radius-lab-tag: 3px;
  --radius-carousel-dots: 999px;
  --ease-ease-in-out-bold: cubic-bezier(0.4, 0, 0, 1);
  --ease-ease-out-bold: cubic-bezier(0, 0.4, 0, 1);
  --ease-practical-out: cubic-bezier(0.6, 0, 0.8, 0.6);
  --ease-practical-in: cubic-bezier(0.4, 1, 0.6, 1);
  --duration-list-item-hover: 50ms;
  --duration-dropdown-enter: 150ms;
  --duration-modal-enter: 250ms;
  --ease-button: cubic-bezier(0.4, 0, 0, 1);
  --duration-button: 150ms;
  --ease-tab: ease-in-out;
  --duration-tab: 300ms;
  --ease-card-shadow: ease;
  --duration-card-shadow: 250ms;
  --ease-logo-marquee: linear;
  --duration-logo-marquee: 90000ms;
  --icon-small: 12px;
  --icon-medium: 16px;
}
/* Phone values measured at 390px; Atlassian's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 32px;
    --section-padding: 48px;
    --text-hero-size: 44px;
    --text-section-size: 32px;
    --text-subsection-size: 24px;
    --text-pillar-size: 20px;
    --text-card-title-size: 18px;
    --text-story-size: 18px;
    --text-button-size: 16px;
    --text-tab-size: 16px;
    --text-stat-xl-size: 72px;
    --text-stat-size: 60px;
    --text-stat-label-size: 12px;
  }
}
.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 26px; border-radius: 999px;
  background: #1868DB; color: #FFFFFF;
  font: 450 20px/1 var(--font-body);
}
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--color-transparent); color: #101214;
  box-shadow: inset 0 0 0 2px #101214;
  font: 450 20px/1 var(--font-body);
}
.search-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 8px; border-radius: 999px;
  background: #F8F8F8; color: var(--color-ink);
  font: 400 13.33px/1 var(--font-body);
}
.pause-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 12px; border-radius: 999px;
  background: #DDDEE1; color: #101214;
  font: 400 13.33px/1 var(--font-body);
}