.results-page:is([data-marks="0"],[data-marks="1"],[data-marks="2"],[data-marks="3"]){
 --res-primary-color: var(--secondary-dark-tangerine);
 --svg-color: var(--secondary-dark-tangerine);
}
.results-page:is([data-marks="4"],[data-marks="5"],[data-marks="6"]){
 --res-primary-color: var(--primary-yellow);
  --svg-color: #F4FF6B;
}
.results-page:is([data-marks="7"],[data-marks="8"],[data-marks="9"]){
  --res-primary-color: var(--secondary-dark-mint);
  --svg-color: #89F2CD;
}
.results-page:is([data-marks="10"]){
  --res-primary-color: var(--secondary-light-purple);
  --svg-color: none;
}

.results-page__banner-dial{ display: none; }
.results-page:is([data-marks="0"], [data-marks="1"], [data-marks="2"], [data-marks="3"], [data-marks="4"], [data-marks="5"], [data-marks="6"], [data-marks="7"], [data-marks="8"], [data-marks="9"]) .results-page__banner-dial{ display: block; }

.results-pahe__extreme-badge{ display: none; }
.results-page:is([data-marks="10"]) .results-pahe__extreme-badge{ display: block }

.conditioned-display{ display: none; }

.results-page:is([data-marks="0"],[data-marks="1"],[data-marks="2"],[data-marks="3"]) .conditioned-display.beginner{ display: block; }
.results-page:is([data-marks="4"],[data-marks="5"],[data-marks="6"]) .conditioned-display.moderate{ display: block; }
.results-page:is([data-marks="7"],[data-marks="8"],[data-marks="9"]) .conditioned-display.high{ display: block; }
.results-page:is([data-marks="10"]) .conditioned-display.extreme{ display: block; }

.results-page__banner .rot-group {
  transform-box: view-box;
  transform-origin: 271.702px 275.263px;
  transform: rotate(-10deg);
  animation: rotateArrow 1s ease-in-out 0.5s forwards;
}

.results-page[data-marks="0"]{ --rotate-value: -20deg; }
.results-page[data-marks="1"]{ --rotate-value: 0deg; }
.results-page[data-marks="2"]{ --rotate-value: 20deg; }
.results-page[data-marks="3"]{ --rotate-value: 40deg; }
.results-page[data-marks="4"]{ --rotate-value: 60deg; }
.results-page[data-marks="5"]{ --rotate-value: 80deg; }
.results-page[data-marks="6"]{ --rotate-value: 100deg; }
.results-page[data-marks="7"]{ --rotate-value: 120deg; }
.results-page[data-marks="8"]{ --rotate-value: 140deg; }
.results-page[data-marks="9"]{ --rotate-value: 160deg; }

@keyframes rotateArrow{
 0%{
  transform: rotate(-10deg);
 }
 100%{
  transform: rotate(var(--rotate-value));
 }
}

.results-page .text-black{ color: #000; }
.results-page__banner{ padding-top: 8.8rem; background-color: transparent; position: relative; overflow: hidden; display: none;}
.results-page__banner-outer{ position: relative; z-index: 2;  }

.results-page__banner-outer{ margin-top: 1.2rem;  }
.results-page__banner-right svg{ width: 100%; height: auto; max-width: 28rem; }
.results-page__banner-top{ margin-bottom: 1.8rem; }
.results-page__banner-marks{ margin-bottom: 0; }
.results-page__banner-title{ margin-bottom: 1.8rem; }

.results-page__banner-right{ margin-top: 42.45px; display: flex; justify-content: center; }
.results-page .latest-articles,.results-page .latest-articles .articles-wrapper-item,.results-page .latest-articles .articles-wrapper{ margin: 0; }
.results-page .article-card .article-image img{ max-height: 28.3rem; }

.results-page__signposts__right,.results-page__signposts__left{ background-color: var(--primary-lightest-yellow); border-radius: 2.4rem; height: 100%; }

.results-page__signposts-cta{ display: flex; gap: .8rem; flex-wrap: wrap; }
.results-page .detail-page-banner a.icon{ margin: 0; }

.results-page__extreme-badge{ max-height: 27.3rem; }
.results-page__extreme-badge .results-page__extreme-badge-image{ height: 100%; width: auto; }

.results-page__extreme-badge{ margin-bottom: 2rem; }
.global-travel-quiz-main .results-page__banner {padding-top: 4.8rem;}
.results-page { opacity: 0; visibility: hidden; /* animation: fadeInResults 0.5s ease-in forwards; animation-delay: 0.3s; */ transition: opacity 0.6s ease-in, visibility 0s 0.6s; display: none;}
.results-page.visible { opacity: 1; visibility: visible; transition: opacity 0.6s ease-in, visibility 0s 0s; display: block;}
.results-page.visible .results-page__banner {display: block; background-color: var(--res-primary-color);}

@media all and (min-width: 768px){
 .results-page__banner{ padding-top: 12rem; }
 .results-page__banner-marks{ margin-bottom: 1.3rem; }
 .results-page__banner-right{ margin-top: 0; height: 100%;}
 .results-page__banner-right svg{ max-width: 100%; height: 100%;}
 .results-page__banner-intro{ margin-bottom: 1.8rem; }
 .results-page .article-card .article-image img{ max-height: none; }
 .results-pahe__extreme-badge{ margin-bottom: 3.9rem; }
 .global-travel-quiz-main .results-page__banner {padding-top: 4.8rem;}
}