/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Tools — Design tokens
Custom-property layer (brand ramps, text/surface scales, borders, radius,
shadows, motion). Derived from theme fields via color-mix() so a Brand Kit
change re-derives the whole system. Must come before objects/elements/components
so every later layer can consume the tokens.
*/












body {

  /* ===== Brand token bases (canonical) ===== */
  --primary-base:     #014F36;
  --secondary-base:   #1E2429;
  --tertiary-base:    #72FF98;
  --interactive-base: #29333C;

  /* ===== Surfaces ===== */
  --surface-0:      #FFFFFF;
  --surface-1:      #FAFAFC;
  --surface-2:      #F4F5F5;
  --surface-dark:   #000000;
  --surface-dark-2: color-mix(in srgb, var(--surface-dark) 92%, var(--primary-base));

  /* Card/panel surface — the base a module's inner cards paint onto. Defaults to
     surface-0 so nothing changes until a per-module colour mode remaps it; the
     Light/Dark toggle (.cm-light / .cm-dark, css/components/_surfaces.css §5)
     flips it so cards read correctly on either base. */
  --surface-card:   var(--surface-0);

  /* ===== Brand ramps (tint into surface-0, shade toward black) ===== */
  --primary-4:      color-mix(in srgb, var(--primary-base) 4%,  var(--surface-0));
  --primary-10:     color-mix(in srgb, var(--primary-base) 10%, var(--surface-0));
  --primary-25:     color-mix(in srgb, var(--primary-base) 25%, var(--surface-0));
  --primary-deep:   color-mix(in srgb, var(--primary-base) 85%, black);

  --secondary-4:    color-mix(in srgb, var(--secondary-base) 4%,  var(--surface-0));
  --secondary-10:   color-mix(in srgb, var(--secondary-base) 10%, var(--surface-0));
  --secondary-25:   color-mix(in srgb, var(--secondary-base) 25%, var(--surface-0));
  --secondary-deep: color-mix(in srgb, var(--secondary-base) 85%, black);

  --tertiary-4:     color-mix(in srgb, var(--tertiary-base) 4%,  var(--surface-0));
  --tertiary-10:    color-mix(in srgb, var(--tertiary-base) 10%, var(--surface-0));
  --tertiary-25:    color-mix(in srgb, var(--tertiary-base) 25%, var(--surface-0));
  --tertiary-deep:  color-mix(in srgb, var(--tertiary-base) 85%, black);

  --interactive-4:    color-mix(in srgb, var(--interactive-base) 4%,  var(--surface-0));
  --interactive-10:   color-mix(in srgb, var(--interactive-base) 10%, var(--surface-0));
  --interactive-25:   color-mix(in srgb, var(--interactive-base) 25%, var(--surface-0));
  --interactive-deep: color-mix(in srgb, var(--interactive-base) 85%, black);

  /* ===== Text scale ===== */
  --text-1:         #000000;
  --text-2:         color-mix(in srgb, var(--text-1) 78%, var(--surface-0));
  --text-3:         color-mix(in srgb, var(--text-1) 55%, var(--surface-0));
  --text-on-dark-1: #FFFFFF;
  --text-on-dark-2: color-mix(in srgb, var(--text-on-dark-1) 75%, transparent);

  /* ===== Borders ===== */
  --border-subtle:  color-mix(in srgb, var(--surface-dark) 10%, transparent);
  --border-default: color-mix(in srgb, var(--surface-dark) 18%, transparent);

  /* ===== Radius ===== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ===== Shadows — layered, soft, low-alpha ===== */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, .03), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .10), 0 24px 60px rgba(15, 23, 42, .08);

  /* Legacy shadow aliases — re-pointed onto the new scale (do not break consumers) */
  --light-shadow: var(--shadow-sm);
  --dark-shadow:  var(--shadow-md);

  /* ===== Motion ===== */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
  .dnd-section .row-fluid > * + * {
    margin-top: 30px;
  }
}

/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* Fonts */
/*
  The legacy display @font-face family that used to live here was removed during
  the geekify rebrand: its src files lived in a /fonts/ directory that does not
  ship with the theme, so the whole family was dead weight.

  Theme fonts now load via the theme's global font fields (fields.json ->
  global_fonts / typography), which use font_set "GOOGLE" with
  load_external_fonts enabled (Space Grotesk). No local @font-face is required.

  This file is still included by css/main.css; it is intentionally left
  as a comment-only placeholder so the include keeps resolving.
  (Do not write literal HubL tag delimiters in a CSS /* */ comment — HubL does
  not honour CSS comments, so it would try to execute them and break the build.)
*/
body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a,
a:hover {
  cursor: pointer;
  text-decoration: none;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
}

/* Lists */

ul,
ol {
  margin: 0 0 20px;
  padding-left: 1rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
@media screen and (max-width:767px) {
  .button {
    width: 100%;
    margin: 0;
    /* Phase 5: ~44px comfortable touch target on phones (Phase 3 floor was 24px). */
    min-height: 44px;
  }
  .button + .button {
    margin-top: 1rem;
    margin-left: 0 !important;
  }
}

@media screen and (min-width:768px) {
  .button + .button {
    margin-left: 1rem;
  }
}

.custom-button__inner {
  flex-wrap: wrap;
}

.button {
  text-align: center;
  white-space: nowrap;
  margin-top: 1rem;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form .hs-input {
  width: 100% !important;
}

.hs_submit {
  text-align: center; 
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  /* A11y (WCAG 1.4.3): hover/focus background becomes brand teal (see
     theme-overrides.css); dark token keeps ~7:1 vs the prior white (~2.5:1). */
  color: var(--dark-color);
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

@media screen and (max-width: 767px) {
  form input[type=submit],
  form .hs-button {
    width: 100%;
  }
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Phase 5: on small screens let a wide table scroll horizontally inside its own
   box instead of forcing the whole page to overflow. (Replaces the unused
   stacktable vendor library, now removed.) */
@media (max-width: 767px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header DND sections */





html:not(.hs-inline-edit) [data-global-resource-path*='header'] {
  position: sticky;
  top: 0;
  z-index: 9;
}

html:not(.hs-inline-edit):not(.lity-active) [data-global-resource-path*='header'] {
  position: sticky;
  top: 0;
  z-index: 99999;
}

.header .row-fluid {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.header .row-fluid > * + * {
  margin-top: 0 !important;
}

/* Navigation skipper */

/* Screen-reader-only by default: removed from the visual layout (not just moved
   off-screen) so it never renders on first install, while staying in the DOM
   and focus order for keyboard/AT users. */
.header__skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reveal only on keyboard focus (WCAG 2.4.1 / 2.4.11): render above the header
   with a solid, high-contrast background so it is legible and not obscured. */
.header__skip:focus,
.header__skip:focus-visible,
.header__skip:active {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--dark-color);
  color: var(--light-color);
  padding: 0.75rem 1rem;
}

/* Logo */

/* The header uses the default @hubspot/logo module (renders as
   .hs_cos_wrapper_type_logo), which pulls the brand logo at its native
   dimensions — often far too large for a header. Cap the height so any logo
   renders sensibly on first install; the global rule in _default-modules.css
   already caps width and preserves aspect ratio. */
.header .hs_cos_wrapper_type_logo img {
  max-height: 48px;
  width: auto !important;
}

@media (max-width: 767px) {
  .header .hs_cos_wrapper_type_logo img {
    max-height: 40px;
  }
}

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}




.header__search .hs-search-field__input {
  
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E");
    background-position: center right 15px;
    background-repeat: no-repeat;
  
  height: 45px;
  padding: 0 0.7rem;
}




.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: var(--surface-0);
  border: 2px solid var(--border-default);
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid var(--border-default);
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: var(--text-1);
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

.header .button {
  display: block;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
  .menu--desktop .menu__wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .menu--desktop .menu__wrapper li * {
    font-size: 1.125rem;
    line-height: 150%;
    text-transform: none;
  }
  .header .dnd-column {
    width: max-content !important; 
  }
  .header .dnd-column[class*='cell_16950585654963'] {
    width: 100% !important; 
  }
  .header .button {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid var(--border-subtle);
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 1px solid var(--border-default);
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--text-1);
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid var(--border-subtle);
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }}

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: var(--surface-1);
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19' viewBox='0 0 24 19'%3E%3Cg stroke='%23000000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='2' y1='2' x2='22' y2='2'/%3E%3Cline x1='2' y1='9.5' x2='22' y2='9.5'/%3E%3Cline x1='2' y1='17' x2='22' y2='17'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E");
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='19' viewBox='0 0 24 19'%3E%3Cg stroke='%23000000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='3' y1='2' x2='21' y2='17'/%3E%3Cline x1='21' y1='2' x2='3' y2='17'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}

/* ==========================================================================
   Scrolled state (Phase D) — dark glass once the page scrolls past a small
   threshold. The `.header--scrolled` class is toggled by a passive scroll
   listener in js/main.js (no library). Main-nav links flip to on-dark ink so
   they stay legible on the glass (Phase 3 contrast preserved). Tokens only.
   ========================================================================== */

.header--scrolled {
  background-color: color-mix(in srgb, var(--surface-dark) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: background-color var(--transition-base);
}

.header--scrolled .hs-menu-wrapper a,
.header--scrolled .menu__wrapper a,
.header--scrolled .header__navigation a:not(.button):not(.hs-button):not(.cta_button) {
  color: var(--text-on-dark-1);
}
/* Site footer — Phase D (design plan §5 Phase D "Header/footer").

   Dark footer preset: styled menu columns (kills the raw nested-bullets tree),
   social row, and a copyright rule. Tokens only, so a Brand Kit change
   re-derives it (the rebrand drill). This is the authoritative footer styling —
   the former stub in theme-overrides.css §8 (which, loading after main.css,
   would otherwise win) was reduced to a pointer so this component owns it. */

.footer {
  background-color: var(--surface-dark);
  color: var(--text-on-dark-2);
}

/* Headings brighten to full white; body / legal copy stays at 75% white. */
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
  color: var(--text-on-dark-1);
}

.footer p,
.footer li,
.footer label,
.footer span {
  color: var(--text-on-dark-2);
}

/* Running-content links (e.g. privacy / terms in the copyright line). */
.footer p a {
  color: var(--tertiary-color);
}
.footer p a:hover,
.footer p a:focus {
  color: color-mix(in srgb, var(--tertiary-color) 78%, white);
}

/* ==========================================================================
   Menu columns — vertical lists, no bullets, flattened sub-menus.
   ========================================================================== */

.footer .hs-menu-wrapper > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer .hs-menu-wrapper ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}

.footer .hs-menu-wrapper a {
  display: inline-block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-on-dark-2);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer .hs-menu-wrapper a:hover,
.footer .hs-menu-wrapper a:focus {
  color: var(--tertiary-color);
}

/* Flatten the nested tree: sub-menus render as a plain indented list inline in
   the column (not an absolutely-positioned flyout with markers). */
.footer .hs-menu-wrapper .hs-menu-children-wrapper {
  list-style: none;
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  padding: 0 0 0 0.85rem;
  min-width: 0;
  opacity: 1;
  visibility: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.footer .hs-menu-wrapper .hs-menu-children-wrapper a {
  font-size: 0.875rem;
}

/* ==========================================================================
   Social icons row.
   ========================================================================== */

.footer .social-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.footer .social-link-wrapper svg {
  fill: var(--text-on-dark-2);
  transition: fill var(--transition-fast);
}
.footer .social-link-wrapper:hover svg,
.footer .social-link-wrapper:focus svg {
  fill: var(--tertiary-color);
}

/* ==========================================================================
   Copyright / legal row — white/50 text over a white/10 top rule.
   (footer.html renders the legal content as the second dnd_section.)
   ========================================================================== */

.footer .dnd-section + .dnd-section {
  border-top: 1px solid color-mix(in srgb, var(--text-on-dark-1) 10%, transparent);
}

.footer .dnd-section + .dnd-section p,
.footer .footer__microcopy {
  color: color-mix(in srgb, var(--text-on-dark-1) 50%, transparent);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Newsletter form — input + submit compose on one row on desktop, stacked
   below 768px (input flex-1, pill button).
   ========================================================================== */

/* Phase G: HubSpot injects `.hs-form-field > label` (slate #33475b) which
   out-specifies `.footer label` (0,2,1 vs 0,1,1) → invisible labels on the dark
   footer. Scope higher (0,3,2) so newsletter labels + help text stay legible.
   Tokens only — rebrand-safe, no !important. */
.footer form.hs-form .hs-form-field > label,
.footer form.hs-form .hs-form-field label {
  color: var(--text-on-dark-2);
}
.footer form.hs-form .hs-field-desc,
.footer form.hs-form .hs-form__field-desc {
  color: color-mix(in srgb, var(--text-on-dark-1) 60%, transparent);
}

@media (min-width: 768px) {
  .footer form.hs-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .footer form.hs-form .hs-form-field {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 0;
  }
  .footer form.hs-form .hs_submit,
  .footer form.hs-form .hs-submit {
    flex: 0 0 auto;
  }
  .footer form.hs-form .hs-button,
  .footer form.hs-form input[type="submit"] {
    width: auto;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
}
[class*='__content-link'] {
  margin-top: 30px;
}

.view-all {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.view-all span svg {
  height: .5rem;
  width: auto;
  margin-left: 1rem;
}

/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}


/* Horizontal menu */
/*
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 1100px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

footer .hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */
/*
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 1100px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.widget-type-menu > div:not(.mega-menu) .hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}


.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 1100px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}*/

.freeze-scroll {
  overflow: hidden; 
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
.isotope-pager {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.isotope-pager > * + * {
  margin-left: 1rem;
}

.isotope-pager a {
  padding: .25rem .5rem;
  border-radius: 8px;
}

.isotope-pager a.active {
  background-color: var(--primary-color);
  color: white;
}

.listing-search {
  position: relative;
}

.listing-search input {
  padding: 1rem;
  appearance: none;
  width: 100%;
}

.search-submit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  /* Reset the global button chrome (border/padding) applied to <button>. */
  background: transparent;
  border: none;
  /* A11y (WCAG 2.5.8): keep at least a 24x24 hit area. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  cursor: pointer;
}

.listing__filters {
  margin-bottom: 60px;
  display: flex;
  width: 100%;
}

.listing__filter-groups {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.listing__filter-groups > *,
.listing__filters > * {
  width: 100%;
}

.listing__filter-groups > * + *,
.listing__filters > * + * {
  margin-left: 20px;
}

.listing__filters-wrap {
  max-height: 0;
  height: auto;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

.listing__filters-wrap.active {
  max-height: 2000px;
  visibility: visible;
  opacity: 1;
}

.listing__filters fieldset {
  border: none;
  appearance: none;
  margin: 0 auto;
  padding: 0;
}

.listing__filters fieldset > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
}

.listing__filters fieldset > ul li {
  display: block;
  padding: 1rem 2rem;
}

.listing__filters label {
  cursor: pointer;
}

.listing__filters fieldset > ul li input {
  display: none;
}

.listing__filters fieldset > label h4 {
  margin: 0;
  text-align: left;
  text-transform: uppercase;
}

.listing__filters fieldset > label {
  transition: all .5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

.blog .listing__filters label span,
.blog .listing__filters label {
  display: block;
}

.blog .listing-filters__group {
  position: relative;
}

.blog .listing__filter-groups > * + * {
  margin-left: 20px;
}

.blog .listing__filters label h4 {
  display: block;
  padding: 1rem 2rem;
  font-size: 1rem;
}

.blog .listing__filters label + ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  z-index: 99;
  border-left: 2px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.blog .listing__filters fieldset.active h4 {
  border-bottom: none;
}

.blog .listing__filters fieldset > ul li {
  border: none;
  padding: 5px 2rem;
  display: block;
  width: 100%;
}

.listing__search button {
  padding: 19px 44px;
}

.body-container--podcasts-post #hs_cos_wrapper_post_dnd_area-dnd_partial-2-module-2_ {
  text-align: center;
}

@media (max-width: 767px) {
  .listing__filters {
    flex-direction: column;
  }

  .listing-filters__group {
    margin-bottom: 20px !important;
  }

  .listing__search {
    margin-left: 0;
  }
}

@media (max-width: 500px) {
  .listing__filter-groups {
    flex-direction: column;
  }

  .listing-filters__group {
    margin-left: 0 !important;
  }
}

/* Neutral empty-state for data-driven listing modules (blogs, team, hubdb, map)
   shown when no blog/HubDB/locations data is connected yet. */
.listing-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--dark-color);
  opacity: 0.6;
  border: 1px dashed rgba(15, 23, 42, 0.2);
  border-radius: 12px;
}

/* Card system (Phase D): shared .card primitive, .glass-light / .glass-dark
   panels, and the base box for concrete card modules. */

/* Card system — Phase D (design plan §1d/§1e, §4 "Cards", §5 Phase D)

   A shared card primitive + glass panels, plus the base box treatment for the
   concrete card modules that don't set their own ID-scoped background
   (blog / team / hubdb resource). Cards that DO paint their own background from
   an editor field (pricing, hubdb custom styles, content-block, flex-cards)
   pull the same border / radius / shadow tokens from their own module CSS so
   an editor colour still wins.

   Every value derives from the Phase A token layer (css/tools/_tokens.css),
   which is color-mix()'d from theme.global_colors.* — a Brand Kit change
   re-derives the whole set (the rebrand drill). The only literals are the
   blur radius and the white/transparent color-mix anchors the spec prescribes. */

/* ==========================================================================
   1. Reusable primitive
   ========================================================================== */

.card {
  background-color: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Hover-elevate only when the whole card is itself a link wrapper (so a static
   card doesn't lift on stray hovers). Applies to the primitive, the concrete
   link-wrapped cards, and an explicit .card--link opt-in. */
a.card:hover,
.card--link:hover,
a.blog-card:hover,
a.team-card:hover,
a.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* The global reduced-motion block (theme-overrides.css) zeroes transition
   DURATION only; kill the lift itself so hovers don't translate. */
@media (prefers-reduced-motion: reduce) {
  a.card:hover,
  .card--link:hover,
  a.blog-card:hover,
  a.team-card:hover,
  a.resource-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   2. Glass panels — for cards sitting on mesh / dark surfaces.
   ========================================================================== */

/* Light glass: blurred white gradient + hairline + soft shadow (use on mesh /
   image surfaces). */
.glass-light {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface-0) 85%, transparent),
    color-mix(in srgb, var(--surface-0) 55%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--surface-0) 55%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
}

/* Dark glass: translucent white fill + white/10 hairline (use on dark
   surfaces — replaces the Phase C inline glass on icon-blocks). */
.glass-dark {
  background-color: color-mix(in srgb, var(--text-on-dark-1) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-on-dark-1) 10%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

/* ==========================================================================
   3. Base box for the concrete card modules that don't paint their own bg.
      (blog / team / hubdb resource — pricing & content-block handle their own
      in module CSS so their editor colour fields still win.)
   ========================================================================== */

.blog-card,
.team-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

/* Section surface system (Phase C). Placed last in the components layer so its
   class-level ink flips win ties over module component CSS; module ID-scoped
   colors (intentional) still win, and tools/theme.css (utilities) still comes after.
*/



/* ==========================================================================
   1. Shared layering — every surface. Pattern/glow on ::before (behind content,
      non-interactive); grain on its own ::after; content stacks above both.
      isolation:isolate keeps the ::before z-index local so it never rises above
      a neighbouring section.
   ========================================================================== */

[class*="surface--"] {
  position: relative;
  isolation: isolate;
  background-color: var(--bg-base, transparent);
}

[class*="surface--"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Glow spots first, pattern lines under them. Both gradient families encode
     their own geometry (radial extent / repeating stops), so no background-size
     or -repeat coordination is needed — default (auto / repeat) fills the box. */
  background-image: var(--bg-glow, none), var(--bg-line, none);

  /* Fade-mask hook — OFF by default (mask:none = fully shown). Phase F sets
     --bg-mask to a fade gradient and, for dashed/dotted patterns, adds a second
     mask layer, then flips the composite to intersect / source-in to trim the
     pattern. Both prefixed and unprefixed properties are emitted per spec. */
  -webkit-mask-image: var(--bg-mask, none);
          mask-image: var(--bg-mask, none);
  -webkit-mask-composite: var(--bg-mask-composite-wk, source-over);
          mask-composite: var(--bg-mask-composite, add);
}

/* Content (the section's .row-fluid) rides above the decorative layers. */
[class*="surface--"] > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   2. Grain — composable, on its own ::after so a pattern's mask never punches
      holes in the noise. Achromatic (feColorMatrix saturate 0) so it adds no
      hue; intensity is a single opacity knob (Phase F "noise intensity").
   ========================================================================== */

.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--bg-noise-opacity, 0.035);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='ns'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ns)'/%3E%3C/svg%3E");
}

/* Grain reads a touch stronger on dark (matches the ~3.5% light / ~5% dark spec). */
.surface--dark.bg-noise::after,
.surface--dark-mesh.bg-noise::after {
  opacity: var(--bg-noise-opacity, 0.05);
}

/* ==========================================================================
   3. Surface presets — each just sets layer variables.
   ========================================================================== */

/* Plain — the base white surface. */
.surface--plain { --bg-base: var(--surface-0); }

/* Tinted — subtle brand wash (4% primary into surface-0). */
.surface--tinted { --bg-base: var(--primary-4); }

/* Mesh — light base + 2–3 low-opacity brand glow spots, off-corner, static. */
.surface--mesh {
  --bg-base: var(--surface-0);
  --bg-glow:
    radial-gradient(60% 55% at 12% 18%, color-mix(in srgb, var(--primary-base) 8%, transparent), transparent 70%),
    radial-gradient(55% 50% at 88% 12%, color-mix(in srgb, var(--interactive-base) 7%, transparent), transparent 72%),
    radial-gradient(52% 52% at 78% 88%, color-mix(in srgb, var(--tertiary-base) 6%, transparent), transparent 70%);
}

/* Dark — dark base; ink auto-flips below. */
.surface--dark { --bg-base: var(--surface-dark); }

/* Dark mesh — subtly primary-tinted dark base + slightly brighter glow spots. */
.surface--dark-mesh {
  --bg-base: var(--surface-dark-2);
  --bg-glow:
    radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%),
    radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%),
    radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%);
}

/* Grid — additive 60px blueprint lines; composable with any surface. The 60px
   period lives in the repeating-gradient stops (not background-size), so no
   per-layer size coordination is needed. Phase F reuses --bg-line / --bg-line-size
   for its grid / dashed / dots / circuit / diagonal variants. */
.surface--grid {
  --bg-line-size: 60px;
  --bg-line-color: color-mix(in srgb, var(--surface-dark) 5%, transparent);
  --bg-line:
    repeating-linear-gradient(to right,  var(--bg-line-color) 0 1px, transparent 1px var(--bg-line-size)),
    repeating-linear-gradient(to bottom, var(--bg-line-color) 0 1px, transparent 1px var(--bg-line-size));
}

/* Blueprint lines lift to ~8% white when the grid sits on a dark surface. */
.surface--dark.surface--grid,
.surface--dark-mesh.surface--grid {
  --bg-line-color: color-mix(in srgb, var(--text-on-dark-1) 8%, transparent);
}

/* Glass panels for cards on mesh/dark surfaces are delivered in Phase D as
   .glass-light / .glass-dark. Until then, sections that need the look (e.g.
   icon-blocks) set the translucent bg + white/10 border + --radius-xl inline on
   the module. Reserved here so Phase D has a single home:
   .glass-light { } .glass-dark { }  (Phase D) */

/* ==========================================================================
   4. Ink auto-flip on dark surfaces (plan §1h, §4).
      Body ink is set on the CONTAINER so descendants inherit it — this keeps a
      <span> inside a coloured button on the button's colour (cascade), which a
      blanket `.surface--dark span {}` rule would wrongly clobber. Headings,
      eyebrow, links and outline buttons then override explicitly.
      The Phase 3 contrast-aware *filled* button logic (css/tools/theme.css) is
      intentionally left untouched.
   ========================================================================== */

.surface--dark,
.surface--dark-mesh {
  color: var(--text-on-dark-2);
}

/* Block text — asserted explicitly so a stray element colour can't leave it dark. */
.surface--dark :is(p, li, label, figcaption, blockquote, dt, dd, td, th),
.surface--dark-mesh :is(p, li, label, figcaption, blockquote, dt, dd, td, th) {
  color: var(--text-on-dark-2);
}

/* Headings brighten to full on-dark ink. */
.surface--dark :is(h1, h2, h3, h4, h5, h6),
.surface--dark-mesh :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-on-dark-1);
}

/* Eyebrow kicker → the Phase B on-dark treatment (tertiary ≈ 9.5:1 on the dark base). */
.surface--dark .eyebrow,
.surface--dark-mesh .eyebrow {
  color: var(--tertiary-color);
}

/* Running-content links → tertiary; hover lifts toward white. Buttons excluded. */
.surface--dark a:not(.button):not(.hs-button):not(.cta_button),
.surface--dark-mesh a:not(.button):not(.hs-button):not(.cta_button) {
  color: var(--tertiary-color);
}
.surface--dark a:not(.button):not(.hs-button):not(.cta_button):hover,
.surface--dark a:not(.button):not(.hs-button):not(.cta_button):focus,
.surface--dark-mesh a:not(.button):not(.hs-button):not(.cta_button):hover,
.surface--dark-mesh a:not(.button):not(.hs-button):not(.cta_button):focus {
  color: color-mix(in srgb, var(--tertiary-color) 78%, white);
}

/* Outline / ghost buttons (plan §1h — fixes the invisible hero "Learn more").
   Compound with .dnd-section to clear the per-style ghost rules in
   css/tools/theme.css (0,3,0 → we need 0,4,0) without adding !important. Base bg
   stays transparent (theme sets that with its own !important — no conflict). The
   hover *fill* is left to the theme (its !important owns it); we only ensure the
   hover *text* stays white so it is legible on whatever brand fill lands. */
.dnd-section.surface--dark .button.button--ghost,
.dnd-section.surface--dark .hs-button.button--ghost,
.dnd-section.surface--dark .cta_button.button--ghost,
.dnd-section.surface--dark-mesh .button.button--ghost,
.dnd-section.surface--dark-mesh .hs-button.button--ghost,
.dnd-section.surface--dark-mesh .cta_button.button--ghost {
  color: var(--text-on-dark-1);
  border-color: color-mix(in srgb, var(--text-on-dark-1) 80%, transparent);
}
.dnd-section.surface--dark .button.button--ghost:hover,
.dnd-section.surface--dark .hs-button.button--ghost:hover,
.dnd-section.surface--dark .cta_button.button--ghost:hover,
.dnd-section.surface--dark-mesh .button.button--ghost:hover,
.dnd-section.surface--dark-mesh .hs-button.button--ghost:hover,
.dnd-section.surface--dark-mesh .cta_button.button--ghost:hover {
  color: var(--text-on-dark-1);
}

/* Phase G: ghost/outline buttons on LIGHT branded surfaces (tinted / mesh).
   Their brand-colour text+border — esp. primary teal (~2.3:1) and tertiary mint —
   can drop below contrast on a light wash. Flip base text to dark ink + a subtle
   border so they stay legible; the theme still owns the hover fill (its !important).
   Mirrors the dark rule above; compound with .dnd-section (0,4,0) to clear
   theme.css's per-style ghost rules without adding !important. */
.dnd-section.surface--tinted .button.button--ghost,
.dnd-section.surface--tinted .hs-button.button--ghost,
.dnd-section.surface--tinted .cta_button.button--ghost,
.dnd-section.surface--mesh .button.button--ghost,
.dnd-section.surface--mesh .hs-button.button--ghost,
.dnd-section.surface--mesh .cta_button.button--ghost {
  color: var(--text-1);
  border-color: color-mix(in srgb, var(--text-1) 30%, transparent);
}

/* Focus ring on dark (plan Phase C exit-check 4). The Phase 3 ring is
   --secondary-color (deep teal after the Phase G retune), which only clears ~3:1
   on the dark base; swap to --tertiary-color (~9.5:1) on dark for a comfortable
   margin. Keep the
   3px width + 2px offset. Compound with .dnd-section to beat `.button:focus-visible`
   (0,2,0). Colour only — the ring itself (Phase 3) is otherwise preserved. */
.dnd-section.surface--dark :focus-visible,
.dnd-section.surface--dark-mesh :focus-visible {
  outline-color: var(--tertiary-color);
}

/* ==========================================================================
   5. Per-module colour modes — the Light / Dark toggle (plan: per-module
      color_mode). A module's `color_mode` field → the color_mode_class() macro
      → .cm-light / .cm-dark on the module's per-instance #id wrapper.

      Themes the module's TEXT and its inner card/panel surfaces only (ink colour
      + the --surface-card / --border-* tokens). It intentionally does NOT paint
      the module's outer background, so the section/page background — or the
      module's own background field — shows through and stays in control; a colour
      the client set on the module still wins (its #id rule beats these class
      rules). Pair the mode with a matching backdrop (dark mode over a dark
      section, light mode over a light one).

      Deliberately SEPARATE selectors from the §3–4 section surfaces so a module
      opts in without inheriting the section and existing section-dark placements
      are untouched (CLAUDE.md rule #6). Ink values mirror §4. Declared AFTER §4 so
      a module's own mode wins by source order. Every value is a token /
      color-mix() (rebrand-safe); no new !important.
   ========================================================================== */

/* --- Dark --------------------------------------------------------------- */
.cm-dark {
  --surface-card:   color-mix(in srgb, var(--text-on-dark-1) 6%, transparent);
  --border-subtle:  color-mix(in srgb, var(--text-on-dark-1) 10%, transparent);
  --border-default: color-mix(in srgb, var(--text-on-dark-1) 20%, transparent);
  color: var(--text-on-dark-2);
}
.cm-dark :is(p, li, label, figcaption, blockquote, dt, dd, td, th) { color: var(--text-on-dark-2); }
.cm-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--text-on-dark-1); }
.cm-dark .eyebrow { color: var(--tertiary-color); }
.cm-dark a:not(.button):not(.hs-button):not(.cta_button) { color: var(--tertiary-color); }
.cm-dark a:not(.button):not(.hs-button):not(.cta_button):hover,
.cm-dark a:not(.button):not(.hs-button):not(.cta_button):focus {
  color: color-mix(in srgb, var(--tertiary-color) 78%, white);
}

/* --- Light (asserts dark ink so a forced-light module reads on a light backdrop,
       even when it sits inside a .surface--dark section) --------------------- */
.cm-light {
  --surface-card:   var(--surface-0);
  --border-subtle:  color-mix(in srgb, var(--surface-dark) 10%, transparent);
  --border-default: color-mix(in srgb, var(--surface-dark) 18%, transparent);
  color: var(--text-2);
}
.cm-light :is(p, li, label, figcaption, blockquote, dt, dd, td, th) { color: var(--text-2); }
.cm-light :is(h1, h2, h3, h4, h5, h6) { color: var(--text-1); }
.cm-light .eyebrow { color: var(--primary-color); }
.cm-light a:not(.button):not(.hs-button):not(.cta_button) { color: var(--interactive-color); }

/* Brand Background Engine (Phase F). Included after _surfaces.css so the
   .bg-preset-{n} rules win ties over the Phase C [class*="surface--"]::before
   they may sit alongside on dark presets. Emits .bg-preset-1..5 from the theme
   background_presets slots; every colour derives from tokens via color-mix().
*/


















  
  
  
  
  
  
  

  
  
  
    
  

  
  
  
    
  

  
  
  
  
  

  
  

  
    
    
  

  
  
  
  
    
    
  
  
    
    
  
  
    
    
  

  
  
  
  
    
  
  

.bg-preset-1 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-1 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(115% 115% at 100% 100%, color-mix(in srgb, var(--tertiary-base) 9%, transparent) 0%, transparent 62%), radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%), linear-gradient(to right, color-mix(in srgb, var(--text-on-dark-1) 8%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--text-on-dark-1) 8%, transparent) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 45px 45px, 45px 45px;
  
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, black 42%, transparent 85%);
          mask-image: radial-gradient(130% 100% at 50% 0%, black 42%, transparent 85%);
  
  
}


.bg-preset-1::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='ns'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ns)'/%3E%3C/svg%3E");
}


  
  
  
  
  
  
  

  
  
  
    
  

  
  
  
    
  

  
  
  
  
  

  
  

  
    
    
  

  
  
  
  
    
    
  
  
    
    
  
  
    
    
  

  
  
  
  
    
  
  

.bg-preset-2 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-2 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(115% 115% at 50% -10%, color-mix(in srgb, var(--primary-base) 17%, transparent) 0%, transparent 62%), radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%), radial-gradient(circle at center, color-mix(in srgb, var(--text-on-dark-1) 14%, transparent) 1px, transparent 1.5px);
  background-size: auto, auto, auto, auto, 32px 32px;
  
  -webkit-mask-image: radial-gradient(130% 100% at 50% 100%, black 42%, transparent 85%);
          mask-image: radial-gradient(130% 100% at 50% 100%, black 42%, transparent 85%);
  
  
}



  
  
  
  
  
  
  

  
  
  

  
  
  
    
  

  
  
  
  
  

  
  

  
    
    
  

  
  
  
  
  
    
    
  
  
    
    
  

  
  
  
  
    
  
  

.bg-preset-3 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-3 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%), linear-gradient(to right, color-mix(in srgb, var(--text-on-dark-1) 8%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--text-on-dark-1) 8%, transparent) 1px, transparent 1px);
  background-size: auto, auto, auto, 22px 22px, 22px 22px;
  
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, black 42%, transparent 85%);
          mask-image: radial-gradient(130% 100% at 50% 0%, black 42%, transparent 85%);
  
  
}



  
  
  
  
  
  
  

  
  
  
    
  

  
  
  
    
  

  
  
  
  
  

  
  

  
    
    
  

  
  
  
  
    
    
  
  
    
    
  
  
    
    
  

  
  
  
  
    
  
  

.bg-preset-4 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-4 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(115% 115% at 100% 0%, color-mix(in srgb, var(--secondary-base) 14%, transparent) 0%, transparent 62%), radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%), radial-gradient(circle at center, color-mix(in srgb, var(--text-on-dark-1) 14%, transparent) 1px, transparent 1.5px);
  background-size: auto, auto, auto, auto, 20px 20px;
  
  -webkit-mask-image: radial-gradient(130% 100% at 50% 100%, black 42%, transparent 85%);
          mask-image: radial-gradient(130% 100% at 50% 100%, black 42%, transparent 85%);
  
  
}


.bg-preset-4::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='ns'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ns)'/%3E%3C/svg%3E");
}


  
  
  
  
  
  
  

  
  
  
    
  

  
  
  
    
  

  
  
  
  
  

  
  

  
    
    
  

  
  
  
  
    
    
  
  
    
    
  
  
    
    
  

  
  
  
  
    
  
  

.bg-preset-5 {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-dark-2);
}

.bg-preset-5 > * {
  position: relative;
  z-index: 1;
}

.bg-preset-5::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(115% 115% at 100% 100%, color-mix(in srgb, var(--tertiary-base) 10%, transparent) 0%, transparent 62%), radial-gradient(60% 55% at 15% 12%, color-mix(in srgb, var(--primary-base) 16%, transparent), transparent 70%), radial-gradient(55% 55% at 85% 16%, color-mix(in srgb, var(--interactive-base) 18%, transparent), transparent 72%), radial-gradient(55% 55% at 72% 92%, color-mix(in srgb, var(--tertiary-base) 12%, transparent), transparent 70%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-on-dark-1) 9%, transparent) 0 1px, transparent 1px 28px);
  background-size: auto, auto, auto, auto, auto;
  
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, black 42%, transparent 85%);
          mask-image: radial-gradient(130% 100% at 50% 0%, black 42%, transparent 85%);
  
  
}




/* Blog post */

.blog-post {
  margin: 0 auto;
  max-width: 960px;
}

.blog-post__meta {
  margin-bottom: 1.4rem;
}

.blog-post__meta a {
  text-decoration: underline;
}

.blog-post__timestamp {
  display: block;
}

.blog-post__tags svg {
  height: auto;
  margin-right: 0.35rem;
  width: 15px;
}

.blog-post__tag-link {
  font-size: 0.875rem;
}

/* Blog related posts */

.blog-related-posts {
  background-color: #F8FAFC;
}

.blog-related-posts h2 {
  text-align: center;
}

/* Blog comments */

.blog-comments {
  margin: 0 auto;
  max-width: 680px;
}

.blog-comments .hs-submit {
  text-align: center;
}

.blog-comments .comment-reply-to {
  border: 0 none;
}

.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
  background-color: transparent;
  text-decoration: underline;
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* Colors */








body {
  --primary-color: #014F36;
  --secondary-color:  #1E2429;
  --tertiary-color:  #72FF98;
  --interactive-color:  #29333C;
  --light-color:  #FAFAFC;
  --dark-color:  #000000;
  
}














.button:not(.no-button), .hs-button:not(.no-button), .cta_button:not(.no-button) {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 17px;font-family: Montserrat, sans-serif; font-weight: 600;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Phase D: subtle hover lift + shadow on every button style (colour swaps are
   handled per-style by the macros above). */
.button:not(.no-button):hover,
.hs-button:not(.no-button):hover,
.cta_button:not(.no-button):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* The global reduced-motion block (theme-overrides.css) only zeroes transition
   DURATION, not the transform property itself — so kill the lift explicitly for
   users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .button:not(.no-button):hover,
  .hs-button:not(.no-button):hover,
  .cta_button:not(.no-button):hover {
    transform: none;
  }
}






  
    
    
    form input[type='submit'] {
      background-color: rgba(114, 255, 152, 1) !important;
      color: #1e2429;
      border-color: #72FF98;
    }
    form input[type='submit']:hover {
      background-color: rgba(rgba(0, 0, 0, 0), 1) !important;
      color: #72FF98;
      border-color: #72FF98;
    }
  


  
    
    
    form button[type='submit'][data-hsfc-id='Button'] {
      background-color: rgba(114, 255, 152, 1) !important;
      color: #1e2429;
      border-color: #72FF98;
    }
    form button[type='submit'][data-hsfc-id='Button']:hover {
      background-color: rgba(rgba(0, 0, 0, 0), 1) !important;
      color: #72FF98;
      border-color: #72FF98;
    }
  


  
    
    
    
      .button.button--primary,
      .hs-button.button--primary,
      .cta_button.button--primary {
        
          color: #FFFFFF;
        
          background-color: rgba(1, 79, 54, 1);
        
          background-opacity: 1;
        
          border-color: #014F36;
        
      }
      .button.button--primary.button--ghost,
      .hs-button.button--primary.button--ghost,
      .cta_button.button--primary.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(1, 79, 54, 1) !important;
              border-color: rgba(1, 79, 54, 1) !important;
            
          
            
          
            
          
      }
    
  
    
    
    
      .button.button--primary:hover,
      .hs-button.button--primary:hover,
      .cta_button.button--primary:hover {
        
          color: #ffffff;
        
          background-color: rgba(61, 166, 117, 100);
        
          background-opacity: 1;
        
          border-color: #3da675;
        
      }
      .button.button--primary.button--ghost:hover,
      .hs-button.button--primary.button--ghost:hover,
      .cta_button.button--primary.button--ghost:hover {
        
          
          
            color: #ffffff;
          
        
          
          
        
          
          
        
          
            border-color: #3da675;
            background-color: #3da675 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--secondary,
      .hs-button.button--secondary,
      .cta_button.button--secondary {
        
          color: #ffffff;
        
          background-color: rgba(41, 51, 60, 1);
        
          background-opacity: 1;
        
          border-color: #29333C;
        
      }
      .button.button--secondary.button--ghost,
      .hs-button.button--secondary.button--ghost,
      .cta_button.button--secondary.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(41, 51, 60, 1) !important;
              border-color: rgba(41, 51, 60, 1) !important;
            
          
            
          
            
          
      }
    
  
    
    
    
      .button.button--secondary:hover,
      .hs-button.button--secondary:hover,
      .cta_button.button--secondary:hover {
        
          color: #ffffff;
        
          background-color: rgba(30, 36, 41, 100);
        
          background-opacity: 1;
        
          border-color: #1e2429;
        
      }
      .button.button--secondary.button--ghost:hover,
      .hs-button.button--secondary.button--ghost:hover,
      .cta_button.button--secondary.button--ghost:hover {
        
          
          
            color: #ffffff;
          
        
          
          
        
          
          
        
          
            border-color: #1e2429;
            background-color: #1e2429 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--tertiary,
      .hs-button.button--tertiary,
      .cta_button.button--tertiary {
        
          color: #1e2429;
        
          background-color: rgba(114, 255, 152, 1);
        
          background-opacity: 1;
        
          border-color: #72FF98;
        
      }
      .button.button--tertiary.button--ghost,
      .hs-button.button--tertiary.button--ghost,
      .cta_button.button--tertiary.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(114, 255, 152, 1) !important;
              border-color: rgba(114, 255, 152, 1) !important;
            
          
            
          
            
          
      }
    
  
    
    
    
      .button.button--tertiary:hover,
      .hs-button.button--tertiary:hover,
      .cta_button.button--tertiary:hover {
        
          color: #72FF98;
        
          background-color: rgba(0, 0, 0, 0);
        
          background-opacity: 1;
        
          border-color: #72FF98;
        
      }
      .button.button--tertiary.button--ghost:hover,
      .hs-button.button--tertiary.button--ghost:hover,
      .cta_button.button--tertiary.button--ghost:hover {
        
          
          
            color: #72FF98;
          
        
          
          
        
          
          
        
          
            border-color: #72FF98;
            background-color: #72FF98 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--light,
      .hs-button.button--light,
      .cta_button.button--light {
        
          color: #000000;
        
          background-color: rgba(255, 255, 255, 100);
        
          background-opacity: 1;
        
          border-color: #ffffff;
        
      }
      .button.button--light.button--ghost,
      .hs-button.button--light.button--ghost,
      .cta_button.button--light.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(255, 255, 255, 100) !important;
              border-color: rgba(255, 255, 255, 100) !important;
            
          
            
          
            
          
      }
    
  
    
    
    
      .button.button--light:hover,
      .hs-button.button--light:hover,
      .cta_button.button--light:hover {
        
          color: #1e2429;
        
          background-color: rgba(114, 255, 152, 100);
        
          background-opacity: 1;
        
          border-color: #72FF98;
        
      }
      .button.button--light.button--ghost:hover,
      .hs-button.button--light.button--ghost:hover,
      .cta_button.button--light.button--ghost:hover {
        
          
          
            color: #1e2429;
          
        
          
          
        
          
          
        
          
            border-color: #72FF98;
            background-color: #72FF98 !important;
          
          
         
      }
    
  
    
    
    
      .button.button--dark,
      .hs-button.button--dark,
      .cta_button.button--dark {
        
          color: #72FF98;
        
          background-color: rgba(0, 0, 0, 1);
        
          background-opacity: 1;
        
          border-color: #000000;
        
      }
      .button.button--dark.button--ghost,
      .hs-button.button--dark.button--ghost,
      .cta_button.button--dark.button--ghost {
          background-color: transparent !important;
          
            
          
            
              color: rgba(0, 0, 0, 1) !important;
              border-color: rgba(0, 0, 0, 1) !important;
            
          
            
          
            
          
      }
    
  
    
    
    
      .button.button--dark:hover,
      .hs-button.button--dark:hover,
      .cta_button.button--dark:hover {
        
          color: #72FF98;
        
          background-color: rgba(41, 51, 60, 100);
        
          background-opacity: 1;
        
          border-color: #29333c;
        
      }
      .button.button--dark.button--ghost:hover,
      .hs-button.button--dark.button--ghost:hover,
      .cta_button.button--dark.button--ghost:hover {
        
          
          
            color: #72FF98;
          
        
          
          
        
          
          
        
          
            border-color: #29333c;
            background-color: #29333c !important;
          
          
         
      }
    
  
/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}