/* Instant quote page: a dark, documentary-style 3D view with the questions on top */
.qx { background: #06080b; color: #e8edf2; min-height: 100vh; }
.qx-top { position: fixed; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; pointer-events: none; }
.qx-top a { pointer-events: auto; }
.qx-logo img { width: 120px; height: auto; }
.qx-exit { color: #aab6c2; text-decoration: none; font-size: .9rem; font-weight: 600; padding: 8px 2px; }
.qx-exit:hover { color: #fff; }
.qx-nojs { max-width: 560px; margin: 120px auto; padding: 0 20px; text-align: center; color: #c6d0da; }
.qx-nojs a { color: #fff; }

/* The stage only shows when the 3D view can run */
.qx-stage { display: none; }
.qx-3d .qx-stage { display: block; position: fixed; inset: 0; z-index: 1; overflow: hidden; }
.qx-stage canvas { display: block; width: 100%; height: 100%; }
.qx-stage::after { /* soft vignette, like a film frame */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at calc(var(--qx-free-w, 100vw) / 2) calc(var(--qx-free-h, 100vh) / 2), transparent 55%, rgba(0,0,0,.55) 100%);
}
.qx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.qx-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 5; }
.qx-fade.on { opacity: 1; }
.qx-load { position: absolute; z-index: 6; left: calc(var(--qx-free-w, 100vw) / 2); top: calc(var(--qx-free-h, 100vh) / 2); transform: translate(-50%, -50%); margin: 0; color: #8d99a6; font-weight: 600; letter-spacing: .04em; transition: opacity .6s ease; }
.qx-ready .qx-load { opacity: 0; }

/* Subtitles, documentary style */
.qx-cap {
  position: absolute; z-index: 3; margin: 0; pointer-events: none;
  left: calc(var(--qx-free-w, 100vw) / 2); top: calc(var(--qx-free-h, 100vh) - 74px);
  transform: translate(-50%, 6px); width: max-content; max-width: min(92vw, calc(var(--qx-free-w, 100vw) - 40px)); text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.55rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .45s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.qx-cap.on { opacity: 1; transform: translate(-50%, 0); }

/* Camera number pins over the model */
.qx-pin {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; margin: -30px 0 0 -14px;
  padding: 3px 9px 3px 3px; border-radius: 99px; background: rgba(8,11,15,.78); border: 1px solid rgba(240,106,27,.55);
  font-size: .78rem; font-weight: 600; color: #fff; white-space: nowrap; opacity: 0; transition: opacity .35s ease; will-change: transform;
}
.qx-pin.on { opacity: 1; }
.qx-pin b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F06A1B; font-size: .72rem; }
.qx-pin.lit { border-color: #ffe2b0; box-shadow: 0 0 18px rgba(255,214,150,.35); }

/* What camera 1 sees */
.qx-inset {
  position: absolute; z-index: 3; left: 20px; top: 76px; width: min(34vw, 360px); aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.22); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.qx-inset[hidden] { display: none; }
.qx-hud { position: absolute; margin: 0; font: 600 .68rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 3px #000; text-transform: uppercase; }
.qx-hud-tl { top: 8px; left: 9px; display: flex; align-items: center; gap: 6px; }
.qx-hud-tl i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; animation: qx-rec 1.4s steps(2, start) infinite; }
.qx-hud-tr { top: 8px; right: 9px; }
.qx-hud-bl { bottom: 8px; left: 9px; }
.qx-hud-br { bottom: 8px; right: 9px; font-variant-numeric: tabular-nums; }
@keyframes qx-rec { to { visibility: hidden; } }
.qx-det { position: absolute; left: 0; top: 0; border: 2px solid #3ccf7a; border-radius: 2px; }
.qx-det[hidden] { display: none; }
.qx-det span { position: absolute; left: -2px; bottom: 100%; padding: 2px 5px; background: #3ccf7a; color: #04130a; font: 700 .62rem/1.2 ui-monospace, Menlo, monospace; white-space: nowrap; text-transform: uppercase; }

/* The question panel */
.qx-main { position: relative; z-index: 4; }
.q.qx-panel { position: relative; margin: 96px auto 40px; max-width: 520px; background: rgba(13,17,23,.92); border: 1px solid rgba(255,255,255,.09); color: #e8edf2; box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 22px 24px 18px; }
.qx-3d .q.qx-panel { position: fixed; margin: 0; overscroll-behavior: contain; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: rgba(11,14,19,.8); }
.qx-title { margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #F06A1B; }
.qx .q-meta { color: #8d99a6; }
.qx .q-bar { background: rgba(255,255,255,.08); }
.qx .q-page { min-height: 0; padding: 18px 0 2px; }
.qx .q legend { color: #fff; font-size: clamp(1.25rem, 3vw, 1.55rem); margin-bottom: 12px; }
.qx .q-hint { color: #9aa6b2; font-size: .9rem; margin: -4px 0 12px; }
.qx .q-hint.q-after { margin: 12px 0 0; }
.qx .q-opts span { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #fff; min-height: 56px; padding: 12px 16px; }
.qx .q-opts small { color: #9aa6b2; }
.qx .q-opts label:hover span { border-color: rgba(255,255,255,.4); }
.qx .q-opts input:checked + span { background: rgba(240,106,27,.16); border-color: #F06A1B; color: #fff; box-shadow: inset 0 0 0 1px #F06A1B; }
.qx .q-opts input:checked + span small { color: #ffc9a6; }
.qx .q-nums small { font-size: .62rem; text-align: center; line-height: 1.1; }
.qx .q-stack { grid-template-columns: 1fr; }
.qx .q-opts label[hidden] { display: none; }
.qx .q-cams { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.qx .q-cams span { align-items: flex-start; text-align: left; }
.qx .q-nav { border-top-color: rgba(255,255,255,.08); margin-top: 16px; padding-top: 14px; }
.qx .q-back { color: #9aa6b2; }
.qx .q-back:hover { color: #fff; }
.qx .q-nav .btn.ready { animation: qx-nudge 2.4s cubic-bezier(.16,1,.3,1) .9s infinite; }
@keyframes qx-nudge { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(240,106,27,.55); } 35% { box-shadow: 0 0 0 9px rgba(240,106,27,0); } }
.qx .q-label { color: #9aa6b2; }
.qx .q-total { color: #fff; }
.qx .q-lines { border-top-color: rgba(255,255,255,.1); }
.qx .q-lines li { color: #9aa6b2; }
.qx .q-lines li b { color: #fff; }
.qx .q-lines li.minus b { color: var(--green-bright); }
.qx .q-small, .qx .q-muted { color: #9aa6b2; }
.qx .q-small strong { color: #fff; }

/* Desktop: panel floats on the right, the house fills the rest */
@media (min-width: 900px) {
  .qx-3d .q.qx-panel { top: 76px; right: 24px; width: 420px; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; border-radius: 22px; }
}
/* Phones and tablets: the house on top, the questions in a sheet at the bottom */
@media (max-width: 899px) {
  .qx-top { padding: 10px 14px; }
  .qx-logo img { width: 100px; }
  .qx-exit { font-size: .82rem; }
  .qx-3d .q.qx-panel { left: 0; right: 0; bottom: 0; max-height: 58vh; max-height: 58dvh; overflow-y: auto; border-radius: 20px 20px 0 0; border-bottom: 0; padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); }
  .qx-3d.qx-done .q.qx-panel { max-height: 70vh; max-height: 70dvh; }
  .qx .q-page { padding-top: 12px; }
  .qx .q legend { font-size: 1.2rem; margin-bottom: 10px; }
  .qx .q-hint { font-size: .85rem; margin-bottom: 10px; }
  .qx .q-opts { gap: 8px; }
  .qx .q-opts span { min-height: 48px; padding: 10px 14px; }
  .qx .q-stack span { min-height: 0; }
  .qx .q-nav { margin-top: 12px; padding-top: 10px; }
  .qx-title { display: none; }
  .qx-inset { left: 12px; top: 58px; width: min(46vw, 260px); }
  .qx-hud { font-size: .56rem; }
  .qx-hud-bl { display: none; }
  .qx-done .qx-pin { display: none; }
  .qx-cap { top: calc(var(--qx-free-h, 60vh) - 46px); }
  .qx .q-total { font-size: 2.8rem; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .qx-cap, .qx-fade, .qx-pin { transition: none; }
  .qx .q-nav .btn.ready { animation: none; }
}