/* HubSpot brand tokens, from unfairly.ai/brand-guidelines/hubspot (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.hubspot.com/ (Measured from computed styles, CSS custom properties and screenshots of the live homepage at 1440 and 390 on 2026-10-31.).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name HubSpot's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #FCFCFA;
  --color-ink: #1F1F1F;
  --color-ink-muted: #616161;
  --color-accent: #FF4800;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #042729;
  --color-night: #1F1F1F;
  --color-on-night: #F8F5EE;
  --color-hubspot-orange-orange-08: #FF4800;
  --color-orange-hover-orange-09: #C93700;
  --color-orange-pressed-orange-10: #9F2800;
  --color-orange-tint-orange-03: #FCECE6;
  --color-orange-light-orange-05: #FCC6B1;
  --color-neutral-13-text-01: #1F1F1F;
  --color-white: #FFFFFF;
  --color-cream-01-background-01: #FCFCFA;
  --color-cream-03-text-on-dark: #F8F5EE;
  --color-teal-13-dark-background-01: #042729;
  --color-teal-12-dark-background-02: #093436;
  --color-agent-band-base: #FCDED2;
  --color-gradient-peach: #FFA581;
  --color-gradient-pink: #FDBFDB;
  --color-gradient-magenta: #F939A6;
  --color-gradient-blush: #FBDFE9;
  --color-gradient-shell: #FBDDD0;
  --color-gradient-orange: #FF4900;
  --color-agent-ui-plum: #5E043B;
  --color-teal-11-link-02: #124548;
  --color-teal-08-focus: #2F7579;
  --color-hairline: #E3E3E3;
  --color-muted-text: #616161;
  --color-footer-muted-link: #A5A5A5;
  --color-purple-beta: #7D53E9;
  --color-purple-beta-tint: #E5E1FA;
  --color-success-green: #00823A;
  --color-error-red: #D9002B;
  --color-warning-yellow: #EEB117;
  --color-sage-accent: #B9CDBE;
  --color-lavender-accent: #D6C2D9;
  --color-magenta-accent: #FCC3DC;
  --color-neutral-08: #676565;
  --color-neutral-05: #CFCCCB;
  --color-black: #000000;
  --color-button-primary-on-light-fill: #FF4800;
  --color-button-primary-on-light-text: #FFFFFF;
  --color-button-secondary-on-light-fill: #FFFFFF;
  --color-button-secondary-on-light-text: #FF4800;
  --color-button-secondary-on-light-ring: #FF4800;
  --color-button-outline-on-light-text: #1F1F1F;
  --color-button-outline-on-light-ring: #1F1F1F;
  --color-button-secondary-on-dark-text: #F8F5EE;
  --color-button-secondary-on-dark-ring: #F8F5EE;
  --color-text-link-text: #1F1F1F;
  --color-tagline-chip-fill: #FFFFFF;
  --color-product-card-fill: #FFFFFF;
  --color-agent-card-fill: #FFFFFF;
  --color-testimonial-card-fill: #FFFFFF;
  --color-tab-text: #1F1F1F;
  --color-round-control-fill: #FFFFFF;
  --font-display: Literata, Literata, Georgia, "Times New Roman", serif;
  --font-display-original: "HubSpot Serif", Literata, Literata, Georgia, "Times New Roman", serif;
  --font-body: Onest, Onest, "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "HubSpot Sans", Onest, Onest, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono", Menlo, monospace;
  --page-margin: 110px;
  --section-padding: 64px;
  --container-max: 1220px;
  --hero-text-max: 1078px;
  --card-gap: 24px;
  --nav-height: 128px;
  --grid-gutter: 24px;
  --grid-columns: 12;
  --text-display-xl-size: 65px;
  --text-display-xl-line: 1.2;
  --text-display-xl-weight: 320;
  --text-display-l-size: 48px;
  --text-display-l-line: 1.154;
  --text-display-l-weight: 320;
  --text-h2-size: 40px;
  --text-h2-line: 1.1;
  --text-h2-weight: 320;
  --text-stat-size: 40px;
  --text-stat-line: 1.1;
  --text-stat-weight: 480;
  --text-caption-serif-size: 28px;
  --text-caption-serif-line: 1.1;
  --text-caption-serif-weight: 320;
  --text-h3-size: 24px;
  --text-h3-line: 1.417;
  --text-h3-weight: 600;
  --text-h4-size: 14px;
  --text-h4-line: 1.15;
  --text-h4-weight: 600;
  --text-h5-size: 18px;
  --text-h5-line: 1.556;
  --text-h5-weight: 600;
  --text-p-large-size: 18px;
  --text-p-large-line: 1.778;
  --text-p-large-weight: 400;
  --text-p-medium-size: 16px;
  --text-p-medium-line: 1.75;
  --text-p-medium-weight: 400;
  --text-label-m-size: 16px;
  --text-label-m-line: 1.75;
  --text-label-m-weight: 600;
  --text-p-small-size: 14px;
  --text-p-small-line: 1.571;
  --text-p-small-weight: 400;
  --text-p-small-tracking: -0.1px;
  --text-micro-size: 12px;
  --text-micro-line: 1.667;
  --text-micro-weight: 500;
  --radius-button-primary-on-light: 8px;
  --radius-button-secondary-on-light: 8px;
  --radius-button-outline-on-light: 8px;
  --radius-button-secondary-on-dark: 8px;
  --radius-tagline-chip: 4px;
  --radius-product-card: 16px;
  --radius-agent-card: 16px;
  --radius-testimonial-card: 16px;
  --radius-round-control: 9999px;
  --ease-button-color: linear;
  --duration-button-color: 150ms;
  --ease-text-link-underline: ease-in-out;
  --duration-text-link-underline: 300ms;
  --ease-carousel-slide: ease;
  --duration-carousel-slide: 300ms;
  --ease-marquee: linear;
  --ease-integrations-cloud: linear;
  --ease-hero-tile-video: n/a;
  --icon-product: 24px;
  --icon-chip: 32px;
  --icon-ui: 16px;
}
/* Phone values measured at 390px; HubSpot's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 16px;
    --section-padding: 32px;
    --text-display-xl-size: 40px;
    --text-display-l-size: 40px;
    --text-h2-size: 32px;
    --text-h4-size: 16px;
  }
}
.button-primary-on-light {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 24px; border-radius: 8px;
  background: #FF4800; color: #FFFFFF;
  font: 600 16px/1 var(--font-body);
}
.button-primary-on-light:hover { background-color: #C93700; } /* observed */
.button-secondary-on-light {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 24px; border-radius: 8px;
  background: #FFFFFF; color: #FF4800;
  box-shadow: inset 0 0 0 2px #FF4800;
  font: 600 16px/1 var(--font-body);
}
.button-secondary-on-light:hover { background-color: #FCECE6; color: #C93700; border-color: #C93700; } /* observed */
.button-outline-on-light {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 24px; border-radius: 8px;
  background: transparent; color: #1F1F1F;
  box-shadow: inset 0 0 0 2px #1F1F1F;
  font: 600 16px/1 var(--font-body);
}
.button-secondary-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 24px; border-radius: 8px;
  background: transparent; color: #F8F5EE;
  box-shadow: inset 0 0 0 2px #F8F5EE;
  font: 600 16px/1 var(--font-body);
}
.button-secondary-on-dark:hover { background-color: rgba(0,0,0,0.2); } /* observed */