/* v90: phone — the quiz occupies exactly one screen under the header.
   The «why us» card is always visible at the bottom of the quiz (no «+» to open it),
   every step keeps the same height, so nothing below jumps; the page still scrolls freely.
   Desktop and tablet are not touched. */

/* the bottom bar and the chat button fade out while the quiz is in focus — see approved-v90.css / .js (owner's version) */

@media(max-width:760px){
 .hq-section .hq:not(.is-final){
  box-sizing:border-box;display:flex;flex-direction:column;
  min-height:calc(100vh - var(--hq-top,84px) - 8px);
  min-height:calc(100svh - var(--hq-top,84px) - 8px);
  padding-top:14px;padding-bottom:12px
 }
 .hq-section .hq:not(.is-final)>.hq-main{flex:0 0 auto}

 /* focus: while answering, the header slides up and the quiz takes the whole screen */
 .site-header{transition:transform .2s ease}
 body.hq-focus .site-header{transform:translateY(calc(-100% - 6px))}
 body.hq-focus .hq-section .hq:not(.is-final){min-height:calc(100vh - 16px);min-height:calc(100svh - 16px)}

 /* the card is shown on every step instead of the collapsed «Татьяна Петрова +» strip */
 .hq-section .hq-trust-strip{display:none!important}
 .hq-section .hq:not(.is-final)>.hq-story,
 .hq-section .hq:not(.is-final)>.hq-story.is-mobile-open{display:flex!important;margin-top:auto;flex:0 0 auto;animation:none}
 .hq-section .hq:not(.is-final)>.hq-story{position:relative;top:0}
 .hq-section .hq>.hq-main+.hq-story{margin-top:auto}
 .hq-section .hq:not(.is-final) .hq-main{padding-bottom:12px}
 .hq-section .hq:not(.is-final)>.hq-story .hq-story-photo{width:70px;min-height:0}
 .hq-section .hq:not(.is-final)>.hq-story .hq-story-copy{padding:9px 11px 10px}
 .hq-section .hq:not(.is-final)>.hq-story .hq-eyebrow{font-size:9px;line-height:1.3}
 .hq-section .hq:not(.is-final)>.hq-story h3{font-size:15px;line-height:1.2;margin:3px 0 4px}
 .hq-section .hq:not(.is-final)>.hq-story p{font-size:12px;line-height:1.35}
 .hq-section .hq:not(.is-final)>.hq-story small,
 .hq-section .hq:not(.is-final)>.hq-story .hq-story-controls{display:none}

 /* final step: phone, button and conditions first, «Вы получите» and Анастасия right under them */
 #home-quiz .hq-final-v76 .hq-final-intro{display:contents}
 #home-quiz .hq-final-v76 .hq-final-title{order:1}
 #home-quiz .hq-final-v76 .hq-contact-fields{order:2}
 #home-quiz .hq-final-v76 .hq-deliverables{order:3}
 #home-quiz .hq-final-v76 .hq-final-manager{order:4}
 #home-quiz .hq-final-v76 .hq-answer-details{order:5}
}

/* short phone screens: slightly tighter steps so six answers + the card still fit */
@media(max-width:760px) and (max-height:700px){
 .hq-section .hq:not(.is-final) .hq-question{font-size:20px;margin:11px 0 9px}
 .hq-section .hq:not(.is-final) .hq-back{margin-top:9px}
 .hq-section .hq:not(.is-final) .hq-options{gap:6px}
 .hq-section .hq:not(.is-final) .hq-options button{min-height:46px;padding-top:7px;padding-bottom:7px;line-height:1.3}
 .hq-section .hq:not(.is-final) .hq-services{gap:6px}
 .hq-section .hq:not(.is-final) .hq-main .hq-services button{min-height:56px;padding-top:4px;padding-bottom:4px}
 .hq-section .hq:not(.is-final) .hq-main .hq-services img{width:52px;height:46px}
 .hq-section .hq:not(.is-final) .hq-unknown{margin-top:9px}
 .hq-section .hq:not(.is-final) .hq-note{margin-bottom:7px;padding:6px 10px;font-size:12.5px;line-height:1.4}
 .hq-section .hq:not(.is-final)>.hq-story .hq-eyebrow{display:none}
 .hq-section .hq:not(.is-final)>.hq-story h3{margin-top:0}
 .hq-section .hq:not(.is-final)>.hq-story p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
/* very short screens (iPhone SE with the browser bars): the card keeps only its headline */
@media(max-width:760px) and (max-height:600px){
 .hq-section .hq:not(.is-final) .hq-question{font-size:19px}
 .hq-section .hq:not(.is-final) .hq-options button{min-height:44px;font-size:15px}
 .hq-section .hq:not(.is-final) .hq-main .hq-services button{min-height:50px;font-size:15px}
 .hq-section .hq:not(.is-final) .hq-main .hq-services img{width:46px;height:40px}
 .hq-section .hq:not(.is-final)>.hq-story .hq-story-photo{width:52px}
 .hq-section .hq:not(.is-final)>.hq-story .hq-eyebrow{display:block}
 .hq-section .hq:not(.is-final)>.hq-story h3{margin:2px 0 0}
 .hq-section .hq:not(.is-final)>.hq-story p{display:none}
}
/* final step on short screens: phone, button and both conditions on the first screen */
@media(max-width:760px) and (max-height:700px){
 #home-quiz .hq-final-v76{gap:10px;margin-top:10px}
 #home-quiz .hq-final-intro .hq-final-title,#home-quiz .hq-final-v76 .hq-final-title{font-size:22px}
 #home-quiz .hq-send-title{font-size:19px;margin-bottom:8px}
 #home-quiz .hq-channels{margin-bottom:10px}
 #home-quiz .hq-channels label span{min-height:42px}
 #home-quiz .hq-form label[for=hq-phone]{margin-bottom:6px}
 #home-quiz .hq-form input[type=tel]{height:50px}
 #home-quiz .hq-form .hq-primary{min-height:50px;margin-top:10px}
}
@media(max-width:760px) and (max-height:600px){
 .hq-section .hq:not(.is-final) .hq-services{gap:5px}
 .hq-section .hq:not(.is-final) .hq-main .hq-services button{min-height:48px}
 .hq-section .hq:not(.is-final) .hq-unknown{margin-top:4px}
 #home-quiz .hq-final-intro .hq-final-title,#home-quiz .hq-final-v76 .hq-final-title{font-size:20px}
 #home-quiz .hq-channels label span{min-height:40px}
 #home-quiz .hq-channels legend{margin-bottom:5px}
}

/* v90: price-block calculator (pop-up). Conditions sit under the button, as in the page quiz;
   the phone field and the button come before the «check my answers» details so they are on the first screen. */
.cf-perks-list{list-style:none;display:grid;gap:2px;margin:8px 0 0;padding:0}
.cf-perks-list li{font-size:13.5px;line-height:1.35;font-weight:700;color:#1f5e43}
.cf-perks-list li::before{content:"✓ "}
.cf-dialog.cf-is-contact .cf-dialog-content{display:flex;flex-direction:column}
.cf-dialog.cf-is-contact .cf-final-results{order:1}
.cf-dialog.cf-is-contact .cf-contact-form{order:2}
.cf-dialog.cf-is-contact .cf-final-manager-note{order:3;margin-top:14px}
.cf-dialog.cf-is-contact .cf-answer-summary{order:4;margin-bottom:0}
@media(max-width:760px){
 /* phone: the picture is hidden (as in the page quiz), so all answers are visible at once */
 .cf-dialog .cf-question-visual{display:none}
 .cf-dialog .cf-question-layout{display:block}
 /* phone: «Куда отправить», phone and button first, «Вы получите» right under them */
 .cf-dialog.cf-is-contact .cf-contact-form{order:1}
 .cf-dialog.cf-is-contact .cf-final-results{order:2;margin-top:14px}
 .cf-dialog.cf-is-contact .cf-dialog-hint{display:none}
}