.quiz-page__main {
  background: linear-gradient(180deg, #fff 0, #f5f7ff 32%, #fff 100%);
}

.quiz-page__section {
  position: relative;
  overflow: clip;
  padding: 56px 0 112px;
}

.content-page .quiz-page__container {
  position: relative;
  width: 100%;
  min-width: var(--container-min-width);
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 0 var(--container-padding-inline);
}

.quiz-page__breadcrumbs {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  margin: 0 0 32px;
}

.quiz-page__word {
  --section-word-color: #ed1c24;
  --section-word-right: 18px;
  --section-word-top: 205px;
  opacity: 1;
}

.quiz-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(330px, .7fr);
  overflow: hidden;
  border: 1px solid rgba(18, 24, 57, .1);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 56px rgba(31, 45, 101, .1);
}

.quiz-shell__content { padding: clamp(32px, 5vw, 64px); }

.quiz-shell__eyebrow,
.quiz-shell__aside-label {
  margin: 0 0 14px;
  color: var(--color-primary);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.quiz-shell h1 {
  max-width: 650px;
  margin: 0;
  color: var(--dark);
  font: 400 clamp(34px, 4vw, 58px)/.98 "Russo One", sans-serif;
  letter-spacing: -.04em;
}

.quiz-shell__lead {
  max-width: 650px;
  margin: 24px 0 36px;
  color: var(--color-muted);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.48;
}

.quiz__progress { margin: 0 0 38px; }
.quiz__progress-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: var(--color-muted); font-size: var(--fs-13); }
.quiz__progress-head strong { color: var(--dark); font-weight: 700; }
.quiz__progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #ebedf4; }
.quiz__progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ee1721 0%, #b80c14 100%); transition: width .3s ease; }

.quiz__step { outline: 0; }
.quiz__question {
  margin: 0 0 22px;
  color: var(--dark);
  font: 400 clamp(23px, 2.5vw, 34px)/1.12 "Russo One", sans-serif;
  letter-spacing: -.025em;
}

.quiz__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quiz__option { position: relative; display: flex; align-items: center; min-height: 58px; gap: 11px; padding: 12px 15px; border: 1px solid #e2e5ef; border-radius: 8px; color: var(--dark); background: #fff; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.quiz__option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.quiz__option-check { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border: 1px solid #c5cad8; border-radius: 50%; color: #fff; }
.quiz__option-check svg { width: 12px; height: 12px; opacity: 0; }
.quiz__option-text { font-size: var(--fs-14); font-weight: 600; line-height: 1.25; }
.quiz__option:has(input:checked) { border-color: var(--color-primary); background: rgba(237, 28, 36, .055); box-shadow: 0 8px 20px rgba(219, 17, 27, .11); }
.quiz__option:has(input:checked) .quiz__option-check { border-color: var(--color-primary); background: var(--color-primary); }
.quiz__option:has(input:checked) .quiz__option-check svg { opacity: 1; }
.quiz__option:focus-within { outline: 3px solid rgba(237, 28, 36, .2); outline-offset: 2px; }

.quiz__other { margin-top: 12px; }
.quiz__other-label,
.quiz__field > span { display: block; margin-bottom: 7px; color: var(--dark); font-size: var(--fs-13); font-weight: 600; }
.quiz__other input,
.quiz__field input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid #dce1ed; border-radius: 8px; color: var(--dark); background: #fff; font: 500 var(--fs-14)/1.2 Montserrat, sans-serif; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.quiz__other input:focus,
.quiz__field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(237, 28, 36, .12); }
.quiz__error { margin: 12px 0 0; color: #c7131b; font-size: var(--fs-13); font-weight: 600; }

.quiz__nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.quiz__back,
.quiz__next { min-height: 52px; border-radius: 8px; }
.quiz__back { padding: 0 22px; border: 1px solid #d8dce8; border-radius: 8px; color: var(--dark); background: #fff; font: 700 var(--fs-14)/1 Montserrat, sans-serif; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.quiz__next { min-width: 142px; }

.quiz__final-text { max-width: 570px; margin: -5px 0 24px; color: var(--color-muted); font-size: var(--fs-15); line-height: 1.5; }
.quiz__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.quiz__field--wide { grid-column: 1 / -1; }
.quiz__field b { color: var(--color-primary); }
.quiz__consent { display: flex; align-items: flex-start; gap: 9px; margin: 9px 0; color: var(--color-muted); font-size: var(--fs-12); line-height: 1.45; cursor: pointer; }
.quiz__consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--color-primary); }
.quiz__consent a { color: inherit; text-underline-offset: 2px; }
.quiz__submit { width: 100%; min-height: 54px; margin-top: 17px; border-radius: 8px; }
.quiz__form .form-status { display: block; min-height: 20px; margin-top: 12px; font-size: var(--fs-13); }

.quiz-shell__aside { position: relative; display: flex; flex-direction: column; min-height: 690px; overflow: hidden; padding: clamp(32px, 4vw, 52px); color: #fff; background: linear-gradient(153deg, #181a27 0%, #1d202f 47%, #d71019 100%); }
.quiz-shell__aside-word { position: absolute; inset: auto -36% -15% auto; width: min(490px, 123%); opacity: .16; transform: rotate(-10deg); pointer-events: none; }
.quiz-shell__aside-word img { display: block; width: 100%; height: auto; }
.quiz-shell__aside-label { position: relative; color: rgba(255, 255, 255, .72); }
.quiz-shell__aside h2 { position: relative; margin: 0; color: #fff; font: 400 clamp(30px, 3vw, 47px)/1 "Russo One", sans-serif; letter-spacing: -.04em; }
.quiz-shell__aside > p:not(.quiz-shell__aside-label) { position: relative; max-width: 340px; margin: 20px 0 28px; color: rgba(255, 255, 255, .78); font-size: var(--fs-15); line-height: 1.5; }
.quiz-shell__benefits { position: relative; display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.quiz-shell__benefits li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; color: rgba(255, 255, 255, .94); font-size: var(--fs-13); font-weight: 600; line-height: 1.35; }
.quiz-shell__benefits span { color: #ff686d; font-size: var(--fs-12); font-weight: 700; }
.quiz-shell__vehicle { position: absolute; right: -21%; bottom: -5%; z-index: 1; width: min(520px, 138%); max-width: none; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .34)); pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .quiz__option:hover { border-color: rgba(237, 28, 36, .55); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23, 30, 70, .08); }
  .quiz__back:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(237, 28, 36, .04); }
}

@media (max-width: 860px) {
  .quiz-page__section { padding-top: 72px; }
  .quiz-shell { grid-template-columns: 1fr; }
  .quiz-shell__aside { min-height: 340px; padding: 36px; }
  .quiz-shell__vehicle { right: -8%; bottom: -26%; width: 480px; }
}

@media (max-width: 620px) {
  .quiz-page__section { padding: 62px 0 64px; }
  .quiz-page__breadcrumbs { margin-bottom: 20px; }
  .quiz-page__word { --section-word-top: 135px; }
  .quiz-shell { border-radius: 16px; }
  .quiz-shell__content { padding: 28px 20px; }
  .quiz-shell h1 { font-size: clamp(31px, 10vw, 42px); }
  .quiz-shell__lead { margin: 18px 0 27px; }
  .quiz__progress { margin-bottom: 29px; }
  .quiz__progress-head { font-size: var(--fs-12); }
  .quiz__options { grid-template-columns: 1fr; gap: 8px; }
  .quiz__option { min-height: 54px; }
  .quiz__nav { margin-top: 22px; }
  .quiz__back,
  .quiz__next { flex: 1 1 0; min-width: 0; padding-inline: 14px; }
  .quiz__form-grid { grid-template-columns: 1fr; }
  .quiz__field--wide { grid-column: auto; }
  .quiz-shell__aside { min-height: 300px; padding: 29px 20px; }
  .quiz-shell__aside h2 { font-size: 31px; }
  .quiz-shell__aside > p:not(.quiz-shell__aside-label) { max-width: 280px; font-size: var(--fs-14); }
  .quiz-shell__benefits { max-width: 270px; }
  .quiz-shell__benefits li { font-size: var(--fs-12); }
  .quiz-shell__vehicle { right: -24%; bottom: -18%; width: 390px; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz__progress-track > span,
  .quiz__option,
  .quiz__back { transition: none; }
}