.ArticleNav {
  display: none;
  position: sticky;
  top: calc(var(--SiteNav--height) + var(--spacing--S));
  left: 0;
  z-index: 0;
  margin-left: calc(0px - ((100vw - 770px) / 2 + 215px));
  margin-bottom: var(--spacing--XL);
  float: left;
}
.ArticleNav ul {
  padding: 0;
  margin: 0;
}
.ArticleNav ul a {
  border: none;
}
.ArticleNav ul a:active, .ArticleNav ul a:focus {
  text-decoration: none;
  border: none;
}
@media (min-width: 1600px) {
  .ArticleNav {
    display: block;
  }
}

.ArticleNav--list {
  width: calc(14vw + 30px);
  max-width: 310px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ArticleNav--list li {
  position: relative;
  margin-bottom: var(--spacing--base-1-5);
}
.ArticleNav--list li:last-child a {
  margin-bottom: 0;
}
.ArticleNav--list a {
  display: block;
  color: var(--color--text-light);
  border-bottom: none;
  padding-left: calc(var(--spacing--base-1-5) + 0.3em);
  transition-timing-function: ease-in-out;
  cursor: pointer;
}
.ArticleNav--list a::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.7em;
  left: 0;
  width: var(--spacing--base-1-5);
  margin-right: 4px;
  height: 1px;
  background: var(--color--text-light);
}
.ArticleNav--list a:hover {
  color: var(--color--action-hovered);
}
.ArticleNav--list a:hover::before {
  background: var(--color--action-hovered);
  transition: width 0.2s;
}
.ArticleNav--list a.is-active {
  color: var(--color--text-dark);
}
.ArticleNav--list a.is-active::before {
  background: var(--color--text-dark);
  transition: width 0.2s;
}
.ArticleNav--list a:active {
  color: var(--color--text-dark);
}
.ArticleNav--list a:focus-visible {
  background: var(--color--cobalt-100);
}

.Avatar img,
.Avatar img:not([class]) {
  border-radius: 50%;
  margin: 0;
  max-width: none;
}
.Avatar.size--S img,
.Avatar.size--S img:not([class]) {
  width: clamp(2rem, 0.6530612245vw + 1.8469387755rem, 2.5rem);
  height: clamp(2rem, 0.6530612245vw + 1.8469387755rem, 2.5rem);
}
.Avatar.size--M img,
.Avatar.size--M img:not([class]) {
  width: clamp(2rem, 1.306122449vw + 1.693877551rem, 3rem);
  height: clamp(2rem, 1.306122449vw + 1.693877551rem, 3rem);
}
.Avatar.size--L img,
.Avatar.size--L img:not([class]) {
  width: clamp(3rem, 1.306122449vw + 2.693877551rem, 4rem);
  height: clamp(3rem, 1.306122449vw + 2.693877551rem, 4rem);
}
.Avatar.size--XL img,
.Avatar.size--XL img:not([class]) {
  width: clamp(4rem, 1.306122449vw + 3.693877551rem, 5rem);
  height: clamp(4rem, 1.306122449vw + 3.693877551rem, 5rem);
}
@media (min-width: 1600px) {
  .Avatar.size--S img,
  .Avatar.size--S img:not([class]) {
    width: clamp(2.5rem, 1.0416666667vw + 1.4583333333rem, 3.125rem);
    height: clamp(2.5rem, 1.0416666667vw + 1.4583333333rem, 3.125rem);
  }
  .Avatar.size--M img,
  .Avatar.size--M img:not([class]) {
    width: clamp(3rem, 1.25vw + 1.75rem, 3.75rem);
    height: clamp(3rem, 1.25vw + 1.75rem, 3.75rem);
  }
  .Avatar.size--L img,
  .Avatar.size--L img:not([class]) {
    width: clamp(4rem, 1.6666666667vw + 2.3333333333rem, 5rem);
    height: clamp(4rem, 1.6666666667vw + 2.3333333333rem, 5rem);
  }
  .Avatar.size--XL img,
  .Avatar.size--XL img:not([class]) {
    width: clamp(5rem, 2.0833333333vw + 2.9166666667rem, 6.25rem);
    height: clamp(5rem, 2.0833333333vw + 2.9166666667rem, 6.25rem);
  }
}

.Accordion {
  border-top: 1px solid var(--color--charcoal-200);
}
.Accordion:last-of-type {
  border-bottom: 1px solid var(--color--charcoal-200);
}
.include-background .Accordion {
  border-top: 1px solid var(--color--clay-300);
}
.include-background .Accordion:last-of-type {
  border-bottom: 1px solid var(--color--clay-300);
}
.use-dark-mode .Accordion {
  border-top-color: rgba(var(--color--basics-white-rgb), 0.08);
}
.use-dark-mode .Accordion:last-of-type {
  border-bottom-color: rgba(var(--color--basics-white-rgb), 0.08);
}

.Accordion--title-button {
  position: relative;
  text-align: left;
  line-height: 25px;
  margin: 0;
  width: 100%;
  padding: var(--spacing--base-2) 0;
}
.Accordion--title-button h4, .Accordion--title-button h5, .Accordion--title-button h6 {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .Accordion--title-button h4, .Accordion--title-button h5, .Accordion--title-button h6 {
    font-size: var(--font-size--S);
  }
}
.Accordion--title-button .Icon {
  background: var(--color--charcoal-500) !important;
  position: absolute;
  right: 2px;
  top: 50%;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.2s ease-out;
  translate: 0 -50%;
}
.Accordion--title-button:hover .Icon {
  background: var(--color--text-light) !important;
}
.is-open .Accordion--title-button .Icon {
  transform: rotate(0);
  background: var(--color--charcoal-700) !important;
}
.size--L .Accordion--title-button .Icon {
  right: 4px;
}
.size--S .Accordion--title-button {
  font-weight: 400;
}
.has-check .Accordion--title-button {
  background: 0 50% url("./images/Accordion--icon--check-green.svg") no-repeat;
  padding-left: calc(var(--spacing--base-1-25) + 26px);
}
.no-check .Accordion--title-button {
  background-image: none;
  background: none;
  padding-left: 0;
}
.use-dark-mode .Accordion--title-button .Icon {
  background: rgba(var(--color--basics-white-rgb), 0.48) !important;
}
.use-dark-mode .Accordion--title-button:hover .Icon {
  background: rgba(var(--color--basics-white-rgb), 0.6) !important;
}
.use-dark-mode .is-open .Accordion--title-button .Icon {
  background: rgba(var(--color--basics-white-rgb), 0.72) !important;
}

.Accordion--content {
  display: grid;
  margin-bottom: 0;
  overflow: hidden;
  transition: margin-bottom 0.3s ease-in-out, grid-template-rows 0.3s ease-in-out;
  grid-template-rows: 0fr;
}
.Accordion--content .content {
  min-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.Accordion--content p,
.Accordion--content span,
.Accordion--content div {
  font-size: var(--font-size--L);
  margin-bottom: calc(var(--font-size--L) * 0.625);
}
.Accordion--content p:last-child, .Accordion--content p:last-child, .Accordion--content p:last-child,
.Accordion--content span:last-child,
.Accordion--content span:last-child,
.Accordion--content span:last-child,
.Accordion--content div:last-child,
.Accordion--content div:last-child,
.Accordion--content div:last-child {
  margin-bottom: 0;
}
.is-open .Accordion--content {
  margin-bottom: var(--spacing--base-2);
  grid-template-rows: 1fr;
}
.is-open .Accordion--content .content {
  opacity: 1;
  transition: opacity 0.15s ease-in;
}
.has-check .Accordion--content {
  padding-left: calc(var(--spacing--base-1-5) + 24px);
  /* Check Icon width = 24px */
}

.AuthorByline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--base-1-25);
  padding-top: var(--spacing--S);
  margin: 0 0 var(--spacing--S);
  border-top: 1px solid var(--color--charcoal-200);
}
.AuthorByline a {
  color: inherit;
}
.AuthorByline a:hover {
  color: var(--color--action-hovered);
}
@media (min-width: 768px) {
  .AuthorByline {
    flex-direction: row;
    align-items: flex-start;
  }
}
.AuthorByline p a {
  border-bottom: 1px solid var(--color--text-dark);
}
.AuthorByline p a:hover {
  border-bottom-color: var(--color--action-hovered);
}
.AuthorByline p:last-of-type {
  margin-bottom: 0;
}

.AvatarWithName {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.AvatarWithName .Avatar {
  margin: 0 var(--spacing--base-0-75) 0 0;
}
.AvatarWithName.size--S p, .AvatarWithName.size--M p {
  font-size: var(--font-size--XS);
}
.AvatarWithName.size--S .Avatar {
  margin-right: var(--spacing--base-0-5);
}
.AvatarWithName.size--L .Avatar {
  margin-right: var(--spacing--base-1);
}
.AvatarWithName.size--L p {
  font-size: var(--font-size--S);
}
.AvatarWithName h6 {
  margin: 0;
}
.AvatarWithName .has-bio h6 {
  margin: 0 0 2px;
}
@media (min-width: 2560px) {
  .AvatarWithName .has-bio h6 {
    margin-bottom: 3px;
  }
}
.AvatarWithName .has-bio p {
  margin: 0;
  line-height: var(--line-height--snug);
}

.AvatarPlusInfo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.AvatarPlusInfo .Avatar {
  margin: 0 8px 0 0;
}
.AvatarPlusInfo h6 {
  margin: 0;
}
.AvatarPlusInfo .divider {
  margin: 0 8px;
  color: var(--color--clay-400);
}

.Card {
  display: block;
  /* 
  VARIANTS
  */
  /* CARD_VARIANTS.FEATURED */
  /* CARD_VARIANTS.FEATURED_HORIZONTAL */
  /* CARD_VARIANTS.HORIZONTAL */
}
.Card .overline {
  display: block;
}
.Card.no-description h4,
.Card.no-description h5 {
  margin: 0;
}
.Card p {
  margin: 0;
}
.Card:hover figure > img,
.Card:hover .gatsby-image-wrapper {
  transform: scale(1.02) translateY(-49%) translateZ(0);
}
.Card:focus-visible h5 {
  color: var(--color--cobalt-600);
}
.Card .Card--figure {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--border-radius--M);
  overflow: hidden;
  background-color: var(--color--clay-100);
  margin-bottom: var(--spacing--XS);
}
.Card .Card--figure > img,
.Card .Card--figure > img:not([class]),
.Card .Card--figure .gatsby-image-wrapper {
  display: block !important;
  position: absolute !important;
  /* !important overrides Img component's inline style */
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateZ(0);
  transition: transform 0.2s ease-out;
  width: 100%;
  height: 100%;
  margin: 0;
}
.Card .Card--figure > img img,
.Card .Card--figure > img img:not([class]),
.Card .Card--figure > img:not([class]) img,
.Card .Card--figure > img:not([class]) img:not([class]),
.Card .Card--figure .gatsby-image-wrapper img,
.Card .Card--figure .gatsby-image-wrapper img:not([class]) {
  object-fit: cover !important;
  /* !important overrides Img component's inline style */
  margin: 0;
  transform: none;
}
.Card .Card--figure .pill {
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
  height: var(--line-height--relaxed);
  line-height: var(--line-height--relaxed);
  padding: 0 4px 1px;
  background: rgba(var(--color--charcoal-1100-rgb), 0.72);
  color: white;
  border-radius: 2px;
}
.Card.variant--FEATURED .Card--figure {
  margin-bottom: var(--spacing--S);
}
.Card.variant--FEATURED_HORIZONTAL .Card--figure {
  margin-bottom: var(--spacing--S);
}
.Card.variant--FEATURED_HORIZONTAL h4 {
  text-wrap: balance;
}
.Card.variant--FEATURED_HORIZONTAL .Badge {
  margin-bottom: var(--spacing--XS);
}
.Card.variant--FEATURED_HORIZONTAL .TextLink {
  margin-top: var(--spacing--XS);
}
@media (min-width: 1024px) {
  .Card.variant--FEATURED_HORIZONTAL {
    display: flex;
    align-items: center;
    gap: var(--spacing--M);
  }
  .Card.variant--FEATURED_HORIZONTAL .Card--figure {
    flex: 0 0 calc(66.6666% - var(--spacing--M) / 2);
    margin: 0;
  }
  .Card.variant--FEATURED_HORIZONTAL article {
    flex: 0 0 calc(33.3333% - var(--spacing--M) / 2);
  }
  .Card.variant--FEATURED_HORIZONTAL .Badge {
    margin-bottom: var(--spacing--S);
  }
  .Card.variant--FEATURED_HORIZONTAL .TextLink {
    margin-top: var(--spacing--S);
  }
}
.Card.variant--HORIZONTAL {
  padding-bottom: var(--spacing--base-1-5);
  border-bottom: 1px solid var(--color--charcoal-200);
}
.Card.variant--HORIZONTAL:last-child {
  border-bottom: none;
}
.Card.variant--HORIZONTAL .Card--figure {
  width: 100%;
}
.Card.variant--HORIZONTAL .Card--description {
  max-width: 72ch;
}
@media (min-width: 480px) {
  .Card.variant--HORIZONTAL {
    display: flex;
    align-items: center;
  }
  .Card.variant--HORIZONTAL .Card--figure {
    flex: 0 0 217px;
    margin-right: var(--spacing--base-2);
    margin-bottom: 0;
  }
}

.AvatarsRow {
  display: flex;
  justify-content: center;
  margin-right: 12px;
}
.AvatarsRow .Avatar {
  margin-left: -8px;
}
.AvatarsRow .Avatar:first-child {
  margin-left: 0;
}
.AvatarsRow .Avatar .gatsby-image-wrapper {
  margin-right: 0;
}

.Badge {
  border-radius: calc(var(--border-radius--XL) * 2);
  display: inline-block;
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--letter-spacing--normal);
  line-height: var(--line-height--relaxed);
}
.Badge.size--XS {
  border-radius: var(--border-radius--XS);
  font-size: calc(var(--font-size--L) / 2);
  font-weight: var(--font-weight--semibold);
  letter-spacing: var(--letter-spacing--widest);
  padding: calc(var(--spacing--base-1) * 0.03125) calc(var(--spacing--base-1) * 0.1875) 0;
  text-transform: var(--text-transform--uppercase);
}
.Badge.size--S {
  font-size: var(--font-size--XS);
  line-height: var(--line-height--snug);
  padding: 0 calc(var(--spacing--base-1) * 0.375) calc(var(--spacing--base-1) * 0.0625);
}
.Badge.size--M {
  font-size: var(--font-size--S);
  padding: 0 calc(var(--spacing--base-1) * 0.625) calc(var(--spacing--base-1) * 0.0625);
}

.FloatingSidebarNav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  padding: 0;
}
.FloatingSidebarNav ul li:last-child a {
  margin-bottom: 0;
}
.FloatingSidebarNav ul a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color--charcoal-600);
  border-bottom: none;
  margin-bottom: 20px;
  transition-timing-function: ease-in-out;
}
.FloatingSidebarNav ul a:hover {
  color: var(--color--charcoal-700);
}
.FloatingSidebarNav ul a.active {
  color: var(--color--charcoal-1100);
}
@media (max-height: 710px) {
  .FloatingSidebarNav ul a {
    margin-bottom: 15px;
  }
}
.FloatingSidebarNav a {
  border: none;
}
.FloatingSidebarNav a:active, .FloatingSidebarNav a:focus {
  text-decoration: none;
  border: none;
}

.Hero {
  padding-top: var(--SiteNav--height);
  overflow: hidden;
}

.NumericalInputWithLimit {
  position: relative;
}
.NumericalInputWithLimit .Icon {
  position: absolute;
  right: var(--input--padding-x-L);
  top: 50%;
  translate: 0 -50%;
}
.NumericalInputWithLimit .react-tooltip.react-tooltip {
  min-width: 0;
}

.Cards {
  margin-bottom: var(--spacing--L);
}
.Cards .grid {
  gap: var(--spacing--M);
}
@media (min-width: 1024px) {
  .Cards.variant--WITH_FEATURED .Card:first-of-type {
    grid-row: 1/3;
  }
}
.Cards.variant--COMPACT .flex {
  gap: var(--spacing--base-1-5);
}
@media (min-width: 1024px) {
  .Cards.variant--LARGE .flex, .Cards.variant--LARGE_WITH_DESCRIPTION .flex {
    gap: var(--spacing--L);
  }
  .Cards.variant--LARGE .Card, .Cards.variant--LARGE_WITH_DESCRIPTION .Card {
    flex: 0 0 calc(50% - var(--spacing--L) / 2);
  }
}
.Cards > .more-link {
  display: block;
}
@media (min-width: 480px) {
  .Cards > .more-link {
    display: none;
  }
}

.Cards--title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--color--charcoal-200);
  padding-bottom: var(--spacing--XS);
  margin: 0 0 var(--spacing--S);
}
.Cards--title h3 {
  margin: 0;
}
.Cards--title .more-link {
  display: none;
}
@media (min-width: 480px) {
  .Cards--title .more-link {
    display: block;
  }
}

.SearchInput {
  position: relative;
  /* begin .clear-button */
}
.SearchInput > .Icon {
  background: var(--color--charcoal-400);
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 14px;
  transition: all 0.5s;
  z-index: 1;
}
.SearchInput:focus-within > .Icon path {
  stroke: var(--color--cobalt-500);
}
.SearchInput button.clear-button {
  align-items: center;
  display: flex;
  height: 50px;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}
.SearchInput button.clear-button .Icon path {
  stroke: var(--color--charcoal-400);
  transition: stroke 0.2s;
}
.SearchInput button.clear-button:hover .Icon path {
  stroke: var(--color--charcoal-600);
}
.SearchInput input {
  height: 50px;
  line-height: 48px;
  padding: 0 16px 0 46px;
}
.SearchInput.size-XL > .Icon {
  top: 23px;
  left: 19px;
}
.SearchInput.size-XL button.clear-button {
  width: 60px;
  height: 72px;
}
.SearchInput.size-XL button.clear-button .Icon {
  margin-top: 2px;
}
.SearchInput.size-XL input {
  height: 72px;
  line-height: 70px;
  padding-left: 62px;
  padding-right: 34px;
}

@keyframes PrefooterStatusRingAnimation {
  0% {
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color--red-accent-rgb), 0.1);
  }
  50% {
    width: 138%;
    height: 138%;
    background-color: rgba(var(--color--red-accent-rgb), 0.05);
  }
  100% {
    width: 176%;
    height: 176%;
    background-color: rgba(var(--color--red-accent-rgb), 0.01);
  }
}
.Prefooter {
  position: relative;
  background-color: var(--color--cobalt-200);
  padding: var(--spacing--XL) 0;
  overflow: hidden;
  text-align: center;
}
.Prefooter .container {
  position: relative;
  z-index: 1;
}
.Prefooter h2 {
  margin: 0 0 var(--spacing--S);
  text-wrap: balance;
}
.Prefooter p {
  margin: 0 auto var(--spacing--S);
  text-wrap: balance;
}
.Prefooter .TextLink {
  font-weight: var(--font-weight--bold);
}
.Prefooter .bg-left,
.Prefooter .bg-right {
  aspect-ratio: 3/4;
  height: 100%;
  max-height: 720px;
  pointer-events: none;
  position: absolute !important;
  top: 0;
  width: auto;
  z-index: 0;
}
.Prefooter .bg-left {
  left: 0;
  translate: -60% 0;
}
.Prefooter .bg-right {
  right: 0;
  translate: 60% 0;
}
@media (min-width: 480px) {
  .Prefooter .bg-left {
    translate: -55% 0;
  }
  .Prefooter .bg-right {
    translate: 55% 0;
  }
}
@media (min-width: 768px) {
  .Prefooter .bg-left {
    translate: -40% 0;
  }
  .Prefooter .bg-right {
    translate: 40% 0;
  }
}
@media (min-width: 1600px) {
  .Prefooter .bg-left {
    translate: 0 0;
  }
  .Prefooter .bg-right {
    translate: 0 0;
  }
}
.Prefooter--Buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing--XS);
  max-width: max(505px, var(--container-width) / 12 * 5 - var(--spacing--M) * 7 / 12);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .Prefooter--Buttons {
    flex-direction: row;
    align-items: center;
  }
}
.Prefooter--Buttons .Button {
  width: 100%;
}
.Prefooter--Buttons .Button:first-child:only-child, .Prefooter--Buttons .Button:last-child:only-child {
  flex: 0 0 auto;
}
.Prefooter--Buttons .Button:first-child:not(:only-child), .Prefooter--Buttons .Button:last-child:not(:only-child) {
  flex: 1;
}
@media (min-width: 480px) {
  .Prefooter--Buttons .Button {
    width: auto;
  }
}
.Prefooter .HubspotForm {
  margin: 0 auto;
}
.Prefooter.use-dark-mode .content h2,
.Prefooter.use-dark-mode .content p {
  color: var(--color--basics-white);
}
.Prefooter.use-product-branding {
  /* Graphic / Video height */
  --product-graphic-height: calc(90px + var(--spacing--XL));
  --Prefooter--noise-overlay: url("https://hs-marketing-contentful.imgix.net/https%3A%2F%2Fimages.ctfassets.net%2Fp15sglj92v6o%2F2wVXgpNXWP0vqaEXRo82Ro%2F4e8ead91f6ffec70abb7659d3bc02885%2FNoise_Overlay_240x240.png?ixlib=js-3.8.0&w=240&q=75&format=webp&s=63500dd7854457245242e7a1ace027d2");
  /* Gradient */
  --color1rgb: var(--color--purple-300-rgb);
  /* Purple 300 */
  --color2rgb: var(--color--red-300-rgb);
  /* Red 300 */
  --color3rgb: var(--color--magenta-300-rgb);
  /* Red 300 */
  --color4rgb: var(--color--orange-300-rgb);
  /* Orange 300 */
  --color5rgb: var(--color--yellow-300-rgb);
  /* Orange 300 */
  --size: 75vmin;
  --space: ;
  background-color: var(--color--orange-200);
  /* Yellow 200 */
  background-image: radial-gradient(calc(var(--size) * 0.666) circle at top left var(--space), rgba(var(--color1rgb), 0.7), rgba(var(--color1rgb), 0)), radial-gradient(calc(var(--size) * 2) circle at top right var(--space), rgba(var(--color2rgb), 1), rgba(var(--color2rgb), 0)), radial-gradient(calc(var(--size)) circle at bottom right var(--space), rgba(var(--color3rgb), 1), rgba(var(--color3rgb), 0)), radial-gradient(calc(var(--size) * 0.75) circle at bottom left var(--space), rgba(var(--color4rgb), 1), rgba(var(--color4rgb), 0)), radial-gradient(calc(var(--size) * 0.5) circle at bottom center var(--space), rgba(var(--color5rgb), 1), rgba(var(--color5rgb), 0)), var(--Prefooter--noise-overlay);
  padding-bottom: var(--product-graphic-height);
}
@supports (background: linear-gradient(in oklab, white, black)) {
  .Prefooter.use-product-branding {
    --space: in oklab;
  }
}
.Prefooter.use-product-branding .bg-left,
.Prefooter.use-product-branding .bg-right {
  max-width: 770px;
}
.Prefooter.use-product-branding h2 {
  font-family: var(--font-family--display);
  font-feature-settings: var(--font-family--display--font-feature-settings);
  font-size: var(--font-size--10XL);
  line-height: var(--line-height--super-tight);
  margin-bottom: var(--spacing--XS);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing--normal);
}
.Prefooter.use-product-branding p {
  font-family: var(--font-family--serif);
  font-feature-settings: var(--font-family--serif--font-feature-settings);
  font-size: var(--font-size--4XL);
  line-height: var(--line-height--tight);
  margin-bottom: var(--spacing--M);
  color: var(--color--text-headline);
  text-wrap: balance;
  max-width: 15ch;
}
@media (min-width: 768px) {
  .Prefooter.use-product-branding p {
    max-width: 40ch;
  }
}
.Prefooter .Prefooter--product-graphic {
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  translate: -50% 0;
}
.Prefooter .Prefooter--product-graphic .avatars {
  display: flex;
  gap: 0 12.5px;
  position: absolute;
  right: 24px;
  top: -44px;
}
.Prefooter .Prefooter--product-graphic .avatars img:first-child {
  display: none !important;
}
@media (min-width: 768px) {
  .Prefooter .Prefooter--product-graphic .avatars img:first-child {
    display: block !important;
    position: relative;
    z-index: 1;
  }
}
.Prefooter .Prefooter--product-graphic .status-animation {
  position: relative;
}
.Prefooter .Prefooter--product-graphic .status-animation .status-ring {
  animation: PrefooterStatusRingAnimation 1.6s infinite linear;
  background: rgba(var(--color--red-accent-rgb), 0);
  border-radius: 200px;
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  z-index: 0;
}
.Prefooter .Prefooter--product-graphic .status-animation .status-ring:nth-child(2) {
  animation-delay: 0.8s;
}
.Prefooter .Prefooter--product-graphic .card {
  background: white;
  border-radius: 12px 12px 0 0;
  box-shadow: var(--elevation--2XL--on-red);
  padding-bottom: 24px;
  position: relative;
  width: 100%;
}
@media (min-width: 1024px) {
  .Prefooter .Prefooter--product-graphic .card {
    width: max(837px, var(--container-width) / 12 * 8 - var(--spacing--M) * 4 / 12);
  }
}
.Prefooter .Prefooter--product-graphic .card-top {
  display: flex;
  border-bottom: 0.5px solid var(--color--charcoal-300);
}
.Prefooter .Prefooter--product-graphic .card-tags {
  display: none;
}
@media (min-width: 480px) {
  .Prefooter .Prefooter--product-graphic .card-tags {
    display: block;
  }
}

.FakeSelect {
  display: inline-block;
  position: relative;
  padding-right: calc(var(--FakeSelect--icon-size) * 0.9);
}
.FakeSelect .Icon {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
.FakeSelect select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.FakeSelect:has(select:focus-visible) {
  box-shadow: var(--focus-input--default);
  border-radius: var(--border-radius--M);
}
.FakeSelect,
.FakeSelect select {
  cursor: pointer;
}

.NavatticDemoModal {
  border-radius: var(--border-radius--M);
  box-shadow: var(--elevation--XL);
  height: calc(100svh - var(--spacing--M) * 2);
  overflow: hidden;
  width: calc(100svw - var(--spacing--M) * 2);
}

@keyframes ModalOverlayInAnim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ModalOverlayOutAnim {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ModalChildrenInAnim {
  0% {
    opacity: 0;
    translate: 0 calc(var(--spacing--M) * -1);
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes ModalChildrenOutAnim {
  0% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 0;
    translate: 0 calc(var(--spacing--M) * -1);
  }
}
.Modal--Overlay {
  --Modal--animation-duration: 0.5s;
  align-items: center;
  animation: ModalOverlayInAnim var(--Modal--animation-duration) ease-in-out forwards;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  overflow: auto;
  padding: var(--spacing--L) var(--spacing--XS);
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: calc(var(--SiteNav--z-index) + 1);
}
.Modal--Overlay.is-closing {
  --Modal--animation-duration: 0.3s;
  animation: ModalOverlayOutAnim var(--Modal--animation-duration) ease-in forwards;
}
@media (min-width: 480px) {
  .Modal--Overlay {
    padding: var(--spacing--L) var(--spacing--M);
  }
}
@media (min-width: 1024px) {
  .Modal--Overlay {
    padding: var(--spacing--L);
  }
}

.Modal--CloseButton {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  z-index: 2;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.Modal--CloseButton .Icon {
  transition: opacity 0.2s;
}
.Modal--CloseButton:hover .Icon {
  opacity: 0.8;
}
.Modal--CloseButton.inset {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--spacing--S) * 1.625);
  height: calc(var(--spacing--S) * 1.625);
  display: flex;
  align-items: center;
  justify-content: center;
}
.Modal--CloseButton.inset .Icon {
  background: var(--color--text-light);
}

.Modal--OverlayTransparencyButton {
  background: var(--color--charcoal-800);
  cursor: default;
  height: 100vh;
  left: 0;
  opacity: 0.72;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1;
}

.Modal--Children {
  align-items: center;
  animation: ModalChildrenInAnim var(--Modal--animation-duration) ease-in-out forwards;
  display: flex;
  height: auto;
  justify-content: center;
  position: relative;
  width: 100%;
  z-index: 9;
}
.is-closing .Modal--Children {
  animation: ModalChildrenOutAnim var(--Modal--animation-duration) ease-in forwards;
}

.Modal--Card {
  animation: ModalChildrenInAnim var(--Modal--animation-duration) ease-in-out forwards;
  background: var(--color--basics-white);
  border-radius: var(--border-radius--L);
  box-shadow: var(--elevation--L--on-dark);
  height: auto;
  max-height: 100%;
  overflow: auto;
  padding: var(--spacing--M);
  position: relative;
  width: calc(var(--max-width--column--7) + var(--spacing--M));
  z-index: 9;
}
.is-closing .Modal--Card {
  animation: ModalChildrenOutAnim var(--Modal--animation-duration) ease-in forwards;
}
.Modal--Card > *:last-child {
  margin-bottom: 0;
}

@keyframes SearchKeyframes {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes SearchLoadingKeyframes {
  0% {
    transform: none;
  }
  100% {
    transform: rotate(360deg);
  }
}
.Search {
  animation: SearchKeyframes 0.2s ease-in forwards;
  background: white;
  bottom: 0;
  height: 100vh;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: calc(var(--SiteNav--z-index) + 2);
}
.Search--CloseButton {
  position: absolute;
  top: 4px;
  right: 14px;
  width: 40px;
  height: 40px;
  transition: background-color 0.2s;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Search--CloseButton .Icon {
  background: var(--color--text-light);
}
.Search--CloseButton:hover {
  background-color: var(--color--charcoal-200);
}
@media (min-width: 768px) {
  .Search--CloseButton {
    position: fixed;
    top: 10px;
    right: 25px;
  }
}
.Search--Content {
  margin: 75px auto;
  max-width: 1040px;
}
@media (min-width: 768px) {
  .Search--Content {
    margin: 150px auto;
  }
}
.Search--Results {
  margin: 20px 0 90px;
}
.Search--NoResults {
  text-align: center;
  background: var(--color--slate-300);
  padding: 16px;
  border-radius: 3px;
}
.Search--Loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: var(--font-size--XS);
  color: var(--color--charcoal-300);
}
.Search--Loading::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 6px solid var(--color--charcoal-200);
  border-radius: 50%;
  border-right-color: transparent;
  animation: SearchLoadingKeyframes 2s infinite linear;
}

.IconButton {
  align-items: center;
  border-radius: var(--IconButton--size);
  display: flex;
  height: var(--IconButton--size);
  justify-content: center;
  padding: 0;
  transition: background 0.3s, box-shadow 0.3s;
  width: var(--IconButton--size);
}
.IconButton.button--outline {
  background: var(--color--basics-white);
  box-shadow: inset 0 0 0 1px var(--color--clay-300);
}
.IconButton.button--outline:hover {
  background: var(--color--basics-white);
  box-shadow: inset 0 0 0 1px var(--color--action-default);
}
.IconButton:focus-visible {
  border-radius: var(--IconButton--size);
}

.PlayButton {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s;
  background: rgba(var(--color--cobalt-700-rgb), 0.48);
  cursor: pointer;
}
.PlayButton:hover, .PlayButton:focus-visible {
  background: rgba(var(--color--cobalt-700-rgb), 0.8);
}
.PlayButton:focus-visible {
  border-radius: var(--border-radius--full);
}
.PlayButton svg {
  --PlayButton--svg-aspect-ratio: 0.364;
  height: auto;
  margin-left: 8%;
  width: calc(100% * var(--PlayButton--svg-aspect-ratio));
}
.PlayButton.size--XS {
  width: 20px;
  height: 20px;
}
.PlayButton.size--S {
  width: 40px;
  height: 40px;
}
.PlayButton.size--M {
  width: 56px;
  height: 56px;
}
.PlayButton.size--L {
  width: 96px;
  height: 96px;
}
.PlayButton.variant--OUTLINE {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color--action-default);
}
.PlayButton.has-text {
  border-radius: 9999px;
  width: auto;
  height: auto;
  padding: var(--spacing--base-0-5) var(--spacing--base-1) var(--spacing--base-0-5) var(--spacing--base-0-5);
  gap: var(--spacing--base-0-5);
}
.PlayButton.has-text > div {
  white-space: nowrap;
  margin: 0;
}
.PlayButton.has-text svg {
  margin: 0;
}
.PlayButton.has-text.size--L svg {
  width: 27px;
  height: 27px;
}
.PlayButton.has-text.size--M svg {
  width: 22px;
  height: 22px;
}

.SiteFooter {
  --site-footer--big-logo--offset-right: calc(
    (100vw - var(--container-width)) / 2
  );
  --site-footer--big-logo--width: calc(
    100vw - var(--site-footer--big-logo--offset-right)
  );
  --site-footer--big-logo--height: calc(
    var(--site-footer--big-logo--width) * 0.073532
  );
  position: relative;
  background: var(--color--charcoal-1200);
  padding: var(--spacing--L) 0 calc(var(--site-footer--big-logo--height) + var(--spacing--L));
}
.SiteFooter *::selection {
  background: var(--color--charcoal-900);
  color: var(--color--charcoal-200);
}
.SiteFooter .container {
  position: relative;
  z-index: 1;
}
.SiteFooter .SiteFooterBigLogo {
  position: absolute;
  width: var(--site-footer--big-logo--width);
  bottom: 0;
  right: var(--site-footer--big-logo--offset-right);
}
@media (min-width: 1024px) {
  .SiteFooter {
    padding-bottom: calc(var(--site-footer--big-logo--height) + var(--spacing--M));
  }
}
@media (min-width: 1600px) {
  .SiteFooter {
    --site-footer--big-logo--offset-right: calc(
      (100vw - var(--container-width)) / 2 - 2.5vw
    );
    padding-bottom: var(--site-footer--big-logo--height);
  }
}
.SiteFooter .flex {
  gap: var(--spacing--L) var(--spacing--M);
  margin-bottom: var(--spacing--XL);
}
@media (min-width: 1600px) {
  .SiteFooter .flex {
    gap: var(--spacing--L) var(--spacing--S);
    margin-bottom: var(--spacing--2XL);
  }
}
.SiteFooter .SiteFooter--column {
  flex: 0 0 calc(50% - var(--spacing--M) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--base-1);
}
@media (min-width: 768px) {
  .SiteFooter .SiteFooter--column {
    flex: 0 0 calc(33.3333% - var(--spacing--M) * 2 / 3);
  }
}
.SiteFooter .SiteFooter--column div {
  margin: 0;
}
.SiteFooter .SiteFooter--column.desktop-meta {
  display: none;
  margin-left: auto;
}
.SiteFooter .SiteFooter--column.mobile-meta {
  display: flex;
  gap: var(--spacing--S) calc(var(--spacing--base-1-5) + 9px);
}
.SiteFooter .SiteFooter--column.mobile-meta.social-links-copyright {
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .SiteFooter .SiteFooter--column.mobile-meta.social-links-copyright {
    justify-content: flex-start;
    padding-top: var(--spacing--XS);
  }
}
@media (min-width: 1024px) {
  .SiteFooter .SiteFooter--column {
    flex: 0 0 14%;
    gap: var(--spacing--base-0-5);
  }
  .SiteFooter .SiteFooter--column.desktop-meta {
    flex: 0 0 auto;
    display: flex;
    gap: calc(var(--spacing--base-1-25) + 16px) 0;
  }
  .SiteFooter .SiteFooter--column.mobile-meta {
    display: none;
  }
}
@media (min-width: 1600px) {
  .SiteFooter .SiteFooter--column {
    flex: 0 0 17.8%;
  }
  .SiteFooter .SiteFooter--column.compare {
    flex: 0 0 14.24%;
  }
}
.SiteFooter .SiteFooter--column h4 {
  color: var(--color--charcoal-300);
}
.SiteFooter .SiteFooter--column a,
.SiteFooter .SiteFooter--column span:not(.Badge) {
  color: var(--color--charcoal-600);
  font-size: var(--font-size--S);
}
@media (min-width: 480px) {
  .SiteFooter .SiteFooter--column a {
    white-space: nowrap;
  }
}
.SiteFooter .SiteFooter--column a .Badge {
  position: relative;
  top: -0.18em;
  margin-left: 0.33em;
}
.SiteFooter .SiteFooter--column a .Badge.status-badge {
  background-color: var(--color--charcoal-1000);
  color: var(--color--charcoal-400);
  font-family: var(--font-family--sans);
  font-weight: var(--font-weight--medium);
  letter-spacing: 0.08em;
}
.SiteFooter .SiteFooter--column a .Badge.status-badge svg {
  margin-left: -0.1em;
  margin-right: 0.1em;
  position: relative;
  top: 0.19em;
}
.SiteFooter .SiteFooter--column a .Icon {
  background: var(--color--charcoal-600);
  display: inline-block;
  margin-left: 0.15em;
  position: relative;
  top: -0.2em;
}
.SiteFooter .SiteFooter--column a:hover, .SiteFooter .SiteFooter--column a:active {
  color: var(--color--charcoal-500);
}
.SiteFooter .SiteFooter--column a:hover .Icon, .SiteFooter .SiteFooter--column a:active .Icon {
  background: var(--color--charcoal-500);
}
.SiteFooter .SiteFooter--column a:focus-visible {
  box-shadow: var(--focus-link--onCharcoal-1200);
}
.SiteFooter .SiteFooter--column > a,
.SiteFooter .SiteFooter--column > span {
  display: block;
}
.SiteFooter .social-links {
  display: flex;
  gap: 0 var(--spacing--XS);
}
.SiteFooter .social-links .Icon {
  transition: background 0.3s;
}
.SiteFooter .social-links a:hover .Icon {
  background: var(--color--charcoal-500);
}
.SiteFooter .responsibility {
  display: flex;
  gap: 0 calc(var(--spacing--base-1-5) + 9px);
  align-items: center;
}
@media (min-width: 1024px) {
  .SiteFooter .responsibility {
    justify-content: flex-end;
  }
}
@media (min-width: 1600px) {
  .SiteFooter .responsibility svg:first-child {
    width: clamp(2.75rem, 1.1458333333vw + 1.6041666667rem, 3.4375rem);
  }
  .SiteFooter .responsibility svg:last-child {
    width: clamp(2.6875rem, 1.1197916667vw + 1.5677083333rem, 3.359375rem);
  }
}
.SiteFooter .tagline {
  text-align: center;
}
@media (min-width: 768px) {
  .SiteFooter .tagline {
    padding: 0 0 var(--spacing--L) 0;
  }
}
.SiteFooter .tagline span {
  display: inline-block;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .SiteFooter .tagline {
    text-align: right;
  }
}

.SocialShare {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 auto var(--spacing--M);
}
@media (min-width: 1024px) {
  .SocialShare {
    flex: 0;
    position: sticky;
    top: calc(var(--SiteNav--height) + var(--spacing--S));
    /* Height of the SiteNav + some padding */
    width: var(--spacing--M);
    float: right;
    margin: 5px calc(0px - ((100vw - var(--text-max-width)) / 2 - 30px)) 0 0;
  }
}
.SocialShare li {
  margin: 0 10px;
}
@media (min-width: 1024px) {
  .SocialShare li {
    margin: 0 0 14px;
  }
}
.SocialShare a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing--M);
  height: var(--spacing--M);
  border-radius: var(--border-radius--full);
  background: rgba(var(--color--slate-300-rgb), 0.5);
}
.SocialShare a svg {
  width: 16px;
}
.SocialShare a svg path {
  fill: var(--color--charcoal-1200);
}
.SocialShare a:hover {
  background: var(--color--action-hovered);
}
.SocialShare a:hover svg path {
  fill: white;
}
.SocialShare a:focus, .SocialShare a:focus-visible, .SocialShare a:active, .SocialShare a:target {
  background: rgba(var(--color--slate-300-rgb), 0.5);
  border-radius: var(--border-radius--full);
}
.SocialShare a.twitter svg {
  width: 20px;
}
.SocialShare a.facebook svg {
  width: 22px;
}
.SocialShare a.linkedin svg {
  width: 21px;
}
.SocialShare.SocialShare--direction-HORIZONTAL {
  width: auto;
}
.SocialShare.SocialShare--direction-HORIZONTAL li {
  margin: 0 14px 0 0;
}
.SocialShare.SocialShare--direction-HORIZONTAL li:last-of-type {
  margin: 0;
}
@media (min-width: 1024px) {
  .SocialShare.SocialShare--direction-HORIZONTAL {
    margin: 0;
  }
}
.SocialShare.SocialShare--direction-VERTICAL {
  display: none;
}
@media (min-width: 1024px) {
  .SocialShare.SocialShare--direction-VERTICAL {
    display: block;
  }
}

.SiteFooterSmall {
  margin-top: auto;
  border-top: 1px solid var(--color--charcoal-200);
  background: var(--color--basics-white);
}
.SiteFooterSmall--Columns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing--base-1-5) 0;
}
.SiteFooterSmall--Columns svg {
  width: clamp(5.375rem, 3.75vw + 4.25rem, 8rem);
  vertical-align: bottom;
}

.ToggleWithText {
  width: fit-content;
  padding: 2px;
  margin-bottom: 8px;
  display: flex;
  border: 1px solid var(--color--clay-400);
  border-radius: var(--border-radius--L);
  background: var(--color--clay-200);
}
.ToggleWithText button {
  background: transparent;
  border-radius: 0;
  color: var(--color--clay-1200);
  display: block;
  font-size: var(--font-size--XS);
  font-weight: var(--font-weight--medium);
  height: var(--button--height-S);
  line-height: var(--button--height-S);
  margin: 0;
  overflow: hidden;
  padding: 0 var(--button--padding-x-M);
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}
.ToggleWithText button:hover, .ToggleWithText button:active, .ToggleWithText button:focus-visible {
  background: transparent;
}
.ToggleWithText button:not(.is-active):hover, .ToggleWithText button:not(.is-active):active, .ToggleWithText button:not(.is-active):focus-visible {
  background: var(--color--clay-400);
  border-radius: calc(var(--border-radius--L) * 0.75);
  color: var(--color--text-default);
}
.ToggleWithText button span {
  position: relative;
  z-index: 1;
}
.ToggleWithText button::before {
  content: "";
  background: var(--color--clay-1200);
  border-radius: calc(var(--border-radius--L) * 0.75);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: translate 0.3s;
  width: 100%;
}
.ToggleWithText button:first-child::before {
  translate: 100% 0;
}
.ToggleWithText button:last-child::before {
  translate: -100% 0;
}
.ToggleWithText button.is-active {
  color: var(--color--basics-white);
}
.ToggleWithText button.is-active:first-child::before, .ToggleWithText button.is-active:last-child::before {
  translate: 0 0;
}
.ToggleWithText.size--S button {
  height: calc(var(--button--height-S) * 0.8);
  line-height: calc(var(--button--height-S) * 0.8);
  padding: 0 var(--button--padding-x-S);
}
@media (max-width: 767px) {
  .ToggleWithText.size--DYNAMIC button {
    height: calc(var(--button--height-S) * 0.8);
    line-height: calc(var(--button--height-S) * 0.8);
    padding: 0 var(--button--padding-x-S);
  }
}
.ToggleWithText.color--orange {
  background: var(--color--orange-200);
  border: 1px solid var(--color--orange-300);
}
.ToggleWithText.color--orange button:not(.is-active) {
  color: var(--color--orange-700);
}
.ToggleWithText.color--orange button:not(.is-active):hover, .ToggleWithText.color--orange button:not(.is-active):active, .ToggleWithText.color--orange button:not(.is-active):focus-visible {
  background: var(--color--orange-100);
}

/* SiteNav global variables */
:root {
  --SiteNav--height: calc(33px + var(--spacing--base-2) * 2);
  /* HeaderLogo height = 33px */
  --SiteNav--z-index: 1000;
  --SiteNav--drawer-column--gap-x: var(--spacing--XS);
  --SiteNav--drawer-column--gap-y: var(--spacing--base-0-75);
  --HubspotForm--max-width: max(505px, calc((var(--container-width) / 12 * 5) - (var(--spacing--M) * 7 / 12)));
}

@media (min-width: 1024px) {
  :root {
    --SiteNav--height: calc(var(--button--height-M) + var(--spacing--base-2) * 2);
  }
}
@keyframes SiteNavInKeyframes {
  0% {
    translate: 0 -100%;
  }
  100% {
    translate: 0 0;
  }
}
.SiteNav--underlay {
  backdrop-filter: blur(3px);
  background: rgba(255, 255, 255, 0.5);
  height: 100vh;
  left: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  position: fixed;
  top: 0;
  top: 0;
  transition: opacity 0.3s;
  width: 100vw;
  will-change: opacity;
  z-index: calc(var(--SiteNav--z-index) - 1);
}

.SiteNav {
  --SiteNav--logo-width: 124px;
  --SiteNav--logo-margin-right: calc(var(--spacing--M) - var(--spacing--base-1-5));
  --SiteNav--nav-drawer-underlay--links-dimension: 50px;
  --SiteNav--subnav-link-width: 300px;
  --SiteNav--subnav-feature-width: calc((var(--spacing--base-0-75) * 2 + var(--font-size--S) * var(--line-height--relaxed) * 2 + 4px) * 4 * 1.31);
  padding: var(--spacing--base-2) 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: background 0.3s, transform 0.3s ease-in-out, top 0.3s;
  width: 100%;
  z-index: var(--SiteNav--z-index);
}
.SiteNav::before {
  content: "";
  background: white;
  box-shadow: var(--elevation--XL);
  border-radius: var(--border-radius--M);
  display: block;
  height: calc(var(--button--height-M) + var(--spacing--base-1-25) * 2);
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition: all 0.4s;
  translate: -50% -50%;
  width: calc(var(--container-width) + var(--spacing--base-2-5) * 2);
  will-change: opacity;
}
@media (min-width: 1024px) {
  .SiteNav {
    --SiteNav--logo-width: 168px;
  }
}
@media (min-width: 1024px) {
  .SiteNav {
    --SiteNav--nav-drawer-underlay--links-dimension: 64px;
  }
  .SiteNav:hover::before, .SiteNav:focus-within::before {
    opacity: 1;
  }
}
.SiteNav:not(:has(*:hover)):has(li:focus-within > .nav-link.has-drawer) + .SiteNav--underlay, .SiteNav:has(li:hover > .nav-link.has-drawer) + .SiteNav--underlay, .SiteNav.is-open + .SiteNav--underlay {
  opacity: 1;
}
.SiteNav.scrolled--SHOWING::before, .SiteNav.scrolled--HIDING::before {
  opacity: 1;
}
.SiteNav.scrolled--SHOWING {
  position: fixed;
  /* transform: translateY(0); */
  animation: SiteNavInKeyframes 0.3s ease-in-out forwards;
}
.SiteNav.scrolled--HIDING:not(.is-open) {
  position: fixed;
  transform: translateY(-100%);
}
.SiteNav .nav-pill {
  align-items: center;
  gap: 0 var(--spacing--base-1-25);
  justify-content: space-between;
  position: relative;
}
.SiteNav a.skip-to-content {
  background: var(--color--basics-white);
  display: block;
  left: 50%;
  opacity: 0;
  padding: 0.2em var(--spacing--XS);
  position: absolute;
  top: 0;
  transition: opacity 0.3s, translate 0.3s;
  translate: -50% calc(-100% - var(--spacing--base-2));
  z-index: calc(var(--SiteNav--z-index) + 1);
}
.SiteNav a.skip-to-content:focus {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  opacity: 1;
  translate: -50% calc(var(--spacing--base-2) * -1);
}
.SiteNav .nav-logo {
  align-items: center;
  display: flex;
  flex: 0 0 var(--SiteNav--logo-width);
  margin-right: var(--SiteNav--logo-margin-right);
  padding: 0;
  width: var(--SiteNav--logo-width);
}
.SiteNav .nav-logo svg {
  width: var(--SiteNav--logo-width);
}
@media (min-width: 1024px) {
  .SiteNav .nav-logo svg {
    transition: transform 0.3s;
    transform-origin: left center;
  }
}
.SiteNav .nav-logo div {
  height: 33px;
}
@media (min-width: 1024px) {
  .SiteNav .nav-logo {
    display: flex;
    flex: 0 0 168px;
    align-items: center;
  }
}
@media (min-width: 768px) {
  .SiteNav.scrolled--SHOWING .nav-logo svg, .SiteNav.scrolled--HIDING .nav-logo svg {
    transform: scale(0.892);
  }
}
.SiteNav .main-nav {
  background: var(--color--basics-white);
  border-radius: var(--border-radius--L);
  border: 0.5px solid var(--color--charcoal-400);
  box-shadow: var(--elevation--XL);
  max-width: 327px;
  opacity: 0;
  padding: 4px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--spacing--base-0-5));
  transition: opacity 0.3s, translate 0.3s;
  translate: 0 calc(var(--spacing--base-0-5) * -1);
}
@media (min-width: 768px) {
  .SiteNav .main-nav {
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex: 0 0 calc(100% - var(--spacing--base-1-25) - var(--SiteNav--logo-width) - var(--SiteNav--logo-margin-right));
    gap: 0 var(--spacing--base-1);
    max-width: none;
    opacity: 1;
    padding: 0;
    pointer-events: all;
    position: static;
    translate: none;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .SiteNav .main-nav {
    gap: 0 var(--spacing--base-1-25);
  }
}
@media (min-width: 1024px) {
  .SiteNav .main-nav {
    gap: 0;
    top: calc(100% + var(--spacing--base-1-25) * 2);
  }
}
.SiteNav .main-nav,
.SiteNav .main-nav ul.nav-drawer,
.SiteNav .main-nav li {
  margin: 0;
}
.SiteNav .main-nav > li {
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 768px) {
  .SiteNav .main-nav > li {
    align-items: center;
    flex-direction: row;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .SiteNav .main-nav > li {
    position: relative;
  }
  .SiteNav .main-nav > li:hover:has(button.nav-link)::before, .SiteNav .main-nav > li:focus-within:has(button.nav-link)::before {
    content: "";
    height: calc(100% + var(--spacing--base-0-5));
    left: 0;
    position: absolute;
    top: 0;
    width: calc(100% + var(--spacing--base-1-25));
    z-index: -1;
  }
  .SiteNav .main-nav > li li:hover .nav-drawer,
  .SiteNav .main-nav > li li:focus-within .nav-drawer {
    opacity: 1;
    pointer-events: all;
    translate: 0;
  }
}
@media (min-width: 1024px) {
  .SiteNav .main-nav > li {
    padding-right: var(--spacing--base-1-5);
    position: static;
  }
  .SiteNav .main-nav > li:last-child {
    padding-right: 0;
  }
}
.SiteNav .main-nav > li.hide-on-mobile {
  display: none;
}
@media (min-width: 1024px) {
  .SiteNav .main-nav > li.hide-on-mobile {
    display: flex;
  }
}
.SiteNav .main-nav > li li:nth-child(1) .nav-drawer li {
  flex: 0 0 var(--SiteNav--subnav-link-width);
}
@media (min-width: 768px) and (hover: hover) {
  .SiteNav.is-reset .main-nav > li li:hover .nav-drawer,
  .SiteNav.is-reset .main-nav > li li:focus-within .nav-drawer {
    pointer-events: none;
  }
}
.SiteNav.is-open .main-nav {
  opacity: 1;
  pointer-events: all;
  translate: 0 0;
}
.SiteNav .nav-link {
  align-items: center;
  border-radius: var(--border-radius--M);
  color: var(--color--text-light);
  display: flex;
  font-size: var(--font-size--S);
  justify-content: flex-start;
  line-height: var(--line-height--relaxed);
  padding: var(--spacing--base-1-75) var(--button--padding-x-S);
  text-align: center;
  transition: background-color 0.1s, color 0.1s;
  width: 100%;
}
.SiteNav .nav-link .Icon {
  margin-right: -0.3333em;
}
@media (min-width: 768px) and (hover: hover) {
  .SiteNav .nav-link:is(button) {
    pointer-events: none;
  }
}
@media (min-width: 768px) {
  .SiteNav .nav-link {
    padding: var(--spacing--base-1-75) var(--spacing--base-1-75);
  }
}
.SiteNav .nav-link.is-expanded {
  background-color: rgba(var(--color--charcoal-1200-rgb), 0.04);
  color: var(--color--text-dark);
}
.SiteNav .nav-link.is-expanded + .nav-drawer {
  max-height: var(--SiteNav--nav-drawer-max-height);
  opacity: 1;
  padding: var(--spacing--base-0-5) 0;
  pointer-events: all;
}
@media (min-width: 1024px) {
  .SiteNav .nav-link.is-expanded + .nav-drawer {
    translate: -50% 0;
  }
}
@media (min-width: 768px) {
  .SiteNav .nav-link {
    justify-content: center;
    height: var(--button--height-M);
    padding: 0 var(--spacing--base-0-75);
    width: auto;
  }
}
.SiteNav.is-ready:not(:has(*:hover)) li:focus-within > .nav-link,
.SiteNav.is-ready li:hover > .nav-link {
  background-color: rgba(var(--color--charcoal-1200-rgb), 0.04);
  color: var(--color--text-dark);
}
.SiteNav.is-ready:not(:has(*:hover)) li:focus-within > .nav-link + .nav-drawer,
.SiteNav.is-ready li:hover > .nav-link + .nav-drawer {
  opacity: 1;
  pointer-events: all;
  translate: 0 0;
}
@media (min-width: 1024px) {
  .SiteNav.is-ready:not(:has(*:hover)) li:focus-within > .nav-link + .nav-drawer,
  .SiteNav.is-ready li:hover > .nav-link + .nav-drawer {
    translate: -50% 0;
  }
}
.SiteNav .nav-drawer {
  --SiteNav--nav-drawer-max-height: 100vh;
  display: flex;
  flex-direction: column;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  width: var(--max-width--column--3);
  will-change: max-height, opacity, padding;
}
@media (min-width: 768px) {
  .SiteNav .nav-drawer {
    background: var(--color--basics-white);
    border-radius: var(--border-radius--L);
    box-shadow: var(--elevation--XL);
    display: grid;
    gap: 0 4px;
    left: 0;
    max-height: none;
    padding: 4px 4px calc(4px + var(--SiteNav--nav-drawer-underlay--links-dimension));
    position: absolute;
    top: 100%;
    transition: opacity 0.3s, translate 0.2s;
    z-index: calc(var(--SiteNav--z-index) + 1);
  }
}
@media (min-width: 1024px) {
  .SiteNav .nav-drawer {
    --nav-drawer--padding-top: calc(var(--spacing--base-1-25) * 2 + 12px);
    --nav-drawer--padding-bottom: calc(12px + var(--SiteNav--nav-drawer-underlay--links-dimension));
    --nav-drawer--padding-x: 12px;
    background: transparent;
    border-radius: var(--border-radius--L);
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    gap: 0 var(--spacing--base-0-75);
    left: 50%;
    min-height: calc((var(--font-size--S) * var(--line-height--relaxed) * 2 + 4px + var(--spacing--base-0-75) * 2) * 4 + var(--nav-drawer--padding-top) + var(--nav-drawer--padding-bottom));
    padding: var(--nav-drawer--padding-top) var(--nav-drawer--padding-x) var(--nav-drawer--padding-bottom);
    top: 100%;
    translate: -50% 0;
    width: calc(var(--SiteNav--subnav-link-width) + var(--SiteNav--subnav-feature-width) + var(--nav-drawer--padding-x) * 2 + var(--spacing--base-0-75));
  }
  .SiteNav .nav-drawer ul {
    flex: 0 0 var(--SiteNav--subnav-link-width);
  }
  .SiteNav .nav-drawer ul li {
    flex: 0 0 var(--SiteNav--subnav-link-width);
  }
  .SiteNav .nav-drawer.use-2-cols {
    width: calc(var(--SiteNav--subnav-link-width) * 2 + var(--SiteNav--subnav-feature-width) + var(--nav-drawer--padding-x) * 2 + var(--spacing--base-0-75));
  }
  .SiteNav .nav-drawer.use-2-cols ul {
    display: grid;
    flex: 0 0 calc(var(--SiteNav--subnav-link-width) * 2);
    gap: 0 var(--spacing--base-0-75);
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .SiteNav .nav-drawer.use-2-cols ul .nav-items-title {
    grid-area: 1/1/2/3;
  }
  .SiteNav .nav-drawer.use-2-cols ul .subnav-link-wrapper:nth-child(-n+5) {
    grid-column: 1/2;
  }
  .SiteNav .nav-drawer.use-2-cols ul .subnav-link-wrapper:nth-child(n+5) {
    grid-row: auto;
    grid-column: 2/3;
  }
}
.SiteNav .nav-drawer .subnav-link {
  border-radius: var(--border-radius--S);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--spacing--base-0-75) var(--button--padding-x-S);
  transition: background-color 0.3s;
  white-space: nowrap;
  width: 100%;
}
@media (min-width: 768px) {
  .SiteNav .nav-drawer .subnav-link {
    padding: calc(var(--spacing--base-0-75) - 1px) var(--spacing--base-0-75) calc(var(--spacing--base-0-75) + 1px);
  }
}
@media (min-width: 1024px) {
  .SiteNav .nav-drawer .subnav-link {
    max-width: var(--SiteNav--subnav-link-width);
  }
}
.SiteNav .nav-drawer .subnav-link .title,
.SiteNav .nav-drawer .subnav-link .description {
  font-size: var(--font-size--S);
  transition: color 0.3s, opacity 0.3s;
}
.SiteNav .nav-drawer .subnav-link .title {
  display: flex;
  align-items: center;
  gap: 4px 0.375em;
  font-weight: var(--font-weight--medium);
  color: var(--color--text-headline);
}
.SiteNav .nav-drawer .subnav-link .Icon {
  margin-top: -0.075em;
}
.SiteNav .nav-drawer .subnav-link .description {
  color: var(--color--text-light);
  display: none;
}
@media (min-width: 768px) {
  .SiteNav .nav-drawer .subnav-link .description {
    display: block;
  }
}
.SiteNav .nav-drawer .subnav-link.has-icon .description {
  padding-left: calc(16px + 0.375em);
}
@media (hover: hover) {
  .SiteNav .nav-drawer .subnav-link:hover {
    background-color: var(--color--cobalt-100);
  }
  .SiteNav .nav-drawer .subnav-link:hover .title,
  .SiteNav .nav-drawer .subnav-link:hover .description {
    color: var(--color--action-hovered);
  }
  .SiteNav .nav-drawer .subnav-link:hover .Icon {
    background-color: var(--color--action-hovered) !important;
  }
  .SiteNav .nav-drawer .subnav-link:hover .description {
    opacity: 0.8;
  }
}
.SiteNav .nav-drawer .feature {
  margin-top: var(--spacing--XS);
}
.SiteNav .nav-drawer .feature a {
  background: var(--color--clay-100);
  border-radius: var(--border-radius--S);
  border: 0.5px solid var(--color--clay-300);
  display: block;
  width: 100%;
  padding: var(--spacing--base-1) var(--spacing--base-1-5) var(--spacing--base-1-25);
}
.SiteNav .nav-drawer .feature .image-wrapper {
  overflow: hidden;
}
.SiteNav .nav-drawer .feature img {
  transition: opacity 0.25s linear, scale 0.3s !important;
}
.SiteNav .nav-drawer .feature:hover img {
  scale: 1.025;
}
.SiteNav .nav-drawer .feature a span {
  display: block;
  line-height: var(--line-height--relaxed);
}
@media (min-width: 1024px) {
  .SiteNav .nav-drawer .feature {
    grid-area: 1/2/10/3;
    margin-top: 0;
  }
  .SiteNav .nav-drawer .feature .image-wrapper {
    margin-bottom: 0;
  }
}
.SiteNav .nav-drawer .nav-drawer-underlay--links {
  display: none;
}
@media (min-width: 768px) {
  .SiteNav .nav-drawer .nav-drawer-underlay--links {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .SiteNav .nav-drawer .nav-drawer-underlay--links {
    background: transparent;
  }
  .SiteNav .nav-drawer .nav-drawer-underlay--links a {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .SiteNav .nav-drawer .nav-drawer-underlay--links a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}
@media (min-width: 1024px) {
  .SiteNav .nav-drawer .feature {
    flex: 0 0 var(--SiteNav--subnav-feature-width);
  }
  .SiteNav .nav-item-li.solutions .nav-drawer .subnav-link-wrapper:nth-child(-n+7) {
    grid-column: 1/2;
  }
  .SiteNav .nav-item-li.solutions .nav-drawer .subnav-link-wrapper:nth-child(n+7) {
    grid-column: 2/3;
  }
}
@media (min-width: 1024px) {
  .SiteNav .use-2-cols .feature {
    grid-area: 1/3/10/4;
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .SiteNav {
    grid-area: 1/3/10/4;
    margin-top: 0;
  }
}
.SiteNav .mobile-signup {
  margin-right: calc(24px + var(--spacing--XS));
}
.SiteNav .mobile-signup .hide-tiny-mobile {
  display: none;
}
@media (min-width: 340px) {
  .SiteNav .mobile-signup .hide-tiny-mobile {
    display: inline;
  }
}
@media (min-width: 480px) {
  .SiteNav .mobile-signup {
    padding: 0 var(--button--padding-x-M);
    line-height: var(--button--height-M);
    height: var(--button--height-M);
  }
}
@media (min-width: 768px) {
  .SiteNav .mobile-signup {
    display: none;
  }
}
.SiteNav .touch-menu-toggle {
  align-items: center;
  display: flex;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.SiteNav .touch-menu-toggle .Icon--close {
  display: none;
}
@media (min-width: 768px) {
  .SiteNav .touch-menu-toggle {
    display: none;
  }
}
.SiteNav.is-open .touch-menu-toggle .Icon--close {
  display: block;
}
.SiteNav.is-open .touch-menu-toggle .Icon--menu {
  display: none;
}
.SiteNav li.get-a-demo-or-login,
.SiteNav li.free-trial {
  display: none;
}
.SiteNav li.get-a-demo-or-login {
  margin-top: var(--spacing--M);
}
.SiteNav li.get-a-demo-or-login .nav-link {
  color: var(--color--action-default);
  font-weight: var(--font-weight--semibold);
  justify-content: center;
}
.SiteNav li.get-a-demo-or-login .nav-link:hover {
  background: transparent;
  color: var(--color--action-hovered);
}
@media (min-width: 768px) {
  .SiteNav li.get-a-demo-or-login {
    margin-top: 0;
  }
  .SiteNav li.get-a-demo-or-login .nav-link {
    justify-content: flex-start;
  }
}
@media (min-width: 900px) {
  .SiteNav li.get-a-demo-or-login {
    margin-left: auto;
    display: block;
  }
}
.SiteNav li.free-trial {
  padding-right: 0;
}
.SiteNav li.free-trial .button {
  font-size: var(--font-size--S);
}
@media (min-width: 768px) {
  .SiteNav li.free-trial {
    display: block;
    margin-left: auto;
  }
}
@media (min-width: 900px) {
  .SiteNav li.free-trial {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .SiteNav li.mobile-ctas {
    display: none;
  }
}
.SiteNav li.mobile-ctas .nav-drawer-underlay--links {
  border-radius: 0 0 var(--border-radius--L) var(--border-radius--L);
  position: static;
  margin: 0 -4px -4px;
  width: calc(100% + 8px);
}
.SiteNav .nav-drawer-underlay {
  display: none;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .SiteNav .nav-drawer-underlay {
    background: var(--color--basics-white);
    border-radius: var(--border-radius--XL);
    box-shadow: var(--elevation--XL);
    display: block;
    height: calc(var(--SiteNav--nav-drawer-underlay-h, 0) - var(--spacing--base-1-25) * 2);
    left: 50%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: calc(100% + var(--spacing--base-1-25) * 2);
    transition: all 0.2s;
    translate: -50%;
    width: var(--SiteNav--nav-drawer-underlay-w, 0);
  }
}
.SiteNav .nav-drawer-underlay--links {
  background: linear-gradient(270deg, var(--color-cobalt-500, #4176FA) -10.41%, var(--color-cobalt-700, #263AAD) 80%);
  bottom: 0;
  display: flex;
  gap: calc(var(--SiteNav--nav-drawer-underlay--links-dimension) * 0.75);
  height: var(--SiteNav--nav-drawer-underlay--links-dimension);
  left: 0;
  padding: 0 var(--spacing--base-2-25);
  position: absolute;
  width: 100%;
  z-index: 2;
}
.SiteNav .nav-drawer-underlay--links a {
  display: inline-block;
  color: var(--color--basics-white);
  line-height: var(--SiteNav--nav-drawer-underlay--links-dimension);
  margin: 0;
}
.SiteNav .nav-drawer-underlay--links a:first-child {
  position: relative;
}
.SiteNav .nav-drawer-underlay--links a:first-child::after {
  content: "";
  display: block;
  width: 1px;
  background: var(--color--basics-white);
  height: calc(var(--font-size--S) * var(--line-height--snug));
  position: absolute;
  top: calc(50% + 1px);
  translate: 0 -50%;
  right: calc(var(--SiteNav--nav-drawer-underlay--links-dimension) * -0.375);
}
@media (min-width: 1024px) {
  .SiteNav:not(:has(*:hover)):has(li:focus-within > .nav-link.has-drawer) .nav-drawer-underlay, .SiteNav:has(li:hover > .nav-link.has-drawer) .nav-drawer-underlay {
    opacity: 1;
    pointer-events: all;
  }
}

.TextLink {
  border: none;
  color: var(--color--action-default);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight--semibold);
  position: relative;
  white-space: nowrap;
}
.TextLink:hover {
  color: var(--color--action-hovered);
}
.TextLink svg {
  height: 0.675em;
  width: auto;
  margin-left: 0.3333em;
  transform: translateY(0.02em);
}
.TextLink:focus-visible {
  background: var(--color--cobalt-100);
}
.TextLink.use-dark-mode {
  color: var(--color--cobalt-400);
}
.TextLink.use-dark-mode:hover, .TextLink.use-dark-mode:active {
  color: var(--color--cobalt-300);
}
.TextLink.use-dark-mode:focus-visible {
  color: var(--color--action-pressed);
}
.TextLink.use-rotate-svg svg {
  transform: translateY(0.03em) rotate(90deg);
}

.Tabs {
  position: relative;
  min-height: 42px;
}
@media (min-width: 1024px) {
  .Tabs {
    min-height: 54px;
  }
}

.Tabs--Items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 1px solid rgba(var(--color--charcoal-800-rgb), 0.08);
  margin-bottom: var(--spacing--M);
}
.use-dark-mode .Tabs--Items {
  border-bottom-color: rgba(var(--color--basics-white-rgb), 0.16);
}
@media (min-width: 768px) {
  .Tabs--Items {
    margin-bottom: 60px;
  }
}
@media (min-width: 480px) {
  .Tabs--Items {
    gap: 10px;
  }
}

@keyframes NavInAnimation {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
    box-shadow: var(--elevation--S);
  }
}
@keyframes NavOutAnimation {
  0% {
    transform: translateY(0);
    box-shadow: var(--elevation--S);
  }
  100% {
    transform: translateY(-100%);
  }
}
.Tabs--Option {
  flex: 0 0 auto;
  display: block;
  padding: 0 10px;
  margin: 0;
  height: 42px;
  line-height: 42px;
  color: var(--color--text-default);
  cursor: pointer;
  /* override default button styles */
  background: none;
  border-radius: 0;
}
.Tabs--Option span {
  transition: color 0.25s;
}
.Tabs--Option:hover {
  background: none;
}
.Tabs--Option:hover span {
  color: var(--color--action-hovered);
}
.use-dark-mode .Tabs--Option:hover span {
  color: var(--color--cobalt-accent);
}
.Tabs--Option.is-active {
  border-bottom: 2px solid var(--color--action-default);
  background: none;
}
.Tabs--Option.is-active span {
  color: var(--color--action-default);
}
.use-dark-mode .Tabs--Option.is-active {
  border-bottom-color: var(--color--cobalt-accent);
}
.use-dark-mode .Tabs--Option.is-active span {
  color: var(--color--cobalt-accent);
}
.Tabs--Option .desktop {
  display: none;
}
@media (min-width: 768px) {
  .Tabs--Option .mobile {
    display: none;
  }
  .Tabs--Option .desktop {
    display: inline;
  }
}
@media (min-width: 1024px) {
  .Tabs--Option {
    padding: 0 20px;
    height: 54px;
    line-height: 54px;
  }
  .use-equal-width .Tabs--Option {
    flex: 1;
    /* max-width: 325px; */
  }
}
@media (min-width: 1600px) {
  .Tabs--Option {
    height: 64px;
    line-height: 64px;
  }
}

.SubNav {
  top: 0;
  z-index: calc(var(--SiteNav--z-index) - 1);
  background: var(--color--basics-white);
  margin-bottom: var(--spacing--base-1);
}
.SubNav.is-sticky {
  position: sticky;
}
.SubNav.is-sticky::after {
  box-shadow: var(--elevation--S);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 0.3s;
  width: 100%;
  will-change: opacity;
}
.SubNav.is-sticky.is-stuck::after {
  opacity: 1;
}
.SubNav .container {
  padding: var(--spacing--base-1-5) 0;
}
.SubNav .flex {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0 var(--spacing--base-1);
  justify-content: space-between;
}
.SubNav .SubNav--items-scroller {
  position: relative;
  margin: 0 0 0 calc(var(--spacing--base-2) * -1);
  overflow: scroll;
  padding: 0 var(--spacing--base-2);
  mask-image: linear-gradient(to right, transparent 0%, black var(--spacing--base-2), black calc(100% - var(--spacing--base-2)), transparent 100%);
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.SubNav .SubNav--items-scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.SubNav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing--base-0-5);
  list-style: none;
}
.SubNav ul li {
  margin: 0;
}
.SubNav ul li a {
  background: var(--color--charcoal-100);
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--color--text-light);
  display: block;
  font-size: var(--font-size--S);
  padding: var(--spacing--base-0-5) var(--spacing--base-1);
  position: relative;
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  white-space: nowrap;
}
.SubNav ul li a::before {
  content: attr(data-text);
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  font-weight: var(--font-weight--medium);
  display: none;
}
.SubNav ul li a:hover {
  background: var(--color--charcoal-200);
  border-color: var(--color--charcoal-300);
}
.SubNav ul li a.is-active {
  background-color: var(--color--text-headline);
  border-color: var(--color--text-headline);
  color: var(--color--basics-white);
}
.SubNav ul li a.is-active span {
  opacity: 0;
}
.SubNav ul li a.is-active::before {
  display: block;
}
.SubNav ul li:last-of-type a {
  margin-right: var(--spacing--base-2);
}
@media (min-width: 768px) {
  .SubNav ul li:last-of-type a {
    margin-right: 0;
  }
}
.SubNav .actions {
  display: flex;
  gap: var(--spacing--base-0-5);
}

.Wistia {
  --Wistia--aspect-ratio: 16/9;
  margin: 0;
  opacity: 0;
  position: relative;
  transition: opacity 0.3s;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: var(--Wistia--aspect-ratio);
}
.Wistia video {
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.Wistia.is-wistia-ready {
  opacity: 1;
}
.Wistia--Responsive {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.Wistia--Embed {
  height: 100%;
  width: 100%;
}

.Toggle {
  --toggle--size: 16px;
  --toggle--padding: 2px;
  --toggle--indicator-size: calc(var(--toggle--size) - var(--toggle--padding) * 2);
  background: var(--color--clay-300);
  border-radius: 999px;
  height: var(--toggle--size);
  position: relative;
  transition: background-color 0.2s ease-out;
  width: calc(var(--toggle--size) * 2);
}
.Toggle.color--orange {
  background: var(--color--orange-300);
}
.Toggle .indicator {
  background: var(--color--basics-white);
  border-radius: 9999px;
  box-shadow: var(--elevation--S);
  height: var(--toggle--indicator-size);
  left: var(--toggle--padding);
  position: absolute;
  top: var(--toggle--padding);
  transition: translate 0.2s ease-out;
  width: var(--toggle--indicator-size);
}
.Toggle.is-toggled {
  background: var(--color--success-icon);
}
.Toggle.is-toggled .indicator {
  translate: calc(100% + var(--toggle--padding) * 2);
}
.Toggle.size--XS {
  --toggle--size: 12px;
  --toggle--padding: 1.5px;
}
.Toggle.size--M {
  --toggle--size: var(--spacing--S);
  --toggle--padding: 3px;
}
.Toggle.size--L {
  --toggle--size: var(--spacing--M);
  --toggle--padding: 4px;
}

.SiteFooterBigLogo {
  position: relative;
}
.SiteFooterBigLogo svg {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@keyframes FilteringGridFadeInKeyframes {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.FilteringGrid {
  padding: 20px;
  margin: -20px;
}

.FilteringGrid--Grid {
  position: relative;
  transition: height 0.5s ease-in-out;
  opacity: 0;
  animation: 1s 1.5s forwards FilteringGridFadeInKeyframes;
}
.FilteringGrid--Grid .no-results {
  padding: var(--spacing--S) 0;
  text-align: center;
}

.FilteringGrid--Card {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.4s ease-in-out;
  padding: 0 5px;
}
.FilteringGrid--Card > a {
  display: block;
}
@media (min-width: 768px) {
  .FilteringGrid--Card {
    padding: 0 15px;
  }
}