/* BP client theme tokens: default colours retained; scene artwork untouched. */
/* BlueProprty common template V1, adapted around the existing Epoxy renderer. */
:root{--ink:var(--bp-ink);--muted:var(--bp-muted);--line:var(--bp-border);--bg:var(--bp-bg)}
html{height:100%;overflow:auto}
body{position:static;display:block;min-height:0;height:100svh;overflow:hidden;background:var(--bp-bg)}
body .shell{height:100svh;max-width:2100px;width:100%;margin:auto;padding:24px;display:grid;grid-template-columns:clamp(150px,12vw,220px) minmax(0,1fr) clamp(210px,17vw,280px);gap:22px;overflow:hidden}
body .left,body .right{display:flex;min-width:0;border:1px solid var(--line);box-shadow:none;padding:20px 16px}
body .right{display:block;overflow-y:auto}
.brand{width:100%;height:44px;object-fit:contain;margin-top:8px}
body .center{display:grid;grid-template-rows:50px minmax(100px,1fr) clamp(338px,38svh,400px);gap:14px;height:100%;min-height:0}
.quiz-top{display:flex;align-items:center}
body .back,body .mobile-back{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:9px 14px;border:1px solid #b8cbf8;border-radius:11px;background:#E9EFFD;color:var(--bp-brand-hover,#1D4FD7);font-size:13px;font-weight:800}
body .back:disabled,body .mobile-back:disabled{visibility:visible;opacity:.45;cursor:default}
body .preview-card,body[data-step="phone"] .preview-card{height:auto;min-height:0;padding:0;flex:none;border:1px solid var(--line);border-radius:18px;overflow:hidden}
body .preview,body .sf-contact{border-radius:17px}
body .question-card{height:auto;min-height:0;flex:none;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:none}
body .question-stage{min-height:0;overflow-y:auto;overflow-x:hidden;scroll-padding:14px;overscroll-behavior:contain}
body .question-panel{height:auto;min-height:calc(100% - 1px);padding:16px 20px 12px;animation:bp-question-in var(--qr-t1) var(--qr-e) both}
body .question-panel.still{animation:none}
body .question-head{margin-bottom:12px;flex:none}
body .question-head h1{font-size:clamp(21px,1.7vw,28px);line-height:1.2;letter-spacing:-.035em}
body .question-head p{display:block;font-size:13px;line-height:1.4;margin-top:6px}
body .question-content{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;overflow:visible;padding:0}
body .options,body .options:not(.area-options):not(.priorities){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(96px,1fr);grid-template-rows:none;gap:10px;height:auto;min-height:0;max-height:none;flex:1 0 auto;align-content:stretch}
body .options[data-count="2"],body .options[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
body .option,body .option.material-card,body .floors .material-card,body .blends .material-card{height:auto;min-height:0;min-width:0;grid-column:auto;display:flex;flex-direction:column;justify-content:center;padding:10px 8px;gap:5px;border:1.5px solid var(--line);border-radius:12px;box-shadow:none;overflow-wrap:anywhere;transition:background var(--qr-t1) var(--qr-e-io),border-color var(--qr-t1) var(--qr-e-io)}
@media(hover:hover){body .option:hover{transform:none;box-shadow:none;border-color:var(--bp-blue)}}
body .option strong{font-size:14px;line-height:1.25;letter-spacing:-.2px;white-space:normal}
body .option small{display:block;font-size:11px;line-height:1.3;color:var(--muted);white-space:normal}
body .option.material-card{padding:0;gap:0;justify-content:flex-start}
body .material-card .material-media,body .floors .material-media,body .blends .material-media{width:100%;height:auto;min-height:38px!important;flex:1 0 38px;position:relative}
body .material-card .material-text{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:52px;height:52px;padding:5px 7px;background:#fff}
body .material-card .material-text strong{font-size:13px;line-height:1.2;white-space:normal}
body .material-card .material-text small{font-size:11px;line-height:1.2;white-space:normal;display:block}
body .option.selected,body .option.selected:not(.material-card){border-color:var(--bp-blue);background:var(--bp-blue-soft);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--bp-blue)}
body .option.selected small,body .option.selected:not(.material-card) small{color:var(--muted)}
body .option.selected:not(.material-card) .icon{color:var(--bp-blue);opacity:1}
body .material-card.selected .material-text{background:var(--bp-blue-soft);color:var(--ink)}
body .options>.option>.checkmark{display:flex;top:6px;right:6px;width:18px;height:18px;font-size:11px}
body .question-footer{flex:none;min-height:65px;margin:0;padding:10px 16px;gap:12px;border-top:1px solid var(--line);background:#fff}
body .continue{min-width:160px;min-height:44px;border-radius:11px;background:var(--ink);padding:10px 18px;font-size:14px;box-shadow:none}
@media(hover:hover){body .continue:hover:enabled{background:var(--bp-blue-hover);transform:none}}
body .continue:disabled{background:#e2e8f0;color:#64748b}
body .options.area-options{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:60px;flex:0 0 auto;gap:8px}
body .area-options .option{display:flex;padding:8px 4px;min-height:0;gap:3px}
body .area-options .option strong{font-size:14px;line-height:1.2}
body .area-options .option small{font-size:11px}
.exact-card{display:grid;grid-template-columns:1fr minmax(150px,40%);gap:6px 16px;background:#f8faff;border:1px solid #cedcf9;border-radius:12px;padding:10px 12px;margin-top:10px}
.exact-card>label{font-size:13px;font-weight:800;align-self:center}
.exact-field{grid-column:2;grid-row:1/3;display:flex;gap:8px;align-items:center;padding:0 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}
.exact-field:focus-within{border-color:var(--bp-blue);box-shadow:0 0 0 2px var(--bp-blue-soft)}
.exact-field input{min-width:0;width:100%;height:44px;border:0;outline:0;background:transparent;color:var(--ink);font-size:18px;font-weight:700}
.exact-field span{flex:none;font-size:12px;color:var(--muted)}
.exact-card>p{font-size:11px;line-height:1.35;color:var(--muted);margin:0}
.exact-card>.input-error{grid-column:1/-1;color:#b91c1c;font-size:12px;min-height:0}
.exact-card>.input-error:empty{display:none}
body .color-option{min-width:0;min-height:52px;overflow:visible}
body .color-option span{white-space:normal;text-overflow:clip;overflow:visible}
body .color-count button,body .color-slot{min-height:44px;min-width:44px}
body .palette-grid{grid-auto-rows:minmax(52px,1fr);flex:1 0 auto}
body[data-step="phone"] .sf-message-preview{display:block;overflow-y:auto;padding:10px 0;overscroll-behavior:contain}
body[data-step="phone"] .sf-message-preview .sf-contact-kicker{display:none}
body[data-step="phone"] .sf-message-card{margin:0 auto;width:calc(100% - 24px);max-width:620px;padding:12px 14px 0;overflow:visible}
body[data-step="phone"] .sf-message-brand{margin-bottom:8px}
body[data-step="phone"] .sf-message-brand b{font-size:15px}
body[data-step="phone"] .sf-message-brand small{display:block;font-size:10px}
body[data-step="phone"] .sf-message-details>div{padding:6px 0}
body[data-step="phone"] .sf-message-details dt{font-size:12px;line-height:1.25}
body[data-step="phone"] .sf-message-details dd{font-size:15px;line-height:1.25}
body[data-step="phone"] .sf-message-footer{font-size:10px;margin:6px -14px 0;padding:8px;border-radius:0 0 17px 17px}
body[data-step="phone"] .contact-input{flex:1 0 auto;justify-content:center;gap:8px}
body:is([data-step="phone"],[data-step="zip"]) .contact-input input{font-size:22px;min-height:50px}
body:is([data-step="phone"],[data-step="zip"]) .sf-contact-benefits{font-size:11px;flex-wrap:wrap}
body[data-step="phone"] .sf-contact-note{font-size:11px;margin:6px 0}
@keyframes bp-question-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:1101px){
  body .mobile-header{display:none}body .left{display:flex}body .question-panel{padding-bottom:10px}
  body .options.options:is([data-count="5"],[data-count="6"]){grid-auto-rows:minmax(86px,1fr)}
  body .options:is([data-count="5"],[data-count="6"]) .material-text{height:46px;min-height:46px}
  body .options:is([data-count="5"],[data-count="6"]) .material-media{min-height:34px!important;flex-basis:34px}
}
@media(max-width:1100px){
  body{display:flex;flex-direction:column;height:var(--app-height,100svh);min-height:0;position:fixed;inset:0;width:100%;overflow:hidden;background:#fff}
  body .mobile-header{display:block;flex:none;height:auto;min-height:0;padding:max(10px,env(safe-area-inset-top)) 16px 0;background:#fff}
  body .mobile-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:46px;padding-bottom:6px}
  body .mobile-header img{width:145px;height:auto;max-height:34px;justify-self:center;object-fit:contain;margin-top:3px}
  body .mobile-back{padding:8px 10px;justify-self:start;height:44px;width:auto;min-width:44px}
  body .mobile-back svg{width:16px;height:16px;flex:none}
  body .mobile-back span{color:var(--bp-blue-hover);font-size:12px}
  body #mobile-count{justify-self:end;font-size:11px;color:var(--muted)}
  body .mobile-progress{display:flex;height:4px;gap:4px}
  body .shell{display:block;flex:1;min-height:0;height:auto;padding:8px 16px 0;overflow:hidden}
  body .left,body .right,body .quiz-top{display:none}
  body .center{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
  body .preview-card,body[data-step="phone"] .preview-card{height:min(calc((100vw - 32px)*2/3),max(150px,calc(100svh - 460px)));flex:0 0 auto;min-height:0;border-radius:16px}
  body .question-card{flex:1;min-height:0;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;margin:0 -16px}
  body .question-panel{padding:16px 16px 12px;min-height:calc(100% - 1px);height:auto}
  body .question-head h1{font-size:24px;line-height:1.2}
  body .question-head p{font-size:13px;line-height:1.4;margin-top:6px}
  body .options,body .options:not(.area-options):not(.priorities){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(112px,1fr);gap:9px}
  body .options:has(.material-card){grid-auto-rows:110px;flex:0 0 auto}
  body .material-card .material-text{height:70px;min-height:70px}
  body .material-card .material-text strong{font-size:13px}
  body .material-card .material-text small{font-size:11px}
  body .options.options:is([data-count="5"],[data-count="6"]){grid-auto-rows:minmax(100px,1fr)}
  body .options:is([data-count="5"],[data-count="6"]) .material-text{height:58px;min-height:58px}
  /* the three spaces are three equal stacked cards (the first one used to span the row as a wide, inline tile) */
  body .options.rooms:not(.area-options):not(.priorities){grid-template-columns:repeat(3,minmax(0,1fr))}
  body .question-footer{min-height:72px;padding:10px 16px max(12px,env(safe-area-inset-bottom))}
  body .selection-note{display:none}
  body .continue{width:100%;min-width:0!important;min-height:48px;font-size:16px}
  body .options.area-options{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:66px;flex:0 0 auto;gap:8px}
  .exact-card{display:block;padding:12px;margin-top:12px}
  .exact-field{margin-top:8px}
  .exact-card>p{margin-top:7px}
  body .palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;grid-auto-rows:64px}
  body .color-option{flex-direction:column;gap:4px;padding:5px;min-height:0}
  body .color-option i{width:100%;height:30px;flex:1 0 24px}
  body .color-option span{font-size:12px;line-height:1.2}
  body .color-tools{gap:8px;flex-wrap:wrap;margin-bottom:10px;flex:none}
  body .color-count{gap:3px;padding:3px}
  body .color-count:before{display:none}
  body .color-count button span,body .color-slot .slot-name{display:none}
  body .color-slot .slot-short{display:inline}
  body .color-slot{font-size:12px;padding:5px;gap:5px}
  body .color-slot i{width:14px;height:14px}
  body.keyboard-open .preview-card{display:none}
  body.keyboard-open .question-head p{display:none}
}
@media(max-width:370px){body .mobile-header img{width:120px}body .mobile-back span{display:none}body .question-head h1{font-size:21px}body .area-options .option strong{font-size:12px}}
@media(max-width:1100px) and (max-height:700px){body .question-panel{padding-top:12px}body .question-head{margin-bottom:10px}body .options:has(.material-card){grid-auto-rows:104px}body .options.area-options{grid-auto-rows:54px}body .question-footer{min-height:66px;padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}body .continue{min-height:46px}.exact-card{margin-top:9px;padding:10px}}
@media(min-width:700px) and (max-width:1100px){.exact-card{display:grid}.exact-field{margin:0}.exact-card>p{margin:0}}
@media(min-width:700px) and (max-width:1100px) and (orientation:landscape){body .options:not(.area-options):not(.priorities){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px) and (max-height:500px){
  body:not(.keyboard-open){position:static;height:auto;min-height:100svh;overflow:auto}
  body:not(.keyboard-open) .shell{height:auto;overflow:visible;padding:12px}
  body:not(.keyboard-open) .center{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:400px;height:auto;align-items:stretch}
  body:not(.keyboard-open) .preview-card,body:not(.keyboard-open)[data-step="phone"] .preview-card{height:400px;margin:0}
  body:not(.keyboard-open) .question-card{height:400px;margin:0;border:1px solid var(--line);border-radius:16px}
  body:not(.keyboard-open) .question-panel{padding:12px}
}
@media(prefers-reduced-motion:reduce){body .question-panel{animation:none}body .option{transition:none}}

/* ==========================================================================
   Interaction layer, as on the shared-engine quizzes (roofing/insulation/HVAC, /shared/quiz-refine.css body.bp-engine):
   the home page's motion tokens, hover only where hover exists, one press (scale .98 at --qr-t1), one 2px focus ring,
   one Continue, compositor-only progress, readable sizes. /shared/quiz-refine.css loads after this file and styles
   body.bp-quiz-epoxy at html-body specificity, so these rules start at :root to win.
   ========================================================================== */
/* contrast: rail labels and "Now" 4.8:1 (were 2.9:1), "Pending" >= 4.6:1 at 12px (was 1.9:1); phone help text and counts 4.6:1 on the sky (were 4.1:1) */
:root body.bp-quiz-epoxy{--qr-mute:#5a7280}
:root body.bp-quiz-epoxy .answer-row:not(.complete):not(.current) .answer-body strong{color:#566e7c}
@media(max-width:1100px){:root body.bp-quiz-epoxy{--qr-copy:#4f6b7a}:root body.bp-quiz-epoxy .question-head h1 em{color:var(--qr-blue-hover)}} /* the accent word on the sky: brand hover blue, 5.2:1 (brand blue was 4.2:1) */

/* nothing under 12px except the uppercase eyebrows */
:root body.bp-quiz-epoxy :is(.option small,.material-card small,.floors .material-text small,.blends .material-text small,.area-options .option small,.selection-note,.exact-card>p,.answer-body>span,.input-error,.contact-input .input-error,.color-count button,.color-slot,.color-option span,.sf-location-caption span,.sf-map-credit,.sf-contact-benefits,.sf-contact-note){font-size:12px}
:root body.bp-quiz-epoxy .floors .material-text{grid-template-rows:17px 15px}
:root body.bp-quiz-epoxy .floors .material-text small{line-height:15px}
:root body.bp-quiz-epoxy .blends .material-text small{line-height:1.2}
:root body.bp-quiz-epoxy .color-count button:not(.active){color:var(--qr-ink-2)}
:root body.bp-quiz-epoxy :is(.contact-input .input-error,.sf-location-caption span,.sf-contact-benefits,.sf-contact-note){color:var(--qr-copy)}
:root body.bp-quiz-epoxy .sf-map-credit{display:inline-flex;align-items:flex-end;min-height:44px;padding:0 2px 1px;bottom:3px;color:var(--qr-copy)}

/* tiles, colour chips, steppers and buttons: one press, no tap flash, state changes on the tokens */
:root body.bp-quiz-epoxy :is(.option,.color-option,.color-slot,.color-count button,.continue,.back,.mobile-back,.text-button,.answer-row,.reset,.sf-map-credit){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:root body.bp-quiz-epoxy :is(.option,.color-option,.color-slot,.color-count button){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),color var(--qr-t2) var(--qr-e-io),transform var(--qr-t3) var(--qr-e)}
:root body.bp-quiz-epoxy :is(.option,.color-option,.color-slot,.color-count button,.back,.reset):active:not(:disabled){transform:scale(.98);transition-duration:var(--qr-t1)}
:root body.bp-quiz-epoxy .mobile-back:active:not(:disabled){transform:scale(.92);transition-duration:var(--qr-t1)}
:root body.bp-quiz-epoxy :is(.back,.mobile-back,.text-button,.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),opacity var(--qr-t2) var(--qr-e-io)}
:root body.bp-quiz-epoxy .question-footer #back{transition:transform var(--qr-t3) var(--qr-e),background-color var(--qr-t2) var(--qr-e-io),opacity var(--qr-t2) var(--qr-e-io)}
:root body.bp-quiz-epoxy .answer-row{transition:background-color var(--qr-t2) var(--qr-e-io)}
:root body.bp-quiz-epoxy .answer-body :is(span,strong){transition:color var(--qr-t2) var(--qr-e-io)}
:root body.bp-quiz-epoxy .answer-dot{transition:background-color var(--qr-t2) var(--qr-e-io),border-color var(--qr-t2) var(--qr-e-io)}
:root body.bp-quiz-epoxy .options>.option>.checkmark{transition: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)}
:root body.bp-quiz-epoxy .material-media img.swatch-in{animation:ep-swatch-in var(--qr-t3) var(--qr-e-io) both}
@keyframes ep-swatch-in{from{opacity:0}to{opacity:1}}
:root body.bp-quiz-epoxy .scene-loading{transition:opacity var(--qr-t4) var(--qr-e-io)}
:root body.bp-quiz-epoxy .area-tag{transition:color var(--qr-t2) var(--qr-e-io)}
/* hover is for mouse and trackpad only: on touch, /shared/quiz-refine.css's .option:hover lift, the rail and the
   Continue/Back hovers would otherwise stick after a tap */
@media(hover:none){
  :root body.bp-quiz-epoxy .option:not(.selected):hover:not(:disabled){background:var(--qr-tile-bg);border-color:#fff;transform:none;box-shadow:var(--qr-tile-shadow)}
  :root body.bp-quiz-epoxy .option.selected:hover{transform:none}
  :root body.bp-quiz-epoxy .answer-row:not(:disabled):hover{background:transparent}
  :root body.bp-quiz-epoxy .continue:hover:not(:disabled){background:var(--qr-blue);transform:none;box-shadow:var(--qr-btn-shadow)}
  :root body.bp-quiz-epoxy .question-footer #back:hover:not(:disabled){background:#ffffffb8;transform:none}
  :root body.bp-quiz-epoxy :is(.back,.restart):hover{color:inherit}
}

/* one keyboard focus ring (the home page's): 2px blue, offset from the shape */
:root body.bp-quiz-epoxy :is(.option,.color-option,.color-slot,.color-count button,.continue,.back,.mobile-back,.text-button,.answer-row,.reset,.sf-map-credit):focus-visible{outline:2px solid var(--qr-blue);outline-offset:3px}
:root body.bp-quiz-epoxy :is(.option,.color-option,.color-slot,.color-count button,.continue,.back,.mobile-back,.text-button,.answer-row,.reset):focus:not(:focus-visible){outline:none}

/* the Continue button, the shared component: label + arrow together, blue pill, 40% when disabled; the arrow
   nudges 4px on hover devices only. The step count stays outside it (the rail on desktop, the header on phones). */
:root body.bp-quiz-epoxy .continue{gap:12px;min-height:48px;padding:0 22px 0 26px;font-size:15px;font-weight:500;line-height:1;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)}
:root body.bp-quiz-epoxy .continue .lbl{font-size:inherit}
:root body.bp-quiz-epoxy .continue svg{width:18px;height:18px;flex:none;transition:transform var(--qr-t3) var(--qr-e)}
@media(hover:hover){
  :root body.bp-quiz-epoxy .continue:hover:not(:disabled){box-shadow:inset 0 1px 0 #ffffff33,0 2px 4px #1d4ed84d,0 18px 36px -12px #2563eb99}
  :root body.bp-quiz-epoxy .continue:hover:not(:disabled) svg{transform:translateX(4px)}
}
:root body.bp-quiz-epoxy .continue:active:not(:disabled){transform:scale(.98);transition-duration:var(--qr-t1)}
:root body.bp-quiz-epoxy .continue:disabled{transform:none;cursor:not-allowed}
@media(max-width:1100px){:root body.bp-quiz-epoxy .continue{width:100%;min-height:52px}}

/* the step change is app.js's single cross-fade + 24px slide (400ms in / 250ms out): no CSS animation on the panel */
:root body.bp-quiz-epoxy .question-stage .question-panel{animation:none}
:root body.bp-quiz-epoxy .question-stage{position:relative}
:root body.bp-quiz-epoxy .question-panel.is-leaving{position:absolute;left:0;right:0;top:0;pointer-events:none}

/* progress on the compositor: the fill scales, the knob translates, the phone segments fill by scaleX */
:root body.bp-quiz-epoxy #progress-fill{height:100%;transform:scaleY(0);transform-origin:top;transition:transform var(--qr-t4) var(--qr-e)}
:root body.bp-quiz-epoxy #progress-knob{top:0;transition:transform var(--qr-t4) var(--qr-e)}
:root body.bp-quiz-epoxy .mobile-progress i{position:relative;overflow:hidden;background:#263e4c17}
:root body.bp-quiz-epoxy .mobile-progress i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--qr-blue);transform:scaleX(0);transform-origin:left;transition:transform var(--qr-t4) var(--qr-e)}
:root body.bp-quiz-epoxy .mobile-progress i.on::after{transform:none}

/* phones: the three space cards size to their content (the tallest card sets the row) instead of stretching into the
   free panel height, and each card lays out from the top so the icons and titles start on one line */
@media(max-width:1100px){
  :root body.bp-quiz-epoxy .options.rooms{flex:0 0 auto;height:auto;grid-auto-rows:auto;align-content:start}
  :root body.bp-quiz-epoxy .options.rooms>.option{min-height:0;justify-content:flex-start;padding:16px 8px 14px}
}
/* phones: 44px back button (inputs are already 18-22px), the fixed header and action bar clear the notch and the home indicator */
@media(max-width:1100px){
  :root body.bp-quiz-epoxy .mobile-back{width:44px;min-width:44px;height:44px;min-height:44px}
  :root body.bp-quiz-epoxy .mobile-header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  :root body.bp-quiz-epoxy .question-footer{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

@media(prefers-reduced-motion:reduce){
  :root body.bp-quiz-epoxy :is(.option,.color-option,.color-slot,.color-count button,.continue,.continue svg,.back,.mobile-back,#progress-fill,#progress-knob,.mobile-progress i::after,.checkmark){transition:none}
  :root body.bp-quiz-epoxy :is(.option,.color-option,.color-slot,.color-count button,.continue,.back,.mobile-back,.reset):active{transform:none}
  :root body.bp-quiz-epoxy .material-media img.swatch-in{animation:none}
}