/* ============================================================
   ZIRYVO — consultation flow
   One question per screen, on the same dark field as the hero. The
   composition is deliberately narrow and centred: there is only ever
   one thing to answer, so nothing competes with it.
   ============================================================ */

.quiz {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* minmax(0, 1fr), not auto: the atmosphere layer is far wider than the
     viewport and an auto column would stretch to it. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.quiz__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  padding-block: calc(var(--nav-h) + clamp(40px, 6vh, 80px)) clamp(60px, 8vh, 100px);
}

.quiz__noscript { display: none; color: var(--fg-dim); margin-bottom: 28px; }

/* ---------------- Progress ---------------- */
.quiz__head { margin-bottom: clamp(34px, 5vh, 58px); }

.quiz__bar {
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.quiz__bar span {
  display: block;
  height: 100%;
  width: 16%;
  border-radius: 2px;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(184, 255, 61, 0.5);
  transition: width 0.55s var(--ease);
}
.quiz__count {
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.quiz__sep { margin-inline: 5px; }

/* ---------------- Steps ---------------- */
.step { display: none; border: 0; padding: 0; margin: 0; }
.step.is-on { display: block; animation: step-in 0.5s var(--ease) both; }

@keyframes step-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step.is-on { animation: none; }
}

.quiz__q {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 20ch;
  margin-bottom: clamp(24px, 3.4vh, 38px);
}
.quiz__q:focus { outline: none; }

.quiz__hint {
  margin-top: -14px;
  margin-bottom: 24px;
  font-size: 0.82rem;
  color: var(--fg-faint);
}

/* ---------------- Options ---------------- */
.quiz__opts { display: flex; flex-direction: column; gap: 10px; }

.opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(15px, 2vh, 19px) clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg-dim);
  font-size: clamp(0.92rem, 1.5vw, 1.02rem);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft),
              background 0.3s var(--ease-soft), transform 0.3s var(--ease);
}
.opt:hover {
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateX(3px);
}
.opt.is-on {
  color: var(--lime);
  border-color: var(--lime-faint);
  background: rgba(184, 255, 61, 0.08);
}
.opt:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.quiz__go { margin-top: 22px; }

/* ---------------- Contact step ---------------- */
.quiz__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 620px) {
  .quiz__fields { grid-template-columns: 1fr 1fr; }
  .fld--wide { grid-column: 1 / -1; }
}

.fld { display: block; }
.fld > span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--fg-dim);
}
.fld em { font-style: normal; color: var(--fg-faint); }

.fld input,
.fld textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}
.fld textarea { resize: vertical; min-height: 84px; }
.fld input:focus,
.fld textarea:focus {
  outline: none;
  border-color: var(--lime-faint);
  background: rgba(184, 255, 61, 0.04);
}
.fld input::placeholder { color: var(--fg-faint); }

.quiz__err {
  margin-top: 16px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 120, 120, 0.4);
  border-radius: 11px;
  background: rgba(255, 90, 90, 0.08);
  color: #ffb4b4;
  font-size: 0.86rem;
}

.quiz__send { margin-top: clamp(24px, 3.4vh, 34px); }
.quiz__legal {
  margin-top: 16px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--fg-faint);
  max-width: 46ch;
}

/* ---------------- Back ---------------- */
.quiz__back {
  margin-top: clamp(26px, 3.4vh, 36px);
  font-size: 0.82rem;
  color: var(--fg-faint);
  cursor: pointer;
  transition: color 0.3s var(--ease-soft);
}
.quiz__back:hover { color: var(--fg); }
.quiz__back::before { content: '\2190'; margin-right: 8px; }

/* ---------------- Done ---------------- */
.quiz__done { text-align: center; padding-block: clamp(20px, 5vh, 50px); }

.quiz__tick {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto clamp(24px, 3vh, 32px);
  border-radius: 50%;
  border: 1px solid var(--lime-faint);
  background: rgba(184, 255, 61, 0.08);
  color: var(--lime);
}
.quiz__tick svg { width: 26px; height: 26px; }

.quiz__doneTitle {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 14px;
}
.quiz__doneTitle:focus { outline: none; }
.quiz__doneCopy {
  color: var(--fg-dim);
  max-width: 42ch;
  margin: 0 auto clamp(28px, 3.6vh, 38px);
  line-height: 1.6;
}

/* The honeypot has to be reachable by a bot parsing the DOM and invisible
   to everyone else — display:none is skipped by some crawlers. */
.quiz__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The header carries a "Book a consultation" button everywhere else. On
   this page the visitor is already doing exactly that, so it would only
   offer to restart the form they are halfway through. */
[data-page="start"] .nav__right .btn { display: none; }