@layer hubspot;

@layer reset {
  .hsfc-Form input, .hsfc-Form select, .hsfc-Form textarea, .hsfc-ErrorAlert, .hsfc-PhoneInput__FlagAndCaret {
    all: unset;
  }
}

@layer properties, theme, base;

@layer components {
  .hsfc-PhoneInput {
    position: relative;

    & > .hsfc-TextInput {
      padding-left: 80px;
    }
  }

  .hsfc-PhoneInput__FlagAndCaret {
    --it-control-border-color: transparent;
    cursor: pointer;
    border-radius: var(--it-control-border-radius) 0 0 var(--it-control-border-radius);
    align-items: center;
    width: 70px;
    padding-left: 12px;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    &:after {
      content: "";
      border-right: 1.5px solid var(--it-color-brand-green);
      width: 100%;
      height: calc(100% - 10px);
      margin: auto 0;
      display: block;
    }
  }

  .hsfc-PhoneInput__FlagAndCaret__Caret {
    border-left: 7px solid #0000;
    border-right: 7px solid #0000;
    border-top: 7px solid var(--it-color-brand-green);
    margin-left: 8px;
  }

  .hsfc-CheckboxInput {
    margin-right: .75rem;
  }

  .hsfc-PhoneInput, .hsfc-DropdownInput {
    &:has(.hsfc-DropdownOptions[style*="top:"]) > input {
      border-radius: var(--it-control-border-radius) var(--it-control-border-radius) 0 0;
    }

    & .hsfc-TextInput[aria-invalid="true"] ~ .hsfc-DropdownOptions {
      --dropdown-border-color: var(--it-color-status-error);
    }
  }

  .hsfc-DropdownInput > input[aria-expanded="true"]:focus, .hsfc-DropdownInput > input[aria-expanded="true"]:focus-visible {
    outline: none;
  }

  .hsfc-DropdownOptions {
    --dropdown-border-color: var(--it-control-border-color);
    border: 2px solid var(--dropdown-border-color);
    border-radius: 0 0 var(--it-control-border-radius) var(--it-control-border-radius);
    background: #fff;
    border-top: 0;
    max-height: 300px;
    padding: 24px;
    transform: translateY(-12px);
    box-shadow: 0 4px 5px #00000029;
  }

  .hsfc-DropdownOptions__Search {
    margin-bottom: 20px;
  }

  .hsfc-DropdownOptions__List {
    padding-left: 0;
  }

  .hsfc-DropdownOptions__List__ListItem {
    border-radius: var(--it-radius-medium);
    background: #fff;
    margin: 0;
    padding: 3px 0 3px 30px;
  }

  .dropdown-toggle {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      inset: -10px;
    }

    &:hover, &:focus-visible, &:focus-within {
      & .dropdown-wrapper {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%) scale(1);
      }
    }
  }

  .dropdown-toggle-content {
    position: relative;
  }

  .dropdown-wrapper {
    transform-origin: top;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    background: #fff;
    border-radius: 6px;
    transition: opacity .2s ease-out, visibility .2s ease-out, transform .2s ease-out;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -8px) scale(0);
    box-shadow: 0 3px 6px #00000029;
  }

  .dropdown-content {
    flex-direction: column;
    row-gap: 4px;
    padding: 4px;
    list-style: none;
    display: flex;

    & > li {
      margin-bottom: 0;
    }
  }

  .dropdown-item {
    border-radius: 4px;
    padding: 2px 6px;
    display: block;

    &:hover, &:focus {
      background: var(--it-color-brand-orange);
      color: #fff;
    }
  }
}

@layer utilities;

@layer app {
  .hsfc-Row > div {
    margin-bottom: 1.5rem;
  }
}

:root {
  --it-header-height: 130px;
  --it-shadow-header: 0 1px 3px 0 #2b453f14;
  --it-header-glass-bg: #f4f4f482;
  --it-header-glass-blur: 10.5px;
}

@media screen and (width <= 767px) {
  :root {
    --it-header-height: 95px;
  }
}




/* CSS variables */

@layer app {
  :root {
    --column-gap: 2.13%;
    --column-width-multiplier: 8.333;
    --header-height: 100px;
  }

  @media screen and (max-width: 1200px) {
    :root {
      --header-height: 125px;
    }
  }

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

  .body-container {
    padding-left: 0;
    padding-right: 0;
  }

  .content-wrapper--vertical-spacing,
  .dnd-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Desktop layout */
  @media (min-width: 1100px) {
    .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));
      }
    
  }
}

@media screen and (min-width: 768px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(720px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(720px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (min-width: 992px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(960px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(960px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
}

@media screen and (min-width: 1200px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(1120px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(1120px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
}

@media screen and (min-width: 1400px) {
  .dnd_area-row-0-max-width-section-centering > .row-fluid {
    max-width: calc(1320px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
  .dnd_area-row-1-max-width-section-centering > .row-fluid {
    max-width: calc(1320px - calc(var(--it-container-padding-x-mobile) * 2)) !important;
  }
}



.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (width >= 1400px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section {
  position: relative;

  & > .row-fluid {
    max-width: calc(1320px - var(--it-gutter));
    margin-left: auto;
    margin-right: auto;
  }

  & .dnd-column {
    padding: 0;
  }
}

@media screen and (width <= 1399px) {
  .dnd-section > .row-fluid {
    max-width: calc(1120px - var(--it-gutter));
  }
}

@media screen and (width <= 1199px) {
  .dnd-section > .row-fluid {
    max-width: calc(960px - var(--it-gutter));
  }
}

@media screen and (width <= 991px) {
  .dnd-section > .row-fluid {
    max-width: calc(720px - var(--it-gutter));
  }

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

@media screen and (width <= 767px) {
  .dnd-section[class*="-background-color"], .dnd-section[class*="-background-gradient"], .dnd-section[class*="force-full-width-section"] {
    margin-left: calc(var(--it-container-padding-x-mobile) * -1);
    margin-right: calc(var(--it-container-padding-x-mobile) * -1);
    padding-left: var(--it-container-padding-x-mobile);
    padding-right: var(--it-container-padding-x-mobile);
  }
}



#footer {
  position: relative;
  padding: 55px 0 40px;
  color: #fff;
  background-color: #2B453F;

  .footer-investerra-icon {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 55px;
  }


  .inner-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .footer-claim {
    margin-top: 50px;

    p {
      font-size: calc(40 / 16 * 1rem);
      line-height: 1.25;
      margin: 0;
    }
  }

  .menu-footer {
    display: flex;
    flex-direction: column;
    row-gap: 15px;

    .menu-link {
      font-size: calc(17 / 16 * 1rem);
      transition: var(--it-text-transition);

      &:hover {
        transform: translateX(var(--it-text-transform-x));
      }
    }
  }


  .footer-ctas .btn {
    --base-color: var(--it-color-brand-orange);
  }

  .mobile-divider {
    display: none;
  }

  .footer-legal-row {
    font-size: 12px;
    margin-top: 50px;
  }

  .footer-social-links {
    gap: 12px;
    margin-bottom: 1rem;

    a {
      font-size: 2rem;
      color: var(--it-color-brand-orange);

      &:hover > svg > path {
        &:first-child {
          fill: var(--it-color-brand-orange);
        }

        &:last-child {
          fill: #fff;
        }
      }

      > svg > path{
        transition: fill 0.175s ease-out;
      }
    }
  }

  .footer-legal-text {
    opacity: .5;
  }

  .footer-legal-menu {
    .menu-footer {
      flex-direction: row;
      justify-content: flex-end;
      column-gap: 14px;
    }

    .menu-link {
      color: #fff;
      font-size: 12px;
      border-bottom: 1px solid transparent;
      transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
      opacity: .5;

      &:hover {
        border-color: currentColor;
        color: var(--it-color-brand-orange);
        opacity: 1;
        transform: none;
      }
    }
  }
}

@media screen and (max-width: 991px) {
  #footer {
    .footer-logo {
      margin-bottom: 40px;
    }
  }
}

@media screen and (max-width: 767px) {
  #footer {
    .menu-footer {
      justify-content: space-between;
    }

    .footer-legal {
      order: 1;
      text-align: right;
    }

    .footer-legal-menu {
      .menu-footer {
        flex-direction: column;
        row-gap: 10px;
      }
    }

    .footer-social-links {
      justify-content: flex-end;
    }

    .mobile-divider {
      display: block;
      height: 1px;
      background-color: #fff;
      margin-top: 36px;
      margin-bottom: 36px;
    }
  }
}

/* The header is sticky, so in-page anchors (including the skip link that targets
   #main-content) must clear it instead of landing underneath. */
html {
  scroll-padding-top: var(--it-header-height);
}

/*  wraps the header in a bare div that carries no styles of its
   own, so it is exactly as tall as #header. That div is the sticky containing block,
   which caps the header's travel at 0px and lets it scroll away. Stop it generating a
   box so the containing block becomes .body-wrapper — the header keeps its place in
   normal flow, so nothing shifts and no spacer is needed. */
[data-global-resource-path$="partials/header.html"] {
  display: contents;
}

#header {
  position: sticky;
  top: 0;
  padding: 24px 0;
  height: var(--it-header-height);
  width: 100%;
  /* Bootstrap's sticky tier — above page content such as .homebadge (z-index: 10)
     and the hero's fixed panel (100), below modals. */
  z-index: 1020;
  /* Transparent at rest: hero.module pulls itself up under the header with
     margin-top: calc(var(--it-header-height) * -1), so the hero image has to show
     through. js/main.js adds .is-scrolled once the page moves. */
  box-shadow: none;
  transition: box-shadow 0.2s ease-out;

  /* The frosted panel sits on a pseudo-element, not on #header itself, because
     backdrop-filter makes an element a containing block for fixed descendants —
     on #header it would collapse the mobile menu (.header-navigation-view, which is
     position: fixed; inset: 0 below 992px) from the viewport down to the header box.
     Kept mounted at opacity 0 so it can fade rather than pop. */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background-color: var(--it-header-glass-bg);
    -webkit-backdrop-filter: blur(var(--it-header-glass-blur));
    backdrop-filter: blur(var(--it-header-glass-blur));
    transition: opacity 0.2s ease-out;
  }

  &.is-scrolled {
    box-shadow: var(--it-shadow-header);
  }

  &.is-scrolled::before {
    opacity: 1;
  }

  .header__skip {
    display: inline-block;
    float: left;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .inner-header {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .header-container {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-between;
  }

  .header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .header-right,
  .header-navigation-view {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .header-right__top {
    display: flex;
    align-items: center;
    gap: calc(20 / 16 * 1rem);
    margin-bottom: 20px;
  }

  .header-login {
    display: flex;
    align-items: center;

    .button-wrapper {
      display: flex;
      margin-bottom: 0;
    }
  }
}

/* Without backdrop-filter the translucent panel alone would let page content read
   straight through the header; fall back to the solid brand white instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header::before {
    background-color: var(--it-color-brand-white);
  }
}

@media (max-width: 992px) {
  #header {
    display: inline-flex;

    .header-navigation-view {
      position: fixed;
      inset: 0;
      align-items: flex-start;
      justify-content: flex-end;
      flex-direction: column-reverse;
      background: #fff;
      padding: 0 var(--it-container-padding-x-mobile);
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
      overflow-x: hidden;
      visibility: hidden;
      transform: translateX(100%);
      transition: visibility 0.225s ease-out, transform 0.225s ease-out;
      z-index: 100;

      &.open {
        visibility: inherit;
        transform: translateX(0);
      }
    }

    .navigation-wrapper {
      width: 100%;
    }

    .header-right__top {
      align-items: flex-start;
      flex-direction: column;
    }
  }
}



.icon-card {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  max-width: 576px;
  min-height: 100%;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  display: flex;
}

.icon-card .icon-card-icon {
  margin-bottom: 30px;
  padding: 0;
}

.icon-card .icon-card-icon span {
  font-size: 100px;
}

.icon-card .icon-card-text .button-wrapper {
  margin-top: 40px;
}

@media screen and (width <= 768px) {
  .icon-card .icon-card-text .button-wrapper {
    margin-top: 20px;
  }
}

.icon-card .icon-card-text {
  max-width: 360px;
}

.icon-card .icon-card-text p {
  margin-bottom: 0;
}

.icon-card .icon-card-text h3 {
  margin-bottom: 5px;
}

.icon-card .row {
  justify-content: center;
}