/* The instant quote on /quote (pages_quote.py, assets/quote.js).
   The card is the site's .form-card in the hero's right-hand column; the steps and
   choices follow the trades and startup quote pages, in this site's colours. */

.qz [hidden] { display: none !important; }
.qz { scroll-margin-top: 100px; }

/* progress: three segments */
.qz-progress { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qz-progress li { position: relative; padding-top: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.qz-progress li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--line); }
.qz-progress li.is-done::before { background: var(--ink); }
.qz-progress li.is-current::before { background: var(--acc); }
.qz-progress li.is-current { color: var(--ink); }

.qz-step { animation: qzIn .3s ease both; }
@keyframes qzIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qz-step { animation: none; } }
.qz-h { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 6px; outline: none; }
.q-row { margin-top: 22px; }
.q-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.q-note { color: var(--mut); font-size: .88rem; margin: 10px 0 0; }

/* choices */
.q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-opt { font: inherit; font-size: .95rem; font-weight: 500; background: #fff; color: var(--ink); border: 1.5px solid #cfd5d2;
         border-radius: 999px; padding: 11px 20px; cursor: pointer; line-height: 1.3; transition: border-color .15s, background .15s; }
.q-opt:hover { border-color: var(--ink); }
.q-opt.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.q-opt:focus-visible, .qz-stepper button:focus-visible, .qz-back:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

/* sales: minus, number, plus */
.qz-stepper { display: inline-flex; align-items: center; border: 1.5px solid #cfd5d2; border-radius: 999px; background: #fff; }
.qz-stepper:focus-within { border-color: var(--ink); }
.qz-stepper button { font: inherit; font-size: 1.3rem; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; color: var(--ink); border-radius: 999px; }
.qz-stepper button:hover { background: var(--paper); }
.qz-stepper input { width: 56px; text-align: center; border: 0; font: inherit; font-weight: 600; font-size: 1.1rem; padding: 0; background: transparent; color: var(--ink); }
.qz-stepper input:focus { outline: none; }

/* the fee: the price card's type, on the accent */
.qr-fee { display: flex; flex-direction: column; margin-top: 16px; padding: 24px 26px; border-radius: 22px; background: var(--acc); color: #fff; }
.qr-fig { font-size: clamp(3rem, 5vw, 4rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: #fff; }
.qr-fig small { font-size: .32em; letter-spacing: 0; font-weight: 500; vertical-align: middle; }
.qr-fig-text { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.15; font-weight: 400; }
.qr-fee .price-per, .qr-fee .price-vat { color: #fff; margin-top: 6px; }
.qr-fee .price-vat { opacity: .85; font-size: .92rem; }
.qr-lines { margin-top: 14px; }
.qr-lines li { font-size: .94rem; padding: 12px 0; }
.qz .price-note { margin: 14px 0 0; font-size: .9rem; color: var(--mut); }
.qr-send-h { margin: 26px 0 12px; font-size: 1.15rem; }
.qz .form-grid { gap: 14px; }

.qz-done p { margin: 12px 0 0; }

.qz-err { margin: 16px 0 0; color: #a33; font-weight: 600; font-size: .92rem; }

/* back, step count, continue */
.qz-nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.qz-count { color: var(--mut); font-size: .88rem; margin-right: auto; }
.qz-back { font: inherit; font-weight: 600; background: transparent; border: 0; color: var(--ink); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: .2em; }

/* the left column under the lede */
.qz-includes { margin-top: 28px; }
.qz-includes h2 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; margin: 0; }
.qz-includes .bb-ticks { margin-top: 16px; gap: 10px; }
.qz-includes .bb-ticks li { font-size: .98rem; }

@media (max-width: 720px) {
  .qz-progress li { font-size: .68rem; }
  .qz-nav { flex-wrap: wrap; }
  .qz-count { width: 100%; margin: 0; }
  .qz-nav .btn { flex: 1; justify-content: center; }
}

/* One column: the card straight after the lede, the plan's contents after the card. */
@media (max-width: 1000px) {
  .bb-hero-grid:has(.qz) { gap: 0; }
  .bb-hero-grid:has(.qz) > .page-hero-copy { display: contents; }
  .bb-hero-grid:has(.qz) > .page-hero-aside { order: 1; margin-top: 24px; }
  .bb-hero-grid:has(.qz) .qz-includes { order: 2; margin-top: 32px; }
}