/* 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;
}

/* 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; */
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

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

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

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 {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

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

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;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* 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 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;
  color: #FFF;
}

/* 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;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* 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;
}

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

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.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;
}



  .hs-search-field__form {
    position: relative;
  }

  .header__search .hs-search-field__label {
    flex-basis: auto;
  }



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



  .header__search .hs-search-field__button {
    padding: 0;
    fill: #000;
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header__search .hs-search-field__button svg {
    height: 25px;
  }


.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: #FFF;
  border: 2px solid #D1D6DC;
  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 #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

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

@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;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    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: 2px solid;
  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 #494A52;
  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 #CED4DB;
    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;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: 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: #F8FAFC;
    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;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    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;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

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

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}
/* 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: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.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: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.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;
  top: 100%;
}

.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: 767px) {
  .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;
  }
}

/* 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%;
}

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

/* 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;
  }
}

/* Theme overrides */








/* 1a. Containers */




/* 1b. Colors */




/* 1c. Typography */


























/* 1d. Buttons */













/* 1e. Forms */









































/* 1f. Tables */













/* 1g. Website header */








/* 1h. Website footer */








.content-wrapper {
  max-width: px;
}

.dnd-section,
.content-wrapper--vertical-spacing {
  padding: px 1rem;
}

.dnd-section > .row-fluid {
  max-width: px;
}





html {
  font-size: ;
}

body {
  ;
  color: ;
  font-size: ;
}

/* Paragraphs */

p {
  ;
}

/* Anchors */

a {
  ;
  color: ;
}

a:hover,
a:focus {
  ;
  color: ;
}

a:active {
  ;
  color: ;
}

/* Headings */

h1,
.h1 {
  ;
  color: ;
  font-size: ;
  text-transform: ;
}

h2,
.h2 {
  ;
  color: ;
  font-size: ;
  text-transform: ;
}

h3,
.h3 {
  ;
  color: ;
  font-size: ;
  text-transform: ;
}

h4,
.h4 {
  ;
  color: ;
  font-size: ;
  text-transform: ;
}

h5,
.h5 {
  ;
  color: ;
  font-size: ;
  text-transform: ;
}

h6,
.h6 {
  ;
  color: ;
  font-size: ;
  text-transform: ;
}

/* Blockquote */

blockquote {
  border-left-color: #f8f8ff;
}





button,
.button,
.hs-button,
.hs-blog-post-listing__post-button {
  
  
  ;
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  border-radius: px;
  color: ;
  font-size: ;
  text-transform: ;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
.hs-button:hover,
.hs-button:focus,
.hs-blog-post-listing__post-button:hover,
.hs-blog-post-listing__post-button:focus {
  ;
  color: 

  
  
    
  


  rgba(#null, 1)

;
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  border-radius: px;
}

button:active,
.button:active,
.hs-button:active,
.hs-blog-post-listing__post-button:active {
  ;
  background-color: rgba(#null, 0.0);
  border-color: ;
}





form,
.submitted-message {
  ;
  ;
  border-top-left-radius: px;
  border-top-right-radius: px;
  border-bottom-left-radius: px;
  border-bottom-right-radius: px;
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  ;
}

/* Form title */

.form-title {
  ;
  ;
  ;
  border-top-left-radius: px;
  border-top-right-radius: px;
  border-bottom-left-radius: px;
  border-bottom-right-radius: px;
  font-size: ;
  color: ;
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
}


/* Labels */

form label {
  color: ;
}

/* Help text */

form legend {
  color: ;
}

/* 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 {
  
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  color: ;
  border-radius: px;
}

/* Form placeholder text */

::-webkit-input-placeholder {
  color: ;
}

::-moz-placeholder {
  color: ;
}

:-ms-input-placeholder {
  color: ;
}

::placeholder {
  color: ;
}

/* Inputs - date picker */

.hs-fieldtype-date .input .hs-dateinput:before {
  color: ;
}

.fn-date-picker td.is-selected .pika-button {
  background: #1a3dfc;
}

.fn-date-picker td .pika-button:hover {
  background-color: #1a3dfc !important;
}

.fn-date-picker td.is-today .pika-button {
  color: #1a3dfc;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  ;
  ;
  ;
  color: ;
  font-size: ;
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  border-radius: px;
  text-transform: ;
}

form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  color: ;
  ;
}

form input[type=submit]:active,
form .hs-button:active {
  background-color: rgba(#null, 0.0);
  border-color: ;
}





/* Table */

table {
  
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

/* Table cells */

td,
th {
  
  
  color: ;
}

/* Table header */

thead th {
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  color: ;
}

/* Table footer */

tfoot td {
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
  color: ;
}





.header {
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

.menu__link,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  color: ;
  font-family: ;
}

.menu__child-toggle-icon {
  border-top-color: ;
}

.menu .menu__link:hover,
.menu .menu__link:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
  color: ;
}

.menu__child-toggle-icon:hover,
.menu__child-toggle-icon:focus {
  border-top-color: ;
}

.menu .menu__link:active,
.header__language-switcher-label-current:active,
.header__language-switcher .lang_list_class li a:active {
  color: ;
}

.menu__child-toggle-icon:active {
  border-top-color: ;
}

.menu .menu__item--depth-1 > .menu__link--active-link:after {
  background-color: ;
}

@media (min-width: 767px) {
  .menu .menu__submenu,
  .header__language-switcher .lang_list_class {
    
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
  }

  .menu__submenu--level-2 > .menu__item:first-child:before {
    
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
  }
}

.menu__submenu .menu__link,
.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus {
  color: ;
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header__language-switcher .lang_list_class:before {
  border-bottom-color: ;
}

.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus,
.header__language-switcher .lang_list_class li:hover,
.menu__submenu--level-2 > .menu__item:first-child:hover:before,
.menu__submenu--level-2 > .menu__item:first-child.focus:before {
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header__language-switcher .lang_list_class.first-active::after {
  border-bottom-color: 

  
  
    
  


  rgba(#null, 1)

;
}

.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  font-family: ;
}

.header__language-switcher-label-current:after {
  border-top-color: ;
}

@media(max-width: 767px) {
  .header__navigation {
    background-color: 

  
  
    
  


  rgba(#null, 1)

;
  }

  .header__navigation-toggle svg,
  .menu-arrow svg {
    fill: ;
  }
}





.footer {
  background-color: 

  
  
    
  


  rgba(#null, 1)

;
}

/* Footer content */

.footer p,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer label,
.footer span,
.footer li,
.footer img {
  color: ;
}





.blog-post,
.blog-header__inner,
.blog-related-posts {
  padding: px 0;
}

/* Blog post */

.blog-post__meta a {
  color: ;
}

.blog-post__tag-link {
  color: ;
}

.blog-post__tag-link:hover,
.blog-post__tag-link:focus {
  color: ;
}

.blog-post__tag-link:active {
  color: ;
}

/* Blog related posts */

.blog-related-posts__title-link,
.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus,
.blog-related-posts__title-link:active {
  ;
  text-transform: ;
}

.blog-related-posts__title-link {
  color: ;
}

.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus {
  color: ;
}

.blog-related-posts__title-link:active {
  color: ;
}

/* Blog comments */

.blog-comments {
  margin-bottom: px;
}

#comments-listing .comment-reply-to {
  color: ;
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: ;
}

#comments-listing .comment-reply-to:active {
  color: ;
}





.hs-search-results__title {
  ;
  color: ;
}





/* Blog listing */

.hs-blog-post-listing__post-title-link,
.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus,
.hs-blog-post-listing__post-title-link:active {
  ;
  text-transform: ;
}

.hs-blog-post-listing__post-title-link {
  color: ;
}

.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus {
  color: ;
}

.hs-blog-post-listing__post-title-link:active {
  color: ;
}


.hs-blog-post-listing__post-tag,
.hs-blog-post-listing__post-author-name {
  color: ;
}

/* Blog pagination */

.hs-pagination__link-text,
.hs-pagination__link--number {
  color: ;
}

.hs-pagination__link:hover .hs-pagination__link-text,
.hs-pagination__link:focus .hs-pagination__link-text,
.hs-pagination__link--number:hover,
.hs-pagination__link--number:focus {
  color: ;
}

.hs-pagination__link:active .hs-pagination__link-text,
.hs-pagination__link--number:active {
  color: ;
}

.hs-pagination__link-icon svg {
  fill: ;
}

/* Pricing card */

.card__price {
  ;
  color: ;
  font-size: ;
}

.card__body svg {
  fill: #1a3dfc;
}

/* Social follow */

.social-links__icon {
  background-color: #1a3dfc;
}

.social-links__icon:hover,
.social-links__icon:focus {
  background-color: #0015d4;
}

.social-links__icon:active {
  background-color: #4265ff;
  ;
  color: ;
  font-size: ;
}

/************ NATIONAL PARTNERS OVERRIDE ************/
.center {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1440px;
}

@media (min-width: 550px) {
  .center {
    padding: 0 64px;
  }
}

@media (min-width: 1200px) {
  .center {
    padding: 0 120px;
  }
}
/* ==========================================================================
   National Partners — Design Tokens
   ========================================================================== */

:root {

  /* ---- LAYER 1 — Brand primitives (from theme settings) ----------------- */
  --np-performance-blue:       #1a3dfc;
  --np-performance-blue-hover: #1533d1;
  --np-momentum-orange:        #ffa400;
  --np-digital-blue:           #009dea;
  --np-partnership-blue:       #2651ad;
  --np-deep-navy:              #081634;
  --np-navy:                   #0d2240;
  --np-sky-blue:               #62b6f3;
  --np-soft-white:             #f8f8ff;

  /* ---- LAYER 1 — Neutrals (literal: a scale, not a brand decision) ------ */
  --np-white: #ffffff;
  --np-cloud: #f7f9fc;
  --np-mist:  #e6ecf4;
  --np-slate: #667085;

  /* ---- LAYER 2 — Semantic tokens, LIGHT mode (default) ------------------
     Navy mode redefines these below.
     These are the ONLY color tokens module.css may use.                     */
  --np-bg-canvas:      var(--np-white);
  --np-bg-subtle:      var(--np-soft-white);
  --np-surface-card:   var(--np-white);
  --np-surface-muted:  var(--np-cloud);

  --np-text-primary:   var(--np-deep-navy);
  --np-text-secondary: var(--np-slate);
  --np-text-on-brand:  var(--np-white);
  --np-text-on-accent: var(--np-deep-navy);

  --np-brand-primary:  var(--np-performance-blue);

  --np-action-bg:      var(--np-performance-blue);
  --np-action-text:    var(--np-white);
  --np-action-hover:   var(--np-performance-blue-hover);

  --np-accent-warm:    var(--np-momentum-orange);
  --np-accent-digital: var(--np-digital-blue);
  --np-accent-sky:     var(--np-sky-blue);

  --np-focus-ring:     var(--np-sky-blue);
  --np-border-default: var(--np-mist);

  /* Modal backdrop. Deep navy at 60% — deliberately the same in both modes,
     since a modal dims whatever is behind it regardless of theme. */
  --np-scrim: rgba(8, 22, 52, 0.6);

  /* Surfaces layered on a dark or mesh background, where a solid token would
     hide the gradient behind it. Values taken from mod/super-hero. Mode-
     independent by nature: they only ever appear over something dark. */
  --np-on-dark-panel:   rgba(255, 255, 255, 0.07);
  --np-on-dark-raised:  rgba(255, 255, 255, 0.04);
  --np-on-dark-border:  rgba(255, 255, 255, 0.14);
  --np-on-dark-divider: rgba(255, 255, 255, 0.10);

  /* ---- Spacing ---------------------------------------------------------- */
  --np-space-4:    4px;
  --np-space-8:    8px;
  --np-space-12:  12px;
  --np-space-16:  16px;
  --np-space-24:  24px;
  --np-space-32:  32px;
  --np-space-48:  48px;
  --np-space-64:  64px;
  --np-space-96:  96px;
  --np-space-128: 128px;

  /* ---- Radii ------------------------------------------------------------ */
  --np-radius-sm:   8px;
  --np-radius-md:  12px;
  --np-radius-lg:  16px;
  --np-radius-xl:  24px;
  --np-radius-pill: 999px;

  /* ---- Gradients --------------------------------------------------------
     Brand gradient: exact, taken from the 4px stroke on mod/media-split's
     media frame. #08aeea is its own value — close to digital-blue but not
     equal, so it stays literal here.                                        */
/*   --np-gradient-brand: linear-gradient(180deg, #1a3dfc 0%, #ffa400 69%, #08aeea 100%); */
  --np-gradient-brand: linear-gradient(180deg, #1a3dfc 0%, #ffa400 100%);

  /* Mesh background: APPROXIMATE. Figma stacks seven radial fills, several
     with rotated transform matrices that CSS radial-gradient cannot express
     (it has no rotation). Positions and radii are derived from the matrices;
     the bottom layer's rotated radial is flattened to a linear that keeps its
     color progression.
     For pixel accuracy on a hero, export the mesh from Figma as an optimised
     image instead of using this — seven stacked gradients also cost more to
     paint than one WebP. Used only by mod/super-hero and cta-banner mesh.    */
  --np-gradient-mesh:
    radial-gradient(ellipse 60% 45%  at 50% 66%,  #2b4df2 0%, #1d38d2 46%, rgba(29, 56, 210, 0) 80%),
    radial-gradient(ellipse 26% 31%  at 80% 55%,  rgba(201, 133, 136, 0.85) 0%, rgba(201, 133, 136, 0) 68%),
    radial-gradient(ellipse 70% 45%  at 12% 28%,  #ffb524 16%, #f79c07 39%, rgba(247, 156, 7, 0) 87%),
    radial-gradient(ellipse 23% 39%  at 124% 157%, #93500d 0%, rgba(147, 80, 13, 0.55) 34%, rgba(147, 80, 13, 0) 74%),
    radial-gradient(ellipse 31% 20%  at 69% 136%, #091230 0%, rgba(9, 18, 48, 0) 74%),
    radial-gradient(ellipse 17% 39%  at 19% 139%, #01030a 0%, rgba(1, 3, 10, 0.72) 34%, rgba(1, 3, 10, 0) 76%),
    linear-gradient(115deg, #0a1444 0%, #1e3ad8 30%, #4a54c0 58%, #b57a6a 74%, #f79a08 86%, #f5a013 100%);

  /* Video overlay: brand blue → orange, laid semi-transparent over a
     background video in mod/hero and mod/super-hero (client reference,
     2026-09-30). Blue holds the left ~55%, where hero copy sits; orange only
     takes the right edge, so white text stays on blue. Dark corner
     bottom-left. Not the mesh: its orange lobe sits top-LEFT, behind the
     heading. Literal brand hexes, like the mesh — these heroes run in navy
     mode, where the brand tokens remap to sky blue. */
  --np-gradient-hero-overlay:
    radial-gradient(ellipse 45% 70% at 0% 100%, rgba(8, 10, 60, 0.85) 0%, rgba(8, 10, 60, 0) 70%),
    linear-gradient(90deg, #1a3dfc 0%, #1d38d2 55%, #b57a6a 78%, #f79c07 92%, #f5a013 100%);

  /* ---- Shadows ---------------------------------------------------------- */
  --np-shadow-sm:   0 1px  2px rgba(8, 22, 52, 0.06);
  --np-shadow-card: 0 4px 16px rgba(8, 22, 52, 0.08);
  --np-shadow-lg:   0 12px 32px rgba(8, 22, 52, 0.12);
  /* Brand-tinted glow, not a neutral elevation. Figma puts it on the active
     option in partial/login-modal — performance-blue at 8%. */
  --np-shadow-brand: 0 4px 12px rgba(26, 61, 252, 0.08);

  /* ---- Type families (from theme settings) ------------------------------ */
  /* Poppins for all UI. Inter for numbers and stats ONLY. */
  --np-font-ui:   Poppins, sans-serif;
  --np-font-data: Inter, sans-serif;

  /* ---- Layout (from theme settings) ------------------------------------- */
  /* Kept for theme-overrides.css and any module needing a custom width.
     Module wrappers use the global .center class, not this. */
  /* The defaults matter: if the theme has no `spacing` group these would emit
     a bare "px", which is invalid at computed-value time — every module would
     silently lose its vertical padding with no error anywhere. */
  --np-container: 1200px;
  --np-section-y: 80px;
}


/* ==========================================================================
   LAYER 2 — NAVY mode
   Redefines semantic tokens only. Applied to the module's <section>, so every
   var() inside it resolves to the navy value. Zero duplicated CSS.
   Values still point at primitives, so theme-setting changes propagate here.
   ========================================================================== */

.np-module--navy {
  --np-bg-canvas:      var(--np-deep-navy);
  --np-bg-subtle:      var(--np-deep-navy);
  --np-surface-card:   var(--np-partnership-blue);
  --np-surface-muted:  var(--np-partnership-blue);

  --np-text-primary:   var(--np-white);
  --np-text-secondary: rgba(255, 255, 255, 0.72);
  --np-text-on-brand:  var(--np-white);
  --np-text-on-accent: var(--np-deep-navy);

  --np-brand-primary:  var(--np-sky-blue);

  --np-action-bg:      var(--np-white);
  --np-action-text:    var(--np-deep-navy);
  --np-action-hover:   var(--np-soft-white);

  --np-border-default: rgba(255, 255, 255, 0.16);
}


/* ==========================================================================
   Module base
   Every module <section> gets .np-module plus a theme modifier:
     Theme=light      → <section class="np-module">
     Theme=navy       → <section class="np-module np-module--navy">
     Theme=bg-subtle  → <section class="np-module np-module--bg-subtle">
   ========================================================================== */

.np-module {
  background-color: var(--np-bg-canvas);
  color: var(--np-text-primary);
  font-family: var(--np-font-ui);
  padding-block: var(--np-section-y);
}

.np-module--bg-subtle { background-color: var(--np-bg-subtle); }

/* Scroll lock for any module that opens a modal (team-grid, form-modal,
   login-modal, gated-gate). Shared so every modal locks the page the same way
   and one of them closing can't leave the body in a half-locked state. */
.np-modal-open {
  overflow: hidden;
}


/* ==========================================================================
   Drag-and-drop wrapper reset
   --------------------------------------------------------------------------
   Every NP module owns its whole box: side gutters come from .center, vertical
   rhythm from its own #np-* rule. The CMS boilerplate also puts
   `padding: 80px 20px` on .dnd-section, so a dragged-in module gets a second
   gutter on top of .center's — that is the padding you have been clearing by
   hand in Alignment & Spacing on every instance.

   There is no theme setting for this. HubSpot's spacing panel writes a
   per-instance override; the *default* it overrides is plain CSS, so zeroing
   it here is the only place it can be fixed once.

   Doubled class (0-2-0) on purpose: the boilerplate rule is a single class
   too, and theme stylesheet load order in Design Manager is not something
   this file can rely on.

   Per-instance overrides from the editor still win — they are inline styles.
   ========================================================================== */

.dnd-section.dnd-section {
  padding-left: 0;
  padding-right: 0;
}

/* Full-bleed modules — super-hero, header, utility-bar, footer — have to reach
   the viewport edge. The boilerplate constrains the row to the content width,
   which would letterbox them. .center supplies the measure instead. */
.dnd-section > .row-fluid {
  max-width: none;
}


/* ==========================================================================
   Sticky rescue
   --------------------------------------------------------------------------
   `position: sticky` dies silently if ANY ancestor has a non-visible
   overflow — no error, the element just scrolls away. The CMS boilerplate
   ships `overflow-x: hidden` on the page wrappers to stop horizontal scroll,
   which is exactly that.

   `overflow-x: clip` clips the same way but does NOT create a scroll
   container, so sticky survives. This is the documented replacement.

   Affects the header and mod/anchor-nav, the two sticky elements here.

   ⚠️ This only fixes the overflow half of the problem. The other half is the
   containing block, and that one lives in the template — see the header's
   fields.md.
   ========================================================================== */

html,
body,
.body-wrapper,
.content-wrapper {
  overflow-x: clip;
}

html {
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------------------------
   The containing block.

   HubSpot wraps EVERY module in a <div class="hs_cos_wrapper …>, and that
   wrapper hugs its content — for the header it measures exactly 81px. A
   sticky element can only travel inside its containing block, so the header
   sticks to the top of an 81px box and scrolls away with it. Verified in
   DevTools: #np-header 81px inside hs_cos_wrapper 81px inside .body-wrapper
   5409px.

   `display: contents` removes the wrapper from the box tree entirely, so the
   module's containing block becomes .body-wrapper and sticky gets the whole
   page to travel through. The wrapper is a pure hook with no styling of its
   own, so nothing is lost.

   Scoped with :has() to the two sticky modules rather than applied to every
   hs_cos_wrapper on the site — those wrappers are also what the page editor
   hangs its drag handles on.

   In a browser without :has() the rule is dropped and the header simply does
   not stick, which is where it was already. Nothing else breaks.
   -------------------------------------------------------------------------- */

.hs_cos_wrapper:has(> #np-header),
.hs_cos_wrapper:has(> #np-anchor-nav) {
  display: contents;
}


/* ==========================================================================
   Type scale
   Utility classes, used directly in module markup:
     <h2 class="np-h2">…</h2>
   Values taken verbatim from the Figma text styles.
   ========================================================================== */

.np-display { font-family: var(--np-font-ui); font-weight: 700; font-size: 64px; line-height: 68px; letter-spacing: -0.02em; }
.np-h1      { font-family: var(--np-font-ui); font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
.np-h2      { font-family: var(--np-font-ui); font-weight: 600; font-size: 36px; line-height: 42px; letter-spacing: -0.01em; }
.np-h3      { font-family: var(--np-font-ui); font-weight: 600; font-size: 28px; line-height: 34px; }
.np-h4      { font-family: var(--np-font-ui); font-weight: 600; font-size: 22px; line-height: 28px; }

.np-eyebrow { font-family: var(--np-font-ui); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; }

.np-body-l  { font-family: var(--np-font-ui); font-weight: 400; font-size: 18px; line-height: 28px; }
.np-body    { font-family: var(--np-font-ui); font-weight: 400; font-size: 16px; line-height: 26px; }
.np-body-s  { font-family: var(--np-font-ui); font-weight: 400; font-size: 14px; line-height: 22px; }
.np-caption { font-family: var(--np-font-ui); font-weight: 400; font-size: 13px; line-height: 18px; }

/* Inter — numbers and data only */
.np-stat-xl { font-family: var(--np-font-data); font-weight: 700; font-size: 64px; line-height: 64px; letter-spacing: -0.01em; }
.np-stat-l  { font-family: var(--np-font-data); font-weight: 600; font-size: 40px; line-height: 44px; }
.np-data    { font-family: var(--np-font-data); font-weight: 500; font-size: 16px; line-height: 22px; }

/* --- Mobile scale ----------------------------------------------------------
   PROVISIONAL: these values are NOT from Figma. The file's "Mobile Preview"
   page has the real sizes — extract and replace.                             */
@media (max-width: 768px) {
  .np-display { font-size: 40px; line-height: 44px; }
  .np-h1      { font-size: 32px; line-height: 38px; }
  .np-h2      { font-size: 26px; line-height: 32px; }
  .np-h3      { font-size: 22px; line-height: 28px; }
  .np-h4      { font-size: 18px; line-height: 24px; }
  .np-body-l  { font-size: 16px; line-height: 26px; }
  .np-stat-xl { font-size: 40px; line-height: 44px; }
  .np-stat-l  { font-size: 30px; line-height: 36px; }
}


/* ==========================================================================
   Buttons
   Measurements verified against Figma. Three sizes are in use.
   ========================================================================== */

.np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--np-space-8);
  min-height: 56px;
  padding: var(--np-space-8) var(--np-space-24);
  border: 1px solid transparent;
  border-radius: var(--np-radius-pill);
  font-family: var(--np-font-ui);
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 56px = hero / cta-banner · 48px = form submit · 40px = in-module CTA */
.np-btn--md { min-height: 48px; }
.np-btn--sm {
  min-height: 40px;
  padding: var(--np-space-8) var(--np-space-16);
  border-radius: 20px;
}

.np-btn--primary        { background-color: var(--np-action-bg); color: var(--np-action-text); }
.np-btn--primary:hover  { background-color: var(--np-action-hover); }

/* Orange variant: accent/warm fill with text/on-accent label */
.np-btn--accent       { background-color: var(--np-accent-warm); color: var(--np-text-on-accent); }
.np-btn--accent:hover { filter: brightness(0.94); }

.np-btn--secondary       { background-color: transparent; color: var(--np-text-primary); border-color: var(--np-border-default); }
.np-btn--secondary:hover { border-color: var(--np-brand-primary); color: var(--np-brand-primary); }

.np-btn:focus-visible {
  outline: 2px solid var(--np-focus-ring);
  outline-offset: 2px;
}
/* ==========================================================================
   css/forms.css — site-wide styling for HubSpot forms (new form editor)
   Requires the theme's tokens.css. Required from layouts/base.html.

   Forms built in HubSpot's new editor render their own markup (hsfc-*
   classes), so the .hs-form / .hs-input rules in form-inline, contact-block,
   form-modal and gated-gate never reach them. What they do read is this set
   of CSS custom properties (HubSpot "Forms reference", developer docs).
   Defined once here, every new form on the site takes the National Partners
   look — no per-form styling in the editor.

   Values mirror the legacy-form rules in mod/form-inline, so old and new
   forms look the same: 14px labels, 12px-radius inputs with the default
   border, a 40px brand pill submit, orange error text.

   Declared on :root AND .np-module--navy: a custom property that points at
   another var() is resolved where it is declared, so at :root alone these
   would freeze the light values and a form in a navy section would keep
   navy-on-navy text. Re-declaring them in navy scope re-resolves them
   against the navy tokens — same switch the rest of the system uses.

   Not verified yet: whether these override styles set by hand in a form's
   own Style tab, or only its defaults. Test with one form.
   ========================================================================== */

:root,
.np-module--navy {

  /* ---- Global --------------------------------------------------------- */
  --hsf-global__font-family:  var(--np-font-ui);
  --hsf-global__font-size:    16px;
  --hsf-global__color:        var(--np-text-primary);
  --hsf-global-error__color:  var(--np-accent-warm);

  /* ---- Layout: the form sits inside our own section/card, so it brings no
     surface of its own. ---------------------------------------------- */
  --hsf-background__background-color: transparent;
  --hsf-background__border-style:     none;
  --hsf-background__padding:          0;
  --hsf-row__horizontal-spacing:      var(--np-space-16);
  --hsf-row__vertical-spacing:        var(--np-space-16);
  --hsf-module__vertical-spacing:     var(--np-space-16);

  /* ---- Text ----------------------------------------------------------- */
  --hsf-heading__font-family:   var(--np-font-ui);
  --hsf-heading__color:         var(--np-text-primary);
  --hsf-richtext__font-family:  var(--np-font-ui);
  --hsf-richtext__font-size:    16px;
  --hsf-richtext__color:        var(--np-text-secondary);

  /* ---- Labels and helper text ---------------------------------------- */
  --hsf-field-label__font-family:               var(--np-font-ui);
  --hsf-field-label__font-size:                 14px;
  --hsf-field-label__color:                     var(--np-text-primary);
/*   --hsf-field-label-requiredindicator__color:   var(--np-accent-warm); */
  --hsf-field-description__font-family:         var(--np-font-ui);
  --hsf-field-description__color:               var(--np-text-secondary);
  --hsf-field-footer__font-family:              var(--np-font-ui);
  --hsf-field-footer__color:                    var(--np-text-secondary);

  /* ---- Inputs and textareas (same values as form-inline's .hs-input) --- */
  --hsf-field-input__font-family:       var(--np-font-ui);
  --hsf-field-input__color:             var(--np-text-primary);
  --hsf-field-input__background-color:  var(--np-bg-canvas);
  --hsf-field-input__placeholder-color: var(--np-text-secondary);
  --hsf-field-input__border-color:      var(--np-border-default);
  --hsf-field-input__border-width:      1px;
  --hsf-field-input__border-style:      solid;
  --hsf-field-input__border-radius:     var(--np-radius-md);
  --hsf-field-input__padding:           var(--np-space-8) var(--np-space-12);

  --hsf-field-textarea__font-family:       var(--np-font-ui);
  --hsf-field-textarea__color:             var(--np-text-primary);
  --hsf-field-textarea__background-color:  var(--np-bg-canvas);
  --hsf-field-textarea__placeholder-color: var(--np-text-secondary);
  --hsf-field-textarea__border-color:      var(--np-border-default);
  --hsf-field-textarea__border-width:      1px;
  --hsf-field-textarea__border-style:      solid;
  --hsf-field-textarea__border-radius:     var(--np-radius-md);
  --hsf-field-textarea__padding:           var(--np-space-8) var(--np-space-12);

  /* ---- Checkboxes and radios ----------------------------------------- */
  --hsf-field-checkbox__background-color: var(--np-bg-canvas);
  --hsf-field-checkbox__color:            var(--np-text-primary);
  --hsf-field-checkbox__border-color:     var(--np-border-default);
  --hsf-field-checkbox__border-width:     1px;
  --hsf-field-checkbox__border-style:     solid;

  --hsf-field-radio__background-color:    var(--np-bg-canvas);
  --hsf-field-radio__color:               var(--np-text-primary);
  --hsf-field-radio__border-color:        var(--np-border-default);
  --hsf-field-radio__border-width:        1px;
  --hsf-field-radio__border-style:        solid;

  /* ---- Submit: the system's 40px pill (form-inline's .hs-button) ------ */
  --hsf-button__font-family:      var(--np-font-ui);
  --hsf-button__font-size:        16px;
  --hsf-button__color:            var(--np-action-text);
  --hsf-button__background-color: var(--np-action-bg);
  --hsf-button__border-radius:    var(--np-radius-pill);
  --hsf-button__padding:          var(--np-space-8) var(--np-space-16);
  --hsf-button__box-shadow:       none;

  /* ---- Alerts and multi-step progress -------------------------------- */
  --hsf-erroralert__font-family: var(--np-font-ui);
  --hsf-erroralert__font-size:   13px;
  --hsf-erroralert__color:       var(--np-accent-warm);
  --hsf-infoalert__font-family:  var(--np-font-ui);
  --hsf-infoalert__font-size:    13px;
  --hsf-infoalert__color:        var(--np-text-secondary);

  --hsf-progressbar-text__font-family:                var(--np-font-ui);
  --hsf-progressbar-text__font-size:                  13px;
  --hsf-progressbar-text__color:                      var(--np-text-secondary);
  --hsf-progressbar-progressLine__background-color:   var(--np-action-bg);
  --hsf-progressbar-trackLine__background-color:      var(--np-border-default);
}


/* ==========================================================================
   Class-level styling — the hsfc-* markup itself
   The variables above only cover what HubSpot exposes. These rules shape the
   rest from the form's own markup (hsfc-* classes, verified against a live
   form, 2026-10-02). Prefixed .hsfc-Renderer .hsfc-Form so they outrank
   HubSpot's single-class defaults without !important.

   One bold element, the rest quiet: the multi-select checkbox group becomes
   a grid of selectable cards that fill with brand when chosen. Inputs,
   labels and the submit stay in the system's plain vocabulary.

   Every colour is a semantic token used directly, so navy sections switch
   automatically (no re-declaration needed, unlike the variables above).
   ========================================================================== */

.hsfc-Renderer .hsfc-Form {
  font-family: var(--np-font-ui);
  color: var(--np-text-primary);
}

/* ---- Header image + rich text ------------------------------------------- */

.hsfc-Renderer .hsfc-Form .hsfc-LinkImage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--np-radius-lg);
}
.hsfc-Renderer .hsfc-Form .hsfc-RichText,
.hsfc-Renderer .hsfc-Form .hsfc-RichText p {
  margin: 0 0 var(--np-space-8);
  font-size: 14px;
  line-height: 24px;
  color: var(--np-text-secondary);
}

/* ---- Labels ------------------------------------------------------------- */

/* The editor wraps every label in <strong>: weight is set once here, so
   labels read SemiBold 14 instead of a heavy browser bold. */
.hsfc-Renderer .hsfc-Form .hsfc-FieldLabel {
  font-family: var(--np-font-ui);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: var(--np-text-primary);
  margin: 0 0 10px !important;
}

.hsfc-Renderer .hsfc-Form .hsfc-FieldLabel strong { font-weight: 600; }

/* "Select all that apply." — a hint, not part of the label. */
.hsfc-Renderer .hsfc-Form .hsfc-FieldLabel em {
  font-style: normal;
  font-weight: 400;
  color: var(--np-text-secondary);
}

.hsfc-Renderer .hsfc-Form .hsfc-FieldLabel__RequiredIndicator {
  margin-left: 2px;
/*   color: var(--np-accent-warm); */
}

/* ---- Inputs, textarea, dropdowns ----------------------------------------- */

.hsfc-Renderer .hsfc-Form .hsfc-TextInput,
.hsfc-Renderer .hsfc-Form .hsfc-TextareaInput {
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--np-space-12) var(--np-space-16);
  border: 1px solid var(--np-border-default);
  border-radius: var(--np-radius-md);
  background-color: var(--np-bg-canvas);
  color: var(--np-text-primary);
  font-family: var(--np-font-ui);
  font-size: 16px;
  line-height: 22px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hsfc-Renderer .hsfc-Form .hsfc-TextareaInput {
  min-height: 120px;
  resize: vertical;
}

.hsfc-Renderer .hsfc-Form .hsfc-TextInput:hover,
.hsfc-Renderer .hsfc-Form .hsfc-TextareaInput:hover {
  border-color: var(--np-text-secondary);
}

/* Focus: brand border plus a soft brand halo — the one moment of colour in
   an otherwise neutral field. */
.hsfc-Renderer .hsfc-Form .hsfc-TextInput:focus,
.hsfc-Renderer .hsfc-Form .hsfc-TextareaInput:focus {
  outline: none;
  border-color: var(--np-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-brand-primary) 18%, transparent);
}

.hsfc-Renderer .hsfc-Form .hsfc-TextInput[aria-invalid="true"],
.hsfc-Renderer .hsfc-Form .hsfc-TextareaInput[aria-invalid="true"] {
  border-color: var(--np-accent-warm);
}

/* ---- Multi-select checkboxes → selectable cards ------------------------- */

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxFieldGroup__Options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--np-space-8);
  margin-top: var(--np-space-8);
}

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel {
  display: flex;
  align-items: center;
  gap: var(--np-space-12);
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--np-space-12) var(--np-space-16);
  border: 1px solid var(--np-border-default);
  border-radius: var(--np-radius-md);
  background-color: var(--np-bg-canvas);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:hover {
  border-color: var(--np-brand-primary);
}

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:has(input:checked) {
  border-color: var(--np-brand-primary);
  background-color: color-mix(in srgb, var(--np-brand-primary) 8%, var(--np-bg-canvas));
}

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxInput {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--np-action-bg);
}

/* ---- Single consent checkbox → legal fine print -------------------------- */

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxField .hsfc-FieldLabel {
  display: flex;
  align-items: flex-start;
  gap: var(--np-space-12);
  padding: var(--np-space-16);
  border-radius: var(--np-radius-md);
  background-color: var(--np-surface-muted);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--np-text-secondary);
}

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxField .hsfc-FieldLabel strong {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--np-text-primary);
}

.hsfc-Renderer .hsfc-Form .hsfc-CheckboxField .hsfc-CheckboxInput { margin-top: 1px; }

.hsfc-Renderer .hsfc-Form .hsfc-FieldLabel a {
  color: var(--np-brand-primary);
  text-decoration: underline;
}

/* ---- Submit -------------------------------------------------------------- */

.hsfc-Renderer .hsfc-Form .hsfc-Button {
  min-height: 48px;
  padding: var(--np-space-12) var(--np-space-32);
  border: 0;
  border-radius: var(--np-radius-pill);
  background-color: var(--np-action-bg);
  color: var(--np-action-text);
  font-family: var(--np-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hsfc-Renderer .hsfc-Form .hsfc-Button:hover { background-color: var(--np-action-hover); }

.hsfc-Renderer .hsfc-Form .hsfc-Button:focus-visible {
  outline: 2px solid var(--np-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .hsfc-Renderer .hsfc-Form .hsfc-NavigationRow__Buttons,
  .hsfc-Renderer .hsfc-Form .hsfc-Button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hsfc-Renderer .hsfc-Form .hsfc-TextInput,
  .hsfc-Renderer .hsfc-Form .hsfc-TextareaInput,
  .hsfc-Renderer .hsfc-Form .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel,
  .hsfc-Renderer .hsfc-Form .hsfc-Button { transition: none; }
}