/* === V2 Template Overrides: step-email screen + shifted transforms === */
.page-template-template-benefit-calculator form .calculatorcontainer {
  width: 1100vw !important;
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstepemail {
  transform: translateX(-100vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstep1 {
  transform: translateX(-200vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstep2 {
  transform: translateX(-300vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstep3 {
  transform: translateX(-400vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstep23outcomes {
  transform: translateX(-500vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstep4 {
  transform: translateX(-600vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstep4form {
  transform: translateX(-700vw);
}
.lang-en .page-template-template-benefit-calculator form .calculatorcontainer.showstep5aoutcomes {
  transform: translateX(-800vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showstep5boutcomes {
  transform: translateX(-800vw);
}
.lang-en .page-template-template-benefit-calculator form .calculatorcontainer.showstep5boutcomes {
  transform: translateX(-900vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showthanks {
  transform: translateX(-900vw);
}
.lang-en .page-template-template-benefit-calculator form .calculatorcontainer.showthanks {
  transform: translateX(-1000vw);
}
.page-template-template-benefit-calculator form .calculatorcontainer.showthanksrefresh {
  transform: translateX(-1000vw);
}

/* === Step-email screen styles === */
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap {
  max-width: 1155px;
  background-color: #F4F7FA;
  margin: 48px auto 90px;
  padding: 78px 120px;
}
@media (max-width: 1023px) {
  .page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap {
    padding: 40px;
  }
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .enteremailcopy h2 {
  font-size: 36px;
  line-height: 33px;
  text-align: center;
  font-family: "Toolsgroup-Semibold", sans-serif;
  margin: 0 auto 24px;
  color: #002067;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .enteremailcopy p {
  font-family: "Toolsgroup-Regular", sans-serif;
  font-size: 20px;
  line-height: 30px;
  color: #002067;
  text-align: center;
  margin: 0 auto 71px;
  max-width: 940px;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .enteremailcopy p .bold {
  font-family: "Toolsgroup-Semibold", sans-serif;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap {
  max-width: 908px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1023px) {
  .page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap {
    flex-direction: column;
  }
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap label {
  font-size: 22px;
  color: #002067;
  line-height: 35px;
  font-family: "Toolsgroup-Semibold", sans-serif;
  width: 40%;
}
@media (max-width: 1023px) {
  .page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap label {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
  }
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter {
  width: 100%;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap {
    flex-direction: column;
  }
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap #emailentry-early {
  max-width: 494px;
  border: solid 3px #0378FA;
  height: 64px;
  box-sizing: border-box;
  width: 100%;
  font-family: "Toolsgroup-Regular", sans-serif;
  font-size: 22px;
  color: #3f4a5b;
  padding: 12px;
  background-color: #F4F7FA;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap button {
  width: 150px;
  height: 64px;
  background-color: #0378FA;
  color: #fff;
  font-size: 16px;
  line-height: 54px;
  text-transform: uppercase;
  font-family: "Toolsgroup-Semibold", sans-serif;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap button {
    margin: 12px auto;
  }
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap .loading-spinner {
  display: none;
  position: absolute;
  width: 80px;
  height: 80px;
  top: 4px;
  right: -100px;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap .loading-spinner.active {
  display: inline-block;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap .loading-spinner div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 56px;
  height: 56px;
  border: 6px solid #0378FA;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #0378FA transparent transparent transparent;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap .loading-spinner div:nth-child(1) {
  animation-delay: -0.45s;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap .loading-spinner div:nth-child(2) {
  animation-delay: -0.3s;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap .loading-spinner div:nth-child(3) {
  animation-delay: -0.15s;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .email-error-early {
  font-size: 14px;
  color: #ff0000;
  margin-top: 8px;
  padding: 0 4px;
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emaildisclaimer {
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  color: #3f4a5b;
  max-width: 580px;
  margin: 87px auto 0;
}
@media (max-width: 1023px) {
  .page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emaildisclaimer {
    margin: 40px 24px;
  }
}
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emaildisclaimer p {
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  color: #3f4a5b;
  max-width: 580px;
  margin: 87px auto 0;
}
@media (max-width: 1023px) {
  .page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emaildisclaimer p {
    margin: 40px 24px;
  }
}

/* === V2 step-email: apply email input styling to name/company fields === */
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap #firstname-early,
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap #lastname-early,
.page-template-template-benefit-calculator form .calculatorcontainer #step-email .stepcontent .enteremailwrap .emailinputwrap .inputouter .inputwrap #company-early {
  max-width: 494px;
  border: solid 3px #0378FA;
  height: 64px;
  box-sizing: border-box;
  width: 100%;
  font-family: 'Toolsgroup-Regular', sans-serif;
  font-size: 22px;
  color: #3f4a5b;
  padding: 12px;
  background-color: #F4F7FA;
}

/* === Force visibility of name/company fields (override ZoomInfo FormComplete) === */
.page-template-template-benefit-calculator .field-row-firstname,
.page-template-template-benefit-calculator .field-row-lastname,
.page-template-template-benefit-calculator .field-row-company {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  max-height: none !important;
  min-height: 0 !important;
  position: relative !important;
  width: 100% !important;
  max-width: 494px !important;
}
.page-template-template-benefit-calculator .field-row-firstname label,
.page-template-template-benefit-calculator .field-row-lastname label,
.page-template-template-benefit-calculator .field-row-company label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  margin-right: 0 !important;
  font-size: 22px !important;
  color: #002067 !important;
  line-height: 35px !important;
  font-family: "Toolsgroup-Semibold", sans-serif !important;
}
.page-template-template-benefit-calculator .field-row-firstname .inputouter,
.page-template-template-benefit-calculator .field-row-lastname .inputouter,
.page-template-template-benefit-calculator .field-row-company .inputouter {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.page-template-template-benefit-calculator .field-row-firstname .inputouter .inputwrap,
.page-template-template-benefit-calculator .field-row-lastname .inputouter .inputwrap,
.page-template-template-benefit-calculator .field-row-company .inputouter .inputwrap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.page-template-template-benefit-calculator .field-row-firstname .inputouter .inputwrap input,
.page-template-template-benefit-calculator .field-row-lastname .inputouter .inputwrap input,
.page-template-template-benefit-calculator .field-row-company .inputouter .inputwrap input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
}