/* Linear brand tokens, from unfairly.ai/brand-guidelines/linear (checked 2026-10-30).
   Sizes, spacing and components were measured on https://linear.app/ (Measured on https://linear.app/ at 1440x900 and 390x844 with Playwright computed styles, hover probes and 2x captures, 2026-10-30; guide values from https://linear.app/brand).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Linear's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #F4F5F8;
  --color-ink: #222326;
  --color-night: #222326;
  --color-on-night: #F4F5F8;
  --color-accent: #5E6AD2;
  --color-mercury-white: #F4F5F8;
  --color-nordic-gray: #222326;
  --color-page-ground: #08090A;
  --color-panel: #0F1011;
  --color-hero-frame: #101112;
  --color-raised-bubble: #161718;
  --color-ghost-hover: #191A1B;
  --color-text-primary: #F7F8F8;
  --color-text-secondary: #D0D6E0;
  --color-text-tertiary: #8A8F98;
  --color-text-quaternary: #62666D;
  --color-hairline-solid: #23252A;
  --color-divider-in-ui: #2E2E32;
  --color-figure-stroke-dim: #3E3E44;
  --color-button-light: #E5E5E6;
  --color-ramp-lime: #E4F222;
  --color-openai-card-blue: #B2D5FF;
  --color-openai-card-violet: #DFD1FF;
  --color-card-wash-top: #D0E5FF;
  --color-card-wash-bottom: #E9E3FF;
  --color-linear-indigo: #5E6AD2;
  --color-mention-indigo: #6D78D5;
  --color-diff-red: #F34E52;
  --color-status-red: #EB5757;
  --color-diff-green: #27A644;
  --color-code-pink: #F79CE0;
  --color-code-orange: #F7BF8B;
  --color-code-blue: #8FA6FF;
  --color-code-teal: #83DCDC;
  --color-code-yellow: #FFDF9F;
  --color-code-text: #E2E4E7;
  --color-stage-glow: #7E8185;
  --color-ghost-fill: #141516;
  --color-hero-frame-fill: #090A0B;
  --color-button-primary-pill-fill: #E5E5E6;
  --color-button-primary-pill-text: #08090A;
  --color-button-primary-pill-ring: #E5E5E6;
  --color-button-ghost-pill-fill: #141516;
  --color-button-ghost-pill-text: #F7F8F8;
  --color-nav-link-pill-text: #8A8F98;
  --color-learn-more-link-text: #8A8F98;
  --color-features-link-text: #8A8F98;
  --color-footer-link-text: #8A8F98;
  --color-illustration-panel-fill: #0F1011;
  --color-quote-card-text: #08090A;
  --color-benefit-card-phone-fill: #0F1011;
  --font-display: Inter, "Inter Variable", Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, "Inter Variable", Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono-original: "Berkeley Mono", "IBM Plex Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --page-margin: 80px;
  --section-padding: 128px;
  --container-max: 1344px;
  --hero-text-max: 1280px;
  --card-gap: 8px;
  --nav-height: 73px;
  --grid-gutter: 32px;
  --grid-columns: 2;
  --text-display-xxl-size: 72px;
  --text-display-xxl-line: 1;
  --text-display-xxl-weight: 510;
  --text-display-xxl-tracking: -1.584px;
  --text-display-xl-size: 64px;
  --text-display-xl-line: 1;
  --text-display-xl-weight: 510;
  --text-display-xl-tracking: -1.408px;
  --text-display-l-size: 48px;
  --text-display-l-line: 1;
  --text-display-l-weight: 510;
  --text-display-l-tracking: -1.056px;
  --text-quote-size: 32px;
  --text-quote-line: 1.125;
  --text-quote-weight: 400;
  --text-quote-tracking: -0.704px;
  --text-lead-size: 24px;
  --text-lead-line: 1.33;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.288px;
  --text-body-size: 15px;
  --text-body-line: 1.6;
  --text-body-weight: 400;
  --text-body-tracking: -0.165px;
  --text-button-l-size: 16px;
  --text-button-l-line: 2.75;
  --text-button-l-weight: 510;
  --text-caption-size: 14px;
  --text-caption-line: 1.5;
  --text-caption-weight: 400;
  --text-caption-tracking: -0.182px;
  --text-ui-size: 13px;
  --text-ui-line: 1.5;
  --text-ui-weight: 400;
  --text-mono-label-size: 12px;
  --text-mono-label-line: 1.4;
  --text-mono-label-weight: 400;
  --radius-button-primary-pill: 999px;
  --radius-button-ghost-pill: 999px;
  --radius-nav-link-pill: 999px;
  --radius-illustration-panel: 12px;
  --radius-quote-card: 8px;
  --radius-benefit-card-phone: 8px;
  --ease-ui-fast: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-ui-fast: 100ms;
  --ease-button: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-button: 160ms;
}
/* Phone values measured at 390px. Linear's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 24px;
    --section-padding: 40px;
    --text-display-xxl-size: 38px;
    --text-display-xl-size: 38px;
    --text-display-l-size: 24px;
    --text-quote-size: 24px;
    --text-lead-size: 15px;
  }
}
.button-primary-pill {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: #E5E5E6; color: #08090A;
  box-shadow: inset 0 0 0 1px #E5E5E6;
  font: 510 16px/1 var(--font-body);
}
.button-primary-pill:hover { background-color: #FFFFFF; } /* observed */
.button-ghost-pill {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: #141516; color: #F7F8F8;
  font: 510 16px/1 var(--font-body);
}
.button-ghost-pill:hover { background-color: #191A1B; } /* observed */