/* Quantum Growth questionnaire v4: one question per screen, built to match the approved mock (Kong's layout with MBC copy
   and colours). Sizes, colours and timings come from the mock's computed styles at 1280x900 and 390x844 and its
   breakpoints (576, 768, 992, 1140 and 1600 px). Fonts: /css/qg-v4-fonts.css ("QG Inter" weights mirror the mock's
   Inter mapping, so 600 is the bold face; "QG Heading" stands in for the mock's condensed display face). */
:root {
  --qg-blue: #3c9ed3;
  --qg-blue-hover: #5badda;
  --qg-blue-deep: #2b8bbf;
  --qg-cream: #fffdf3;
  --qg-ink: #000;
  --qg-copy: #495057;
  --qg-muted: #595959;
  --qg-field-border: #cbcbcb;
  --qg-focus: #8a8a8a;
  --qg-sans: 'QG Inter', sans-serif;
  --qg-display: 'QG Heading', 'QG Inter', sans-serif;
  --qg-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.qg-locked, html.qg-locked body { overflow: hidden; }
body.qg-body { margin: 0; min-height: 100vh; background: #f9f9f9; color: var(--qg-ink); font-family: var(--qg-sans); font-size: 22px; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (min-width: 992px) { body.qg-body { font-size: 26px; } }
.qg-body [hidden] { display: none !important; }
:where(.qg-body) :where(button, input, select, textarea) { font-family: var(--qg-sans); }
.qg-body img, .qg-body svg { vertical-align: middle; }
.qg-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.qg-nowrap { white-space: nowrap; }

/* Slim header: the book logo centred, Back on the left from screen 1 on */
.qg-header { position: relative; padding: 15px 0; background: #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, .1); }
.qg-header-logo { display: block; width: auto; height: 46px; margin: 0 auto; }
.qg-back { position: absolute; top: 10px; left: 32px; z-index: 2; display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: #333; font: 500 15px/1 var(--qg-sans); cursor: pointer; }
.qg-back::after { content: ''; position: absolute; inset: -7px -4px; }
.qg-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.qg-back:hover:not(:disabled) svg { transform: translateX(-3px); }
.qg-back:focus { outline: none; }
.qg-back:focus-visible { outline: 2px solid var(--qg-focus); outline-offset: 3px; }
.qg-back:disabled { opacity: .5; cursor: default; }

/* Page column: Kong's container widths with the steps spanning the full container. As on the mock, the page ends at
   the bottom edge of the current screen. */
.qg-main { padding: 28px 0 0; }
.qg-shell { width: 100%; margin: 0 auto; }
@media (min-width: 576px) { .qg-shell { max-width: 540px; } }
@media (min-width: 768px) { .qg-shell { max-width: 720px; } }
@media (min-width: 992px) { .qg-shell { max-width: 960px; } }
@media (min-width: 1140px) { .qg-shell { max-width: 1140px; } }
@media (min-width: 1600px) { .qg-shell { max-width: 1366px; } }
.qg-noscript { margin: 0 15px 24px; color: var(--qg-copy); font-size: 18px; text-align: center; }

/* Progress: ten dots joined by a line, filled up to the current screen */
.qg-progress { display: flex; width: calc(100% - 30px); max-width: 600px; margin: 0 auto 28px; padding: 0 0 4px; list-style: none; overflow: hidden; }
.qg-progress li { position: relative; flex: 1 1 0; height: 20px; margin: 0; }
.qg-progress li::before { content: ''; position: absolute; top: 4px; left: 50%; z-index: 1; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #c7c7c7; }
.qg-progress li::after { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 3px; background: #c7c7c7; }
.qg-progress li:first-child::after { display: none; }
.qg-progress li.is-on::before, .qg-progress li.is-on::after { background: var(--qg-blue); }

/* Steps */
.qg-form { margin: 0; }
.qg-step { position: relative; padding: 0 15px; }
@media (min-width: 576px) { .qg-step { padding: 0 8%; } }
@media (min-width: 992px) { .qg-step { padding: 0 15%; } .qg-step.qg-wide { padding: 0 15px; } }
/* Where inert is missing, a screen fading out (marked data-qg-leaving by the script) still takes no clicks or taps */
.qg-step[data-qg-leaving] { pointer-events: none; }

.qg-eyebrow { max-width: 740px; margin: 0 auto 19px; color: var(--qg-copy); font-size: 18px; font-weight: 500; line-height: .8; text-align: center; text-transform: uppercase; }
.qg-flag { position: relative; top: 3px; font-size: 25px; }
@media (min-width: 768px) { .qg-eyebrow { font-size: 22px; } .qg-flag { top: 4px; margin-left: 6px; font-size: 34px; } }
.qg-intro-title { margin: 0 0 30px; color: var(--qg-ink); font-family: var(--qg-display); font-size: 9.98vw; font-weight: 400; line-height: .895; letter-spacing: -.0689em; word-spacing: .146em; text-align: center; text-transform: uppercase; }
@media (min-width: 576px) { .qg-intro-title { font-size: 43.05px; } }
@media (min-width: 768px) { .qg-intro-title { font-size: 56.7px; } }
@media (min-width: 992px) { .qg-intro-title { font-size: 68.25px; } }
@media (min-width: 1140px) { .qg-intro-title { font-size: 77.7px; } }
@media (min-width: 1600px) { .qg-intro-title { font-size: 88.2px; } }
.qg-intro-body { max-width: 740px; margin: 0 auto; color: var(--qg-copy); font-size: 18px; font-weight: 500; line-height: 1.5; text-align: center; }
@media (min-width: 768px) { .qg-intro-body { font-size: 22px; } }

.qg-question { max-width: 100%; margin: 0 auto 28px; color: var(--qg-ink); font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-align: center; text-transform: none; overflow-wrap: anywhere; }
/* The shared Inter files run a hair wider than the mock's on some phone lines; this keeps every heading's line breaks. */
@media (max-width: 767.98px) { .qg-question { letter-spacing: -.0015em; } }
@media (min-width: 768px) { .qg-question { font-size: 36px; } }
.qg-question.has-sub { margin-bottom: 12px; }
.qg-question-480 { max-width: 480px; }
.qg-question-620 { max-width: 620px; }
.qg-question-640 { max-width: 640px; }
.qg-question-720 { max-width: 720px; }
.qg-question-760 { max-width: 760px; }
.qg-intro-title:focus, .qg-question:focus { outline: none; }
.qg-br-md { display: none; }
@media (min-width: 768px) { .qg-br-md { display: inline; } }
.qg-sub { max-width: 740px; margin: 0 auto 28px; color: var(--qg-copy); font-size: 18px; font-weight: 500; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 768px) { .qg-sub { font-size: 22px; } }
.qg-sub-narrow { max-width: 680px; }
.qg-sub-wide { max-width: 760px; }
.qg-sub-plain { margin-bottom: 30px; font-weight: 400; }
.qg-name { color: var(--qg-ink); font-weight: 600; }
.qg-small { display: block; max-width: 600px; margin: 0 auto 28px; color: var(--qg-muted); font-size: 16px; font-weight: 500; line-height: 1.5; text-align: center; }
.qg-small-640 { max-width: 640px; }
.qg-badge { display: table; max-width: 100%; margin: 0 auto 17px; padding: 8px 14px; border-radius: 47px; background: #fff; box-shadow: 1px 2px 3px rgba(0, 0, 0, .08); color: var(--qg-copy); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.qg-badge::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #e53935; vertical-align: 1px; }
@media (min-width: 576px) { .qg-badge { padding: 10px 20px; font-size: 15px; letter-spacing: .14em; } }

/* Buttons: Get Started, Continue, the final submit and the Clean-Up pop-up's button */
.qg-button { position: relative; display: block; width: 100%; max-width: 420px; margin: 20px auto 0; padding: 20px; border: 0; border-radius: 10px; overflow: hidden; background: var(--qg-blue); box-shadow: 1px 8px 30px rgba(0, 0, 0, .03), 1px 4px 10px rgba(0, 0, 0, .05); color: #fff; font-size: 23px; font-weight: 600; line-height: 1; text-align: center; text-transform: none; white-space: normal; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--qg-out), box-shadow .3s var(--qg-out), background-color .3s ease; }
@media (min-width: 768px) { .qg-button { padding: 23.5px 80px; } }
.qg-button::after { content: ''; position: absolute; top: 0; bottom: 0; left: -120px; width: 90px; background: rgba(255, 255, 255, .4); transform: skewX(-20deg); pointer-events: none; }
.qg-button:disabled { background: #c7c7c7; color: #737373; cursor: not-allowed; }
.qg-button:focus { outline: none; }
.qg-button:focus-visible { outline: 2px solid var(--qg-focus); outline-offset: 3px; }
@media (hover: hover) {
  .qg-button:not(:disabled):hover { background-color: var(--qg-blue-hover); box-shadow: 0 14px 28px -10px rgba(43, 139, 191, .6), 0 4px 10px rgba(0, 0, 0, .06); transform: translateY(-3px); }
  .qg-button:not(:disabled):hover::after { animation: qg-shine .8s ease 1 forwards; }
  .qg-button:not(:disabled):hover .qg-arrow { transform: translateX(5px); }
}
@media (hover: hover) and (min-width: 1140px) { .qg-button:not(:disabled):hover::after { animation: qg-shine-wide .9s ease 1 forwards; } }
.qg-button:not(:disabled):active { background-color: var(--qg-blue); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); transform: translateY(1px) scale(.98); transition-duration: .08s; }
.qg-button:not(:disabled):active .qg-arrow { transform: translateX(2px); }
@keyframes qg-shine { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(1000px); } }
@keyframes qg-shine-wide { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(1500px); } }
.qg-start { margin-top: 26px; }
.qg-field .qg-button { max-width: 100%; }

/* The arrow after button labels: our own drawing, nudged out and back in on a loop */
.qg-arrow { display: inline-block; width: 40px; height: 25px; margin-left: 9px; color: #fff; vertical-align: middle; transition: transform .3s var(--qg-out); }
.qg-arrow svg { display: block; width: 40px; height: 25px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.qg-button:not(:disabled) .qg-arrow svg { animation: qg-arrow-loop 1.5s linear infinite; }
.qg-button:disabled .qg-arrow { color: #000; opacity: .5; }
@keyframes qg-arrow-loop {
  0%, 46% { opacity: 1; transform: translateX(0); }
  58% { opacity: 0; transform: translateX(14px); }
  59% { opacity: 0; transform: translateX(-14px); }
  74%, 100% { opacity: 1; transform: translateX(0); }
}

/* Text inputs, selects and text areas */
.qg-field { position: relative; max-width: 520px; margin: 0 auto; }
.qg-field-wide { max-width: 680px; }
.qg-input, .qg-select, .qg-textarea { display: block; width: 100%; margin: 0; border: 1px solid var(--qg-field-border); border-radius: 10px; background: #fff; color: var(--qg-ink); font-size: 22px; font-weight: 400; line-height: 1.5; outline: none; -webkit-appearance: none; appearance: none; }
.qg-input { height: 60px; padding: 0 24px; }
@media (min-width: 768px) { .qg-input { height: 76px; } }
.qg-input::placeholder, .qg-textarea::placeholder { color: #8a8a8a; font-weight: 500; opacity: 1; }
.qg-input:focus, .qg-select:focus, .qg-textarea:focus { box-shadow: 0 0 0 3px #ebebeb; }
.qg-input:autofill, .qg-select:autofill { box-shadow: inset 0 0 0 100px #fff; }
.qg-input:autofill:focus, .qg-select:autofill:focus { box-shadow: inset 0 0 0 100px #fff, 0 0 0 3px #ebebeb; }
/* Focused fields get the ring the buttons and options use (3.3:1 on the page); an autofilled field keeps its white
   cover, as :autofill:focus outranks this */
.qg-input:focus-visible, .qg-select:focus-visible, .qg-textarea:focus-visible { box-shadow: none; outline: 2px solid var(--qg-focus); outline-offset: 3px; }
.qg-select-wrap { position: relative; max-width: 520px; margin: 0 auto; }
.qg-select-wrap::after { content: ''; position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; margin-top: -10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.25 7.75 10 12.5l4.75-4.75' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; pointer-events: none; }
.qg-select { height: 60px; padding: 0 52px 0 24px; font-weight: 500; cursor: pointer; text-overflow: ellipsis; }
@media (min-width: 768px) { .qg-select { height: 76px; } }
.qg-select optgroup { font-weight: 700; }
.qg-textarea { height: 290px; padding: 18px 24px 76px; font-size: 18px; line-height: 1.5; resize: none; }
.qg-textarea::placeholder { font-size: 18px; }
.qg-field-wide .qg-button { margin-top: 24px; }
.qg-heard-field { margin-top: 15px; }
.qg-heard-field .qg-reveal { margin-bottom: 0; }
.qg-contact .qg-input { margin-bottom: 10px; }

/* Dictation: a pill inside the bottom-left of the text area, shown only when the browser can transcribe */
.qg-dictation-box { position: relative; }
.qg-dictation { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; width: auto; max-width: calc(100% - 32px); min-height: 44px; margin: 0; padding: 4px 16px 4px 4px; border: 1px solid #e6e6e6; border-radius: 22px; overflow: hidden; background: #fff; color: #333; font-size: 15px; font-weight: 500; line-height: 1; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
@media (min-width: 768px) { .qg-dictation { height: 44px; padding: 0 16px 0 4px; border-radius: 100px; } }
.qg-dictation-mic { position: relative; display: flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--qg-blue); color: #000; }
.qg-dictation-mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qg-dictation-label { min-width: 0; overflow: hidden; line-height: 1.3; white-space: normal; }
@media (min-width: 768px) { .qg-dictation-label { line-height: 1; white-space: nowrap; text-overflow: ellipsis; } }
.qg-dictation-timer { color: #6b6b6b; font-variant-numeric: tabular-nums; }
.qg-dictation-timer:empty { display: none; }
@media (hover: hover) { .qg-dictation:hover { border-color: var(--qg-blue); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } }
.qg-dictation:focus { outline: none; }
.qg-dictation:focus-visible { outline: 2px solid var(--qg-focus); outline-offset: 3px; }
.qg-dictation.is-listening { border-color: var(--qg-blue); }
.qg-dictation.is-listening .qg-dictation-mic { animation: qg-mic-pulse 1.4s ease-out infinite; }
.qg-dictation-note { margin: 0; padding: 0 16px; color: #8b2d24; font-size: 16px; font-weight: 500; line-height: 1.5; text-align: left; }
.qg-dictation-note:not(:empty) { margin-top: 12px; }
@keyframes qg-mic-pulse { from { box-shadow: 0 0 0 0 rgba(60, 158, 211, .7); } to { box-shadow: 0 0 0 10px rgba(60, 158, 211, 0); } }

/* Choices: the native radio or checkbox stays focusable but out of sight; the label is the visible control */
.qg-options { position: relative; margin: 0 auto; }
.qg-option { position: relative; display: block; min-width: 0; }
.qg-radio { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.qg-radio:focus-visible + label { outline: 2px solid var(--qg-focus); outline-offset: 3px; }

/* Screen 3: two wide cards with an icon tile, title, description and chevron */
.qg-cards { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qg-cards .qg-option { width: 100%; max-width: 560px; }
.qg-card { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 96px; margin: 0; padding: 18px 24px 18px 18px; border: 2px solid #fff; border-radius: 10px; background: #fff; box-shadow: 1px 2px 3px rgba(0, 0, 0, .08); color: var(--qg-ink); font-size: 20px; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.qg-card-icon { display: flex; flex: 0 0 56px; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 10px; background: #f3f4f5; color: #000; transition: background-color .2s ease; }
.qg-card-icon svg { width: 26px; height: 26px; }
.qg-card-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.qg-card-title { font-size: 21px; font-weight: 600; line-height: 1.3; }
.qg-card-desc { color: #6b6b6b; font-size: 16px; font-weight: 500; line-height: 1.4; }
.qg-card-chevron { flex: 0 0 20px; width: 20px; height: 20px; color: #b5b5b5; fill: none; stroke: currentColor; stroke-width: 1.67; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease, color .2s ease; }
@media (hover: hover) {
  .qg-card:hover { border-color: var(--qg-blue); background: var(--qg-cream); box-shadow: 1px 8px 16px rgba(0, 0, 0, .08); transform: translateY(-2px); }
  .qg-card:hover .qg-card-icon { background: var(--qg-blue); }
  .qg-card:hover .qg-card-chevron { color: #000; transform: translateX(3px); }
}
.qg-radio:checked + .qg-card { border-color: var(--qg-blue); background: var(--qg-cream); }
.qg-radio:checked + .qg-card .qg-card-icon { background: var(--qg-blue); }
.qg-radio:checked + .qg-card .qg-card-chevron { color: #000; transform: translateX(3px); }

/* Screen 4: multi-select chips with brand marks and a tick */
.qg-chips { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1022px; }
@media (min-width: 768px) { .qg-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .qg-chips { grid-template-columns: repeat(3, 1fr); } }
.qg-chip { display: flex; align-items: center; gap: 14px; width: 100%; height: 70px; margin: 0; padding: 0 20px 0 14px; border: 2px solid #dcdcdc; border-radius: 100px; background: #fff; color: #4a4a4a; font-size: 19px; font-weight: 500; line-height: 1.5; text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease; }
.qg-chip-icons { display: flex; flex: 0 0 auto; }
.qg-chip-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #dcdcdc; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; }
.qg-chip-icon + .qg-chip-icon { margin-left: -12px; }
.qg-chip-icon img { width: 26px; height: 26px; opacity: .75; }
.qg-chip-label { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.qg-chip-check { display: none; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #000; }
.qg-chip-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .qg-chip:hover { border-color: var(--qg-blue); background: var(--qg-cream); box-shadow: 1px 6px 12px rgba(0, 0, 0, .06); transform: translateY(-2px); } }
.qg-radio:checked + .qg-chip { border-color: var(--qg-blue); background: var(--qg-blue); box-shadow: 1px 2px 3px rgba(0, 0, 0, .08); color: #1f1f1f; }
.qg-radio:checked + .qg-chip .qg-chip-icon { border-color: #e6e6e6; }
.qg-radio:checked + .qg-chip .qg-chip-icon img { opacity: 1; }
.qg-radio:checked + .qg-chip .qg-chip-check { display: flex; animation: qg-pop-in .2s ease-out; }
.qg-chips-next { max-width: 520px; }
.qg-chips-next .qg-button { margin-top: 44px; }
@keyframes qg-pop-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }

/* Pills: budget, revenue, timing and how far behind (two to a row from 768 px, an odd last pill centred) */
.qg-pills { display: grid; grid-template-columns: 1fr; gap: 13px 17px; max-width: 799px; }
@media (min-width: 768px) {
  .qg-pills { grid-template-columns: repeat(2, 1fr); }
  .qg-pills .qg-option:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: max-content; min-width: calc(50% - 8.5px); max-width: 100%; }
}
.qg-pill { position: relative; display: block; min-height: 62px; margin: 0; padding: 19px 16px 19px 60px; border-radius: 100px; background: #fff; box-shadow: 1px 2px 3px rgba(0, 0, 0, .08); color: var(--qg-muted); font-size: 20px; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.qg-pill::before { content: ''; position: absolute; top: 50%; left: 16px; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #eaeced center / 14px 14px no-repeat; }
.qg-radio:checked + .qg-pill::before { background-color: var(--qg-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4 5.6 10.3 11.4 3.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (hover: hover) {
  .qg-pill:hover { background-color: var(--qg-cream); box-shadow: 1px 6px 12px rgba(0, 0, 0, .06); transform: translateY(-2px); }
  .qg-pill:hover::before { background-color: var(--qg-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4 5.6 10.3 11.4 3.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: .5; }
  .qg-radio:checked + .qg-pill:hover::before { opacity: 1; }
}

/* Screen 14: the mock's plain list pills (a floated circle, regular weight, 49% columns with space around) */
.qg-plain-pills { display: flex; flex-wrap: wrap; justify-content: space-around; }
.qg-plain-pills .qg-option { width: 100%; }
@media (min-width: 768px) { .qg-plain-pills .qg-option { width: 49%; } }
.qg-plain-pill { display: block; width: 100%; max-width: 540px; margin: 0 0 10px; padding: 10px; border-radius: 100px; background: #fff; box-shadow: 1px 2px 6px rgba(0, 0, 0, .08); color: var(--qg-muted); font-size: 20px; font-weight: 400; line-height: 30px; text-align: left; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.qg-plain-pill::before { content: ''; float: left; width: 30px; height: 30px; margin-right: 14px; border-radius: 50%; background: #eaeced center / 14px 14px no-repeat; }
.qg-radio:checked + .qg-plain-pill::before { background-color: var(--qg-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4 5.6 10.3 11.4 3.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (hover: hover) {
  .qg-plain-pill:hover { background-color: var(--qg-cream); color: #000; }
  .qg-plain-pill:hover::before { background-color: var(--qg-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4 5.6 10.3 11.4 3.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: .5; }
  .qg-radio:checked + .qg-plain-pill:hover::before { opacity: 1; }
}

/* Screen 13: two tall offer cards */
.qg-offers { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 527px; padding-top: 4px; }
@media (min-width: 992px) { .qg-offers { grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 1086px; } }
.qg-offers .qg-option { height: 100%; }
.qg-offer { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; margin: 0; padding: 0 20px; overflow: hidden; border: 1px solid #e6e6e6; border-radius: 22px; background: #fff; box-shadow: 1px 2px 6px rgba(0, 0, 0, .08); color: #555; font-size: 20px; line-height: 1.5; text-align: center; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
@media (min-width: 576px) { .qg-offer { padding: 0 32px; } }
@media (min-width: 992px) { .qg-offer { min-height: 623px; } }
@media (min-width: 1140px) { .qg-offer { padding: 0 44px; } }
.qg-offer-eyebrow { display: block; padding-top: 100px; color: var(--qg-blue-deep); font-size: 16px; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; }
@media (min-width: 576px) { .qg-offer-eyebrow { font-size: 18.6px; } }
@media (min-width: 992px) { .qg-offer-eyebrow { padding-top: 114px; } }
.qg-offer-title { display: block; padding-top: 8px; color: #000; font-family: var(--qg-display); font-size: 63px; font-weight: 400; line-height: .952; letter-spacing: -.0515em; text-transform: uppercase; }
/* Under 390 px the title steps down (each narrower rule overrides the one above, so no width falls between them) to the
   largest whole size at which BOOKKEEPING (QG Heading, measured) fits the card content at the step's narrowest width:
   54 px from 375 px (303 px of content), 51 px from 360 (288), 44 px from 320 (248). The em letter-spacing scales with
   it; below 320 px the word breaks rather than clip. */
@media (max-width: 389.98px) { .qg-offer-title { font-size: 54px; } }
@media (max-width: 374.98px) { .qg-offer-title { font-size: 51px; } }
@media (max-width: 359.98px) { .qg-offer-title { font-size: 44px; overflow-wrap: anywhere; } }
@media (min-width: 576px) { .qg-offer-title { font-size: 75.6px; } }
@media (min-width: 1140px) { .qg-offer-title { font-size: 89.25px; } }
.qg-offer-desc { display: block; max-width: 437px; padding: 22px 0 28px; color: #555; font-size: 16.8px; line-height: 1.6; text-align: left; }
.qg-offer-cta { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 437px; height: 64px; margin-top: auto; border-radius: 6px; background: var(--qg-blue); color: #fff; font-size: 21px; font-weight: 600; line-height: 1.5; transition: filter .2s ease; }
.qg-offer-rating { display: block; padding: 16px 0 28px; color: #555; font-size: 15px; line-height: 1.5; }
@media (min-width: 576px) { .qg-offer-rating { font-size: 17.1px; } }
@media (min-width: 992px) { .qg-offer-rating { padding-bottom: 34px; } }
.qg-stars { position: relative; top: 2px; display: inline-flex; width: 85px; margin-right: 5px; vertical-align: baseline; }
.qg-stars svg { display: block; width: 100%; height: auto; fill: #fec600; stroke: #fec600; stroke-width: .9; stroke-linejoin: round; }
@media (min-width: 576px) { .qg-stars { width: 115px; } }
@media (hover: hover) {
  .qg-offer:hover { border-color: var(--qg-blue); box-shadow: 0 0 0 1px var(--qg-blue), 1px 8px 18px rgba(0, 0, 0, .08); transform: translateY(-3px); }
  .qg-offer:hover .qg-offer-cta { filter: brightness(1.03); }
}
.qg-radio:checked + .qg-offer { border-color: var(--qg-blue); box-shadow: 0 0 0 1px var(--qg-blue), 1px 2px 6px rgba(0, 0, 0, .08); }
.qg-radio:focus-visible + .qg-offer { outline-offset: 3px; }

/* Screen 15: ten round pills shading from grey to blue */
.qg-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 400px; }
@media (min-width: 768px) { .qg-scale { grid-template-columns: repeat(10, minmax(0, 72px)); justify-content: center; max-width: none; } }
.qg-scale-pill { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin: 0; padding: 0; border-radius: 100px; background: #e6e6e6; box-shadow: 1px 2px 3px rgba(0, 0, 0, .08); color: var(--qg-muted); font-size: 20px; font-weight: 600; line-height: 1.5; cursor: pointer; transition: box-shadow .2s ease, transform .2s ease, filter .2s ease, color .2s ease; }
.qg-scale-pill[data-n="2"] { background: #c6e3f2; }
.qg-scale-pill[data-n="3"] { background: #b6dbee; }
.qg-scale-pill[data-n="4"] { background: #a6d3eb; }
.qg-scale-pill[data-n="5"] { background: #96cbe7; }
.qg-scale-pill[data-n="6"] { background: #85c2e3; color: #000; }
.qg-scale-pill[data-n="7"] { background: #74bae0; color: #000; }
.qg-scale-pill[data-n="8"] { background: #65b2dc; color: #000; }
.qg-scale-pill[data-n="9"], .qg-scale-pill[data-n="10"] { background: var(--qg-blue); color: #000; }
@media (hover: hover) { .qg-scale-pill:hover { box-shadow: 1px 6px 12px rgba(0, 0, 0, .1); color: #000; filter: brightness(.97); transform: translateY(-3px); } }
.qg-radio:checked + .qg-scale-pill { box-shadow: 0 0 0 2px #000; }

/* Screen 17: two emoji cards */
.qg-emoji-cards { display: flex; justify-content: center; gap: 16px; }
.qg-emoji-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 135px; height: 160px; margin: 0; padding: 24px 30px; border-radius: 10px; background: #fff; box-shadow: 1px 10px 15px rgba(0, 0, 0, .02), 1px 2px 3px rgba(0, 0, 0, .06); color: var(--qg-muted); font-size: 20px; font-weight: 500; line-height: 1.5; text-align: center; cursor: pointer; transition: all .2s ease-out; }
.qg-emoji { display: block; font-size: 60px; font-style: normal; line-height: 1.5; }
@media (hover: hover) { .qg-emoji-card:hover { background: var(--qg-cream); transform: scale(1.01); } }
.qg-radio:checked + .qg-emoji-card { color: #000; }

/* Screen 18: status line and the reload button that replaces the submit after a form update */
.qg-status { margin: 4px 0 0; color: #8b2d24; font-size: 16px; font-weight: 500; line-height: 1.5; text-align: center; }
.qg-status:focus { outline: none; }
.qg-submit { max-width: 520px; margin-top: 30px; white-space: nowrap; }
@media (max-width: 767.98px) { .qg-submit { padding-right: 12px; padding-left: 12px; font-size: 20px; white-space: normal; } .qg-submit .qg-arrow { width: 32px; } .qg-submit .qg-arrow svg { width: 32px; height: 20px; } }
@media (min-width: 768px) { .qg-submit { padding-right: 20px; padding-left: 20px; } }

/* Pop-ups (Clean-Up and exit intent): one controller opens and closes both and owns the page scroll lock */
.qg-modal { position: fixed; inset: 0; z-index: 2000; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.qg-modal-panel { position: relative; width: 90%; margin: 0 auto; text-align: center; }
.qg-modal-panel:focus { outline: none; }
.qg-modal-close { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #868686; cursor: pointer; }
.qg-modal-close svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; }
.qg-modal-close:focus { outline: none; }
.qg-modal-close:focus-visible { outline: 2px solid var(--qg-focus); outline-offset: 0; }

.qg-cleanup { padding-top: 100px; background: rgba(0, 0, 0, .2); }
.qg-cleanup-panel { max-width: 400px; padding: 25px; border-radius: 8px; background: #f8f9fa; color: #000; font-size: 18px; line-height: 1.5; }
@media (min-width: 768px) { .qg-cleanup-panel { max-width: 640px; padding: 50px; font-size: 20px; } }
.qg-cleanup .qg-modal-close { top: 3px; right: 0; }
.qg-cleanup .qg-modal-close svg { width: 14px; height: 14px; stroke-width: 1.6; }
@media (min-width: 768px) { .qg-cleanup .qg-modal-close { top: 15.5px; right: 14.5px; } .qg-cleanup .qg-modal-close svg { width: 19px; height: 19px; } }
.qg-cleanup-title { margin: 0 0 20px; color: #000; font-family: var(--qg-display); font-size: 31.5px; font-weight: 400; line-height: .895; letter-spacing: -.0616em; word-spacing: .072em; text-transform: uppercase; }
@media (min-width: 576px) { .qg-cleanup-title { font-size: 42px; } }
@media (min-width: 768px) { .qg-cleanup-title { font-size: 52.5px; } }
.qg-cleanup-panel p { margin: 0 0 26px; }
.qg-cleanup-keep { max-width: 430px; margin-top: 20px; line-height: 1; }

.qg-exit { padding: 40px 0; background: rgba(40, 39, 40, .8); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.qg-exit-panel { max-width: 900px; padding: 25px; border-radius: 8px; background: #d1d1d1; color: #000; font-size: 18px; line-height: 1.5; }
@media (min-width: 768px) { .qg-exit-panel { padding: 35px 30px 45px; font-size: 20px; } }
@media (min-width: 1600px) { .qg-exit-panel { max-width: 1137px; } }
.qg-exit .qg-modal-close { top: 0; right: 7.5px; color: #9e9c9c; }
.qg-exit .qg-modal-close svg { width: 15px; height: 15px; stroke-width: 1.5; }
@media (min-width: 768px) { .qg-exit .qg-modal-close { top: 11.5px; right: 12.5px; } }
/* A darker focus ring on the grey panel (4.6:1); :where() lets the forced-colours Highlight outline still win */
:where(.qg-exit) .qg-modal-close:focus-visible { outline-color: var(--qg-muted); }
.qg-exit-bar { position: relative; width: 90%; max-width: 560px; height: 21px; margin: 0 auto 30px; overflow: hidden; border: 2px solid #a09b9b; border-radius: 100px; background: #9f9a9a; box-shadow: 3px 3px 5px rgba(255, 255, 255, .1); }
@media (min-width: 768px) { .qg-exit-bar { height: 30px; border-width: 4px 4px 4px 5px; } }
.qg-exit-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: -30px; padding-right: 45%; border-radius: 10px 0 0 100px; background: var(--qg-blue); background-clip: content-box; transform: skewX(-40deg); }
.qg-exit-title { max-width: 100%; margin: 0 0 20px; color: #000; font-family: var(--qg-display); font-size: 52.5px; font-weight: 400; line-height: .952; letter-spacing: -.081em; word-spacing: .21em; text-transform: uppercase; }
@media (min-width: 768px) { .qg-exit-title { font-size: 73.5px; } }
@media (min-width: 1600px) { .qg-exit-title { font-size: 105px; } }
.qg-exit-body { max-width: 650px; margin: 0 auto; color: #3b3b3b; line-height: 1.333; }
@media (min-width: 1600px) { .qg-exit-body { max-width: 850px; font-size: 27px; } }
.qg-exit-gif { display: block; width: 100%; max-width: 580px; height: auto; margin: 20px auto; }
@media (min-width: 992px) { .qg-exit-gif { margin: 30px auto; } }
@media (min-width: 1600px) { .qg-exit-gif { max-width: 760px; margin: 30px auto 40px; } }
.qg-exit-keep { position: relative; display: block; width: 100%; max-width: 620px; margin: 0 auto 15px; padding: 22px; overflow: hidden; border: 0; border-radius: 10px; background: var(--qg-blue); box-shadow: 1px 8px 30px rgba(0, 0, 0, .03), 1px 4px 10px rgba(0, 0, 0, .05); color: #fff; font-family: var(--qg-display); font-size: 29.4px; font-weight: 400; line-height: .952; letter-spacing: -.0563em; word-spacing: .13em; text-shadow: 1px 1px 3px rgba(0, 0, 0, .1); text-transform: uppercase; cursor: pointer; transition: transform .3s var(--qg-out), box-shadow .3s var(--qg-out), background-color .3s ease; }
.qg-exit-keep::after { content: ''; position: absolute; top: 0; bottom: 0; left: -120px; width: 90px; background: rgba(255, 255, 255, .4); transform: skewX(-20deg); pointer-events: none; }
@media (min-width: 768px) { .qg-exit-keep { font-size: 35.7px; } }
@media (min-width: 992px) { .qg-exit-keep { max-width: 780px; } }
@media (min-width: 1140px) { .qg-exit-keep { font-size: 47.25px; } }
@media (min-width: 1600px) { .qg-exit-keep { max-width: 910px; margin-bottom: 20px; font-size: 55.65px; } }
@media (hover: hover) { .qg-exit-keep:hover::after { animation: qg-shine .8s ease 1 forwards; } }
.qg-exit-keep:focus { outline: none; }
.qg-exit-keep:focus-visible { outline: 2px solid var(--qg-focus); outline-offset: 3px; }
.qg-exit-small { max-width: 100%; margin: 0; color: #3b3b3b; font-size: 13px; line-height: 1.333; }
@media (min-width: 992px) { .qg-exit-small { font-size: 15px; } }
.qg-exit-small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.qg-exit-small a:focus-visible { outline: 2px solid var(--qg-focus); outline-offset: 2px; }

/* Loader: the MBC book mark fills with colour from the bottom while the checklist ticks off */
.qg-loader { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 50px 15px; overflow-y: auto; background: #fff; }
.qg-loader-content { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px; text-align: center; }
.qg-loader-mark { position: relative; width: 200px; height: 110px; opacity: 0; transform: translateY(16px) scale(.94); }
.qg-loader-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qg-loader-mark::after { content: ''; position: absolute; bottom: -14px; left: 50%; width: 140px; height: 10px; margin-left: -70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 158, 211, .35), rgba(60, 158, 211, 0)); opacity: 0; transition: opacity .5s ease; }
.qg-loader-level { transform: translateY(calc(270px - 282px * var(--qg-p, 0))); transition: transform .25s linear; }
.qg-loader-wave { animation: qg-wave 1.5s linear infinite; }
@keyframes qg-wave { to { transform: translateX(-60px); } }
.qg-loader-pct { margin: 32px 0 0; color: #000; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qg-loader-steps { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 32px 0 0; padding: 0; list-style: none; text-align: left; }
.qg-loader-steps li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; color: #b3b3b3; font-size: 16px; font-weight: 500; line-height: 1.4; transition: color .3s ease; }
.qg-loader-steps li.is-done, .qg-loader-steps li.is-on { color: #000; }
.qg-loader-dot { display: flex; flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid #e2e2e2; border-radius: 50%; color: #000; transition: background-color .3s ease, border-color .3s ease; }
.qg-loader-dot svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s ease; }
.qg-loader-steps li.is-on .qg-loader-dot { border-color: transparent var(--qg-blue) var(--qg-blue); animation: qg-spin .8s linear infinite; }
.qg-loader-steps li.is-done .qg-loader-dot { border-color: var(--qg-blue); background: var(--qg-blue); animation: none; }
.qg-loader-steps li.is-done .qg-loader-dot svg { opacity: 1; }
.qg-loader-done { margin: 34px 0 0; color: #000; font-size: 18px; font-weight: 600; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.qg-loader-pct, .qg-loader-steps { opacity: 0; }
.qg-loader.is-active .qg-loader-mark { animation: qg-loader-in .9s cubic-bezier(.2, .9, .25, 1) .1s forwards; }
.qg-loader.is-active .qg-loader-pct, .qg-loader.is-active .qg-loader-steps { animation: qg-loader-in .6s ease 1s forwards; }
.qg-loader.is-complete .qg-loader-wave { opacity: 0; transition: opacity .4s ease; }
.qg-loader.is-complete .qg-loader-mark { opacity: 1; transform: none; animation: qg-loader-pop .6s cubic-bezier(.2, .9, .25, 1.3) forwards; }
.qg-loader.is-complete .qg-loader-mark::after { opacity: 1; }
.qg-loader.is-complete .qg-loader-done { opacity: 1; transform: none; }
@keyframes qg-loader-in { to { opacity: 1; transform: none; } }
@keyframes qg-loader-pop { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes qg-spin { to { transform: rotate(1turn); } }

/* Reduced motion: no slide, shine, arrow loop or hover lift; the loader keeps its percentage and checklist but drops
   the wave and the pop */
@media (prefers-reduced-motion: reduce) {
  .qg-body *, .qg-body *::before, .qg-body *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .qg-button::after, .qg-exit-keep::after, .qg-arrow svg, .qg-dictation.is-listening .qg-dictation-mic { animation: none !important; }
  .qg-button:not(:disabled):hover, .qg-button:not(:disabled):active, .qg-card:hover, .qg-chip:hover, .qg-pill:hover, .qg-plain-pill:hover, .qg-offer:hover, .qg-scale-pill:hover, .qg-emoji-card:hover { transform: none !important; }
  .qg-button .qg-arrow, .qg-back svg { transform: none !important; }
  .qg-dictation.is-listening .qg-dictation-mic { box-shadow: 0 0 0 3px rgba(60, 158, 211, .5); }
  .qg-loader-wave, .qg-loader-steps li.is-on .qg-loader-dot { animation: none !important; }
  .qg-loader.is-active .qg-loader-mark, .qg-loader.is-active .qg-loader-pct, .qg-loader.is-active .qg-loader-steps { animation: none !important; opacity: 1; transform: none; }
  .qg-loader.is-complete .qg-loader-mark { animation: none !important; }
}

/* Forced colours (Windows High Contrast) strip colour and shadow. Every checked option gets an inset Highlight ring on
   its ::after (nothing shifts and the focus outline stays separate), the pill circles and chip ticks use system
   colours, done progress dots fill with a thick border, the loader's ticks stay visible, and text fields, the select,
   Back and the pop-up close buttons get a Highlight focus outline. */
@media (forced-colors: active) {
  .qg-radio:checked + label::after { content: ''; position: absolute; inset: 4px; border: 3px solid Highlight; border-radius: inherit; pointer-events: none; }
  .qg-card, .qg-chip, .qg-pill, .qg-plain-pill, .qg-offer, .qg-scale-pill, .qg-emoji-card { position: relative; border: 1px solid CanvasText; }
  .qg-pill::before, .qg-plain-pill::before { box-sizing: border-box; border: 2px solid CanvasText; }
  .qg-radio:checked + .qg-pill::before, .qg-radio:checked + .qg-plain-pill::before { background: Highlight; }
  .qg-chip-check svg, .qg-loader-dot svg { stroke: CanvasText; }
  .qg-progress li::before { box-sizing: border-box; border: 2px solid CanvasText; }
  .qg-progress li.is-on::before { border-width: 8px; background: CanvasText; }
  .qg-progress li::after, .qg-progress li.is-on::after { background: CanvasText; }
  .qg-exit-bar { outline: 2px solid CanvasText; }
  .qg-exit-fill { background: Highlight; }
  .qg-loader-steps li.is-done .qg-loader-dot { border-color: Highlight; }
  .qg-input:focus-visible, .qg-select:focus-visible, .qg-textarea:focus-visible, .qg-back:focus-visible, .qg-modal-close:focus-visible, .qg-button:focus-visible, .qg-dictation:focus-visible, .qg-exit-keep:focus-visible, .qg-radio:focus-visible + label { outline: 3px solid Highlight; outline-offset: 2px; }
}