/* Quote engine styles. Every colour, radius and font is a --q-* token, and
   each token reads a sitewide design token from site.css (CONTRACT.md):
   --blue-900, --blue-700, --blue-500, --blue-100, --ink, --muted, --surface,
   --card, --line, --success, --error, --font-display, --font-body.
   The fallbacks after the commas are the same blue values, so this file works
   on its own. Blues and neutrals only.
   WCAG AA on these values: ink on card 16.9:1, muted on card 7.6:1, blue-700
   on card 8.3:1, white on blue-700 8.3:1, success 5.3:1, error 6.5:1, control
   borders 3.9:1 on white (non-text minimum 3:1). */

.q-app {
  --q-page: #FFFFFF;
  --q-soft: var(--surface, #F5F8FC);   /* light grey-blue panels, e.g. the upload area */
  --q-surface: var(--card, #FFFFFF);
  --q-text: var(--ink, #0F1B2D);
  --q-text-muted: var(--muted, #4A5568);
  --q-border: #7B8CA3;            /* control outlines: 3.6:1 on white */
  --q-border-soft: var(--line, #D7E1EE);
  --q-accent: var(--blue-700, #0A4DA2);
  --q-accent-hover: var(--blue-900, #0B2545);
  --q-accent-soft: var(--blue-100, #E6F0FB);
  --q-on-accent: #FFFFFF;
  --q-focus: var(--blue-500, #1B6FE0);
  --q-eyebrow: var(--muted, #4A5568);
  --q-select: var(--blue-500, #1B6FE0);    /* selected card fill: white text 4.78:1 */
  --q-deep: var(--blue-900, #0B2545);
  --q-error: var(--error, #B42318);
  --q-error-soft: #FDF0EE;
  --q-success: var(--success, #1A7F4B);
  --q-success-soft: #E7F5EE;
  --q-note-text: var(--blue-900, #0B2545);
  --q-note-soft: var(--blue-100, #E6F0FB);
  --q-track: var(--line, #D7E1EE);
  --q-radius: 14px;
  --q-radius-card: 20px;
  --q-shadow: 0 1px 2px rgba(11, 37, 69, .05), 0 12px 32px rgba(11, 37, 69, .07);
  --q-font: var(--font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --q-font-heading: var(--font-display, 'Manrope', 'Inter', system-ui, sans-serif);
  --q-ease: cubic-bezier(.2, .7, .2, 1);

  font-family: var(--q-font);
  color: var(--q-text);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Reserve the picker's height before the script has drawn it, so nothing below moves when it appears
   (the cause of the old CLS 0.778). Only when scripting is on, so the no-JS message does not sit in a tall gap.
   Heights measured on the real picker: 948 px at 390 px wide, 678 px from 600 px up. */
@media (scripting: enabled) {
  .q-app:not([data-ready]) { min-height: 950px; }
}
@media (scripting: enabled) and (min-width: 600px) {
  .q-app:not([data-ready]) { min-height: 680px; }
}

.q-shell { background: var(--q-page); padding: 96px 16px 48px; }
.q-shell-inner { max-width: 640px; margin: 0 auto; }
.q-page-title { font-family: var(--q-font-heading); font-size: 1rem; font-weight: 700; color: var(--q-text-muted);
  margin: 0 0 12px 4px; letter-spacing: .01em; }

.q-sr, .q-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

.q-card { position: relative; background: var(--q-surface); border-radius: var(--q-radius-card);
  padding: 18px 4px 24px; scroll-margin-top: 88px; overflow-x: clip; }

/* ---- top bar: progress, sound, start over ---- */
.q-top { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; }
.q-progress { flex: 1; min-width: 0; padding-top: 6px; }
.q-progress-text { margin: 0 0 8px; font-size: .9rem; font-weight: 700; color: var(--q-text-muted); }
.q-time { font-weight: 600; }
.q-bar { height: 6px; border-radius: 6px; background: var(--q-track); overflow: hidden; }
.q-bar-fill { position: relative; height: 100%; width: 3%; background: var(--q-select); border-radius: 6px;
  transition: width .5s var(--q-ease); }
/* Every answer: a brief soft glow as the bar moves forward. */
.q-bar.is-glow { animation: q-glow .9s ease-out; }
@keyframes q-glow { 0% { box-shadow: 0 0 0 0 rgba(27, 111, 224, 0); } 30% { box-shadow: 0 0 10px 1px rgba(27, 111, 224, .38); }
  100% { box-shadow: 0 0 0 0 rgba(27, 111, 224, 0); } }
/* 25, 50 and 75 percent: a light sweep runs along the filled part. */
.q-bar-fill::after { content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); transform: translateX(-100%); }
.q-bar.is-milestone .q-bar-fill::after { animation: q-sweep 1.1s ease-out; }
@keyframes q-sweep { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(100%); } }
.q-bar.is-milestone { animation: q-glow 1.2s ease-out; }
/* The step number ticks up. */
.q-count-now { display: inline-block; }
.q-count-now.is-up { animation: q-up .35s var(--q-ease); }
@keyframes q-up { from { opacity: .2; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.q-tools { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
/* Phones: controls on their own row above the counter, so "Step 5 of 24 ·
   About 5 minutes left" keeps the full width and never wraps into a column. */
@media (max-width: 480px) {
  .q-top { flex-wrap: wrap; gap: 0 12px; }
  .q-tools { order: -1; width: 100%; margin-left: 0; justify-content: flex-end; }
  .q-progress { flex: 1 1 100%; padding-top: 0; }
}
.q-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0;
  background: transparent; color: var(--q-text-muted); font: inherit; font-size: .88rem; font-weight: 700;
  border-radius: 10px; cursor: pointer; }
.q-tool:hover { background: var(--q-accent-soft); color: var(--q-accent); }
.q-tool .q-icon { width: 20px; height: 20px; }
.q-sound[aria-pressed="false"] { color: var(--q-text-muted); }

@keyframes q-draw { to { stroke-dashoffset: 0; } }

.q-cheer { margin: 10px 0 0; min-height: 0; font-size: .95rem; font-weight: 700; color: var(--q-deep);
  opacity: 0; transform: translateY(-2px); transition: opacity .3s, transform .3s var(--q-ease); }
.q-cheer:empty { display: none; }
.q-cheer.is-on { opacity: 1; transform: none; }

/* ---- headings and copy ---- */
.q-view { margin-top: 14px; }
.q-section { margin: 0 0 4px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--q-eyebrow); }
.q-h { font-family: var(--q-font-heading); font-size: clamp(1.4rem, 5.4vw, 1.75rem); line-height: 1.25; font-weight: 700;
  color: var(--q-text); margin: 0 0 8px; }
.q-h:focus { outline: none; }
.q-h:focus-visible { outline: 3px solid var(--q-focus); outline-offset: 4px; border-radius: 6px; }
.q-help { margin: 0 0 18px; color: var(--q-text-muted); }
.q-enter { animation: q-in .3s var(--q-ease); }
.q-enter-back { animation: q-in-back .3s var(--q-ease); }
.q-leave { animation: q-out .17s ease-in forwards; }
.q-leave-back { animation: q-out-back .17s ease-in forwards; }
@keyframes q-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes q-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes q-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes q-out-back { to { opacity: 0; transform: translateX(24px); } }

/* ---- picker ---- */
.q-lines { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-line { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 104px; height: 100%;
  padding: 14px; border: 1.5px solid var(--q-border-soft); border-radius: var(--q-radius); background: var(--q-surface);
  color: var(--q-text); text-decoration: none; font-weight: 700; line-height: 1.3;
  transition: border-color .15s, background-color .15s, transform .15s var(--q-ease); }
.q-line:hover { border-color: var(--q-accent); background: var(--q-accent-soft); }
.q-line:active { transform: scale(.98); }
.q-line-icon { width: 30px; height: 30px; color: var(--q-deep); flex-shrink: 0; }
.q-line-label { font-size: .98rem; display: block; }
.q-line-text { display: block; }
.q-review { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px; border-radius: var(--q-radius);
  background: var(--q-surface); border: 1.5px solid var(--q-border-soft); color: var(--q-text); text-decoration: none; }
.q-review:hover { border-color: var(--q-accent); }
.q-review-text { display: flex; flex-direction: column; flex: 1; }
.q-review-title { font-weight: 800; color: var(--q-deep); }
.q-review-blurb { font-size: .93rem; color: var(--q-text-muted); }
.q-chevron { width: 20px; height: 20px; color: var(--q-deep); flex-shrink: 0; }
.q-alt { margin: 20px 0 0; font-size: .95rem; color: var(--q-text-muted); }
.q-alt a, .q-done a:not(.q-btn), .q-fail a { color: var(--q-accent); font-weight: 700; }

/* ---- fields ---- */
.q-fields { display: flex; flex-direction: column; gap: 20px; }
.q-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.q-label { display: block; font-weight: 700; margin: 0 0 6px; padding: 0; color: var(--q-text); }
.q-optional { font-weight: 600; color: var(--q-text-muted); }
.q-legend-solo { padding: 0; margin: 0; }
.q-fieldset > .q-help { margin-top: 0; }
.q-field-help { margin: -2px 0 8px; font-size: .93rem; color: var(--q-text-muted); }

.q-app input[type=text], .q-app input[type=email], .q-app input[type=tel], .q-app input[type=date],
.q-app select, .q-app textarea {
  width: 100%; min-height: 54px; padding: 12px 14px; font: inherit; font-size: 1.125rem; color: var(--q-text);
  background: var(--q-surface); border: 1.5px solid var(--q-border); border-radius: 12px; appearance: none;
  transition: border-color .15s, box-shadow .15s; }
.q-app textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.q-app select { background-image: linear-gradient(45deg, transparent 50%, var(--q-text-muted) 50%),
  linear-gradient(135deg, var(--q-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
  padding-right: 42px; }
.q-app input:focus-visible, .q-app select:focus-visible, .q-app textarea:focus-visible {
  outline: 3px solid var(--q-focus); outline-offset: 2px; border-color: var(--q-accent); }
.q-app [aria-invalid="true"]:not([type=radio]):not([type=checkbox]) { border-color: var(--q-error); border-width: 2px; }
.q-short { max-width: 11rem; }
/* Typed answers: a small green check fades in at the right once valid (#1A7F4B, 5.3:1 on white). */
.q-app input.is-valid, .q-app textarea.is-valid { padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A7F4B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px 20px;
  animation: q-valid .3s var(--q-ease); }
.q-app textarea.is-valid { background-position: right 12px top 14px; }
.q-short.is-valid { max-width: 13rem; }
@keyframes q-valid { from { background-size: 0 0; } to { background-size: 20px 20px; } }
.q-money { position: relative; display: block; }
.q-money-sign { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--q-text-muted); font-size: 1.125rem; }
.q-money input { padding-left: 30px !important; }

/* Option cards: native inputs, laid over the card so the whole card is the
   hit area and keyboard focus lands on the real control. */
.q-options { display: grid; gap: 10px; }
.q-options--yn { grid-template-columns: 1fr 1fr; }
.q-opt { position: relative; display: block; cursor: pointer; }
.q-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.q-opt-box { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  border: 1.5px solid var(--q-border-soft); border-radius: var(--q-radius); background: var(--q-surface);
  font-weight: 700; transition: border-color .15s, background-color .2s, color .2s, box-shadow .15s; }
/* Tap: the card presses in to about 0.97 and springs back. */
.q-opt.is-press .q-opt-box { animation: q-press .38s; }
@keyframes q-press { 0% { transform: scale(1); animation-timing-function: ease-out; }
  30% { transform: scale(.97); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 100% { transform: scale(1); } }
.q-opt--check .q-opt-box { align-items: flex-start; font-weight: 600; font-size: .98rem; line-height: 1.45; padding: 14px 16px; }
.q-opt:hover .q-opt-box { border-color: var(--q-accent); }
.q-opt input:checked + .q-opt-box { border-color: var(--q-select); background: var(--q-select); color: var(--q-on-accent); }
/* The single consent-style checkbox stays light: a long paragraph reads better on white. */
.q-opt--check input:checked + .q-opt-box { border-color: var(--q-accent); border-width: 2px; padding: 13.5px 15.5px;
  background: var(--q-accent-soft); color: var(--q-text); }
.q-opt input:focus-visible + .q-opt-box { outline: 3px solid var(--q-focus); outline-offset: 2px; }
.q-opt input[aria-invalid="true"] + .q-opt-box { border-color: var(--q-error); }
.q-opt-mark { flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid var(--q-border); background: var(--q-surface);
  display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.q-opt-mark--radio { border-radius: 50%; }
.q-opt-mark--checkbox { border-radius: 6px; margin-top: 1px; }
.q-opt-mark .q-icon { width: 16px; height: 16px; color: var(--q-select); stroke-width: 2.6; opacity: 0;
  stroke-dasharray: 24; stroke-dashoffset: 0; }
/* Selected: a white mark with a blue check; the card just tapped draws its check in (about 250 ms). */
.q-opt input:checked + .q-opt-box .q-opt-mark { border-color: #fff; background: #fff; }
.q-opt input:checked + .q-opt-box .q-opt-mark .q-icon { opacity: 1; }
.q-opt.is-just input:checked + .q-opt-box .q-opt-mark .q-icon { animation: q-draw-in .25s .04s var(--q-ease) both; }
@keyframes q-draw-in { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.q-opt--check input:checked + .q-opt-box .q-opt-mark { border-color: var(--q-accent); background: var(--q-accent); }
.q-opt--check input:checked + .q-opt-box .q-opt-mark .q-icon { color: var(--q-on-accent); }

.q-error { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--q-error-soft); color: var(--q-error); font-weight: 700; font-size: .95rem; }
.q-err-icon { display: none; }
.q-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--q-note-soft); color: var(--q-note-text);
  font-size: .95rem; font-weight: 600; }

/* ---- upload ---- */
.q-drop { position: relative; }
.q-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.q-drop-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px;
  padding: 18px; border: 1.5px dashed var(--q-border); border-radius: var(--q-radius); background: var(--q-soft);
  text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.q-drop-label:hover, .q-drop.is-over .q-drop-label { border-color: var(--q-accent); background: var(--q-accent-soft); }
.q-file-input:focus-visible + .q-drop-label { outline: 3px solid var(--q-focus); outline-offset: 2px; }
.q-file-input:disabled + .q-drop-label { cursor: not-allowed; opacity: .6; }
.q-drop-icon { width: 28px; height: 28px; color: var(--q-accent); }
.q-drop-cta { font-weight: 800; color: var(--q-accent); }
.q-drop-or { font-size: .92rem; color: var(--q-text-muted); }
.q-upload .q-field-help { margin: 8px 0 0; }
.q-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.q-files li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--q-border-soft);
  border-radius: 12px; }
.q-file-icon { width: 20px; height: 20px; color: var(--q-text-muted); flex-shrink: 0; }
.q-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.q-file-size { font-size: .88rem; color: var(--q-text-muted); }
.q-file-remove { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--q-error); font: inherit;
  font-weight: 700; font-size: .92rem; border-radius: 10px; cursor: pointer; }
.q-file-remove:hover { background: var(--q-error-soft); }

/* ---- actions ---- */
.q-actions { display: flex; gap: 10px; margin-top: 28px; }
.q-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 0 22px;
  border-radius: 14px; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent; transition: background-color .15s, border-color .15s, transform .1s; }
.q-btn:active { transform: scale(.98); }
.q-btn .q-icon { width: 20px; height: 20px; }
.q-btn-primary { flex: 1; background: var(--q-accent); color: var(--q-on-accent);
  transition: background-color .3s, box-shadow .4s, transform .1s; }
.q-btn-primary:hover { background: var(--q-accent-hover); }
/* Continue lights up when the screen is complete (white on #1B6FE0 is 4.78:1). */
.q-next.is-ready { background: var(--q-select); box-shadow: 0 6px 18px rgba(27, 111, 224, .30); }
.q-next.is-ready:hover { background: var(--blue-550, #1A6BDB); }
.q-next.is-lit { animation: q-lit .7s ease-out; }
@keyframes q-lit { 0% { box-shadow: 0 0 0 0 rgba(27, 111, 224, .45); } 100% { box-shadow: 0 0 0 12px rgba(27, 111, 224, 0), 0 6px 18px rgba(27, 111, 224, .30); } }
.q-btn-primary:disabled { opacity: .7; cursor: progress; }
.q-btn-secondary { background: var(--q-surface); color: var(--q-deep); border-color: var(--q-border-soft); padding: 0 16px 0 12px; }
.q-btn-secondary:hover { border-color: var(--q-border); }
.q-btn:focus-visible, .q-tool:focus-visible, .q-line:focus-visible, .q-review:focus-visible, .q-file-remove:focus-visible,
.q-app a:focus-visible { outline: 3px solid var(--q-focus); outline-offset: 2px; }
.q-fineprint { margin: 12px 0 0; font-size: .88rem; color: var(--q-text-muted); text-align: center; }

/* ---- failure ---- */
.q-fail { margin-top: 22px; padding: 16px; border-radius: var(--q-radius); background: var(--q-error-soft); }
.q-fail:focus { outline: none; }
.q-fail:focus-visible { outline: 3px solid var(--q-focus); outline-offset: 2px; }
.q-fail-title { margin: 0 0 4px; font-size: 1.05rem; color: var(--q-error); }
.q-fail p { margin: 0 0 10px; }
.q-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.q-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.q-contact .q-icon { width: 20px; height: 20px; }

/* ---- finish ---- */
.q-done { text-align: left; }
.q-done-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 4px 0 16px;
  background: var(--q-accent-soft); color: var(--q-accent); }
.q-done-mark .q-icon { width: 30px; height: 30px; stroke-width: 2.2; stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: q-draw .5s .15s var(--q-ease) forwards; }

.q-done-mark { animation: q-pulse 1.4s var(--q-ease) 1; }
@keyframes q-pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 77, 162, .28); } 100% { box-shadow: 0 0 0 18px rgba(10, 77, 162, 0); } }
.q-next-title { font-family: var(--q-font-heading); font-size: 1.1rem; margin: 22px 0 10px; color: var(--q-text); }
.q-next-steps { list-style: none; margin: 4px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.q-next-steps li { display: flex; gap: 12px; align-items: flex-start; }
.q-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--q-accent-soft); color: var(--q-accent); font-weight: 800; font-size: .92rem; }
.q-finish { width: 100%; }
/* Stage 2 offer, below "what happens next": one clear primary, a quiet way out. */
.q-offer { margin: 4px 0 0; padding: 20px; border-radius: var(--q-radius); background: var(--q-accent-soft); border: 1px solid var(--q-border); }
.q-offer-title { font-family: var(--q-font-heading); font-size: 1.15rem; margin: 0 0 6px; color: var(--q-text); }
.q-offer-text { margin: 0 0 16px; color: var(--q-text); }
.q-offer-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.q-offer-actions .q-btn { flex: none; }
.q-done a.q-skip { align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--q-text-muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.q-done a.q-skip:hover { color: var(--q-text); }

/* ---- Start over dialog ---- */
.q-dialog { border: 0; border-radius: var(--q-radius-card); padding: 24px; max-width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 64px rgba(20, 30, 45, .25); color: var(--q-text); font-family: var(--q-font); }
.q-dialog::backdrop { background: rgba(15, 22, 32, .45); }
.q-dialog h2 { font-family: var(--q-font-heading); font-size: 1.35rem; margin: 0 0 8px; }
.q-dialog p { margin: 0 0 20px; color: var(--q-text-muted); }
.q-dialog-actions { display: flex; flex-direction: column-reverse; gap: 10px; }
.q-dialog .q-btn { width: 100%; }

.q-turnstile:empty { display: none; }
.q-turnstile { margin-top: 16px; }

/* ---- the rest of the page below the form ---- */
.q-more { background: var(--q-surface); }


@media (min-width: 600px) {
  .q-shell { padding: 112px 24px 72px; }
  .q-card { padding: 28px 36px 36px; border: 1px solid var(--q-border-soft); box-shadow: 0 1px 2px rgba(11, 37, 69, .04); }
  .q-lines { grid-template-columns: repeat(3, 1fr); }
  .q-dialog-actions { flex-direction: row-reverse; }
  .q-dialog .q-btn { width: auto; flex: 1; }
  .q-finish { width: auto; }
  .q-offer-actions { flex-direction: row; align-items: center; }
  .q-offer-actions .q-btn { min-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .q-app *, .q-app *::before, .q-app *::after { animation: none !important; transition: none !important; }
  .q-done-mark .q-icon, .q-opt-mark .q-icon { stroke-dashoffset: 0; }
}

@media (forced-colors: active) {
  .q-opt input:checked + .q-opt-box { outline: 3px solid CanvasText; }
  .q-bar-fill { background: Highlight; }
}

/* ---- explainer list below the form ---- */
.q-steps { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 4px; padding: 0; list-style: none; }
.q-steps li { flex: 1 1 220px; background: var(--card, #fff); border: 1px solid var(--line, #D7E1EE);
  border-radius: 14px; padding: 18px 20px; }
.q-steps b { display: block; color: var(--blue-700, #0A4DA2); font-family: var(--font-display, 'Manrope', sans-serif); margin-bottom: 4px; }

/* ---- picker blurbs, sound label, spam-check stub, confetti ---- */
.q-line-blurb { display: block; font-weight: 500; font-size: .85rem; color: var(--q-text-muted); line-height: 1.35; margin-top: 2px; }
.q-stub { margin-top: 16px; padding: 10px 12px; border: 1.5px dashed var(--q-border); border-radius: 10px;
  font-size: .9rem; color: var(--q-text-muted); }
.q-confetti { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: visible; pointer-events: none; z-index: 5; }
.q-confetti i { position: absolute; top: 60px; width: 6px; height: 9px; border-radius: 2px; opacity: 0; will-change: transform, opacity; }
.q-fixed { margin: 14px 0 0; }
.q-legend-solo + .q-field-help { margin-top: 4px; }