/* Phone layout. The form is the first thing a phone visitor sees, with the
   opening question inside the top third of the screen, but the headline block
   is given room to breathe rather than being squeezed flat.
   Everything in this file is phone only. */
@media (max-width:600px){

/* 1. The site header on this page is the logo alone. The search box and the
      duplicate call button are hidden in gq.css; the phone number lives in the
      sticky bar instead, where it is on screen the whole time. */
body:has(.gq) #side-header .fusion-logo-link img{max-height:42px !important;width:auto !important}
body:has(.gq) #side-header .side-header-content{padding-top:0 !important;padding-bottom:0 !important}
body:has(.gq) #side-header .fusion-logo{margin:0 !important;padding:0 !important}
body:has(.gq) #side-header .fusion-logo-link{margin:0 !important;padding:0 !important;display:inline-block !important;line-height:0 !important}
body:has(.gq) #main{padding-top:0 !important}
body:has(.gq) .fusion-page-title-bar{display:none !important}

/* 2. Headline block. Two lines of headline, a hairline, then one short proof
      line. The second half of the proof line is kept for tablet and desktop so
      the phone version stays on a single line.
      The Google Ads sub line keeps its element and shows from 601px up; the
      headline itself is what the ad swapper rewrites. */
.gq{padding:0 12px}
.gq .gq-side--head{padding:18px 17px 17px}
.gq .gq-side--head h1.gq-h1{font-size:clamp(19px,5.05vw,24px);line-height:1.18;letter-spacing:-.02em;margin:0 0 15px;text-wrap:balance}
.gq .gq-side--head p.gq-lede{display:none}
.gq .gq-quickproof{margin:0;padding-top:15px;border-top:1px solid rgba(255,255,255,.22);font-size:14px;line-height:1.45;gap:8px;align-items:flex-start}
.gq .gq-quickproof svg{width:15px;height:15px;margin-top:2px}
.gq .gq-qp-more{display:none}

/* 3. Progress strip and the first question. */
.gq .gq-progress{padding:14px 17px 12px}
.gq .gq-stepline{margin-bottom:10px;gap:10px}
.gq .gq-stepnum{font-size:11.5px}
.gq .gq-steplabel{font-size:16px}
.gq .gq-body{padding:18px 17px 10px}
.gq .gq-q{font-size:clamp(18px,4.7vw,21px);line-height:1.22;margin:0 0 10px}
.gq .gq-field[data-validate=select]{margin-bottom:24px}
.gq .gq-field[data-validate=select] p.gq-help{margin-top:12px}
.gq .gq-field{margin-bottom:24px}
.gq .gq-chips{gap:10px}

/* 4. Error lines stay collapsed on a phone so they do not push the opening
      question down the screen. The primary tap target on a phone is the sticky
      bar, which is pinned to the bottom and never moves, so a growing error
      message cannot shift the button out from under a thumb. */
.gq p.gq-err{min-height:0}
}
@media (max-width:420px){
.gq{padding:0 10px}
.gq .gq-side--head{padding:16px 14px 15px}
.gq .gq-progress{padding:13px 14px 11px}
.gq .gq-body{padding:16px 14px 10px}
}