/* Asana brand tokens, from unfairly.ai/brand-guidelines/asana (checked 2026-10-31).
   Sizes, spacing and components were measured on https://asana.com/ (computed styles and geometry of the live homepage (the "The OS for human-agent teams" A/B variant) at 1440 and 390, headless Chromium, 2026-10-31).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Asana's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F3F3F3;
  --color-ink: #0B0505;
  --color-ink-muted: #6E6E6E;
  --color-accent: #FF584A;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #FD3FFD;
  --color-night: #0D0D0D;
  --color-on-night: #FFFFFF;
  --color-asana-white: #FFFFFF;
  --color-asana-black: #0B0505;
  --color-asana-coral: #FF584A;
  --color-fuchsia: #FD3FFD;
  --color-light-fuchsia-asana-pink: #FFC9FF;
  --color-neutral-grey-asana-grey: #F3F3F3;
  --color-blue: #0071FF;
  --color-green: #0FA042;
  --color-yellow: #C6CD00;
  --color-grey-asana-dark-grey: #808080;
  --color-light-blue: #9EDCF2;
  --color-light-green: #9EF2A4;
  --color-light-yellow: #E8F552;
  --color-light-grey: #D7D9DB;
  --color-magenta: #F20D83;
  --color-turquoise: #009271;
  --color-purple: #745BFA;
  --color-orange: #FF7A00;
  --color-light-magenta: #FFADCD;
  --color-light-turquoise: #9EF2DE;
  --color-light-purple: #A999FF;
  --color-light-orange: #FFB469;
  --color-grid-dot-light: #C4C7C9;
  --color-grid-gradient-fuchsia: #FF1CFF;
  --color-site-black: #0D0D0D;
  --color-headline-black: #0D0E10;
  --color-body-grey: #3D3D3D;
  --color-hero-lead-grey: #3E3E3E;
  --color-meta-grey: #6E6E6E;
  --color-hairline: #E7E7E7;
  --color-field-line: #CFCFCF;
  --color-off-white: #FAFAFA;
  --color-dark-rule: #565656;
  --color-arrow-disabled-ring: #D5DCE0;
  --color-focus-blue: #005FCC;
  --color-site-gradient-coral: #FF453E;
  --color-site-gradient-pink: #F481F4;
  --color-button-primary-fill: #0D0D0D;
  --color-button-primary-text: #FFFFFF;
  --color-button-secondary-nav-fill: #FFFFFF;
  --color-button-secondary-nav-text: #0D0D0D;
  --color-button-secondary-nav-ring: #0D0D0D;
  --color-button-outline-fill: #FAFAFA;
  --color-button-outline-text: #0D0D0D;
  --color-button-outline-ring: #6E6E6E;
  --color-button-sso-fill: #FAFAFA;
  --color-button-sso-text: #0D0D0D;
  --color-button-sso-ring: #6E6E6E;
  --color-button-primary-on-dark-fill: #FFFFFF;
  --color-button-primary-on-dark-text: #0D0D0D;
  --color-button-secondary-fill: #FAFAFA;
  --color-button-secondary-text: #0D0D0D;
  --color-button-secondary-ring: #6E6E6E;
  --color-product-tab-fill: #3D3D3D;
  --color-product-tab-text: #FFFFFF;
  --color-product-tab-on: #FFC9FF;
  --color-input-fill: #FFFFFF;
  --color-teammate-card-fill: #FFFFFF;
  --color-skill-chip-fill: #F3F3F3;
  --color-skill-chip-text: #0D0D0D;
  --color-product-card-fill: #3D3D3D;
  --color-link-card-fill: #FFFFFF;
  --font-display: Figtree, Figtree, Arial, sans-serif;
  --font-display-original: "TWK Lausanne", Figtree, Figtree, Arial, sans-serif;
  --font-body: Figtree, Figtree, Arial, sans-serif;
  --font-body-original: "TWK Lausanne", Figtree, Figtree, Arial, sans-serif;
  --page-margin: 76px;
  --section-padding: 120px;
  --container-max: 1288px;
  --hero-text-max: 873px;
  --card-gap: 22px;
  --nav-height: 68px;
  --grid-gutter: 32px;
  --grid-columns: 2;
  --text-display-xl-size: 102px;
  --text-display-xl-line: 0.9;
  --text-display-xl-weight: 400;
  --text-display-xl-tracking: -2.55px;
  --text-display-l-size: 54px;
  --text-display-l-line: 1;
  --text-display-l-weight: 400;
  --text-display-l-tracking: -1.08px;
  --text-quote-size: 36px;
  --text-quote-line: 1.3;
  --text-quote-weight: 400;
  --text-quote-tracking: -0.36px;
  --text-subhead-size: 30px;
  --text-subhead-line: 1.2;
  --text-subhead-weight: 500;
  --text-hero-lead-size: 26px;
  --text-hero-lead-line: 1.3;
  --text-hero-lead-weight: 350;
  --text-hero-lead-tracking: 0.52px;
  --text-title-size: 24px;
  --text-title-line: 1.2;
  --text-title-weight: 500;
  --text-body-l-size: 20px;
  --text-body-l-line: 1.5;
  --text-body-l-weight: 350;
  --text-body-l-tracking: 0.4px;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 350;
  --text-body-tracking: 0.32px;
  --text-small-size: 13px;
  --text-small-line: 1.5;
  --text-small-weight: 350;
  --text-small-tracking: 0.26px;
  --text-eyebrow-size: 16px;
  --text-eyebrow-line: 1.5;
  --text-eyebrow-weight: 500;
  --text-eyebrow-tracking: 0.64px;
  --text-chip-size: 11px;
  --text-chip-line: 1.5;
  --text-chip-weight: 500;
  --text-chip-tracking: 0.44px;
  --text-button-size: 16px;
  --text-button-line: 1.5;
  --text-button-weight: 500;
  --text-nav-size: 14px;
  --text-nav-line: 1.5;
  --text-nav-weight: 500;
  --text-footer-heading-size: 14px;
  --text-footer-heading-line: 1.75;
  --text-footer-heading-weight: 500;
  --text-footer-link-size: 16px;
  --text-footer-link-line: 1.5;
  --text-footer-link-weight: 400;
  --radius-button-primary: 100px;
  --radius-button-secondary-nav: 100px;
  --radius-button-outline: 100px;
  --radius-button-sso: 100px;
  --radius-button-primary-on-dark: 100px;
  --radius-button-secondary: 100px;
  --radius-card: 8px;
  --radius-product-tab: 64px;
  --radius-input: 4px;
  --radius-teammate-card: 8px;
  --radius-skill-chip: 4px;
  --radius-product-card: 20px;
  --radius-link-card: 10px;
  --radius-panel: 20px;
  --ease-image-reveal: cubic-bezier(0, 1.08, 0.77, 1.01);
  --duration-image-reveal: 500ms;
  --ease-button-hover: ease;
  --duration-button-hover: 300ms;
  --ease-form-button-hover: ease-in-out;
  --duration-form-button-hover: 150ms;
  --icon-problem-icon: 48px;
  --icon-integration: 18px;
  --icon-product-tile: 64px;
}
/* Phone values measured at 390px. Asana's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 24px;
    --section-padding: 48px;
    --text-display-xl-size: 48px;
    --text-display-l-size: 30px;
    --text-quote-size: 20px;
    --text-subhead-size: 20px;
    --text-hero-lead-size: 18px;
    --text-title-size: 18px;
    --text-body-l-size: 15px;
    --text-body-size: 14px;
    --text-small-size: 12px;
    --text-eyebrow-size: 11px;
    --text-button-size: 14px;
    --text-nav-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: 50px; padding: 0 32px; border-radius: 100px;
  background: #0D0D0D; color: #FFFFFF;
  font: 500 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #6E6E6E; } /* observed */
.button-secondary-nav {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 16px; border-radius: 100px;
  background: #FFFFFF; color: #0D0D0D;
  box-shadow: inset 0 0 0 1px #0D0D0D;
  font: 500 14px/1 var(--font-body);
}
.button-secondary-nav:hover { background-color: #FAFAFA; } /* observed */
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 58px; padding: 0 32px; border-radius: 100px;
  background: #FAFAFA; color: #0D0D0D;
  box-shadow: inset 0 0 0 1px #6E6E6E;
  font: 500 16px/1 var(--font-body);
}
.button-outline:hover { background-color: #F3F3F3; } /* observed */
.button-sso {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 69px; padding: 0 16px; border-radius: 100px;
  background: #FAFAFA; color: #0D0D0D;
  box-shadow: inset 0 0 0 1px #6E6E6E;
  font: 500 16px/1 var(--font-body);
}
.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: 64px; padding: 0 32px; border-radius: 100px;
  background: #FFFFFF; color: #0D0D0D;
  font: 400 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: 58px; padding: 0 32px; border-radius: 100px;
  background: #FAFAFA; color: #0D0D0D;
  box-shadow: inset 0 0 0 1px #6E6E6E;
  font: 500 16px/1 var(--font-body);
}
.button-secondary:hover { background-color: #F3F3F3; } /* observed */