/*
  FONTS are loaded in app/fonts via next/font. CSS custom properties are:
  --font-family
  --font-family-mono
  --font-family-serif
*/

:root {
  --font-size: 20px;
  --line-height: 1.2;
  --padding: 16px;

  /* V2 Design System Tokens */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --core-grey-10: var(--core-gray-10);
  --core-grey-20: var(--core-gray-20);
  --core-grey-30: var(--core-gray-30);
  --border-light: var(--color-border-light);
  --background-light: var(--color-background-light);
  --tracking-display: -0.04em;
  --tracking-headline: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-mono: 0em;
  --tracking-mono-caps: 0.12em;

  /* Type Scale Variables */
  --text-size-lg: var(--font-size-lg);
  --text-size-md: var(--font-size-md);
  --text-size-sm: var(--font-size-sm);
  --text-size-xs: var(--font-size-xs);
  --text-size-2xs: var(--font-size-2xs);

  /* Mono font feature settings for Geist Mono */
  --font-features-mono: 'ss03' on, 'ss06' on, 'ss08' on, 'ss09' on;

  --color-cobalt-1: var(--color-cobalt-5);
  --color-cobalt-5: #f5f8ff;
  --color-cobalt-10: #e3ebff;
  --color-cobalt-20: #c1d2fe;
  --color-cobalt-30: var(--color-periwinkle-cobalt-30);
  --color-cobalt-40: #658dfd;
  --color-cobalt-70: #1246e0;
  --color-cobalt-100: #032ca5;
  --color-grey-30: var(--core-gray-30);
  --color-grey-50: #8494c3;
  --color-grey-60: #6d7fb2;
  --color-grey-70: #415591;
  --color-grey-100: #242c47;
  --color-midnight: #0b2471;
  --color-newday: #FFFBF3;
  --color-cobalt-medium: #5d93ff;
  --color-cobalt-core: #265cff;
  --color-cobalt-deep: #0033cc;
  --color-spring: #8AB280;
  --color-spring-10: #E0EDDD;
  --color-spring-20: #C8E8BE;
  --color-forest: #1D7368;
  --color-teal: #1B7A5A;
  --color-straw: #F6F4D7;
  --color-sunbeam: #FFE8A3;
  --color-poppy: #FF6633;
  --color-straw: #F9F5D6;
  --color-grass: #00BB81;
  --color-marigold: #ECA74E;
  --color-tangerine: #FF9966;
  --color-energy: #abf1d0;
  --color-early-spring: #bddcc3;
  --color-sky: #c4e7f4;
  --color-afternoon: #E9C471;
  --color-sun: #E77054;
  --color-warm-light: #F3E1C0;
  --color-storm: #5D8BB8;
  --color-white: var(--core-gray-white);
  --color-background: var(--core-gray-white);
  --color-border-default: #c0d0f0;
  --border-default: var(--color-border-default);
  --border-dashed-cobalt: 1px dashed rgba(13, 89, 242, 0.5);

  /* Form tokens */
  --form-bg: var(--color-white);
  --form-border: var(--color-border-light);
  --form-placeholder: var(--color-grey-40);
  --form-text: var(--text-primary);
  --form-text-secondary: var(--text-secondary);
  --form-disabled-bg: var(--color-grey-10);
  --form-focus-border: var(--color-cobalt-core);
  --form-focus-ring: #c1d2fe;
  --form-error-border: var(--color-sun);
  --form-error-ring: #fddcd5;
  --form-error-text: #b03f23;
  --form-radius: 2px;
  --form-padding-y: 10px;
  --form-padding-x: 16px;
  --form-font-size: var(--text-size-sm);
  --form-line-height: 1.4;
}

@media (min-width: 768px) {
  :root {
    --padding: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --padding: 24px;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

* {
  margin: 0;
  box-sizing: border-box;
  letter-spacing: -0.01em;
  outline-color: var(--color-cobalt-core);
}

body {
  /* Geist Mono from npm (variable font, full weight range) - alias for compatibility */
  --font-family-mono: var(--font-geist-mono);
  min-height: 100%;
  width: 100%;
  max-width: 100vw;
  font-family: var(--font-family);
  background: var(--color-background, #fff);
  font-weight: 500;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--text-secondary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: auto;
  overflow-x: clip;
  box-sizing: border-box;
}

/* Single scroll context: clip horizontal overflow without creating a scroll container */
main {
  overflow-x: clip;
  overflow-y: visible;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Prevent overflow from full-width breakout patterns on mobile */
@media (max-width: 767px) {

  /* Constrain elements using 100vw to prevent scrollbar overflow */
  [class*="sliderLayout"],
  [class*="logoCarouselWrapper"],
  [class*="fullWidth"] {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Constrain pseudo-elements using 100vw on mobile */
  [class*="sliderLayout"]::before,
  [class*="sliderLayout"]::after,
  [class*="logoCarouselWrapper"]::before,
  [class*="logoCarouselWrapper"]::after {
    max-width: 100%;
  }
}

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

.container {
  margin: 0 auto;
  width: 100%;
  max-width: var(--container-width);
  padding-left: var(--padding);
  padding-right: var(--padding);
  padding-top: var(--padding);
  padding-bottom: var(--padding);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 2s linear infinite;
}

.h1,
h1 {
  margin: 0 0 var(--font-size);
  font-size: 90px;
  line-height: 105%;
  font-weight: 300;
  letter-spacing: var(--tracking-headline);
}

h1.f-w-400 {
  /* letter-spacing: -.17rem; specificity is overwriting things [meghan]*/
  line-height: 1.1;
}

@media (max-width: 520px) {

  .h1,
  h1 {
    font-size: 60px;
    line-height: 1;
  }
}

.h1.font-serif {
  letter-spacing: -.18rem;
}

.h2,
h2 {
  margin: 0 0 var(--font-size);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: var(--tracking-headline);
  color: var(--color-midnight);

  @media (min-width: 420px) {
    font-size: 42px;
  }

  @media (min-width: 480px) {
    font-size: 60px;
  }
}

.h2 {
  font-weight: 400;
}

.h3,
h3 {
  margin: 0 0 var(--font-size);
  font-weight: 500;
  text-align: left;
  font-size: 38px;
  line-height: 110%;
  letter-spacing: var(--tracking-headline);
  color: var(--color-midnight);

  @media (min-width: 480px) {
    font-size: 48px;
  }
}

.h3 {
  letter-spacing: var(--tracking-headline);
}

.h4,
h4 {
  margin: 0 0 var(--font-size);
  font-size: 30px;
  letter-spacing: var(--tracking-headline);
  line-height: 110%;

  @media (min-width: 480px) {
    font-size: 35px;
  }
}

.h4 {
  font-weight: 500;
}

.h5,
h5 {
  margin: 0 0 var(--font-size);
  font-size: 25px;
  line-height: 115%;

  @media (min-width: 480px) {
    font-size: 28px;
  }
}

.h5 {
  font-weight: 500;
  letter-spacing: var(--tracking-headline);
}

.h6,
h6 {
  font-size: 20px;
  line-height: 110%;
  letter-spacing: var(--tracking-headline);
}

/* Button/Text mono: CTA links with mono font, used in Feature Primary, TextWithLogos, etc. */
.cta-link-mono {
  font-family: var(--font-family-mono);
  font-size: var(--text-size-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-cobalt-core);
  font-feature-settings: var(--font-features-mono);
  text-transform: none;
  text-decoration: none;
}

.cta-link-mono:hover {
  text-decoration: none;
}

h2[id],
h3[id],
h4[id],
h2[aria-labelledby],
h3[aria-labelledby],
h4[aria-labelledby] {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

/* React Wrap Balancer span tags */
:is(h1, h2, h3, h4)>span {
  letter-spacing: inherit;
}

.eyebrow {
  color: var(--color-cobalt-core);
  font-size: var(--text-size-sm);
  font-weight: 400;
  line-height: var(--space-20);
  margin-bottom: 0;
  text-transform: none;
  font-style: normal;
  letter-spacing: var(--tracking-mono);
}

.section-title {
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: var(--tracking-headline);
  margin: 0;
  text-wrap: balance;

  @media (min-width: 768px) {
    font-size: 35px;
    font-weight: 500;
  }
}

.section-description {
  color: var(--text-primary);
  font-size: var(--text-size-md);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

p,
li,
.body {
  font-size: 20px;
  line-height: 28px;
  color: var(--text-secondary);
  margin-bottom: var(--font-size);
  max-width: 720px;
  font-weight: 500;
}

ul {
  list-style-type: disc;
  padding-left: 22px;
}

li {
  margin-top: 8px;
  margin-bottom: 8px;
}

ol li::marker {
  font-size: inherit;
  color: var(--color-midnight);
}

ul li::marker {
  font-size: inherit;
  color: var(--color-midnight);
}

li li {
  margin-top: 4px;
  margin-bottom: 4px;
}

li li:last-of-type {
  margin-bottom: 8px;
}

a {
  color: var(--color-cobalt-core);
}

:where(a) {
  text-decoration: none;
}

:where(a:hover:not(.no-underline)) {
  text-decoration: none;
}

.on-page-anchor {
  scroll-margin-top: 72px;
}

@media (min-width: 768px) {
  .on-page-anchor {
    scroll-margin-top: 84px;
  }
}

/* Figma: Primary button — height 40px, border-radius 2px, matches form fields */
.button {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 2px;
  line-height: var(--line-height);
  font-family: var(--font-family);
  font-size: var(--text-size-md, 16px);
  text-decoration: none;
  font-weight: 500;
  flex-shrink: 0;
  background-color: var(---color-bg);

  &:not(:disabled) {
    cursor: pointer;
  }
}

/* Primary button: match design-system Button (shine + optional arrow).
   When using the Button component you get cursor-follow shine + arrow slide.
   Class-only (e.g. form submit) gets static hover overlay + arrow slide. */
.button.primary {
  ---color-bg: var(--color-cobalt-core);
  color: #fff;
  position: relative;
  overflow: hidden;
  transition:
    120ms background-color ease-in-out,
    250ms box-shadow ease-out,
    130ms background-position ease-out;
}

.button.primary:not(:disabled):hover,
.button.primary:not(:disabled):focus {
  ---color-bg: var(--color-cobalt-deep);
  /* Static “shine” overlay so class-only primary buttons match Button hover feel */
  box-shadow: inset 0 0 0 999px rgba(3, 44, 165, 0.2);
}

.button.primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background),
    0 0 0 4px var(---color-bg);
}

.button.primary.arrow {
  padding: 10px 39px 10px 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='none' stroke='%23fff'%3E%3Cpath d='M5.72 10 10 5.5m0 0L5.72 1M10 5.5H1'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: right 20px center;
}

.button.primary.arrow:hover {
  background-position: right 16px center;
}

pre,
code {
  font-family: var(--font-family-mono), ui-monospace, Menlo, Courier, monospace;
}

.hide {
  display: none !important;
}

/*
Generic
*/

.f-w-700 {
  font-weight: 700;
}

.f-w-600 {
  font-weight: 600;
}

.f-w-500 {
  font-weight: 500;
}

.f-w-400 {
  font-weight: 400;
}

.f-w-300 {
  font-weight: 300;
}

.l-h-1-1 {
  line-height: 1.1;
}


/* colors */

.color-grey-50 {
  color: var(--color-grey-50);
}

.color-midnight {
  color: var(--color--midnight);
}

.color-cobalt-40 {
  color: var(--color-cobalt-40);
}

.text-cobalt-core {
  color: var(--color-cobalt-core);
}

.text-cobalt-70 {
  color: var(--color-cobalt-70);
}

.text-cobalt-deep {
  color: var(--color-cobalt-deep);
}

.text-grey-60 {
  color: var(--color-grey-60);
}

.text-grey-70 {
  color: var(--color-grey-70);
}

.text-energy {
  color: var(--color-energy);
}

.text-poppy {
  color: var(--color-poppy);
}

.uppercase {
  text-transform: uppercase;
}

.font-sans {
  font-family: var(--font-family)
}

.font-serif {
  font-family: var(--font-family-serif)
}

.mono {
  font-family: var(--font-family-mono) !important;
  letter-spacing: var(--tracking-mono);
}

.hide {
  display: none !important;
}

.opacity-0 {
  opacity: 0;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/* flex and grid */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

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

.items-center {
  align-items: center;
}

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



.disclaimer {
  font-size: 14px;
  font-family: var(--font-family);
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */
  letter-spacing: -0.3px;
}


.bio-rich-text p {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0px;
}

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


/* blog post */


.blog-post blockquote {
  border-left: 3px var(--color-cobalt-core) solid;
  padding-left: 30px;
  margin-bottom: 45px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.25;
  max-width: none;
}

.blog-post {
  max-width: 792px;
  padding: 48px;
  margin: 0 auto;
  width: 100%;
  container-type: inline-size;
  container-name: blog-post;
}

.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5 {
  text-wrap: pretty;
}

@media screen and (max-width: 767px) {
  .blog-post {
    padding: 24px 16px;
    border: 0;
    max-width: 100%;
  }
}

.blog-post h1 {
  font-size: 45px;
  letter-spacing: -.07rem;
  color: var(--color-primary);
  font-family: var(--font-family-serif);
}

.blog-post h2 {
  font-size: 35px;
  margin-top: 48px;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: 8px;
}

.blog-post h3 {
  font-size: 28px;
  color: var(--color-primary);
  margin-top: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}

.blog-post h4 {
  font-size: 24px;
  color: var(--color-primary);
  margin-bottom: 8px;
  margin-top: 32px;
  font-weight: 500;
}

.blog-post h5 {
  font-size: 45px;
  letter-spacing: -.07rem;
  color: var(--color-primary);
}

.blog-post :is(h2, h3, h4, h5) strong {
  font-weight: inherit;
}

.blog-post ul,
.blog-post ol {
  margin-bottom: 16px;
}

.blog-post ol ol {
  list-style-type: lower-alpha;
}

.blog-post ol ol ol {
  list-style-type: lower-roman;
}

.blog-post table ul,
.blog-post table ol {
  margin: 0;
  padding-left: 1.5rem;
}


.blog-post>p>.button {
  display: inline-block;
  margin-top: 12px;
}

.blog-post .blog-aside,
.blog-post pre {
  background-color: var(--color-cobalt-1);
  margin: 32px -48px;
  padding: calc(48px - var(--font-size)) 48px;
}

.blog-post pre {
  font-size: 1rem;
  white-space: pre-wrap;
}

.blog-post code {
  font-size: inherit;
  padding: 0 0.375em;
  border-radius: 4px;
  background-color: var(--color-cobalt-1);
}

.blog-post hr {
  border: 0;
  border-bottom: 2px solid var(--color-cobalt-5);
  margin: 32px auto;
}

.blog-post .blog-aside h3:first-child,
.blog-post .blog-aside h4:first-child {
  margin-top: 0;
}

.blog-post .blog-aside h4 {
  font-size: 20px;
  color: var(--color-primary);
}

.blog-post .blog-aside p {
  font-size: 18px;
  color: var(--color-primary);
}

.blog-post .blog-aside cite {
  font-style: normal;
  color: var(--color-grey-50);
}

.blog-post .blog-aside cite a {
  color: inherit;
}

.blog-post .blog-aside p:last-child,
.blog-post .blog-aside li:last-child {
  margin-bottom: 0;
}

.blog-aside+table {
  margin-top: -32px;
}

.blog-post .table-wrapper {
  width: calc(100% + 96px);
  margin-bottom: 32px;
  margin-left: -48px;
  margin-right: -48px;
  border: 1px var(--color-cobalt-20) solid;
}

.blog-post table {
  border-collapse: collapse;
}

.blog-post table thead {
  border-bottom: 1px var(--color-cobalt-20) solid;
}

.blog-post table th {
  text-align: left;
  color: var(--text-primary);

}

.blog-post table th,
.blog-post table td {
  color: var(--text-primary);
  padding: 20px;
  vertical-align: top;
}

.blog-post table td:first-child,
.blog-post table th:first-child {
  padding-left: 48px;
}

.blog-post table td:last-child,
.blog-post table th:last-child {
  padding-right: 48px;
}


.blog-post tr:nth-child(2n + 1) td:not([style*="background-color"]) {
  background-color: var(--color-cobalt-1);
}

.blog-post figcaption {
  color: var(--color-grey-70);
  font-size: 14px;
  margin: 0 auto 32px;
  padding: 2px 12px;
  width: fit-content;
}

.padded-box {
  --padded-box: 48px;
  padding: var(--padded-box);
}

/* ── Glass Panel: frosted border treatment ──
   Translucent backdrop-blur container with shiny inset edges.
   Apply padding to create the visible "border" region around inner content.
   Customise via CSS custom properties:
     --glass-radius  (default: 8px)
     --glass-padding (default: 8px)
     --glass-blur    (default: 4px)
*/
.glassPanel {
  position: relative;
  border-radius: var(--glass-radius, 8px);
  padding: var(--glass-padding, 8px);
  background: rgba(255, 255, 255, 0.01);
  -webkit-backdrop-filter: blur(var(--glass-blur, 4px));
  backdrop-filter: blur(var(--glass-blur, 4px));
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

@media screen and (max-width: 767px) {
  .padded-box {
    --padded-box: 24px;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .blog-post .table-wrapper,
  .blog-post .blog-aside,
  .blog-post .stylized-quote,
  .blog-post pre,
  .blog-post .blog-post-full-bleed-image {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }

  .blog-post table td:first-child,
  .blog-post table th:first-child {
    padding-left: 16px;
  }

  .blog-post table td:last-child,
  .blog-post table th:last-child {
    padding-right: 16px;
  }

  .blog-post .blog-aside {
    margin-bottom: 16px;
    padding: 24px 16px;
  }
}

.merkinball {
  background: linear-gradient(to bottom, #f7f9ff, #fffbf3 90%);
}

article .youtube {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

article .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*global hubspot*/
.hs-input:not([type='checkbox']) {
  appearance: none;
}

.hs-input {
  width: 100%;
  min-height: 40px;
  color: var(--form-text-secondary, var(--text-secondary));
  font-family: var(--font-family);
  background-color: var(--form-bg, var(--color-white));
  border: 1px solid var(--form-border, #d1d8e5);
  border-radius: 1px;
  font-size: var(--form-font-size, 14px);
  font-weight: 400;
  line-height: var(--form-line-height, 1.4);
  padding: var(--form-padding-y, 12px) var(--form-padding-x, 16px);
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}

textarea.hs-input {
  min-height: 80px;
}

.hs-input::placeholder {
  color: var(--form-placeholder, #bec7da);
}

.hs-input:focus,
.hs-input:focus-visible {
  border-color: var(--form-focus-border, var(--color-cobalt-core));
  box-shadow: 0 0 0 1px var(--form-focus-ring, #c1d2fe);
  outline: none;
}

.hs-input:disabled,
.hs-input[aria-disabled="true"] {
  background-color: var(--form-disabled-bg, #f5f7fa);
  border-color: var(--form-border, #d1d8e5);
  color: var(--form-placeholder, #bec7da);
  cursor: not-allowed;
  box-shadow: none;
  border-radius: 2px;
  background-image: none;
}

.hs-input:disabled::placeholder,
.hs-input[aria-disabled="true"]::placeholder {
  color: var(--form-placeholder, #bec7da);
}

.hs-input.error,
.hs-input.input-error,
.hs-input[aria-invalid="true"] {
  border-color: var(--form-error-border, #e77054);
  box-shadow: 0 0 0 1px var(--form-error-ring, #fddcd5);
  color: var(--form-error-text, #b03f23);
  background-color: var(--form-bg, #fff);
  border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.25' stroke='%23E77054' stroke-width='1.5'/%3E%3Crect x='7.25' y='4' width='1.5' height='6' rx='0.75' fill='%23E77054'/%3E%3Ccircle cx='8' cy='11.5' r='0.75' fill='%23E77054'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: calc(var(--form-padding-x, 16px) + 20px);
}

.hs-input.error:focus,
.hs-input.input-error:focus,
.hs-input[aria-invalid="true"]:focus {
  border-color: var(--form-error-border, #e77054);
  box-shadow: 0 0 0 1px var(--form-error-ring, #fddcd5);
  background-image: none;
}

.hs-input.error::placeholder,
.hs-input.input-error::placeholder,
.hs-input[aria-invalid="true"]::placeholder {
  color: var(--form-placeholder, #bec7da);
}

.hs-fieldtype-text,
.hs-form-field {
  position: relative;
  color: var(--color-cobalt-100);
  font-size: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hs-form-field:not(.hs-fieldtype-checkbox) label[id] {
  position: absolute;
  left: 12px;
  transform: translateY(-50%);
  padding-inline: 4px;
}

.hs-form-field label[id] {
  font-size: 12px;
  background-color: var(--form-bg, var(--color-white));
  color: var(--form-text, var(--color-midnight));
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
  transition:
    top 240ms cubic-bezier(0.65, -0.32, 0.38, 1.23),
    transform 240ms cubic-bezier(0.65, -0.32, 0.38, 1.23),
    font-size 240ms cubic-bezier(0.65, -0.32, 0.38, 1.23),
    color 240ms cubic-bezier(0.65, -0.32, 0.38, 1.23),
    background-color 240ms cubic-bezier(0.65, -0.32, 0.38, 1.23),
    padding 240ms cubic-bezier(0.65, -0.32, 0.38, 1.23);
}

form.hs-form .hs-form-field:has(.hs-input:is(input, textarea)) label[id] {
  top: 20px;
  font-size: var(--form-font-size, 14px);
  color: var(--form-placeholder, #bec7da);
  background-color: transparent;
  pointer-events: none;
}

form.hs-form .hs-form-field:has(.hs-input:is(input, textarea)):focus-within label[id],
form.hs-form .hs-form-field:has(.hs-input:is(input, textarea))[data-has-value] label[id] {
  top: 0;
  font-size: 12px;
  color: var(--form-text, var(--color-midnight));
  background-color: var(--form-bg, var(--color-white));
}

form.hs-form .hs-form-field[data-floating-label] .hs-input::placeholder {
  color: transparent;
}

form.hs-form .hs-form-field[data-floating-label]:focus-within .hs-input::placeholder {
  color: var(--form-placeholder, #bec7da);
}

/* Site-wide: dropdown (select) labels — placeholder when empty, above field when filled (like hero) */
.hs-form-field:has(select) label[id] {
  position: absolute;
  top: 50%;
  left: var(--form-padding-x, 16px);
  transform: translateY(-50%);
  margin: 0;
  font-size: var(--form-font-size, 14px);
  font-weight: 400;
  color: var(--form-placeholder, #bec7da);
  background-color: transparent;
  pointer-events: none;
  transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease,
    color 0.15s ease, background-color 0.15s ease;
}

.hs-form-field:has(select:valid) label[id] {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--form-text, var(--text-primary));
  background-color: var(--form-bg, var(--color-white));
}

/* Select: transparent text when empty so label shows as placeholder */
.hs-form .input select,
.hs-form select.hs-input {
  color: transparent;
  font-family: var(--font-family);
  font-size: var(--form-font-size, 14px);
  font-weight: 400;
  line-height: var(--form-line-height, 1.4);
  letter-spacing: -0.01em;
  border: 1px solid var(--form-border, #d1d8e5);
  border-radius: var(--form-radius, 2px);
  padding: var(--form-padding-y, 12px) 38px var(--form-padding-y, 12px) var(--form-padding-x, 16px);
  background-color: var(--form-bg, var(--color-white));
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.08379 4.36365L7.62046 10.0909H0.547125L4.08379 4.36365Z' fill='%23131B24'/%3E%3Cpath d='M4.08369 19.6364L0.547017 13.9091L7.62036 13.9091L4.08369 19.6364Z' fill='%23131B24'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 9px 24px;
  transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.hs-form .input select:focus,
.hs-form select.hs-input:focus {
  border-color: var(--form-focus-border, var(--color-cobalt-core));
  box-shadow: 0 0 0 1px var(--form-focus-ring, #c1d2fe);
  outline: none;
}

.hs-form .input select:valid,
.hs-form select.hs-input:valid {
  color: var(--form-text, var(--text-primary));
}

.hs-form .input select option,
.hs-form select.hs-input option {
  color: var(--form-text, var(--text-primary));
}

/* Select in error: keep dropdown arrow, show error border (no error icon overlay) */
.hs-form .input select.error,
.hs-form .input select.input-error,
.hs-form select.hs-input.error,
.hs-form select.hs-input.input-error,
.hs-form .input select[aria-invalid="true"],
.hs-form select.hs-input[aria-invalid="true"] {
  border-color: var(--form-error-border, #e77054);
  box-shadow: 0 0 0 1px var(--form-error-ring, #fddcd5);
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='24' viewBox='0 0 9 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.08379 4.36365L7.62046 10.0909H0.547125L4.08379 4.36365Z' fill='%23131B24'/%3E%3Cpath d='M4.08369 19.6364L0.547017 13.9091L7.62036 13.9091L4.08369 19.6364Z' fill='%23131B24'/%3E%3C/svg%3E");
}

.hs-error-msgs {
  padding: 0;
  list-style-type: none;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  transform: translateY(50%);
}

.hs-main-font-element {
  padding: 0;
  margin: 0;
}

.hs-error-msgs li {
  margin: 0;
  line-height: 1;
}

.hs-error-msg {
  color: var(--color-sun);
  font-size: 12px;
  background: var(--form-bg, white);
  display: inline-block;
  width: max-content;
  margin-left: 0.75rem;
  padding: 0px 0.3rem 0.5rem;
  white-space: nowrap;
}

.hs-richtext p {
  margin: 0;
  font-size: 12px;
  color: var(--color-grey-70);
  line-height: 1.5;
}

.hs-richtext a {
  color: var(--color-cobalt-core) !important;
}

.cookie-reset-container a {
  margin-left: 5px;
  cursor: pointer;
}

.hs-form.stacked {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hs-form.stacked .hs-form-field,
.hs-form.stacked fieldset {
  width: 100%;
  min-width: 0;
}

.hs-form fieldset {
  display: contents;
  padding: 0;
  border: 0;
}

@media (min-width: 520px) {
  .hs-form fieldset.form-columns-2 {
    display: flex;
    gap: 12px;
  }

  .hs-form fieldset.form-columns-2>* {
    flex: 1 1 0%;
    min-width: 0;
  }
}

.hs-form {
  transition: opacity 300ms ease, transform 300ms ease;
}

.hs-form.is-submitting {
  opacity: 0;
  pointer-events: none;
}

.submitted-message {
  animation: fadeInSubtle 400ms ease forwards;
}

@keyframes fadeInSubtle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hs-form fieldset:not(.form-columns-2):has(:not([style*="display: none"]):not(.hidden):not(:empty):not([hidden])) {
  display: contents;
}

/* Hide fieldsets that don't have standard form fields */
.hs-form fieldset:not(:has(.hs-form-field, .hs-richtext, .actions, .hs_submit, textarea, select, input:not([type="hidden"]))) {
  display: none !important;
}

/* Hide fieldsets entirely if ALL their children are explicitly hidden (e.g. display: none) */
.hs-form fieldset:not(:has(> :not([style*="display: none"]):not(.hidden):not([hidden]))) {
  display: none !important;
}

.hs-form .input select,
.hs-form select.hs-input {
  appearance: none;
  width: 100% !important;
}

.hs-form .input select:disabled,
.hs-form select.hs-input:disabled {
  background-color: var(--form-disabled-bg, #f5f7fa);
  border-color: var(--form-border, #d1d8e5);
  color: var(--form-placeholder, #bec7da);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 8.5L12.5 15.5L5.5 8.5' stroke='%23bec7da' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center/22px;
  cursor: not-allowed;
}

.hs-form fieldset.form-columns-1 textarea.hs-input {
  padding: var(--form-padding-y, 12px) var(--form-padding-x, 16px);
}

.hs-form .button.primary {
  align-self: flex-start;
}

/* Footer CTA form: privacy text and submit button left-aligned */
.footer form.hs-form {
  text-align: left;
}

.footer form.hs-form .hs-richtext,
.footer form.hs-form .hs-richtext p,
.footer form.hs-form .actions,
.footer form.hs-form .hs_submit {
  text-align: left;
}

.footer form.hs-form .actions,
.footer form.hs-form .hs_submit {
  display: flex;
  justify-content: flex-start;
}

.footer form.hs-form .actions .button,
.footer form.hs-form .hs_submit .button,
.footer form.hs-form .hs_submit input[type="submit"] {
  align-self: flex-start;
}

li.hs-form-booleancheckbox::marker {
  color: transparent;
}

.hs-form-booleancheckbox label {
  display: flex;
  color: var(--color-cobalt-100);
}

.hs-form .inputs-list {
  padding: 0;
}

.hs-form-booleancheckbox input {
  width: 30px;
  margin-right: 16px;
  appearance: revert;
  margin-bottom: 0;
  accent-color: var(--color-cobalt-core);
}

.hs-form-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.hs-form-checkbox .hs-input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.hs-form-checkbox .hs-input[type="checkbox"]+span::before {
  display: inline-block;
  content: '';
  background-color: var(--color-white);
  width: 25px;
  height: 25px;
  border-radius: 4px;
  margin-right: 10px;
  box-shadow: 0 0 2px var(--color-cobalt-40);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.hs-form-checkbox .hs-input[type="checkbox"]:hover+span::before {
  background-color: var(--color-cobalt-1);
}

.hs-form-checkbox .hs-input[type="checkbox"]:focus+span::before {
  box-shadow: 0 0 0 2px var(--color-cobalt-core);
}

.hs-form-checkbox .hs-input[type="checkbox"]:checked+span::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z' fill='%23fff'/%3E%3C/svg%3E%0A");
  background-color: var(--color-cobalt-core);
}

/* List style types */
ul {

  &[data-type] {
    padding-left: 0;
    list-style: none;

    & li {
      display: flex;
      column-gap: 8px;
    }

    & li::before {
      --size: 20px;
      content: '';
      display: block;
      flex-shrink: 0;
      margin-top: 4px;
      width: var(--size);
      height: var(--size);
      background-image: var(--icon);
      background-size: var(--size);
      background-position: center;
      background-repeat: no-repeat;

      @supports (-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
        mask-image: var(--icon);
        mask-size: var(--size);
        mask-position: center;
        mask-repeat: no-repeat;
        background-image: none;
        background-color: var(--color-cobalt-core);
      }
    }
  }

  &[data-type="ArrowRight"] {
    --icon: url('/icons/ArrowRight.svg');
  }

  &[data-type="CircleCheckmark"] {
    --icon: url('/icons/CircleCheckmark.svg');
  }
}

/* Text alignment utility classes */
.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

/* Hide native Didomi UI to use custom implementation */
#didomi-host {
  display: none !important;
}

body.didomi-popup-open {
  overflow: auto !important;
}

/* Ensure Qualified chat widget stays below mobile navigation menu */
[id*="qualified"],
[class*="qualified"],
iframe[src*="qualified"] {
  z-index: 9999 !important;
}