/* ---------- the live quote (compact booking form demo) ---------- */
.qd{container:qd / inline-size;border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--surface);overflow:hidden;min-width:0}
.qd__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:10px 16px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.qd__bar b{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.qd__form{display:grid;gap:0;padding:4px 16px 18px}
.fs{padding-top:18px}
.fs legend{float:left;width:100%;display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.fs legend + *{clear:left}
.fs legend .sub{padding-left:10px;border-left:1px solid var(--line-2)}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{position:relative;display:block;min-width:0;cursor:pointer}
.opt input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.opt-in{position:relative;display:grid;align-content:start;gap:3px;height:100%;min-height:60px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--paper);transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.opt-in::after{content:"";position:absolute;top:12px;right:11px;width:13px;height:13px;border:1.5px solid var(--line-2);border-radius:50%;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.opt.check .opt-in::after{border-radius:3px}
@media (hover:hover){ .opt:hover .opt-in{border-color:var(--ink)} }
.opt input:checked + .opt-in{background:var(--surface);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:checked + .opt-in::after{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 2.5px var(--surface)}
.opt input:focus-visible + .opt-in{outline:2px solid var(--focus);outline-offset:3px}
.opt-name{padding-right:20px;font-weight:600;font-size:14.5px;line-height:1.25}
.opt-meta{font-size:12px;line-height:1.35;color:var(--slate);font-variant-numeric:tabular-nums}
.opt-price{font-size:13px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.opts.rows{grid-template-columns:minmax(0,1fr)}
.opts.rows .opt-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:50px;padding:10px 40px 10px 12px}
.opts.rows .opt-name{padding-right:0}
.opts.rows .opt-in::after{top:50%;margin-top:-7px}
.qd__quote{margin-top:20px;border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden}
.qd__quote .qc__lines .qc__line.is-flash{animation:lineFlash .8s var(--ease-out)}
@keyframes lineFlash{from{background:var(--surface-3)}to{background:transparent}}
.qc__total strong.is-tick{animation:tick .26s var(--ease-out)}
@keyframes tick{from{transform:translateY(6px);opacity:.25}to{transform:none;opacity:1}}
.qd__note{margin-top:12px;font-size:13px;line-height:1.45;color:var(--slate)}
@container qd (max-width:460px){
  .opts:not(.rows) .opt-in{padding:10px;min-height:0}
  .opts:not(.rows) .opt-in::after{top:11px;right:8px;width:11px;height:11px}
  .opts:not(.rows) .opt-name{font-size:13.5px}
  .opts:not(.rows) .opt-meta{font-size:11.5px}
}
@container qd (min-width:640px){
  .qd__form{grid-template-columns:minmax(0,1fr) minmax(0,260px);grid-template-areas:"service quote" "size quote" "freq quote" "extras quote";column-gap:22px;padding:4px 20px 22px}
  .qd__form .fs-service{grid-area:service}
  .qd__form .fs-size{grid-area:size}
  .qd__form .fs-freq{grid-area:freq}
  .qd__form .fs-extras{grid-area:extras}
  .qd__quote{grid-area:quote;align-self:start;margin-top:18px}
}