/* Attic Insulation is the visual reference. No question or renderer logic here.
   Existing measurement grids and service-specific first-question exceptions stay intact. */
body:is(.quiz-spray-foam,.quiz-paving,.bp-quiz-epoxy,.bp-quiz-windows){
 --bp-preview-height:min(34svh,360px,max(150px,calc(100svh - 440px)));
 --bp-answer-height:clamp(300px,38svh,400px);
}
/* Desktop: the image begins at the top, Back shares the answer footer. */
@media(min-width:1101px){
 body.quiz-paving{--bp-answer-height:clamp(350px,42svh,420px)}
 body:is(.quiz-spray-foam,.quiz-paving,.bp-quiz-epoxy,.bp-quiz-windows) .shell{padding:24px 28px;gap:18px;grid-template-columns:clamp(180px,15vw,236px) minmax(0,1fr) clamp(210px,19vw,300px)}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.center,.workspace,.workspace:has(.wd-dimension-question)){grid-template-rows:minmax(150px,1fr) var(--bp-answer-height);gap:10px}
 body:is(.quiz-spray-foam,.quiz-paving) .shell .center{gap:10px}
 body:is(.quiz-spray-foam,.quiz-paving)[data-step] .shell .q-card{height:var(--bp-answer-height)!important;transition:none}
 body:is(.quiz-spray-foam,.quiz-paving) .shell .rail-logo{transform:none}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .brand{margin-top:0}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer{min-height:58px;padding:7px 20px;border-top:0;gap:10px}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer :is(#back,.back-button),body:is(.quiz-spray-foam,.quiz-paving) .shell #backBtn{
  display:inline-flex;align-items:center;justify-content:flex-start;border:0;border-radius:8px;background:transparent;color:#64748b;min-height:44px;min-width:56px;padding:8px 0;font-size:13px;box-shadow:none;
 }
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer :is(#back,.back-button):hover,body:is(.quiz-spray-foam,.quiz-paving) .shell #backBtn:hover{color:var(--bp-brand,#2563eb);background:transparent}
 body.bp-quiz-windows .question-footer #step-note{margin-left:auto}
 body.bp-quiz-epoxy .question-footer .selection-note{flex:1}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .options[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.bp-quiz-windows .options.products,body.bp-quiz-windows .options.materials{grid-auto-rows:minmax(86px,1fr)}
 body.bp-quiz-windows .options.concerns{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Same small circular back control as Insulation, with a 44px touch target. */
body:is(.quiz-spray-foam,.quiz-paving) .app .m-top{min-height:44px;padding:max(0px,env(safe-area-inset-top)) 16px 6px;grid-template-columns:1fr auto 1fr}
body:is(.quiz-spray-foam,.quiz-paving) .app .m-hback{
 width:44px;height:44px;min-height:44px;border:0;border-radius:50%;background:radial-gradient(circle,#f4f1ea 0 16px,transparent 16.5px);color:#1e293b;padding:0;box-shadow:none;
}
body:is(.quiz-spray-foam,.quiz-paving) .app .m-hback svg{width:16px;height:16px;color:#1e293b}
body:is(.quiz-spray-foam,.quiz-paving) .app .m-logo{height:28px;width:auto;max-width:145px;object-fit:contain}
body:is(.quiz-spray-foam,.quiz-paving) .app .m-segs{padding-bottom:0}
body:is(.quiz-spray-foam,.quiz-paving) .app .m-foot{padding:9px 18px max(12px,env(safe-area-inset-bottom));gap:8px}
body:is(.quiz-spray-foam,.quiz-paving) .app .m-cont{min-height:46px}
@media(min-height:501px){
 body:is(.quiz-spray-foam,.quiz-paving)[data-step] .app{display:flex}
 body:is(.quiz-spray-foam,.quiz-paving)[data-step] .app .m-preview{
  width:calc(100% - 32px)!important;height:var(--bp-preview-height)!important;max-height:none!important;aspect-ratio:auto!important;flex:0 0 auto!important;align-self:auto;margin:10px 16px 0;
 }
 body:is(.quiz-spray-foam,.quiz-paving)[data-step] .app .m-qpanel{padding:12px 18px 8px;gap:8px;justify-content:flex-start}
 body:is(.quiz-spray-foam,.quiz-paving) .app .m-title{font-size:clamp(18px,4.6vw,21px);line-height:1.2}
 body:is(.quiz-spray-foam,.quiz-paving) .app .m-help{font-size:13px;line-height:1.4}
 body.quiz-paving[data-step] .app .pv-equal-choices{grid-auto-rows:minmax(78px,1fr)}
}
@media(max-width:1100px){
 body.bp-quiz-epoxy .mobile-header{padding:max(0px,env(safe-area-inset-top)) 16px 0}
 body.bp-quiz-epoxy .mobile-top{min-height:44px;padding:0 0 6px}
 body.bp-quiz-epoxy .mobile-progress i{flex:1;min-width:0;height:4px;border-radius:99px;background:#e2e8f0;overflow:hidden}
 body.bp-quiz-epoxy .mobile-progress i.on{background:var(--bp-brand,#2563eb)}
 body.bp-quiz-epoxy .mobile-header img{width:130px;height:28px;max-height:28px;margin:0;object-fit:contain}
 body.bp-quiz-epoxy .mobile-back,body.bp-quiz-windows .mobile-head .back-button{
  flex:none;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,#f4f1ea 0 16px,transparent 16.5px);color:#1e293b;gap:0;box-shadow:none;
 }
 body.bp-quiz-epoxy .mobile-back span{display:none}
 body.bp-quiz-epoxy .mobile-back svg{width:16px;height:16px}
 body.bp-quiz-windows .mobile-head{height:calc(48px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 4px;gap:0}
 body.bp-quiz-windows .mobile-head .back-button{font-size:0}
 body.bp-quiz-windows .mobile-head .back-button span{font-size:18px}
 body.bp-quiz-windows .mobile-head>img{width:130px;height:28px;max-height:28px;object-fit:contain}
 body.bp-quiz-windows .mobile-head .bp-brand-lockup{position:absolute;left:50%;transform:translateX(-50%);width:140px}
 body.bp-quiz-windows .project-toggle{font-size:10px;border:0;min-height:44px;padding:4px;max-width:85px;background:none}
 body.bp-quiz-windows .mobile-progress{left:16px;right:16px;height:4px;bottom:0;border-radius:9px;overflow:hidden}
 body.bp-quiz-windows .mobile-progress i{height:4px}
 body.bp-quiz-windows .shell{height:calc(100svh - 48px - env(safe-area-inset-top));padding:10px 16px 0}
 body.bp-quiz-epoxy .shell{padding:10px 16px 0}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer #back{display:none}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-card{border:0;border-radius:0;margin-inline:-16px;background:#fff;box-shadow:none}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.question-panel,.question-card>.question,.wd-dimension-question .question){padding:0 18px 10px;scrollbar-gutter:auto}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.question-head h1,.q-title){font-size:clamp(18px,4.6vw,21px);line-height:1.2}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.question-head p,.q-help){font-size:13px;line-height:1.4;margin-top:5px}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer{min-height:67px;padding:9px 18px max(12px,env(safe-area-inset-bottom));border-top:1px solid #ededed;gap:8px}
 body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer :is(.continue,.continue-button){min-height:46px}
 body.bp-quiz-epoxy .options:not(.area-options):not(.priorities){grid-auto-rows:minmax(90px,1fr)}
 body.bp-quiz-epoxy .options:has(.material-card){grid-auto-rows:112px}
 body.bp-quiz-epoxy .material-card .material-text{height:52px;min-height:52px}
 body.bp-quiz-windows .options.products,body.bp-quiz-windows .options.materials{grid-auto-rows:96px}
 body.bp-quiz-windows .option .mini-product{object-fit:contain}
 body.bp-quiz-epoxy .mobile-back:disabled{visibility:hidden}
 body.bp-quiz-windows .mobile-head .back-button:disabled{visibility:hidden}
}
@media(max-width:1100px) and (min-height:501px){
 body.bp-quiz-epoxy .preview-card,body.bp-quiz-epoxy[data-step="phone"] .preview-card{height:var(--bp-preview-height);min-height:0;flex:0 0 auto}
 body.bp-quiz-epoxy .center{gap:12px}
 body.bp-quiz-windows .workspace,body.bp-quiz-windows .workspace:has(.wd-dimension-question){grid-template-rows:var(--bp-preview-height) minmax(0,1fr);gap:12px}
}
/* Leave the existing side-by-side arrangement on short landscape phones. */
@media(max-height:500px){body:is(.quiz-spray-foam,.quiz-paving) .app{grid-template-rows:44px 8px minmax(360px,1fr) auto}}
@media(prefers-reduced-motion:reduce){body .bp-completion *{animation:none!important;transition:none!important}}