#experienceQuiz,
#experienceResults {
  --eq-page: #f7f7f2;
  --eq-surface: #ffffff;
  --eq-surface-soft: #fbfaf5;
  --eq-surface-hover: #f2f7f4;

  --eq-text: #17241f;
  --eq-text-soft: #56675f;
  --eq-text-faint: #748079;

  --eq-border: rgba(23, 36, 31, 0.13);
  --eq-border-strong: rgba(23, 36, 31, 0.22);

  --eq-primary: #31919d;
  --eq-primary-hover: #087b5c;
  --eq-primary-text: #ffffff;
  --eq-primary-soft: #e6f5ee;

  --eq-button: #17241f;
  --eq-button-hover: #263b32;
  --eq-button-text: #ffffff;

  --eq-focus: #f0bd37;
  --eq-warning: #815d22;

  --eq-shadow:
    0 20px 54px
    rgba(23, 36, 31, 0.08);

  box-sizing: border-box;
  margin-inline: auto;

  color: var(--eq-text);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color-scheme: light;
}

#experienceQuiz[data-theme="dark"],
#experienceResults[data-theme="dark"] {
  --eq-page: #0e1311;
  --eq-surface: #171d1a;
  --eq-surface-soft: #121815;
  --eq-surface-hover: #1d2923;

  --eq-text: #f1f5f2;
  --eq-text-soft: #b0bdb6;
  --eq-text-faint: #89978f;

  --eq-border: rgba(231, 242, 236, 0.12);
  --eq-border-strong: rgba(231, 242, 236, 0.2);

  --eq-primary: #31919d;
  --eq-primary-hover: #68e2b7;
  --eq-primary-text: #07120e;
  --eq-primary-soft: #19382d;

  --eq-button: #ecf4f0;
  --eq-button-hover: #ffffff;
  --eq-button-text: #101713;

  --eq-focus: #ffcf57;
  --eq-warning: #f4c47e;

  --eq-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.3);

  color-scheme: dark;
}


#experienceQuiz *,
#experienceResults * {
  box-sizing: border-box;
}

#experienceQuiz button,
#experienceResults button,
#experienceResults a {
  font: inherit;
}

/* =========================
   QUIZ
   ========================= */
.quiz-info {margin-top:90px;}
.quiz-page .navbar {position:absolute}
.night .quiz-page {background-color:#121212}
.night .quiz-page .contact-info::before {background-color:#121212}
.night .quiz-page .footer-main {background: #092938;}
.night .quiz-page .hamburger span {background:#fff}
.night .quiz-page .pvs-logo {filter: brightness(0) invert(1);}
.quiz-page a:hover {color: #31919d;}
.night .quiz-page .navbar {background-color:transparent!important}
.quiz-page .footer-lang:hover {color: #d8ba84;}





.experience-quiz {
  margin:
    clamp(24px, 6vw, 70px)
    16px;

  padding:
    clamp(22px, 5vw, 40px);

  border:
    1px solid
    var(--eq-border);

  border-radius: 30px;
  background: var(--eq-surface-soft);
  box-shadow: var(--eq-shadow);

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.experience-quiz__header {
  min-width: 0;
}

.experience-quiz__toolbar,
.experience-results__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.experience-quiz__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.experience-quiz__eyebrow,
.experience-results__eyebrow {
  margin: 0;
  color: var(--eq-primary);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.experience-theme-toggle {
  display: grid;
  place-items: center;

  flex: 0 0 auto;
  width: 42px;
  height: 42px;

  padding: 0;

  border:
    1px solid
    var(--eq-border);

  border-radius: 50%;

  color: var(--eq-text);
  background: var(--eq-surface);

  font-size: 1.05rem;
  line-height: 1;

  cursor: pointer;

  transition:
    transform 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.experience-theme-toggle:hover {
  border-color:
    var(--eq-border-strong);

  background:
    var(--eq-surface-hover);

  transform:
    translateY(-1px);
}

.experience-quiz__restart {
  padding: 8px 5px;

  border: 0;
  color: var(--eq-text-faint);
  background: transparent;

  font-size: 0.78rem;
  font-weight: 700;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

  cursor: pointer;
}

.experience-quiz__restart:hover {
  color: var(--eq-text);
}

.experience-quiz__status {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 14px;

  margin-top: 18px;
}

.experience-quiz__progress {
  height: 6px;
  overflow: hidden;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--eq-primary) 14%,
      transparent
    );
}

.experience-quiz__progress span {
  display: block;
  height: 100%;

  border-radius: inherit;
  background: var(--eq-primary);

  transition: width 220ms ease;
}

.experience-quiz__counter {
  color: var(--eq-text-faint);
  font-size: 16px;
  font-weight: 700;
}

.experience-quiz h2 {
  max-width: 75%;

  margin:
    clamp(28px, 5vw, 44px)
    0
    0;

  color: var(--eq-text);

  font-size:50px;

  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.experience-quiz__hint {
  margin: 12px 0 0;
  color: var(--eq-text-soft);

  font-size: 17px;
  line-height: 1.5;
}

.experience-quiz__options {
  display: grid;
  gap: 10px;

  margin-top:
    clamp(24px, 5vw, 36px);
}

.experience-quiz__option {
  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr)
    30px;

  align-items: center;
  gap: 13px;

  width: 100%;
  min-height: 68px;
  padding: 11px 14px;

  border:
    1px solid
    var(--eq-border);

  border-radius: 18px;

  color: var(--eq-text);
  background: var(--eq-surface);

  text-align: left;
  cursor: pointer;
  touch-action: manipulation;

  transition:
    transform 160ms ease,
    opacity 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.experience-quiz__option:hover {
  border-color:
    color-mix(
      in srgb,
      var(--eq-primary) 55%,
      var(--eq-border)
    );

  background:
    var(--eq-surface-hover);

  transform:
    translateY(-1px);
}

.experience-quiz__option-icon {
  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border-radius: 14px;

  color: var(--eq-primary);
  background: var(--eq-primary-soft);

  font-size: 18px;
  font-weight: 800;
}

.experience-quiz__option-label {
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.experience-quiz__option-arrow {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 50%;

  color: var(--eq-text-faint);
  background: var(--eq-surface-soft);

  font-size: 18px;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.experience-quiz__option:hover
.experience-quiz__option-arrow {
  color: var(--eq-primary);
  transform: translateX(2px);
}

.experience-quiz__option.is-selected {
  border-color: var(--eq-primary);
  color: var(--eq-primary-text);
  background: var(--eq-primary);
  transform: scale(0.992);
}

.experience-quiz__option.is-selected
.experience-quiz__option-icon {
  color: var(--eq-primary-text);

  background:
    color-mix(
      in srgb,
      var(--eq-primary-text) 16%,
      transparent
    );
}

.experience-quiz__option.is-selected
.experience-quiz__option-arrow {
  color: var(--eq-primary);
  background: var(--eq-primary-text);
  transform: translateX(2px);
}

.experience-quiz__option.is-muted {
  opacity: 0.4;
}

.experience-quiz__option:disabled {
  cursor: default;
}

/* =========================
   RISULTATI
   ========================= */

.experience-results {
  margin:
    clamp(30px, 7vw, 84px)
    16px;

  color: var(--eq-text);
}

.experience-results__header {
  max-width: 100%;
  margin-bottom: 24px;
}

.experience-results__header h2,
.experience-results--empty h2 {
  margin: 10px 0 0;

  color: var(--eq-text);

  font-size:
    clamp(2rem, 5vw, 3.45rem);

  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.experience-best {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;
  gap: 24px;

  padding:
    clamp(22px, 4vw, 32px);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--eq-primary) 32%,
      var(--eq-border)
    );

  border-radius: 24px;
  background: var(--eq-primary-soft);

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.experience-best__content {
  min-width: 0;
}

.experience-best__label {
  width: fit-content;
  margin: 0 0 12px;

  color: var(--eq-primary);

  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.experience-best h3 {
  margin: 0;
  color: var(--eq-text);

  font-size:30px;

  font-weight: 800;
  line-height: 40px;
  letter-spacing: -0.04em;
}

.experience-best__description {
  max-width: 590px;
  margin: 12px 0 0;

  color: var(--eq-text-soft);

  font-size: 17px;
  line-height: 1.58;
}

.experience-best__details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;

  margin-top: 16px;

  color: var(--eq-primary);

  font-size: 15px;
  font-weight: 700;
}

.experience-best__warning {
  color: var(--eq-warning);
}

.experience-best__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 50px;
  padding: 0 20px;

  border-radius: 15px;

  color: var(--eq-button-text);
  background: var(--eq-button);

  font-size: 17px;
  font-weight: 700!important;
  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.experience-best__cta:hover {
  background: var(--eq-button-hover);
  transform: translateY(-1px);
}

.experience-alternatives {
  margin-top: 30px;
}

.experience-alternatives__title {
  margin: 0 0 10px;

  color: var(--eq-text-faint);

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.experience-alternatives__list {
  border-top:
    1px solid
    var(--eq-border);
}

.experience-alternative {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    38px;

  align-items: center;
  gap: 18px;

  padding: 18px 2px;

  border-bottom:
    1px solid
    var(--eq-border);

  color: var(--eq-text);
  text-decoration: none;
}

.experience-alternative__content {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.experience-alternative strong {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.experience-alternative__description {
  overflow: hidden;

  color: var(--eq-text-soft);

  font-size: 16px;
  line-height: 1.45;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.experience-alternative__meta {
  color: var(--eq-primary);
  font-size: 14px;
  font-weight: 700;
}

.experience-alternative__arrow {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  color: var(--eq-text);
  background: var(--eq-surface-soft);

  transition:
    transform 160ms ease,
    background-color 160ms ease;
}

.experience-alternative:hover
.experience-alternative__arrow {
  background: var(--eq-primary-soft);
  transform: translateX(2px);
}

.experience-results__reset {
  display: block;
  margin: 22px auto 0;
  padding: 9px 4px;

  border: 0;

  color: var(--eq-text-faint);
  background: transparent;

  font-size: 0.86rem;
  font-weight: 700;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;

  cursor: pointer;
}

.experience-results__reset:hover {
  color: var(--eq-text);
}

.experience-results--empty {
  max-width: 560px;
  padding: 48px 0;
  text-align: center;
}

.experience-results--empty
.experience-results__toolbar {
  justify-content: flex-end;
}

.experience-results--empty p {
  margin: 14px 0 0;
  color: var(--eq-text-soft);
  line-height: 1.6;
}

/* =========================
   ACCESSIBILITÀ
   ========================= */

.experience-quiz__option:focus-visible,
.experience-theme-toggle:focus-visible,
.experience-quiz__restart:focus-visible,
.experience-best__cta:focus-visible,
.experience-alternative:focus-visible,
.experience-results__reset:focus-visible {
  outline:
    3px solid
    var(--eq-focus);

  outline-offset: 3px;
}

#experienceQuizTitle:focus,
#experienceResultsTitle:focus {
  outline: none;
}

/* =========================
   TABLET E DESKTOP
   ========================= */

@media (min-width: 680px) {
  .experience-quiz__options {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 679px) {
  .experience-quiz {
    margin: 14px 0px;
    padding: 20px 16px 18px;
    border-radius: 24px;
  }

  .experience-quiz__toolbar {
    align-items: flex-start;
  }

  .experience-quiz__tools {
    margin-top: -3px;
  }

  .experience-quiz__restart {
    display: none;
  }

  .experience-quiz h2 {
    margin-top: 28px;    font-size: 30px;    max-width: 100%;
  }

  .experience-quiz__option {
    min-height: 66px;
  }

  .experience-results {
    margin: 34px 16px 44px;
  }

  .experience-best {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 20px;
    border-radius: 20px;
  }

  .experience-best__cta {
    width: 100%;
  }

  .experience-alternative {
    padding-block: 16px;
  }

  .experience-alternative__description {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient:
      vertical;

    -webkit-line-clamp: 2;

    white-space: normal;
  }
}

@media (max-width: 390px) {
  .experience-quiz__option {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      28px;

    gap: 10px;
    padding-inline: 10px;
  }

  .experience-quiz__option-icon {
    width: 40px;
    height: 40px;
  }

  .experience-best__details {
    display: grid;
  }
}

/* =========================
   BROWSER SENZA COLOR-MIX
   ========================= */

@supports not (
  color:
    color-mix(
      in srgb,
      white,
      black
    )
) {
  .experience-quiz__progress {
    background:
      rgba(11, 149, 111, 0.14);
  }

  .experience-quiz__option:hover {
    border-color:
      var(--eq-primary);
  }

  .experience-quiz__option.is-selected
  .experience-quiz__option-icon {
    background:
      rgba(255, 255, 255, 0.18);
  }

  .experience-best {
    border-color:
      var(--eq-primary);
  }
}

/* =========================
   MOVIMENTO RIDOTTO
   ========================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .experience-quiz,
  .experience-quiz__progress span,
  .experience-quiz__option,
  .experience-quiz__option-arrow,
  .experience-theme-toggle,
  .experience-best,
  .experience-best__cta,
  .experience-alternative__arrow {
    transition: none;
  }

  .experience-quiz__option:hover,
  .experience-theme-toggle:hover,
  .experience-best__cta:hover,
  .experience-alternative:hover
  .experience-alternative__arrow {
    transform: none;
  }
}


@media (min-width:768px) and (max-width:991px){
.experience-quiz h2 {max-width: 100%;font-size: 37px;}
.quiz-info {margin-top: 120px;}
}	

@media (max-width:767px){
.experience-quiz__eyebrow {padding-top:10px;font-size: 11px;}
}