/* BP client theme tokens: default colours retained; scene artwork untouched. */
/* BlueProprty template V1, adapted to the approved V8 renderer and data model.
   The preview tracks viewport size only, never the current question. */
:root{--orange:var(--bp-blue);--orange-deep:var(--bp-blue-hover);--orange-soft:var(--bp-blue-soft);--ink:var(--bp-ink);--muted:var(--bp-muted);--line:var(--bp-border);--bg:var(--bp-bg);--font:var(--bp-font)}
html,body{height:100%;background:var(--bg);overflow:hidden}
button,input{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid var(--bp-blue);outline-offset:3px}
.shell{height:100svh;min-height:0;max-width:2100px;padding:24px;gap:22px;grid-template-columns:clamp(150px,12vw,220px) minmax(0,1fr) clamp(210px,17vw,280px)}
.card{border-color:var(--line);border-radius:18px;box-shadow:none}
.project-rail{padding:22px 16px}
.workspace,.workspace:has(.wd-dimension-question){height:100%;grid-template-rows:50px minmax(100px,1fr) clamp(338px,38svh,400px);gap:14px;overflow:visible}
.quiz-top{display:flex;align-items:center;gap:20px;min-width:0}
.quiz-service{font-size:12px;font-weight:800;color:var(--muted);margin-left:auto}
.back-button{border:1px solid #b8cbf8;background:var(--bp-blue-soft);color:var(--bp-blue-hover);border-radius:11px;min-height:44px;min-width:44px;padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:800}
.back-button span{font-size:20px;line-height:1}
.back-button:disabled{opacity:.5}
@media(hover:hover){.back-button:not(:disabled):hover{background:#dce6fc;border-color:var(--bp-blue)}}
.scene-card{padding:0;border:0;border-radius:16px;overflow:hidden}
.scene{border-radius:16px}
.question-card>.question{padding:14px 20px 10px;scrollbar-gutter:stable;scrollbar-color:#cbd5e1 transparent;scroll-padding-block:12px}
.q-title{font-size:clamp(21px,1.7vw,28px);line-height:1.2}
.q-title:focus{outline:none}
.q-title:focus-visible{outline:2px solid var(--bp-blue);outline-offset:3px}
.q-help{font-size:13px;line-height:1.4;margin-top:6px}
.q-topline{min-height:18px;margin-bottom:6px;gap:8px}
.q-context{font-size:11px;letter-spacing:.03em}
.copy-button{min-height:44px;padding:7px 9px;border-color:#b8cbf8;font-size:11px}
.q-topline:has(.copy-button){min-height:44px;margin-top:-6px;margin-bottom:2px}
.options,.options.products,.options.materials,.options.concerns{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:9px;margin-top:12px;align-items:stretch}
.options[data-count="2"],.options[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.option,.options.products .option,.options.materials .option,.options.concerns .option{min-width:0;min-height:78px;height:100%;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;transform:none;border-radius:12px;box-shadow:none;overflow-wrap:anywhere}
.option:last-child{grid-column:auto}
@media(hover:hover){.option:hover{transform:none;border-color:var(--bp-blue);background:#f5f8ff}}
.option[aria-checked=true]{border-color:var(--bp-blue);background:var(--bp-blue-soft);box-shadow:inset 0 0 0 .5px var(--bp-blue)}
.option strong,.options.concerns .option strong{font-size:13px;line-height:1.25}
.option small,.options.products .option small,.options.materials .option small{display:block;font-size:11px;line-height:1.3;margin:0}
.option .opt-icon,.options.concerns .opt-icon{width:28px;height:28px;flex:none;margin:0;color:var(--bp-blue)}
.options.products,.options.materials{grid-auto-rows:76px}
.options.products .option,.options.materials .option{min-height:0;gap:3px;padding:5px 7px}
.option .mini-product,.options.materials .mini-product{width:100%;height:43px;min-height:0;object-fit:contain;margin:0}
.options.products .option:has(small) .mini-product{height:26px}
.options.products .option small{font-size:10px}
.options.concerns{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.options.concerns .option{flex-direction:row;justify-content:flex-start;min-height:58px;text-align:left;gap:8px}
html body.bp-quiz-windows .options.concerns>.option{padding-right:40px}  /* room for the 20px check at right:10px so labels never run under it; outranks layout-v8's .question .options.concerns .option */
html body.bp-quiz-windows .options.concerns>.option>strong{min-width:0}
.question-footer{height:auto;min-height:65px;padding:9px 16px;border-color:var(--line);gap:12px}
.continue-button{background:var(--bp-ink);border-color:var(--bp-ink);min-height:46px;min-width:160px;justify-content:space-between;padding:10px 18px;font-size:14px}
@media(hover:hover){.continue-button:not(:disabled):hover{background:var(--bp-blue-hover);border-color:var(--bp-blue-hover)}}
.continue-button:disabled{opacity:1;background:#e2e8f0;border-color:#e2e8f0;color:#64748b}
.wd-overview-control{flex:0 0 44px;width:44px;height:44px;padding:11px;background:#f8faff}
.wd-overview-control[aria-pressed=true]{border-color:#b8cbf8}@media(hover:hover){.wd-overview-control:hover{border-color:#b8cbf8}}
#step-note{margin-left:0}
.wd-dimension-question .question{padding-top:14px;padding-bottom:10px}
.wd-dimension-question .wd-size-presets{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;gap:8px}
.wd-dimension-question .wd-size-presets .option{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;gap:3px 6px;min-height:58px;padding:6px;text-align:center}
.wd-dimension-question .wd-size-presets .opt-icon{width:20px;height:22px;margin:0}
.wd-dimension-question .wd-size-presets strong{font-size:13px}
.wd-dimension-question .wd-size-presets small{width:100%;font-size:10px;line-height:1.25}
.wd-exact,.wd-exact:focus-within{margin:10px 0 0;padding:7px 12px 8px;border-color:#b8cbf8;background:#f8faff}
.wd-exact legend{font-size:12px;line-height:1.4}
.wd-exact legend span{border-color:var(--line);color:var(--muted)}
.wd-exact-fields{max-width:none;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 44px;gap:8px}
.wd-exact-fields label{font-size:12px}
.wd-exact-fields input{min-height:44px;height:44px;font-size:18px;border-color:#cbd5e1;padding:8px}
.wd-exact-fields input:focus{border-color:var(--bp-blue);box-shadow:0 0 0 3px var(--bp-blue-soft)}
.wd-exact-fields input[aria-invalid=true]{border-color:#b43c2a}
.wd-exact-fields input[aria-invalid=true]:focus{box-shadow:0 0 0 3px #b43c2a18}
.wd-clear-exact{min-width:44px;min-height:44px;padding:7px 3px;font-size:11px}
.wd-exact #dimension-help{font-size:11px;margin-top:6px;line-height:1.4}
.field-label{margin-top:14px}
.number-stepper{margin-top:10px}
.number-stepper button{background:var(--bp-blue-soft);color:var(--bp-blue-hover)}
.close-project{min-width:44px;min-height:44px}

/* Contact branding only: retain the approved map, phone and confirmation flow. */
.wd-contact-preview,.wd-contact-results,.question:has(.wd-contact-input){--orange:var(--bp-blue);--orange-dark:var(--bp-blue-hover);--orange-soft:var(--bp-blue-soft);--ink:var(--bp-ink);--muted:var(--bp-muted);--line:var(--bp-border)}
.sf-contact-kicker i{background:var(--bp-blue)}
.sf-pin-halo{fill:rgba(var(--bp-brand-rgb,37,99,235),0.17254901960784313);stroke:rgba(var(--bp-brand-rgb,37,99,235),0.3137254901960784)}
.sf-message-preview{background:radial-gradient(ellipse at 85% 8%,#e9effd,transparent 65%),#f7f9fc}
.sf-message-icon{background:transparent;object-fit:contain;border-radius:0}
.sf-sent-number{border-color:#b8cbf8;background:var(--bp-blue-soft);color:var(--bp-blue-hover)}
.wd-contact-input input:focus{box-shadow:0 0 0 4px var(--bp-blue-soft)}
.wd-contact-results{background:linear-gradient(135deg,#f7f9fc,var(--bp-blue-soft))}
.wd-contact-results .r-check{background:var(--bp-blue);box-shadow:0 14px 36px rgba(var(--bp-brand-rgb,37,99,235),0.25098039215686274)}
.wd-contact-results .r-title em{color:var(--bp-blue-hover)}

@media(min-width:1101px){
 .wd-exact{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.65fr);gap:0 16px;align-items:center}
 .wd-exact #dimension-help{margin:0}
 .wd-exact #dimension-error{grid-column:1/-1}
}

@media(max-width:1100px){
 .shell{display:block;height:calc(100svh - 62px - env(safe-area-inset-top));padding:8px 16px 0;max-width:none}
 .quiz-top{display:none}
 .workspace,.workspace:has(.wd-dimension-question){height:100%;grid-template-rows:min(calc((100vw - 32px)*2/3),max(150px,calc(100svh - 460px))) minmax(0,1fr);gap:12px}
 .scene-card,.scene{border-radius:16px}
 .question-card{margin-inline:-16px;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0}
 .question-card>.question,.wd-dimension-question .question{padding:16px 16px 10px;scrollbar-gutter:auto}
 .q-title{font-size:24px}
 .q-help{font-size:13px}
 .options,.options.products,.options.materials,.options.concerns{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
 .option,.options.concerns .option{min-height:74px}
 .options.products,.options.materials{grid-auto-rows:96px}
 .options.products .option,.options.materials .option{min-height:0}
 .option .mini-product,.options.materials .mini-product{height:48px}
 .options.products .option:has(small) .mini-product{height:44px}
 .options.concerns .option{min-height:58px}
 .question-footer{min-height:70px;padding:10px 16px max(12px,env(safe-area-inset-bottom));gap:10px}
 .continue-button,.question-footer .continue-button{flex:1;min-width:0;min-height:48px;font-size:14px;justify-content:center;padding:10px 14px;gap:12px}
 .continue-button span{margin-left:auto}
 .wd-overview-control{flex-basis:44px;width:44px;height:44px}
 #step-note,.question-footer #step-note{font-size:11px;flex:none}
 .wd-dimension-question .wd-size-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .wd-dimension-question .wd-size-presets .option{min-height:62px}
 .wd-exact,.wd-dimension-question .wd-exact{margin-top:10px}
 .wd-exact-fields{gap:7px}
 .project-rail{position:fixed;z-index:40;right:8px;top:calc(62px + env(safe-area-inset-top));bottom:8px;width:min(330px,calc(100vw - 24px));transform:translateX(calc(100% + 20px));transition:transform var(--qr-t2) var(--qr-e);box-shadow:-8px 0 50px #1e293b22}
 .project-rail.is-open{transform:translateX(0)}
 .close-project{display:block;border:0;background:none;font-size:26px}
 .panel-backdrop{position:fixed;inset:0;background:#15253155;z-index:30;backdrop-filter:blur(3px)}
}
@media(max-width:1100px) and (max-height:700px){
 .question-card>.question,.wd-dimension-question .question{padding-top:12px}
 .q-title{font-size:21px}
 .options.products,.options.materials{grid-auto-rows:84px}
 .option .mini-product,.options.materials .mini-product{height:39px}
 .options.products .option:has(small) .mini-product{height:32px}
 .option{min-height:68px}
 .wd-dimension-question .wd-size-presets .option{min-height:54px;padding:5px;gap:2px 4px}
 .wd-exact,.wd-dimension-question .wd-exact{padding:6px 10px;margin-top:8px}
 .question-footer{min-height:66px;padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
 .continue-button,.question-footer .continue-button{min-height:46px}
}
@media(max-width:370px){
 .q-title{font-size:21px}
 .wd-dimension-question .wd-size-presets small{font-size:10px}
 .wd-dimension-question .wd-size-presets .opt-icon{width:16px;height:19px}
 .wd-exact legend{font-size:11px}
 .wd-exact-fields{gap:5px;grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 44px}
}
@media(max-width:370px) and (max-height:700px){
 .question-card>.question,.wd-dimension-question .question{padding-top:8px}
 .q-title{font-size:20px}
 .q-help{font-size:12px}
 .q-topline{margin-bottom:4px}
 .wd-dimension-question .wd-size-presets{margin-top:8px}
}
@media(min-width:700px) and (max-width:1100px) and (orientation:landscape){
 .options:not([data-count="2"]):not([data-count="4"]){grid-template-columns:repeat(3,minmax(0,1fr))}
 .options.products,.options.materials{grid-auto-rows:86px}
}
/* A shared photo column makes the original products readable on wide cards. */
@media(min-width:700px) and (min-height:501px){
 .options.products .option,.options.materials .option{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:8px;row-gap:3px;text-align:left;padding:5px 10px}
 .options.products .option .mini-product,.options.materials .option .mini-product,.options.products .option:has(small) .mini-product{grid-column:1;grid-row:1/3;width:88px;height:62px;object-fit:contain;margin:0}
 .options.products .opt-icon,.options.materials .opt-icon{grid-column:1;grid-row:1/3;justify-self:center}
 .options.products .option strong,.options.materials .option strong{grid-column:2;align-self:end}
 .options.products .option small,.options.materials .option small{grid-column:2;align-self:start;font-size:11px}
}
/* Low landscape screens use normal page scrolling without covering answers. */
@media(max-width:1100px) and (max-height:500px){
 html,body{overflow:auto;height:auto;min-height:100svh}
 .shell{height:auto;padding:8px 12px 12px}
 .workspace,.workspace:has(.wd-dimension-question){height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(360px,1fr);gap:12px}
 .scene-card{height:360px;position:sticky;top:8px}
 .question-card{margin:0;border:1px solid var(--line);border-radius:16px;min-height:360px}
 .question-card>.question{overflow:visible;flex:auto}
}
@media(prefers-reduced-motion:no-preference){.question-card>.question{animation:wd-question-enter var(--qr-t1) var(--qr-e) both}@keyframes wd-question-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ==========================================================================
   Interaction layer, the shared engine's (quiz-refine.css body.bp-engine, c191132): motion tokens,
   hover only where hover exists, one press (scale .98 at --qr-t1), one 2px focus ring, one Continue,
   transform-only progress, one step transition (app-v6.js). quiz-refine.css loads after this file,
   so these selectors carry html body.bp-quiz-windows plus one more class, element or id to win.
   ========================================================================== */
/* contrast: rail labels, "Now", the % sign 2.9 to 4.7:1; copy and phone help text 4.1 to 4.6:1 on the sky */
html body.bp-quiz-windows{--qr-copy:#4f6b7a;--qr-mute:#5a7280;--muted:var(--qr-copy);--ink-soft:var(--qr-copy);--ink-mute:var(--qr-mute);--bp-muted:var(--qr-copy)}
html body.bp-quiz-windows #project-list .wd-checklist-row--pending .wd-checklist-value{color:#566e7c}

/* type: nothing below 12px except the uppercase eyebrows */
html body.bp-quiz-windows .shell .option small,html body.bp-quiz-windows .shell .wd-dimension-question .wd-size-presets small{font-size:12px}
html body.bp-quiz-windows .question-footer #step-note{font-size:12px;color:var(--qr-copy)}
html body.bp-quiz-windows .shell :is(.copy-button,.wd-clear-exact,.wd-exact legend,.wd-exact legend span,.wd-exact-fields label,.wd-exact #dimension-help,.wd-checklist-label){font-size:12px}
html body.bp-quiz-windows .shell :is(.wd-contact-input .input-error,.sf-contact-benefits,.sf-contact-note,.sf-location-caption span){font-size:12px}
html body.bp-quiz-windows .shell .wd-contact-preview :is(.sf-message-details dt,.sf-message-details dd,.sf-message-footer,.sf-message-brand small){font-size:12px}
html body.bp-quiz-windows .shell .sf-map-credit{bottom:0;right:0;padding:26px 10px 6px;font-size:12px;line-height:1}

/* every control: no tap flash, no double-tap zoom delay */
html body.bp-quiz-windows :is(.option,.continue-button,.back-button,.number-stepper button,.copy-button,.wd-clear-exact,.wd-overview-control,.wd-project-chip,.close-project,.wd-checklist-row,.reset,.bp-home-link){touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* answer tiles */
/* The question scrolls in its own box. Left uncomposited, the first tile hover or press (a transform) made Chrome
   composite that scroller mid-interaction: a 250-450 ms frame on the first step change. Composited up front it is free. */
html body.bp-quiz-windows .question-card>#question{will-change:scroll-position}
html body.bp-quiz-windows .shell .options>.option{cursor:pointer;transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io),box-shadow var(--qr-t3) var(--qr-e),transform var(--qr-t3) var(--qr-e)}
html body.bp-quiz-windows .shell .options>.option[aria-checked=true]{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body.bp-quiz-windows .shell .options>.option[aria-checked=true] .opt-icon{color:var(--qr-blue)}
@media(hover:none){
  html body.bp-quiz-windows .shell .options>.option:hover:not(:disabled){transform:none}
  html body.bp-quiz-windows .shell .options>.option:not([aria-checked=true]):hover:not(:disabled){background:var(--qr-tile-bg);border-color:#fff;box-shadow:var(--qr-tile-shadow)}
}
html body.bp-quiz-windows .shell .options>.option:active:not(:disabled){transform:scale(.98);transition-duration:var(--qr-t1)}

/* Back, steppers and small controls: the same press, hover only on hover devices */
html body.bp-quiz-windows .shell :is(.back-button,.number-stepper button,.copy-button,.wd-clear-exact,.wd-overview-control),html body.bp-quiz-windows #project-panel .close-project{transition:transform var(--qr-t3) var(--qr-e),background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io),color var(--qr-t2) var(--qr-e-io)}
@media(hover:none){
  html body.bp-quiz-windows .question-footer .back-button:hover:not(:disabled){transform:none;background:#ffffffb8}
  html body.bp-quiz-windows .shell .wd-overview-control:not([aria-pressed=true]):hover{background:#ffffffb8;border-color:#fff;color:var(--qr-ink-2)}
}
html body.bp-quiz-windows .shell :is(.back-button,.number-stepper button,.copy-button,.wd-clear-exact,.wd-overview-control):active:not(:disabled),html body.bp-quiz-windows #project-panel .close-project:active{transform:scale(.98);transition-duration:var(--qr-t1)}
/* the desktop footer Back is styled by id in quiz-refine.css, so these name it too */
html body.bp-quiz-windows .question-footer #back.back-button{transition:transform var(--qr-t3) var(--qr-e),background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io),color var(--qr-t2) var(--qr-e-io)}
@media(hover:none){html body.bp-quiz-windows .question-footer #back.back-button:hover:not(:disabled){transform:none;background:#ffffffb8}}
html body.bp-quiz-windows .question-footer #back.back-button:active:not(:disabled){transform:scale(.98);transition-duration:var(--qr-t1)}
html body.bp-quiz-windows .wd-contact-results .reset{transition:transform var(--qr-t3) var(--qr-e),background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io),color var(--qr-t2) var(--qr-e-io)}
html body.bp-quiz-windows .wd-contact-results .reset:active{transform:scale(.98);transition-duration:var(--qr-t1)}
html body.bp-quiz-windows .shell .wd-checklist-row{transition:background-color var(--qr-t2) var(--qr-e-io)}
html body.bp-quiz-windows .shell :is(.wd-exact,.wd-exact-fields input,.number-stepper){transition:border-color var(--qr-t2) var(--qr-e-io),background-color var(--qr-t2) var(--qr-e-io),box-shadow var(--qr-t2) var(--qr-e-io)}

/* one keyboard focus ring (the home page's): 2px blue, offset from the shape; checklist rows sit in a scroller, so theirs is inset */
html body.bp-quiz-windows :is(.option,.continue-button,.back-button,.number-stepper button,.copy-button,.wd-clear-exact,.wd-overview-control,.wd-project-chip,.close-project,.reset,.bp-home-link):focus-visible{outline:2px solid var(--qr-blue);outline-offset:3px}
html body.bp-quiz-windows .shell .wd-checklist-row:focus-visible{outline:2px solid var(--qr-blue);outline-offset:-2px}
html body.bp-quiz-windows :is(.option,.continue-button,.back-button):focus:not(:focus-visible){outline:none}

/* the Continue button: the shared component (label + arrow together, blue pill, 40% when disabled) */
html body.bp-quiz-windows .question-footer .continue-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:160px;min-height:48px;padding:0 22px 0 26px;border:0;border-radius:999px;background:var(--qr-blue);color:#fff;font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1;box-shadow:var(--qr-btn-shadow);cursor:pointer;transition:transform var(--qr-t3) var(--qr-e),box-shadow var(--qr-t3) var(--qr-e),background-color var(--qr-t2) var(--qr-e-io),opacity var(--qr-t2) var(--qr-e-io)}
html body.bp-quiz-windows .question-footer .continue-button .lbl{margin:0}
html body.bp-quiz-windows .question-footer .continue-button svg{width:18px;height:18px;flex:none;transition:transform var(--qr-t3) var(--qr-e)}
@media(hover:hover){
  html body.bp-quiz-windows .question-footer .continue-button:hover:not(:disabled){background:var(--qr-blue-hover);transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff33,0 2px 4px #1d4ed84d,0 18px 36px -12px #2563eb99}
  html body.bp-quiz-windows .question-footer .continue-button:hover:not(:disabled) svg{transform:translateX(4px)}
}
@media(hover:none){html body.bp-quiz-windows .question-footer .continue-button:hover:not(:disabled){background:var(--qr-blue);transform:none}}
html body.bp-quiz-windows .question-footer .continue-button:active:not(:disabled){transform:scale(.98);transition-duration:var(--qr-t1)}
html body.bp-quiz-windows .question-footer .continue-button:disabled{background:var(--qr-blue);color:#fff;opacity:.4;box-shadow:none;transform:none;cursor:not-allowed}

/* progress: transforms only (app-v6.js scales the fill) */

/* the step change is app-v6.js's single cross-fade/slide: no second animation on the question */
html body.bp-quiz-windows .question-card{position:relative}
html body.bp-quiz-windows .question-card>.question{animation:none}
html body.bp-quiz-windows .question-card>.question:is(#question,.wd-question-leaving)>*{animation:none}
html body.bp-quiz-windows .question-card>.wd-question-leaving{position:absolute;z-index:1;margin:0;overflow:hidden;pointer-events:none}

@media(max-width:1100px){
  /* Continue spans the bar; the step count is in the header on phones, so the footer one stays on desktop only */
  html body.bp-quiz-windows .question-footer .continue-button{flex:1;width:auto;min-width:0;min-height:52px}
  html body.bp-quiz-windows .question-footer #step-note{display:none}
  /* safe areas: landscape notch and home indicator */
  html body.bp-quiz-windows .question-card>.question-footer{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  html body.bp-quiz-windows .toast{bottom:calc(25px + env(safe-area-inset-bottom))}
  /* the closed drawer leaves the tab order and the accessibility tree; visibility waits for the slide-out */
  html body.bp-quiz-windows .shell>.project-rail{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));visibility:hidden;transition:transform var(--qr-t3) var(--qr-e),visibility 0s var(--qr-e-io) var(--qr-t3)}
  html body.bp-quiz-windows .shell>.project-rail.is-open{visibility:visible;transition:transform var(--qr-t3) var(--qr-e),visibility 0s var(--qr-e-io)}
}

/* contact preview and confirmation entrances on the tokens */
@media(prefers-reduced-motion:no-preference){
  html body.bp-quiz-windows .shell .sf-message-preview:not([hidden]) .sf-message-card{animation:sf-message-enter var(--qr-t4) var(--qr-e) both}
  html body.bp-quiz-windows .wd-contact-results:not([hidden]) .results-card{animation-duration:var(--qr-t4);animation-timing-function:var(--qr-e)}
}

@media(prefers-reduced-motion:reduce){
  html body.bp-quiz-windows .shell :is(.option,.continue-button,.back-button,.number-stepper button,.copy-button,.wd-clear-exact,.wd-overview-control):active,html body.bp-quiz-windows .question-footer #back.back-button:active,html body.bp-quiz-windows .wd-contact-results .reset:active{transform:none}
}

/* ==========================================================================
   Header: the shared engine's, the same markup and classes as roofing, HVAC, insulation, paving and spray foam.
   Phones: round Back, wordmark centred, "n / N", one segment per step, a PREVIEW pill on the hero
   (shared/style.mobile.css + the quiz-refine.css overrides). Desktop: the left rail with the logo, the
   percentage, "n of N" and the gauge (shared/style.desktop.css + quiz-refine.css). The values are copied
   here, not loaded: those sheets reset * and restyle body, .card and the footer this quiz lays out itself.
   The project drawer's toggle is a chip at the right end of the hero (the drawer only exists up to 1100px;
   above it the project is the right column).
   ========================================================================== */
html body.bp-quiz-windows>:is(.m-top,.m-segs),html body.bp-quiz-windows .scene-card>:is(.livepill,.wd-project-chip){display:none}
@media(max-width:1100px){
  html body.bp-quiz-windows>.m-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;box-sizing:border-box;margin:0;padding:max(0px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));background:transparent}
  html body.bp-quiz-windows>.m-top .m-hback{position:relative;justify-self:start;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;margin:0 0 0 -4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--qr-ink-2);box-shadow:none;font-size:11px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform var(--qr-t3) var(--qr-e),background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io),color var(--qr-t2) var(--qr-e-io)}
  html body.bp-quiz-windows>.m-top .m-hback:active:not(:disabled){transform:scale(.92);transition-duration:var(--qr-t1)}
  /* 44px hit area, 36px drawn circle (as the shared quizzes): 10px clear above the segments, left edge on the 16px gutter */
  html body.bp-quiz-windows>.m-top .m-hback::before{content:'';position:absolute;inset:4px;box-sizing:border-box;border-radius:50%;border:1px solid #fff;background:#ffffffc7;transition:background-color var(--qr-t2) var(--qr-e-io)}
  @media(hover:hover){html body.bp-quiz-windows>.m-top .m-hback:hover::before{background:#fff}}
  html body.bp-quiz-windows>.m-top .m-hback svg{position:relative;display:block;width:16px;height:16px;stroke-width:2.25;color:var(--qr-ink-2)}
  html body.bp-quiz-windows>.m-top .m-hback.hide{visibility:hidden}
  html body.bp-quiz-windows>.m-top .m-hback:focus-visible{outline:2px solid var(--qr-blue);outline-offset:0}
  html body.bp-quiz-windows>.m-top .m-hback:focus:not(:focus-visible){outline:none}
  html body.bp-quiz-windows>.m-top .m-logo{justify-self:center;display:block;width:auto;height:28px}
  html body.bp-quiz-windows>.m-top .step{justify-self:end;font-size:13px;font-weight:500;color:var(--qr-copy);font-variant-numeric:tabular-nums}
  html body.bp-quiz-windows>.m-top .step b{font-weight:500;color:var(--qr-blue)}
  /* one segment per step, filled by transform; the gap narrows (never below 2px a segment) as openings add steps */
  html body.bp-quiz-windows>.m-segs{display:flex;gap:clamp(0px,calc((100% - var(--segs,7) * 2px) / (var(--segs,7) - 1)),4px);box-sizing:border-box;margin:0;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  html body.bp-quiz-windows>.m-segs i{display:block;flex:1;min-width:0;height:4px;border-radius:99px;background:#263e4c17;position:relative;overflow:hidden}
  html body.bp-quiz-windows>.m-segs i::after{content:'';position:absolute;inset:0;border-radius:99px;background:var(--qr-blue);transform:scaleX(0);transform-origin:left;transition:transform var(--qr-t4) var(--qr-e)}
  html body.bp-quiz-windows>.m-segs i.on::after{transform:scaleX(1)}
  /* the hero starts 12px under the segments, as on the shared quizzes */
  html body.bp-quiz-windows .shell>.project-rail{top:calc(62px + env(safe-area-inset-top))}
  html body.bp-quiz-windows .shell>.left{display:none}
  html body.bp-quiz-windows .workspace>.scene-card{position:relative}
  /* the PREVIEW pill (the card's 1px border moves its box 1px in, hence 10px for the shared 11px) */
  html body.bp-quiz-windows .scene-card>.livepill{position:absolute;left:10px;top:10px;z-index:9;display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;margin:0;padding:6px 12px;border:1px solid #fff;border-radius:99px;background:#ffffffd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 2px #263e4c0d,0 10px 24px -14px #263e4c59;font-size:12px;font-weight:500;line-height:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--qr-kicker)}
  html body.bp-quiz-windows .scene-card>.livepill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--qr-blue);box-shadow:none}
  /* the project chip: the pill's look, a 44px-high target (the pill sits 7px inside it, level with PREVIEW) */
  html body.bp-quiz-windows .scene-card>.wd-project-chip{position:absolute;top:3px;left:10px;z-index:9;display:flex;align-items:center;box-sizing:border-box;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:99px;background:none;box-shadow:none;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  html body.bp-quiz-windows .wd-project-chip-pill{display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;padding:6px 12px;border:1px solid #fff;border-radius:99px;background:#ffffffd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 2px #263e4c0d,0 10px 24px -14px #263e4c59;font-size:12px;font-weight:500;line-height:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--qr-kicker);transition:transform var(--qr-t3) var(--qr-e),background-color var(--qr-t2) var(--qr-e-io)}
  html body.bp-quiz-windows .wd-project-chip-pill #mobile-count{letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--qr-blue)}
  @media(hover:hover){html body.bp-quiz-windows .wd-project-chip:hover .wd-project-chip-pill{background:#fff}}
  html body.bp-quiz-windows .wd-project-chip:active .wd-project-chip-pill{transform:scale(.98);transition-duration:var(--qr-t1)}
  html body.bp-quiz-windows .scene-card>.wd-project-chip:focus-visible{outline:none}
  html body.bp-quiz-windows .wd-project-chip:focus-visible .wd-project-chip-pill{outline:2px solid var(--qr-blue);outline-offset:3px}
  html body.wd-contact-complete>:is(.m-top,.m-segs){visibility:hidden}
}
@media(max-width:1100px) and (min-height:501px){
  html body.bp-quiz-windows .shell{height:calc(100svh - 54px - env(safe-area-inset-top));padding-top:12px}
}
@media(prefers-reduced-motion:reduce){
  html body.bp-quiz-windows>.m-top .m-hback:active,html body.bp-quiz-windows .wd-project-chip:active .wd-project-chip-pill{transform:none}
}
@media(min-width:1101px){
  html body.bp-quiz-windows .shell{padding:24px 28px;gap:18px;grid-template-columns:236px minmax(0,1fr) 300px}
  /* the shared rail's colours: copy and labels at #5a7280 */
  html body.bp-quiz-windows .shell>.left{--qr-copy:#5a7280;--qr-mute:#5a7280;display:flex;flex-direction:column;box-sizing:border-box;min-height:0;padding:24px 22px}
  html body.bp-quiz-windows .shell>.left *{box-sizing:border-box}
  html body.bp-quiz-windows .shell>.left .rail-logo{margin:0 0 20px}
  html body.bp-quiz-windows .shell>.left .rail-logo img{display:block;width:100%;max-width:168px;height:auto}
  html body.bp-quiz-windows .shell>.left .rail-divider{height:1px;margin:0 0 22px;border:0;background:var(--qr-line)}
  html body.bp-quiz-windows .shell>.left .rail-h{margin:0;font-size:11px;font-weight:500;line-height:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--qr-kicker)}
  html body.bp-quiz-windows .shell>.left .lp-pct{margin:16px 0 0;font-size:68px;font-weight:500;letter-spacing:-.06em;line-height:.9;color:var(--qr-blue);font-variant-numeric:tabular-nums}
  html body.bp-quiz-windows .shell>.left .lp-pct .pm{margin-left:3px;font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--qr-mute)}
  html body.bp-quiz-windows .shell>.left .lp-sub{margin:10px 0 0;font-size:13px;font-weight:400;line-height:normal;letter-spacing:0;text-transform:none;color:var(--qr-copy)}
  html body.bp-quiz-windows .shell>.left .gauge{flex:1;display:flex;gap:20px;margin-top:22px;min-height:0}
  html body.bp-quiz-windows .shell>.left .bar{position:relative;flex-shrink:0;width:10px;border-radius:99px;background:var(--qr-line)}
  html body.bp-quiz-windows .shell>.left .bar i{position:absolute;left:0;right:0;top:0;height:100%;border-radius:99px;background:var(--qr-blue);transform:scaleY(0);transform-origin:50% 0;transition:transform var(--qr-t4) var(--qr-e)}
  html body.bp-quiz-windows .shell>.left .bar .knob{position:absolute;left:50%;top:0;width:22px;height:22px;border:3px solid var(--qr-blue);border-radius:50%;background:#fff;box-shadow:0 6px 14px -4px #2563eb80;transform:translate(-50%,-50%);transition:transform var(--qr-t4) var(--qr-e)}
  html body.bp-quiz-windows .shell>.left .ginfo{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
  html body.bp-quiz-windows .shell>.left :is(.gnow,.gnext){font-size:11px;font-weight:500;line-height:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--qr-mute)}
  html body.bp-quiz-windows .shell>.left .gnow-t{margin-top:4px;font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--qr-ink)}
  html body.bp-quiz-windows .shell>.left .gdiv{height:1px;margin:12px 0;background:var(--qr-line)}
  html body.bp-quiz-windows .shell>.left .gnext-t{margin-top:4px;font-size:15px;font-weight:400;line-height:1.3;color:var(--qr-copy)}
  html body.bp-quiz-windows .shell>.left .gremain{margin-top:auto;font-size:13px;font-weight:400;line-height:normal;color:var(--qr-copy)}
  html body.bp-quiz-windows .shell>.left .gremain b{font-weight:500;color:var(--qr-ink)}
  /* the right column's header: the shared "Your answers" rail heading */
  html body.bp-quiz-windows .shell>.project-rail{padding:24px 20px}
  html body.bp-quiz-windows .shell>.project-rail .project-head{min-height:0;margin:0 0 16px}
  html body.bp-quiz-windows .shell>.project-rail .project-head .eyebrow{font-size:11px;font-weight:500;line-height:normal;letter-spacing:.16em;color:var(--qr-kicker)}
}
/* iPhone status bar (see /v3/css/chrome.css): a fixed box at the top edge makes Safari's see-through bar opaque, and nothing
   can be painted above this unscrolled page, so with the project drawer open the bar stayed bright sky over the dimmed page.
   The backdrop is absolute (the page never scrolls, so it covers the same screen), and while it is shown the page's base
   colour, which Safari shows under the bar here (the gradients on top of it cover the page itself), takes the dimmed
   colour (#15253155 over #d5ebf5, measured). */
@media(max-width:1100px){
  html body.bp-quiz-windows .panel-backdrop{position:absolute}
  html:has(body.bp-quiz-windows>.panel-backdrop:not([hidden])),html body.bp-quiz-windows:has(>.panel-backdrop:not([hidden])){background-color:#96a9b4}
}