:root{
  --blue: #016D97;
  --dark-blue: #015779;
  --light-blue: #ECF4F7;
  --gray: rgb(100,100,100);
  --infoicon: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12%2016.1321V12.1321M12%208.13214H12.01M22%2012.1321C22%2017.655%2017.5228%2022.1321%2012%2022.1321C6.47715%2022.1321%202%2017.655%202%2012.1321C2%206.60929%206.47715%202.13214%2012%202.13214C17.5228%202.13214%2022%206.60929%2022%2012.1321Z%22%20stroke%3D%22%23016D97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --chevronright:       url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.5%208.13214L5.71886%2014.1321L4.5%2012.8671L9.06229%208.13214L4.5%203.39714L5.71886%202.13214L11.5%208.13214Z%22%20fill%3D%22%23016D97%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --chevronright-white: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.5%208.13214L5.71886%2014.1321L4.5%2012.8671L9.06229%208.13214L4.5%203.39714L5.71886%202.13214L11.5%208.13214Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --arrowdown: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%229%22%20height%3D%2211%22%20viewBox%3D%220%200%209%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M5.02964%2010.2868L4.49995%2010.8189L3.97026%2010.2892L0.595264%206.91417L0.0632324%206.38214L1.12495%205.32277L1.65464%205.85245L3.74995%207.94777V1.13214V0.382141H5.24995V1.13214V7.94542L7.34526%205.85011L7.87495%205.32277L8.93667%206.38214L8.40698%206.91183L5.03198%2010.2868H5.02964Z%22%20fill%3D%22%23016D97%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --black: #000000;
  --white: #ffffff
}

body.debug .quiz .view,
body.debug .quiz .view .lowScore,
body.debug .quiz .view .highScore,
body.debug .quiz .view .quiz-question,
body.debug .quiz .view .quiz-answer,
body.debug .quiz .view .radioset .next,
body.debug .quiz .view .progress {
  display: block !important;
}


.container{
  max-width: 880px;
  width: 100%;
}



.main-content{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.35;
  color: #000;
}



/* HEADING AND INTRODUCTION */
.fp-heading{
  font-size: 20px;
  text-align: center;
  margin-bottom: 48px;
}
.fp-heading h1{
    font-size: 32px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--blue);
}
.fp-heading p{
  margin:0
}

.fp_intro{
  margin-bottom: 24px;
}
.fp_intro .question{
  font-size: 24px;
  font-weight: 700;
  color: var(--blue);
}


/* Quiz */
.quiz{
  .view{
    max-width: 830px;
    width: 100%;
    display: none;
    &.row{
      box-shadow: 0px 2px 8px 0px #00000033;
    }

    &:first-child {
      display: block;
      & .quiz-main-content .quiz-question{
        display: block;
      }
    }

    /* Progress bar — width driven by inline custom property --w on each .box-step */
    .box-step{
      width: 100%;
      height: 6px;
      border-radius: 4px;
      background: linear-gradient(to right, var(--blue) var(--w, 0%), #E5E5E5 var(--w, 0%));
    }

    /* Reveal payoff + Continue button only after user picks Yes/No */
    &.answered{
      & .quiz-main-content .quiz-answer{
        display: block;
      }
      & .radioset .next{
        display: inline-block;
      }
    }

    .quiz-main-content{
      display: flex;
      padding: 24px;
      flex-direction: column;
      max-width: 830px;
      min-height: 420px;
      margin: 0 auto;
      p.fq,
      p.lq{
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
        padding: 0;
        color: var(--blue);
        margin-bottom: 0;
      }

      .quiz-question,
      .quiz-answer{
        display: none;
        /* first and last question */
      }

      .quiz-question{/* Question Block */
        border: none;
        margin: 0;
        padding: 0;
        > legend{
          font-size: 24px;
          line-height: 1.35;
          padding: 0;
          color: var(--blue);
          margin-bottom: 0;
        }
      }

      .quiz-answer{ /* Answer Block */
        .answer{
          background-color: var(--light-blue);
          padding: 24px 24px 24px 60px;
          width: 100%;
          &::before{
            content: '';
            width: 24px ;
            height: 24px ;
            background-image: var(--infoicon);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            display: inline-block;
            position: absolute;
            left: 20px;
          }
          & strong{
            font-weight: 600;
          }
        }
      }

    }/* end .quiz-main-content */


    /* Buttons  */
    .radioset {
      margin-bottom: 32px;
      margin-top: 16px;
      .next{
        display: none;
        cursor: pointer;
        padding: 10px 20px;
        border: 1px solid var(--blue);
        background-color: var(--white);
        color: var(--blue);
        font-family: inherit;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        vertical-align: top;
        transition: 0.2s ease-in;
        &::after{
          content: '';
          height: 16px;
          width: 16px;
          background-image: var(--chevronright);
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          display: inline-block;
          vertical-align: middle;
          margin-left: 8px;
        }
        &:hover,
        &:focus{
          background-color: var(--blue);
          color: var(--white);
          &::after{
            background-image: var(--chevronright-white);
          }
        }
      }
      label {
        display: inline-block;
        line-height: 20px;
        cursor: pointer;
        padding: 10px 20px;
        border: 1px solid var(--blue);
        margin-right: 16px;
        background-color: var(--white);
        color: var(--blue);
        font-weight: 400;
        font-size: 16px;
        transition: background-color 0.2s ease-in, color 0.2s ease-in;

        strong{
          font-weight: 700;
        }
        input {
          position: absolute;
          left: -999999px;
        }
        /* Radio-indicator circle */
        &::after {
          content:'';
          height: 14px;
          width: 14px;
          border: 1.5px solid currentColor;
          border-radius: 50%;
          background-color: transparent;
          display: inline-block;
          vertical-align: middle;
          margin-left: 8px;
          transition: background-color 0.2s ease-in;
        }

        /* Selected state — takes precedence over hover so a clicked answer stays gray */
        &:has(input:checked){
          background-color: var(--gray);
          border-color: var(--gray);
          color: var(--white);
        }

        /* Hover / focus preview — only when NOT the currently-selected answer */
        &:not(:has(input:checked)):hover,
        &:not(:has(input:checked)):focus-within {
          background-color: var(--dark-blue);
          border-color: var(--dark-blue);
          color: var(--white);
          &::after {
            background-color: currentColor;
          }
        }
      }
    }






    /* RESULTS BLOCK */
    .progress{ /* processing frame */
      display: none;
      padding:24px 0 0 24px;
      p{
        font-size: 16px;
        line-height: 1.35;
        color: var(--blue);
        font-weight: 700;
      }
      .processing{ /* processing dots */
        display: flex;
        align-items: center;
        > span {
          background: var(--blue);
          height: 6px;
          width: 6px;
          margin: 3px;
          transform: translateY(0);
          border-radius: 3px;
          animation: bounce 600ms infinite alternate;
          &:nth-of-type(2) { animation-delay: 250ms; }
          &:nth-of-type(3) {  animation-delay: 350ms; }
        }
      }
    }

    .lowScore,
    .highScore{
      display: none;
      h2{
        color: var(--blue);
        font-weight: 700;
        font-size: 16px;
      }
      img {
        width: calc(100% + 32px);
        min-width: 170px;
        margin-left: -16px;
        margin-bottom: 16px;
      }

      .downloadlink{
        font-size: 14px;
        margin: 10px 24px 24px 0;
        border: 1px solid #cccccc;
        border-radius: 8px;
        background-color: white;
        color: #000;
        max-width: 200px;
        padding: 0 16px 16px 16px;
        display: inline-block;
        text-decoration: none;
        img{
          border-radius: 7px 7px 0 0;
        }

        &:hover{
          text-decoration: none;
          color: #000;
          .link{
            background-color: rgba(1, 109, 151,.05);
            margin-top: 16px;
            border-bottom-color: currentColor;
          }
        }
        .link{
          display: inline-block;
          font-weight: 600;
          color: var(--blue);
          margin-top: 16px;
          padding: 8px;
          border-bottom: 1px solid transparent;
          &:after{
            content: '';
            display: inline-block;
            background-image: var(--arrowdown);
            background-repeat: no-repeat;
            background-size: contain;
            height: 12px;
            width: 12px;
            margin-left: 8px;
            position: relative;


          }
        }
      }
      .score-content {
        width: 80%;
        padding: 0 0 0 25px;
        max-width: 800px;
        .intro{
          font-weight: 700;
          font-size: 20px;
        }

        > *{
          margin-left: 12px;
        }
        > h2{
          margin-left: 0;
          margin-bottom: 24px;
        }
      }
      .score-content-buttons {
        margin-top: 40px;
      }
    }/* end low/highscore*/

    .contact-us{
      background-color: var(--light-blue);
      display: flex;
      flex-flow: row-reverse nowrap;
      padding: 24px;
      margin: 24px;
      gap: 32px;
      h2{
        font-size: 18px;
        font-weight: 700;
        line-height: 1.35;
      }
      .contact-us-text{
        flex:1 1 75%;
      }
      .contact-us-img{
        flex:1 1 25%;
        img{
          width: 100%;
        }
      }
      a {
        display: inline-block;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        padding: 10px 20px;
        margin: 10px 18px 20px 0;
        background-color: var(--blue);
        color: #FFFFFF;
        text-decoration: none;
        &:hover{
        background-color: var(--dark-blue);
        }
      }
      }/* end contact us*/

  } /* end .view */

}/* end .quiz*/

@keyframes bounce { to {transform: translateY(-4px); } }
/* not css nesting compatible styles */


.references,
.compliance,
.disclaimer{
  font-size: 14px;
  color: var(--gray);
  margin-top: 32px;
}

/*==========================================================*/
.screen-reader-text{
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}