/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
/* stylelint-disable no-descending-specificity */
/* stylelint-disable selector-id-pattern */

@import 'style-vars.css';
@import 'backgrounds.css';
@import 'themes/base.css';
@import 'themes/dark-green.css';

/* fallback font for Inter to minimize layout shift */
@font-face {
  font-family: inter-fallback;
  size-adjust: 106.5%;
  src: local('Arial');
}

/* fallback font for Fields to minimize layout shift */
@font-face {
  font-family: fields-fallback;
  size-adjust: 106.3%;
  src: local('Georgia');
}

:root,
:host {
  --section-padding: 54px;
  --section-padding-mobile: 30px;
}

html {
  box-sizing: border-box;
  font-size: 14px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  scrollbar-gutter: stable;
}

@media (min-width: 600px) {
  html  {
    font-size: 16px;
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

header {
  height: 70px;
}

header.header-meganav {
  height: 109px;
}

img {
  height: auto;
  width: auto;
}

body {
  background-color: var(--body-background-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--color-gray-13);
  margin: 0;
  padding: 0;
  display: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.appear {
  display: unset;
}

main {
  overflow: hidden;
  margin: 0;
  color: var(--color-gray-13);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--typ-font-weight-regular);
}

sup {
  line-height: 1;
}

/* spacing */
.spacing-sm {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.spacing-md {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.spacing-lg {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.spacing-xl {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.spacing-top-sm {
  margin-top: 1rem;
}

.spacing-top-md,
.listing-header.block {
  margin-top: 1.5rem;
}

.spacing-top-lg {
  margin-top: 2rem;
}

.spacing-top-xl {
  margin-top: 3rem;
}

.spacing-bottom-sm {
  margin-bottom: 1rem;
}

.spacing-bottom-md {
  margin-bottom: 1.5rem;
}

.spacing-bottom-lg {
  margin-bottom: 2rem;
}

.spacing-bottom-xl {
  margin-bottom: 3rem;
}

@media (min-width: 600px) {
  .spacing-sm {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .spacing-md {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
  }

  .spacing-lg {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .spacing-xl {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }

  .spacing-top-sm {
    margin-top: 1.25rem;
  }

  .spacing-top-md,
  .listing-header.block {
    margin-top: 2.25rem;
  }

  .spacing-top-lg {
    margin-top: 3rem;
  }

  .spacing-top-xl {
    margin-top: 4.5rem;
  }

  .spacing-bottom-sm {
    margin-bottom: 1.25rem;
  }

  .spacing-bottom-md {
    margin-bottom: 2.25rem;
  }

  .spacing-bottom-lg {
    margin-bottom: 3rem;
  }

  .spacing-bottom-xl {
    margin-bottom: 4.5rem;
  }
}

@media (min-width: 1025px) {
  .spacing-sm {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .spacing-md {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .spacing-lg {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .spacing-xl {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .spacing-top-sm {
    margin-top: 1.5rem;
  }

  .spacing-top-md,
  .listing-header.block {
    margin-top: 3rem;
  }

  .spacing-top-lg {
    margin-top: 4rem;
  }

  .spacing-top-xl {
    margin-top: 6rem;
  }

  .spacing-bottom-sm {
    margin-bottom: 1.5rem;
  }

  .spacing-bottom-md {
    margin-bottom: 3rem;
  }

  .spacing-bottom-lg {
    margin-bottom: 4rem;
  }

  .spacing-bottom-xl {
    margin-bottom: 6rem;
  }
}

/* force top spacing off */
.spacing-top-none {
  margin-top: 0;
}

/* force bottom spacing off */
.spacing-bottom-none {
  margin-bottom: 0;
}

/* force top AND bottom spacing off */
.spacing-none {
  margin-top: 0;
  margin-bottom: 0;
}

/* Padding top utilities */
.padding-top-none {
  padding-top: 0 !important;
}

.padding-top-sm {
  padding-top: 1rem !important; /* 16px */
}

.padding-top-md {
  padding-top: 1.5rem !important; /* 24px */
}

.padding-top-lg {
  padding-top: 2rem !important; /* 32px */
}

.padding-top-xl {
  padding-top: 3rem !important; /* 48px */
}

/* Homepage v2 footer styles */
.homepagev2 footer {
  background-color: #E8F5FA;
}

.homepagev2 footer a {
  color: var(--color-gray-13);
}

.homepagev2 footer .footer {
  max-width: calc(var(--width-xl) + var(--section-padding) * 2);
}

.homepagev2 footer .footer h3 {
  color: var(--color-gray-13) !important;
}

.homepagev2 footer a:hover {
  color: #2A2520; /* Slightly darker than gray-13 */
}

.homepagev2 footer .footer p strong a {
  color: #03551C; /* Dark green for strong links */
}

.homepagev2 footer .social .icon > svg > g {
  fill: #38312F; /* Gray-13 for social icons */
}

.homepagev2 footer .social .icon:hover > svg > g {
  fill: #2A2520; /* Darker gray on hover */
}

.homepagev2 footer .footer p {
  color: var(--color-gray-13);
}

.homepagev2 footer .footer p:hover {
  color: #2A2520; /* Darker gray on hover */
}

/* spacing from base */
.title-spacing-top :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.25em;
}

.section.spacing-none {
  margin-top: 0 !important;
}

.section.padding-none {
  padding-bottom: 0 !important;
}

#base .block.spacing {
  margin-top: 48px;
  margin-bottom: 48px;
}

#base .block.spacing-top {
  margin-top: 48px;
}

#base .block.spacing-bottom {
  margin-bottom: 48px;
}

@media (min-width: 1025px) {
  #base .block.spacing {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  #base .block.spacing-top {
    margin-top: 64px;
  }

  #base .block.spacing-bottom {
    margin-bottom: 64px;
  }

}

/* buttons */
a.button:any-link,
.block.calculator button,
.event-table button {
  text-decoration: none;
  border-radius: 100px;
  border: none;
  padding: var(--button-padding-size-lg);

  /* outline: none; (keep outline for a11n) */
  text-align: center;
  font-size: var(--button-font-size-lg);
  line-height: var(--button-line-height-size-lg);
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: var(--typ-font-weight-bold);
  cursor: pointer;
  margin: 16px 0;
  display: inline-block;
  background-image: unset;
  transition: background-color 0.1s;
  letter-spacing: .5px;
}

a.button.button:any-link,
.block.block.calculator button,
.event-table button {
  font-family: var(--body-font-family);
}

main .button-size-lg a.button,
main .button-size-lg a.small.button,
a.button.large:any-link,
.large-button a.button,
.block.title a.button,
.block.button-size-lg .button-container a.button,
main .block.call-to-action a.button,
main .block.title a.button,
main .block.columns-1-cols a.button,
main .block.listing-cards a.button.show-all,
main .wistia.custom-play-button > picture > a.custom-play-button {
  font-size: var(--button-font-size-lg);
  padding: var(--button-padding-size-lg);
  line-height: var(--button-line-height-size-lg);
}

main .button-size-sm a.button,
main .button-size-sm a.small.button,
a.button.small:any-link,
.block a.button:any-link,
main .callout a.button,
.small-button a.button,
.title.button-size-sm a.button:any-link,
main .block.button-inline a.button {
  font-size: var(--button-font-size-sm);
  line-height: var(--button-line-height-size-sm);
  padding: var(--button-padding-size-sm);
  transition: background-color .25s ease-in-out;
}

main .button-size-lg.block:not(.button-style-link):not(.primary-buttons) .button-container ~ .button-container a.button {
  padding-top: 16px;
  padding-bottom: 16px;
}

main .block:not(.button-style-link) .button-container a.button.light,
main .block:not(.button-style-link):not(.primary-buttons) .button-container ~ .button-container a.button,
main .button-size-sm.block:not(.button-style-link):not(.primary-buttons) .button-container ~ .button-container a.button {
  padding-top: 8px;
  padding-bottom: 8px;
}

main .button-container,
main .button-spacing-none a.button:any-link {
  margin: 0;
}

main .block.button-inline .button-container {
  display: inline-block;
  margin-right: 20px;
  margin-top: 0;
}

main .button-style-link .button {
  padding: 0;
}

main .button-style-link .button-container {
  margin-bottom: 5px;
}

a.button-inline .button-container:last-of-type {
  margin-right: 0;
}

a.button.secondary:any-link {
  border-radius: 5px;
}

main .section p.button-container.left {
  text-align: left;
}

/* Button color */
a.button:hover,
a.button:focus {
  background-color: var(--theme-shade5);
}

a.button:not(.link):any-link,
.calculator button,
.event-table button {
  color: var(--color-white);
  background-color: var(--color-green-4);
  transition: background-color 0.25s ease-in-out;
}

/* stylelint-disable-next-line selector-class-pattern */
main .block.button-rose .mktoForm .mktoButton,
.button-rose a.button:not(.link):any-link,
main .block.button-rose .inline-form button {
  background-color: var(--color-rose-3);
}

main .block.button-color-tangerine-3 a:not(.link):any-link {
  background-color: var(--color-tangerine-3);
}

main .block.button-color-tangerine-3 a:not(.link):any-link:hover {
  background-color: var(--color-3-shade-10);
}


main .button-light-green a.button:not(.link):any-link {
  background-color: var(--color-green-1);
  color: var(--color-green-5)
}

main .button-light-green a.button:not(.link):any-link:hover {
  background-color: var(--color-green-2);
}

a.button:not(.link):any-link:hover,
.block.calculator button:hover {
  background-color: var(--color-green-5);
}

/* stylelint-disable-next-line selector-class-pattern */
main .block.button-rose .mktoForm .mktoButton:hover,
.button-rose a.button:not(.link):any-link:hover,
main .block.button-rose .inline-form button:hover {
  background-color: var(--color-rose-4);
}

.red-cta a.button:not(.link):any-link {
  background-color: var(--color-rose-3);
}

/* temporary button styles */
main .button-dark-green a.button:not(.link):any-link {
  background-color: var(--color-green-5);
  border: solid 2px var(--color-green-5);
  color: var(--color-white);
}

main .button-dark-green a.button:not(.link):any-link:hover {
  background-color: var(--color-green-4);
  border-color: var(--color-green-4);
}

main .background-color-green-5 .button-dark-green a.button:not(.link):any-link {
  border: solid 2px var(--color-green-4);
}

main .button-green-5 a.button:not(.link):any-link {
  background-color: var(--color-green-5);
  border: solid 2px var(--color-green-4);
  color: var(--color-white);
}

main .button-green-5 a.button:not(.link):any-link:hover {
  background-color: var(--color-white);
  color: var(--color-green-5);
  border-color: var(--color-green-5);
}

main .button-hover-color-1 a.button:not(.link):any-link:hover {
  background-color: var(--color-1);
  color: var(--color-gray-13);
}

main .button-color-1 .button-container a.button {
  background-color: var(--color-1);
  color: var(--color-gray-13);
}

main .button-color-1 .button-container a.button:hover {
  background-color: var(--color-green-4);
  color: var(--color-white);
}

main .block.button-color-1:not(.button-style-link):not(.multi-cta-cards):not(.primary-buttons)  .button-container ~ .button-container a.button {
  background-color: transparent;
  border-color: var(--color-1);
  color: var(--color-white);
}

main .block.button-color-1:not(.button-style-link):not(.multi-cta-cards):not(.primary-buttons)  .button-container ~ .button-container a.button:hover {
  background-color: var(--color-green-4);
}

/* Dual-button columns configuration */
main .columns.button-dual-green .button-container:first-child a.button:not(.link):any-link {
  background-color: var(--color-green-1); /* #ECFFC7 */
  color: var(--color-green-5); /* #03551C */
  border: solid 2px var(--color-green-1); /* #ECFFC7 */
}

main .columns.button-dual-green .button-container:first-child a.button:not(.link):any-link:hover,
main .block.columns.button-dual-green:not(.button-style-link):not(.multi-cta-cards):not(.primary-buttons) .button-container:nth-child(2) a.button:not(.link):any-link:hover,
main .columns.button-dual-green .button-container:nth-child(2) a.button:not(.link):any-link:hover  {
  border: solid 2px var(--color-green-1); /* #ECFFC7 */
  color: var(--color-green-1); /* #ECFFC7 */
  background: var(--color-green-4);
}

main .columns.button-dual-green .button-container:nth-child(2) a.button:not(.link):any-link {
  border: solid 2px var(--color-green-1); /* #ECFFC7 */
  color: var(--color-green-1); /* #ECFFC7 */
  background: var(--color-green-5);
}

.red-cta a.button:not(.link):any-link:hover {
  background-color: var(--color-rose-4);
}

main .block.red-cta:not(.button-style-link):not(.multi-cta-cards) .button-container~.button-container .button.accent {
  border-color: var(--color-rose-3);
  color: var(--color-rose-3);
}

/* button link */
a.button.link:any-link,
main .carousel.style-1 a.button:any-link,
.integrations-listing .details-container ul li a ,
.content-library-success .want-more-columns a.button:not(.link):any-link,
.multi-cta-cards > div > div > ul + .button-container a {
  background-color: transparent !important;
  border-radius: revert;
  color: var(--theme-shade10);
  font-family: var(--body-font-family);
  font-size: 1rem;
  font-style: var(--typ-font-weight-bold);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: revert;
  overflow: visible;
  position: relative;
}

/* caret link styles 2023 rebrand */
a.button.link:any-link,
.caret-link:any-link,
.caret-link-header-color:any-link:not(.related-posts-card-body .caret-link:any-link),
.caret-link-theme-color:any-link:not(.background .caret-link:any-link),
main .carousel.style-1 a.button:any-link,
.home-more .columns a.button:any-link,
.blog-post main .author-description a.learn-more,
.multi-cta-cards > div > div > ul + .button-container a.button:any-link,
main .table.comparison.block table a:any-link,
main .block.cards.caret-links .button-container ~ .button-container a.button:any-link {
  position: relative;
  font-size: var(--body-font-size);
  font-weight: var(--typ-font-weight-bold);
  line-height: var(--body-line-height);
  display: inline-block;
  color: var(--color-green-4);
  transition: color .25s ease-in-out;
  text-decoration: none;
  overflow: visible;
  border-radius: revert;
  padding-right: 0;
}

a.button.link:any-link::after,
.caret-link::after,
main .carousel.style-1 a.button::after,
.integrations-listing .details-container ul li a::after,
.content-library-success .want-more-columns a.button:not(.link):any-link::after,
.multi-cta-cards > div > div > ul + .button-container a::after,
.columns.button-text-color-shade-5 a.button.link:any-link::after,
.caret-link-header-color:not(.related-posts-card-body .caret-link:any-link)::after,
.caret-link-theme-color:not(.background .caret-link:any-link)::after,
.home-more .columns a.button:any-link::after,
.blog-post main .author-description a.learn-more::after,
.multi-cta-cards > div > div > ul + .button-container a.button:any-link::after,
.pagination-wrapper .pagination-button-next::after,
.block.cards.caret-links .button-container ~ .button-container a.button::after {
  content: "";
  border: solid var(--color-green-4);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg) translateY(-50%);
  position: relative;
  top: 2px;
  margin-left: 8px;
  margin-right: -1rem;
}

a.button.link:any-link:hover,
.caret-link:any-link:hover,
.caret-link-header-color:any-link:hover:not(.related-posts-card-body .caret-link:any-link:hover),
.caret-link-theme-color:any-link:hover:not(.background .caret-link:any-link:hover),
main .carousel.style-1 a.button:any-link:hover,
a.button.link:any-link:visited,
.caret-link:any-link:visited,
.caret-link-header-color:any-link:visited:not(.related-posts-card-body .caret-link:any-link:visited),
.caret-link-theme-color:any-link:visited:not(.background .caret-link:any-link:visited),
main .carousel.style-1 a.button:any-link:visited,
.home-more .columns a.button:any-link:visited,
.blog-post main .author-description a:any-link:hover,
.multi-cta-cards > div > div > ul + .button-container a.button:any-link:hover,
main .table.comparison.block table a:any-link:hover,
main .block.cards.caret-links .button-container ~ .button-container a.button:any-link:hover {
  color: var(--color-green-5);
}

a.button.link:any-link:hover::after,
.caret-link:hover::after,
 main .carousel.style-1 a.button:hover::after,
.integrations-listing .details-container ul li a:hover::after,
.content-library-success .want-more-columns a.button:not(.link):any-link:hover::after,
.multi-cta-cards > div > div > ul + .button-container a:hover::after,
.columns.button-text-color-shade-5 a.button.link:any-link:hover::after,
.caret-link-header-color:not(.related-posts-card-body .caret-link:any-link):hover::after,
.caret-link-theme-color:not(.background .caret-link:any-link):hover::after,
.category-benefits-comp:hover::after,
.home-more .columns a.button:any-link:hover::after,
a.button.link:any-link:visited::after,
.caret-link:visited::after,
main .carousel.style-1 a.button:visited::after,
.integrations-listing .details-container ul li a:visited::after,
.content-library-success .want-more-columns a.button:not(.link):any-link:visited::after,
.multi-cta-cards > div > div > ul + .button-container a:visited::after,
.columns.button-text-color-shade-5 a.button.link:any-link:visited::after,
.caret-link-header-color:not(.related-posts-card-body .caret-link:any-link):visited::after,
.caret-link-theme-color:not(.background .caret-link:any-link):visited::after,
.home-more .columns a.button:any-link:visited::after,
.blog-post main .author-description a:any-link:hover::after,
.multi-cta-cards > div > div > ul + .button-container a.button:any-link:hover::after {
  border: solid var(--color-green-5);
  border-width: 0 2px 2px 0;
}

a.button.link:any-link:focus-visible,
.caret-link:any-link:focus-visible,
.caret-link-header-color:any-link:focus-visible:not(.related-posts-card-body .caret-link:any-link:focus-visible),
.caret-link-theme-color:any-link:focus-visible:not(.background .caret-link:any-link:focus-visible),
main .carousel.style-1 a.button:any-link:focus-visible,
.home-more .columns a.button:any-link:focus-visible {
  color: var(--color-green-5);
  border: 2px solid var(--color-green-focus);
  outline: none; /* Use border instead of outline to avoid double focus indicator */
  padding-right: 17px;
  padding-left: 2px;
  margin-left: -4px;
}

.default-content-wrapper a:not(.button):any-link,
.table-wrapper a:any-link,
.columns a:not(.button),
.form a:not(.button),
.card a.description-link:not(.button),
.card a.email-link:not(.button),
main .tabs.style-3 > .accordion .tabs-content p a:any-link,
main .tabs.style-3 > .accordion .tabs-content ul li a:any-link,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content p a:any-link,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content ul li a:any-link,
.pricing-quote main .tabs-wrapper p a:any-link,
main .title.in-body-link a:any-link {
  color: var(--color-green-4);
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.default-content-wrapper a:not(.button):any-link:hover,
.table-wrapper a:any-link:hover,
.columns a:not(.button):hover,
.form a:not(.button):hover,
main .tabs.style-3 > .accordion .tabs-content p a:any-link:hover,
main .tabs.style-3 > .accordion .tabs-content ul li a:any-link:hover,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content p a:any-link:hover,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content ul li a:any-link:hover,
.pricing-quote main .tabs-wrapper p a:any-link:hover {
  color: var(--color-green-5);
  text-decoration: none;
}

.default-content-wrapper a:not(.button):any-link:focus-visible,
.table-wrapper a:any-link:focus-visible,
.columns a:not(.button):focus-visible,
.form a:not(.button):focus-visible,
main .tabs.style-3 > .accordion .tabs-content p a:any-link:focus-visible,
main .tabs.style-3 > .accordion .tabs-content ul li a:any-link:focus-visible,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content p a:any-link:focus-visible,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content ul li a:any-link:focus-visible,
.pricing-quote main .tabs-wrapper p a:any-link:focus-visible {
  color: var(--color-green-5);
  border: 2px solid var(--color-green-4);
  outline: none; /* Use border instead of outline to avoid double focus indicator */
  padding-right: 2px;
  padding-left: 2px;
  margin-left: -4px;
  text-decoration: none;
}

.default-content-wrapper a:not(.button):any-link:visited,
.table-wrapper a:any-link:visited,
.columns a:not(.button):visited,
.form a:not(.button):visited,
main .tabs.style-3 > .accordion .tabs-content p a:any-link:visited,
main .tabs.style-3 > .accordion .tabs-content ul li a:any-link:visited,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content p a:any-link:visited,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-content ul li a:any-link:visited,
.pricing-quote main .tabs-wrapper p a:any-link:visited {
  color: #683180;
}

main .quote.full a:not(.button),
main .quote.full strong,
main .source a:not(.button),
main .source strong,
.resources-guides main .default-content-wrapper a:any-link,
.resources-guides .columns-wrapper a:any-link:not(.button) {
  font-weight: var(--typ-font-weight-bold);
  color: var(--color-green-3);
}

main .block.button-color-base a.button:any-link,
main .block.button-color-base.columns a.button:any-link {
  background-color: var(--theme-base);
}

main .block.button-color-shade-10 a.button:any-link,
main .block.button-color-shade-10.columns a.button:any-link {
  background-color: var(--theme-shade10);
}

main .block.button-color-shade-15 a.button:any-link,
main .block.button-color-shade-15.columns a.button:any-link {
  background-color: var(--theme-shade15);
}

main .block.button-color-tint-5 a.button:any-link,
main .block.button-color-tint-5.columns a.button:any-link {
  background-color: var(--theme-tint5);
}

main .block.button-color-tint-10 a.button:any-link,
main .block.button-color-tint-10.columns a.button:any-link {
  background-color: var(--theme-tint10);
}

main .block.button-color-tint-15 a.button:any-link,
main .block.button-color-tint-15.columns a.button:any-link {
  background-color: var(--theme-tint15);
}

main .block.button-text-color-black a.button:any-link,
main .block.button-text-color-black.columns a.button:any-link {
  color: var(--color-black);
}

main .block.button-text-color-shade-5 a.button:any-link,
main .block.button-text-color-shade-5.columns a.button:any-link {
  color: var(--theme-shade5);
}

main .block.button-text-color-shade-10 a.button:any-link,
main .block.button-text-color-shade-10.columns a.button:any-link {
  color: var(--theme-shade10);
}

main .block.button-text-color-shade-15 a.button:any-link,
main .block.button-text-color-shade-15.columns a.button:any-link {
  color: var(--theme-shade15);
}

main .block.button-text-color-tint-5 a.button:any-link,
main .block.button-text-color-tint-5.columns a.button:any-link {
  color: var(--theme-tint5);
}

main .block.button-text-color-tint-10 a.button:any-link,
main .block.button-text-color-tint-10.columns a.button:any-link {
  color: var(--theme-tint10);
}

main .block.button-text-color-tint-15 a.button:any-link,
main .block.button-text-color-tint-15.columns a.button:any-link {
  color: var(--theme-tint15);
}

main .block.button-color-secondary-base a.button:any-link,
main .block.button-color-secondary-base.columns a.button:any-link {
  background-color: var(--secondary-theme-base);
  background-image:  unset;
}

main .block.button-color-secondary-shade-5 a.button:any-link,
main .block.button-color-secondary-shade-5.columns a.button:any-link {
  background-color: var(--secondary-theme-shade5);
  background-image:  unset;
}

main .block.button-color-secondary-shade-10 a.button:any-link,
main .block.button-color-secondary-shade-10.columns a.button:any-link {
  background-color: var(--secondary-theme-shade10);
  background-image:  unset;
}

main .block.button-color-secondary-shade-15 a.button:any-link,
main .block.button-color-secondary-shade-15.columns a.button:any-link {
  background-color: var(--secondary-theme-shade15);
  background-image:  unset;
}

main .block.button-color-secondary-tint-5 a.button:any-link,
main .block.button-color-secondary-tint-5.columns a.button:any-link {
  background-color: var(--secondary-theme-tint5);
  background-image:  unset;
}

main .block.button-color-secondary-tint-10 a.button:any-link,
main .block.button-color-secondary-tint-10.columns a.button:any-link {
  background-color: var(--secondary-theme-tint10);
  background-image:  unset;
}

main .block.button-color-secondary-tint-15 a.button:any-link,
main .block.button-color-secondary-tint-15.columns a.button:any-link {
  background-color: var(--secondary-theme-tint15);
  background-image:  unset;
}

main .block.button-style-outline:not(.button-style-link) a.button,
main .button-style-outline:not(.button-size-lg) .button,
main .block:not(.button-style-link):not(.multi-cta-cards):not(.primary-buttons) .button-container ~ .button-container .button {
  background: none;
  border: solid 2px var(--color-green-4);
  color: var(--color-green-4);
  padding-top: 8px;
  padding-bottom: 8px;
  transition: background-color .25s ease-in-out;
}

main .button-style-outline:not(.button-size-lg) .button,
main .block:not(.button-style-link):not(.multi-cta-cards) .button-container ~ .button-container .button {
  color: var(--color-green-4);
  border-color: var(--color-green-4);
  background-image: unset;
  background-color: transparent;
}

main .block.button-style-outline.button-size-lg a.button,
main .button-style-outline.button-size-lg .button {
  font-size: var(--button-font-size-lg);
  padding: var(--button-padding-size-lg);
  line-height: var(--button-line-height-size-lg);
}

main .block.button-rose:not(.button-style-link):not(.multi-cta-cards) .button-container ~ .button-container .button {
  color: var(--color-rose-3);
  border-color: var(--color-rose-3);
}

main .block.button-style-outline:not(.button-style-link) a.button:hover,
main .block:not(.button-style-link):not(.multi-cta-cards):not(.primary-buttons) .button-container ~ .button-container .button:hover,
main .block.columns:not(.button-style-link):not(.multi-cta-cards):not(.primary-buttons) .button-container ~ .button-container .button:hover {
  color: var(--color-white);
  background-color: var(--color-green-5);
  border-color: var(--color-green-5);
}

main .block.button-rose:not(.button-style-link):not(.multi-cta-cards) .button-container ~ .button-container .button:hover {
  background-color: var(--color-rose-4);
  border-color: var(--color-rose-4);
}

main .block.red-cta:not(.button-style-link):not(.multi-cta-cards) .button-container~.button-container .button:hover {
  background-color: var(--color-rose-4);
  border-color: var(--color-rose-4);
  color: #fff;
}

main .block.button-text-color-secondary-base a.button:any-link,
main .block.button-text-color-secondary-base.columns a.button:any-link {
  color: var(--secondary-theme-base);
}

main .block.button-text-color-secondary-shade-5 a.button:any-link,
main .block.button-text-color-secondary-shade-5.columns a.button:any-link {
  color: var(--secondary-theme-shade5);
}

main .block.button-text-color-secondary-shade-10 a.button:any-link,
main .block.button-text-color-secondary-shade-10.columns a.button:any-link {
  color: var(--secondary-theme-shade10);
}

main .block.button-text-color-secondary-shade-15 a.button:any-link,
main .block.button-text-color-secondary-shade-15.columns a.button:any-link {
  color: var(--secondary-theme-shade15);
}

main .block.button-text-color-secondary-tint-5 a.button:any-link,
main .block.button-text-color-secondary-tint-5.columns a.button:any-link {
  color: var(--secondary-theme-tint5);
}

main .block.button-text-color-secondary-tint-10 a.button:any-link,
main .block.button-text-color-secondary-tint-10.columns a.button:any-link {
  color: var(--secondary-theme-tint10);
}

main .block.button-text-color-secondary-tint-15 a.button:any-link,
main .block.button-text-color-secondary-tint-15.columns a.button:any-link {
  color: var(--secondary-theme-tint15);
}

a.button.primary:any-link {
  background-color: var(--color-gray-11);
}

a.button.primary:hover,
a.button.primary:focus {
  background-color: var(--color-gray-13);
}

a.button.light:any-link,
a.button.stroke:any-link,
.block.calculator button.light,
.event-table button.light {
  border: solid 2px var(--color-green-4);
  color: var(--color-green-4);
  background-image: unset;
  background-color: transparent;
}

a.button.light:hover,
a.button.light:focus,
.block.calculator button.light:hover,
.event-table button.light:hover,
.block.calculator button.light:focus {
  background-color: var(--color-green-5);
  border-color: var(--color-green-5);
  color: var(--color-white);
}

a.button.primary.light:any-link {
  color: var(--color-gray-11);
  border-color: var(--color-gray-11);
}

a.button.primary.light:hover,
a.button.primary.light:focus {
  background-color: var(--color-gray-13);
  border-color: var(--color-gray-13);
  color: var(--color-white);
}

a.button.secondary.light:any-link {
  color: var(--color-gray-10);
  border-color: var(--color-white);
  background-color: var(--color-white);
}

a.button.secondary.light:hover,
a.button.secondary.light:focus {
  background-color: var(--color-gray-11);
  border-color: var(--color-gray-11);
  color: var(--color-white);
}

a.button.form:any-link {
  padding: 17px 25px;
  width: 100%;
  display: block;
  font-size: 18px;
  line-height: 26px;
}

a.button > svg {
  float: left;
  display: inline;
  width: 20px;
  height: 20px;
  margin: 8px 8px 8px 0;
  fill: currentcolor;
  color: currentcolor;
}

a.button > svg > use {
  fill: currentcolor;
  color: currentcolor;
}

/* button link */
a.button.link:any-link {
  background-color: transparent !important;
  border-radius: revert;
  color: var(--theme-shade10);
  font-family: var(--body-font-family);
  font-size: 1rem;
  font-style: var(--typ-font-weight-bold);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: revert;
  overflow: visible;
  margin-right: -1rem;
}

@media (max-width: 390px) {
  #base .button-inline .button-container {
    margin-right: 0;
  }
}

@media (max-width: 600px) {
  #base .button-inline .button-container a:any-link {
    margin: 6px 0;
  }
}

/* headings and body */

p,
dl,
ol,
pre,
blockquote {
  margin-top: 1em;
  margin-bottom: 1em;
  color: var(--color-gray-13);
}

main .default-content-wrapper ol {
  padding-inline-start: 20px;
}

main .list-lower-alpha .default-content-wrapper ol {
  list-style-type: lower-alpha;
}

main ol {
  list-style-position: inside;
}

main .default-content-wrapper ol li {
  margin-bottom: 16px;
  color: var(--color-gray-12);
  margin-left: 30px;
}

/* lists indent - padding includes bullet = 22px(padding) - 11px(bullet) */
main ul {
  padding-left: 22px;
  list-style-position: outside;
}

/* space between bullet and text */
main ul li {
  padding-left: 11px;
}

main .default-content-wrapper ul,
main .tabs ul,
main .columns ul,
main .form ul,
main .app-download ul {
  list-style-type: "●";
}

main .default-content-wrapper ul li ul ,
main .tabs ul li ul ,
main .columns ul li ul ,
main .form ul li ul  {
  list-style-type: "○";
}

main .block.checkmark-list-color-1 ul,
main .form.checkmark-list ul,
.webinar-success .default-content-wrapper ul,
.webinar-on-demand .default-content-wrapper ul {
  padding-left: 0;
}

main .block.checkmark-list-color-1 ul li,
main .form.checkmark-list ul li,
.webinar-success .default-content-wrapper ul li,
.webinar-on-demand .default-content-wrapper ul li {
  list-style: none;
  background-image: url('/icons/bullets/level1-check.svg');
  background-repeat: no-repeat;

  /* No background-size: both icons this rule serves carry their own
     width="25" height="25". Any icon added here MUST too — several in
     icons/bullets/ have only a viewBox, and a CSS background with no
     intrinsic size scales to the whole list item. */
  padding-inline-start: 32px;
  line-height: 24px;
  margin-bottom: 14px;
}

/* Brand green (--color-1) disc with the tick knocked out, so whatever is
   behind the list shows through it — the marker has no tick colour of its own.
   On a dark section the tick reads dark, which is what Target winner #13021
   used (ZZ-6964). Do not put it on a light background; the tick disappears.
   Must stay below the rule above, which sets the default icon. */
main .block.checkmark-list-color-1 ul li {
  background-image: url('/icons/bullets/level1-check-color-1.svg');

  /* 16px between the marker and the text. The marker is 25px (the icon's own
     width), so this is 25 + 16. The two existing conventions are
     25px/32px (a 7px gap) and the .form family's 28px/48px (a 20px gap);
     neither matches, and both are shared with pages this ticket has no
     business moving, so the offset lives on this variant. */
  padding-inline-start: 41px;
}

main .block.no-link-spacing p:nth-child(1) {
  margin-bottom: 0;
}

main .block.no-link-spacing p:nth-child(2) {
  margin-top: 0;
}

/* typography font family, font size, font weight etc */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  scroll-margin: 80px;
  margin: 0;
}

main .default-content-wrapper h1,
main .default-content-wrapper h2,
main .default-content-wrapper h3,
main .default-content-wrapper h4,
main .default-content-wrapper h5,
main .default-content-wrapper h6 {
  margin-top: 48px;
  margin-bottom: 16px;
}

/* after rebranding is live remove this selector.
  Assuming .old-brand .app-download h3 is removed from app-download.css */
main h3,
main h4,
main h5,
main h6,
main .listing-cards-results h3 > a {
  color: var(--color-gray-13);
}

main h1.hidden {
  display: none;
}

main .font-style-normal h1 {
  font-style: normal;
}

main .title-margin-top-none :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

.comparison-matrix main h1 {
  margin: 0;
}

main .default-content-wrapper :is(h1, h2, h3, h4, h5, h6) {
  margin: 3rem 0 1rem;
}

/* FONT - Heading 1 */
main h1,
.typ-hero-header,
.typ-display1,
.resources-guides main h1,
main .page-header .page-header-title,
main .page-header .page-header-title h1,
.hr-unplugged main h1,
main .title.hero-header :is(h1, h2, h3, h4, h5, h6, div),
.title-size-hero :is(h1, h2, h3, h4, h5, h6),
.title-size-h1 :is(h1, h2, h3, h4, h5, h6),
.columns.title1-heading h1,
main .columns.title1-heading h1,
.article-header-title h1,
.hr-glossary h1 {
  font-family: var(--heading-font-family);
  font-size: var(--heading-font-size-heading-1);
  font-weight: var(--typ-font-weight-bold);
  line-height: var(--heading-line-height-heading-1);
  font-style: normal;
  color: var(--color-green-3);
}

/* FONT - Heading 2 */
main h2,
.typ-section-header,
.resources-guides main h2,
.call-to-action-modal main h3,
.hr-unplugged .section-1.success h2,
main .title.section-header :is(h2, h3, h4, h5, h6, div),
.typ-small-header,
.integrations-home main .home-featured-cat .default-content-wrapper h2,
main .title.small-header :is(h1, h2, h3, h4, h5, h6, div),
.typ-small-header2,
main .title.small-header2 :is(h1, h2, h3, h4, h5, h6, div),
.typ-stats,
main .title.stats :is(h1, h2, h3, h4, h5, h6, div),
.title-size-section :is(h1, h2, h3, h4, h5, h6),
.title-size-h2 :is(h1, h2, h3, h4, h5, h6),
.title-size-small-header :is(h1, h2, h3, h4, h5, h6),
main .article-feed-large .article-feed-card :is(h2, h3),
main .section > .related-posts-wrapper::before,
main .featured-articles-hero .featured-articles-card :is(h2, h3),
main .listing-cards-article-card.big-card h3,
main .columns.columns-1-cols h2,
main .columns.heading-2 h2,
.webinar .form.has-content .content-col h1,
.performance-reviews .columns.block h2,
.listing-cards .feature-card .feature-card-title,
main .block.heading-font-size-heading-2 :is(h1, h2, h3, h4, h5, h6),
main .listing-cards:not(.override) .wide-card h2.wide-card-title,
main .listing-cards.columns-2 .listing-cards-results .date-simple-card-title,
main .modal-fragment .modal main .form.has-content .content-col h2 {
  font-family: var(--heading-font-family);
  font-size: var(--heading-font-size-heading-2);
  font-weight: var(--typ-font-weight-bold);
  line-height: var(--heading-line-height-heading-2);
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Heading 3 */
main h3,
.typ-title1,
.resources-guides main h3,
.hr-software .columns h2,
.industry .columns h2,
.customers .columns h2,
.multi-element.hero h2,
.columns h3,
.hr-glossary #you-might-also-like,
main .title.title1 :is(h1, h2, h3, h4, h5, h6, div),
.title-size-h3 :is(h1, h2, h3, h4, h5, h6),
.title-size-title-1 :is(h1, h2, h3, h4, h5, h6),
main .tabs.style-3 > .accordion .tabs-title,
main .tabs.style-3 > .tabs-accordion-container > .accordion .tabs-title,
.hero.triple-hex>div:first-child h2,
main .listing-cards-results :is(h2, h3),
main .featured-articles-card :is(h2, h3),
main .article-feed-card :is(h2, h3),
main .form .form-col p > strong,
main .listing-cards-article-card h3,
main .listing.one-column.article-cards ul > div div h3,
.integrations-listing .tabs > h2,
header .nav-section.nav-section-subscribe h3,
main .tabs.style-5 > .accordion .tabs-title,
main .tabs.style-5 > .tabs-accordion-container > .accordion .tabs-title,
main .tabs.style-5-auto > .accordion .tabs-title,
main .tabs.style-5-auto > .tabs-accordion-container > .accordion .tabs-title,
.multi-cta-cards.header-h4-typ-heading-3 h4,
header .nav-section.nav-section-subscribe > .nav-section-wrapper > p:first-of-type,
.bhr-comparison main .columns h4,
.eyelash-modal-content > h3 {
  font-family: var(--heading-font-family);
  font-weight: var(--typ-font-weight-semi-bold);
  font-size: var(--heading-font-size-heading-3);
  line-height: var(--heading-line-height-heading-3);
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Heading 4 */
main h4,
.typ-title2,
.home-more .columns p strong,
.hr-glossary main h4,
main .title.title2 :is(h1, h2, h3, h4, h5, h6, div),
.title-size-h4 :is(h1, h2, h3, h4, h5, h6),
.integrations-listing .columns h4,
.blog-post main .author-description > p.author-name,
main .toc .toc-title,
main :is(h5, h6),
label#LblUnsubscribedReason,
main .block.listing-cards .listing-cards-results .listing-cards-article-card:not(.big-card) h3 > a,
main:not(.override) .listing-cards .title-card .title-card-title {
  font-family: var(--body-font-family);
  font-weight: var(--typ-font-weight-bold);
  font-size: var(--body-font-size-heading-4);
  line-height: var(--body-line-height-heading-4);
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Subheading 1 */
.typ-hero-subhead,
.typ-subhead1,
.hr-unplugged .section-1 h5,
main .title.hero-subhead :is(h1, h2, h3, h4, h5, h6, div),
main .title.hero-header p,
.paid-landing-page main .form h2,
.bhr-comparison main .form h2,
.title h1 + p,
.columns.hero-subhead p:not(.button-container, :last-child),
main .form.hero-form .content-col p,
main .block.text-font-size-subheading-1 :is(p) {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-subheading-1);
  font-weight: var(--typ-font-weight-medium);
  line-height: var(--body-line-height-subheading-1);
  margin: 1.25rem 0 0;
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Subheading 2 */
.typ-section-subhead,
main .title.section-subhead :is(h1, h2, h3, h4, h5, h6, div),
main .title.section-header p,
.typ-stats-subhead,
main .title.stats-subhead :is(h1, h2, h3, h4, h5, h6, div),
.title-size-hero-subhead :is(h1, h2, h3, h4, h5, h6),
main .call-to-action p,
main .block.text-font-size-subheading-2 :is(p) {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-subheading-2);
  font-weight: var(--typ-font-weight-medium);
  line-height: var(--body-line-height-subheading-2);
  margin: 1.25rem 0 0;
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Quote */
.typ-quote,
main .quote,
main .quote.full,
main .title.typ-quote :is(h1, h2, h3, h4, h5, h6, div),
.resources-guides main h5,
.columns.testimonial .non-img-col > p:first-of-type,
main .carousel.style-6 .carousel-image p {
  font-family: var(--heading-font-family);
  font-weight: var(--typ-font-weight-regular);
  font-size: var(--heading-font-size-quote);
  line-height: var(--heading-line-height-quote);
  color: var(--color-green-3);
  font-style: normal;
}

/* FONT - Caption 1 */
.typ-quote-reference,
main .quote .byline,
.columns.testimonial .non-img-col p:last-of-type > em,
.columns.testimonial .non-img-col p:nth-child(2),
main .quote.full .byline,
main .title.quote-reference :is(h1, h2, h3, h4, h5, h6, div),
.typ-medium-info,
main .title.medium-info :is(h1, h2, h3, h4, h5, h6, div),
.resources-guides main h4,
.title-size-h5 :is(h1, h2, h3, h4, h5, h6),
.title-size-medium-info :is(h1, h2, h3, h4, h5, h6),
main .listing-cards-results .listing-cards-article-card.big-card h4,
main .featured-articles-hero .featured-articles-card-header,
main .listing-facets h3,
.cards.headshots .card h5,
main .carousel.style-6 .carousel-image h4,
main .block.text-accent-font-size-caption-1 :is(p) :is(u),
main .listing-cards:not(.override) .wide-card h4.wide-card-byline,
main .tabs.style-5 > .accordion .tabs-preheading,
main .listing-cards .date-simple-card-eyebrow,
main .listing-cards-table th {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-caption-1);
  font-weight: var(--typ-font-weight-bold);
  line-height: var(--body-line-height-caption-1);
  letter-spacing: var(--typ-letter-spacing-lg);
  text-transform: uppercase;
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Caption 2 */
.multi-element strong,
.multi-element .extra,
.typ-small-info,
.columns.image-info .img-col em,
.columns .img-col em,
main .title.small-info :is(h1, h2, h3, h4, h5, h6, div),
.title-size-h6 :is(h1, h2, h3, h4, h5, h6),
.title-size-small-info :is(h1, h2, h3, h4, h5, h6),
.industry main .quote.full.industry-footer div:nth-child(2) .content,
main .listing-cards:not(.job-listings) .listing-cards-results h4,
main .listing-cards-results h5,
main .article-header-breadcrumb ul li a:any-link,
main .article-header-breadcrumb ul li,
main .featured-articles-card-header,
main .related-posts-card-header,
main .article-feed-card-header,
.multi-cta-cards .card-text,
.cards.cta .card h5,
.bhr-comparison main .columns h5,
.hr-glossary main .default-content-wrapper .breadcrumb li a:any-link,
.hrvs-session main .columns .breadcrumb li a:any-link,
.featured-articles-card-date,
.article-feed-card-date,
main .listing-cards .date-simple-card-date,
main .listing-cards .date-simple-card-session-text {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-caption-2);
  font-weight: var(--typ-font-weight-bold);
  line-height: var(--body-line-height-caption-2);
  letter-spacing: var(--typ-letter-spacing-md);
  text-transform: uppercase;
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Table */
.typ-table-body,
table th,
table td,
table td ul li,
table td ol li {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-table);
  font-weight: var(--typ-font-weight-regular);
  line-height: var(--body-line-height-table);
  color: var(--color-gray-13);
  font-style: normal;
}

/* FONT - Small Buttons & Forms */
.small-buttons-and-forms,
main .title.small-buttons-and-forms :is(h1, h2, h3, h4, h5, h6, div),
main .listing-cards-article-card-header,
main .listing-article-card-header,
main .listing-cards .listing-cards-results .listing-cards-article-card .listing-cards-article-card-category,
main .form .form-col p.update-profile-info {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-small-buttons-and-forms);
  font-weight: var(--typ-font-weight-regular);
  line-height: var(--body-line-height-small-buttons-and-forms);
}

main .block.text-accent-font-size-caption-1 :is(p) :is(u) {
  text-decoration: none;
}

/* FONT - Check List */
main .typ-check-list,
.columns.checkmark-list ul li {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-check-list);
  font-weight: var(--typ-font-weight-regular);
  line-height: var(--body-line-height-check-list);
  color: var(--color-gray-13);
}

/* FONT - Check List, small (ZZ-6964)
   The 18px step for a bullet list. Without it the only list sizes are the
   16px default and the 20px above, and the 18px token belongs to
   `subheading-2`, whose rule is `p`-only and carries a subheading's medium
   weight and top margin — wrong on both counts for list copy.
   No `color` here on purpose: `main .typ-check-list` sets one on the block,
   which is a trap on a dark section, so this leaves the text-color-*
   modifiers in sole charge. */
main .typ-check-list-sm {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-subheading-2);
  font-weight: var(--typ-font-weight-regular);
  line-height: var(--body-line-height-subheading-2);
}

main h1,
.center-page-cta-wrapper.themed-background h2,
main .columns.green-3-title h2,
.multi-element-wrapper.themed-background h2,
.section.bg-gradient-simple-bottom .title h2,
.section.bg-gradient-simple-top-green .title h2,
.section.bg-bottom-cap-7.green-cap .title h2,
.section.bg-top-cap-4:not(.gray-cap):not(.gray-0-background) .title:not(.heading-color-green-2) h2,
.section.bg-top-cap-5.green-cap .title h2,
.section.bg-gradient-tint-15 .title.section-header div,
.section.bg-gradient-simple-bottom .title.section-header div,
.themed-background h2,
.bg-simple .title.block h2,
.bg-solid-green .title.block h2,
main .signup h2 {
  color: var(--color-green-3);
}

main .block.heading-accent-font-weight-regular :is(h1, h2, h3, h4, h5, h6) :is(u) {
  font-weight: var(--typ-font-weight-regular);
  text-decoration: none;
}

main .block.text-accent-font-weight-medium :is(p, li) :is(u) {
  font-weight: var(--typ-font-weight-medium);
  text-decoration: none;
}

main:not(.override) .block.text-color-white :is(p, li),
main .block.text-accent-color-white :is(p, li) :is(u),
main .block.heading-color-white :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-white :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-white);
  text-decoration: none;
}

main:not(.override) .block.all-white-text :is(h1, h2, h3, h4, h5, h6, p, li, span, em, strong, u),
main:not(.override) .block.all-white-text a:any-link:not(.button) {
  color: var(--color-white) !important;
}

main:not(.override) .block.all-white-text .caret-link::after,
main:not(.override) .block.all-white-text a.button.link:any-link::after,
main:not(.override) .block.breadcrumb.all-white-text ul li::after {
  border-color: var(--color-white) !important;
}

main .block.text-color-dark-violet :is(p, li),
main .block.text-accent-color-dark-violet :is(p, li) :is(u),
main .block.heading-color-dark-violet :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-dark-violet :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-dark-violet);
  text-decoration: none;
}

main .block.text-color-1 :is(p, li),
main .block.text-accent-color-1 :is(p, li) :is(u),
main .block.heading-color-1 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-1 :is(h1, h2, h3, h4, h5, h6) :is(u),
main .section.dark-green-tech .columns-wrapper .block.columns.hero-section.heading-accent-color-1 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-1);
  text-decoration: none;
}

main .block.text-color-green-1 :is(p, li),
main .block.text-accent-color-green-1 :is(p, li) :is(u),
main .block.heading-color-green-1 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-green-1 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-green-1);
  text-decoration: none;
}

main .block.h1-color-green-2 :is(h1) {
  color: var(--color-green-2);
  text-decoration: none;
}

main .block.text-color-green-2 :is(p, li),
main .block.text-accent-color-green-2 :is(p, li) :is(u),
main .block.heading-color-green-2 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-green-2 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-green-2);
  text-decoration: none;
}

/* --color-green-focus sits between green-2 and green-3 in the palette but had
   no colour modifier, so an accent in it could only be done in block CSS.
   Added for ZZ-6964; note the token is the rebrand's rename of the old
   "green 3", so a pre-rebrand spec naming green-3 may mean this one. */
main .block.text-color-green-focus :is(p, li),
main .block.text-accent-color-green-focus :is(p, li) :is(u),
main .block.heading-color-green-focus :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-green-focus :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-green-focus);
  text-decoration: none;
}

main .block.text-color-green-3 :is(p, li),
main .block.text-accent-color-green-3 :is(p, li) :is(u),
main .block.heading-color-green-3 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-green-3 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-green-3);
  text-decoration: none;
}

main .block.text-color-green-4 :is(p, li),
/* A one-line Title cell renders as bare text in the cell div, not a <p>, so the p/li
   terminal above never reached it — a small-info eyebrow stayed gray. */
main .title.text-color-green-4 > div > div,
main .block.text-accent-color-green-4 :is(p, li) :is(u),
main .block.heading-color-green-4 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-green-4 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-green-4);
  text-decoration: none;
}

main .block.text-bottom-border-color-green-4 :is(p, li),
main .block.text-bottom-border-accent-color-green-4 :is(p, li) :is(u),
main .block.heading-bottom-border-color-green-4 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-bottom-border-accent-color-green-4 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  border-bottom: 1px solid var(--color-green-4);
  padding-bottom: 0.5em;
}

main .block.text-color-green-5 :is(p, li),
main .block.text-accent-color-green-5 :is(p, li) :is(u),
main .block.heading-color-green-5 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-green-5 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-green-5);
  text-decoration: none;
}

main .block.text-color-1-tint-5 :is(p, li),
main .block.text-accent-color-1-tint-5 :is(p, li) :is(u),
main .block.heading-color-1-tint-5 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-1-tint-5 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-1-tint-5);
  text-decoration: none;
}

main .block.text-color-rose-3 :is(p, li),
main .block.text-accent-color-rose-3 :is(p, li) :is(u),
main .block.heading-color-rose-3 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-rose-3 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-rose-3);
  text-decoration: none;
}

main .block.heading-color-teal-1 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-teal-1);
}

main .block.text-color-azure-3 :is(p, li),
main .block.text-accent-color-azure-3 :is(p, li) :is(u),
main .block.heading-color-azure-3 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-azure-3 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-azure-3);
  text-decoration: none;
}

main .block.text-color-gray-9 :is(p, li),
main .block.text-accent-color-gray-9 :is(p, li) :is(u),
main .block.heading-color-gray-9 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-gray-9 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-gray-9);
  text-decoration: none;
}

main .block.text-color-gray-10 :is(p, li),
main .block.text-accent-color-gray-10 :is(p, li, th) :is(u),
main .block.heading-color-gray-10 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-gray-10 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-gray-10);
  text-decoration: none;
}

main .block.text-color-gray-11 :is(p, li),
main .block.text-accent-color-gray-11 :is(p, li, th) :is(u),
main .block.heading-color-gray-11 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-gray-11 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-gray-11);
  text-decoration: none;
}

main .block.text-color-gray-12 :is(p, li),
main .block.text-accent-color-gray-12 :is(p, li) :is(u),
main .block.heading-color-gray-12 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-gray-12 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-gray-12);
  text-decoration: none;
}

main .block.text-color-gray-13 :is(p, li),
main .block.text-accent-color-gray-13 :is(h1, p, li) :is(u),
main:not(.override) .block.heading-color-gray-13 :is(h1, h2, h3, h4, h5, h6),
main .block.heading-accent-color-gray-13 :is(h1, h2, h3, h4, h5, h6) :is(u) {
  color: var(--color-gray-13);
  text-decoration: none;
}

ol {
  list-style-type: decimal;
}

ol li::marker {
  font-weight: var(--typ-font-weight-bold);
  font-variant-numeric: normal;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

ol ol ol li::marker {
  font-weight: var(--typ-font-weight-medium);
}

.title-color-white :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-white);
}

.title-color-black :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-black);
}

.title-color-base :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-base);
}

.title-color-tint-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-tint5);
}

.title-color-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-tint15);
}

.title-color-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-tint10);
}

.title-color-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-shade5);
}

.title-color-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-shade10);
}

.title-color-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-shade15);
}

.title-color-secondary-base :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary-theme-base);
}

.title-color-secondary-tint-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary-theme-tint5);
}

.title-color-secondary-tint-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary-theme-tint15);
}

.title-color-secondary-tint-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary-theme-tint10);
}

.title-color-secondary-shade-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary-theme-shade5);
}

.title-color-secondary-shade-10 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary-theme-shade10);
}

.title-color-secondary-shade-15 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary-theme-shade15);
}

.title-color-gray-9 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-9);
}

.title-color-gray-11 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-11);
}

.title-color-gray-12 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-gray-12);
}

main .block.title-color-green-4 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-green-4);
}

main .block.title-color-green-5 :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-green-5);
}

.title-margin-top-none :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

/* resources-guides */
.resources-guides main h1,
.resources-guides main h2,
.resources-guides main h4 {
  color: var(--theme-shade5);
}

.resources-guides main h1,
.resources-guides main h2,
.resources-guides main h5 {
  text-align: center;
}

.resources-guides main h3 {
  color: var(--color-gray-9);
  margin-top: 100px;
  font-style: normal;
}

.resources-guides main h4 {
  font-style: normal;
  margin-top: 0;
  margin-bottom: 0;
}

.resources-guides main .extra-content h4 {
  margin-top: 80px;
}

.resources-guides main .columns.small-icons h4 {
  color: var(--secondary-theme-shade5);
}

.resources-guides main p {
  margin-top: 10px;
}

.resources-guides main .extra-content p {
  font-style: italic;
  margin-bottom: 80px;
}

.resources-guides main .columns.numbered-text p {
  margin-top: 0;
  margin-bottom: 0;
}

.resources-guides main .columns.numbered-text p:nth-child(even) {
  margin-bottom: 20px;
}

.resources-guides main h5 {
  font-style: normal;
  color: var(--secondary-theme-shade5);
}

.resources-guides main .page-header h5 {
  color: var(--heading-color);
}

.resources-guides main .columns:not(.cards) a.button:any-link {
  background-color: var(--secondary-theme-shade5);
}

.resources-guides .image.center,
.resources-guides .center-h3 .default-content-wrapper h3 {
  text-align: center;
}

.resources-guides .left-h5 h5 {
  text-align: left;
}

.resources-guides .image-wrapper .image {
  margin-top: 60px;
}

.resources-guides .image-wrapper .image.center {
  margin-top: 100px;
}

/* links */

main a:any-link {
  color: var(--color-green-4);
  text-decoration: none;
}

main a.cta-link {
  color: var(--color-1);
  font-weight: 700;
  text-decoration: none;
}

main a.cta-link::after {
  content: ' >';
}

main a.cta-link:hover {
  color: var(--color-1);
}

main a.cta-link:active,
main a.cta-link:focus {
  color: var(--color-1);
}

main a > picture {
  display: flex;
  justify-content: center;
}

main img,
main video {
  max-width: 100%;
}

/* section wrapper */

main .section:first-of-type {
  padding-top: 0;
  margin-top: 0;
}

main .section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

main .section > div.width-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

main .section > div:empty {
  padding: 0;
}

main .columns.hero-subhead .wistia p {
  margin: 0;
}

@media (min-width: 700px) {
  .integrations main .section > div {
    max-width: 1200px;
  }

  .resources-guides main .section > div {
    max-width: calc(var(--width-sm) + var(--section-padding) * 2);
  }

  main .section > div.title-wrapper.extra-small-width {
    max-width: calc(var(--width-xxs) + var(--section-padding) * 2);
  }

  main .section > div.columns-wrapper.small-width,
  main .section > div.title-wrapper.small-width {
    max-width: calc(var(--width-sm) + var(--section-padding) * 2);
  }

  .resources-guides main .section > div.quote-wrapper.normal-width,
  main .section > div.columns-wrapper.normal-width,
  main .section > div.image-wrapper.normal-width,
  main .section > div.title-wrapper.normal-width,
  main .section > div.wistia-wrapper.normal-width {
    max-width: calc(var(--width-sm) + var(--section-padding) * 2);
  }

  main .section > div.cards-wrapper.med-width,
  main .section > div.columns-wrapper.med-width,
  .resources-guides main .section > div.toc-wrapper,
  .resources-guides main .section > div.quote-wrapper,
  .resources-guides main .section.negative-margin-section.med-width > div.default-content-wrapper,
  main .section > div.image-wrapper.med-width,
  .resources-guides main .section > div.source-wrapper,
  main .section > div.title-wrapper.med-width {
    max-width: calc(var(--width-md) + var(--section-padding) * 2);
  }

  .resources-guides main .section > div.cards-wrapper.full-width,
  main .section > div.columns-wrapper.full-width,
  main .section > div.image-wrapper.full-width,
  .resources-guides main .section > div.quote-wrapper.full-width,
  .resources-guides main .section > div.source-wrapper.full-width {
    max-width: calc(var(--width-lg) + var(--section-padding) * 2);
  }

  .resources-guides main .section > div.image-wrapper.extra-wide,
  main .section > div.multi-cta-cards-wrapper.extra-wide {
    max-width: calc(var(--width-xl) + var(--section-padding) * 2);
  }

  .bhr-home main .section > div.quote-wrapper.extra-wide,
  main .section > div.columns-wrapper.extra-wide,
  main .section > div.tabs-wrapper.extra-wide {
    max-width: calc(var(--width-xxl) + var(--section-padding) * 2);
  }

  main .section > div > :not(div) {
    margin-left: auto;
    margin-right: auto;
  }
}

/* end containers */

/* updated wrapper/container */

/*
For reference
--width-xs: 560px;
--width-sm: 760px;
--width-md: 960px;
--width-lg: 1160px;
--width-xl: 1360px;
--width-xxl: 1560px;
--width-xxxl: 1920px;
*/

main .section > div {
  max-width: calc(var(--width-md) + var(--section-padding-mobile) * 2);
  padding-left: var(--section-padding-mobile);
  padding-right: var(--section-padding-mobile);
  margin-left: auto;
  margin-right: auto;
}

main .section > div.content-width-xxs,
main .section.content-width-xxs > div:not([class*='content-width-']) {
  max-width: calc(var(--width-xxs) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-xs,
main .section.content-width-xs > div:not([class*='content-width-']) {
  max-width: calc(var(--width-xs) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-sm,
main .section.content-width-sm > div:not([class*='content-width-']) {
  max-width: calc(var(--width-sm) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-md,
main .section.content-width-md > div:not([class*='content-width-']),
.press-release main .section > div,
.awards main .section > div,
.in-the-news main .section > div {
  max-width: calc(var(--width-md) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-lg,
main .section.content-width-lg > div:not([class*='content-width-']) {
  max-width: calc(var(--width-lg) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-xl,
main .section.content-width-xl > div:not([class*='content-width-']) {
  max-width: calc(var(--width-xl) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-xxl,
main .section.content-width-xxl > div:not([class*='content-width-']) {
  max-width: calc(var(--width-xxl) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-xxxl,
main .section.content-width-xxxl > div:not([class*='content-width-']) {
  max-width: calc(var(--width-xxxl) + var(--section-padding-mobile) * 2);
}

main .section > div.content-width-full,
main .section.content-width-full > div:not([class*='content-width-']) {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 600px) {
  main .section > div {
    max-width: calc(var(--width-lg) + var(--section-padding) * 2);
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
  }

  main .section > div.content-width-xxs,
  main .section.content-width-xxs > div:not([class*='content-width-']) {
    max-width: calc(var(--width-xxs) + var(--section-padding) * 2);
  }
  
  main .section > div.content-width-xs,
  main .section.content-width-xs > div:not([class*='content-width-']) {
    max-width: calc(var(--width-xs) + var(--section-padding) * 2);
  }

  main .section > div.content-width-sm,
  main .section.content-width-sm > div:not([class*='content-width-']) {
    max-width: calc(var(--width-sm) + var(--section-padding) * 2);
  }

  main .section > div.content-width-md,
  main .section.content-width-md > div:not([class*='content-width-']),
  .press-release main .section > div,
  .awards main .section > div,
  .in-the-news main .section > div {
    max-width: calc(var(--width-md) + var(--section-padding) * 2);
  }

  main .section > div.content-width-lg,
  main .section.content-width-lg > div:not([class*='content-width-']),
  .press-release main .press-release-archive.section > div,
  .awards main .awards-archive.section > div
  .in-the-news main .in-the-news-archive.section > div {
    max-width: calc(var(--width-lg) + var(--section-padding) * 2);
  }

  main .section > div.content-width-xl,
  main .section.content-width-xl > div:not([class*='content-width-']) {
    max-width: calc(var(--width-xl) + var(--section-padding) * 2);
  }

  main .section > div.content-width-xxl,
  main .section.content-width-xxl > div:not([class*='content-width-']) {
    max-width: calc(var(--width-xxl) + var(--section-padding) * 2);
  }

  main .section > div.content-width-xxxl,
  main .section.content-width-xxxl > div:not([class*='content-width-']) {
    max-width: calc(var(--width-xxxl) + var(--section-padding) * 2);
  }
}

@media (min-width: 1440px) {
  main .section > div {
    max-width: calc(var(--width-xl) + var(--section-padding) * 2);
  }

  .integrations main .section > div {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1800px) {
  main .section > div {
    max-width: calc(var(--width-xxl) + var(--section-padding) * 2);
  }
}

/* end ex-base container */

/* Two-column splits (ZZ-6964)
   `grid-{a}-{b}` authors the proportions of a two-column block on a twelve
   column basis: `grid-6-6` is equal halves, `grid-7-5` is 58/42, `grid-8-4` is
   67/33. The vocabulary is the one blocks/form/form.css already uses for the
   same job; this generalises it to any block, per "generalise when a second
   block needs it" in meta/standards/css-conventions.md. A mirrored split
   (`grid-5-7`) is two lines in the same shape when something needs one.

   The proportion is all this owns. The block still decides that it has two
   columns, when they stack, and what the gap between them is — so this sets
   `flex` on the children rather than `display` on the block, and a block that
   is not a flex row at this width is simply unaffected. That is deliberate:
   `form` puts `grid-7-5` on the block but does its own splitting on the inner
   div, and these rules must be inert there rather than fight it.

   1200px is the site's two-column step (`form` uses it, so does `demo-video`).
   A block that stacks at some other width cannot use this family. */
@media (min-width: 1200px) {
  main .block.grid-6-6 > *,
  main .block.grid-7-5 > *,
  main .block.grid-8-4 > * {
    /* `flex-basis: 0` alone still floors a flex item at its content's
       min-content width, which a long word or a wide embed pushes past,
       breaking the ratio. */
    min-width: 0;
  }

  main .block.grid-6-6 > * {
    flex: 6 1 0;
  }

  main .block.grid-7-5 > *:first-child {
    flex: 7 1 0;
  }

  main .block.grid-7-5 > *:last-child {
    flex: 5 1 0;
  }

  main .block.grid-8-4 > *:first-child {
    flex: 8 1 0;
  }

  main .block.grid-8-4 > *:last-child {
    flex: 4 1 0;
  }
}


main .section p.button-container {
  margin-top: 16px;
  margin-bottom: 0;
}

main .section .default-content-wrapper .button-container {
  text-align: center;
}

.integrations .home-featured-cat p.button-container {
  margin-top: 0;
  margin-bottom: 0;
}

main .section.home-more {
  margin-bottom: 60px;
}

main .section.app-cards-container {
  margin-bottom: 120px;
}

/* listing template styles */
.resources-guides main .toc-wrapper,
.resources-guides main .default-content-wrapper,
.resources-guides main .quote-wrapper,
.resources-guides main .cards-wrapper,
.resources-guides main .columns-wrapper,
main .center-page-cta-wrapper,
.resources-guides main .image-wrapper:not(.background-image) {
  position: relative;
  z-index: 1;
}

.back-to-top-wrapper,
.resources-guides main .page-header-wrapper {
  position: relative;
  z-index: 10;
}

.resources-guides .header-wrapper {
  position: relative;
  z-index: 100;
}

.app-list main .default-content-wrapper {
  padding: 64px;
  text-align: center;
}

.integrations-listing .details-container {
  margin-top: 30px;
}

.integrations-listing .details-container .details-logo {
  margin-bottom: 55px;
}

.integrations-listing .details-container .button-container {
  margin: 1em 0 -2px;
}

.integrations-listing .details-container ul li a {
  background: none;
}

.integrations-listing .details-container .button-container a.button {
  background: transparent;
  color: var(--color-green-4);
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--typ-font-weight-regular);
  font-style: normal;
  font-family: var(--body-font-family);
  text-align: left;
  display: contents;
}

.integrations-listing .details-container .button-container a.button:hover {
  background: transparent;
}

.integrations-listing .links-container {
  margin-top: 55px;
}

.integrations-listing .links-container .default-content-wrapper {
  max-width: 250px;
  padding-left: 0;
  padding-right: 0;
}

#integrations-request-info {
  background-color: var(--color-5);
  white-space: normal;
}

.integrations-listing .links-container .button-container .button {
  background-color: var(--color-green-4);
}

.integrations-listing .details-container .default-content-wrapper h4 {
  font-style: normal;
}

.integrations-listing .tabs-content > p:not(:last-of-type) {
  margin-bottom: 30px;
}

.integrations-home .search-container {
  min-height: 565px;
}

@media (min-width: 1025px) {
  .integrations-home .search-container {
    min-height: 37vw;
  }
}

.integrations-listing {
  background-image: linear-gradient(
    var(--color-gray-1) 0%,
    var(--color-white) 450px
  );
}

.comparison-matrix main .section {
  margin-top: 0;
  margin-bottom: 0;
}

.comparison-matrix main .section .default-content-wrapper {
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
}

.integrations-home main .home-featured-cat .default-content-wrapper {
  text-align: center;
}

.comparison-matrix main .section:first-of-type .default-content-wrapper {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

.integrations-home main .home-featured-cat .default-content-wrapper h2 {
  margin: 0;
}

.comparison-matrix main .section .default-content-wrapper h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-style: normal;
}

.integrations-form {
  background-image: url('./leaf-top-3.svg'),
    linear-gradient(
      var(--color-white),
      var(--color-white) calc(250px + (100vw * 0.2)),
      var(--color-white) calc(100vw * 0.2)
    );
  background-position: 0 250px, top;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 1000px) {
  .integrations-listing main {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 368px calc(100% - 368px);
    grid-template-rows: repeat(3, auto) 1fr;
    /* stylelint-disable-next-line */
    grid-template-areas:
      'header header'
      'carousel carousel'
      'links tabs'
      'details tabs';
  }

  .integrations-listing .listing-header-container {
    grid-area: header;
  }

  .integrations-listing .carousel-container {
    grid-area: carousel;
  }

  .integrations-listing .links-container {
    grid-area: links;
    margin: auto;
  }

  .integrations-listing .tabs-container {
    grid-area: tabs;
  }

  .integrations-listing .details-container {
    grid-area: details;
  }
}

/* category colors */

/* stylelint-disable-next-line no-duplicate-selectors */
main,
.category-product-announcements main,
div.category-color-product-announcements,
.category-voices-in-leadership main,
.category-color-voices-in-leadership,
.category-hr-insights main,
.category-color-hr-insights,
.category-onboarding main,
div.category-color-onboarding,
.category-hiring main,
div.category-color-hiring,
.category-performance-culture main,
div.category-color-performance-culture,
.category-benefits-comp main,
div.category-color-benefits-comp,
.category-people-data-analytics main,
div.category-color-people-data-analytics {
  --category-color: var(--color-green-4);
  --category-darker-color: var(--color-green-4);
  --category-darker-bg-color: var(--color-green-2);
  --category-bg-color: var(--color-1-tint-15);
  --category-callout-bg: url('./bg/green-cta.svg');
  --category-quote-bg: radial-gradient(
    100% 416.67% at 0% 0%,
    var(--color-green-4) 0%,
    var(--color-8-shade-10) 100%
  );
  --category-box-shadow-color: rgba(29 147 54 / 50%);
}

/* small button style copied here to prevent linting error: no-descending-specificity */
.integrations-home main .default-content-wrapper p a.button:any-link {
  font-size: 15px;
  line-height: 22px;
  padding: 10px 30px;
}

.integrations-listing .details-container ul {
  margin-top: 60px;
}

.integrations-listing .details-container ul li {
  list-style-image: none;
}

.integrations-listing .details-container ul li::marker {
  content: '';
}

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 20px;
  border: 2px solid var(--color-gray-3);
  text-align: left;
  vertical-align: middle;
}

/* This craziness is to override '.old-brand main h4' AND '.rebranding2023 main h4' */
table th,
table th h4,
table tbody th,
table tbody th h4 {
  color: var(--color-white);
  font-weight: 800;
}

table td {
  color: var(--color-gray-12);
}

table thead {
  background-color: var(--theme-shade10);
}

table thead th {
  border-color: var(--theme-shade10);
}

table tbody th {
  background-color: var(--color-gray-8);
}

table tbody tr:nth-child(odd) {
  background-color: var(--color-white);
}

table tbody tr:nth-child(2n) {
  background-color: var(--color-gray-1);
}

/* Background styles */
.resources-guides .section:last-of-type {
  margin-top: 0;
}

.gradient-section-1 .image-wrapper:nth-last-of-type(2),
.gradient-section-2 .image-wrapper:nth-last-of-type(2),
.gradient-section-3 .image-wrapper:nth-last-of-type(2) {
  margin: 0;
  padding: 0;
  max-width: unset;
}

.gradient-section-4 .image-wrapper .image {
  margin: 0;
}

main .section.gradient-section-4 > div:last-of-type {
  padding-bottom: 50px;
}

.purple-1 {
  background: linear-gradient(207.16deg, var(--color-white) 16.51%, var(--color-5-tint-15) 82.6%);
}

.purple-2 {
  background: linear-gradient(207.16deg, var(--color-white) 44.04%, #fef2ff 82.6%);
}

.purple-3 {
  background: linear-gradient(207.16deg, var(--color-white) 29.59%, var(--color-5-tint-15) 82.6%);
  position: relative;
}

.gradient-section-4 {
  position: relative;
}

.bg-hex-1 img {
  min-width: 116px;
  max-width: 478px;
  width: 34%;
  top: 13%;
  left: 0;
  position: absolute;
}

.bg-hex-2 img {
  min-width: 113px;
  max-width: 469px;
  right: 7%;
  top: 170%;
  width: 49%;
  position: absolute;
}

.bg-hex-3 img {
  min-width: 100px;
  max-width: 433px;
  left: 6%;
  top: 25%;
  width: 31%;
  position: absolute;
}

.bg-hex-4 img {
  max-width: 621px;
  left: 0;
  bottom: 59%;
  width: 44%;
  position: absolute;
}

.bg-hex-5 img {
  max-width: 280px;
  right: 3%;
  bottom: 53%;
  width: 20%;
  position: absolute;
}

.bg-hex-6 img {
  max-width: 792px;
  right: 0;
  bottom: 0;
  width: 55%;
  position: absolute;
}

.bg-section-bottom-1 img {
  margin-top: 20px;
  width: 100%;
  margin-bottom: -8px;
}

.bg-section-bottom-2 img {
  transform: scaleX(-1);
  width: 100%;
  margin-bottom: -8px;
}

.bg-section-bottom-3 img,
.bg-section-bottom-3-offset img {
  width: 100%;
  margin-bottom: -8px;
}

.bg-section-bottom-3-offset img {
  position: absolute;
  bottom: 0;
}

@media screen and (min-width: 600px) {
  .bg-hex-1 img {
    top: 11%;
  }

  .bg-hex-2 img {
    top: 216%;
  }

  .bg-hex-3 img {
    top: 27%;
  }

  .bg-hex-4 img {
    bottom: 57%;
  }

  .bg-hex-5 img {
    bottom: 47%;
  }
}

@media screen and (min-width: 1025px) {
  .bg-hex-1 img {
    top: 20%;
  }

  .bg-hex-2 img {
    top: 216%;
  }

  .bg-hex-3 img {
    top: 17%;
  }

  .bg-hex-4 img {
    bottom: 35%;
  }

  .bg-hex-5 img {
    bottom: 35%;
  }
}

/* modal */
body:has(.modal-wrapper[open]) {
  overflow: hidden;
}

.modal-wrapper {
  background-color: rgb(0 0 0 / 50%);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  transition: all 0.1s ease-out;
  z-index: -1;
  opacity: 0;
  overflow-y: auto;
  padding: 2em 0;
  border-width: 0;
}

.modal-wrapper[open] {
  opacity: 1;
  z-index: 1005;
}

.modal {
  width: 90%;
  max-width: 490px;
  background-color: var(--body-background-color);
  border-radius: 20px;
  border-width: 0;
  position: relative;
  margin: auto;
  padding: 50px 30px;
}

@media screen and (min-width: 900px) {
  .modal {
    padding: 50px 40px;
    width: 80%;
  }
}

.modal-close {
  appearance: none;
  border-width: 0;
  position: absolute;
  right: -22px;
  top: -22px;
  display: flex;
  flex-direction: column;
  z-index: 1;
  width: 54px;
  height: 54px;
  line-height: 54px;
  box-shadow: var(--box-shadow-1);
  background-color: #ccc;
  margin: 10px;
  padding: 9px;
  border-radius: 27px;
  box-sizing: border-box;
  cursor: pointer;
  text-indent: 150%;
  overflow: hidden;
}

.modal-close::before,
.modal-close::after {
  content: '';
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 21px;
  height: 3px;
  background: var(--color-white);
  transform: rotate(45deg);
  border-radius: 5px;
  top: 8px;
  left: 1px;
  margin: 18px 16px;
}

.modal-close::after {
  transform: rotate(-45deg);
}

.modal form {
  position: relative;
}

.modal .modal-form-title {
  color: var(--color-green-3);
  text-align: center;
}

.modal .modal-content p {
  color: var(--color-gray-13);
  font-size: 18px;
  line-height: 27px;
}

.modal .modal-form-subtitle {
  text-align: center;
}

/* dark-green modal configuration */
.modal-fragment.dark-green .modal .modal-form-title {
  color: var(--color-green-4);
}

/* stylelint-disable selector-class-pattern */
.modal-fragment.dark-green .modal .form .form-submit-wrapper .button,
.modal-fragment.dark-green .modal .form .mktoForm .mktoButton {
  background-color: var(--color-green-4);
}

.modal-fragment.dark-green .modal .form .form-submit-wrapper .button:hover,
.modal-fragment.dark-green .modal .form .mktoForm .mktoButton:hover {
  background-color: var(--color-green-5);
}
/* stylelint-enable selector-class-pattern */

.modal-fragment.dark-green .modal .blog-subscribe-form-success h2 {
  color: var(--color-green-4);
}

/* Center blog subscribe success message in modals */
.modal .blog-subscribe-form-success {
  text-align: center;
}

.modal .blog-subscribe-form-success h2,
.modal .blog-subscribe-form-success p {
  text-align: center;
}

.z-index-1 {
  position: relative;
  z-index: 1;
}

/* salesforce chat button */
/* stylelint-disable selector-class-pattern */
.embedded-messaging .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton {
  bottom: 125px;
}

.embedded-messaging .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton.sfChatButton {
  width: 220px;
  border-radius: 10px;
}

.embedded-messaging .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton.sfChatButton div.embeddedMessagingIconContainer {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.embedded-messaging div.embeddedMessagingIconContainer .sfChatButtonLabel {
  color: var(--color-white);
  padding-left: 10px;
}

/* above the fold CSS goes here to squash CLS */

main .section[data-section-status='loading'],
main .section[data-section-status='initialized'] {
  display: none;
}

/*
 * ZZ-6821 - hold author-driven animation targets (ZZ-6500) hidden until the
 * animation runtime has settled, so an above-the-fold element never paints
 * visible and then snaps back to its animation start state.
 *
 * `animations-pending` is added by scripts.js in the eager phase and removed
 * once the runtime settles or a fail-open timeout fires. Only script ever adds
 * it, so this rule can never be what leaves content stuck hidden. (It is not a
 * no-JavaScript safeguard as such -- `body` is `display: none` until script
 * adds `appear`, so nothing renders without JavaScript either way.)
 *
 * Two selectors rather than `[class*="animation-"]`: that substring also
 * matches the `bg-animated-*-animation` background classes. Matching a class
 * token that begins `animation-` keeps the hold to the animations sheet.
 *
 * `opacity` rather than `visibility` or `display` so the hold cannot shift
 * layout and introduce CLS.
 */
@media (prefers-reduced-motion: no-preference) {
  html.animations-pending main [class^="animation-"],
  html.animations-pending main [class*=" animation-"] {
    opacity: 0;
  }
}

/* blog post layout */
.blog-post main,
.hr-glossary main {
  overflow: unset;
}

.blog-post main .section:first-child > div,
.hr-glossary main .section:first-child > div,
.webinar-success .section:first-child > div {
  padding: 0;
  max-width: 100%;
  width: 100%;
}

.blog-post main .section.article-header-container,
.press-release main .section.article-header-container,
.awards main .section.article-header-container,
.in-the-news main .section.article-header-container,
.hr-glossary main .section.form-container {
  margin-top: 48px;
}

body.press-release,
body.awards,
body.in-the-news {
  background-image: linear-gradient(
    var(--color-gray-1) 0%,
    var(--color-white) 400px);
}

.press-release main .section:last-child,
.awards main .section:last-child,
.in-the-news main .section:last-child {
  margin-top: 0;
  margin-bottom: 80px;
}

.blog-post main .section:first-child:not(.form-container):not(.search-container),
.hr-glossary main .section:first-child:not(.form-container),
.webinar-success main .section:first-child:not(.speakers-container) {
  max-width: calc(var(--width-sm) + var(--section-padding-mobile) * 2);
  margin-left: auto;
  margin-right: auto;
}

.blog-post main .section:first-child,
.hr-glossary main .section:first-child,
.webinar-success .section:first-child {
  padding-left: var(--section-padding-mobile);
  padding-right: var(--section-padding-mobile);
}

.blog-post main .form-wrapper {
  margin-top: 48px;
}

/*
 * The 48px above separates the form from the end of the article, which is where it
 * used to sit. Since ZZ-6862 the form follows the table of contents instead, so that
 * spacing is doing a job it was not drawn for — the winning variant inherited the same
 * accident and shipped a 48px gap here too.
 *
 * Zeroing it lets the ToC card's own 26px bottom margin set the gap, which is what
 * hr-glossary and guides pages already do, so all three templates match.
 *
 * Deliberately scoped to the adjacent pair: a post with no authored table of contents
 * keeps its form at the end of the article, where the 48px is still correct.
 */
.blog-post main .toc-wrapper + .form-wrapper {
  margin-top: 0;
}

/*
 * Pages with no table of contents put the form after the article header instead, so the
 * ToC card's 26px bottom margin is not there to set the gap. Match that 26px explicitly
 * on both templates so every page reads the same.
 *
 * The header already contributes about 21px, from a margin collapsing out of its own last
 * child. Adjacent margins collapse rather than add, so this resolves to 26 rather than
 * stacking to 47.
 *
 * Placed before the 900px block deliberately: the desktop rule that zeroes this has equal
 * specificity, so it needs to come later to win.
 */
.blog-post main .article-header-wrapper + .form-wrapper,
.hr-glossary main .article-header-wrapper + .form-wrapper {
  margin-top: 26px;
}

@media screen and (min-width: 600px) {
  .blog-post main .section:first-child,
  .hr-glossary main .section:first-child,
  .webinar-success .section:first-child {
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
  }
}

.blog-post main .section > div.author-wrapper {
  margin-bottom: 50px;
}

@media screen and (min-width: 900px) {
  .blog-post main .section.form-container,
  .hr-glossary main .section.form-container {
    display: grid;
    grid-template-columns: 62.5% minmax(0, 37.5%);
    grid-gap: 0 40px;

    /*
     * Sticky right rail (ZZ-6862). --rail-form-height and --rail-toc-height are
     * measured in scripts/blog.js; the fallbacks below keep the layout sane
     * before Marketo has rendered the subscribe form.
     */
    --rail-top: 100px;
    --rail-gap: 32px;
  }

  .blog-post main .form-container > div,
  .hr-glossary main .form-container > div {
    grid-column: 1;
  }

  /*
   * .toc-wrapper must span every row and stay stretched (no align-self): it is
   * the sticky containing block for the .toc card, and at its natural height the
   * card has nowhere to travel — measured 418px against a 3418px full column.
   * This span replaces the inline grid-row that blocks/toc/toc.js used to write.
   *
   * `1 / -1` cannot express it: the grid has no explicit rows, so -1 resolves
   * back to line 1 and the wrapper collapses. The surplus implicit rows are free
   * only because the row gap is 0 — keep `grid-gap: 0 40px` that way.
   *
   * .form-wrapper takes the same span so the pair clamps against the same bottom
   * edge (see its margin-bottom below).
   */
  .blog-post main .toc-container .toc-wrapper,
  .hr-glossary main .toc-container .toc-wrapper {
    grid-column: 2;
    grid-row: 1 / span 200;
    margin-top: calc(var(--rail-form-height, 0px) + var(--rail-gap));
  }

  .blog-post main .form-container .form-wrapper,
  .hr-glossary main .form-container .form-wrapper {
    grid-column: 2;
    grid-row: 1 / span 200;
    align-self: start;
    position: sticky;
    top: var(--rail-top);
    margin-top: 0;

    /*
     * Matches the ToC's release point so the pair unpins together. Without it
     * the shorter form keeps travelling after the ToC has stopped and slides
     * over it at the end of the article.
     */
    margin-bottom: calc(var(--rail-toc-height, 0px) + var(--rail-gap));
  }
}

/*
 * Short windows (ZZ-6862). The form is about 372px tall, so once the window drops
 * below roughly 720px the pinned form leaves the table of contents under 180px —
 * a heading and nothing else. Below that the form stops pinning and scrolls away,
 * and the table of contents pins alone with the whole column, which is what
 * production did before this ticket. Approved by Jacquie Garzand and Ulrika Beard.
 *
 * 719px is derived, not measured: 100px pin offset + the form + 64px of gaps +
 * ~180px for a heading and three items. A media query cannot know the form's real
 * height, so this may need a nudge if the form's copy changes.
 *
 * Written as a combined query rather than nested inside the one above, so it does
 * not depend on CSS nesting support.
 */
@media screen and (min-width: 900px) and (max-height: 719px) {
  .blog-post main .form-container .form-wrapper,
  .hr-glossary main .form-container .form-wrapper {
    position: static;

    /* Nothing is pinned above the ToC now, so there is no release point to match. */
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1200px) {
  .blog-post main .section:first-child,
  .blog-post main .section > div.related-posts-wrapper,
  .hr-glossary main .section,
  .webinar-success .section {
    max-width: calc(var(--width-lg) + var(--section-padding) * 2);
    margin-left: auto;
    margin-right: auto;
  }
}

.grecaptcha-badge {
   bottom: 120px !important;
  z-index: 300000;
}

.country-tag {
  display: inline-flex;
  border: 1px solid var(--color-gray-2);
  background-color: var(--color-white);
  border-radius: 0.25em;
  align-items: center;
  gap: 0.25em;
  font-size: 0.75rem;
  font-weight: var(--typ-font-weight-medium);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1em;
  color: var(--color-gray-13);
  padding: 0.25em 0.375em;
}

.country-tag span.icon.icon {
  width: 1.5em;
  height: 1.5em;
  display: block;
}

.country-tag .icon svg {
  width: 100%;
  height: 100%;
}

iframe {
  border: none;
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

/* ==========================================================================
   ACCESSIBILITY - Focus Styles (WCAG 2.4.7, 2.4.11, 2.4.13)
   ========================================================================== */

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-green-5);
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: var(--typ-font-weight-bold);
  font-size: 1rem;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.2s ease-in-out;
}

.skip-to-main:focus {
  top: 0;
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
}

/* Global focus-visible styles for interactive elements (excluding form inputs which have their own rules) */
:focus-visible:not(input):not(textarea):not(select) {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
}

/*
 * Ensure focus is never hidden by removing outline: none without replacement.
 * Override any outline: none that doesn't have a visible alternative.
 */

/* Buttons - enhanced focus state */
a.button:focus-visible,
button:focus-visible,
.block.calculator button:focus-visible,
.event-table button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(170 232 104 / 30%);
}

/* Form text inputs - no outline, only border color change (outline not needed since border is visible) */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none !important;
  border-color: var(--color-green-5);
}

/* Checkboxes and radio buttons */
input[type="checkbox"]:focus-visible + label::before,
input[type="radio"]:focus-visible + label::before {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
}

/* Interactive elements that use tabindex */
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
}

/* Cards and clickable containers */
.card:focus-visible,
.listing-cards-article-card:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(170 232 104 / 30%);
}

/* Accordion and tab buttons */
.accordion-button:focus-visible,
.tabs-title:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
}

/* Carousel controls */
.carousel-button:focus-visible,
.carousel-nav-button:focus-visible,
[aria-label*="carousel"]:focus-visible,
[aria-label*="slide"]:focus-visible {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(170 232 104 / 30%);
}

/* Modal close buttons and dialog elements */
.modal-close:focus-visible,
[aria-label="Close"]:focus-visible,
[aria-label="close"]:focus-visible,
dialog:focus-visible {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
}

/* Icons that are interactive */
.icon:focus-visible,
svg:focus-visible {
  outline: 3px solid var(--color-green-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * Ensure minimum focus indicator area (WCAG 2.4.13).
 * Focus indicator should be at least 2px thick and contrast ratio of 3:1.
 */

/* High contrast mode support */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid canvastext;
    outline-offset: 2px;
  }
  
  .skip-to-main:focus {
    outline: 3px solid canvastext;
  }
}