/* V191 — quiz viewport fit + stronger mobile navigation */

/* Desktop: keep the whole quiz composition inside one viewport below the header */
@media (min-width:1100px){
  html body.site-final #quiz.quiz-v188{
    min-height:calc(100vh - 96px)!important;
    height:calc(100vh - 96px)!important;
    padding:14px 0 18px!important;
    display:flex!important;
    align-items:stretch!important;
  }
  html body.site-final #quiz > .container{
    height:100%!important;
    min-height:0!important;
  }
  html body.site-final #quiz .quiz-v188__layout{
    height:100%!important;
    min-height:0!important;
    grid-template-columns:minmax(330px,.64fr) minmax(0,1.36fr)!important;
    gap:24px!important;
  }
  html body.site-final #quiz .quiz-v188__aside,
  html body.site-final #quiz .quiz-v188__card{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
  }
  html body.site-final #quiz .quiz-v188__aside{
    padding:26px 28px 206px!important;
    border-radius:28px!important;
  }
  html body.site-final #quiz .quiz-v188__kicker{
    margin-bottom:9px!important;
    font-size:11px!important;
  }
  html body.site-final #quiz .quiz-v188__aside h2{
    font-size:clamp(38px,2.65vw,48px)!important;
    line-height:.97!important;
    letter-spacing:-.045em!important;
  }
  html body.site-final #quiz .quiz-v188__lead{
    margin:13px 0 15px!important;
    font-size:14px!important;
    line-height:1.45!important;
  }
  html body.site-final #quiz .quiz-v188__benefits{
    gap:10px!important;
  }
  html body.site-final #quiz .quiz-v188__benefit{
    grid-template-columns:74px minmax(0,1fr)!important;
    gap:14px!important;
  }
  html body.site-final #quiz .quiz-v188__benefit img{
    width:72px!important;
    height:72px!important;
  }
  html body.site-final #quiz .quiz-v188__benefit strong{
    font-size:15px!important;
  }
  html body.site-final #quiz .quiz-v188__benefit span{
    font-size:12.5px!important;
    margin-top:2px!important;
  }
  html body.site-final #quiz .quiz-v188__aside-art{
    left:2px!important;
    right:2px!important;
    bottom:-4px!important;
    width:calc(100% - 4px)!important;
    max-height:206px!important;
  }
  html body.site-final #quiz .quiz-v188__card{
    padding:22px 26px 20px!important;
    border-radius:28px!important;
  }
  html body.site-final #quiz .quiz-v188__progress{
    margin:10px 0 16px!important;
  }
  html body.site-final #quiz .quiz-v188__step h3{
    font-size:clamp(30px,2vw,36px)!important;
  }
  html body.site-final #quiz .quiz-v188__note{
    margin:6px 0 13px!important;
    font-size:12.5px!important;
  }
  html body.site-final #quiz .quiz-v188__options{
    gap:12px!important;
  }
  html body.site-final #quiz .quiz-v188__option-ui{
    min-height:142px!important;
    padding:14px 16px 13px!important;
    gap:9px!important;
  }
  html body.site-final #quiz .quiz-v188__option-ui>img{
    width:82px!important;
    height:82px!important;
    flex-basis:82px!important;
  }
  html body.site-final #quiz .quiz-v188__option-text em{
    font-size:17px!important;
    line-height:1.2!important;
  }
  html body.site-final #quiz .quiz-v188__actions{
    padding-top:14px!important;
    grid-template-columns:160px 230px!important;
    gap:14px!important;
  }
  html body.site-final #quiz .quiz-v188__actions .button{
    min-height:50px!important;
    height:50px!important;
    font-size:14.5px!important;
  }
  /* Result screen is also constrained to the viewport */
  html body.site-final #quiz .quiz-v188__finish.is-active{
    gap:16px!important;
  }
  html body.site-final #quiz .quiz-v188__result-copy{
    min-height:0!important;
    padding:20px 20px 164px!important;
  }
  html body.site-final #quiz .quiz-v188__result-art{
    height:170px!important;
  }
  html body.site-final #quiz .quiz-v188__formwrap{
    padding:20px!important;
  }
}

/* Short desktop / laptop screens: tighter vertical rhythm, but keep large visual icons */
@media (min-width:1100px) and (max-height:820px){
  html body.site-final #quiz.quiz-v188{
    min-height:calc(100vh - 82px)!important;
    height:calc(100vh - 82px)!important;
    padding:8px 0 10px!important;
  }
  html body.site-final #quiz .quiz-v188__aside{
    padding:20px 24px 160px!important;
  }
  html body.site-final #quiz .quiz-v188__aside h2{
    font-size:38px!important;
  }
  html body.site-final #quiz .quiz-v188__lead{
    margin:9px 0 10px!important;
    font-size:12.5px!important;
  }
  html body.site-final #quiz .quiz-v188__benefits{gap:6px!important}
  html body.site-final #quiz .quiz-v188__benefit{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:10px!important;
  }
  html body.site-final #quiz .quiz-v188__benefit img{
    width:56px!important;
    height:56px!important;
  }
  html body.site-final #quiz .quiz-v188__benefit strong{font-size:13.5px!important}
  html body.site-final #quiz .quiz-v188__benefit span{font-size:11px!important}
  html body.site-final #quiz .quiz-v188__aside-art{
    max-height:164px!important;
  }
  html body.site-final #quiz .quiz-v188__card{
    padding:16px 22px 14px!important;
  }
  html body.site-final #quiz .quiz-v188__counter b{font-size:19px!important}
  html body.site-final #quiz .quiz-v188__progress{margin:8px 0 11px!important}
  html body.site-final #quiz .quiz-v188__step h3{font-size:28px!important}
  html body.site-final #quiz .quiz-v188__note{margin:4px 0 9px!important;font-size:11.5px!important}
  html body.site-final #quiz .quiz-v188__options{gap:9px!important}
  html body.site-final #quiz .quiz-v188__option-ui{
    min-height:118px!important;
    padding:9px 12px 9px!important;
    gap:5px!important;
  }
  html body.site-final #quiz .quiz-v188__option-ui>img{
    width:68px!important;
    height:68px!important;
    flex-basis:68px!important;
  }
  html body.site-final #quiz .quiz-v188__option-text em{font-size:14.5px!important}
  html body.site-final #quiz .quiz-v188__actions{
    padding-top:8px!important;
  }
  html body.site-final #quiz .quiz-v188__actions .button{
    height:44px!important;
    min-height:44px!important;
  }
}

/* Tablet: concise intro strip + full-width question card */
@media (min-width:769px) and (max-width:1099px){
  html body.site-final #quiz.quiz-v188{padding:34px 0!important}
  html body.site-final #quiz .quiz-v188__layout{gap:14px!important}
  html body.site-final #quiz .quiz-v188__aside{
    padding:20px 22px!important;
    grid-template-columns:minmax(230px,.75fr) minmax(0,1.25fr)!important;
  }
  html body.site-final #quiz .quiz-v188__aside h2{font-size:34px!important}
  html body.site-final #quiz .quiz-v188__lead{font-size:13px!important;margin:10px 0 0!important}
  html body.site-final #quiz .quiz-v188__benefits{gap:8px!important}
  html body.site-final #quiz .quiz-v188__benefit{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:11px!important;
  }
  html body.site-final #quiz .quiz-v188__benefit img{width:56px!important;height:56px!important}
  html body.site-final #quiz .quiz-v188__card{min-height:560px!important}
}

/* Mobile: centered large choice cards + wide navigation */
@media (max-width:768px){
  html body.site-final #quiz.quiz-v188{padding:30px 0 38px!important}
  html body.site-final #quiz .quiz-v188__card{
    padding:18px 12px 16px!important;
  }
  html body.site-final #quiz .quiz-v188__mobile-head{margin-bottom:14px!important}
  html body.site-final #quiz .quiz-v188__mobile-head h2{
    font-size:31px!important;
    line-height:1!important;
  }
  html body.site-final #quiz .quiz-v188__mobile-head p{
    margin-top:7px!important;
    font-size:14px!important;
  }
  html body.site-final #quiz .quiz-v188__step h3{
    font-size:26px!important;
    line-height:1.03!important;
    text-align:center!important;
  }
  html body.site-final #quiz .quiz-v188__note{
    margin:7px auto 13px!important;
    max-width:330px!important;
    font-size:13px!important;
    text-align:center!important;
  }
  html body.site-final #quiz .quiz-v188__option-ui{
    min-height:150px!important;
    padding:14px 9px!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:9px!important;
  }
  html body.site-final #quiz .quiz-v188__option-ui>img{
    width:74px!important;
    height:74px!important;
    flex-basis:74px!important;
    margin:0 auto!important;
  }
  html body.site-final #quiz .quiz-v188__option-text,
  html body.site-final #quiz .quiz-v188__option-text em,
  html body.site-final #quiz .quiz-v188__option-text small{
    text-align:center!important;
  }
  html body.site-final #quiz .quiz-v188__option-text em{
    font-size:16px!important;
    line-height:1.2!important;
  }
  html body.site-final #quiz .quiz-v188__actions{
    width:100%!important;
    grid-template-columns:minmax(0,42fr) minmax(0,58fr)!important;
    gap:10px!important;
    padding-top:16px!important;
  }
  html body.site-final #quiz .quiz-v188__actions .button{
    width:100%!important;
    min-width:0!important;
    min-height:56px!important;
    height:56px!important;
    padding:0 12px!important;
    font-size:15px!important;
    border-radius:14px!important;
  }
  html body.site-final #quiz .quiz-v188__actions .button:first-child{justify-self:stretch!important}
  html body.site-final #quiz .quiz-v188__actions .button:last-child{justify-self:stretch!important}
}

@media (max-width:390px){
  html body.site-final #quiz .quiz-v188__option-ui>img{
    width:70px!important;
    height:70px!important;
    flex-basis:70px!important;
  }
  html body.site-final #quiz .quiz-v188__option-text em{font-size:15px!important}
  html body.site-final #quiz .quiz-v188__actions .button{font-size:14px!important}
}