/* Zendesk brand tokens, from unfairly.ai/brand-guidelines/zendesk (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.zendesk.com/company/brand-guidelines/ (Zendesk's public brand resources page and its embedded images, the Garden design system (garden.zendesk.com) for product UI rules, and measurements of the homepage (www.zendesk.com) at 1440 and 390, 2026-10-31).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Zendesk's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F5F5F2;
  --color-ink: #11110D;
  --color-ink-muted: #5D5D59;
  --color-accent: #D1F470;
  --color-on-accent: #11110D;
  --color-accent-secondary: #203524;
  --color-night: #11110D;
  --color-on-night: #FFFFFF;
  --color-coconut: #FFFFFF;
  --color-licorice: #11110D;
  --color-matcha: #D1F470;
  --color-fern: #203524;
  --color-shamrock: #2D4C33;
  --color-cactus: #A1D78F;
  --color-pineapple: #FEEB7E;
  --color-sesame: #F5F5F2;
  --color-stat-green: #70A32A;
  --color-glow-green: #355E34;
  --color-field-ring: #D5D5D2;
  --color-connector-grey: #D7D7D7;
  --color-footer-hairline: #42433E;
  --color-control-grey: #EAEAE7;
  --color-logo-tint: #5D5D59;
  --color-button-primary-fill: #D1F470;
  --color-button-primary-text: #11110D;
  --color-button-secondary-text: #11110D;
  --color-button-secondary-ring: #11110D;
  --color-text-link-text: #11110D;
  --color-input-fill: #FFFFFF;
  --color-card-fill: #F5F5F2;
  --color-chip-fill: #D1F470;
  --color-chip-text: #11110D;
  --font-display: Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --font-display-original: "Vanilla Sans", Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --font-body: Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "Vanilla Sans", Figtree, Figtree, "Helvetica Neue", Arial, sans-serif;
  --page-margin: 169px;
  --section-padding: 88px;
  --container-max: 1102px;
  --hero-text-max: 656px;
  --card-gap: 24px;
  --nav-height: 110px;
  --grid-gutter: 24px;
  --grid-columns: 12;
  --text-display-xl-size: 68px;
  --text-display-xl-line: 1.05;
  --text-display-xl-weight: 560;
  --text-display-l-size: 42px;
  --text-display-l-line: 1.15;
  --text-display-l-weight: 560;
  --text-stat-size: 72px;
  --text-stat-line: 1;
  --text-stat-weight: 560;
  --text-title-m-size: 26px;
  --text-title-m-line: 1.25;
  --text-title-m-weight: 560;
  --text-contact-size: 42px;
  --text-contact-line: 1.15;
  --text-contact-weight: 560;
  --text-body-size: 16px;
  --text-body-line: 1.45;
  --text-body-weight: 460;
  --text-body-strong-size: 16px;
  --text-body-strong-line: 1.45;
  --text-body-strong-weight: 640;
  --text-button-size: 18px;
  --text-button-line: 1.556;
  --text-button-weight: 640;
  --text-nav-size: 16px;
  --text-nav-line: 1.44;
  --text-nav-weight: 640;
  --text-eyebrow-size: 14px;
  --text-eyebrow-line: 1.3;
  --text-eyebrow-weight: 780;
  --text-eyebrow-tracking: 0.5px;
  --text-small-size: 14px;
  --text-small-line: 1.5;
  --text-small-weight: 460;
  --text-countdown-size: 32px;
  --text-countdown-line: 1;
  --text-countdown-weight: 300;
  --radius-button-primary: 16px;
  --radius-button-secondary: 16px;
  --radius-input: 12px;
  --radius-card: 40px;
  --radius-chip: 4px;
  --ease-standard: cubic-bezier(0.7, 0, 0.3, 1);
  --duration-standard: 600ms;
  --ease-overlay: linear;
  --duration-overlay: 100ms;
  --icon-product-default: 16px;
  --icon-product-compact: 12px;
  --icon-product-illustration: 32px;
}
/* Phone values measured at 390px. Zendesk's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 48px;
    --text-display-xl-size: 43px;
    --text-display-l-size: 30px;
    --text-stat-size: 56px;
    --text-title-m-size: 22px;
    --text-contact-size: 30px;
    --text-body-size: 15px;
    --text-body-strong-size: 15px;
    --text-eyebrow-size: 12px;
    --text-small-size: 13px;
  }
}
.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 20px; border-radius: 16px;
  background: #D1F470; color: #11110D;
  font: 640 18px/1 var(--font-body);
}
.button-primary:hover { color: rgba(17, 17, 13, 0.7); box-shadow: inset 0 0 0 999px rgba(17, 17, 13, 0.05); transition: color 0.6s cubic-bezier(0.7, 0, 0.3, 1), box-shadow 0.1s linear; } /* observed */
.button-primary:focus-visible { outline: 2px solid rgba(17, 17, 13, 0.47); outline-offset: 3px; } /* observed */
.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 20px; border-radius: 16px;
  background: transparent; color: #11110D;
  box-shadow: inset 0 0 0 1px #11110D;
  font: 640 18px/1 var(--font-body);
}
.button-secondary:hover { color: rgba(17, 17, 13, 0.7); background-color: rgba(17, 17, 13, 0.05); } /* observed */
