/* Slack brand tokens, from unfairly.ai/brand-guidelines/slack (checked 2026-10-29).
   Sizes, spacing and components were measured on https://slack.com/ (Playwright at 1440x900 and 390x844 with a desktop Chrome UA on 2026-10-29, the OneTrust banner hidden and the reference variant forced (body class s-cta-refresh removed; see the hero CTA note); computed styles plus pixel samples of the reference screenshots).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Slack's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F4EDE4;
  --color-ink: #1D1C1D;
  --color-ink-muted: #5C5C5C;
  --color-accent: #730394;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #9602C7;
  --color-night: #4A154B;
  --color-on-night: #FFFFFF;
  --color-slack-blue: #36C5F0;
  --color-slack-green: #2EB67D;
  --color-slack-yellow: #ECB22E;
  --color-slack-red: #E01E5A;
  --color-black: #1D1C1D;
  --color-cobalt: #1E328F;
  --color-sky: #0E9DD3;
  --color-teal: #2392A2;
  --color-pool: #78D7DD;
  --color-evergreen: #185F34;
  --color-moss: #729C1A;
  --color-sandbar: #FFD57E;
  --color-peach: #FED4BE;
  --color-salmon: #F2606A;
  --color-bubblegum: #FFB6BD;
  --color-crimson: #921D21;
  --color-terracotta: #DE8969;
  --color-berry: #7C2852;
  --color-mauve: #C05B8C;
  --color-site-aubergine: #481A54;
  --color-cta-purple: #730394;
  --color-headline-purple: #9602C7;
  --color-site-ink: #181818;
  --color-muted-text: #5C5C5C;
  --color-caption-gray: #757575;
  --color-card-meta: #444444;
  --color-link-blue: #0B5CAB;
  --color-mark-red-2026: #E3066A;
  --color-mark-blue-2026: #00B3FF;
  --color-mark-green-2026: #41B658;
  --color-mark-yellow-2026: #FCC003;
  --color-hero-tab-active: #2E0039;
  --color-lilac-tint: #F9F0FF;
  --color-accordion-bar: #F9EDFF;
  --color-stat-gradient-end: #D17DFE;
  --color-nav-ink: #1D1D1D;
  --color-link-hover: #014486;
  --color-control-border: #C9C9C9;
  --color-card-border: #F3F3F3;
  --color-tab-gray: #747474;
  --color-tab-rule: #E9E3EA;
  --color-footer-rule: #EDEAED;
  --color-promo-arrow: #1264A3;
  --color-switcher-ring-phone: #B56AC4;
  --color-switcher-fill-phone: #D389E7;
  --color-switcher-text-phone: #5E5D60;
  --color-ring-on-dark: #76537F;
  --color-hero-circle-edge: #FBF5FF;
  --color-button-primary-fill: #730394;
  --color-button-primary-text: #FFFFFF;
  --color-button-secondary-fill: #FFFFFF;
  --color-button-secondary-text: #730394;
  --color-button-secondary-ring: #730394;
  --color-nav-button-primary-fill: #730394;
  --color-nav-button-primary-text: #FFFFFF;
  --color-nav-button-secondary-fill: #FFFFFF;
  --color-nav-button-secondary-text: #730394;
  --color-nav-button-secondary-ring: #730394;
  --color-button-on-dark-primary-fill: #FFFFFF;
  --color-button-on-dark-primary-text: #730394;
  --color-button-on-dark-secondary-text: #FFFFFF;
  --color-button-on-dark-secondary-ring: #FFFFFF;
  --color-hero-tab-pill-fill: #FFFFFF;
  --color-hero-tab-pill-text: #481A54;
  --color-dark-feature-pill-fill: #481A54;
  --color-dark-feature-pill-text: #FFFFFF;
  --color-badge-new-fill: #F9F0FF;
  --color-badge-new-text: #730394;
  --color-text-link-text: #0B5CAB;
  --color-carousel-arrow-fill: #FFFFFF;
  --color-carousel-arrow-text: #181818;
  --color-video-control-fill: #FFFFFF;
  --color-video-control-text: #730394;
  --color-whats-new-card-fill: #FFFFFF;
  --color-whats-new-card-text: #000000;
  --color-resource-card-fill: #FFFFFF;
  --color-resource-card-text: #000000;
  --color-section-tab-text: #747474;
  --color-carousel-item-text: #181818;
  --color-pager-dot-fill: #730394;
  --color-pager-dot-text: #FFFFFF;
  --font-display: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display-original: Salesforce-Avant-Garde, Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-original: Salesforce-Sans, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-margin: 105px;
  --section-padding: 96px;
  --container-max: 1230px;
  --hero-text-max: 923px;
  --card-gap: 48px;
  --nav-height: 80px;
  --grid-gutter: 48px;
  --grid-columns: 12;
  --text-h1-size: 64px;
  --text-h1-line: 1.0625;
  --text-h1-weight: 600;
  --text-h1-tracking: -2.24px;
  --text-h2-size: 50px;
  --text-h2-line: 1.12;
  --text-h2-weight: 600;
  --text-h2-tracking: -1.75px;
  --text-h2-small-size: 32px;
  --text-h2-small-line: 1.25;
  --text-h2-small-weight: 600;
  --text-h2-small-tracking: -1.12px;
  --text-card-title-size: 24px;
  --text-card-title-line: 1.25;
  --text-card-title-weight: 600;
  --text-card-title-tracking: -0.84px;
  --text-tab-size: 22px;
  --text-tab-line: 1.27;
  --text-tab-weight: 600;
  --text-tab-tracking: -0.77px;
  --text-stat-size: 80px;
  --text-stat-line: 1.05;
  --text-stat-weight: 600;
  --text-stat-tracking: -0.96px;
  --text-stat-small-size: 64px;
  --text-stat-small-line: 1;
  --text-stat-small-weight: 600;
  --text-stat-small-tracking: -0.768px;
  --text-body-l-size: 18px;
  --text-body-l-line: 1.555;
  --text-body-l-weight: 400;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-label-size: 16px;
  --text-label-line: 1.375;
  --text-label-weight: 650;
  --text-label-tracking: 0.2px;
  --text-button-size: 14px;
  --text-button-line: 1.29;
  --text-button-weight: 650;
  --text-button-tracking: 0.798px;
  --text-nav-size: 15px;
  --text-nav-line: 1.55;
  --text-nav-weight: 650;
  --text-badge-size: 12px;
  --text-badge-line: 1.33;
  --text-badge-weight: 650;
  --text-caption-size: 12px;
  --text-caption-line: 1.55;
  --text-caption-weight: 400;
  --text-meta-size: 14px;
  --text-meta-line: 1.3;
  --text-meta-weight: 400;
  --text-meta-tracking: 0.1px;
  --text-footer-head-size: 14px;
  --text-footer-head-line: 1.55;
  --text-footer-head-weight: 650;
  --text-footer-head-tracking: 0.8px;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1.55;
  --text-footer-link-weight: 400;
  --text-quote-size: 18px;
  --text-quote-line: 1.4;
  --text-quote-weight: 300;
  --text-eyebrow-size: 14px;
  --text-eyebrow-line: 1.25;
  --text-eyebrow-weight: 650;
  --text-eyebrow-tracking: -0.112px;
  --radius-button-primary: 4px;
  --radius-button-secondary: 4px;
  --radius-nav-button-primary: 4px;
  --radius-nav-button-secondary: 4px;
  --radius-button-on-dark-primary: 4px;
  --radius-button-on-dark-secondary: 4px;
  --radius-hero-tab-pill: 48px;
  --radius-dark-feature-pill: 32px;
  --radius-badge-new: 999px;
  --radius-text-link: 0px;
  --radius-carousel-arrow: 999px;
  --radius-video-control: 999px;
  --radius-whats-new-card: 16px;
  --radius-resource-card: 0px;
  --radius-section-tab: 0px;
  --radius-carousel-item: 0px;
  --radius-pager-dot: 999px;
  --ease-easing: not published;
}
/* Phone values measured at 390px. Slack's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 36px;
    --text-h1-size: 32px;
    --text-h2-size: 28px;
    --text-h2-small-size: 28px;
    --text-card-title-size: 22.4px;
    --text-tab-size: 18px;
    --text-stat-small-size: 48px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 57px; padding: 0 40px; border-radius: 4px;
  background: #730394; color: #FFFFFF;
  font: 700 14px/1 var(--font-body);
}
.button-primary:hover { background-color: #481A54; } /* observed */
.button-primary:focus-visible { outline: 2px dotted #730394; outline-offset: 5px; } /* observed */
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 57px; padding: 0 40px; border-radius: 4px;
  background: #FFFFFF; color: #730394;
  font: 700 14px/1 var(--font-body);
}
.button-secondary:hover { box-shadow: inset 0 0 0 2px #730394; } /* observed */
.nav-button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 42px; padding: 0 16px; border-radius: 4px;
  background: #730394; color: #FFFFFF;
  font: 700 14px/1 var(--font-body);
}
.nav-button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 42px; padding: 0 16px; border-radius: 4px;
  background: #FFFFFF; color: #730394;
  font: 700 14px/1 var(--font-body);
}
.button-on-dark-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 57px; padding: 0 40px; border-radius: 4px;
  background: #FFFFFF; color: #730394;
  font: 700 14px/1 var(--font-body);
}
.button-on-dark-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 57px; padding: 0 40px; border-radius: 4px;
  background: var(--color-rgba-0-0-0-0); color: #FFFFFF;
  font: 700 14px/1 var(--font-body);
}