.page-banner {
  display:flex;
  padding: 0 80px ;
  padding-top: 212px;
  padding-bottom: 83px;
  flex-direction: row !important;
 
  
}


.page-banner ul {
padding-left: 18px;
color: white;
margin: 0;
}

.site-header .logo {

backdrop-filter: blur(25px);
background: hsla(0,0%,100%,.7);
border: 1px solid transparent;
height: 47px;
padding: 0 12px;
width: 162px;}

.site-header .logo img {
height: 31px;
width: 120px;
}


.landing-form {
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
}

.landing-form h4 {
color: white;}
.banner-texts  span{
color: white;
  max-width: 503px;
  width: 100%;
  
}



.banner-texts  p{
color: white;
  max-width: 449px;
  width: 100%;

}

.banner-blocks {
display: flex;
  gap: 16px;
  justify-content: flex-end;
  
}


.banner-blocks h5 {
color: white;
  z-index: 1;
}

.banner-blocks p {
color: white;
  z-index: 1;
}

.banner-block > div {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 336px;
    position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(249,250,251,.06);
}

.banner-block {
 
    position: relative;
background: rgba(251, 251, 251, 0.65);
border-radius: 10px;
 
}

.banner-block::before{
 border: 1px solid rgba(229,241,245,.5);
border-radius: 12px;
content: "";
height: calc(100% + 5px);
left: -3.5px;
position: absolute;
top: -4px;
width: calc(100% + 5px);

}


.block-background {
  left: 50%;
  min-width: 449px;
  position: absolute;
  top: -30px;
  transform: translateX(-50%);
}

.banner-texts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 0 32px;
}

.banner-texts h1 {
max-width: 788px;
  width: 100%;
  color: white;
}



.workbench-banner-buttons {
display: flex;
  gap: 12px;
  
}

.banner-img {
padding-right: 91px;


}

@media (max-width: 768px) {
  .page-banner {
  flex-direction: row;
     height: initial !important;
   
  }
  
  .banner-blocks {
    flex-wrap: nowrap !important;
    overflow: hidden !important;;
    padding: 5px;
  }
  
  .banner-block {
  
  min-width: 336px;}
}












.hsfc-RichText {
 padding: 52px 17px 32px 17px !important;
  border-radius: 8px;
background: rgba(249, 250, 251, 0.30);
  -webkit-backdrop-filter: blur(20px);
}

.hsfc-RichText p{
 margin-bottom: 20px;
}








      /* ===== Landing form styles (same as your on-demand) ===== */
      .landing-form {
        max-width: 550px;
        width: 100%
        padding: 0 24px;
        
      }
      
      .landing-form h3 {
        margin-bottom: 20px;
        
      }
      
      .landing-form .no-list {
        padding-left: 5px;
        margin: 0;
        
      }
      
      .landing-form li {
      list-style: none;
      }
      
      .landing-form .no-list li {
        list-style: none;
        line-height: 22px;
      }
      
      .landing-form .no-list label {
        font-size: 11px;
        
      }
      
    
      
      .landing-form .legal-consent-container .inputs-list  {
        margin: 0;
        padding: 0;
      }
      
      .landing-form .legal-consent-container .inputs-list input {
        margin: 0;
        height: 25px;}
      
      .landing-form .legal-consent-container .inputs-list span {
        line-height: 22px;}
      
        .landing-form .legal-consent-container .inputs-list .hs-form-required {
        display: none}
        
      .hs_error_rollup {
      display: none;}

      .landing-form .form-row { margin-bottom: 24px; }

      .landing-form input, .landing-form select {
        width: 100%;
        border-radius: 8px !important;
        background: rgba(249, 250, 251, 0.50) !important;
        height: 52px;
        padding-left: 21px !important;
        border: none !important;
        box-shadow: 0 20px 29px 0 rgba(0, 0, 0, 0.07) !important;
        outline: none;
            margin-right: 12px;
    margin-bottom: 12px;
        font-size: 16px;
      }

.landing-form span {
  color: white !important;
}

      .landing-form input::placeholder {
        color: #11223F !important;
        opacity: 0.5;
      }

      .landing-form input.is-error {
        outline: 2px solid rgba(220, 38, 38, .35);
      }
      
      .landing-form .hs-error-msgs {
        color: red;
      }
      
   
      
      .landing-form .input .hs-input {
        width: 100% !important;
      }
      
      .landing-form .input .hs-input[type="checkbox"] {
        width: initial !important;
      }

      
      

      .landing-form .form-error {
        margin-top: 10px;
        color: #b91c1c;
        font-size: 13px;
        display:none;
      }
      .landing-form .form-error.is-visible { display:block; }
      
      .landing-form input[type="submit"] {
        height: auto;
        width: max-content;
        margin:0;
      padding: 0 !important;
        background: transparent !important;
      }

      .hs_submit {
        /* texto */
        margin-top: -15px;
        color: #11223F !important;
        font-feature-settings: 'liga' off, 'clig' off !important;
        font-family: var(--fontFamily, Lato) !important;
        font-size: var(--font-size-09375-rem, 15px) !important;
        font-style: normal !important;
        font-weight: var(--fontWeightMedium, 500) !important;
        line-height: 26px !important;
        letter-spacing: 0.46px !important;
        height: inherit !important;
        /* layout/base */
        --bw: 2px; /* espessura da borda */
        --grad: linear-gradient(80deg, #4FAE8E 3.92%, #3AC899 25.73%, #4BADBB 45.35%, #4DB5DA 71.96%, #079 97.64%);
        position: relative;
        isolation: isolate;                 /* para z-index dos pseudos */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 6px 18px !important;
        width: max-content !important;
        cursor: pointer !important;
        box-sizing: border-box !important;

        /* raio + fundo sem cobrir a borda */
        border-radius: 40px !important;
        background-color: rgba(255,255,255) !important; /* branco 50% */
        background-clip: padding-box !important;           /* não pinta a área da borda */
        overflow: hidden !important;                       /* recorte perfeito no raio */

        /* sem borda real; a borda vem do ::before */
        border: 0 !important;
      }

      /* Borda em gradient (anel), recortada por máscara — FICA ATRÁS do conteúdo */
      .hs_submit::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 40px;
        background: var(--grad);
        padding: var(--bw);

        /* recorta o centro => sobra só a borda (suporte Safari e padrão) */
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
                mask-composite: exclude;

        z-index: -1;
        pointer-events: none;
      }

      /* Preenchimento do miolo no hover (anima só opacidade) */
      .hs_submit::after {
        content: "";
        position: absolute;
        inset: var(--bw);                       /* respeita a espessura da borda */
        border-radius: calc(40px - var(--bw));
        background: var(--grad);
        opacity: 0;                             /* estado normal: só o branco 50% */
        transition: opacity 220ms ease;
        z-index: -1;
        pointer-events: none;
      }

      .hs_submit:hover::after {
        opacity: 1;                             /* hover: fundo vira gradient total */
      }

      /* acessibilidade: menos animação para quem prefere */
      @media (prefers-reduced-motion: reduce) {
        .hs_submit::after { transition: none; }
      }


      .hs_submit:hover::before {
        mask-composite: initial;
      }