/* BlueProprty quiz redesign (Claude Design project "BlueProperty", quiz-refine.css, 2026-10-10).
   One visual layer for all seven quizzes, desktop and mobile. It loads LAST in every quiz page,
   after the quiz's own stylesheets and the brand kit, and changes look only: type, colour,
   surfaces, selected states, motion. Layout, steps, copy, ids and classes stay as they are.
   Vocabulary = the site's (v3/css/home-refine.css): Geist 500, ink #263e4c, blue #2563eb,
   the sky gradient, frosted white cards, pill buttons. */

/* metric-matched stand-in while Geist loads (display=swap), the home page's: the swap no longer moves text */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");font-weight:100 450;size-adjust:103%;ascent-override:97.6%;descent-override:28.2%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");font-weight:451 900;size-adjust:107%;ascent-override:93.9%;descent-override:27.1%;line-gap-override:0%}

:root{
  --qr-font:"Geist","Geist Fallback","Segoe UI",Arial,sans-serif;
  --qr-blue:var(--bp-brand,#2563eb);
  --qr-blue-hover:#1d55d0;
  --qr-blue-tint:#2563eb14;
  --qr-ink:#263e4c;
  --qr-ink-2:#3e5b6a;
  --qr-copy:#5a7280;
  --qr-mute:#7f97a4;
  --qr-kicker:#4f6b7a;
  --qr-ring:#c4d5df;
  --qr-glyph:#8fb0c2;
  --qr-rule:#e3ecf2;
  --qr-line:#263e4c14;
  --qr-e:cubic-bezier(.16,1,.3,1);
  /* motion tokens = the home page's (v3/css/home-refine.css): --qr-e ease-out for movement, --qr-e-io for colour/state;
     --qr-t1 press · --qr-t2 state · --qr-t3 movement · --qr-t4 entrances · --qr-t5 hero/reveal. The shared engine reads these too. */
  --qr-e-io:cubic-bezier(.65,0,.35,1);
  --qr-e-spring:cubic-bezier(.34,1.5,.5,1); /* the one spring (the home page's --e-spring) */
  --qr-t1:.15s;--qr-t2:.25s;--qr-t3:.4s;--qr-t4:.6s;--qr-t5:.9s; /* the only durations; ambient 7-9 s loops sit outside the scale */
  --qr-sky:linear-gradient(180deg,#d5ebf5 0,#d5ebf500 110px),linear-gradient(0deg,#d5ebf5 0,#d5ebf500 120px),radial-gradient(1100px 700px at 50% 0%,#fff8e0a6,#fff8e000 70%),linear-gradient(180deg,#d5ebf5 0%,#e4f1f6 38%,#eef5f6 100%); /* David 2026-10-10: the lighter blue (#d5ebf5) is the quiz's sky, top and bottom, so iPhone Safari's bars (which take the body colour) match it */
  --qr-preview-bg:linear-gradient(180deg,#c9e4f1 0%,#e6f2f6 70%,#eef6f6 100%);
  --qr-card-bg:#ffffffb3;
  --qr-card-border:#fffffff2;
  --qr-card-shadow:0 1px 2px #263e4c0d,0 30px 60px -36px #263e4c59;
  --qr-blur:blur(18px) saturate(1.5);
  --qr-tile-bg:#ffffffc2;
  --qr-tile-shadow:0 1px 2px #263e4c0d,0 10px 24px -18px #263e4c59;
  --qr-sel-shadow:0 0 0 1px var(--qr-blue),0 14px 28px -18px #2563eb99;
  --qr-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  --qr-btn-shadow:inset 0 1px 0 #ffffff33,0 1px 2px #1d4ed84d,0 12px 28px -10px #2563eb8c;
  /* the quizzes' own tokens, pointed at the site's palette and type */
  --f:var(--qr-font);--font:var(--qr-font);--bp-font:var(--qr-font);
  --ink:var(--qr-ink);--slate:var(--qr-ink);--ink-soft:var(--qr-copy);--ink-mute:var(--qr-mute);
  --muted:var(--qr-copy);--bp-ink:var(--qr-ink);--bp-muted:var(--qr-copy);
  --line:var(--qr-line);--line-2:#dce9ef;--bp-border:#dce9ef;
  --bg:#eef5f6;--bp-bg:#eef5f6;--panel:#fff;
}

/* ---------- page: type + sky ---------- */
/* skip link (the site pages' .skip-link): off screen until it has keyboard focus, then a blue pill top-left; its target
   (<main>, tabindex=-1) takes focus without a ring */
html body .bp-skip{position:fixed;z-index:1000;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--qr-blue);color:#fff;font:500 15px/1 var(--qr-font);letter-spacing:-.005em;text-decoration:none;box-shadow:var(--qr-btn-shadow);opacity:0;transform:translateY(calc(-100% - 24px - env(safe-area-inset-top)));pointer-events:none;transition:transform var(--qr-t3) var(--qr-e),opacity var(--qr-t2) var(--qr-e-io)}
html body .bp-skip:focus{opacity:1;transform:none;pointer-events:auto;outline:2px solid var(--qr-blue);outline-offset:4px}
html body main[tabindex="-1"]:focus{outline:none}
@media(prefers-reduced-motion:reduce){html body .bp-skip{transition:none}}
/* iPhone Safari tints its bars from the page canvas: the sky blue the gradient starts in (David, 2026-10-10). */
html{background:#d5ebf5}
html body{font-family:var(--qr-font);color:var(--qr-ink);background:var(--qr-sky);background-color:#d5ebf5; /* iPhone Safari tints its bars from the body background-colour: the sky blue, like the home page (chrome.css) */-webkit-font-smoothing:antialiased}
html body :is(button,input,select,textarea){font-family:inherit}
html body :is(.sf-contact,.bp-consent,.bp-consent-alternate,.bp-marketing-dialog,.bp-marketing-dialog *,.bp-project-dialog,.bp-preview-close,.bp-completion-line,.bp-estimate-notice,.bp-result-review,.bp-result-summary>div,.iq-mbtn){font-family:var(--qr-font)}

/* ---------- frosted cards ---------- */
html body :is(.shell .card,.results-card){background:var(--qr-card-bg);border:1px solid var(--qr-card-border);border-radius:28px;box-shadow:var(--qr-card-shadow);-webkit-backdrop-filter:var(--qr-blur);backdrop-filter:var(--qr-blur)}
html body .shell :is(.preview-card,.scene-card){background:var(--qr-card-bg)}
html body .shell .preview{border-radius:18px;background:var(--qr-preview-bg)}
html body .shell .q-panel,html body .app .m-qpanel{background:transparent}

/* ---------- kickers + small labels ---------- */
html body :is(.rail-h,.gnow,.gnext,.r-kicker,.eyebrow,.eyebrow.orange,.eyebrow.accent,.sf-contact-kicker){font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--qr-kicker)}
html body :is(.gnow,.gnext,.eyebrow.orange,.eyebrow.accent){letter-spacing:.14em;color:var(--qr-mute)}
html body .sf-contact-kicker i{display:none}

/* ---------- left rail: progress ---------- */
html body .rail-divider,html body .shell .divider{background:var(--qr-line)}
html body .lp-pct{font-size:68px;font-weight:500;letter-spacing:-.06em;line-height:.9;color:var(--qr-blue);font-variant-numeric:tabular-nums}
html body .lp-pct .pm{margin-left:3px;font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--qr-mute)}
html body .lp-sub{margin-top:10px;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--qr-copy)}
html body .bar{width:10px;background:var(--qr-line)}
html body .bar i{background:var(--qr-blue);transition:transform var(--qr-t4) var(--qr-e)}
html body .bar .knob{border:3px solid var(--qr-blue);box-shadow:0 6px 14px -4px #2563eb80;transition:transform var(--qr-t4) var(--qr-e)}
html body .gnow-t{font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--qr-ink)}
html body .gnext-t{font-size:15px;font-weight:400;line-height:1.3;color:var(--qr-copy)}
html body .gdiv{background:var(--qr-line);margin:12px 0}
html body .gremain{font-size:13px;font-weight:400;color:var(--qr-copy)}
html body .gremain b{font-weight:500;color:var(--qr-ink)}

/* ---------- right rail: your answers ---------- */
html body .tl::before{width:1.5px;left:14px;background:#263e4c17}
html body .ti .dot{width:22px;height:22px;border:1.5px solid var(--qr-ring);background:#fff}
html body .ti .dot svg{width:12px;height:12px}
html body .ti.done .dot{background:var(--qr-blue);border-color:var(--qr-blue)}
html body .ti.cur .dot{border:2px solid var(--qr-blue);background:var(--qr-blue);box-shadow:inset 0 0 0 4px #fff}
html body .ti.cur .dot::after{display:none}
html body .ti .l{font-size:12px;font-weight:400;line-height:1.3;color:var(--qr-copy)}
html body .ti .v{margin-top:2px;font-size:14.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--qr-ink)}
html body .ti.cur .l{font-size:14.5px;font-weight:500;color:var(--qr-blue)}
html body .ti.cur .v{font-size:12px;font-weight:400;color:var(--qr-copy)}
html body .ti.pending .l{font-size:14.5px;color:var(--qr-mute)}
html body .ti.pending .v{font-size:12px;font-weight:400;color:#a6b8c2}

/* ---------- question: heading, help, tip ---------- */
html body :is(.q-title,.m-title,.question-head h1){font-weight:500;letter-spacing:-.045em;color:var(--qr-ink);text-wrap:balance}
html body :is(.q-title,.m-title,.question-head h1) :is(em,span){font-style:normal;font-weight:inherit;color:var(--qr-blue)}
html body .shell .q-title{font-size:clamp(22px,.7vw + 14px,30px);line-height:1.12}
html body :is(.q-help,.m-help,.question-head p){font-weight:400;color:var(--qr-copy)}
html body .shell .q-help{font-size:14.5px;line-height:1.5}
html body .tip{padding:10px 14px;background:#ffffffd9;border:1px solid #fff;border-radius:18px;color:var(--qr-ink-2);font-size:.8rem;font-weight:400;line-height:1.4;box-shadow:var(--qr-tile-shadow)}
html body .tip .ic{color:var(--qr-blue)}
html body .warn{border-radius:14px}
html body .warn b{font-weight:600}

/* ---------- answer tiles (desktop engine) ---------- */
html body .opt{background:var(--qr-tile-bg);border:1px solid #fff;border-radius:18px;box-shadow:var(--qr-tile-shadow);color:var(--qr-ink);transition:background-color var(--qr-t2) var(--qr-e-io),transform var(--qr-t3) var(--qr-e),box-shadow var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io)}
@media(hover:hover){html body .opt:hover{background:#fff;border-color:#fff;transform:translateY(-2px);box-shadow:var(--qr-tile-shadow)}}
html body .opt:focus-visible{outline:3px solid #2563eb66;outline-offset:2px}
html body .opt.--sel,html body .opt.dtile.--sel,html body .opt.photo.--sel{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body .opt.dtile .gi{color:var(--qr-glyph);opacity:1}
html body .opt.dtile b{font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--qr-ink)}
html body .opt.dtile span{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--qr-copy)}
html body .opt.dtile.--sel .gi{color:var(--qr-blue);opacity:1}
html body .opt.dtile.--sel b{color:var(--qr-ink)}
html body .opt.dtile.--sel span{color:var(--qr-copy)}
html body .opt.photo .opt-img{background:#dce9ef}
html body .opt.photo .opt-img.fallback{background:#eef5f6;color:var(--qr-blue)}
html body .opt.photo .opt-body b{font-weight:500;letter-spacing:-.01em}
html body .opt.photo .opt-body span{font-weight:400;letter-spacing:.02em;text-transform:none;font-size:.68rem}
html body .opt.photo.--sel .opt-body{background:linear-gradient(180deg,transparent 0,rgba(38,62,76,.5) 45%,rgba(38,62,76,.86))}
html body .opt-reco{background:var(--qr-blue);color:#fff;font-weight:500;letter-spacing:.04em;padding:3px 7px;border-radius:999px;box-shadow:none}
html body .opt.--sel .opt-reco{background:var(--qr-blue);color:#fff}

/* the check: an empty ring that fills blue when picked; square for pick-all-that-apply */
html body :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none) .tick{top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:transparent;border:1.5px solid var(--qr-ring);opacity:1;transform:none;transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io)}
html body :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none) .tick svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity var(--qr-t2) var(--qr-e-io)}
html body :is(.opt.photo,.m-pcard) .tick{border-color:#ffffffe6;background:#263e4c33}
html body :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none).--sel .tick{background:var(--qr-blue);border-color:var(--qr-blue);transform:none}
html body :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none).--sel .tick svg{opacity:1;color:#fff}
html body [data-multi="true"] :is(.opt,.m-tile) .tick{border-radius:6px}
/* phone tiles drawn without a .tick element get the same ring from a pseudo-element */
html body .m-tile:not(:has(>.tick))::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--qr-ring);background:transparent center/12px 12px no-repeat;transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io)}
html body .m-tile.--sel:not(:has(>.tick))::after{border-color:var(--qr-blue);background-color:var(--qr-blue);background-image:var(--qr-check)}
html body [data-multi="true"] .m-tile::after{border-radius:6px}
/* the same ring on the custom quizzes' answers: Doors & Windows (.option role=radio/checkbox), Epoxy (.checkmark, shown on
   every card, not only the photo ones) and Paving's border rows. Size presets that fill a field (windows S/M/L, epoxy and
   spray-foam area chips) stay chips, as before. */
html body.bp-quiz-windows .options:not(.wd-size-presets)>.option::after,html body.bp-quiz-windows .options:not(.wd-size-presets)>.option[aria-checked=true]::after,html body.quiz-paving .pv-border-option .pv-border-choice::after,html body.quiz-paving .pv-border-option.--sel .pv-border-choice::after{content:"";position:absolute;top:10px;right:10px;left:auto;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--qr-ring);background:transparent center/12px 12px no-repeat;font-size:0;line-height:0;margin:0;transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io)}
html body.bp-quiz-windows .options:not(.wd-size-presets)>.option[aria-checked=true]::after,html body.quiz-paving .pv-border-option.--sel .pv-border-choice::after{border-color:var(--qr-blue);background-color:var(--qr-blue);background-image:var(--qr-check)}
html body.bp-quiz-windows .options>.option[role=checkbox]::after{border-radius:6px}
html body.quiz-paving .pv-border-option{position:relative}
html body.quiz-paving .pv-border-option .pv-border-choice{padding-right:40px}
html body.bp-quiz-epoxy .options:not(.area-options)>.option>.checkmark,html body.bp-quiz-epoxy .options:not(.priorities):not(.area-options)>.option:not(.material-card)>.checkmark{display:flex}
/* a title phrase kept on one line ("ground-floor") */
html body .nowrap{white-space:nowrap}
/* phones: answers are equal cards in two columns; an odd last answer spans both, the same card inside (one rule on all seven) */
@media(max-width:1100px) and (orientation:portrait){
  html body.bp-quiz-epoxy .options.rooms:not(.area-options):not(.priorities){grid-template-columns:repeat(2,minmax(0,1fr))}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .options:not(.area-options):not(.wd-size-presets)>.option:last-child:nth-child(odd){grid-column:1 / -1}
  html body.quiz-paving[data-step] .app .pv-equal-choices>.m-tile:last-child:nth-child(odd){grid-column:1 / -1}
}

/* typed answers */
html body :is(.inp,.m-field){background:#ffffffe0;border:1px solid #fff;border-radius:18px;font-weight:500;letter-spacing:-.02em;color:var(--qr-ink);box-shadow:var(--qr-tile-shadow);transition:border-color var(--qr-t2) var(--qr-e-io),box-shadow var(--qr-t2) var(--qr-e-io)}
html body :is(.inp,.m-field)::placeholder{color:#a6b8c2;font-weight:400}
html body :is(.inp,.m-field):focus{border-color:var(--qr-blue);box-shadow:0 0 0 4px #2563eb26}
html body.bp-legacy-contact:is([data-step=zip],[data-step=phone]) .inwrap .inp{border:1px solid #fff}
html body.bp-legacy-contact:is([data-step=zip],[data-step=phone]) .inwrap .inp:focus{border-color:var(--qr-blue)}
html body :is(.inhint,.m-inhint){font-size:12.5px;font-weight:400;color:var(--qr-copy)}
html body :is(.inhint,.m-inhint).ok{color:var(--qr-blue)}
html body .sf-input-label,html body.bp-legacy-contact .sf-input-label{font-size:13px;font-weight:500;color:var(--qr-ink-2)}

/* ---------- desktop footer: frosted Back pill + the site's blue pill ---------- */
/* the base answer card grows 20px to hold the taller pill buttons (the engine still raises it for composite steps) */
html body .shell .q-card{height:320px}
html body .shell .cta{background:linear-gradient(var(--qr-line),var(--qr-line)) 26px 0/calc(100% - 52px) 1px no-repeat;padding-top:9px;padding-bottom:13px}
html body .btn-back,html body .shell #backBtn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 20px 0 16px;border-radius:999px;border:1px solid #fff;background:#ffffffb8;font-size:14px;font-weight:500;color:var(--qr-ink-2);box-shadow:none;cursor:pointer;transition:background-color var(--qr-t2) var(--qr-e-io),transform var(--qr-t3) var(--qr-e)}
@media(hover:hover){html body .btn-back:hover,html body .shell #backBtn:hover{background:#fff;color:var(--qr-ink-2);border-color:#fff;transform:translateX(-2px)}}
html body .btn-next{min-height:46px;padding:0 22px 0 26px;gap:12px;border-radius:999px;background:var(--qr-blue);color:#fff;font-size:15px;font-weight:500;letter-spacing:-.005em;box-shadow:var(--qr-btn-shadow);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)}
html body .btn-next svg{width:18px;height:18px;transition:transform var(--qr-t3) var(--qr-e)}
@media(hover:hover){html body .btn-next: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 .btn-next:hover:not(:disabled) svg{transform:translateX(4px)}}
html body .btn-next:disabled{background:var(--qr-blue);color:#fff;opacity:.4;box-shadow:none;transform:none}

/* ---------- mobile chrome ---------- */
/* Back: the 44px box is the invisible hit area and fills the 44px header row; the drawn circle is 36px (inset 4px), so it sits on the
   wordmark/counter centre line with 10px clear above the progress segments, its left edge on the 16px gutter like the segments
   (margin -4px: the hit area reaches 4px further out); chevron 16px at 1.5px, the home menu button's stroke */
html body .app .m-hback,html body:is(.quiz-spray-foam,.quiz-paving) .app .m-hback{position:relative;width:44px;height:44px;min-height:44px;margin-left:-4px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--qr-ink-2);box-shadow:none}
html body .app .m-hback::before,html body.bp-quiz-epoxy .mobile-back::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)}
html body .app .m-hback svg,html body:is(.quiz-spray-foam,.quiz-paving) .app .m-hback svg,html body.bp-quiz-epoxy .mobile-back svg{position:relative;width:16px;height:16px;stroke-width:2.25;color:var(--qr-ink-2)}
@media(hover:hover){html body .app #hback.m-hback:hover,html body.bp-quiz-epoxy #mobile-back.mobile-back:hover{background:transparent;border-color:transparent}html body .app #hback.m-hback:hover::before,html body.bp-quiz-epoxy #mobile-back.mobile-back:hover::before{background:#fff}}
html body .step{font-size:13px;font-weight:500;color:var(--qr-copy);font-variant-numeric:tabular-nums}
html body .step b{font-weight:500;color:var(--qr-blue)}
html body .m-segs i{background:#263e4c17}
html body .m-segs i::after{background:var(--qr-blue)}
html body .app .m-preview{border-radius:24px;background:var(--qr-preview-bg);box-shadow:var(--qr-card-shadow)}
/* Five or more answer tiles (roofing / insulation square footage, ...): the photo gives up ~6vh so the last tile clears the
   bottom fade on a 402x874 iPhone instead of sitting two-thirds under it. Shared-engine quizzes only. */
html body.bp-engine:not(.quiz-paving,.quiz-spray-foam):has(.m-qpanel:not(.is-leaving) .m-tiles>.m-tile:nth-child(5)) .app .m-preview{height:28vh}
@media(prefers-reduced-motion:no-preference){html body.bp-engine:not(.quiz-paving,.quiz-spray-foam) .app .m-preview{transition:transform var(--qr-t2) var(--qr-e)}}
html body .livepill{gap:7px;padding:6px 12px;background:#ffffffd9;border:1px solid #fff;font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--qr-kicker);box-shadow:0 1px 2px #263e4c0d,0 10px 24px -14px #263e4c59}
html body .livepill::before{background:var(--qr-blue);box-shadow:none}
/* The phone tip stays the live overlay (no pill): David, 2026-10-10 — as much of the preview as possible. Only the font follows the redesign. */
html body .m-hero-tip{font-family:var(--qr-font);font-weight:500}
html body .app .m-title{font-size:clamp(21px,5.8vw,26px);line-height:1.12}
html body:is(.quiz-spray-foam,.quiz-paving) .app .m-title{font-size:clamp(20px,5.4vw,24px);line-height:1.15}
html body .app .m-help{font-size:14px;line-height:1.45}
html body .m-body-tip{background:#ffffffd9;border:1px solid #fff;border-radius:16px;color:var(--qr-ink-2);font-weight:400;box-shadow:var(--qr-tile-shadow)}
html body .m-body-tip svg{color:var(--qr-blue)}

/* mobile answer tiles */
html body .m-tile{background:var(--qr-tile-bg);border:1px solid #fff;border-radius:16px;box-shadow:var(--qr-tile-shadow);color:var(--qr-ink);transition:transform var(--qr-t1) var(--qr-e),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)}
html body .m-tile .gi{color:var(--qr-glyph);opacity:1}
html body .m-tile b{font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--qr-ink)}
html body .m-tile span{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--qr-copy)}
html body .m-tile.--sel{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body .m-tile.--sel .gi{color:var(--qr-blue);opacity:1}
html body .m-tile.--sel b{color:var(--qr-ink)}
html body .m-tile.--sel span{color:var(--qr-copy)}
html body .m-tile .opt-reco,html body .m-tile.--sel .opt-reco{background:var(--qr-blue);color:#fff;font-weight:500;letter-spacing:.08em;padding:2px 6px;border-radius:999px}
html body .m-pcard{border:1px solid #fff;border-radius:16px;background:#dce9ef;box-shadow:var(--qr-tile-shadow)}
html body .m-pcard .cap{background:linear-gradient(180deg,transparent,rgba(38,62,76,.84))}
html body .m-pcard .cap b{font-weight:500}
html body .m-pcard .cap small{font-weight:400}
html body .m-pcard.--sel{border-color:var(--qr-blue);box-shadow:0 0 0 2px var(--qr-blue),0 14px 28px -18px #2563eb99}
html body :is(.m-pcard.fb,.m-pcard.nsure){background:var(--qr-tile-bg);border-color:#fff}
html body :is(.m-pcard.fb,.m-pcard.nsure) .fb-q{color:var(--qr-blue)}
html body :is(.m-pcard.fb,.m-pcard.nsure) .fb-lab b{font-weight:500;color:var(--qr-ink)}
html body :is(.m-pcard.fb,.m-pcard.nsure) .fb-lab small{font-weight:400;color:var(--qr-copy);opacity:1}
html body :is(.m-pcard.fb,.m-pcard.nsure) .tick{border-color:var(--qr-ring);background:transparent}
html body :is(.m-pcard.fb,.m-pcard.nsure).--sel{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body :is(.m-pcard.fb,.m-pcard.nsure).--sel .tick{background:var(--qr-blue);border-color:var(--qr-blue)}

/* mobile footer: Continue pinned to the bottom, on a frosted bar */
html body .app .m-foot{border-top:1px solid #ffffff99;background:linear-gradient(180deg,#eaf3f7cc 0%,#d5ebf5e6 100%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} /* the Continue bar fades into the sky blue Safari's bottom bar takes (David, 2026-10-10) */
html body .m-cont,html body .quiz-spray-foam .m-cont,html body .quiz-paving .m-cont{min-height:52px;padding:0 24px;gap:12px;border-radius:999px;background:var(--qr-blue);color:#fff;font-size:15px;font-weight:500;letter-spacing:-.005em;box-shadow:var(--qr-btn-shadow);transition:background-color var(--qr-t2) var(--qr-e-io),opacity var(--qr-t2) var(--qr-e),transform var(--qr-t1) var(--qr-e)}
html body .m-cont svg{width:18px;height:18px}
html body .m-cont:disabled{background:var(--qr-blue);opacity:.4;box-shadow:none}

/* hover never turns a picked tile solid blue (spray foam's branding.css did) */
@media(hover:hover){
  html body :is(.opt.dtile.--sel,.m-tile.--sel):hover{background:#fff;border-color:var(--qr-blue)}
  html body .sf-size-preset[aria-pressed="true"]:hover{background:#fff;border-color:var(--qr-blue)}
  html body .sf-size-preset:not([aria-pressed="true"]):hover{background:#fff;border-color:#fff}
  html body.quiz-paving .pv-equal-choices :is(.opt,.m-tile):hover{background:#fff;border-color:#fff}
  html body.quiz-paving .pv-equal-choices :is(.opt,.m-tile).--sel:hover{border-color:var(--qr-blue)}
}

/* ---------- measurement modules (spray foam sizes, paving areas and borders) ---------- */
html body .sf-size-preset{border:1px solid #fff;border-radius:16px;background:var(--qr-tile-bg);box-shadow:var(--qr-tile-shadow);color:var(--qr-ink)}
html body .sf-size-preset b{font-weight:500;letter-spacing:-.015em}
html body .sf-size-preset span{color:var(--qr-copy)}
html body .sf-size-preset[aria-pressed="true"]{background:#fff;border-color:var(--qr-blue);color:var(--qr-ink);box-shadow:var(--qr-sel-shadow)}
html body .sf-size-preset[aria-pressed="true"] span{color:var(--qr-copy)}
html body .sf-exact-card{border:1px solid #fff;border-radius:18px;background:#ffffffb8;box-shadow:var(--qr-tile-shadow)}
html body :is(.sf-exact-card:focus-within,.sf-exact-card.is-selected){border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body .sf-exact-heading label{font-weight:500;letter-spacing:-.02em;color:var(--qr-ink)}
html body .sf-exact-badge{border-radius:999px;background:var(--qr-blue);color:#fff;font-weight:500;letter-spacing:.08em}
html body .sf-exact-field{border:1px solid #dce9ef;border-radius:14px}
html body .sf-exact-card:focus-within .sf-exact-field{border-color:var(--qr-blue)}
html body .sf-exact-field input{font-weight:500;color:var(--qr-ink)}
html body .sf-exact-field input::placeholder{color:#a6b8c2;font-weight:400}
html body .sf-exact-field span{font-weight:500;color:var(--qr-copy)}
html body .sf-measure-help{color:var(--qr-copy)}
html body .sf-measure-help summary::before{border-color:var(--qr-ring);font-weight:500}
html body .sf-measure-help p{background:#ffffffb8;border-radius:12px}
html body .sf-mobile-tip summary{font-weight:500}
html body .sf-result-summary dd{font-weight:500;color:var(--qr-ink)}
html body .sf-result-summary dt{color:var(--qr-copy)}
html body.quiz-paving{--bp-muted:var(--qr-copy);--bp-border:#dce9ef}
html body.quiz-paving[data-step] :is(.shell,.app) .pv-equal-choices :is(.opt,.m-tile){border:1px solid #fff;border-radius:18px;background:var(--qr-tile-bg);box-shadow:var(--qr-tile-shadow);color:var(--qr-ink)}
html body.quiz-paving[data-step] .app .pv-equal-choices .m-tile{border-radius:16px}
html body.quiz-paving[data-step] :is(.shell,.app) .pv-equal-choices .--sel{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body.quiz-paving .pv-equal-choices :is(.opt,.m-tile) b{font-weight:500;letter-spacing:-.015em;color:var(--qr-ink)}
html body.quiz-paving .pv-equal-choices :is(.opt,.m-tile) .pv-choice-sub{color:var(--qr-copy)}
html body.quiz-paving .pv-equal-choices :is(.opt,.m-tile) .gi{color:var(--qr-glyph)}
html body.quiz-paving .pv-equal-choices .--sel .gi{color:var(--qr-blue)}
html body.quiz-paving .pv-equal-choices :is(.opt,.m-tile)::after{content:"";position:absolute;top:10px;right:10px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--qr-ring);background:transparent center/12px 12px no-repeat;color:transparent;font-size:0}
html body.quiz-paving .pv-equal-choices :is(.opt,.m-tile).--sel::after{content:"";border-color:var(--qr-blue);background-color:var(--qr-blue);background-image:var(--qr-check)}
html body.quiz-paving :is(.opt,.m-tile,.pv-area-choice,.pv-measurements summary,.pv-replace-type label:has(input:focus-visible)):focus-visible{outline:3px solid #2563eb66;outline-offset:2px}
html body.quiz-paving :is(.preview,.m-preview,.pv-stage,.r-atticbox){background:var(--qr-preview-bg)}
html body.quiz-paving .pv-render-status{background:var(--qr-preview-bg);color:var(--qr-copy);font-weight:400}
html body.quiz-paving .pv-caption{background:#ffffffe6;border:1px solid #fff;border-radius:18px;box-shadow:0 1px 2px #263e4c0d,0 14px 30px -16px #263e4c66}
html body.quiz-paving .pv-caption b{font-weight:500;letter-spacing:-.02em;color:var(--qr-ink)}
html body.quiz-paving :is(.inhint,.pv-field-hint){color:var(--qr-copy)}
html body.quiz-paving .pv-area-choice{border:1px solid #fff;border-radius:16px;background:var(--qr-tile-bg);box-shadow:var(--qr-tile-shadow);color:var(--qr-ink)}
html body.quiz-paving .pv-area-choice.--sel{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body.quiz-paving :is(.shell,.app) .pv-area-photo{background:#eef5f6}
html body.quiz-paving .pv-area-copy b{font-weight:500}
html body.quiz-paving .pv-area-tick{border:0;background:var(--qr-blue);box-shadow:none}
html body.quiz-paving[data-step] :is(.shell,.app) .pv-area-exact,html body .pv-depth-exact{border:1px solid #fff;border-radius:18px;background:#ffffffb8;box-shadow:var(--qr-tile-shadow)}
html body .pv-area-exact label,html body .pv-depth-exact label{font-weight:500;color:var(--qr-ink)}
html body .pv-area-exact label>span{font-weight:500;color:var(--qr-blue)}
html body .pv-area-field>span{font-weight:500;color:var(--qr-copy)}
html body .pv-area-alternative{font-weight:500;color:var(--qr-ink-2)}
html body .pv-measurements summary{font-weight:500;color:var(--qr-blue)}
html body .pv-measure-times{color:var(--qr-mute)}
html body.quiz-paving .pv-border-option{border:1px solid #fff;border-radius:16px;background:var(--qr-tile-bg);box-shadow:var(--qr-tile-shadow);color:var(--qr-ink)}
html body.quiz-paving .pv-border-option.--sel{background:#fff;border-color:var(--qr-blue);color:var(--qr-ink);box-shadow:var(--qr-sel-shadow)}
html body.quiz-paving .pv-border-option.--sel .gi{color:var(--qr-blue)}
html body.quiz-paving .pv-border-option.--sel .pv-border-copy>span{color:var(--qr-copy)}
html body .pv-border-length{font-weight:500}
html body .pv-linear-field input{border:1px solid #dce9ef;border-radius:12px;color:var(--qr-ink);font-weight:500}
html body .pv-linear-field input:focus{border-color:var(--qr-blue);box-shadow:0 0 0 3px #2563eb26}
html body .pv-replace-type legend{font-weight:500;color:var(--qr-ink-2)}
html body .pv-result-details>div{border-bottom:1px solid var(--qr-rule)}
html body .pv-result-details dd{font-weight:500;color:var(--qr-ink)}
/* spray foam + paving keep their own Back control: same frosted pill */
html body:is(.quiz-spray-foam,.quiz-paving) .shell #backBtn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 20px 0 16px;border-radius:999px;border:1px solid #fff;background:#ffffffb8;font-size:14px;font-weight:500;color:var(--qr-ink-2);box-shadow:none}
@media(hover:hover){html body:is(.quiz-spray-foam,.quiz-paving) .shell #backBtn:hover{background:#fff;color:var(--qr-ink-2)}}

/* leftover heavy weights: the site never goes past 500 */
html body :is(.opt.photo .opt-img.fallback,.m-pcard.fb .fb-q,.sf-measure-help summary,.field-label,.checkmark,#mobile-count b){font-weight:500}
html body.bp-quiz-windows .back-button,html body.bp-quiz-windows .back-button span{font-weight:500}

/* ---------- composite, counters, configurator, tally (roofing, HVAC, windows rows) ---------- */
html body :is(.subq-label,.m-subq-label){font-size:13px;font-weight:500;color:var(--qr-ink-2)}
html body :is(.ctr-row,.m-ctr-row,.cfg-row,.m-cfg-row){background:var(--qr-tile-bg);border:1px solid #fff;border-radius:16px;box-shadow:var(--qr-tile-shadow)}
html body :is(.ctr-row,.m-ctr-row):is(.--on,.--pv){border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body :is(.ctr-thumb,.m-ctr-thumb){background:#dce9ef;border-radius:10px}
html body :is(.ctr-info,.m-ctr-info) b{font-weight:500;color:var(--qr-ink)}
html body :is(.ctr-info,.m-ctr-info) span{font-weight:400;color:var(--qr-copy)}
html body :is(.ctr-btn,.m-ctr-btn){border:1px solid #dce9ef;background:#fff;color:var(--qr-ink);font-weight:400}
@media(hover:hover){html body .ctr-btn:hover{border-color:var(--qr-blue);color:var(--qr-blue)}}
html body :is(.ctr-n,.m-ctr-n,.tally-n,.m-tally-n){font-weight:500;color:var(--qr-ink)}
html body :is(.ctr-ftinput,.m-ctr-ftinput){border:1px solid #dce9ef;border-radius:12px;font-weight:500;color:var(--qr-ink)}
html body :is(.ctr-ftinput,.m-ctr-ftinput):focus{border-color:var(--qr-blue);box-shadow:0 0 0 3px #2563eb26}
html body :is(.ctr-ftunit,.m-ctr-ftunit){font-weight:500;color:var(--qr-mute)}
html body :is(.ctr-none,.m-ctr-none){background:var(--qr-tile-bg);border:1px solid #fff;border-radius:16px;box-shadow:var(--qr-tile-shadow)}
html body :is(.ctr-none,.m-ctr-none) b{font-weight:500;color:var(--qr-ink)}
html body :is(.ctr-none,.m-ctr-none) span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--qr-copy)}
html body :is(.ctr-none,.m-ctr-none).--sel{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body :is(.ctr-none,.m-ctr-none).--sel :is(b,span){color:var(--qr-ink)}
html body :is(.cfg-qty,.m-cfg-qty){background:var(--qr-blue-tint);border:1px solid #2563eb33}
html body :is(.cfg-qty,.m-cfg-qty) b{font-weight:500;color:var(--qr-blue)}
html body :is(.cfg-btn,.m-cfg-btn,.tally-btn,.m-tally-btn){color:var(--qr-blue)}
@media(hover:hover){html body :is(.cfg-btn,.tally-btn):not(:disabled):hover{background:var(--qr-blue-tint)}}
html body :is(.cfg-field,.m-cfg-field) span{font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--qr-mute)}
html body :is(.cfg-field,.m-cfg-field) select{border:1px solid #dce9ef;border-radius:12px;font-weight:500;color:var(--qr-ink)}
html body :is(.cfg-rm,.m-cfg-rm){color:var(--qr-mute)}
@media(hover:hover){html body .cfg-rm:hover{background:#eef5f6;color:var(--qr-blue)}}
html body :is(.cfg-add,.m-cfg-add){border:1px dashed #2563eb66;border-radius:999px;background:#ffffffb8;color:var(--qr-blue);font-weight:500}
@media(hover:hover){html body .cfg-add:hover:not(:disabled){background:#fff}}
html body :is(.cfg-status,.m-cfg-status){font-weight:500}
html body :is(.cfg-left,.m-cfg-left){color:var(--qr-copy)}
html body :is(.cfg-ok,.m-cfg-ok){color:var(--qr-blue)}
@media(hover:hover){html body .opt.photo.tally:hover{border-color:#fff;box-shadow:var(--qr-tile-shadow)}}
html body .opt.photo.tally.--on,html body .m-pcard.tally.--on{border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body :is(.opt.photo.tally .tally-step,.m-tally-step){background:#fff;border-top:1px solid var(--qr-rule)}
html body :is(.opt.photo.tally.--on .tally-step,.m-pcard.tally.--on .m-tally-step){background:#f5f8ff}

/* HVAC decision sheet */
html body .iq-modal-backdrop{background:#263e4c73;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html body .iq-modal{border-radius:28px;border:1px solid #fff;box-shadow:0 1px 2px #263e4c0d,0 40px 80px -30px #263e4c80}
html body .iq-modal-ic{background:var(--qr-blue-tint);color:var(--qr-blue)}
html body .iq-modal h2{font-weight:500;letter-spacing:-.03em;color:var(--qr-ink)}
html body .iq-modal p{color:var(--qr-copy)}
html body .iq-mbtn{min-height:48px;border-radius:999px;border:1px solid #dce9ef;background:#fff;color:var(--qr-ink-2);font-weight:500}
@media(hover:hover){html body .iq-mbtn:hover{border-color:var(--qr-ring);background:#f5f8fa}}
html body .iq-mbtn.prim{background:var(--qr-blue);border-color:var(--qr-blue);color:#fff;box-shadow:var(--qr-btn-shadow)}
@media(hover:hover){html body .iq-mbtn.prim:hover{background:var(--qr-blue-hover);border-color:var(--qr-blue-hover)}}

/* ---------- contact steps: the map and the project card ---------- */
html body .sf-contact{background:var(--qr-preview-bg);color:var(--qr-ink)}
html body .sf-location{background:var(--qr-preview-bg)}
html body .sf-message-preview,html body.quiz-paving .sf-message-preview{background:var(--qr-preview-bg)}
html body .sf-map-states path{fill:#fff;stroke:var(--qr-ring)}
html body .sf-map-states{filter:drop-shadow(0 6px 10px #263e4c1f)}
html body .sf-location-caption{background:#ffffffe6;border:1px solid #fff;border-radius:18px;box-shadow:0 1px 2px #263e4c0d,0 14px 30px -16px #263e4c66}
html body .sf-location-caption b{font-weight:500;letter-spacing:-.03em;color:var(--qr-ink)}
html body .sf-location-caption span,html body .sf-map-credit{color:var(--qr-copy)}
html body .sf-message-card{background:#fff;border:1px solid #fff;border-radius:24px;box-shadow:0 1px 2px #263e4c0d,0 30px 60px -30px #263e4c66}
html body .sf-message-brand{color:var(--qr-ink)}
html body .sf-message-brand b{font-weight:500;letter-spacing:-.015em}
html body .sf-message-brand small{color:var(--qr-copy)}
html body .sf-message-seal{border:0;background:var(--qr-blue);color:#fff}
html body .sf-message-details>div{border-top:1px solid var(--qr-rule)}
html body .sf-message-details dt{color:var(--qr-copy)}
html body .sf-message-details dd{font-weight:500;color:var(--qr-ink)}
html body .sf-message-details [data-detail="thickness"] dd{color:var(--qr-blue)}
html body .sf-message-footer{background:transparent;border-top:1px solid var(--qr-rule);color:var(--qr-copy)}
html body .sf-message-footer svg{color:var(--qr-blue)}
html body .sf-contact-benefits{font-weight:500;color:var(--qr-copy)}
html body .sf-contact-benefits span{background:#ffffffb8;border:1px solid #fff;border-radius:999px}
html body :is(.sf-contact-note,.sf-sent-followup,.sf-result-demo){font-weight:400;color:var(--qr-copy)}
html body .sf-sent-number{border:1px solid #2563eb33;border-radius:999px;background:#fff;color:var(--qr-blue);font-weight:500}
/* The phone step's project card, every quiz: no text under 12px at any hero height (the per-quiz sheets went down
   to 7.5px in short heroes). The card keeps its frame inside the hero: header and footer stay, the detail rows
   scroll inside the card when a short phone hero cannot hold them all (Windows & Doors' pattern). */
html body .sf-message-card :is(.sf-message-brand small,.sf-message-details dt,.sf-message-footer){font-size:12px;line-height:1.25}
html body .sf-message-card .sf-message-brand b{font-size:15px;line-height:1.15}
html body .sf-message-card .sf-message-details dd{font-size:14px;line-height:1.25}
html body .sf-message-card .sf-message-details dt{margin-bottom:1px}
html body .sf-message-preview .sf-message-card{display:flex;flex-direction:column;max-height:calc(100% - 56px)}
html body .sf-message-card>:is(.sf-message-brand,.sf-message-footer){flex-shrink:0}
html body .sf-message-card>.sf-message-details{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
html body .sf-message-details>div{flex-shrink:0}
/* Paving and Epoxy pad the preview themselves and scroll it; there the card may take the whole padded box. */
html body:is(.quiz-paving,.bp-quiz-epoxy) .sf-message-preview .sf-message-card{max-height:100%}
@container (max-height:245px){
  html body:not(.quiz-paving,.bp-quiz-epoxy) .sf-message-preview .sf-message-card{max-height:calc(100% - 16px)}
  html body .sf-message-preview .sf-message-card{padding-top:8px}
  html body .sf-message-card .sf-message-brand{margin-bottom:6px}
  html body .sf-message-card .sf-message-brand small{display:none}
  html body .sf-message-card .sf-message-details>div{padding:3px 0}
  html body .sf-message-card .sf-message-footer{padding:6px}
}
@container (min-height:441px){
  html body .sf-message-card .sf-message-brand b{font-size:22px}
  html body .sf-message-card .sf-message-details dd{font-size:15px}
}
/* Phone contact step, every quiz: the question opens at its heading. consent.js scrolls the new consent block
   into view (block:nearest); when the question box below the hero cannot hold heading + field + consent (any
   phone in Safari, whose toolbars take ~150px of the 874), that scrolled the box until the heading sat under
   the hero ("send your estimate to?" with its first line hidden). With the block's scroll box reaching far
   above it, the nearest-scroll has nothing to reveal and the box stays at its top; the consent is one swipe
   below (the bottom fade shows it), the Send bar stays put. Desktop keeps its behaviour. */
html body .m-qpanel .bp-consent{scroll-margin-top:200vh}
@media(max-width:1100px){html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .bp-consent{scroll-margin-top:200vh}}
/* Both contact steps (ZIP, phone): the heading sits 18px under the hero in every quiz, as in Roofing, Insulation
   and HVAC (Paving and Spray Foam had 12, Epoxy and Windows & Doors 13). Keyed on the panel's own field, not on
   body[data-step], so a panel never changes padding while it slides in or out (no shift on the step change). */
html body.bp-engine .app .m-qpanel:has(#qInput:is([autocomplete=postal-code],[autocomplete=tel])){padding-top:18px}
@media(max-width:760px){html body.bp-quiz-epoxy .question-stage:has(#zip-input,#phone-input){padding-top:5px}}
@media(max-width:1100px){html body.bp-quiz-windows .question-card>.question:has(#zip-input,#phone-input){padding-top:5px}}

/* consent block (wording untouched) */
html body .bp-consent,html body .bp-consent p,html body .bp-consent .bp-consent-disclosure,html body .bp-consent-alternate{color:var(--qr-copy)}
html body .bp-consent .bp-consent-choice{font-size:12px;line-height:1.55}
html body .bp-consent legend{font-weight:500;color:var(--qr-ink)}
html body .bp-consent .bp-consent-sender{font-weight:500}
html body .bp-consent-choice input[type=checkbox]{accent-color:var(--qr-blue)}
html body :is(.bp-consent a,.bp-marketing-link){color:var(--qr-blue);text-underline-offset:3px}
html body .bp-marketing-dialog{border:1px solid #fff;border-radius:28px;color:var(--qr-ink);box-shadow:0 40px 80px -30px #263e4c80}
html body .bp-marketing-dialog::backdrop{background:#263e4c73}
html body .bp-marketing-dialog h2{font-weight:500;letter-spacing:-.03em}
html body .bp-marketing-dialog :is(.bp-marketing-note,.bp-marketing-status){color:var(--qr-copy)}
html body .bp-marketing-dialog button{border:1px solid #dce9ef;border-radius:999px;color:var(--qr-ink-2);font-weight:500}
html body .bp-marketing-dialog .bp-marketing-accept{background:var(--qr-blue);border-color:transparent;color:#fff;box-shadow:var(--qr-btn-shadow)}
html body .bp-project-dialog{border:1px solid #fff;border-radius:28px;color:var(--qr-ink)}
html body .bp-preview-close{border-radius:999px;font-weight:500}

/* ---------- results ---------- */
html body .results{background:var(--qr-sky)}
html body.bp-legacy-contact :is(.results-card,.r-card){background:transparent}
html body .r-card{background:transparent}
@media(min-width:1101px){
  html body.bp-legacy-contact .results .results-card,html body .results .results-card{background:var(--qr-card-bg);border:1px solid var(--qr-card-border);border-radius:28px;box-shadow:var(--qr-card-shadow)}
}
html body .r-atticbox,html body.bp-legacy-contact .results .r-atticbox{border-radius:24px;background:var(--qr-preview-bg);box-shadow:0 1px 2px #263e4c0d,0 24px 50px -30px #263e4c66}
html body .r-check{background:var(--qr-blue);box-shadow:0 14px 30px -10px #2563eb8c}
html body .r-title,html body.bp-legacy-contact .results .r-title{font-size:clamp(28px,1.4vw + 14px,40px);font-weight:500;letter-spacing:-.05em;line-height:1.05;color:var(--qr-ink);text-wrap:balance}
html body .r-title em{font-style:normal;color:var(--qr-blue)}
html body .r-sent{color:var(--qr-copy)}
html body .r-sent b{font-weight:500;color:var(--qr-ink)}
html body .r-contractor{background:#fff;border:1px solid #fff;border-radius:24px;box-shadow:0 1px 2px #263e4c0d,0 30px 60px -30px #263e4c66}
html body .r-contractor .head{background:var(--qr-blue)}
html body .r-contractor .head .ck{font-weight:500}
html body .r-contractor .head .badge{font-weight:500}
html body .r-contractor .pname{font-weight:500;color:var(--qr-ink)}
html body .r-contractor .desc{color:var(--qr-copy)}
html body .r-contractor .rdiv{background:var(--qr-rule)}
html body .r-contractor .meta{font-weight:500;color:var(--qr-blue)}
html body .r-plogo{border:1px solid var(--qr-rule);border-radius:16px}
html body .reset,html body .results .reset,html body.bp-legacy-contact .results .reset{min-height:48px;padding:0 24px;border-radius:999px;border:1px solid #fff;background:#ffffffb8;color:var(--qr-ink-2);font-weight:500;box-shadow:none}
@media(hover:hover){html body .results .reset:hover{border-color:#fff;background:#fff;color:var(--qr-ink-2)}}
html body .bp-result-summary>div{border-bottom:1px solid var(--qr-rule)}
html body .bp-result-summary dt{color:var(--qr-copy)}
html body .bp-result-summary dd{font-weight:500;color:var(--qr-ink)}
html body .bp-result-review{border:1px solid #fff;border-radius:999px;background:#ffffffb8;color:var(--qr-ink-2);font-weight:500}
html body :is(.bp-completion .bp-estimate-notice,.bp-completion-line){color:var(--qr-copy)}

/* ==========================================================================
   Epoxy (body.bp-quiz-epoxy) and Doors & Windows (body.bp-quiz-windows):
   their own apps, same layout — mapped onto the same vocabulary.
   ========================================================================== */
html body:is(.bp-quiz-epoxy,.bp-quiz-windows){background:var(--qr-sky);background-color:#d5ebf5}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell :is(.left,.right,.left-rail,.project-rail,.preview-card,.question-card,.scene-card){background:var(--qr-card-bg);border:1px solid var(--qr-card-border);border-radius:28px;box-shadow:var(--qr-card-shadow);-webkit-backdrop-filter:var(--qr-blur);backdrop-filter:var(--qr-blur)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell .left-rail{padding:20px 22px 22px}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell :is(.preview,.scene){border-radius:27px;background:var(--qr-preview-bg)}
html body.bp-quiz-epoxy .scene-loading{color:var(--qr-copy);font-weight:400}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.question-stage,.question-panel,.question-card>.question){background:transparent}
/* progress */
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.percentage,.progress-number){font-weight:500;letter-spacing:-.06em;color:var(--qr-blue);font-variant-numeric:tabular-nums}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.percentage,.progress-number) :is(span,strong){font-weight:500;color:var(--qr-blue)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.percentage small,.progress-number>span){font-weight:500;letter-spacing:-.02em;color:var(--qr-mute)}
html body.bp-quiz-epoxy .step-count{font-weight:400;letter-spacing:0;text-transform:none;color:var(--qr-copy)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.track,.vertical-track){background:var(--qr-line)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.track,.vertical-track) i{background:var(--qr-blue)}
html body.bp-quiz-epoxy #progress-knob{border-color:var(--qr-blue);box-shadow:0 6px 14px -4px #2563eb80}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.gauge-info,.progress-detail) strong{font-weight:500;letter-spacing:-.02em;color:var(--qr-ink)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.gauge-info>b,#next-section){font-weight:400;color:var(--qr-copy)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.gauge-info .divider,.progress-detail hr,.rail-divider){background:var(--qr-line);border-color:var(--qr-line)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.gauge-bottom,.rail-end){font-weight:400;color:var(--qr-copy)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.gauge-bottom strong,.rail-end b){font-weight:500;color:var(--qr-ink)}
html body.bp-quiz-epoxy .text-button{font-weight:500;color:var(--qr-copy)}
/* your answers */
html body.bp-quiz-epoxy .answer-row{border-radius:14px;color:var(--qr-ink)}
@media(hover:hover){html body.bp-quiz-epoxy .answer-row:not(:disabled):hover{background:#ffffffa6}}
html body.bp-quiz-epoxy .answer-dot{border:1.5px solid var(--qr-ring);background:#fff;color:#fff}
html body.bp-quiz-epoxy .answer-row.complete .answer-dot{background:var(--qr-blue);border-color:var(--qr-blue)}
html body.bp-quiz-epoxy .answer-row.current .answer-dot{border:2px solid var(--qr-blue);background:var(--qr-blue);box-shadow:inset 0 0 0 4px #fff}
html body.bp-quiz-epoxy .answer-body>span{font-weight:400;color:var(--qr-copy)}
html body.bp-quiz-epoxy .answer-body strong{font-weight:500;color:var(--qr-ink)}
html body.bp-quiz-epoxy .answer-row.current .answer-body>span{font-weight:500;color:var(--qr-blue)}
html body.bp-quiz-epoxy .answer-row:not(.complete) .answer-body strong{font-size:12px;font-weight:400;color:#a6b8c2}
html body.bp-quiz-epoxy .answer-row.current .answer-body strong{color:var(--qr-copy)}
html body.bp-quiz-epoxy .saved-dot{background:var(--qr-blue)}
html body.bp-quiz-windows .wd-checklist{--wd-checklist-orange:var(--qr-blue);--wd-checklist-deep:var(--qr-blue);--wd-checklist-soft:#fff;--wd-checklist-line:#263e4c17}
@media(hover:hover){html body.bp-quiz-windows .wd-checklist-row:not(:disabled):hover{background:#ffffffa6}}
html body.bp-quiz-windows .wd-checklist-dot{width:22px;height:22px;flex-basis:22px;border-width:1.5px;border-color:var(--qr-ring)}
html body.bp-quiz-windows .wd-checklist-row--done .wd-checklist-dot{border-color:var(--qr-blue)}
html body.bp-quiz-windows .wd-checklist-row--current .wd-checklist-dot{border:2px solid var(--qr-blue);background:var(--qr-blue);box-shadow:inset 0 0 0 4px #fff}
html body.bp-quiz-windows .wd-checklist-row--current .wd-checklist-dot::after{display:none}
html body.bp-quiz-windows .wd-checklist-label{font-size:12px;font-weight:400;color:var(--qr-copy)}
html body.bp-quiz-windows .wd-checklist-value{font-size:14px;font-weight:500;color:var(--qr-ink)}
html body.bp-quiz-windows .wd-checklist-row--current .wd-checklist-label{font-weight:500;color:var(--qr-blue)}
html body.bp-quiz-windows .wd-checklist-row--current .wd-checklist-value{font-weight:400;color:var(--qr-copy)}
html body.bp-quiz-windows .wd-checklist-row--pending .wd-checklist-value{font-weight:400;color:#a6b8c2}
html body.bp-quiz-windows .project-foot{color:var(--qr-copy)}
/* question */
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.question-head h1,.q-title){font-size:clamp(24px,1vw + 13px,32px);line-height:1.1}
html body.bp-quiz-windows .q-context{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--qr-kicker)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .option{background:var(--qr-tile-bg);border:1px solid #fff;border-radius:18px;box-shadow:var(--qr-tile-shadow);color:var(--qr-ink);transition:background-color var(--qr-t2) var(--qr-e-io),transform var(--qr-t3) var(--qr-e),box-shadow var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io)}
@media(hover:hover){html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .option:hover:not(:disabled){background:#fff;border-color:#fff;transform:translateY(-2px);box-shadow:var(--qr-tile-shadow)}}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.option.selected,.option.selected:not(.material-card),.option[aria-pressed=true]){background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .option strong{font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--qr-ink)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .option small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--qr-copy)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.option .icon,.option .opt-icon){color:var(--qr-glyph);opacity:1}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.option.selected .icon,.option[aria-pressed=true] .opt-icon,.option.selected:not(.material-card) .icon){color:var(--qr-blue)}
html body.bp-quiz-epoxy .material-card .material-text,html body.bp-quiz-epoxy .material-card.selected .material-text{background:#fff}
html body.bp-quiz-epoxy .options>.option>.checkmark{top:10px;right:10px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--qr-ring);background:#ffffffb3;color:transparent;font-size:11px;opacity:1;transform:none;box-shadow:none}
html body.bp-quiz-epoxy .options>.option.selected>.checkmark{background:var(--qr-blue);border-color:var(--qr-blue);color:#fff}
html body.bp-quiz-epoxy .options.priorities>.option>.checkmark{border-radius:6px}
html body.bp-quiz-epoxy :is(.color-option,.color-slot){border:1px solid #fff;border-radius:14px;background:var(--qr-tile-bg);box-shadow:var(--qr-tile-shadow);color:var(--qr-ink);font-weight:500}
html body.bp-quiz-epoxy :is(.color-option,.color-slot) span,html body.bp-quiz-epoxy .color-count button{font-weight:500}
html body.bp-quiz-epoxy .color-count button{border-radius:999px}
html body.bp-quiz-epoxy .color-option.selected,html body.bp-quiz-epoxy .color-slot.active,html body.bp-quiz-epoxy .color-count button.active{background:#fff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.exact-card,.wd-exact,.wd-exact:focus-within){background:#ffffffb8;border:1px solid #fff;border-radius:18px}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.exact-card>label,.wd-exact legend){font-weight:500;color:var(--qr-ink-2)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.exact-field,.wd-exact-fields input,.contact-input input,.wd-contact-input input){border:1px solid #fff;border-radius:14px;background:#ffffffe0;box-shadow:var(--qr-tile-shadow)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.exact-field:focus-within,.wd-exact-fields input:focus,.contact-input input:focus,.wd-contact-input input:focus){border-color:var(--qr-blue);box-shadow:0 0 0 4px #2563eb26}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.exact-field input,.contact-input input,.wd-contact-input input,.wd-exact-fields input){font-weight:500;letter-spacing:-.02em;color:var(--qr-ink)}
html body.bp-quiz-windows .number-stepper button{background:var(--qr-blue-tint);color:var(--qr-blue)}
html body.bp-quiz-windows .number-stepper{border:1px solid #fff;border-radius:999px;background:#ffffffc2;box-shadow:var(--qr-tile-shadow)}
html body.bp-quiz-windows .number-stepper input{font-weight:500;letter-spacing:-.02em;color:var(--qr-ink)}
html body.bp-quiz-windows .field-label{color:var(--qr-ink-2)}
html body.bp-quiz-windows :is(.copy-button,.wd-overview-control,.wd-clear-exact){border:1px solid #fff;border-radius:999px;background:#ffffffb8;color:var(--qr-ink-2);font-weight:500}
html body.bp-quiz-windows .wd-overview-control{border-radius:50%}
html body.bp-quiz-windows .wd-overview-control[aria-pressed=true]{border-color:var(--qr-blue);color:var(--qr-blue)}
/* footer */
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer{background:transparent;border-top:1px solid var(--qr-line)}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer :is(.selection-note,#step-note){font-weight:400;color:var(--qr-copy)}
@media(min-width:1101px){
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer{margin:0 20px;padding-left:0;padding-right:0}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer :is(#back,.back-button){display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px 0 16px;border-radius:999px;border:1px solid #fff;background:#ffffffb8;color:var(--qr-ink-2);font-size:14px;font-weight:500;box-shadow:none;transition:background-color var(--qr-t2) var(--qr-e-io),transform var(--qr-t3) var(--qr-e)}
  @media(hover:hover){html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer :is(#back,.back-button):hover:not(:disabled){background:#fff;color:var(--qr-ink-2);transform:translateX(-2px)}}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer :is(#back,.back-button) span{font-size:inherit}
}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.continue,.continue-button){display:inline-flex;align-items:center;justify-content:center;gap:12px;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;box-shadow:var(--qr-btn-shadow);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)}
@media(hover:hover){html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.continue,.continue-button):hover:not(:disabled){background:var(--qr-blue-hover);transform:translateY(-2px)}}
html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.continue,.continue-button):disabled{opacity:.4;background:var(--qr-blue);border-color:var(--qr-blue);color:#fff;box-shadow:none}
/* phone width */
@media(max-width:1100px){
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows){background:var(--qr-sky);background-color:#d5ebf5}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.mobile-header,.mobile-head){background:transparent}
  html body.bp-quiz-epoxy .mobile-back{position:relative;width:44px;min-width:44px;height:44px;min-height:44px;margin-left:-4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--qr-ink-2);box-shadow:none}
  html body.bp-quiz-windows .mobile-head .back-button{width:40px;min-width:40px;height:40px;min-height:40px;border:1px solid #fff;border-radius:50%;background:#ffffffc7;color:var(--qr-ink-2)}
  html body.bp-quiz-epoxy #mobile-count{font-size:13px;font-weight:500;color:var(--qr-copy)}
  html body.bp-quiz-epoxy .mobile-progress i{background:#263e4c17}
  html body.bp-quiz-epoxy .mobile-progress i.on{background:var(--qr-blue)}
  html body.bp-quiz-windows .mobile-progress{background:#263e4c17}
  html body.bp-quiz-windows .mobile-progress i{background:var(--qr-blue)}
  html body.bp-quiz-windows .project-toggle{font-weight:500;color:var(--qr-copy)}
  html body.bp-quiz-windows .project-toggle span{background:var(--qr-blue-tint);color:var(--qr-blue)}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell :is(.question-card){background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell :is(.preview-card,.scene-card){border-radius:24px}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell :is(.preview,.scene){border-radius:23px}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.question-head h1,.q-title){font-size:clamp(21px,5.8vw,26px);line-height:1.12}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-footer{border-top:1px solid #ffffffb3;background:#eef5f6e0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) :is(.continue,.continue-button){width:100%;min-height:52px}
  html body.bp-quiz-windows .project-rail{background:#fffffff2}
}

/* ---------- partner co-brand lockup (David's "Quiz Partner Preview", BlueProperty project, 2026-10-10) ----------
   Only on a partner link (?p=): brand.js swaps the header's home link for
   .bp-cobrand[data-bp-cobrand=rail|bar] > a.bp-home-link + .bp-cobrand-sep + .bp-cobrand-partner (the logo, or the name).
   rail = desktop left rail: house icon 40, gap 14, divider 1×34, gap 14, partner logo 58 high.
   bar  = phone top bar: wordmark 96 wide, gap 10, divider 1×20, gap 10, partner logo 34 high (-4px block margins).
   No partner: none of this exists and the header is unchanged. */
html body .bp-cobrand{display:flex;align-items:center;gap:14px;min-width:0;max-width:100%;margin:0;padding:0}
html body .bp-cobrand>.bp-home-link{flex:none;width:auto;max-width:none;margin:0;padding:0;position:static;transform:none}
html body .bp-cobrand>.bp-cobrand-sep{flex:none;align-self:center;width:1px;height:26px;background:#263e4c26}
html body .bp-cobrand>img.bp-cobrand-logo{display:block;flex:0 1 auto;min-width:0;width:auto;max-width:100%;height:46px;max-height:none;margin:0;padding:0;border:0;aspect-ratio:auto;object-fit:contain;object-position:left center;position:static;transform:none}
html body .bp-cobrand>img.bp-cobrand-logo[data-loading]{visibility:hidden}
html body .bp-cobrand>.bp-cobrand-name{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--qr-font);font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--qr-ink)}
html body .bp-cobrand[data-bp-cobrand=rail]>.bp-home-link>img:not(.bp-cobrand-icon){display:none}
html body .bp-cobrand[data-bp-cobrand=rail]>.bp-home-link>img.bp-cobrand-icon{display:block;width:40px;height:40px;max-width:none;max-height:none;margin:0;aspect-ratio:auto;object-fit:contain;position:static;transform:none}
html body .bp-cobrand[data-bp-cobrand=rail]>.bp-cobrand-sep{height:34px}
html body .bp-cobrand[data-bp-cobrand=rail]>img.bp-cobrand-logo{height:58px}
html body .bp-cobrand[data-bp-cobrand=bar]{gap:10px;justify-self:center}
html body .bp-cobrand[data-bp-cobrand=bar]>.bp-home-link>img{display:block;width:96px;height:auto;max-width:none;max-height:none;margin:0;aspect-ratio:auto;object-fit:contain;position:static;transform:none}
html body .bp-cobrand[data-bp-cobrand=bar]>.bp-cobrand-sep{height:20px}
html body .bp-cobrand[data-bp-cobrand=bar]>img.bp-cobrand-logo{height:34px;max-width:112px;margin-block:-4px}
html body .bp-cobrand[data-bp-cobrand=bar]>.bp-cobrand-name{max-width:112px}
html body .mobile-head>.bp-cobrand{position:absolute;left:50%;top:env(safe-area-inset-top,0px);transform:translateX(-50%);min-height:44px;max-width:calc(100% - 180px)}

/* ---------- motion: cards fade up on load; each new question fades in as it slides
   (the engines already slide it in from the side you are moving towards) ---------- */
@media(prefers-reduced-motion:no-preference) and (min-width:1101px){
  html body .shell>.card,html body .shell>:is(.workspace,.center)>.card{animation:qr-rise var(--qr-t5) var(--qr-e) both}
  html body .shell>:is(.workspace,.center)>.card:nth-child(2){animation-delay:.08s}
  html body .shell>.card:last-child{animation-delay:.16s}
}
@media(prefers-reduced-motion:no-preference) and (max-width:1100px){
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell>:is(.workspace,.center)>:is(.preview-card,.scene-card,.question-card){animation:qr-rise var(--qr-t5) var(--qr-e) both}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .shell>:is(.workspace,.center)>.question-card{animation-delay:.06s}
}
@media(prefers-reduced-motion:no-preference){
  html body .app>:is(.m-preview,.m-body){animation:qr-rise var(--qr-t5) var(--qr-e) both}
  html body .app>.m-body{animation-delay:.06s}
  html body :is(.q-panel,.m-qpanel){animation:qr-fade var(--qr-t4) var(--qr-e) both}
  html body:is(.bp-quiz-epoxy,.bp-quiz-windows) .question-panel:not(.still),html body.bp-quiz-windows .question-card>.question>*{animation:qr-step var(--qr-t4) var(--qr-e) both}
  html body .results.show :is(.results-card,.r-card)>*{animation:qr-rise var(--qr-t5) var(--qr-e) both}
}
@keyframes qr-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes qr-fade{from{opacity:0}to{opacity:1}}
@keyframes qr-step{from{opacity:0;transform:translateX(var(--qr-dx,18px))}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html body :is(.opt,.m-tile,.option,.btn-next,.btn-back,.m-cont,.continue,.continue-button){transition:none}
  @media(hover:hover){html body :is(.opt,.option):hover{transform:none}}
}

/* ==========================================================================
   Shared-engine quizzes (roofing, insulation, HVAC: body.bp-engine, set in their desktop.html/mobile.html).
   One interaction layer on the home page's tokens: hover only where hover exists, one press (scale .98,
   --qr-t1), one focus ring, one selected state (tint fill + filled check), one Continue button.
   Paving and spray foam run copies of the engine: give their <body> .bp-engine to adopt this block.
   ========================================================================== */
/* contrast: rail labels and "Now"/"Up next" 4.7:1 (were 2.9:1), "Pending" 4.7:1 at 12px (was 1.9:1, then 3.7:1); phone help text 4.6:1 on the sky (was 4.1:1) */
html body.bp-engine{--qr-mute:#5a7280}
html body.bp-engine .ti.pending .v{color:#566e7c}
html body.bp-engine .app{--qr-copy:#4f6b7a}
html body.bp-engine .livepill{font-size:12px}
html body.bp-engine .m-hero-tip{background:linear-gradient(180deg,#0c161e00 0,#0c161e8c 38%,#0c161ed1 100%)}

/* tiles */
html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none){cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;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-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none):active{transform:scale(.98);transition-duration:var(--qr-t1)}
html body.bp-engine .opt.photo.tally{cursor:default}
html body.bp-engine .opt.photo.tally:active{transform:none}
html body.bp-engine :is(.opt.dtile,.m-tile,.ctr-none,.m-ctr-none).--sel{background:#eff5ff;border-color:var(--qr-blue);box-shadow:var(--qr-sel-shadow)}
@media(hover:hover){html body.bp-engine :is(.opt.dtile,.m-tile).--sel:hover{background:#eff5ff}}
html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none) .tick{transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io)}
html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none) .tick svg{transform:scale(.4);transition:opacity var(--qr-t2) var(--qr-e-io),transform var(--qr-t3) var(--qr-e)}
html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none).--sel .tick svg{transform:none}
html body.bp-engine .m-tile:not(:has(>.tick))::after{background-size:4px 4px;transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io),background-size var(--qr-t3) var(--qr-e)}
html body.bp-engine .m-tile.--sel:not(:has(>.tick))::after{background-size:12px 12px}

/* steppers, quantity and small controls: the same press */
html body.bp-engine :is(.ctr-btn,.m-ctr-btn,.tally-btn,.m-tally-btn,.cfg-btn,.m-cfg-btn,.cfg-rm,.m-cfg-rm,.cfg-add,.m-cfg-add,.iq-mbtn,.btn-back,.m-hback,.reset,.bp-result-review){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-engine :is(.ctr-btn,.m-ctr-btn,.tally-btn,.m-tally-btn,.cfg-btn,.m-cfg-btn,.m-hback):active:not(:disabled){transform:scale(.92);transition-duration:var(--qr-t1)}
html body.bp-engine :is(.cfg-rm,.m-cfg-rm,.cfg-add,.m-cfg-add,.iq-mbtn,.btn-back,.reset,.bp-result-review):active:not(:disabled){transform:scale(.98);transition-duration:var(--qr-t1)}
html body.bp-engine .app :is(.m-ctr-btn,.m-tally-btn,.m-cfg-btn){width:44px;height:44px;min-width:44px}
html body.bp-engine .app .m-hback{width:44px;height:44px;min-height:44px}
/* the focus ring hugs the 44px hit area: 4px clear of the drawn circle (ids outrank the per-quiz rings in paving, spray foam and epoxy) */
html body.bp-engine .app #hback.m-hback:focus-visible,html body.bp-quiz-epoxy #mobile-back.mobile-back:focus-visible{outline:2px solid var(--qr-blue);outline-offset:0}

/* one keyboard focus ring (the home page's): 2px blue, offset from the shape */
html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none,.btn-next,.btn-back,.m-cont,.m-hback,.ctr-btn,.m-ctr-btn,.tally-btn,.m-tally-btn,.cfg-btn,.m-cfg-btn,.cfg-add,.m-cfg-add,.cfg-rm,.m-cfg-rm,.iq-mbtn,.reset,.bp-result-review,.bp-home-link):focus-visible{outline:2px solid var(--qr-blue);outline-offset:3px}
html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none,.btn-next,.btn-back,.m-cont,.m-hback):focus:not(:focus-visible){outline:none}

/* disclosures (<details>: spray foam "Good to know" and "How do I measure this?", paving "How to measure"): one style.
   The browser's triangle gives way to a 16px chevron at the row's right end (1.5px line, the Back button's), turning over
   when open; 44px row, text styling the quiz's own; the one press and focus ring; the content fades in and out, no height animation */
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary{display:flex;align-items:center;min-height:44px;box-sizing:border-box;list-style:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform var(--qr-t3) var(--qr-e)}
html :where(body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy)) details>summary{gap:6px} /* a quiz's own gap wins */
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary::-webkit-details-marker{display:none}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;background:currentColor;-webkit-mask:var(--qr-chevron) center/16px 16px no-repeat;mask:var(--qr-chevron) center/16px 16px no-repeat;transition:rotate var(--qr-t2) var(--qr-e-io),translate var(--qr-t2) var(--qr-e-io)}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy){--qr-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details[open]>summary::after{rotate:180deg}
@media(hover:hover){html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary:hover::after{translate:0 2px}html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details[open]>summary:hover::after{translate:0 -2px}}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary:active{transform:scale(.98);transition-duration:var(--qr-t1)}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary:focus-visible{outline:2px solid var(--qr-blue);outline-offset:3px}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary:focus:not(:focus-visible){outline:none}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) .sf-mobile-tip>summary{border-radius:10px} /* the ring follows the tip's rounded box */
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details::details-content{opacity:0;transition:opacity var(--qr-t2) var(--qr-e-io),content-visibility var(--qr-t2) var(--qr-e-io) allow-discrete}
html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details[open]::details-content{opacity:1}
@starting-style{html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details[open]::details-content{opacity:0}}
@supports not selector(::details-content){html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details[open]>summary~*{animation:qr-disclose var(--qr-t2) var(--qr-e-io)}}
@keyframes qr-disclose{from{opacity:0}}
/* spray foam's desktop measuring help sat at 24px: the 44px row reaches into the clear space above (7px) and below (10px),
   so the opened help still fits the card at 900px tall */
html body.bp-engine.quiz-spray-foam .q-panel.sf-dimension-panel .sf-measure-help summary{min-height:44px;margin:-7px 0 -10px}
@media(prefers-reduced-motion:reduce){
  html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary,html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary::after,html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details::details-content{transition:none}
  html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details>summary:active{transform:none}
  html body:is(.bp-engine,.bp-quiz-windows,.bp-quiz-epoxy) details[open]>summary~*{animation:none}
}

/* the Continue button: one component on both engines (label + arrow, blue pill, 40% when disabled);
   desktop sits right of Back in the card footer, phones span the bottom bar above the safe area */
html body.bp-engine :is(.btn-next,.m-cont){display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 22px 0 26px;border:0;border-radius:999px;background:var(--qr-blue);color:#fff;font-family:var(--qr-font);font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1;box-shadow:var(--qr-btn-shadow);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;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-engine :is(.btn-next,.m-cont) svg{width:18px;height:18px;flex:none;transition:transform var(--qr-t3) var(--qr-e)}
@media(hover:hover){
  html body.bp-engine :is(.btn-next,.m-cont):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-engine :is(.btn-next,.m-cont):hover:not(:disabled) svg{transform:translateX(4px)}
}
html body.bp-engine :is(.btn-next,.m-cont):active:not(:disabled){transform:scale(.98);transition-duration:var(--qr-t1)}
html body.bp-engine :is(.btn-next,.m-cont):disabled{background:var(--qr-blue);color:#fff;opacity:.4;box-shadow:none;transform:none;cursor:not-allowed}
html body.bp-engine .app .m-cont{flex:1;width:100%;min-height:52px}

/* progress: transforms only (the engine scales the fill and translates the knob) */
html body.bp-engine .bar i,html body.bp-engine .bar .knob{transition:transform var(--qr-t4) var(--qr-e)}
html body.bp-engine .m-segs i::after{transition:transform var(--qr-t4) var(--qr-e)}

/* the step change is the engine's single cross-fade/slide: no second animation on the panel */
html body.bp-engine :is(.q-panel,.m-qpanel){animation:none}

@media(prefers-reduced-motion:reduce){
  html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none,.btn-next,.m-cont,.bar i,.bar .knob,.m-segs i::after,.tick,.tick svg,.m-tile::after,.ctr-btn,.m-ctr-btn,.m-hback){transition:none}
  html body.bp-engine :is(.opt,.m-tile,.m-pcard,.ctr-none,.m-ctr-none,.btn-next,.m-cont,.ctr-btn,.m-ctr-btn,.m-hback):active{transform:none}
}

/* phone keyboard (/shared/keyboard.js sets html.kb-open and --vvh while it is up): the shell takes the visible
   height instead of 100dvh, the preview steps aside, so the question, its field and the Continue bar sit together
   above the keyboard with no empty band (iOS keeps 100dvh at full height under the keyboard) */
html.kb-open body.bp-engine{height:var(--vvh,100dvh)!important;min-height:0!important;max-height:var(--vvh,100dvh)}
html.kb-open body.bp-engine .app{min-height:0}
html.kb-open body.bp-engine .app .m-preview{display:none!important}
html.kb-open body.bp-engine .app .m-foot{padding-bottom:10px}
html.kb-open body.bp-engine .m-qpanel.has-more{-webkit-mask-image:none;mask-image:none} /* no fade over the field */
/* doors & windows: the same, with its own shell (header + shell stacked in the visible height, the house steps aside) */
@media(max-width:1100px){
  html.kb-open body.bp-quiz-windows{display:flex;flex-direction:column;height:var(--vvh,100%);overflow:hidden}
  html.kb-open body.bp-quiz-windows>:not(.shell){flex-shrink:0}
  html.kb-open body.bp-quiz-windows .shell{flex:1 1 0;height:auto!important;min-height:0}
  html.kb-open body.bp-quiz-windows .shell .workspace{grid-template-rows:minmax(0,1fr)!important}
  html.kb-open body.bp-quiz-windows .shell .scene-card{display:none}
  html.kb-open body.bp-quiz-windows .question-footer{padding-bottom:10px;min-height:0}
}

/* iPhone status bar (see /v3/css/chrome.css): Safari shows the body's base colour under the bar on these unscrolled pages, and a
   fixed box at the top edge makes the bar opaque. The answer-check sheet's backdrop is absolute instead (the page never scrolls,
   so it covers the same screen) and, while it is up, the base colour takes the dimmed colour (#263e4c73 over #d5ebf5, measured),
   so the bar dims with the page instead of staying a bright band. */
html body .iq-modal-backdrop{position:absolute}
html:has(body>.iq-modal-backdrop.on),html body:has(>.iq-modal-backdrop.on){background-color:#869da8}