/* 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). */

/* .home-picker: the home page's copy of the picker (quote/picker.js), outside any form, reads the same tokens. */
.q-app, .home-picker {
  --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: 6px;          /* buttons and inputs (docs/DESIGN.md) */
  --q-radius-card: 8px;
  --q-shadow: 0 1px 2px rgba(11, 37, 69, .05), 0 12px 32px rgba(11, 37, 69, .07);
  --q-font: var(--font-body, 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --q-font-heading: var(--font-display, 'Source Serif 4', Georgia, 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: 32px 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: .9rem; font-weight: 600;
  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: var(--q-radius); 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-text { display: flex; flex-direction: column; gap: 2px; }
.q-opt-sub { font-weight: 500; font-size: .93rem; line-height: 1.4; color: var(--q-text-muted); }
.q-opt input:checked + .q-opt-box .q-opt-sub { color: var(--q-on-accent); }
.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; }
/* Soft checks (date of birth, full name, licence numbers): one small grey line under the field. The date line always
   keeps its height; the name and licence lines take theirs as soon as a note is due (while the person types), so the
   note appearing after a pause or on leaving the field never moves the Continue button. The licence note is longer
   and wraps on a phone, so that line takes two lines' height there. */
.q-parsed { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 1.45em; margin: 6px 0 0;
  font-size: .92rem; line-height: 1.45; color: var(--q-text-muted); }
.q-parsed--soft { min-height: 0; margin: 0; }
.q-parsed--soft.is-pending { min-height: 1.45em; margin-top: 6px; }
@media (max-width: 599px) { .q-parsed--long.is-pending { min-height: 2.9em; } }
.q-parsed-icon { width: 16px; height: 16px; color: var(--q-success); stroke-width: 2.6; flex-shrink: 0; }
.q-parsed-note { font-weight: 600; color: var(--q-note-text); }
/* "Same as registered owner": the copied number, greyed out. */
.q-app input:disabled { background: var(--q-soft); color: var(--q-text-muted); border-color: var(--q-border-soft); cursor: not-allowed;
  -webkit-text-fill-color: var(--q-text-muted); opacity: 1; }
/* Number with minus and plus buttons (household count). */
.q-stepper { display: flex; align-items: stretch; gap: 8px; max-width: 15rem; }
.q-stepper input { flex: 1; min-width: 0; text-align: center; }
.q-stepper input.is-valid { padding-left: 44px; }
.q-stepper-btn { flex-shrink: 0; width: 54px; min-height: 54px; display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--q-border); border-radius: var(--q-radius); background: var(--q-surface); color: var(--q-deep);
  cursor: pointer; transition: border-color .15s, background-color .15s; }
.q-stepper-btn .q-icon { width: 22px; height: 22px; stroke-width: 2; }
.q-stepper-btn:hover:not(:disabled) { border-color: var(--q-accent); background: var(--q-accent-soft); }
.q-stepper-btn:disabled { cursor: not-allowed; color: var(--q-border); border-color: var(--q-border-soft); }
.q-stepper-btn:focus-visible { outline: 3px solid var(--q-focus); outline-offset: 2px; }

/* ---- 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: var(--q-radius); font: inherit; font-weight: 700; 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 p { margin: 0; font-weight: 600; }

/* ---- 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));
  border: 1px solid var(--q-border-soft); 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); border-top: 1px solid var(--q-border-soft); }


@media (min-width: 600px) {
  .q-shell { padding: 48px 24px 72px; }
  .q-card { padding: 28px 36px 36px; border: 1px solid var(--q-border-soft); }
  .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; }
}

/* ---- 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; }