/* Import base variables */

/* Overrides and custom CSS */

html, body {
    font-family: var(--body-font) !important;
    color: var(--text-color);
}

body {
    position: relative; /* Necessary for scrollspy */
    line-height: var(--body-line-height);
    letter-spacing: var(--body-text-spacing);
}

img {
  max-width: 100%;
  height: auto;
}

/* Switchable Text Color */

.dark-theme .text-dark.switchable-text-color,
.dark-theme .text-dark.switchable-text-color a:not(.btn),
.dark-theme .text-dark.switchable-text-color,
.dark-theme .text-dark.switchable-text-color a:not(.btn),
section.dark-theme .text-muted.switchable-text-color,
section.dark-theme .text-muted.switchable-text-color a:not(.btn),
footer.dark-theme .text-primary.switchable-text-color a:not(.btn),
footer.dark-theme .text-primary.switchable-text-color {
  color: var(--white) !important;
}

.dark-theme .text-bg-dark.switchable-badge-color {
  background-color: rgba(248,249,250,var(--bs-bg-opacity,1)) !important;
  color: #000 !important;
}

.dark-theme .text-body.switchable-text-color,
.dark-theme .text-dark-50.switchable-text-color,
.dark-theme .text-body.switchable-text-color a:not(.btn) {
  color: var(--text-light) !important;
}

.dark-theme .text-primary.switchable-text-color {
  color: var(--primary-over-dark) !important;
}

.dark-theme a.text-primary.switchable-text-color:hover,
.dark-theme a.text-primary.switchable-text-color:focus,
.dark-theme a.text-primary.switchable-text-color:active {
  color: var(--primary-over-dark-hover) !important;
}

/* Grid */

/* Containers use Bootstrap's default 1320px max-width from 1400px up. */
@media (min-width: 1400px) {
  .container-mega {
      max-width: 1400px;
  }
}
  
.row-gutters .row+.row {
  margin-top: var(--bs-gutter-x);
}

.row:last-child {
  margin-bottom: 0px;
}

@media (min-width: 1920px) {
  .col-xxxl-2 {
      flex: 0 0 auto;
      width: 20%;
  }
  
  .col-xxxl-3 {
      flex: 0 0 auto;
      width: 25%;
  }
}

/* Typography */

a {
  color: var(--primary);
}

a:hover,
a:focus,
a:active {
  color: var(--primary-hover);  
}

p,
.text-block {
    font-size: var(--body-text-size);
    line-height: var(--body-line-height);
    margin-bottom: var(--paragraph-bottom-margin);
}

p:only-child,
p:last-child,
.text-block:only-child, 
.text-block:last-child {
    margin-bottom: 0 !important;
}

.base-size {
    font-size: var(--body-text-size);
}

b,
strong {
    font-weight: 600;
}
.font-size-regular,
.font-size-regular p {
    font-size: 1rem;
    line-height: 1.75rem;
}

small,
.small {
  font-size: var(--small-text-size) !important;
  line-height: 24px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-dark);
    margin-bottom: var(--headline-bottom-margin);
}

.h1,
.h2,
.h3,
.h4,
h1,
h2,
h3,
h4 {
  font-family: var(--headline-font);
  font-weight: var(--headline-weight);
}

.h5,
.h6,
h5,
h6 {
  font-family: var(--subheadline-font);
  font-weight: var(--subheadline-weight);
}

h1,
.h1 {
  font-size: var(--headline-1-size);
  letter-spacing: var(--headline-1-spacing);
}

h2,
.h2 {
  font-size: var(--headline-2-size);
  letter-spacing: var(--headline-2-spacing);
}

h3,
.h3 {
  font-size: var(--headline-3-size);
  letter-spacing: var(--headline-3-spacing);
}

h4,
.h4 {
  font-size: var(--headline-4-size);
  letter-spacing: var(--headline-4-spacing);
}

h5,
.h5 {
  font-size: var(--headline-5-size);
  letter-spacing: var(--headline-5-spacing);
}

h6,
.h6 {
  font-size: var(--headline-6-size);
  letter-spacing: var(--headline-6-spacing);
}

.lead,
.lead p {
    font-weight: 400;
    font-size: var(--lead-size) !important;
    letter-spacing: var(--lead-spacing) !important;
}

mark,
.mark {
  background-color: var(--mark);
}

blockquote {
  position: relative;
  padding-left: 3rem;
  
  &::before {
    content: '\201C';
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--serif-font);
    font-size: 4rem;
    line-height: 1;
  }
}

blockquote p {
    font-size: var(--blockquote-size);
    letter-spacing: var(--blockquote-spacing);
    font-style: italic;
}

ol:not(:last-child), ul.no-list:not(:last-child),  {
  margin-bottom: var(--paragraph-bottom-margin);
}

.pre-headline {
    display: inline-block;
    font-weight: 600;
    font-size: var(--small-text-size);
    background-color: var(--lavender);
    padding: 0.325rem 1.25rem;
    border-radius: 2rem;
}

.bg-light .pre-headline {
    background-color: var(--white);
}

.dark-theme .pre-headline,
.dark-theme .pre-headline.text-primary {
    background-color: rgba(0,0,0,0.25);
    border: solid 1px rgba(255,255,255,0.25);
}

.fw-semibold {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 600 !important;
}

.fw-bolder {
    font-weight: 700 !important;
}

.display-6 {
    font-weight: var(--headline-weight);
}

/* Text Color Utility */

.text-primary {
  color: var(--primary) !important;
}

.text-light {
  color: var(--text-light) !important;
}

.text-dark,
.dark-links a {
  color: var(--text-dark) !important;
}

.text-body {
  color: var(--text-color) !important;
}

a.text-body:hover,
a.text-body:focus,
a.text-body:active {
  color: var(--violet) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-white {
  color: var(--white) !important;
}

.text-black-50 {
  color: var(--text-dark) !important;
}

.text-white-50 {
  color: var(--text-light) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-danger {
  color: var(--danger) !important;
}

/* Background Color Utility */

.text-bg-secondary {
  color: var(--white)!important;
  background-color: var(--secondary)!important;
}

/* Background color utility overrides */

.bg-white {
  background-color: var(--white) !important;
}

.bg-light {
  background-color: var(--bg-light) !important;
}

.bg-footer {
  background-color: var(--indigo) !important;
}

.bg-indigo {
  background-color: var(--indigo) !important;
}

/* Legacy background classes, still used by the older modules (headlines/, faq/, portal/, the legacy footer): Indigo,
   as on the 2026 theme. */
.bg-dark-25,
.bg-dark-50 {
  background-color: var(--indigo) !important;
}

.bg-violet {
  background-color: var(--violet) !important;
}

.bg-turquoise {
  background-color: var(--turquoise) !important;
}

.bg-aqua {
  background-color: var(--aqua) !important;
}

.bg-tomato {
  background-color: var(--tomato) !important;
}

.bg-chartreuse {
  background-color: var(--chartreuse) !important;
}

/* Shadows */

.shadow {
  box-shadow: var(--shadow-md) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* Lists */

/* Add checkmarks to unordered lists inside text-block */
.text-block ul:not(.no-list) {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

.text-block ul:not(.no-list):last-child {
  margin-bottom: 0;
}

.text-block ul:not(.no-list) li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.text-block ul:not(.no-list) li::before,
.text-block ul:not(.no-list) li::after {
  font-family: "Font Awesome 7 Duotone";
  font-weight: 900;
  letter-spacing: normal;
  display: block;
  position: absolute;
  vertical-align: middle;
  left: 0;
  top: 0;
}

.text-block ul:not(.no-list) li::before {
    color: var(--primary,inherit);
    opacity: var(--fa-primary-opacity,1);
    content: "\f058";
}

.text-block ul:not(.no-list) li::after {
  content: "\f058\f058";
  color: var(--primary, inherit);
  opacity: var(--fa-secondary-opacity, 0.2);
}

.text-block.lead ul:not(.no-list) li {
  padding-left: 2rem;
  margin-bottom: 1rem;
}

.text-block.lead ul:not(.no-list) li:before,
.text-block.lead ul:not(.no-list) li:after {
  font-size: var(--headline-6-size);
}

.dark-theme .text-block ul:not(.no-list) li::after {
  content: "\f058\f058";
  color: var(--chartreuse, inherit) !important;
  opacity: var(--fa-secondary-opacity, 1) !important;
}

.dark-theme .text-block ul:not(.no-list) li::before {
  color: var(--indigo, inherit) !important;
  opacity: var(--fa-primary-opacity, 1);
  content: "\f058";
}

.text-block ul.split-list li {
  display: inline-block;
  width: 49.5%;
}

ul.big-list li {
  line-height: var(--list-line-height);
}

/* Buttons */

.hero-btn-wrapper {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.btn-wrapper {
  display: inline-block;
}

/* Hubspot CTA buttons load an image version
 * before the HTML/CSS version which causes a
 * disorienting flash with slow connections.
*/
.btn-wrapper img {
  opacity: 0;
}

.btn,
.btn-wrapper a,
.btn-wrapper button,
.hs-button {
    display: inline-block;
    position: relative;
    z-index: 0;
    overflow: hidden;
    min-width: 100px;
    line-height: 1.5;
    border-style: solid;
    border-width: 2px;
    border-color: var(--primary);
    background-color: #fff;
    font-size: var(--button-text-size);
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    transition: all .4s ease-in-out;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: var(--button-border-radius) !important;
    transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1), border-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), background 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn:active,
.btn-wrapper a:active,
.btn-wrapper button:active,
.hs-button:active {
  transform: scale(0.96);
}

.btn:focus-visible,
.btn-wrapper a:focus-visible,
.btn-wrapper button:focus-visible,
.hs-button:focus-visible {
  outline: none;
}

.btn.btn-sm,
.btn-wrapper.btn-sm-wrapper:not(.btn-arrow-wrapper) a,
.btn-wrapper.btn-sm-wrapper:not(.btn-arrow-wrapper) button,
.hs-button.small {
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.25rem 1rem !important;
}

.btn.btn-lg,
.btn-wrapper.btn-lg-wrapper:not(.btn-arrow-wrapper) a,
.btn-wrapper.btn-lg-wrapper:not(.btn-arrow-wrapper) button,
.hs-button.large {
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    padding: 1rem 2rem !important;
}

.btn.btn-lg.has-shadow,
.btn-wrapper.btn-lg-wrapper.has-shadow a,
.btn-wrapper.btn-lg-wrapper.has-shadow button,
.hs-button.large.has-shadow {
    box-shadow: var(--shadow-lg)
}

.btn-link,
.btn-link-wrapper a,
.btn-link-wrapper button {
    font-size: 1rem;
    text-decoration: none;
    border-radius: 0 !important;
    border: 0;
    color: var(--primary) !important;
    padding-left: 0;
    padding-right: 0;
    min-width: auto;
    box-shadow: none !important;
    letter-spacing: -0.5px;
    min-width: 0;
    text-align: left !important;
    background-color: transparent !important;
    outline: none !important;
}

/* Large link buttons keep the large height but no side padding, so the text lines up with the content around it. */
.btn.btn-link.btn-lg,
.btn-wrapper.btn-lg-wrapper.btn-link-wrapper a,
.btn-wrapper.btn-lg-wrapper.btn-link-wrapper button {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dark-theme .btn-link,
.dark-theme .btn-link-wrapper a,
.dark-theme .btn-link-wrapper button {
    color: var(--chartreuse) !important;
}

.dark-theme .nav-pills .nav-link:not(.active) {
    color: var(--chartreuse);
}

.btn-link.active,
.btn-link-wrapper.active a,
.btn-link-wrapper.active button {
    color: var(--text-dark) !important;
    border-bottom: solid 2px var(--text-dark);
    cursor: default;
    outline: none !important;
}

.btn-arrow,
.btn-arrow-wrapper a,
.btn-arrow-wrapper button {
    font-size: var(--headline-6-size);
    text-decoration: none;
    color: var(--primary) !important;
    border: 0;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: auto;
    box-shadow: none !important;
    letter-spacing: -0.5px;
    min-width: 0;
    text-align: left !important;
    background-color: transparent !important;
    outline: none !important;
}

.btn-arrow:after,
.btn-arrow-wrapper a:after,
.btn-arrow-wrapper button:after {
    transition: 100ms cubic-bezier(0.215,0.61,0.355,1);
    transform: translateX(0px);
    font-family: 'Font Awesome 7 Pro' !important;
    font-weight: 700;
    content: '\f105';
    display: inline-flex;
    margin-left: 0.5rem;
    position: relative;
    top: 1px;
}

.btn-arrow:hover,
.btn-arrow-wrapper:hover a,
.btn-arrow-wrapper:hover button {
    color: var(--primary-hover) !important;
    outline: none !important;
}

.btn-arrow:hover a:after,
.btn-arrow-wrapper:hover a:after ,
.btn-arrow-wrapper:hover button:after {
    color: var(--primary-hover) !important;
    transition: 300ms cubic-bezier(0.215,0.61,0.355,1);
    transform: translateX(0px); !important;
    content: '\f061';
}

/* Primary button */

.btn-primary,
.btn-primary-wrapper a,
.btn-primary-wrapper button,
.hs-button.primary,
.dark-theme .card .btn-primary,
.dark-theme .card .btn-primary-wrapper a,
.dark-theme .card .btn-primary-wrapper button,
.dark-theme .card .hs-button.primary {
    color: var(--white) !important;
    background-color: var(--primary);
}

.btn-primary:is(:hover, :focus, :active),
.btn-primary-wrapper a:is(:hover, :focus, :active),
.btn-primary-wrapper button:is(:hover, :focus, :active),
.hs-button.primary:is(:hover, :focus, :active),
.dark-theme .card .btn-primary:is(:hover, :focus, :active),
.dark-theme .card .btn-primary-wrapper a:is(:hover, :focus, :active),
.dark-theme .card .btn-primary-wrapper button:is(:hover, :focus, :active),
.dark-theme .card .hs-button.primary:is(:hover, :focus, :active),
.btn-outline-primary:is(:hover, :focus, :active),
.btn-outline-primary-wrapper a:is(:hover, :focus, :active),
.btn-outline-primary-wrapper button:is(:hover, :focus, :active),
.hs-button.outline-primary:is(:hover, :focus, :active),
.dark-theme .card .btn-outline-primary:is(:hover, :focus, :active),
.dark-theme .card .btn-outline-primary-wrapper a:is(:hover, :focus, :active),
.dark-theme .card .btn-outline-primary-wrapper button:is(:hover, :focus, :active),
.dark-theme .card .hs-button.outline-primary:is(:hover, :focus, :active) {
    color: var(--chartreuse) !important;
    background-color: var(--gray-500) !important;
    border-color: var(--gray-500) !important;
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary-wrapper a:hover,
.btn-outline-primary-wrapper a:focus,
.btn-outline-primary-wrapper a:active,
.btn-outline-primary-wrapper button:hover,
.btn-outline-primary-wrapper button:focus,
.btn-outline-primary-wrapper button:active {
    color: var(--primary);
}

/* Primary button on dark background */

.dark-theme .btn-primary,
.dark-theme .btn-primary-wrapper a,
.dark-theme .btn-primary-wrapper button,
.dark-theme .hs-button.primary {
    color: var(--gray-500) !important;
    background-color: var(--chartreuse) !important;
    border-color: var(--chartreuse) !important;
}

.dark-theme .btn-outline-primary,
.dark-theme .btn-outline-primary-wrapper a,
.dark-theme .btn-outline-primary-wrapper button {
    border-color: var(--white) !important;
    color: var(--gray-500) !important;
}

.dark-theme .btn-primary:is(:hover, :focus, :active),
.dark-theme .btn-primary-wrapper a:is(:hover, :focus, :active),
.dark-theme .btn-primary-wrapper button:is(:hover, :focus, :active),
.dark-theme .hs-button.primary:is(:hover, :focus, :active),
.dark-theme .btn-outline-primary:is(:hover, :focus, :active),
.dark-theme .btn-outline-primary-wrapper a:is(:hover, :focus, :active),
.dark-theme .btn-outline-primary-wrapper button:is(:hover, :focus, :active),
.dark-theme .hs-button.outline-primary:is(:hover, :focus, :active) {
    color: var(--chartreuse) !important;
    background-color: var(--gray-500) !important;
    border-color: var(--gray-500) !important;
}

/* Secondary button */

.btn-secondary,
.btn-secondary-wrapper a,
.btn-secondary-wrapper button,
.hs-button.secondary,
.dark-theme .card .btn-secondary,
.dark-theme .card .btn-secondary-wrapper a,
.dark-theme .card .btn-secondary-wrapper button,
.dark-theme .card .hs-button.secondary {
    color: var(--primary) !important;
    background-color: var(--gray-100) !important;
    border-color: var(--gray-100) !important;
}

.btn-secondary:is(:hover, :focus, :active, .active),
.btn-secondary-wrapper a:is(:hover, :focus, :active),
.btn-secondary-wrapper button:is(:hover, :focus, :active),
.hs-button.secondary:is(:hover, :focus, :active),
.dark-theme .card .btn-secondary:is(:hover, :focus, :active),
.dark-theme .card .btn-secondary-wrapper a:is(:hover, :focus, :active),
.dark-theme .card .btn-secondary-wrapper button:is(:hover, :focus, :active),
.dark-theme .card .hs-button.secondary:is(:hover, :focus, :active),
.btn-outline-secondary:is(:hover, :focus, :active),
.btn-outline-secondary-wrapper a:is(:hover, :focus, :active),
.btn-outline-secondary-wrapper button:is(:hover, :focus, :active),
.hs-button.outline-secondary:is(:hover, :focus, :active),
.dark-theme .card .btn-outline-secondary:is(:hover, :focus, :active),
.dark-theme .card .btn-outline-secondary-wrapper a:is(:hover, :focus, :active),
.dark-theme .card .btn-outline-secondary-wrapper button:is(:hover, :focus, :active),
.dark-theme .card .hs-button.outline-secondary:is(:hover, :focus, :active) {
    color: var(--chartreuse) !important;
    background-color: var(--gray-500) !important;
    border-color: var(--gray-500) !important;
}


.dark-theme .btn-arrow,
.dark-theme .btn-arrow-wrapper a {
    color: var(--white) !important;
}

.dark-theme .btn-arrow:hover,
.dark-theme .btn-arrow:focus,
.dark-theme .btn-arrow:active,
.dark-theme .btn-arrow-wrapper a:hover,
.dark-theme .btn-arrow-wrapper a:focus, 
.dark-theme .btn-arrow-wrapper a:active {
    color: var(--text-light) !important;
}

.btn-transparent {
    border: 0 !important;
    outline: 0 !important;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: inherit;
}

/* Dropdowns */

.dropdown-header {
  color: var(--text-muted);
}

.dropdown-menu {
    border: 0;
}

@media (min-width: 1400px) {
  .dropdown-menu {
    padding: 0.5rem;
    margin: 0 -0.5rem;
    border-radius: var(--dropdown-border-radius);
  }
}

.dropdown-menu .dropdown-divider {
    margin: 0.5rem -0.5rem;
}

.dropdown-menu .dropdown-item {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: var(--text-dark);
    border-radius: 0.5rem;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--bg-light) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

@media (min-width: 1399px) {
    .dropdown-menu {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }
    .dropdown-menu .dropdown-item {
        font-size: 1rem;
    }
}

/* Mega Dropdown */
/* This was custom created by Giftogram */

@media (min-width: 1400px) {
  .dropdown-menu.mega-dropdown {
    padding: 1rem;
    margin: 0 -1rem;
  }
  
  .dropdown-menu.mega-dropdown .dropdown-item .icon {
    font-size: 1rem;
    max-width: 1rem;
    min-width: 1rem;
  }
}

/* Navbar */

.navbar>.container-fluid {
    max-width: 98%;
}

.dark-theme .navbar-text.border-start {
    border-color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1rem;
    margin-right: 1.5rem;
}

.navbar-brand img {
    height: 2rem !important; 
}

.navbar:not(.dark-theme) .navbar-brand .logo-dark,
.navbar-wrapper.reveal-navbar .navbar-brand .logo-dark {
    display: none;
}

.navbar-wrapper:not(.reveal-navbar) .dark-theme .navbar-brand .logo-light {
    display: none;
}

nav.sticky .reveal-scrolling,
.navbar-wrapper.sticky .reveal-scrolling {
    display: none;
}

nav.sticky.reveal-navbar .reveal-scrolling,
.navbar-wrapper.sticky.reveal-navbar .reveal-scrolling {
    display: inline;
}

.navbar-nav .btn-wrapper a:active {

}
  
.navbar-wrapper.scrolling:not(.reveal-navbar) .dropdown-menu {
  display: none;
}

.navbar-wrapper .global-alert {
  font-size: 0.875rem;
}

.navbar-nav .nav-link,
.navbar-nav .btn-wrapper a,
.navbar-nav .btn {
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

.navbar-text {
  font-size: 0.875rem;
}

.navbar-expand-xxl .navbar-nav .nav-link {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* Matches the legacy navbar, whose markup added a space before the caret. */
.navbar-nav .dropdown-toggle::after {
  margin-left: 0.5em;
}

nav.sticky,
.navbar-wrapper.sticky {
  transition: .4s;
}
nav.sticky.scrolling,
.navbar-wrapper.sticky.scrolling {
  transform: translateY(-100%);
  transition: .4s;
}
nav.sticky.reveal-navbar,
.navbar-wrapper.sticky.reveal-navbar {
  transform: translateY(0%);
  box-shadow: 0 12px 34px -11px rgba(65, 62, 101, 0.1);
  z-index: 1000;
}


/* NAVBAR - MINIMAL: a .container-fluid bar while the mobile menu is in use, so the mobile styles below apply as in
   NAVBAR - MAIN, and Bootstrap's .container widths from 1200px, where the bar lines up with the page content. */
@media (min-width: 1200px) {
  .navbar-minimal > .container-fluid {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .navbar-minimal > .container-fluid {
    max-width: 1320px;
  }
}

/* NAVBAR - MAIN: the navbar scrolls with the page; on scroll up, module.js pins the bar
   (not the alert) to the top and slides it in. */
.navbar-main-pinned {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  transition: transform .3s ease;
  z-index: 1030;
}

.navbar-main-pinned.navbar-main-shown {
  transform: translateY(0);
}

.navbar-main-pinned.navbar-main-instant {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .navbar-main-pinned {
    transition: none;
  }
}

/* NAVBAR - MAIN floating primary action: slides up from the bottom of the screen while the
   bar is out of view, on the same motion as the dropdown panels. Hidden from clicks and
   focus while it's down. */
.navbar-main-floating-cta {
  bottom: 1.5rem;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, calc(100% + 1.5rem));
  transition: transform 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), opacity 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), visibility 0s linear 350ms;
  visibility: hidden;
  z-index: 1020;
}

.navbar-main-floating-cta.navbar-main-floating-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: transform 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), opacity 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), visibility 0s;
  visibility: visible;
}

/* Phones: keep the floating action clear of the Intercom launcher and at its
   natural button width, aligned with the page gutter. */
@media (max-width: 575px) {
  .navbar-main-floating-cta {
    bottom: 1rem;
    left: 1rem;
    right: auto;
    transform: translateY(calc(100% + 1rem));
  }

  .navbar-main-floating-cta.navbar-main-floating-shown {
    transform: translateY(0);
  }

  .navbar-main-floating-cta .btn-wrapper,
  .navbar-main-floating-cta .cta_button {
    display: inline-block;
    text-align: center;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-main-floating-cta,
  .navbar-main-floating-cta.navbar-main-floating-shown {
    transition: none;
  }
}

/* NAVBAR - MAIN dropdowns (like wise.com, but opened on click): column headings sit on a
   divider, and links are an icon circle plus a bold label. */
.navbar-main .mega-dropdown .dropdown-header {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.5rem; /* size and weight come from the small and fw-bold classes */
  padding: 0 0 0.75rem;
}

.navbar-main .mega-dropdown .navbar-main-menu-link {
  font-size: 1rem;
  margin: 0 -0.75rem;
  padding: 0.5rem 0.75rem;
  white-space: normal;
  width: calc(100% + 1.5rem);
}

.navbar-main-menu-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.375rem; /* Tops of full-height icons line up with the label's capitals. */
}

.navbar-main-feature {
  transition: background-color .2s ease;
}

.navbar-main-feature:hover {
  background-color: var(--bg-light);
}

/* The whole card is the link. Bootstrap's .stretched-link uses ::after, which the arrow link already uses for its
   chevron, and .btn-wrapper links are position: relative, so the link is unpositioned here and a ::before covers
   the card instead. */
.navbar-main-feature .stretched-link {
  position: static;
  transform: none !important;
}

.navbar-main-feature .stretched-link::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* The navbar shrinks its links to .875rem; the card's arrow link keeps the regular size. */
.navbar-main-feature .btn-arrow-wrapper a {
  font-size: var(--headline-6-size) !important;
}

/* Full-bleed image across the top of the card, cropped to one shape (like wise.com). */
.navbar-main-feature-image {
  aspect-ratio: 5 / 3;
  object-fit: cover;
  width: 100%;
}

.navbar-main-backdrop {
  display: none;
}

/* Below large screens the menu is one indigo layer over the whole screen, bar included, that wipes in from the
   right edge (like squarespace.com). It never moves: a clip-path reveals it, so its own white logo and close button,
   which module.js lines up exactly over the bar's logo and menu button, swap in as the edge passes. The close
   button's two lines morph into an X. module.js toggles .navbar-main-drawer-open on the navbar wrapper and sets the
   layer's top (the bar's top edge) and the positions of its logo and button. The bar can be pinned with a
   transform, which would trap the fixed layer inside it, so the transform is dropped while the menu is open. */
.navbar-main-burger {
  display: block;
  height: 14px;
  position: relative;
  width: 22px;
}

.navbar-main-burger i {
  background-color: currentColor;
  border-radius: 1px;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

.navbar-main-burger i:first-child {
  top: 2px;
}

.navbar-main-burger i:last-child {
  top: 10px;
}

/* The close button's lines: open, they meet in the middle and turn into an X; close, they straighten and part. */
.navbar-main-drawer-close .navbar-main-burger i {
  transition: top 175ms ease 175ms, transform 175ms ease;
}

.navbar-main-drawer-open .navbar-main-drawer-close .navbar-main-burger i {
  top: 6px;
  transition: top 175ms ease, transform 175ms ease 175ms;
}

.navbar-main-drawer-open .navbar-main-drawer-close .navbar-main-burger i:first-child {
  transform: rotate(45deg);
}

.navbar-main-drawer-open .navbar-main-drawer-close .navbar-main-burger i:last-child {
  transform: rotate(-45deg);
}

.navbar-main-drawer-head {
  display: none;
}

@media (max-width: 1199.98px) {
  .navbar-main .navbar-collapse {
    bottom: 0;
    clip-path: inset(0 0 0 100%);
    display: block !important; /* Bootstrap's .collapse would hide it; the layer hides itself with a clip. */
    height: auto !important;
    left: 0;
    margin-top: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--navbar-main-drawer-bar-height, 0px) + 1.5rem) 1.5rem 0;
    position: fixed;
    right: 0;
    top: var(--navbar-main-drawer-top, 0);
    visibility: hidden;
    z-index: 1045;
  }

  .navbar-main-drawer-open .navbar-main .navbar-collapse {
    clip-path: inset(0);
    visibility: visible;
  }

  /* Animate only while the menu is being opened or closed (module.js adds the class for the length of the
     motion), so crossing the 1200px breakpoint while resizing never plays a wipe. */
  .navbar-main-drawer-motion .navbar-main .navbar-collapse {
    transition: clip-path 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), visibility 0s linear 350ms;
  }

  .navbar-main-drawer-motion.navbar-main-drawer-open .navbar-main .navbar-collapse {
    transition: clip-path 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), visibility 0s;
  }

  /* Held through the closing wipe too (.navbar-main-drawer-motion), so the layer keeps its full size until it's
     gone: a pinned bar's transform would otherwise squeeze the fixed layer into the bar. */
  .navbar-main-drawer-open .navbar-main-pinned,
  .navbar-main-drawer-motion .navbar-main-pinned {
    transform: none;
    transition: none;
  }

  /* Above everything while open or animating, including chat launchers like Intercom's (z-index ~2147483000). */
  .navbar-main-drawer-open .navbar-main,
  .navbar-main-drawer-motion .navbar-main {
    z-index: 2147483647;
  }

  /* No top alert at the mobile-menu breakpoints. */
  .navbar-wrapper[data-navbar-main] .global-alert {
    display: none;
  }

  /* The menu items and buttons wait for the indigo to fill the screen, then fade up (like squarespace.com). On
     close they fade out first, while the wipe is still slow to start. */
  .navbar-main .navbar-main-drawer-body {
    opacity: 0;
    transform: translateY(8px);
  }

  .navbar-main-drawer-open .navbar-main .navbar-main-drawer-body {
    opacity: 1;
    transform: none;
  }

  .navbar-main-drawer-motion .navbar-main .navbar-main-drawer-body {
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .navbar-main-drawer-motion.navbar-main-drawer-open .navbar-main .navbar-main-drawer-body {
    transition: opacity 250ms ease 350ms, transform 250ms ease 350ms;
  }

  /* The layer's own logo and close button, over the bar's (module.js sets the positions). */
  .navbar-main-drawer-head {
    display: block;
  }

  .navbar-main-drawer-brand {
    left: var(--navbar-main-drawer-brand-x, 1rem);
    position: absolute;
    top: var(--navbar-main-drawer-brand-y, 1rem);
    width: var(--navbar-main-drawer-brand-w, auto);
  }

  .navbar-main-drawer-brand img {
    display: block;
    height: auto;
    width: 100%;
  }

  /* No focus ring on the menu and close buttons: the close button is focused on open, and Safari draws a ring
     around it even after a tap. */
  .navbar-main .navbar-toggler:focus,
  .navbar-main .navbar-toggler:focus-visible,
  .navbar-main-drawer-close:focus,
  .navbar-main-drawer-close:focus-visible {
    box-shadow: none;
    outline: 0;
  }

  .navbar-main-drawer-close {
    align-items: center;
    background: none;
    border: 0;
    color: var(--white);
    display: flex;
    height: var(--navbar-main-drawer-close-h, 2.5rem);
    justify-content: center;
    left: var(--navbar-main-drawer-close-x, auto);
    padding: 0;
    position: absolute;
    top: var(--navbar-main-drawer-close-y, 1rem);
    width: var(--navbar-main-drawer-close-w, 2.5rem);
  }

  /* The bar: logo on the left, menu button on the right (Sign In lives in the drawer). */
  .navbar.navbar-main:not(.navbar-no-menu) .container-fluid .navbar-brand {
    order: 1;
  }

  .navbar.navbar-main:not(.navbar-no-menu) .container-fluid .navbar-toggler {
    margin-left: auto;
    order: 2;
  }

  /* Indigo drawer (module.js adds bg-indigo dark-theme below 1200px). The site's switchable-text-color rules turn
     the links white; these cover what they don't: muted text, the dropdown panels, hovers, dividers, the close. */
  .navbar-main .navbar-collapse.dark-theme .text-muted.switchable-text-color {
    color: var(--text-light) !important;
  }

  .navbar-main .navbar-collapse.dark-theme .dropdown-menu {
    background-color: transparent;
  }

  .navbar-main .navbar-collapse.dark-theme .dropdown-item:hover,
  .navbar-main .navbar-collapse.dark-theme .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .08) !important;
  }

  .navbar-main .navbar-collapse.dark-theme .mega-dropdown .dropdown-header {
    border-bottom-color: rgba(255, 255, 255, .2);
  }

  .navbar-main .navbar-collapse.dark-theme .navbar-nav .nav-link.switchable-text-color {
    color: var(--white) !important;
  }

  /* The drawer lists just the link labels: no icons or helper descriptions. */
  .navbar-main .navbar-main-menu-icon,
  .navbar-main .navbar-main-menu-desc {
    display: none !important;
  }

  /* Book a Demo and Get Started are larger, full-width block buttons pinned to the bottom of the menu (like
     squarespace.com): when the menu is short they sit at the bottom of the screen, and when a dropdown makes it
     taller the links scroll under them. Sign In stays with the links. The body fills the menu's height so the
     buttons can sit at its bottom; the actions list dissolves so Sign In and the buttons are separate items. */
  .navbar-main .navbar-main-drawer-body {
    min-height: 100%;
  }

  .navbar-main .navbar-main-actions {
    display: contents !important;
  }

  .navbar-main .navbar-main-cta {
    align-self: stretch;
    background-color: var(--indigo); /* covers the links scrolling under it */
    bottom: 0;
    margin-top: auto;
    padding: 1rem 0 1.5rem;
    position: sticky;
    z-index: 1;
  }

  .navbar-main .navbar-main-cta .btn-wrapper a {
    font-size: 1rem !important;
    line-height: 1;
    padding: 1rem 2rem !important;
  }

  .navbar-main .navbar-main-actions .btn-wrapper,
  .navbar-main .navbar-main-actions .btn-wrapper a {
    display: block;
    text-align: center;
    width: 100%;
  }

  /* HubSpot injects a.cta_button { box-sizing: content-box !important }, which pushes the padding outside the
     100% width; this more specific rule keeps it inside. */
  .navbar-main .navbar-main-actions .btn-wrapper a.cta_button {
    box-sizing: border-box !important;
  }

  /* Like squarespace.com: big top-level links, smaller links inside each dropdown. */
  .navbar-main .navbar-collapse .navbar-nav > .nav-item > .nav-link {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }

  .navbar-main .navbar-collapse .navbar-nav > .nav-item > .dropdown-toggle::after {
    font-size: .625em;
    margin-left: .5rem;
  }

  .navbar-main .navbar-collapse .mega-dropdown .navbar-main-menu-link {
    font-size: .9375rem;
  }

  .navbar-main .navbar-collapse .mega-dropdown .navbar-main-menu-link .fw-bold {
    font-weight: 500 !important;
  }

  /* The open dropdown already shows which item is active, so no focus ring on it after a tap (keyboard focus on
     closed items keeps its ring), and the section headings drop the desktop panels' divider line. */
  .navbar-main .navbar-collapse .dropdown-toggle.show:focus {
    box-shadow: none;
    outline: 0;
  }

  .navbar-main .navbar-collapse .mega-dropdown .dropdown-header {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* Line the menu links up with the logo and buttons. */
  .navbar-main .navbar-collapse .navbar-nav > .nav-item > .nav-link {
    padding-left: 0;
  }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .navbar-main-drawer-motion .navbar-main .navbar-collapse,
  .navbar-main-drawer-motion.navbar-main-drawer-open .navbar-main .navbar-collapse,
  .navbar-main-drawer-close .navbar-main-burger i,
  .navbar-main-drawer-open .navbar-main-drawer-close .navbar-main-burger i,
  .navbar-main-drawer-motion .navbar-main .navbar-main-drawer-body,
  .navbar-main-drawer-motion.navbar-main-drawer-open .navbar-main .navbar-main-drawer-body {
    transition: none;
  }
}

/* Large screens: each dropdown is a full-width panel under the bar, and the page is dimmed.
   Motion matches wise.com: the panel unrolls from the bar over 350ms on Wise's easing curve
   (and rolls back up on close), and the dimmer fades on the same timing. Switching straight
   to another dropdown keeps the panel open and slides the new content in 10px sideways
   (module.js sets the direction class). */
/* NAVBAR - MAIN: a FontAwesome angle-down (\f107) in place of Bootstrap's border triangle. The open dropdown's
   caret flips to point up, on the panel's timing. */
.navbar-main .navbar-nav .dropdown-toggle::after {
  border: 0;
  content: "\f107";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  line-height: 1;
  transition: transform 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95);
  vertical-align: 0;
}

.navbar-main .navbar-nav .dropdown-toggle.show::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .navbar-main .navbar-nav .dropdown-toggle::after {
    transition: none;
  }
}

@media (min-width: 1200px) {
  .navbar-main {
    --navbar-main-motion: 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95);
    z-index: 1030; /* Above the backdrop, also while a panel rolls up. */
  }

  .navbar-main .nav-item.dropdown {
    position: static;
  }

  /* Line the panel up with the bar's own container, so the card starts under the logo. */
  .navbar-main-panel-container {
    max-width: 98%;
  }

  /* Cap the panel's content width on very wide screens so the columns don't stretch, keeping it left-aligned
     under the logo. Separate from container-fluid, which still lines the panel up with the bar. */
  .navbar-main-panel-inner {
    max-width: 1600px;
  }

  /* The alert above the bar stays undimmed, like the bar itself. */
  .navbar-wrapper[data-navbar-main] .global-alert {
    position: relative;
    z-index: 1030;
  }

  /* Always rendered (not display: none) so it can animate closed; hidden from clicks,
     focus, and assistive tech until it opens. */
  .navbar-main .dropdown-menu.mega-dropdown {
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    clip-path: inset(0 0 100% 0);
    display: block;
    left: 0;
    margin: 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 1.5rem 0 2rem;
    pointer-events: none;
    right: 0;
    top: 100%;
    transition: clip-path var(--navbar-main-motion), visibility 0s linear 350ms;
    visibility: hidden;
  }

  .navbar-main .dropdown-menu.mega-dropdown.show {
    clip-path: inset(0);
    pointer-events: auto;
    transition: clip-path var(--navbar-main-motion), visibility 0s;
    visibility: visible;
  }

  .navbar-main-switching .navbar-main .dropdown-menu.mega-dropdown {
    transition: none;
  }

  .navbar-main-switching-next .navbar-main .dropdown-menu.mega-dropdown.show > * {
    animation: navbar-main-enter-next var(--navbar-main-motion);
  }

  .navbar-main-switching-prev .navbar-main .dropdown-menu.mega-dropdown.show > * {
    animation: navbar-main-enter-prev var(--navbar-main-motion);
  }

  /* The open panel already marks the active item, so skip the browser focus ring Chrome
     draws on the toggle after a click. Keyboard focus on closed toggles keeps its ring. */
  .navbar-main .navbar-nav .dropdown-toggle.show:focus {
    outline: 0;
  }

  .navbar-main-backdrop {
    background-color: rgba(0, 0, 0, .4);
    display: block;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), visibility 0s linear 350ms;
    visibility: hidden;
    z-index: 1025;
  }

  .navbar-main-menu-open .navbar-main-backdrop {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 350ms cubic-bezier(0.8, 0.05, 0.2, 0.95), visibility 0s;
    visibility: visible;
  }
}

/* Wise's panel content keyframes: the slide finishes at 66% and the fade runs to the end. */
@keyframes navbar-main-enter-next {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  66% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes navbar-main-enter-prev {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  66% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-main .dropdown-menu.mega-dropdown,
  .navbar-main .dropdown-menu.mega-dropdown.show,
  .navbar-main-backdrop,
  .navbar-main-menu-open .navbar-main-backdrop {
    transition: none;
  }

  .navbar-main .dropdown-menu.mega-dropdown.show > * {
    animation: none !important;
  }
}

.navbar-wrapper.sticky.navbar-hidden .navbar {
    background-color: var(--white) !important;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link-wrapper a, 
.navbar-nav .nav-link-wrapper button {
    display: block;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border: transparent solid 2px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.navbar:not(.dark-theme) .navbar-nav .nav-link,
.navbar:not(.dark-theme) .navbar-nav .nav-link *,
.navbar:not(.dark-theme) .navbar-nav .nav-link-wrapper a,
.navbar:not(.dark-theme) .navbar-nav .nav-link-wrapper button,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link-wrapper a,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link-wrapper button {
    color: var(--text-dark);
}

.navbar:not(.dark-theme) .navbar-nav .nav-link:hover,
.navbar:not(.dark-theme) .navbar-nav .nav-link:focus,
.navbar:not(.dark-theme) .navbar-nav .nav-link:hover *,
.navbar:not(.dark-theme) .navbar-nav .nav-link:focus *,
.navbar:not(.dark-theme) .navbar-nav .nav-link-wrapper a:hover,
.navbar:not(.dark-theme) .navbar-nav .nav-link-wrapper a:focus,
.navbar:not(.dark-theme) .navbar-nav .nav-link-wrapper button:hover,
.navbar:not(.dark-theme) .navbar-nav .nav-link-wrapper button:focus,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link:hover,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link:focus,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link-wrapper a:hover,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link-wrapper a:focus,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link-wrapper button:hover,
.navbar-wrapper.reveal-navbar .navbar-nav .nav-link-wrapper button:focus {
    color: var(--primary);
}

.nav-link.active {
    color: var(--primary) !important;
}

.nav-link-wrapper {
  display: inline-block;
}

.dark-theme .navbar-nav .nav-link,
.dark-theme .navbar-nav .nav-link-wrapper a,
.dark-theme .navbar-nav .nav-link-wrapper button,
.dark-theme .navbar-text {
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.4px;
}

.dark-theme .navbar-nav .nav-link:hover,
.dark-theme .navbar-nav .nav-link:focus,
.dark-theme .navbar-nav .nav-link:active,
.dark-theme .navbar-nav .nav-link.active {
    color: rgba(255, 255, 255, 1);
}

.navbar-no-collapse .navbar-nav .nav-link {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

.navbar-wrapper.sticky.navbar-hidden .global-alert {
    display: none;
}


.navbar-toggler,
.navbar-sign-in {
    font-size: 1.325rem;
    padding: 0.5rem;
    border: 0;
    color: var(--text-body) !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(65, 62, 101, 0.1);
}

.navbar:not(.dark-theme) .navbar-toggler {
    color: var(--text-body);
}

.dark-theme .navbar-toggler {
    color: var(--white);
}

.navbar-sign-in {
    display: none;
}

.navbar-text {
    color: var(--text-dark);
    font-weight: 600;
}

@media (max-width: 1199.98px) {
  .navbar:not(.navbar-no-menu) .container-fluid {
    display: inline-flex;
    position: relative;
  }

  .navbar:not(.navbar-no-menu) .container-fluid .navbar-brand {
    order: 2;
  }

  .navbar:not(.navbar-no-menu) .container-fluid .navbar-toggler {
    order: 1;
  }

  .navbar:not(.navbar-no-menu) .container-fluid .navbar-sign-in {
    display: block;
    order: 3;
  }
  
  .navbar:not(.navbar-no-menu) .container-fluid .navbar-collapse {
    order: 4;
  }
}

/* Helpers */

/* Bootstrap 5.3's object-fit utility (5.2 doesn't have it); pairs with .ratio to crop an image to its box. */
.object-fit-cover {
    object-fit: cover !important;
}

@media (min-width: 768px) {
    .pt-md-6 {
        padding-top: 6rem !important;
    }
}

@media (min-width: 992px) {
    .pt-lg-6 {
        padding-top: 6rem !important;
    }
}

@media (min-width: 1200px) {
    .pt-xl-6 {
        padding-top: 6rem !important;
    }
}

@media (min-width: 768px) {
    .pb-md-6 {
        padding-bottom: 6rem !important;
    }
}

@media (min-width: 992px) {
    .pb-lg-6 {
        padding-bottom: 6rem !important;
    }
}

@media (min-width: 1200px) {
    .pb-xl-6 {
        padding-bottom: 6rem !important;
    }
}

.mb-6 {
    margin-bottom: 6rem !important;
}

.pb-6 {
    padding-bottom: 6rem !important;
}

@media (min-width: 768px) {
    .mb-md-6 {
        margin-bottom: 6rem !important;
    }
}

@media (min-width: 992px) {
    .mb-lg-6 {
        margin-bottom: 6rem !important;
    }
}

@media (min-width: 1200px) {
    .mb-xl-6 {
        margin-bottom: 6rem !important;
    }
}

/* Headlines */

.headline p:last-child {
  margin-bottom: 0;
}

.headline.has-divider h1,
.headline.has-divider h2 {
  display: inline-block;
  &::after {
    content: '';
    display: block;
  }
}

/* Sections */

.section {
  scroll-margin-top: var(--nav-offset);
}

.section,
.section.mega-section {
    padding: var(--section-padding-sm) 0;
    position: relative;
}

.section.minor-section {
    padding: var(--section-padding-minor) 0;
    position: relative;
}

.section.blog-section {
    padding: var(--section-padding-sm) 0 var(--section-padding-sm);
}

.section.hero-section,
.section.hero-section.headline-section {
    padding-top: var(--section-padding-minor-sm) !important;
}

.section.headline-section {
    padding: var(--section-padding-sm) 0 var(--section-padding-sm);
    position: relative;
}

@media (min-width: 1199px) {
    .section {
        padding: var(--section-padding) 0;
    }
    .section.hero-section,
    .section.hero-section.headline-section {
      padding-top: var(--section-padding-minor) !important;
    }
    .section.mega-section {
      padding: var(--section-padding-major) 0;
    }
    .section.headline-section {
      padding: var(--section-padding) 0 var(--section-padding-minor);
    }
}

.section.bg-transparent + .section.bg-transparent:not(.allow-padding),
.section.bg-white + .section.bg-white:not(.allow-padding),
.section.bg-black + .section.bg-black:not(.allow-padding),
.section.bg-light + .section.bg-light:not(.allow-padding),
.section.bg-violet + .section.bg-violet:not(.allow-padding),
.section.bg-indigo + .section.bg-indigo:not(.allow-padding),
.section.bg-footer + .section.bg-footer:not(.allow-padding),
.section:not([class*='bg-']) + .section:not([class*='bg-']) {
    padding-top: 0 !important;
}

section.shaded-box {
    padding: 1.25rem 2rem 2.25rem;
    border-radius: 0.75rem;
}

.bg-white section.shaded-box {
    background-color: var(--bg-light);
}

.bg-light section.shaded-box {
    background-color: var(--bg-white);
}

.bg-white section.shaded-box .form-select.
.dark-theme section.shaded-box .form-select {
  background-color: var(--bg-white);
}

.dark-theme section.shaded-box {
    background-color: rgba(0,0,0,0.2);
}

.bg-black.dark-theme section.shaded-box {
    background-color: rgba(10,10,10,1);
}

.section.slanted-section {
  position: relative;
  z-index: 1;
  
  &:before,
  &:after {
    background: inherit;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
  }

  &:before {
    top: 0;
    transform: skewY(1.25deg);
    transform-origin: 100% 0;
  }
  
  &:after {
    bottom: 0;
    transform: skewY(-1.25deg);
    transform-origin: 100%;
  }
}

.section.slanted-section.slanted-section-reverse {
  &:before {
    top: 0;
    transform: skewY(-1.25deg);
    transform-origin: 0;
  }
  
  &:after {
    bottom: 0;
    transform: skewY(1.25deg);
    transform-origin: 0;
  }
}

.border-seperator {
    border-top: solid 1px var(--border-color);
}

/* Card */

.card {
    border-color: transparent;
    border-radius: 1rem !important;
    overflow: hidden;
}

.card.card-transparent {
    border-color: transparent;
    background-color: transparent;
    border-radius: 0px;
}

.use-case-card:hover {
    cursor: pointer;
}

.use-case-card:focus,
.use-case-card:active,
[data-use-case-modal-card]:focus,
[data-use-case-modal-card]:active {
    outline: none;
}

.use-case-card .use-case-card-image {
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.use-case-card .use-case-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 300ms ease;
    will-change: transform;
}

.use-case-card:hover .use-case-card-image::before {
    transform: scale(1.06);
}

.use-case-card .use-case-card-action {
    position: relative;
    min-height: 2rem;
}

.use-case-card .use-case-card-action-icon,
.use-case-card .use-case-card-hover-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}

.use-case-card .use-case-card-action-icon {
    opacity: 1;
    transform: translateY(0);
}

.use-case-card .use-case-card-hover-icon {
    opacity: 0;
    transform: translateY(0.25rem);
}

.use-case-card:hover .use-case-card-action-icon {
    opacity: 0;
    transform: translateY(-0.25rem);
}

.use-case-card:hover .use-case-card-hover-icon {
    opacity: 1;
    transform: translateY(0);
}

.bg-white .card:not(.card-transparent):not(.shadow) {
  background-color: var(--bg-white);
}

.card .card-body {
    padding: 2.375rem;
}

@media (max-width: 1199px) {
  .card .card-body {
    padding: 1.5rem;
  }
}

.card.card-transparent {
    border-radius: 0px !important;
}

.card.card-transparent .card-body {
    padding: 0 1.875rem 0 0;
}

.card .card-body .card-image.rounded-image {
    border-radius: 0.625rem;
}

.card .card-body .card-image.rounded-image-lg {
    border-radius: 0.75rem;
}

.card .card-body p:only-child,
.card .card-body p:last-child {
  margin-bottom: 0;
}

.card .card-title {
    font-size: var(--headline-6-size);
}

/* Form */

.form-control-lg,
.form-select-lg {
    font-size: var(--input-lg-font-size);
    padding-top: var(--input-lg-vertical-padding);
    padding-bottom: var(--input-lg-vertical-padding);
}

.form-select:disabled,
.form-control:disabled,
.form-wrapper input:disabled:not([type="submit"]),
.form-wrapper select:disabled,
.form-wrapper textarea:disabled {
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

.form-wrapper.form-align-left.align-items-center > span {
    display: inline-block;
}

.form-wrapper.form-align-left.align-items-center input.hs-input {
    min-width: 300px;
}

.form-wrapper.form-align-left form {
    display: flex;
}

.form-wrapper.form-align-left form div:first-child {
    flex: 1;
}

@media (max-width: 767px) {
  .form-wrapper.form-align-left form {
    display: block;
  }
  
  .form-wrapper.form-align-left form .input input.hs-input {
    margin-bottom: 1rem !important;
  } 
}

.form-wrapper.form-align-left form input {
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
    font-size: var(--body-text-size);
    line-height: 1;
}

.form-wrapper form input[type="submit"] {
    font-size: var(--button-text-size);
    min-width: 140px;
}

.form-wrapper.form-align-left form input[type="submit"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-left: 1rem;
    margin-top: 2rem;
}

.form-wrapper.form-align-left form .input,
.form-wrapper.form-align-left form .input input {
    margin-bottom: 0 !important;
    line-height: 2.25rem;
}

.form-wrapper label {
    display: block;
    margin-bottom: .5rem !important;
}

.dark-theme .form-wrapper label {
    color: #fff;
}

.dark-theme .form-wrapper .submitted-message,
.dark-theme .form-wrapper .hs-error-msg,
.dark-theme .form-wrapper .hs-error-msgs,
.dark-theme .form-wrapper .inputs-list label {
    color: var(--primary-over-dark) !important;
}

.form-wrapper label .hs-form-required {
    font-size: 10px;
    position: relative;
    top: -5px;
}

.form-wrapper input:not([type="submit"]):not([type="checkbox"]),
.form-wrapper select,
.form-wrapper textarea {
    display: block;
    width: 100%;
    padding: 10px .75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dark);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-wrapper select {
    display: block;
    width: 100%;
    padding: 10px 2.25rem 10px 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-wrapper input:focus,
.form-wrapper select:focus,
.form-wrapper textarea:focus {
    color: var(--text-dark);
    background-color: var(--white);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25);
}

.form-wrapper textarea {
    min-height: 200px;
}

.form-wrapper .hs-error-msgs {
    list-style: none;
    padding-left: 0;
    color: #dc3545;
}

.form-wrapper .hs-error-msg {
    margin-top: 0.5rem;
}

/* Inputs & selects */

.form-control {
  background-color: var(--white);
}

.form-select {
  background-color: var(--input-bg);
}

.bg-light .form-control,
.bg-light .form-select {
  background-color: var(--white);
}

/* Search input */

.input-search-group::before {
  content: "\f002";
  font-family: "Font Awesome 7 Pro";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-color);
  z-index: 100;
}

.input-search-group .form-control-search-input {
  padding-left: 2.25rem;
  padding-right: 2.5rem;
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.input-search-group .form-control-clear-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  z-index: 100;
}

.input-search-group {
  position: relative;
  width: 100%;
}

@media (min-width: 992px) {
  .input-search-group {
    width: clamp(280px, 55%, 460px);
    transition: width 220ms ease;
    will-change: width;
  }
  .input-search-group:focus-within {
    width: 100%;
  }
}

.form-control-search-input {
  flex: 1 1 auto;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .input-search-group {
    transition: none;
  }
}

/* Carousel */

body .flickity-viewport {
    overflow-x: clip;
    overflow-y: visible;
}

body .flickity-page-dots {
    position: relative;
    bottom: 0;
}

body .flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    background-color: var(--white);
}

.testimonial-carousel .card-body {
    padding: 2.75rem 3rem;
    text-align: left;
}

@media (max-width: 1199px) {
  .testimonial-carousel .card-body {
    padding: 1.5rem;
  }
}

.testimonial-carousel .flickity-viewport {
    margin-bottom: 2rem !important;
}

/* Until Flickity starts, show only the first testimonial instead of a stack. */
.testimonial-carousel:not(.flickity-enabled) .carousel-cell:not(:first-child) {
    display: none;
}

.carousel-btn {
    width: 2.875rem;
    height: 2.875rem;
    border: solid 1px var(--border-color);
    border-radius: 50%;
    color: var(--primary);
    text-align: center;
    vertical-align: middle;
    min-width: 0;
    padding: 0;
    line-height: 2.875rem;
}

.carousel-btn:hover,
.carousel-btn:focus,
.carousel-btn:active {
    border-color: var(--primary-hover);
    color: var(--primary-hover);
    background: #fff !important;
}

.dark-theme .carousel-btn {
    color: var(--white);
    border-color: rgba(255,255,255,0.4);
}

.dark-theme .carousel-btn:hover,
.dark-theme .carousel-btn:focus,
.dark-theme .carousel-btn:active {
    border-color: var(--white);
    color: var(--white);
}

.carousel-btn.carousel-btn-white {
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
}

.carousel-control-next,
.carousel-control-prev {
  width: auto;
  height: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.carousel-control-prev {
  left: 2rem;
}

.carousel-control-next {
  right: 2rem;
}

@media (max-width: 575.98px) {

  .carousel-control-prev {
    left: 1rem;
  }

  .carousel-control-next {
    right: 1rem;
  }

  .carousel-btn {
      width: 2rem;
      height: 2rem;
  }

}

/* Carousel indicators */

.carousel-indicators [data-bs-target],
.carousel-indicators button {
  box-sizing: border-box;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background-clip: border-box !important;
  padding: 0;
  margin: 0 6px;
  cursor: pointer;
  opacity: 1;
  transition: width .25s ease, height .25s ease, border-radius .25s ease, opacity .25s ease, background-color .25s ease;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.carousel-indicators [data-bs-target].active,
.carousel-indicators button.active {
  width: 36px;
  height: 10px;
  border-radius: 9999px;
  background-color: #B3B1B0;
  position: relative;
  overflow: hidden;
}

.carousel-indicators.autoplay [data-bs-target].active::after,
.carousel-indicators.autoplay button.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: var(--primary);
  border-radius: inherit;
  animation: indicatorFill 7.25s linear forwards;
}

.carousel-indicators:not(.autoplay) [data-bs-target].active,
.carousel-indicators:not(.autoplay) button.active {
  background-color: var(--primary);
}

@keyframes indicatorFill {
  from { width: 0%; }
  to { width: 100%; }
}

.carousel-indicators.carousel-indicators-dark [data-bs-target],
.carousel-indicators.carousel-indicators-dark button {
  background-color: #B3B1B0;
}

.carousel-indicators.carousel-indicators-dark.autoplay [data-bs-target].active,
.carousel-indicators.carousel-indicators-dark.autoplay button.active {
  background-color: #B3B1B0;
}

.carousel-indicators.carousel-indicators-dark:not(.autoplay) [data-bs-target].active,
.carousel-indicators.carousel-indicators-dark:not(.autoplay) button.active {
  background-color: var(--primary);
}

/* Tables */

thead th {
    border-bottom-width: 0 !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

th {
    font-weight: 600;
    color: var(--text-dark);
}

.bg-light .table {
  background-color: var(--white);
}

.table>:not(caption)>*>* {
    padding: 1rem 2rem;
}

.table-responsive table {
    margin-bottom: 0;
}

.table>:not(caption)>*>* {
    border-color: var(--border-color);
}

.table {
  --bs-table-striped-bg: transparent !important;
}

/*
 * Bootstrap's bordered tables rely on collapsed cell borders. Those borders
 * cannot follow the table's corner radius, so use a single outer border and
 * draw each internal grid line once instead.
 */
.table-bordered {
  border: var(--bs-border-width, 1px) solid var(--bs-table-border-color, var(--border-color));
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--table-border-radius);
  overflow: hidden;
}

.table-bordered > :not(caption) > * {
  border-width: 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 var(--bs-border-width, 1px) var(--bs-border-width, 1px) 0;
}

.table-bordered > :not(caption) > * > :last-child {
  border-right-width: 0;
}

.table-bordered > :last-child > tr:last-child > * {
  border-bottom-width: 0;
}

/* This restores the header divider, which the global table heading rule removes. */
.table-bordered > thead > tr > th {
  border-bottom-width: var(--bs-border-width, 1px) !important;
}

/* Round the four cell backgrounds as well as the enclosing border. */
.table-bordered > thead > tr:first-child > :first-child,
.table-bordered > tbody:first-child > tr:first-child > :first-child {
  border-top-left-radius: calc(var(--table-border-radius) - var(--bs-border-width, 1px));
}

.table-bordered > thead > tr:first-child > :last-child,
.table-bordered > tbody:first-child > tr:first-child > :last-child {
  border-top-right-radius: calc(var(--table-border-radius) - var(--bs-border-width, 1px));
}

.table-bordered > tbody:last-child > tr:last-child > :first-child,
.table-bordered > tfoot > tr:last-child > :first-child {
  border-bottom-left-radius: calc(var(--table-border-radius) - var(--bs-border-width, 1px));
}

.table-bordered > tbody:last-child > tr:last-child > :last-child,
.table-bordered > tfoot > tr:last-child > :last-child {
  border-bottom-right-radius: calc(var(--table-border-radius) - var(--bs-border-width, 1px));
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--input-bg);
    color: var(--bs-table-striped-color);
}

/* Tabs */

.nav-pills .nav-link {
    color: var(--text-dark);
    font-weight: 600;
    border-radius: 32px;
    border-bottom: solid 1.5px transparent;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.nav-pills .nav-link:hover {
    color: var(--primary);
}

.nav-pills .nav-link.active,
.nav-pills .show >.nav-link {
    color: var(--primary) !important;
    background-color: var(--gray-100);
}

.bg-light .nav-pills .nav-link.active,
.bg-light .nav-pills .show > .nav-link {
    background-color: var(--white);
}

.nav-pills .nav-link.active * {
    color: var(--primary) !important;
}

.navbar-internal .nav-pills .nav-link,
.navbar-internal .nav-pills .nav-link *:not(.fal) {
    font-size: 0.875rem;
    border: 0 !important;
}

.navbar-internal .nav-pills .nav-link:hover,
.navbar-internal .nav-pills .nav-link:hover *:not(.fal) {
    color: var(--primary) !important;
}

.navbar-internal .nav-pills .nav-link.active,
.navbar-internal .nav-pills .show >.nav-link {
    color: var(--primary) !important;
    background-color: transparent;
    border: 0 !important;
}


.nav-cards {
    gap: 1rem;
}

.nav-cards .card {
    transition: all .4s;
}

.nav-cards button {
   z-index: 250;
}

.nav-cards button.active {
   z-index: 500;
}

.nav-cards button:not(.active) .icon-box .icon-wrapper {
  color: var(--text-color);  
  &::after {
    display: none !important;
  }
}

.nav-cards button.active .card:not(.card-transparent) {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.nav-cards button:not(.active) .card.card-transparent .icon-box {
    color: var(--text-muted);
}

.nav-cards button:not(.active) .card.card-transparent .icon-box.filled {
    background-color: var(--bg-light);
    color: var(--text-body) !important;
}

.nav-cards .icon-box {
    min-width: 2.25rem;
}

.nav-steps .nav-item .btn-transparent {
    position: relative;
}

.nav.alt-active-indicator button.active .card-title {
    color: var(--primary);
}

.nav.alt-active-indicator button:not(.active) .badge.bg-primary {
    background-color: var(--bg-light) !important;
    color: var(--text-body);
}

.nav-steps .nav-item:not(:last-child) .btn-transparent:before {
    content: '';
    width: 1px;
    border-left: dashed 1px #a9b3bc;
    display: block;
    position: absolute;
    top: 1px;
    left: 1rem;
    height: 100%;
}

.tab-content>.tab-pane.accordion-item .accordion-button {
  display: none;
}

/* Accordion */

.accordion {
    overflow: hidden;
}

.accordion-item {
    border: 0px;
    border-bottom: solid 1px var(--border-color);
}

.accordion-button {
    font-weight: 700;
    padding: 1.25rem 2rem;
    color: var(--text-dark);
}

@media (max-width: 1199px) {
  .accordion-button {
    padding: 1.25rem 1.5rem;
  }
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--primary);
    background-color: transparent;
    box-shadow: 0 -1px 0 var(--border-color) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    font-family: 'Font Awesome 7 Pro' !important;
    font-weight: 900;
    content: '\f068';
    display: block;
    vertical-align: middle;
    height: auto;
    width: auto;
    transform: none;
}


.accordion-button::after {
    background-image: none;
    font-family: 'Font Awesome 7 Pro' !important;
    font-weight: 900;
    content: '\2b';
    display: block;
    vertical-align: middle;
    height: auto;
    width: auto;
    transform: none;
}

.accordion-body {
    padding: 1.25rem 2rem;
}

@media (max-width: 1199px) {
  .accordion-body {
    padding: 1.25rem 1.5rem;
  }
}

/* Separated accordion: each item is its own rounded block, with an arrow
   when closed and an X when open (FAQ 01). */
.accordion-separated .accordion-item {
    border-bottom: 0;
    border-radius: .75rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.accordion-separated .accordion-button::after {
    content: '\f063';
}

.accordion-separated .accordion-button:not(.collapsed)::after {
    content: '\f00d';
}

/* Form */

.hs-form ul {
    padding-left: 0;
    list-style: none;
}

.hs-form input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

.hs-form .input select {
    position: relative;
}

.hs-form .input select::after {
    position: absolute;
    display: block;
    left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
} 

.form-wrapper label {
    display: flex;
    margin-bottom: 0.5rem !important;
}
.form-wrapper .hs-form-required {
    font-size: 10px;
    position: relative;
    top: -5px;
}
.form-wrapper .input {
    margin-bottom: 1rem !important;
}
.form-wrapper textarea.hs-input {
    min-height: 200px;
}
.form-wrapper .hs-input:not([type="checkbox"]) {
    display: block;
    width: 100%;
    padding: 10px 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dark);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* HubSpot form selects keep room on the right for the caret (the rule above resets the padding). */
.form-wrapper select.hs-input:not([type="checkbox"]) {
    padding-right: 2.25rem;
}
.form-wrapper .hs-input:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
.form-wrapper .hs-error-msgs {
    padding-left: 0;
    color: #dc3545;
}

/* Modal */

.modal .modal-content {
    border-radius: 1rem;
    overflow: hidden;
}

.modal.video-modal .modal-dialog {
    background-color: rgba(0,0,0,0.8);
}

.modal.video-modal .modal-fullscreen .modal-content {
    padding: 3rem 1rem;
    background: transparent;
    height: 100%; 
}

@media (min-width: 992px) {
    .modal.video-modal .modal-fullscreen .modal-content {
        padding: 4rem !important;
    }
}

@media (min-width: 1200px) {
    .modal.video-modal .modal-fullscreen .modal-content {
        padding: 8rem !important;
    }
}

.modal.video-modal .modal-fullscreen .modal-content .ratio {
    max-height: 100%; 
}

.modal.video-modal button.close {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1000;
}

/* Video Embed */

.video-thumbnail-wrapper {
    position: relative;
}

/* Ensure .video-thumb can host an absolutely positioned icon */
.video-thumb {
  display: block;
}

.video-thumb::after {
  content: "\f04b"; /* Font Awesome "play" icon */
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 4px 12px rgba(0,0,0,0.35);
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
  pointer-events: none; /* Icon does not interfere with clicking */
}

/* Only show icon when hovering a clickable card */
.card.clickable.video-trigger:hover .video-thumb::after {
  opacity: 1;
}

/* Footer */

footer {
    padding: var(--section-padding-sm) 0;
}

footer .container > .row:not(:last-child) {
    margin-bottom: var(--section-padding);
}

@media (min-width: 992px) {
    footer {
        padding: var(--section-padding) 0;
    }
  
    footer.footer-minimal {
        padding: 0 0 var(--section-padding-sm) 0;
    }}

.footer-column + .footer-column {
    margin-top: 1.5rem;
}

@media (min-width: 992px) {
    .footer-column + .footer-column {
        margin-top: 3rem;
    }
}

/* Misc */

.gift-card-shadow,
.gift-card-wrapper img {
  box-shadow: 0 0.125rem 0 rgba(0,0,0,.2), 1px 0 0 rgba(0,0,0,.07), -1px 0 0 rgba(0,0,0,.07);
  -webkit-box-shadow: 0 0.125rem 0 rgba(0,0,0,.2), 1px 0 0 rgba(0,0,0,.07), -1px 0 0 rgba(0,0,0,.07);
  border-radius: 0.875rem;
}

.gift-card-wrapper.loading {
    display: block;
    padding-top: 62%;
    -o-object-fit: cover;
    object-fit: cover;
    margin: auto;
    border-radius: 0.625rem;
    webkit-animation: skeleton-loading 1s linear infinite alternate;
    animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        background-color: #DCD0CB;
    }
    100% {
        background-color: #f5f1f0;
    }
}

.gift-card-wrapper img {
  display: block;
}

.gift-card-wrapper.loading img {
  display: none;
}

/* Use-case modal image skeletons */
.use-case-meridian-gift-card-stage.gift-card-wrapper.loading {
  position: relative;
  width: 100%;
}

.use-case-meridian-design-indicator.gift-card-wrapper.loading {
  padding-top: 0;
  background: none;
}

.use-case-meridian-design-indicator.gift-card-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: none;
  object-fit: cover;
}

.svg-inline--fa {
  width: 24px;
  height: auto;
  display: inline-block;
}

.levitate {
    transition: 400ms cubic-bezier(0.215,0.61,0.355,1);
    position: relative;
    top: 0;
}

.levitate:hover {
    top: -0.25rem;
}

.ratings-wrapper .star-rating {
  font-size: 1.25rem;
  width: auto;
}

.ratings-wrapper.g2-ratings .star-rating {
  color: var(--tomato) !important;
}

.star-ratings {
  max-height: 1rem;
}

.star-ratings i {
  margin: 0 0.125rem;
  color: var(--tomato) !important;
}

hr {
    display: block;
    height: 1px;
    background-color: var(--gray-300);
    border: 0;
    margin: calc(var(--section-padding-minor)/2) 0;
}

hr.dropdown-divider {
    background-color: var(--gray-200);
}

hr.dark {
  background-color: var(--text-dark);
}

.dark-theme hr {
    background-color: rgba(255,255,255,0.7);
}

.rounded {
    border-radius: 0.75rem !important;
}

.rounded-large {
    border-radius: 1rem;
}

/* Image that fills its column, cropped from the right (FEATURES - SPLIT CARDS). */
.card-split-image {
    object-fit: cover;
    object-position: right center;
}

.rounded-card {
    border-radius: 1.15rem;
}

.rounded-phone {
    border-radius: 1.95rem;
}

.rounded-chip {
    border-radius: 0.5rem;
}

.icon-box {
    color: var(--icon-fill-primary);
}

.icon-box.box {
    height: 4rem;
    width: 4rem;
    min-width: 4rem;
    line-height: 4rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all .4s;
    background-color: rgba(255,255,255,0.5);
}

.icon-box.filled {
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    line-height: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all .4s;
    background-color: var(--violet);
    color: var(--text-light);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
}

.icon-box .icon-wrapper {
  width: 100%;
  position: relative;
  min-width: 2rem;
  text-align: center;
}

section:not(.dark-theme) .icon-box .icon-wrapper.icon-wrapper-decoration {
  &::after {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    background-color: #e4c7ee;
    opacity: 1;
    position: absolute;
    right: -15%;
    bottom: -15%;
    z-index: 50;
  }
}

section:not(.dark-theme) .icon-box .icon-wrapper.icon-wrapper-decoration.decoration-circle {
  &::after {
    border-radius: 1.5rem;
  }
}

.icon-box [class*='fa-'] {
  font-size: 1.625rem;
  position: relative;
  top: 2px;
  z-index: 100;
}

/* Small outlined icon circle; pair with rounded-circle and flex-centering utilities. */
.icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border: solid 1px var(--border-color);
}

/* Larger circle for CONTENT 02 and TABS 02: icons match FEATURES - ICONS (1.625rem). */
.icon-circle.icon-circle-lg {
  font-size: 1.625rem;
  height: 3.25rem;
  min-width: 3.25rem;
  width: 3.25rem;
}

.icon-circle-lg .icon-circle-number {
  font-size: 1.25rem;
}

/* Tinted circle for FEATURES - SPLIT CARDS: a primary icon on Violet Ray/100, no outline. */
.icon-circle.icon-circle-tint {
  background-color: var(--violet-ray-100, #e8e4ff);
  border-color: var(--violet-ray-100, #e8e4ff);
}

/* Striped tables: no bottom border under the last row, whether it's in tbody or tfoot. */
.table-striped > :last-child > tr:last-child > * {
  border-bottom-width: 0;
}

/* TABLE 01: the row label column is 15%; with a fixed layout the other columns split the rest
   equally, however many there are. The minimum width lets small screens scroll. */
.table-equal-columns {
  min-width: 45rem;
  table-layout: fixed;
}

.table-equal-columns .table-label-col {
  width: 15%;
}

/* TABLE 01: cell text and row labels use the small size; the link row keeps the arrow link size. */
.table-equal-columns td,
.table-equal-columns tbody th {
  font-size: var(--small-text-size);
}

/* TABLE 01: highlighted column. Each cell's pseudo-element fills it with opaque Violet Ray/100, or #DAD2FF (halfway to
   Violet Ray/200) on the striped rows, over the stripes; the row lines stay visible. No border or rounded corners: the column runs
   from the table's top edge to its bottom edge. */
.table > :not(caption) > * > .table-highlight {
  position: relative;
  z-index: 0; /* its own stacking context, so the fill (z-index -1) sits over the stripe but under the text */
}

.table > :not(caption) > * > .table-highlight::before {
  background-color: var(--violet-ray-100, #e8e4ff);
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.table-striped > tbody > tr:nth-of-type(odd) > .table-highlight::before {
  background-color: #dad2ff; /* halfway between Violet Ray/100 and /200: a softer stripe than 200 */
}

/* On large screens the table fits without scrolling, so let the highlighted column extend past the card. */
@media (min-width: 992px) {
  .card:has(.table-has-highlight),
  .table-responsive:has(> .table-has-highlight) {
    overflow: visible !important;
  }
}

/* TABLE 01 below large screens: the highlighted column's card matches the highlighted column (Violet Ray/100, no border). */
.table-card-highlight {
  background-color: var(--violet-ray-100, #e8e4ff);
  border-color: var(--violet-ray-100, #e8e4ff) !important;
}

/* With the card's overflow visible, a table flush to the card (Table padding off) rounds its own
   corners to match the card's 1rem radius. Cell radii need separate borders. */
@media (min-width: 992px) {
  .table-flush.table-has-highlight {
    border-collapse: separate;
    border-radius: 1rem;
    border-spacing: 0;
  }

  .table-flush.table-has-highlight > thead > tr:first-child > :first-child {
    border-top-left-radius: 1rem;
  }

  .table-flush.table-has-highlight > thead > tr:first-child > :last-child {
    border-top-right-radius: 1rem;
  }

  .table-flush.table-has-highlight > :last-child > tr:last-child > :first-child {
    border-bottom-left-radius: 1rem;
  }

  .table-flush.table-has-highlight > :last-child > tr:last-child > :last-child {
    border-bottom-right-radius: 1rem;
  }
}

/* FEATURES - ICONS BOX: roomier box padding on large screens (Bootstrap's p-5 tops out at 3rem). */
@media (min-width: 992px) {
  .features-icons-box {
    padding: 4rem !important;
  }
}

/* Vertical tabs styled as icon-list items (TABS 02); inactive tab titles, text, and links are dimmed. */
.tab-bullets .tab-bullet {
  background: transparent;
  border: 0;
  border-top: solid 1px var(--border-color);
  border-radius: 0;
  color: inherit;
}

.tab-bullets .tab-bullet:first-child {
  border-top: 0;
}

.tab-bullets .tab-bullet-text,
.tab-bullets .tab-bullet-link {
  opacity: .7;
  transition: opacity .2s ease-in-out;
}

.tab-bullets .tab-bullet:hover .tab-bullet-text,
.tab-bullets .tab-bullet.active .tab-bullet-text,
.tab-bullets .tab-bullet:has(+ .tab-bullet-link:hover) .tab-bullet-text,
.tab-bullets .tab-bullet:hover + .tab-bullet-link,
.tab-bullets .tab-bullet.active + .tab-bullet-link,
.tab-bullets .tab-bullet-link:hover {
  opacity: 1;
}

.tab-bullets .tab-bullet .icon-circle,
.tab-bullets .tab-bullet .icon-circle > * {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.tab-bullets .tab-bullet.active .icon-circle {
  animation: tab-bullet-pop .35s ease-out;
  background-color: currentColor;
  border-color: currentColor;
  border-width: 2px;
}

/* A slight swell as the icon circle fills. */
@keyframes tab-bullet-pop {
  50% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-bullets .tab-bullet .icon-circle,
  .tab-bullets .tab-bullet .icon-circle > * {
    transition: none;
  }

  .tab-bullets .tab-bullet.active .icon-circle {
    animation: none;
  }
}

/* The active icon or number sits on its own color: white, or black on dark backgrounds where the circle is chartreuse. */
.tab-bullets .tab-bullet.active .icon-circle > * {
  color: var(--white);
}

.dark-theme .tab-bullets .tab-bullet.active .icon-circle > * {
  color: var(--black);
}

/* Lines a tab's link up with its text: icon width plus the gap-3 gap. */
.tab-bullets .tab-bullet-link-indented {
  padding-left: 4.25rem;
}


.home-hero-image {
  margin-bottom: -80px;
}

.how-it-works-hero-image {
  margin-bottom: -59px;
}

.home-hero-bg-position {
  margin-top: -50px;
  margin-left: 175px;
}

.enterprise-hero-bg-position {
  margin-top: -60px;
  margin-left: 195px;
}

@media (max-width: 991px) {
  .home-hero-image,
  .enterprise-hero-image {
    display: none;
  }
  .home-hero-bg-position,
  .enterprise-hero-bg-position {
    margin-top: 0px;
    margin-left: 0px;
    position: relative !important;
  }
}

.step-row > div:not(:last-child) .card:after {
  display: block;
  font-family: 'Font Awesome 7 Pro' !important;
  font-weight: 400;
  content: '\f054';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.dark-links a {
  white-space: nowrap!important;
}

.pricing-callout {
  background: var(--ghost_white); /* Figma "Neutral/100 Parchment" (#f7f4f2); was a cool lavender gray, #eaeaf4 */
}

/* brandList */

.brand-table-wrapper {
  border: solid 1px var(--border-color);
  border-radius: 12px;
  max-height: 1280px;
  overflow: scroll;
}

.brand-table-wrapper table tbody tr:only-child td,
.brand-table-wrapper table tbody tr:last-child td {
  border-bottom: 0px;
}

.gift-card-thumbnail {
   border-radius: 6px;
}

.clickable {
  cursor: pointer;
}

/* integrationList */

#integrationsList .clickable-card {
  display: block;
  padding: 1rem;
  border-radius: 0.75rem;
}

#integrationsList .clickable-card:active {
  transform: scale(0.96);
}

#integrationsList .clickable-card,
#integrationsList .clickable-card * {
  text-decoration: none;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1), background 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

#integrationsList .clickable-card:hover {
  background-color: var(--bg-light);
}

#integrationsList .clickable-card .learn-more {
  opacity: 0;
  transform: scale(0.95);
  display: inline-block;
  display: none;
  transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 200ms ease;
}

#integrationsList .clickable-card:hover .learn-more {
  opacity: 1;
  transform: scale(1);
  display: block;
}

.integration-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.integration-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.integration-row {
  flex-wrap: nowrap;
}

.integration-content {
  min-width: 0;
}

.integration-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.expand-btn-container {
  padding-top: 1.5rem;
  margin-top: 3rem;
}

.expand-btn-container.list-collapsed {
  box-shadow: 0 -18px 30px -30px rgba(0, 0, 0, 0.45),
  0 -40px 70px -55px rgba(0, 0, 0, 0.25);
}

/* HUBSPOT Meeting Widget Style Override */

.meetings-iframe-container iframe .compact-container {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* CALENDLY Meeting Wigdet Style Override */

.calendly-inline-widget {
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  overflow: hidden;
}

.safari-safe-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: #fff;
  z-index: 99999;
  pointer-events: none;
}

/* Blog style includes */

/* Blog styles */

.featured-article {
    margin-bottom: var(--section-padding-sm);
}

.blog-post,
.blog-post p,
.blog-post .text-block,
.blog-post ol, 
.blog-post ul,
.blog-post .accordion-button {
  font-size: var(--lead-size);
}

.blog-post .lead,
.blog-post p.lead {
  font-size: var(--headline-5-size) !important;
}

.blog-post h2 {
    font-size: var(--headline-3-size);
    letter-spacing: var(--headline-3-spacing);
    margin-bottom: 2rem;
}

.blog-post h3 {
    font-size: var(--headline-4-size);
    letter-spacing: var(--headline-4-spacing);
}

.blog-post h4 {
    font-size: var(--headline-5-size);
    letter-spacing: var(--headline-5-spacing);
}

.blog-post h5 {
    font-size: var(--headline-6-size);
    letter-spacing: var(--headline-6-spacing);
}
  
.blog-post table {
    caption-side: top;
    margin-bottom: var(--paragraph-bottom-margin) !important;
}

.blog-post .accordion.shadow {
    box-shadow: none !important; 
}

.blog-post .accordion.shadow {
    background-color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(45, 45, 45, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.blog-post .accordion.shadow .accordion-item,
.blog-post .accordion.shadow .accordion-button,
.blog-post .accordion.shadow .accordion-button:not(.collapsed),
.blog-post .accordion.shadow .accordion-body {
    background-color: transparent;
}

.blog-post .accordion.shadow .accordion-item {
    border-color: rgba(45, 45, 45, 0.1);
}

.blog-post .accordion.shadow .accordion-item + .accordion-item {
    border-top-color: rgba(45, 45, 45, 0.1);
}

.blog-post .accordion.shadow .accordion-button,
.blog-post .accordion.shadow .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.blog-post .accordion.shadow .accordion-button:focus {
    box-shadow: inset 0 -1px 0 rgba(45, 45, 45, 0.1);
}

.blog-post table caption {
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    text-align: left;
    font-style: italic;
    color: inherit;
}

.blog-post ul,
.blog-post ol,
.blog-post ul:last-child,
.blog-post ol:last-child,
.blog-post p:last-child,
.blog-post .callout {
    margin-bottom: var(--paragraph-bottom-margin) !important;
}

.blog-post ul:last-child,
.blog-post ol:last-child {
    margin-bottom: 0 !important;
}

.blog-post ul:not(.no-list) {
  list-style-type: none;
}

.blog-post ul:not(.no-list),
.blog-post ol:not(.no-list) {
  padding-left: 1.5rem;
}

.blog-post ul:not(.no-list) li,
.blog-post ol:not(.no-list) li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
}

.blog-post .table-of-contents ol li,
.blog-post ol li {
  margin-bottom: 0.75rem;
}

.blog-post ul:not(.no-list) li::before,
.blog-post ul:not(.no-list) li::after {
  font-family: "Font Awesome 7 Duotone";
  font-weight: 900;
  letter-spacing: normal;
  display: block;
  position: absolute;
  vertical-align: middle;
  left: 0;
  top: 0;
}

.blog-post ul:not(.no-list) li::before {
    color: var(--primary,inherit);
    opacity: var(--fa-primary-opacity,1);
    content: "\f058";
}

.blog-post ul:not(.no-list) li::after {
  content: "\f058\f058";
  color: var(--primary, inherit);
  opacity: var(--fa-secondary-opacity, 0.2);
}

.blog-post.lead ul:not(.no-list) li {
  padding-left: 2rem;
  margin-bottom: 1rem;
}

.blog-post.lead ul:not(.no-list) li:before,
.blog-post.lead ul:not(.no-list) li:after {
  font-size: var(--headline-6-size);
}

.blog-post .callout {
  padding: 0 1.5rem;
  border-left: 0.5rem solid var(--primary);
  /* background-color: var(--callout-background); */
  font-style: italic;
}

.blog-post .callout > :last-child {
  margin-bottom: 0;
}

.blog-post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.blog-post-body img {
  max-width: 100% !important;
  height: auto;
}

.blog-post-body img,
.blog-post-body .hs-video-widget,
.blog-post-body .hs-video-container,
.blog-post-body .hs-video-wrapper {
  border-radius: 0.75rem;
  overflow: hidden;
}

.blog-post-body hr {
  background-color: transparent;
}

.blog-post-body article section + section:not(:first-child) {
  padding-top: 3.5rem;
}

.blog-post-body article section section + section:not(:first-child) {
  padding-top: 1.5rem;
}

.blog-inline-cta:empty {
  display: none;
}

.pagination .btn-link {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center !important;
  color: var(--text-color) !important;
  padding: 0;
  border-radius: 2rem !important;
  font-weight: 500;
}

.pagination .btn-link:not(.active):hover,
.pagination .btn-link:not(.active):focus {
  color: var(--primary) !important;
}

.pagination .btn-link.active {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-bottom: 0px;
}

/* Module divider placeholder */
.module-divider {
  border: dashed 3px var(--primary);
  border-radius: 0.5rem;
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
}

/* Pause buttons for animations that loop longer than 5 seconds (js/motion-focus.js adds them): a white circle with a
   violet pause or play icon in the bottom-right corner. It fades in while the pointer is over the animation, and
   stays visible while it has keyboard focus, while the animation is paused (so play is easy to find), and on touch
   screens, which can't hover. */
.gg-motion-toggle {
  align-items: center;
  background-color: rgba(255, 255, 255, .9); /* solid white on hover */
  border: 0;
  border-radius: 50%;
  bottom: 1rem;
  color: var(--violet);
  cursor: pointer;
  display: flex;
  height: 2.25rem;
  justify-content: center;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 1rem;
  transition: background-color .15s ease, opacity .2s ease, transform .15s ease;
  width: 2.25rem;
  z-index: 20;
}

.gg-motion-host:hover > .gg-motion-toggle,
.gg-motion-toggle:focus-visible,
.gg-motion-toggle[aria-pressed="true"] {
  opacity: 1;
}

@media (hover: none) {
  .gg-motion-toggle {
    opacity: 1;
  }
}

.gg-motion-toggle:hover,
.gg-motion-toggle:focus-visible {
  background-color: var(--white);
}

.gg-motion-toggle:hover {
  transform: scale(1.06);
}

.gg-motion-toggle:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.gg-motion-toggle svg {
  display: block;
  fill: currentColor;
}

/* A video's pause button sits in this wrapper, since a <video> can't hold one. */
.gg-motion-video {
  position: relative;
}

/* The graphic's description for screen readers, moved off the root so the button inside it stays reachable. */
.gg-motion-label {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 767.98px) {
  .gg-motion-toggle {
    bottom: .5rem;
    height: 2rem;
    right: .5rem;
    width: 2rem;
  }
}

/* MODULE BROWSER: a fixed indigo bar over a browser-window figure that loads one module sample at a time (internal
   module library). The module's own top padding holds the bar's height. */
.module-browser {
  background-color: var(--indigo);
  padding-top: 4.5rem;
}

.module-browser-bar {
  background-color: var(--indigo);
  color: var(--white);
  left: 0;
  padding: .875rem 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1060;
}

.module-browser-bar .container-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.module-browser-title {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .7;
  text-transform: uppercase;
}

.module-browser-picker {
  position: relative;
}

.module-browser-toggle {
  align-items: center;
  background-color: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: var(--white);
  display: flex;
  font-size: 1rem;
  font-weight: 600;
  gap: .75rem;
  justify-content: space-between;
  min-width: 18rem;
  padding: .5rem 1rem .5rem 1.25rem;
}

.module-browser-toggle:hover,
.module-browser-toggle[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, .35);
}

/* The selected module's name, with its Global tag (for a global module) on the right, before the caret. */
.module-browser-toggle-label {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: .5rem;
  justify-content: space-between;
  margin-right: .25rem;
  min-width: 0;
}

.module-browser-toggle-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-browser-toggle-label .module-browser-badge {
  flex: none;
}

.module-browser-toggle .fa-chevron-down {
  font-size: .75rem;
  transition: transform .2s ease;
}

.module-browser-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.module-browser-panel {
  background-color: var(--white);
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(13, 0, 35, .15), 0 16px 40px rgba(13, 0, 35, .3);
  color: var(--gray-500);
  left: 0;
  margin-top: .5rem;
  overflow: hidden;
  position: absolute;
  top: 100%;
  width: min(24rem, calc(100vw - 2rem));
}

.module-browser-search {
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: .625rem;
  padding: .75rem 1rem;
}

.module-browser-search i {
  color: var(--text-muted);
}

.module-browser-search input {
  border: 0;
  flex: 1;
  font-size: 1rem;
  outline: 0;
}

.module-browser-list {
  max-height: min(60vh, 32rem);
  overflow-y: auto;
  padding: .5rem;
}

.module-browser-group {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .75rem .75rem .25rem;
  text-transform: uppercase;
}

.module-browser-option {
  align-items: center;
  background: none;
  border: 0;
  border-radius: .5rem;
  color: inherit;
  display: flex;
  font-size: .9375rem;
  justify-content: space-between;
  padding: .5rem .75rem;
  text-align: left;
  width: 100%;
}

.module-browser-option:hover,
.module-browser-option:focus {
  background-color: var(--lavender);
  outline: 0;
}

.module-browser-option[aria-selected="true"] {
  color: var(--violet);
  font-weight: 600;
}

.module-browser-option em,
.module-browser-badge {
  background-color: var(--chartreuse);
  border-radius: 999px;
  color: var(--gray-500);
  font-size: .6875rem;
  font-style: normal;
  font-weight: 700;
  padding: .125rem .5rem;
}

.module-browser-empty {
  color: var(--text-muted);
  margin: 0;
  padding: 1rem;
}

.module-browser-count {
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

.module-browser-step {
  align-items: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.module-browser-step:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, .12);
}

.module-browser-step:disabled {
  opacity: .35;
}

/* The window: chrome (dots, address, screen sizes) over a viewport that holds the scaled iframe. module.js sets the
   window's width and the viewport's height. */
.module-browser-stage {
  background-color: var(--indigo);
  min-height: calc(100vh - 4.5rem);
  padding: 2rem 1.5rem 4rem;
}

.module-browser-window {
  background-color: var(--white);
  border-radius: .75rem;
  box-shadow: 0 2px 6px rgba(13, 0, 35, .25), 0 24px 64px rgba(13, 0, 35, .45);
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}

.module-browser-chrome {
  align-items: center;
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 1rem;
  height: 2.75rem;
  padding: 0 .75rem 0 1rem;
}

.module-browser-dots {
  display: flex;
  flex: none;
  gap: .5rem;
}

.module-browser-dots i {
  background-color: var(--gray-200);
  border-radius: 50%;
  display: block;
  height: .75rem;
  width: .75rem;
}

.module-browser-address {
  align-items: center;
  background-color: var(--ghost_white);
  border-radius: 999px;
  color: var(--text-muted);
  display: flex;
  flex: 1 1 auto;
  font-size: .8125rem;
  gap: .5rem;
  margin: 0 auto;
  max-width: 30rem;
  min-width: 0;
  padding: .3125rem .875rem;
}

.module-browser-address i {
  flex: none;
  font-size: .6875rem;
}

.module-browser-address span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-browser-devices {
  display: flex;
  flex: none;
  gap: .125rem;
}

.module-browser-devices button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: .375rem;
  color: var(--text-muted);
  display: flex;
  height: 1.875rem;
  justify-content: center;
  width: 1.875rem;
}

.module-browser-devices button:hover {
  background-color: var(--ghost_white);
}

.module-browser-devices button[aria-pressed="true"] {
  background-color: var(--lavender);
  color: var(--violet);
}

.module-browser-viewport {
  overflow: hidden;
  position: relative;
}

.module-browser-frame {
  background-color: var(--white);
  border: 0;
  display: block;
  transform-origin: 0 0;
}

/* The Modules / Templates switch in the bar. In the Templates view the module controls, the paths strip, and the
   window are hidden and the template guide shows in their place. */
.module-browser-views {
  background-color: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  display: flex;
  gap: .125rem;
  padding: .1875rem;
}

.module-browser-views button {
  background: none;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .75);
  font-size: .875rem;
  font-weight: 600;
  padding: .375rem .875rem;
}

.module-browser-views button:hover {
  color: var(--white);
}

.module-browser-views button[aria-selected="true"] {
  background-color: var(--white);
  color: var(--indigo);
}

.module-browser[data-view="templates"] .module-browser-picker,
.module-browser[data-view="templates"] .module-browser-nav,
.module-browser[data-view="templates"] .module-browser-info,
.module-browser[data-view="templates"] .module-browser-window {
  display: none !important;
}

/* The template guide: an introduction, then one card per template with a diagram of its page. */
.module-browser-templates {
  color: var(--white);
  margin: 0 auto;
  max-width: 72rem;
  padding-top: 1rem;
}

.module-browser-templates-head {
  margin-bottom: 2rem;
}

.module-browser-templates-head h2 {
  color: var(--white);
  font-size: 2rem;
  letter-spacing: -.01em;
  margin: 0 0 .75rem;
}

.module-browser-templates-intro p {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
  opacity: .85;
}

.module-browser-templates-intro code {
  background-color: rgba(255, 255, 255, .14);
  border-radius: .25rem;
  color: var(--white);
  font-size: .85em;
  padding: .1em .35em;
}

.module-browser-templates-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.module-browser-template {
  background-color: var(--white);
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(13, 0, 35, .25), 0 24px 64px rgba(13, 0, 35, .45);
  color: var(--gray-500);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 15rem 1fr;
  padding: 1.5rem;
}

/* The thumbnail: a live 1440 x 1620 render of the template's modules, scaled to fit (module.js sets the scale),
   like HubSpot's template previews. */
.module-browser-template-thumb {
  align-self: start;
  aspect-ratio: 1440 / 1620;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(13, 0, 35, .08);
  overflow: hidden;
  position: relative;
}

.module-browser-template-thumb iframe {
  border: 0;
  display: block;
  height: 1620px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform-origin: 0 0;
  width: 1440px;
}

/* The page from top to bottom as chips, under the template's name. */
.module-browser-template-layout {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.module-browser-template-layout li {
  align-items: center;
  display: flex;
  gap: .375rem;
}

.module-browser-template-layout li + li::before {
  color: var(--text-muted);
  content: "\2192";
  font-size: .75rem;
}

.module-browser-chip {
  align-items: center;
  background-color: var(--ghost_white);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--gray-500);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 600;
  gap: .375rem;
  padding: .25rem .625rem;
}

button.module-browser-chip:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.module-browser-chip em {
  background-color: var(--chartreuse);
  border-radius: 999px;
  color: var(--gray-500);
  font-size: .625rem;
  font-style: normal;
  font-weight: 700;
  padding: .0625rem .375rem;
}

.module-browser-chip.is-area {
  background-color: var(--lavender);
  border: 1px dashed var(--violet);
  color: var(--violet);
}

.module-browser-template-body {
  min-width: 0;
}

.module-browser-template-body h3 {
  color: var(--gray-500);
  font-size: 1.25rem;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 .75rem;
}

.module-browser-template-paths {
  background-color: var(--bg-light); /* a light gray shaded box around the template's paths */
  border-radius: .75rem;
  display: grid;
  gap: .25rem;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
}

.module-browser-template-paths > div {
  align-items: center;
  display: flex;
  gap: .5rem;
  min-width: 0;
}

.module-browser-template-paths dt {
  color: var(--text-muted);
  flex: none;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: 7.5rem;
}

.module-browser-template-paths dd {
  align-items: center;
  display: flex;
  gap: .25rem;
  margin: 0;
  min-width: 0;
}

.module-browser-template-paths code {
  color: var(--gray-500);
  font-size: .8125rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-browser-template-paths .module-browser-copy {
  color: var(--text-muted);
}

.module-browser-template-paths .module-browser-copy:hover {
  background-color: var(--white, #fff); /* the box is already --bg-light */
}

.module-browser-template-guide {
  font-size: .9375rem;
  line-height: 1.6;
}

.module-browser-template-guide ul {
  margin: 0;
  padding-left: 1.25rem;
}

.module-browser-template-guide li {
  margin: .375rem 0;
}

.module-browser-template-guide code {
  background-color: var(--ghost_white);
  border-radius: .25rem;
  color: var(--violet);
  font-size: .85em;
  padding: .1em .35em;
}

/* Above the window: the selected module's Design Manager and repo paths, and a button that opens its README.
   module.js sets the strip's width to the window's. */
.module-browser-info {
  align-items: flex-end;
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  margin: 0 auto 1rem;
  max-width: 100%;
}

.module-browser-paths {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  min-width: 0;
}

.module-browser-path {
  align-items: center;
  display: flex;
  gap: .5rem;
  min-width: 0;
}

.module-browser-path dt {
  flex: none;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .6;
  text-transform: uppercase;
}

.module-browser-path dd {
  align-items: center;
  display: flex;
  gap: .25rem;
  margin: 0;
  min-width: 0;
}

.module-browser-path code {
  color: var(--white);
  font-size: .8125rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-browser-copy {
  align-items: center;
  background: none;
  border: 0;
  border-radius: .375rem;
  color: var(--white);
  display: flex;
  flex: none;
  font-size: .8125rem;
  height: 1.75rem;
  justify-content: center;
  opacity: .7;
  width: 1.75rem;
}

.module-browser-copy:hover {
  background-color: rgba(255, 255, 255, .12);
  opacity: 1;
}

.module-browser-readme-open {
  align-items: center;
  background: none;
  border: 0;
  color: var(--chartreuse);
  display: flex;
  flex: none;
  font-size: .875rem;
  font-weight: 600;
  gap: .5rem;
  padding: 0;
}

.module-browser-readme-open:hover:not(:disabled) {
  text-decoration: underline;
}

.module-browser-readme-open:disabled {
  opacity: .4;
}

/* The README dialog, in a dark Markdown-reader style. Its head stays put while the body scrolls. */
.module-browser-readme {
  --readme-bg: #131313;
  --readme-text: #d4d4d4;
  --readme-muted: #8c8c8c;
  --readme-heading: #7fb2cc;
  --readme-rule: #333;
  --readme-code-bg: #2a2a2a;
  background-color: var(--readme-bg);
  border: 1px solid var(--readme-rule);
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 64px rgba(0, 0, 0, .55);
  color: var(--readme-text);
  max-height: min(70vh, 44rem);
  padding: 0;
  width: min(72rem, calc(100vw - 2rem));
}

.module-browser-readme[open] {
  display: flex;
  flex-direction: column;
}

.module-browser-readme::backdrop {
  background-color: rgba(0, 0, 0, .6);
}

html:has(.module-browser-readme[open]) {
  overflow: hidden;
}

.module-browser-readme-head {
  align-items: flex-start;
  display: flex;
  flex: none;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0 2.5rem;
}

.module-browser-readme-heading {
  border-bottom: 1px solid var(--readme-rule);
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: .875rem;
}

.module-browser-readme-file {
  color: var(--readme-muted);
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.module-browser-readme-head h2 {
  color: var(--readme-heading);
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: .25rem 0 .375rem;
}

.module-browser-readme-head code {
  background: none;
  color: var(--readme-muted);
  display: block;
  font-size: .75rem;
  overflow-wrap: anywhere;
}

.module-browser-readme-close {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--readme-muted);
  display: flex;
  flex: none;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.module-browser-readme-close:hover {
  background-color: var(--readme-code-bg);
  color: var(--readme-text);
}

.module-browser-readme-body {
  font-size: 1rem;
  line-height: 1.65;
  overflow-y: auto;
  padding: 1.25rem 4rem 2rem 2.5rem;
}

.module-browser-readme-body h2,
.module-browser-readme-body h3,
.module-browser-readme-body h4,
.module-browser-readme-body h5,
.module-browser-readme-body h6 {
  color: var(--readme-heading);
  font-family: var(--headline-font);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 2rem 0 .875rem;
}

/* README "##" sections render as h3 (the dialog's title is the h2). */
.module-browser-readme-body h2,
.module-browser-readme-body h3 {
  border-bottom: 1px solid var(--readme-rule);
  font-size: 1.625rem;
  padding-bottom: .5rem;
}

.module-browser-readme-body h4 {
  font-size: 1.25rem;
}

.module-browser-readme-body h5,
.module-browser-readme-body h6 {
  font-size: 1.0625rem;
}

.module-browser-readme-body > :first-child {
  margin-top: 0;
}

.module-browser-readme-body p,
.module-browser-readme-body ul,
.module-browser-readme-body ol,
.module-browser-readme-body pre,
.module-browser-readme-body .table-responsive {
  margin: 0 0 1rem;
}

.module-browser-readme-body ul,
.module-browser-readme-body ol {
  padding-left: 1.5rem;
}

.module-browser-readme-body li {
  margin: .375rem 0;
}

.module-browser-readme-body li > ul,
.module-browser-readme-body li > ol {
  margin: .375rem 0 0;
}

.module-browser-readme-body strong {
  color: #ececec;
}

.module-browser-readme-body a {
  color: var(--readme-heading);
}

.module-browser-readme-body code {
  background-color: var(--readme-code-bg);
  border-radius: .25rem;
  color: #e6e6e6;
  font-size: .85em;
  padding: .1em .35em;
}

.module-browser-readme-body pre {
  background-color: var(--readme-code-bg);
  border-radius: .5rem;
  padding: .75rem 1rem;
}

.module-browser-readme-body pre code {
  background: none;
  padding: 0;
}

.module-browser-readme-body table {
  border-collapse: collapse;
  font-size: .9375rem;
  width: 100%;
}

.module-browser-readme-body th,
.module-browser-readme-body td {
  border: 1px solid var(--readme-rule);
  padding: .375rem .75rem;
  text-align: left;
  vertical-align: top;
}

.module-browser-readme-body th {
  background-color: #232323;
  color: #ececec;
}

/* Until module.js has hidden the samples, hide everything after the browser so the full list never flashes, and
   give the host page its indigo right away. */
html.module-browser-loading .hs_cos_wrapper_type_module:has([data-module-browser]) ~ * {
  display: none !important;
}

html.module-browser-host body {
  background-color: var(--indigo) !important;
}

/* In a template thumbnail: no floating navbar CTA, so it reads like a still preview. */
html.module-browser-thumbnail .navbar-main-floating-cta {
  display: none !important;
}

/* Inside the frame: no chat launcher over the sample. */
html.module-browser-in-frame #intercom-container,
html.module-browser-in-frame .intercom-lightweight-app {
  display: none !important;
}

@media (max-width: 767.98px) {
  .module-browser {
    padding-top: 8rem;
  }

  .module-browser-stage {
    min-height: calc(100vh - 8rem);
    padding: 1rem 1rem 2rem;
  }

  .module-browser-toggle {
    min-width: 0;
    width: 100%;
  }

  /* Two rows: the title and the view switch, then the dropdown with the arrows after it. */
  .module-browser-picker {
    flex: 1 1 calc(100% - 6rem);
    order: 2;
  }

  .module-browser-nav {
    order: 3;
  }

  .module-browser-bar .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .module-browser-views button {
    padding: .375rem .75rem;
  }

  .module-browser-count {
    display: none !important;
  }

  .module-browser-paths {
    flex: 1 1 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .module-browser-template {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .module-browser-template-thumb {
    margin: 0 auto;
    width: min(100%, 18rem);
  }

  .module-browser-template-paths dt {
    width: auto;
  }

  .module-browser-templates-head h2 {
    font-size: 1.625rem;
  }

  .module-browser-readme {
    max-height: calc(100vh - 4rem);
  }

  .module-browser-readme-head {
    padding: 1.25rem 1rem 0 1.25rem;
  }

  .module-browser-readme-head h2 {
    font-size: 1.75rem;
  }

  .module-browser-readme-body {
    padding: 1rem 1.25rem 1.25rem;
  }

  .module-browser-readme-body h2,
  .module-browser-readme-body h3 {
    font-size: 1.375rem;
  }
}

/* How It Works phones (HOW IT WORKS - GIFT CARDS); the handset itself comes from meridian-phone.css. */

.how-it-works-phone-stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 29rem;
  perspective: 1500px;
}

.how-it-works-phone-pose {
  /* The base Meridian handset is 495px tall. */
  filter: drop-shadow(0 .125rem .125rem rgba(0, 0, 0, .34));
  transform-style: preserve-3d;
  zoom: .9091;
}

.how-it-works-phone .dev {
  --case: #7d2eff; /* violet case (the rig's other cases: volt #ccff00, black #2e3338, white #f2f3f5) */
  --keyvis: none;
}

/* A slimmer, near-black (Carbon Black) bezel around the screen: the screen sits closer to the case lip (about
   40% less bezel) and its corners stay concentric with the case. */
.how-it-works-phone .glass {
  background: #1a1a1a;
}

.how-it-works-phone .screen {
  align-items: center;
  background: #fff;
  border-radius: 32px;
  bottom: 6px;
  justify-content: center;
  left: 7.7px;
  padding: 1rem;
  right: 7.7px;
  top: 6px;
}

.how-it-works-phone .screen::after {
  display: none;
}

.how-it-works-phone .glass {
  box-shadow: none;
}

.how-it-works-phone .shine,
.how-it-works-phone .gleam {
  display: none;
}

.how-it-works-phone .band,
.how-it-works-phone .case {
  pointer-events: none;
}

.how-it-works-gift-card,
.how-it-works-redemption-image {
  border-radius: .5rem;
  box-shadow: 0 .15rem 0 rgba(0, 0, 0, .16);
  display: block;
  height: auto;
  width: 100%;
}

.how-it-works-gift-message {
  color: #000;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 1rem 0 0;
  text-align: center;
}

.how-it-works-message,
.how-it-works-redemption-message {
  background: #f1f1f4;
  border-radius: .5rem;
  color: #555;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 1rem;
  padding: 1rem;
  text-align: left;
  width: 100%;
}

.how-it-works-message > span {
  display: block;
  font-size: 12px !important;
  line-height: 1.2;
}

.how-it-works-message > span + span {
  margin-top: .55rem;
}

[data-how-it-works-typing-character] {
  opacity: 0;
  transition: opacity 100ms linear;
}

@media (prefers-reduced-motion: reduce) {
  [data-how-it-works-typing-character] {
    opacity: 1;
  }
}

.how-it-works-redeem-button {
  background: var(--primary);
  border-radius: .5rem;
  color: #fff;
  display: block;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1rem;
  padding: .7rem .5rem;
  text-align: center;
  width: 100%;
}

.how-it-works-receipt-button {
  background: #fff;
  border: 1px solid #e7e5e5;
  color: #000;
}

.how-it-works-catalog {
  min-height: 0;
}

.how-it-works-catalog-search {
  border-color: #e7e5e5;
  color: #666;
  min-height: 2rem;
}

.how-it-works-catalog-grid {
  align-content: start;
  box-sizing: border-box;
  column-gap: .5rem !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  min-width: 0;
  overflow: hidden !important;
  row-gap: .5rem !important;
  width: 100%;
}

.how-it-works-catalog-card {
  aspect-ratio: 198 / 128;
  justify-self: center;
  max-width: 5.75rem;
  min-width: 0;
  width: 100%;
}

.how-it-works-catalog-card img {
  display: block;
  object-fit: contain;
}

.how-it-works-redemption {
  align-items: center;
  color: #000;
  justify-content: center;
  text-align: center;
}

.how-it-works-redemption-title {
  color: #000;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 1rem 0;
}

.how-it-works-redemption-message {
  line-height: 1.25;
  margin-top: 0;
  padding: .9rem;
}

.how-it-works-message > span,
.how-it-works-redemption-message p {
  color: inherit;
  font-weight: inherit;
}

.how-it-works-redemption-message p {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin: 0 0 .65rem;
}

.how-it-works-redemption-message span {
  text-decoration: underline;
}

.how-it-works-redemption-qr {
  display: block;
  height: 3.75rem !important;
  margin-top: 1rem;
  max-width: none !important;
  object-fit: contain;
  width: 3.75rem !important;
}

@media (max-width: 767.98px) {
  .how-it-works-phone-stage {
    min-height: 25.5rem;
  }

  .how-it-works-phone-pose {
    zoom: .72;
  }

  .how-it-works-step {
    align-items: center;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .how-it-works-step > .text-center {
    margin-bottom: 0;
    width: 100%;
  }

  .how-it-works-step > :last-child {
    max-width: 32rem;
    width: 100%;
  }

  .how-it-works-phone--redemption .how-it-works-phone-stage {
    min-height: 26.25rem;
  }

  .how-it-works-phone--redemption .screen {
    padding: .85rem;
  }

  .how-it-works-phone--redemption .how-it-works-redemption-image {
    max-height: 7.25rem;
    object-fit: contain;
  }

  .how-it-works-phone--redemption .how-it-works-redemption-title {
    margin: .7rem 0;
  }

  .how-it-works-phone--redemption .how-it-works-redemption-message {
    padding: .75rem;
  }

  .how-it-works-phone--redemption .how-it-works-redemption-qr {
    height: 3.25rem !important;
    margin-top: .7rem;
    width: 3.25rem !important;
  }
}

@media (max-width: 399.98px) {
  .how-it-works-phone-stage {
    min-height: 24rem;
  }

  .how-it-works-phone-pose {
    zoom: .68;
  }
}

/* HERO - FORM testimonial logo */

.hero-form-testimonial-logo {
  height: auto;
  max-height: 1.875rem;
  max-width: 100%;
  width: auto;
}

/* TEXT 01 table of contents */

[data-text-01-content] section[data-chapter] {
  scroll-margin-top: 7rem;
}

[data-text-01-toc-list] {
  grid-template-columns: minmax(0, 1fr);
}

[data-text-01-toc-list] li {
  min-width: 0;
}

[data-text-01-module] > .container > .row {
  position: relative;
}

@media (min-width: 768px) {
  [data-text-01-toc] {
    bottom: 0;
    left: calc(50% - 50vw + 2rem);
    position: absolute;
    top: 0;
    width: clamp(7rem, 13vw, 18rem);
    z-index: 2;
  }

  [data-text-01-toc] .text-01-toc-content {
    position: sticky;
    top: calc(var(--text-01-toc-offset, 0px) + 1.5rem);
  }
}

@media (min-width: 992px) {
  [data-text-01-toc] {
    width: clamp(7rem, 16vw, 22rem);
  }
}

@media (max-width: 767.98px) {
  [data-text-01-toc] {
    display: none !important;
  }
}

[data-text-01-toc-list] a.active {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}

[data-text-01-toc-list] a.is-truncated {
  position: relative;
}

[data-text-01-toc-list] a.is-truncated::after {
  color: var(--violet);
  content: attr(data-toc-label);
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: transform 1.5s 0.2s ease-in-out, opacity 0s;
  white-space: nowrap;
}

[data-text-01-toc-list] a.is-truncated:hover {
  color: transparent !important;
  text-overflow: clip;
}

[data-text-01-toc-list] a.is-truncated:hover::after {
  opacity: 1;
  transform: translateX(var(--text-01-toc-overflow));
}

@media (prefers-reduced-motion: reduce) {
  [data-text-01-toc-list] a.is-truncated:hover::after {
    transition: none;
  }
}

/* BLOG - ARTICLE table of contents */

[data-blog-article-content] section[data-chapter] {
  scroll-margin-top: 7rem;
}

[data-blog-article-toc-list] {
  grid-template-columns: minmax(0, 1fr);
}

[data-blog-article-toc-list] li {
  min-width: 0;
}

[data-blog-article-module] > .container > .row {
  position: relative;
}

@media (min-width: 1200px) {
  [data-blog-article-toc] {
    bottom: 0;
    left: calc(50% - 50vw + 2rem);
    position: absolute;
    top: 0;
    width: clamp(7rem, 16vw, 22rem);
    z-index: 2;
  }

  [data-blog-article-toc] .blog-article-toc-content {
    position: sticky;
    top: calc(var(--blog-article-toc-offset, 0px) + 1.5rem);
  }
}

@media (max-width: 1199.98px) {
  [data-blog-article-toc] {
    display: none !important;
  }
}

[data-blog-article-toc-list] a.active {
  color: var(--text-dark) !important;
  font-weight: 600 !important;
}

[data-blog-article-toc-list] a.is-truncated {
  position: relative;
}

[data-blog-article-toc-list] a.is-truncated::after {
  color: var(--violet);
  content: attr(data-toc-label);
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: transform 1.5s 0.2s ease-in-out, opacity 0s;
  white-space: nowrap;
}

[data-blog-article-toc-list] a.is-truncated:hover {
  color: transparent !important;
  text-overflow: clip;
}

[data-blog-article-toc-list] a.is-truncated:hover::after {
  opacity: 1;
  transform: translateX(var(--blog-article-toc-overflow));
}

@media (prefers-reduced-motion: reduce) {
  [data-blog-article-toc-list] a.is-truncated:hover::after {
    transition: none;
  }
}

/* Responsive styles includes */

/* Medium Breakpoint Styles */

@media (max-width: 1199.98px) {
  
}
/* Medium Breakpoint Styles */

@media (max-width: 991.98px) {
  .tab-content>.tab-pane.accordion-item {
    display: block !important; 
  }
  
  .tab-content>.tab-pane.accordion-item.fade {
    opacity: 1 !important; 
  }
  
  .tab-content>.tab-pane.accordion-item .accordion-button {
    display: flex;
  }
  
  .tab-content>.tab-pane.accordion-item .accordion-collapse {
    padding: 0;
  }
  
  .tab-content>.tab-pane.accordion-item .accordion-collapse .content-wrapper {
    padding: 1.25rem 1.5rem 1.75rem;
  }
  
  footer .container>.row:not(:last-child) {
    margin-bottom: var(--section-padding-minor) !important;
  }
}

@media (min-width: 992px) {
  .tab-content>.tab-pane.accordion-item {
    border-bottom: 0;
  }  
  
  .tab-content>.tab-pane.accordion-item .collapse {
    display: block !important;
  }
}
/* Small Breakpoint Styles */

@media (max-width: 767.98px) {
  
  .section.minor-section {
    padding: var(--section-padding-minor-sm) 0;
  }
  
  .step-row > div:not(:last-child) .card:after {
    display: none !important;
  }
  
  footer .container>.row:not(:last-child) {
    margin-bottom: var(--section-padding-sm) !important;
  }
}

@media (min-width: 768px) {

}