/* Primary Font */
@font-face {
  font-display: swap;
  font-family: "HubSpot Sans";
  font-weight: 300 400;
  /* Intentionally using Book for 400, not Regular */
  src: url("//cdn2.hubspot.net/hubfs/53/assets/hs-components/v4/fonts/hubspot-2025/HubSpotSans-Book.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "HubSpot Sans";
  font-weight: 500 600;
  /* Intentionally using Medium for 600, not Bold */
  src: url("//cdn2.hubspot.net/hubfs/53/assets/hs-components/v4/fonts/hubspot-2025/HubSpotSans-Medium.woff2") format("woff2");
}
/* Secondary Font */
@font-face {
  font-display: swap;
  font-family: "HubSpot Serif";
  src: url("//cdn2.hubspot.net/hubfs/53/assets/hs-components/v4/fonts/hubspot-2025/HubSpotSerif-Medium.woff2") format("woff2");
}
/* Japanese Font */
@font-face {
  font-display: swap;
  font-family: "Zen Kaku Gothic New";
  font-weight: 300 400;
  /* Intentionally using Regular for 300, not Light */
  src: url("//cdn2.hubspot.net/hubfs/53/assets/hs-components/v4/fonts/ja/ZenKakuGothicNew-Regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Zen Kaku Gothic New";
  font-weight: 500;
  src: url("//cdn2.hubspot.net/hubfs/53/assets/hs-components/v4/fonts/ja/ZenKakuGothicNew-Medium.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Zen Kaku Gothic New";
  font-weight: 700;
  src: url("//cdn2.hubspot.net/hubfs/53/assets/hs-components/v4/fonts/ja/ZenKakuGothicNew-Bold.woff2") format("woff2");
}
/*
  Breakpoint mixins for device ranges.

  @example
    .my-class {
      padding: 8px;

      @include desktop-up {
        padding: 16px;
      }
    }
*/
/**
 * @param {string} $query - The media or container query string to be used, e.g. 'width >= 600px'
 * @param {'media'|'container'|'dynamic} $type ['media'] - Type of query. If 'dynamic', both are generated, using a modifier for container
 * @param {string|null} $container-name [null] - Optional container-name to use in generated container queries
 * @param {string} $dynamic-modifier ['-use-container'] - Modifier class to distinguish container vs media, if $type == 'dynamic'
 */
/**
 * Expected format for $color-theme-config is a list of lists.
 * Each child list should consist of:
 * the name of the token, the light theme value, the dark theme value. e.g.:
 *
 * $color-theme-config: (
 *   ('token-name-01', $light-theme-token-name-01, $dark-theme-token-name-01),
 *   ('token-name-02', $light-theme-token-name-02, $dark-theme-token-name-02),
 * );
 */
[data-cl-brand=hubspot-2025] {
  --light-theme-accent-fill-01: #cfcccb;
  --light-theme-accent-fill-02: #fcc6b1;
  --light-theme-accent-fill-03: #fcc5be;
  --light-theme-accent-fill-04: #b9cdbe;
  --light-theme-accent-fill-05: #ece6d9;
  --light-theme-accent-fill-06: #d7cdfc;
  --light-theme-accent-fill-07: #b2e9eb;
  --light-theme-accent-fill-08: #fbdbe9;
  --light-theme-accent-decoration-01: #9b9897;
  --light-theme-accent-decoration-02: #ffa581;
  --light-theme-accent-decoration-03: #ffa499;
  --light-theme-accent-decoration-04: #9cbaa4;
  --light-theme-accent-decoration-05: #ccc0a3;
  --light-theme-accent-decoration-06: #c4b4f7;
  --light-theme-accent-decoration-07: #97dadc;
  --light-theme-accent-decoration-08: #fcc3dc;
  --light-theme-badge-brand-fill-01: #fcc6b1;
  --light-theme-background-01: #fcfcfa;
  --light-theme-background-02: #f8f5ee;
  --light-theme-background-03: #f8f5ee;
  --light-theme-background-accent-01: #b9cdbe;
  --light-theme-background-accent-02: #d6c2d9;
  --light-theme-background-accent-03: #fcc3dc;
  --light-theme-background-footer-01: #1f1f1f;
  --light-theme-beta-01: #7d53e9;
  --light-theme-beta-background-01: #e5e1fa;
  --light-theme-border-01: #1f1f1f;
  --light-theme-border-02: rgba(0, 0, 0, 0.4705882353);
  --light-theme-border-03: rgba(0, 0, 0, 0.1098039216);
  --light-theme-border-brand-01: #ff4800;
  --light-theme-border-highlight-01: #2f7579;
  --light-theme-button-primary-text-color: #ffffff;
  --light-theme-button-primary-fill-idle: #ff4800;
  --light-theme-button-primary-fill-hover: #c93700;
  --light-theme-button-primary-fill-pressed: #9f2800;
  --light-theme-button-secondary-border: #ff4800;
  --light-theme-button-secondary-fill-idle: #ffffff;
  --light-theme-button-secondary-fill-hover: #fcece6;
  --light-theme-button-secondary-fill-pressed: #fcc6b1;
  --light-theme-button-tertiary-fill-idle: #1f1f1f;
  --light-theme-button-tertiary-fill-hover: rgba(0, 0, 0, 0.6196078431);
  --light-theme-button-tertiary-fill-pressed: rgba(0, 0, 0, 0.4705882353);
  --light-theme-checkmark-list-icon-brand-fill: #ff4800;
  --light-theme-container-01: #ffffff;
  --light-theme-container-02: rgba(255, 255, 255, 0.4588235294);
  --light-theme-container-03: rgba(255, 255, 255, 0.4);
  --light-theme-container-inverse-01: #1f1f1f;
  --light-theme-disabled-01: rgba(0, 0, 0, 0.2);
  --light-theme-disabled-02: rgba(255, 255, 255, 0.6196078431);
  --light-theme-disabled-03: rgba(255, 255, 255, 0.4588235294);
  --light-theme-divider-01: rgba(0, 0, 0, 0.1098039216);
  --light-theme-error-01: #d9002b;
  --light-theme-error-background-01: #fcc5be;
  --light-theme-focus-01: #2f7579;
  --light-theme-free-01: #2f7579;
  --light-theme-free-background-01: #ccf4f5;
  --light-theme-hover-01: rgba(0, 0, 0, 0.0509803922);
  --light-theme-hover-02: rgba(0, 0, 0, 0.0588235294);
  --light-theme-hover-03: #cfcccb;
  --light-theme-hover-brand-01: #c93700;
  --light-theme-hover-inverse-01: rgba(0, 0, 0, 0.8117647059);
  --light-theme-hover-link-01: #1f1f1f;
  --light-theme-hover-link-02: rgba(0, 0, 0, 0.6196078431);
  --light-theme-hubspot-brand-01: #ff4800;
  --light-theme-icon-01: #1f1f1f;
  --light-theme-icon-02: #292929;
  --light-theme-icon-on-color-01: #ffffff;
  --light-theme-link-01: #1f1f1f;
  --light-theme-link-02: #124548;
  --light-theme-loading-primary-fill-active: #ff4800;
  --light-theme-loading-primary-fill-inactive: #fcc6b1;
  --light-theme-loading-secondary-fill-active: rgba(0, 0, 0, 0.2);
  --light-theme-loading-secondary-fill-inactive: rgba(0, 0, 0, 0.1098039216);
  --light-theme-neutral-01: #9b9897;
  --light-theme-neutral-background-01: #cfcccb;
  --light-theme-number-fill-active: #ff4800;
  --light-theme-number-fill-inactive: #ffdbc1;
  --light-theme-number-fill-statistic: #ff4800;
  --light-theme-overlay-01: rgba(0, 0, 0, 0.8117647059);
  --light-theme-play-button-fill-idle: #ff4800;
  --light-theme-play-button-fill-hover: #c93700;
  --light-theme-play-button-fill-pressed: #ffa766;
  --light-theme-pressed-01: rgba(0, 0, 0, 0.0588235294);
  --light-theme-pressed-02: rgba(0, 0, 0, 0.0784313725);
  --light-theme-pressed-03: #9b9897;
  --light-theme-pressed-brand-01: #9f2800;
  --light-theme-pressed-inverse-01: rgba(0, 0, 0, 0.6196078431);
  --light-theme-pressed-link-01: #1f1f1f;
  --light-theme-pressed-link-02: rgba(0, 0, 0, 0.6196078431);
  --light-theme-success-01: #00823a;
  --light-theme-success-background-01: #bde7cb;
  --light-theme-text-01: #1f1f1f;
  --light-theme-text-02: rgba(0, 0, 0, 0.6196078431);
  --light-theme-text-brand-01: #ff4800;
  --light-theme-text-link-underline-01: #ff4800;
  --light-theme-text-on-color-01: #ffffff;
  --light-theme-text-placeholder-01: rgba(0, 0, 0, 0.4);
  --light-theme-warning-01: #eeb117;
  --light-theme-warning-background-01: #fbeece;
  --dark-theme-accent-fill-01: #000000;
  --dark-theme-accent-fill-02: #9f2800;
  --dark-theme-accent-fill-03: #ac0020;
  --dark-theme-accent-fill-04: #1b582a;
  --dark-theme-accent-fill-05: #64593e;
  --dark-theme-accent-fill-06: #5113ba;
  --dark-theme-accent-fill-07: #1e5b5f;
  --dark-theme-accent-fill-08: #800051;
  --dark-theme-accent-decoration-01: #1c1c1c;
  --dark-theme-accent-decoration-02: #c93700;
  --dark-theme-accent-decoration-03: #d9002b;
  --dark-theme-accent-decoration-04: #327142;
  --dark-theme-accent-decoration-05: #7d7050;
  --dark-theme-accent-decoration-06: #6431da;
  --dark-theme-accent-decoration-07: #2f7579;
  --dark-theme-accent-decoration-08: #a5016a;
  --dark-theme-badge-brand-fill-01: #c93700;
  --dark-theme-background-01: #042729;
  --dark-theme-background-02: #093436;
  --dark-theme-background-03: #093436;
  --dark-theme-background-accent-01: #042729;
  --dark-theme-background-accent-02: #46062b;
  --dark-theme-background-accent-03: #25155e;
  --dark-theme-background-footer-01: #1f1f1f;
  --dark-theme-beta-01: #9778ec;
  --dark-theme-beta-background-01: #6431da;
  --dark-theme-border-01: #f8f5ee;
  --dark-theme-border-02: rgba(255, 255, 255, 0.4);
  --dark-theme-border-03: rgba(255, 255, 255, 0.0784313725);
  --dark-theme-border-brand-01: #ff4800;
  --dark-theme-border-highlight-01: #b9cdbe;
  --dark-theme-button-primary-text-color: #ffffff;
  --dark-theme-button-primary-fill-idle: #ff4800;
  --dark-theme-button-primary-fill-hover: #c93700;
  --dark-theme-button-primary-fill-pressed: #9f2800;
  --dark-theme-button-secondary-border: #f8f5ee;
  --dark-theme-button-secondary-fill-idle: rgba(0, 0, 0, 0.1098039216);
  --dark-theme-button-secondary-fill-hover: rgba(0, 0, 0, 0.2);
  --dark-theme-button-secondary-fill-pressed: rgba(0, 0, 0, 0.4);
  --dark-theme-button-tertiary-fill-idle: #ffffff;
  --dark-theme-button-tertiary-fill-hover: rgba(255, 255, 255, 0.8117647059);
  --dark-theme-button-tertiary-fill-pressed: rgba(255, 255, 255, 0.6196078431);
  --dark-theme-checkmark-list-icon-brand-fill: #ff4800;
  --dark-theme-container-01: #042729;
  --dark-theme-container-02: rgba(0, 0, 0, 0.168627451);
  --dark-theme-container-03: rgba(0, 0, 0, 0.4);
  --dark-theme-container-inverse-01: #ffffff;
  --dark-theme-disabled-01: rgba(255, 255, 255, 0.168627451);
  --dark-theme-disabled-02: rgba(255, 255, 255, 0.0588235294);
  --dark-theme-disabled-03: rgba(255, 255, 255, 0.0784313725);
  --dark-theme-divider-01: rgba(255, 255, 255, 0.0784313725);
  --dark-theme-error-01: #ff7b70;
  --dark-theme-error-background-01: #d9002b;
  --dark-theme-focus-01: #7aa485;
  --dark-theme-free-01: #459195;
  --dark-theme-free-background-01: #2f7579;
  --dark-theme-hover-01: rgba(255, 255, 255, 0.0509803922);
  --dark-theme-hover-02: rgba(255, 255, 255, 0.0588235294);
  --dark-theme-hover-03: rgba(255, 255, 255, 0.0784313725);
  --dark-theme-hover-brand-01: #ff7d4c;
  --dark-theme-hover-inverse-01: rgba(255, 255, 255, 0.8117647059);
  --dark-theme-hover-link-01: #f8f5ee;
  --dark-theme-hover-link-02: rgba(255, 255, 255, 0.6196078431);
  --dark-theme-hubspot-brand-01: #ff4800;
  --dark-theme-icon-01: #f8f5ee;
  --dark-theme-icon-02: #b6b1af;
  --dark-theme-icon-on-color-01: #1f1f1f;
  --dark-theme-link-01: #f8f5ee;
  --dark-theme-link-02: #eef4f0;
  --dark-theme-loading-primary-fill-active: #ff4800;
  --dark-theme-loading-primary-fill-inactive: #fcc6b1;
  --dark-theme-loading-secondary-fill-active: #f8f5ee;
  --dark-theme-loading-secondary-fill-inactive: rgba(255, 255, 255, 0.4);
  --dark-theme-neutral-01: #4d4c4c;
  --dark-theme-neutral-background-01: #141414;
  --dark-theme-number-fill-active: #ff4800;
  --dark-theme-number-fill-inactive: #ffdbc1;
  --dark-theme-number-fill-statistic: #ff4800;
  --dark-theme-overlay-01: rgba(0, 0, 0, 0.8117647059);
  --dark-theme-play-button-fill-idle: #ff4800;
  --dark-theme-play-button-fill-hover: #c93700;
  --dark-theme-play-button-fill-pressed: #9f2800;
  --dark-theme-pressed-01: rgba(255, 255, 255, 0.0588235294);
  --dark-theme-pressed-02: rgba(255, 255, 255, 0.0784313725);
  --dark-theme-pressed-03: rgba(255, 255, 255, 0.1098039216);
  --dark-theme-pressed-brand-01: #ffa581;
  --dark-theme-pressed-inverse-01: rgba(255, 255, 255, 0.6196078431);
  --dark-theme-pressed-link-01: #f8f5ee;
  --dark-theme-pressed-link-02: rgba(255, 255, 255, 0.6196078431);
  --dark-theme-success-01: #3cb769;
  --dark-theme-success-background-01: #00823a;
  --dark-theme-text-01: #f8f5ee;
  --dark-theme-text-02: rgba(255, 255, 255, 0.6196078431);
  --dark-theme-text-brand-01: #f8f5ee;
  --dark-theme-text-link-underline-01: #ff4800;
  --dark-theme-text-on-color-01: #1f1f1f;
  --dark-theme-text-placeholder-01: rgba(255, 255, 255, 0.4);
  --dark-theme-warning-01: #d39913;
  --dark-theme-warning-background-01: #956309;
}
[data-cl-brand=hubspot-2025],
[data-cl-brand=hubspot-2025] [data-cl-theme=light],
[data-cl-brand=hubspot-2025] [data-background=white],
[data-cl-brand=hubspot-2025] [data-background=off-white],
[data-cl-brand=hubspot-2025] .-white,
[data-cl-brand=hubspot-2025] .-light {
  --cl-color-accent-fill-01: var(--light-theme-accent-fill-01);
  --cl-color-accent-fill-02: var(--light-theme-accent-fill-02);
  --cl-color-accent-fill-03: var(--light-theme-accent-fill-03);
  --cl-color-accent-fill-04: var(--light-theme-accent-fill-04);
  --cl-color-accent-fill-05: var(--light-theme-accent-fill-05);
  --cl-color-accent-fill-06: var(--light-theme-accent-fill-06);
  --cl-color-accent-fill-07: var(--light-theme-accent-fill-07);
  --cl-color-accent-fill-08: var(--light-theme-accent-fill-08);
  --cl-color-accent-decoration-01: var(--light-theme-accent-decoration-01);
  --cl-color-accent-decoration-02: var(--light-theme-accent-decoration-02);
  --cl-color-accent-decoration-03: var(--light-theme-accent-decoration-03);
  --cl-color-accent-decoration-04: var(--light-theme-accent-decoration-04);
  --cl-color-accent-decoration-05: var(--light-theme-accent-decoration-05);
  --cl-color-accent-decoration-06: var(--light-theme-accent-decoration-06);
  --cl-color-accent-decoration-07: var(--light-theme-accent-decoration-07);
  --cl-color-accent-decoration-08: var(--light-theme-accent-decoration-08);
  --cl-color-badge-brand-fill-01: var(--light-theme-badge-brand-fill-01);
  --cl-color-background-01: var(--light-theme-background-01);
  --cl-color-background-02: var(--light-theme-background-02);
  --cl-color-background-03: var(--light-theme-background-03);
  --cl-color-background-accent-01: var(--light-theme-background-accent-01);
  --cl-color-background-accent-02: var(--light-theme-background-accent-02);
  --cl-color-background-accent-03: var(--light-theme-background-accent-03);
  --cl-color-background-footer-01: var(--light-theme-background-footer-01);
  --cl-color-beta-01: var(--light-theme-beta-01);
  --cl-color-beta-background-01: var(--light-theme-beta-background-01);
  --cl-color-border-01: var(--light-theme-border-01);
  --cl-color-border-02: var(--light-theme-border-02);
  --cl-color-border-03: var(--light-theme-border-03);
  --cl-color-border-brand-01: var(--light-theme-border-brand-01);
  --cl-color-border-highlight-01: var(--light-theme-border-highlight-01);
  --cl-color-button-primary-text-color: var(--light-theme-button-primary-text-color);
  --cl-color-button-primary-fill-idle: var(--light-theme-button-primary-fill-idle);
  --cl-color-button-primary-fill-hover: var(--light-theme-button-primary-fill-hover);
  --cl-color-button-primary-fill-pressed: var(--light-theme-button-primary-fill-pressed);
  --cl-color-button-secondary-border: var(--light-theme-button-secondary-border);
  --cl-color-button-secondary-fill-idle: var(--light-theme-button-secondary-fill-idle);
  --cl-color-button-secondary-fill-hover: var(--light-theme-button-secondary-fill-hover);
  --cl-color-button-secondary-fill-pressed: var(--light-theme-button-secondary-fill-pressed);
  --cl-color-button-tertiary-fill-idle: var(--light-theme-button-tertiary-fill-idle);
  --cl-color-button-tertiary-fill-hover: var(--light-theme-button-tertiary-fill-hover);
  --cl-color-button-tertiary-fill-pressed: var(--light-theme-button-tertiary-fill-pressed);
  --cl-color-checkmark-list-icon-brand-fill: var(--light-theme-checkmark-list-icon-brand-fill);
  --cl-color-container-01: var(--light-theme-container-01);
  --cl-color-container-02: var(--light-theme-container-02);
  --cl-color-container-03: var(--light-theme-container-03);
  --cl-color-container-inverse-01: var(--light-theme-container-inverse-01);
  --cl-color-disabled-01: var(--light-theme-disabled-01);
  --cl-color-disabled-02: var(--light-theme-disabled-02);
  --cl-color-disabled-03: var(--light-theme-disabled-03);
  --cl-color-divider-01: var(--light-theme-divider-01);
  --cl-color-error-01: var(--light-theme-error-01);
  --cl-color-error-background-01: var(--light-theme-error-background-01);
  --cl-color-focus-01: var(--light-theme-focus-01);
  --cl-color-free-01: var(--light-theme-free-01);
  --cl-color-free-background-01: var(--light-theme-free-background-01);
  --cl-color-hover-01: var(--light-theme-hover-01);
  --cl-color-hover-02: var(--light-theme-hover-02);
  --cl-color-hover-03: var(--light-theme-hover-03);
  --cl-color-hover-brand-01: var(--light-theme-hover-brand-01);
  --cl-color-hover-inverse-01: var(--light-theme-hover-inverse-01);
  --cl-color-hover-link-01: var(--light-theme-hover-link-01);
  --cl-color-hover-link-02: var(--light-theme-hover-link-02);
  --cl-color-hubspot-brand-01: var(--light-theme-hubspot-brand-01);
  --cl-color-icon-01: var(--light-theme-icon-01);
  --cl-color-icon-02: var(--light-theme-icon-02);
  --cl-color-icon-on-color-01: var(--light-theme-icon-on-color-01);
  --cl-color-link-01: var(--light-theme-link-01);
  --cl-color-link-02: var(--light-theme-link-02);
  --cl-color-loading-primary-fill-active: var(--light-theme-loading-primary-fill-active);
  --cl-color-loading-primary-fill-inactive: var(--light-theme-loading-primary-fill-inactive);
  --cl-color-loading-secondary-fill-active: var(--light-theme-loading-secondary-fill-active);
  --cl-color-loading-secondary-fill-inactive: var(--light-theme-loading-secondary-fill-inactive);
  --cl-color-neutral-01: var(--light-theme-neutral-01);
  --cl-color-neutral-background-01: var(--light-theme-neutral-background-01);
  --cl-color-number-fill-active: var(--light-theme-number-fill-active);
  --cl-color-number-fill-inactive: var(--light-theme-number-fill-inactive);
  --cl-color-number-fill-statistic: var(--light-theme-number-fill-statistic);
  --cl-color-overlay-01: var(--light-theme-overlay-01);
  --cl-color-play-button-fill-idle: var(--light-theme-play-button-fill-idle);
  --cl-color-play-button-fill-hover: var(--light-theme-play-button-fill-hover);
  --cl-color-play-button-fill-pressed: var(--light-theme-play-button-fill-pressed);
  --cl-color-pressed-01: var(--light-theme-pressed-01);
  --cl-color-pressed-02: var(--light-theme-pressed-02);
  --cl-color-pressed-03: var(--light-theme-pressed-03);
  --cl-color-pressed-brand-01: var(--light-theme-pressed-brand-01);
  --cl-color-pressed-inverse-01: var(--light-theme-pressed-inverse-01);
  --cl-color-pressed-link-01: var(--light-theme-pressed-link-01);
  --cl-color-pressed-link-02: var(--light-theme-pressed-link-02);
  --cl-color-success-01: var(--light-theme-success-01);
  --cl-color-success-background-01: var(--light-theme-success-background-01);
  --cl-color-text-01: var(--light-theme-text-01);
  --cl-color-text-02: var(--light-theme-text-02);
  --cl-color-text-brand-01: var(--light-theme-text-brand-01);
  --cl-color-text-link-underline-01: var(--light-theme-text-link-underline-01);
  --cl-color-text-on-color-01: var(--light-theme-text-on-color-01);
  --cl-color-text-placeholder-01: var(--light-theme-text-placeholder-01);
  --cl-color-warning-01: var(--light-theme-warning-01);
  --cl-color-warning-background-01: var(--light-theme-warning-background-01);
}
[data-cl-brand=hubspot-2025] [data-cl-theme=dark], [data-cl-theme=dark][data-cl-brand=hubspot-2025],
[data-cl-brand=hubspot-2025] [data-background=dark],
[data-cl-brand=hubspot-2025] .-dark {
  --cl-color-accent-fill-01: var(--dark-theme-accent-fill-01);
  --cl-color-accent-fill-02: var(--dark-theme-accent-fill-02);
  --cl-color-accent-fill-03: var(--dark-theme-accent-fill-03);
  --cl-color-accent-fill-04: var(--dark-theme-accent-fill-04);
  --cl-color-accent-fill-05: var(--dark-theme-accent-fill-05);
  --cl-color-accent-fill-06: var(--dark-theme-accent-fill-06);
  --cl-color-accent-fill-07: var(--dark-theme-accent-fill-07);
  --cl-color-accent-fill-08: var(--dark-theme-accent-fill-08);
  --cl-color-accent-decoration-01: var(--dark-theme-accent-decoration-01);
  --cl-color-accent-decoration-02: var(--dark-theme-accent-decoration-02);
  --cl-color-accent-decoration-03: var(--dark-theme-accent-decoration-03);
  --cl-color-accent-decoration-04: var(--dark-theme-accent-decoration-04);
  --cl-color-accent-decoration-05: var(--dark-theme-accent-decoration-05);
  --cl-color-accent-decoration-06: var(--dark-theme-accent-decoration-06);
  --cl-color-accent-decoration-07: var(--dark-theme-accent-decoration-07);
  --cl-color-accent-decoration-08: var(--dark-theme-accent-decoration-08);
  --cl-color-badge-brand-fill-01: var(--dark-theme-badge-brand-fill-01);
  --cl-color-background-01: var(--dark-theme-background-01);
  --cl-color-background-02: var(--dark-theme-background-02);
  --cl-color-background-03: var(--dark-theme-background-03);
  --cl-color-background-accent-01: var(--dark-theme-background-accent-01);
  --cl-color-background-accent-02: var(--dark-theme-background-accent-02);
  --cl-color-background-accent-03: var(--dark-theme-background-accent-03);
  --cl-color-background-footer-01: var(--dark-theme-background-footer-01);
  --cl-color-beta-01: var(--dark-theme-beta-01);
  --cl-color-beta-background-01: var(--dark-theme-beta-background-01);
  --cl-color-border-01: var(--dark-theme-border-01);
  --cl-color-border-02: var(--dark-theme-border-02);
  --cl-color-border-03: var(--dark-theme-border-03);
  --cl-color-border-brand-01: var(--dark-theme-border-brand-01);
  --cl-color-border-highlight-01: var(--dark-theme-border-highlight-01);
  --cl-color-button-primary-text-color: var(--dark-theme-button-primary-text-color);
  --cl-color-button-primary-fill-idle: var(--dark-theme-button-primary-fill-idle);
  --cl-color-button-primary-fill-hover: var(--dark-theme-button-primary-fill-hover);
  --cl-color-button-primary-fill-pressed: var(--dark-theme-button-primary-fill-pressed);
  --cl-color-button-secondary-border: var(--dark-theme-button-secondary-border);
  --cl-color-button-secondary-fill-idle: var(--dark-theme-button-secondary-fill-idle);
  --cl-color-button-secondary-fill-hover: var(--dark-theme-button-secondary-fill-hover);
  --cl-color-button-secondary-fill-pressed: var(--dark-theme-button-secondary-fill-pressed);
  --cl-color-button-tertiary-fill-idle: var(--dark-theme-button-tertiary-fill-idle);
  --cl-color-button-tertiary-fill-hover: var(--dark-theme-button-tertiary-fill-hover);
  --cl-color-button-tertiary-fill-pressed: var(--dark-theme-button-tertiary-fill-pressed);
  --cl-color-checkmark-list-icon-brand-fill: var(--dark-theme-checkmark-list-icon-brand-fill);
  --cl-color-container-01: var(--dark-theme-container-01);
  --cl-color-container-02: var(--dark-theme-container-02);
  --cl-color-container-03: var(--dark-theme-container-03);
  --cl-color-container-inverse-01: var(--dark-theme-container-inverse-01);
  --cl-color-disabled-01: var(--dark-theme-disabled-01);
  --cl-color-disabled-02: var(--dark-theme-disabled-02);
  --cl-color-disabled-03: var(--dark-theme-disabled-03);
  --cl-color-divider-01: var(--dark-theme-divider-01);
  --cl-color-error-01: var(--dark-theme-error-01);
  --cl-color-error-background-01: var(--dark-theme-error-background-01);
  --cl-color-focus-01: var(--dark-theme-focus-01);
  --cl-color-free-01: var(--dark-theme-free-01);
  --cl-color-free-background-01: var(--dark-theme-free-background-01);
  --cl-color-hover-01: var(--dark-theme-hover-01);
  --cl-color-hover-02: var(--dark-theme-hover-02);
  --cl-color-hover-03: var(--dark-theme-hover-03);
  --cl-color-hover-brand-01: var(--dark-theme-hover-brand-01);
  --cl-color-hover-inverse-01: var(--dark-theme-hover-inverse-01);
  --cl-color-hover-link-01: var(--dark-theme-hover-link-01);
  --cl-color-hover-link-02: var(--dark-theme-hover-link-02);
  --cl-color-hubspot-brand-01: var(--dark-theme-hubspot-brand-01);
  --cl-color-icon-01: var(--dark-theme-icon-01);
  --cl-color-icon-02: var(--dark-theme-icon-02);
  --cl-color-icon-on-color-01: var(--dark-theme-icon-on-color-01);
  --cl-color-link-01: var(--dark-theme-link-01);
  --cl-color-link-02: var(--dark-theme-link-02);
  --cl-color-loading-primary-fill-active: var(--dark-theme-loading-primary-fill-active);
  --cl-color-loading-primary-fill-inactive: var(--dark-theme-loading-primary-fill-inactive);
  --cl-color-loading-secondary-fill-active: var(--dark-theme-loading-secondary-fill-active);
  --cl-color-loading-secondary-fill-inactive: var(--dark-theme-loading-secondary-fill-inactive);
  --cl-color-neutral-01: var(--dark-theme-neutral-01);
  --cl-color-neutral-background-01: var(--dark-theme-neutral-background-01);
  --cl-color-number-fill-active: var(--dark-theme-number-fill-active);
  --cl-color-number-fill-inactive: var(--dark-theme-number-fill-inactive);
  --cl-color-number-fill-statistic: var(--dark-theme-number-fill-statistic);
  --cl-color-overlay-01: var(--dark-theme-overlay-01);
  --cl-color-play-button-fill-idle: var(--dark-theme-play-button-fill-idle);
  --cl-color-play-button-fill-hover: var(--dark-theme-play-button-fill-hover);
  --cl-color-play-button-fill-pressed: var(--dark-theme-play-button-fill-pressed);
  --cl-color-pressed-01: var(--dark-theme-pressed-01);
  --cl-color-pressed-02: var(--dark-theme-pressed-02);
  --cl-color-pressed-03: var(--dark-theme-pressed-03);
  --cl-color-pressed-brand-01: var(--dark-theme-pressed-brand-01);
  --cl-color-pressed-inverse-01: var(--dark-theme-pressed-inverse-01);
  --cl-color-pressed-link-01: var(--dark-theme-pressed-link-01);
  --cl-color-pressed-link-02: var(--dark-theme-pressed-link-02);
  --cl-color-success-01: var(--dark-theme-success-01);
  --cl-color-success-background-01: var(--dark-theme-success-background-01);
  --cl-color-text-01: var(--dark-theme-text-01);
  --cl-color-text-02: var(--dark-theme-text-02);
  --cl-color-text-brand-01: var(--dark-theme-text-brand-01);
  --cl-color-text-link-underline-01: var(--dark-theme-text-link-underline-01);
  --cl-color-text-on-color-01: var(--dark-theme-text-on-color-01);
  --cl-color-text-placeholder-01: var(--dark-theme-text-placeholder-01);
  --cl-color-warning-01: var(--dark-theme-warning-01);
  --cl-color-warning-background-01: var(--dark-theme-warning-background-01);
}
[data-cl-brand=hubspot-2025] {
  /* font-family */
  --cl-font-family: "HubSpot Sans", sans-serif;
  --cl-font-family-display: "HubSpot Serif", serif;
  --cl-font-family-heading: var(--cl-font-family-display);
  /* font-size */
  --cl-font-size-small: 0.875rem;
  --cl-font-size-medium: 1rem;
  --cl-font-size-large: 1.125rem;
  --cl-font-size-micro: 0.75rem;
  --cl-font-size-blockquote: 1.125rem;
  --cl-font-size-display-01: 2.5rem;
  --cl-font-size-display-01-small: 2.5rem;
  --cl-font-size-display-02: 2rem;
  --cl-font-size-display-02-small: 2rem;
  --cl-font-size-display-03: 1.5rem;
  --cl-font-size-display-03-small: 1.5rem;
  --cl-font-size-h1: 2.5rem;
  --cl-font-size-h1-small: 2.5rem;
  --cl-font-size-h2: 2rem;
  --cl-font-size-h2-small: 2rem;
  --cl-font-size-h3: 1.5rem;
  --cl-font-size-h4: 1.375rem;
  --cl-font-size-h5: 1.125rem;
  --cl-font-size-h6: 1rem;
  --cl-font-size-input-label: var(--cl-font-size-small);
  --cl-font-size-microcopy: var(--cl-font-size-micro);
  --cl-font-size-microheading: var(--cl-font-size-small);
  --cl-font-size-p-large: var(--cl-font-size-large);
  --cl-font-size-p-medium: var(--cl-font-size-medium);
  --cl-font-size-p-small: var(--cl-font-size-small);
  /* font-weight */
  --cl-font-weight-light: 300;
  --cl-font-weight-medium: 500;
  --cl-font-weight-demi-bold: 500;
  --cl-font-weight-blockquote: var(--cl-font-weight-light);
  --cl-font-weight-display-01: var(--cl-font-weight-medium);
  --cl-font-weight-display-01-small: var(--cl-font-weight-medium);
  --cl-font-weight-display-02: var(--cl-font-weight-medium);
  --cl-font-weight-display-02-small: var(--cl-font-weight-medium);
  --cl-font-weight-display-03: var(--cl-font-weight-medium);
  --cl-font-weight-display-03-small: var(--cl-font-weight-medium);
  --cl-font-weight-h1: var(--cl-font-weight-demi-bold);
  --cl-font-weight-h1-small: var(--cl-font-weight-demi-bold);
  --cl-font-weight-h2: var(--cl-font-weight-demi-bold);
  --cl-font-weight-h2-small: var(--cl-font-weight-demi-bold);
  --cl-font-weight-h3: var(--cl-font-weight-medium);
  --cl-font-weight-h4: var(--cl-font-weight-medium);
  --cl-font-weight-h5: var(--cl-font-weight-medium);
  --cl-font-weight-h6: var(--cl-font-weight-medium);
  --cl-font-weight-input-label: var(--cl-font-weight-medium);
  --cl-font-weight-microcopy: var(--cl-font-weight-medium);
  --cl-font-weight-microheading: var(--cl-font-weight-medium);
  --cl-font-weight-p-large: var(--cl-font-weight-light);
  --cl-font-weight-p-medium: var(--cl-font-weight-light);
  --cl-font-weight-p-small: var(--cl-font-weight-light);
  --cl-font-weight-p-link: var(--cl-font-weight-medium);
  /* line-height */
  --cl-line-height-small: 1.57142857;
  --cl-line-height-medium: 1.75;
  --cl-line-height-large: 1.77777778;
  --cl-line-height-blockquote: 1.78;
  --cl-line-height-display-01: 1.04545455;
  --cl-line-height-display-01-small: 1.04545455;
  --cl-line-height-display-02: 1.125;
  --cl-line-height-display-02-small: 1.125;
  --cl-line-height-display-03: 1.41666667;
  --cl-line-height-display-03-small: 1.41666667;
  --cl-line-height-h1: 1.04545455;
  --cl-line-height-h1-small: 1.04545455;
  --cl-line-height-h2: 1.125;
  --cl-line-height-h2-small: 1.125;
  --cl-line-height-h3: 1.41666667;
  --cl-line-height-h4: 1.45454545;
  --cl-line-height-h5: 1.55555556;
  --cl-line-height-h6: 1.75;
  --cl-line-height-input-label: var(--cl-line-height-small);
  --cl-line-height-microcopy: 1.66666667;
  --cl-line-height-microheading: 1.57142857;
  --cl-line-height-p-large: var(--cl-line-height-large);
  --cl-line-height-p-medium: var(--cl-line-height-medium);
  --cl-line-height-p-small: var(--cl-line-height-small);
  --cl-text-margin-large: 1.5rem;
  --cl-text-margin-medium: 1rem;
  --cl-text-margin-small: 0.5rem;
  /* border */
  --cl-border-width-medium: 1px;
  --cl-border-width-heavy: 2px;
  --cl-border-radius-small: 4px;
  --cl-border-radius-medium: 8px;
  --cl-border-radius-container: 16px;
  --cl-border-radius-container-small: 8px;
  --cl-border-radius-container-medium: 16px;
  --cl-border-radius-input: 4px;
  /* component-specific */
  --cl-text-link-underline-thickness: 2px;
  --cl-text-link-underline-offset: 6px;
  /* "desktop" values, where distinct from "mobile" values above */
}
@media (width >= 900px) {
  [data-cl-brand=hubspot-2025] {
    --cl-font-size-display-01: 3rem;
    --cl-font-size-display-02: 2.5rem;
    --cl-font-size-display-03: 1.5rem;
    --cl-font-size-h1: 3rem;
    --cl-font-size-h2: 2.5rem;
    --cl-font-weight-h1: var(--cl-font-weight-medium);
    --cl-line-height-display-01: 1.15384615;
    --cl-line-height-display-02: 1.1;
    --cl-line-height-display-03: 1.41666667;
    --cl-line-height-h1: 1.15384615;
    --cl-line-height-h2: 1.1;
  }
}