/* templates/assets/pages/quiz.css
 * Page layer for body.et-p-quiz: the quiz (/<slug>/quiz/) and its Results page (/<slug>/quiz/results/), D476.
 * Linked after site.css on both pages and NOT combined with sales.css, so the few sales-page rules the quiz
 * shares (header, VTurb box) are carried over here, on the same --mf-* tokens, to keep the look of the sales page.
 */

/* --- header: the sales page's sticky blurred bar ------------------------------------------------------------- */
.fp-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--mf-canvas) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--mf-limestone); }
.fp-head .site-head { padding: 14px 0; }
.fp-head .site-head > a { flex: 0 1 262px; min-width: 0; display: block; }
.fp-head .site-head img { width: 100%; height: auto; max-width: 262px; }
@media (max-width: 760px) { .site-foot { padding-bottom: 80px; } }

/* --- page ----------------------------------------------------------------------------------------------------- */
.qz-main { background: var(--mf-g-morning); padding: 28px 0 72px; min-height: calc(100vh - 140px); }
.qz-col { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.qz-screen[hidden] { display: none !important; }
.qz-screen { animation: qz-in .28s ease both; }
@keyframes qz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* progress */
.qz-bar { margin: 0 0 22px; }
.qz-bar-row { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 10px; }
.qz-back { display: inline-flex; align-items: center; gap: 4px; flex: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mf-forest); background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-pill); padding: 7px 14px 7px 9px; cursor: pointer; }
.qz-back:hover { border-color: var(--mf-forest); }
.qz-back:focus-visible, .qz-opt:focus-visible, .qz-link:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.qz-step { flex: 1; text-align: right; font-size: 14px; font-weight: 500; color: var(--mf-slate); }
.qz-bar:has(.qz-back[hidden]) .qz-step { text-align: left; }
.qz-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--mf-limestone) 80%, transparent); overflow: hidden; }
.qz-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mf-g-summit); transition: width .4s ease; }

/* intro (first screen only) */
.qz-intro { margin: 0 0 26px; display: flex; flex-direction: column; align-items: flex-start; }
.qz-h1 { margin: 14px 0 14px; font-size: 36px; line-height: 1.1; max-width: 22ch; }
.qz-sub { font-size: 18px; line-height: 1.55; color: var(--mf-slate); max-width: 34em; margin: 0 0 18px; text-wrap: pretty; }
.qz-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qz-trust li { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border-radius: var(--mf-radius-pill); background: var(--mf-surface); border: 1px solid var(--mf-limestone); font-size: 13.5px; font-weight: 600; color: var(--mf-forest); }
.qz-trust li svg { color: var(--mf-pine); flex: none; }
.qz-trust-logo img { height: 20px; width: auto; max-width: 130px; object-fit: contain; }

/* the panel every screen sits in */
.qz-panel { background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: var(--mf-radius-card); box-shadow: var(--mf-shadow-card); padding: 30px; }
.qz-q { font-size: 26px; line-height: 1.15; font-weight: 600; margin: 0 0 8px; outline: none; }
.qz-help { font-size: 15.5px; color: var(--mf-slate); margin: 0 0 20px; line-height: 1.5; }
.qz-help-lg { font-size: 17px; margin-bottom: 22px; }
.qz-q + .qz-options, .qz-q + .qz-field { margin-top: 18px; }

/* options */
.qz-options { display: grid; gap: 10px; }
.qz-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; padding: 14px 18px; text-align: left; font: inherit; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--mf-ink); background: var(--mf-canvas); border: 1px solid var(--mf-limestone); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.qz-opt:hover { border-color: var(--mf-pine); }
.qz-opt-check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--mf-line); background: var(--mf-surface); color: transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.qz-opt[aria-pressed="true"] { border-color: var(--mf-pine); background: var(--mf-shallows); color: var(--mf-forest); font-weight: 600; box-shadow: 0 0 0 1px var(--mf-pine) inset; }
.qz-opt[aria-pressed="true"] .qz-opt-check { background: var(--mf-pine); border-color: var(--mf-pine); color: var(--mf-canvas); }
[data-kind="multi"] .qz-opt-check { border-radius: 7px; }

.qz-other { margin-top: 12px; display: grid; gap: 12px; }
.qz-go { margin-top: 18px; }
.qz-go[disabled] { opacity: 1; filter: grayscale(.7) brightness(1.55); cursor: not-allowed; transform: none; box-shadow: none; } /* opaque, so a sticky disabled button never shows the options through it */
.qz-other .qz-go { margin-top: 0; }
.btn-block.qz-go { display: flex; }

/* text inputs */
.qz-input, .qz-textarea { width: 100%; font: inherit; font-size: 17px; color: var(--mf-ink); background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 12px; padding: 14px 16px; }
.qz-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.qz-input::placeholder, .qz-textarea::placeholder { color: color-mix(in srgb, var(--mf-slate) 75%, transparent); }
.qz-input:focus, .qz-textarea:focus { outline: none; border-color: var(--mf-pine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-sky-light) 80%, transparent); }
.qz-label { display: block; font-size: 14.5px; font-weight: 600; color: var(--mf-forest); margin: 16px 0 6px; }
.qz-label:first-child { margin-top: 0; }
.qz-form .qz-go { margin-top: 22px; }
.qz-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; color: #8A2A1E; background: #FBEAE6; border: 1px solid #F0C9C0; }
.qz-privacy { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--mf-slate); }
.qz-restart { margin: 18px 0 0; text-align: center; }
.qz-link { font: inherit; font-size: 14px; color: var(--mf-slate); background: none; border: 0; padding: 4px; text-decoration: underline; cursor: pointer; }
.qz-link:hover { color: var(--mf-forest); }

/* card screens */
.qz-cardscreen { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.qz-cardscreen .eyebrow { margin: 0 0 10px; }
.qz-card-h { font-size: 28px; margin-bottom: 14px; }
.qz-card-body { font-size: 17.5px; line-height: 1.6; color: var(--mf-slate); margin: 0 0 22px; text-wrap: pretty; }
.qz-portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mf-limestone); background: var(--mf-surface); margin: 0 0 20px; box-shadow: var(--mf-shadow-card); }
.qz-card-logo { height: 26px; width: auto; max-width: 160px; object-fit: contain; margin: 0 0 4px; opacity: .9; }
.qz-cardscreen .qz-go { margin-top: 20px; }

/* loading */
.qz-loading .qz-q { margin-bottom: 22px; }
.qz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.qz-lstep { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.qz-lstep.is-on { opacity: 1; transform: none; }
.qz-lstep-t { font-size: 16.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.qz-lstep-t { grid-column: 1; grid-row: 1; }
.qz-lstep-ok { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mf-limestone); color: transparent; transition: background-color .2s ease, color .2s ease; }
.qz-lstep.is-done .qz-lstep-ok { background: var(--mf-pine); color: var(--mf-canvas); }
.qz-lstep-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 999px; background: var(--mf-shallows); overflow: hidden; }
.qz-lstep-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mf-g-summit); }
.qz-done { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font-family: var(--mf-font-display); font-size: 22px; font-weight: 600; color: var(--mf-forest); }
.qz-done-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--mf-pine); color: var(--mf-canvas); }
.qz-retry { margin-top: 16px; }

/* --- Results page ---------------------------------------------------------------------------------------------- */
.qr-col { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.qr-wait { display: grid; place-items: center; min-height: 40vh; }
.qr-spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--mf-shallows); border-top-color: var(--mf-pine); animation: qr-spin .8s linear infinite; }
@keyframes qr-spin { to { transform: rotate(360deg); } }
.qr-missing { text-align: center; display: grid; gap: 22px; justify-items: center; max-width: 560px; margin: 8vh auto 0; }
.qr-missing-t { font-size: 20px; line-height: 1.4; outline: none; }
.qr-content { display: grid; gap: 22px; }
.qr-head { display: flex; flex-direction: column; align-items: flex-start; }
.qr-h1 { margin: 12px 0 14px; outline: none; max-width: 20ch; }
.qr-badge { margin: 0; }
/* D535: the agent layout of the Results page. */
.qr-sub { margin: 0; font-size: 19px; line-height: 1.5; color: var(--mf-slate); max-width: 40ch; }
.qr-sec-h { font-size: 24px; line-height: 1.2; margin: 0 0 18px; }
.qr-blist { margin: 0; }
.qr-blist li { font-size: 17px; line-height: 1.5; }
.qr-alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qr-agent { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--mf-canvas); border: 1px solid var(--mf-limestone); }
.qr-agent-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mf-shallows); color: var(--mf-forest); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.qr-agent-t { display: grid; gap: 3px; padding-top: 4px; }
.qr-agent-t b { font-family: var(--mf-font-display); font-size: 17.5px; font-weight: 600; line-height: 1.25; }
.qr-agent-t span { font-size: 15px; line-height: 1.5; color: var(--mf-slate); }
.qr-badge .pill { display: inline-flex; align-items: center; gap: 6px; }
.qr-facts { margin: 0; display: grid; gap: 0; }
.qr-facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mf-limestone); }
.qr-facts > div:first-child { padding-top: 0; }
.qr-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.qr-facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mf-pine); padding-top: 3px; }
.qr-facts dd { margin: 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.qr-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qr-prod { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--mf-canvas); border: 1px dashed var(--mf-line); }
.qr-lock { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mf-shallows); color: var(--mf-forest); }
.qr-prod-t { display: grid; gap: 2px; }
.qr-prod-t b { font-family: var(--mf-font-display); font-size: 17.5px; font-weight: 600; }
.qr-prod-t span { font-size: 15px; color: var(--mf-slate); }
.qr-locked { margin: 16px 0 0; font-size: 14.5px; font-weight: 500; color: var(--mf-forest); }
.qr-funnel { margin: 10px 0 0; font-size: 15px; color: var(--mf-slate); line-height: 1.55; }
.qr-vsl .fp-hero-vsl { width: 100%; margin: 0; border-radius: 20px; overflow: hidden; background: var(--mf-g-deep); box-shadow: var(--mf-shadow-card); }
.fp-vturb { display: block; width: 100%; }
.fp-vturb .vturb-player-placeholder { position: relative; width: 100%; padding-top: 56.25%; }

.qr-offer { background: var(--mf-g-shallows); border-color: var(--mf-line); display: grid; gap: 0; }
.qr-offer-h { font-size: 28px; margin: 10px 0 18px; }
.qr-items { margin-bottom: 22px; }
.qr-price { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.qr-anchor { font-size: 22px; color: var(--mf-rowan); text-decoration-thickness: 2px; }
.qr-now { font-family: var(--mf-font-display); font-size: 56px; font-weight: 700; line-height: 1; color: var(--mf-forest); }
.qr-timer { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--mf-forest); }
.qr-timer b, .qr-sticky-t b { font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; font-size: 18px; background: var(--mf-surface); border: 1px solid var(--mf-line); padding: 3px 9px; border-radius: 8px; color: var(--mf-ink); }
.qr-expired { display: grid; gap: 14px; }
.qr-expired p { font-weight: 600; color: var(--mf-rowan); }
.qr-guarantee { margin: 14px 0 0; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--mf-forest); }
.qr-assure { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13.5px; color: var(--mf-slate); }
.qr-assure li { display: inline-flex; align-items: center; gap: 6px; }
.qr-assure svg { color: var(--mf-pine); }
.qr-proof { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; padding: 8px 0 0; }
.qr-stat { text-align: center; }
.qr-stat b { display: block; font-family: var(--mf-font-display); font-weight: 600; font-size: 24px; color: var(--mf-ink); }
.qr-stat span { font-size: 13.5px; color: var(--mf-slate); }

.qr-sticky { display: none; }
@media (max-width: 768px) {
  .qr-sticky:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--mf-canvas) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--mf-limestone); box-shadow: 0 -6px 20px rgba(23, 63, 39, .1); }
  .qr-sticky-t { margin: 0; display: grid; gap: 2px; font-size: 12px; color: var(--mf-slate); line-height: 1.2; }
  .qr-sticky .btn { padding: 13px 18px; font-size: 15px; }
  .et-p-quiz-results .site-foot { padding-bottom: 90px; }
}

/* --- phone ------------------------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .qz-main { padding: 18px 0 52px; }
  .qz-col, .qr-col { padding: 0 16px; }
  .qz-h1 { font-size: 30px; }
  .qz-sub { font-size: 17px; }
  .qz-panel { padding: 22px 18px; }
  .qz-q { font-size: 23px; }
  .qz-card-h { font-size: 25px; }
  .qz-opt { font-size: 16.5px; padding: 13px 14px; }
  .qr-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .qr-now { font-size: 48px; }
  .qr-offer-h { font-size: 24px; }
  .qr-sub { font-size: 17px; }
  .qr-sec-h { font-size: 21px; }
  .qr-agent { padding: 12px 14px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .qz-screen { animation: none; }
  .qz-track i, .qz-lstep, .qz-opt, .qz-opt-check { transition: none; }
  .qr-spin { animation-duration: 2.4s; }
}

/* Klemen's review, 2026-10-12 */
/* questions fill the panel line by line: plain wrapping, never balanced or "pretty" short lines */
.qz-q { max-width: none; text-wrap: wrap; }
/* under every typed field */
.qz-note { margin: 10px 2px 0; font-size: 14.5px; line-height: 1.45; color: var(--mf-slate); }
.qz-other .qz-note { margin-bottom: 14px; }
/* a card's logo inside its sentence */
.qz-inline-logo { display: inline-block; height: 1.2em; width: auto; vertical-align: -0.25em; margin: 0 .1em; }
.qz-card-body strong { color: var(--mf-ink); font-weight: 700; }
/* Continue my build -> */
.qz-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.qz-arrow { flex: none; transition: transform .15s ease; }
.qz-go:hover .qz-arrow { transform: translateX(3px); }
/* the card's photo: small, top right (Klemen, 2026-10-12); the eyebrow and headline keep clear of it */
.qz-cardscreen { position: relative; }
.qz-cardscreen .qz-portrait { position: absolute; top: 24px; right: 24px; width: 60px; height: 60px; margin: 0; }
.qz-cardscreen:has(.qz-portrait) .eyebrow, .qz-cardscreen:has(.qz-portrait) .qz-card-h { padding-right: 76px; }
/* the live input grader under a text question (Klemen, 2026-10-12): like a password-strength meter */
.qz-grade { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 12px 2px 0; --qz-grade-hue: 0; }
.qz-grade-track { height: 8px; border-radius: 999px; background: var(--mf-shallows); overflow: hidden; }
.qz-grade-track i { display: block; height: 100%; width: 0; border-radius: inherit; background-image: linear-gradient(90deg, #d4483b 0%, #e9a23b 35%, #e6c337 55%, #7cb342 78%, #2e9d5b 100%); background-repeat: no-repeat; background-position: left center; transition: width .25s ease-out, background-size .25s ease-out; }
.qz-grade-label { min-width: 56px; text-align: right; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: hsl(var(--qz-grade-hue) 62% 36%); transition: color .25s ease; }
.qz-grade[data-level="0"] .qz-grade-label { color: #c0392b; }
.qz-grade + .qz-note { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .qz-grade-track i, .qz-grade-label { transition: none; } }
/* Results price block (Klemen, 2026-10-12): centred, two struck prices, the computed discount after the price */
.qr-price { justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.qr-off { font-size: 16px; font-weight: 700; color: var(--mf-forest); letter-spacing: .01em; }
.qr-timer { justify-content: center; flex-wrap: wrap; text-align: center; }
/* Mobile: a screen's main button is always in reach (Klemen, 2026-10-12). While its place in the panel is below the
   fold it sticks to the bottom of the screen; scrolled to, it settles where it belongs (position: sticky does both). */
@media (max-width: 760px) {
  .qz-panel .qz-go { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
}
.qz-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* D502: the quiz intro headline matches the sales headline: 26px desktop, 24px phone, line-height 1.2. */
.qz-h1.qz-intro-h1 { font-size: 26px; line-height: 1.2; max-width: none; text-wrap: wrap; }
@media (max-width: 760px) { .qz-h1.qz-intro-h1 { font-size: 24px; line-height: 1.2; } }

/* D506: a lead magnet's handles screen, its prefill wait, and its Results page. */
.qz-fields { margin: 4px 0 18px; }
.qz-prefill-wait { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--mf-slate); font-size: 15px; }
.qz-prefill-wait .qr-spin, .mg-recording .qr-spin { width: 18px; height: 18px; border-width: 3px; }
.mg-generating .mg-note { margin-top: 16px; color: var(--mf-slate); font-size: 15px; }
.mg-value { text-align: center; }
.mg-value-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--mf-slate); text-transform: uppercase; letter-spacing: .04em; }
.mg-value-num { margin: 8px 0 14px; line-height: 1.15; }
.mg-value-num b { display: block; font-size: 36px; font-weight: 800; color: var(--mf-forest); }
.mg-value-num span { font-size: 16px; color: var(--mf-slate); }
.mg-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.mg-rows div { background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 12px; padding: 10px 12px; }
.mg-rows dt { font-size: 13px; color: var(--mf-slate); }
.mg-rows dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; color: var(--mf-ink); }
.mg-above { font-weight: 600; color: var(--mf-forest); }
.mg-summary { text-align: left; margin: 12px 0; font-size: 17px; line-height: 1.55; }
.mg-method { text-align: left; font-size: 14.5px; color: var(--mf-slate); }
.mg-method summary { cursor: pointer; font-weight: 600; color: var(--mf-pine); }
.mg-method ul { margin: 8px 0 0; padding-left: 18px; }
.mg-method li { margin: 4px 0; }
.mg-h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; color: var(--mf-forest); }
.mg-h3 { margin: 0 0 6px; font-size: 18px; color: var(--mf-ink); }
.mg-sub, .mg-note { color: var(--mf-slate); font-size: 15px; }
.mg-recording { display: flex; align-items: center; gap: 10px; color: var(--mf-slate); }
.mg-player { width: 100%; margin-top: 6px; }
.mg-list { margin: 0; padding-left: 22px; }
.mg-list li { margin: 0 0 14px; }
.mg-list li b { display: block; margin-bottom: 4px; color: var(--mf-ink); font-size: 17px; }
.mg-block p { line-height: 1.55; }
@media (max-width: 760px) { .mg-value-num b { font-size: 30px; } .mg-rows { grid-template-columns: 1fr; } }
.qz-label-hint { font-weight: 400; color: var(--mf-slate); }
/* D509: the snapping slider: a big number, a filled track (--fill, set by quiz.js) and a large thumb for fingers. */
.qz-slider { margin: 8px 0 24px; }
.qz-slider-val { display: block; text-align: center; font-size: 52px; line-height: 1.1; font-weight: 800; color: var(--mf-forest); margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.qz-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; --fill: 0%; }
.qz-range:focus { outline: none; }
.qz-range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(to right, var(--mf-pine) 0 var(--fill), var(--mf-line) var(--fill) 100%); }
.qz-range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--mf-line); }
.qz-range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--mf-pine); }
.qz-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 36px; height: 36px; margin-top: -13px; border-radius: 50%; background: var(--mf-pine); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.qz-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--mf-pine); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.qz-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mf-sky-light) 80%, transparent), 0 2px 8px rgba(0,0,0,.25); }
.qz-slider-ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--mf-slate); margin-top: 4px; }
@media (max-width: 760px) { .qz-slider-val { font-size: 46px; } .qz-range::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -15px; } .qz-range::-moz-range-thumb { width: 32px; height: 32px; } }
/* D509: the typeable number above the slider: a big field with a pencil and a dashed underline, so it reads as editable. */
.qz-num-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px auto 4px; width: fit-content; max-width: 100%; border-bottom: 2px dashed color-mix(in srgb, var(--mf-pine) 55%, transparent); cursor: text; }
.qz-num { width: 7.5ch; min-width: 0; text-align: center; font: inherit; font-size: 52px; line-height: 1.15; font-weight: 800; color: var(--mf-forest); background: transparent; border: 0; padding: 0; font-variant-numeric: tabular-nums; }
.qz-num:focus { outline: none; }
.qz-num-wrap:focus-within { border-bottom-style: solid; border-bottom-color: var(--mf-pine); }
.qz-num-edit { flex: none; color: var(--mf-pine); }
.qz-num-hint { text-align: center; margin: 6px 0 14px; font-size: 14px; color: var(--mf-slate); }
@media (max-width: 760px) { .qz-num { font-size: 44px; } }
.mg-method .mg-source { list-style: none; margin-left: -18px; font-size: 13px; }
/* Results header: the headline spans the full width, Klemen's photo top right; the offer's subhead. */
.qr-head.mg-head { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 18px; width: 100%; }
.mg-head-t { flex: 1 1 auto; min-width: 0; }
.qz-h1.qr-h1.mg-h1 { max-width: none; text-wrap: wrap; }
.mg-portrait { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.mg-offer-sub { margin: -4px 0 16px; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--mf-ink); }
@media (max-width: 760px) { .mg-portrait { width: 60px; height: 60px; } .mg-offer-sub { font-size: 15px; } }
/* Results: the two levers, the credentials and the case study (Klemen, 2026-10-14). */
.mg-levers .eyebrow, .mg-case .eyebrow { display: block; margin-bottom: 6px; }
.mg-lever { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.mg-lever-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--mf-pine); }
.mg-lever p { margin: 4px 0 0; line-height: 1.55; }
.mg-cred { text-align: center; padding: 6px 4px 2px; }
.mg-cred .eyebrow { display: block; margin-bottom: 10px; }
.mg-cred-logo { display: block; height: 30px; width: auto; margin: 0 auto 12px; }
.mg-cred-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15.5px; color: var(--mf-ink); }
.mg-case-who { display: flex; align-items: center; gap: 14px; margin: 12px 0 14px; }
.mg-case-logo { height: 28px; width: auto; flex: none; }
.mg-case-who p { margin: 0; line-height: 1.4; }
.mg-case-who p span { color: var(--mf-slate); font-size: 14.5px; }
.mg-case-handle { color: var(--mf-pine) !important; font-size: 14.5px; }
.mg-case-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mg-case-stat { background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 12px; padding: 12px 8px; text-align: center; }
.mg-case-stat b { display: block; font-size: 28px; font-weight: 800; color: var(--mf-forest); line-height: 1.1; }
.mg-case-stat span { display: block; margin-top: 4px; font-size: 13px; color: var(--mf-slate); line-height: 1.3; }
.mg-case-period { margin: 12px 0 0; font-weight: 600; color: var(--mf-forest); text-align: center; }
@media (max-width: 760px) { .mg-case-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .mg-case-who { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* The voice message panel: Klemen's photo top right with a looping equalizer (it runs from page load). */
.mg-audio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mg-audio-t { flex: 1 1 auto; min-width: 0; }
.mg-audio-badge { flex: none; display: flex; align-items: center; gap: 12px; }
.mg-audio-photo { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mf-pine) 55%, transparent), 0 4px 14px rgba(0,0,0,.14); }
.mg-eq { display: flex; align-items: center; gap: 4px; height: 32px; }
.mg-eq i { display: block; width: 4px; height: 100%; border-radius: 4px; background: linear-gradient(to top, var(--mf-pine), #3F9E96); transform-origin: center; animation: mg-eq 1.1s ease-in-out infinite; }
.mg-eq i:nth-child(1) { --dur: 1.89s; --del: -0.36s; }
.mg-eq i:nth-child(2) { --dur: 1.53s; --del: -0.9s; }
.mg-eq i:nth-child(3) { --dur: 2.16s; --del: -0.18s; }
.mg-eq i:nth-child(4) { --dur: 1.71s; --del: -1.26s; }
.mg-eq i:nth-child(5) { --dur: 2.07s; --del: -0.63s; }
@keyframes mg-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mg-eq i { animation-duration: 2.4s; } }
@media (max-width: 760px) { .mg-audio-photo { width: 48px; height: 48px; } .mg-eq { height: 26px; gap: 3px; } .mg-eq i { width: 3px; } }
/* Results headings use the full width (site.css balances every h1-h4 into even lines, which leaves the right side empty). */
.et-p-magnet-results h1, .et-p-magnet-results h2, .et-p-magnet-results h3 { text-wrap: wrap; max-width: none; }

/* The voice message badge: a circular equalizer (32 bars beaming out 360° around Klemen's photo), looping from page load. */
.mg-ring { --size: 104px; --photo: 58px; --r: 32px; position: relative; display: block; width: var(--size); height: var(--size); }
.mg-ring .mg-audio-photo { position: absolute; left: 50%; top: 50%; width: var(--photo); height: var(--photo); margin: calc(var(--photo) / -2) 0 0 calc(var(--photo) / -2); z-index: 1; }
.mg-ring-bars { position: absolute; inset: 0; }
.mg-ring-bars i { position: absolute; left: 50%; top: 50%; width: 3px; height: 16px; margin: -16px 0 0 -1.5px; transform-origin: 50% 100%; }
.mg-ring-bars i::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(to top, var(--mf-pine), #3F9E96 70%, #A7DDD6); transform-origin: 50% 100%; animation: mg-beam var(--dur, 1s) ease-in-out var(--del, 0s) infinite; }
@keyframes mg-beam { 0%, 100% { transform: scaleY(.3); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.mg-ring-bars i:nth-child(1) { transform: rotate(0.0deg) translateY(calc(var(--r) * -1)); --dur: 1.67s; --del: -0.38s; }
.mg-ring-bars i:nth-child(2) { transform: rotate(11.25deg) translateY(calc(var(--r) * -1)); --dur: 2.09s; --del: -0.18s; }
.mg-ring-bars i:nth-child(3) { transform: rotate(22.5deg) translateY(calc(var(--r) * -1)); --dur: 1.94s; --del: -0.92s; }
.mg-ring-bars i:nth-child(4) { transform: rotate(33.75deg) translateY(calc(var(--r) * -1)); --dur: 1.33s; --del: -1.28s; }
.mg-ring-bars i:nth-child(5) { transform: rotate(45.0deg) translateY(calc(var(--r) * -1)); --dur: 1.31s; --del: -1.1s; }
.mg-ring-bars i:nth-child(6) { transform: rotate(56.25deg) translateY(calc(var(--r) * -1)); --dur: 1.35s; --del: -0.23s; }
.mg-ring-bars i:nth-child(7) { transform: rotate(67.5deg) translateY(calc(var(--r) * -1)); --dur: 1.8s; --del: -2.09s; }
.mg-ring-bars i:nth-child(8) { transform: rotate(78.75deg) translateY(calc(var(--r) * -1)); --dur: 1.42s; --del: -0.56s; }
.mg-ring-bars i:nth-child(9) { transform: rotate(90.0deg) translateY(calc(var(--r) * -1)); --dur: 2.05s; --del: -2.39s; }
.mg-ring-bars i:nth-child(10) { transform: rotate(101.25deg) translateY(calc(var(--r) * -1)); --dur: 1.98s; --del: -1.01s; }
.mg-ring-bars i:nth-child(11) { transform: rotate(112.5deg) translateY(calc(var(--r) * -1)); --dur: 2.48s; --del: -0.13s; }
.mg-ring-bars i:nth-child(12) { transform: rotate(123.75deg) translateY(calc(var(--r) * -1)); --dur: 2.34s; --del: -0.74s; }
.mg-ring-bars i:nth-child(13) { transform: rotate(135.0deg) translateY(calc(var(--r) * -1)); --dur: 1.44s; --del: -0.29s; }
.mg-ring-bars i:nth-child(14) { transform: rotate(146.25deg) translateY(calc(var(--r) * -1)); --dur: 1.66s; --del: -2.05s; }
.mg-ring-bars i:nth-child(15) { transform: rotate(157.5deg) translateY(calc(var(--r) * -1)); --dur: 1.49s; --del: -1.46s; }
.mg-ring-bars i:nth-child(16) { transform: rotate(168.75deg) translateY(calc(var(--r) * -1)); --dur: 2.07s; --del: -0.94s; }
.mg-ring-bars i:nth-child(17) { transform: rotate(180.0deg) translateY(calc(var(--r) * -1)); --dur: 1.94s; --del: -0.16s; }
.mg-ring-bars i:nth-child(18) { transform: rotate(191.25deg) translateY(calc(var(--r) * -1)); --dur: 1.33s; --del: -0.52s; }
.mg-ring-bars i:nth-child(19) { transform: rotate(202.5deg) translateY(calc(var(--r) * -1)); --dur: 2.12s; --del: -1.08s; }
.mg-ring-bars i:nth-child(20) { transform: rotate(213.75deg) translateY(calc(var(--r) * -1)); --dur: 1.66s; --del: -1.48s; }
.mg-ring-bars i:nth-child(21) { transform: rotate(225.0deg) translateY(calc(var(--r) * -1)); --dur: 1.84s; --del: -0.76s; }
.mg-ring-bars i:nth-child(22) { transform: rotate(236.25deg) translateY(calc(var(--r) * -1)); --dur: 2.27s; --del: -1.76s; }
.mg-ring-bars i:nth-child(23) { transform: rotate(247.5deg) translateY(calc(var(--r) * -1)); --dur: 1.57s; --del: -1.44s; }
.mg-ring-bars i:nth-child(24) { transform: rotate(258.75deg) translateY(calc(var(--r) * -1)); --dur: 1.93s; --del: -2.21s; }
.mg-ring-bars i:nth-child(25) { transform: rotate(270.0deg) translateY(calc(var(--r) * -1)); --dur: 2.18s; --del: -0.72s; }
.mg-ring-bars i:nth-child(26) { transform: rotate(281.25deg) translateY(calc(var(--r) * -1)); --dur: 2.5s; --del: -0.31s; }
.mg-ring-bars i:nth-child(27) { transform: rotate(292.5deg) translateY(calc(var(--r) * -1)); --dur: 1.78s; --del: -1.91s; }
.mg-ring-bars i:nth-child(28) { transform: rotate(303.75deg) translateY(calc(var(--r) * -1)); --dur: 1.46s; --del: -1.22s; }
.mg-ring-bars i:nth-child(29) { transform: rotate(315.0deg) translateY(calc(var(--r) * -1)); --dur: 1.31s; --del: -1.69s; }
.mg-ring-bars i:nth-child(30) { transform: rotate(326.25deg) translateY(calc(var(--r) * -1)); --dur: 2.23s; --del: -1.44s; }
.mg-ring-bars i:nth-child(31) { transform: rotate(337.5deg) translateY(calc(var(--r) * -1)); --dur: 2.36s; --del: -0.79s; }
.mg-ring-bars i:nth-child(32) { transform: rotate(348.75deg) translateY(calc(var(--r) * -1)); --dur: 2.14s; --del: -1.49s; }
@media (prefers-reduced-motion: reduce) { .mg-ring-bars i::after { animation-duration: 2.6s !important; } }
@media (max-width: 760px) { .mg-ring { --size: 88px; --photo: 48px; --r: 27px; } .mg-ring-bars i { height: 13px; margin-top: -13px; } }
/* Case study identity: name and handle, then "(Founder of [logo], a $10M business)"; larger stat labels. */
.mg-case .mg-case-who { display: block; margin: 12px 0 16px; }
.mg-case-name { margin: 0; font-size: 19px; line-height: 1.3; }
.mg-case-name .mg-case-handle { margin-left: 6px; font-size: 16px; font-weight: 500; color: var(--mf-pine); }
.mg-case-org { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; color: var(--mf-slate); }
.mg-case-org .mg-case-logo { height: 22px; width: auto; }
.mg-case-org span { line-height: 1.3; }
.mg-case-org span + .mg-case-logo + span { margin-left: -6px; }
.mg-case-stat span { font-size: 15.5px; color: var(--mf-ink); }
.mg-case-stat b { font-size: 32px; }
@media (max-width: 760px) { .mg-case .mg-case-who { margin-bottom: 14px; } .mg-case-stat span { font-size: 14.5px; } }

/* Subtler, slower beam; the badge sits in the panel's top-right corner (Klemen, 2026-10-14). */
@keyframes mg-beam { 0%, 100% { transform: scaleY(.5); opacity: .4; } 50% { transform: scaleY(.95); opacity: .85; } }
.mg-ring-bars i { height: 12px; margin-top: -12px; width: 2.5px; }
.mg-audio { position: relative; }
.mg-audio .mg-audio-badge { position: absolute; top: 6px; right: 6px; }
.mg-audio .mg-audio-t { padding-right: 104px; }
@media (max-width: 760px) { .mg-ring-bars i { height: 10px; margin-top: -10px; } .mg-audio .mg-audio-badge { top: 4px; right: 4px; } .mg-audio .mg-audio-t { padding-right: 84px; } }
.mg-case .mg-case-org { display: block; }
.mg-case-org .mg-nowrap { white-space: nowrap; }
.mg-case-org .mg-case-logo { display: inline-block; vertical-align: -5px; margin: 0 1px 0 4px; }
.mg-case-org .mg-case-logo { margin-right: -5px; }

/* D520: the hours question (a checklist whose ticked tasks pick an hours band) and the hours Results page. */
.qz-hours { display: grid; gap: 10px; }
.qz-hrow { display: grid; gap: 8px; }
.qz-hbands { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 6px; }
.qz-hband { min-height: 40px; padding: 8px 14px; font: inherit; font-size: 15px; font-weight: 500; color: var(--mf-ink); background: var(--mf-surface); border: 1px solid var(--mf-limestone); border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-hband:hover { border-color: var(--mf-pine); }
.qz-hband:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.qz-hband[aria-pressed="true"] { border-color: var(--mf-pine); background: var(--mf-shallows); color: var(--mf-forest); font-weight: 600; box-shadow: 0 0 0 1px var(--mf-pine) inset; }
.mg-h-year { margin: -4px 0 12px; color: var(--mf-slate); font-size: 15px; }
.mg-hours .mg-rows { grid-template-columns: 1fr 1fr 1fr; }
.mg-table-wrap { overflow-x: auto; }
.mg-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mg-table th, .mg-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--mf-line); }
.mg-table th { font-size: 13px; font-weight: 600; color: var(--mf-slate); }
.mg-table td:not(:first-child), .mg-table th:not(:first-child) { text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .mg-hours .mg-rows { grid-template-columns: 1fr; } }
.qz-num-affix { flex: none; font-size: 30px; font-weight: 700; color: var(--mf-forest); line-height: 1.15; }
.qz-num-pre { font-size: 44px; font-weight: 800; }
.qz-num-wrap:has(.qz-num-pre) .qz-num { width: 3ch; text-align: left; }
@media (max-width: 760px) { .qz-num-affix { font-size: 22px; } .qz-num-pre { font-size: 36px; } }
.mg-h-content { margin: 12px 0 0; font-size: 15px; color: var(--mf-ink); }
.mg-case-who .mg-case-org.mg-case-solo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.mg-case-who .mg-case-solo .mg-case-logo.mg-case-logo-lg { height: 34px; width: auto; max-width: none; vertical-align: middle; }
/* D520 (Klemen): the hours result as three big plain numbers. */
.mg-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 14px; }
.mg-big { background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 16px; padding: 18px 14px; text-align: center; }
.mg-big-label { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--mf-slate); line-height: 1.3; }
.mg-big-num { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 800; color: var(--mf-forest); font-variant-numeric: tabular-nums; }
.mg-big-num b { font-weight: 800; }
.mg-big-num span { display: block; font-size: 16px; font-weight: 600; color: var(--mf-ink); margin-top: 2px; }
.mg-big-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--mf-slate); line-height: 1.35; }
.mg-payback { margin: 0 0 12px; text-align: center; font-size: 16px; color: var(--mf-ink); }
.mg-payback b { color: var(--mf-forest); }
@media (max-width: 760px) { .mg-big3 { grid-template-columns: 1fr; } .mg-big-num { font-size: 40px; } }
.qz-teaser { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--mf-shallows); color: var(--mf-forest); font-size: 18px; line-height: 1.4; text-align: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--mf-pine) 35%, transparent) inset; }
.qz-teaser b { font-size: 22px; font-weight: 800; }
/* D520: the example result under the first question -- a real results panel, tilted in 3D, floating slowly. */
.qz-example { margin: 26px auto 4px; max-width: 560px; text-align: center; }
.qz-example-stage { perspective: 1400px; padding: 6px 10px 18px; }
.qz-example-img { display: block; width: 100%; height: auto; border-radius: 18px; transform-origin: 50% 60%; transform: rotateX(12deg) rotateY(-10deg) rotateZ(0.6deg); box-shadow: 0 34px 60px -24px rgba(16, 42, 30, 0.38), 0 12px 24px -12px rgba(16, 42, 30, 0.22); animation: qz-example-float 9s ease-in-out infinite; will-change: transform; }
@keyframes qz-example-float {
  0%, 100% { transform: rotateX(12deg) rotateY(-10deg) rotateZ(0.6deg) translateY(0); }
  50% { transform: rotateX(8deg) rotateY(-4deg) rotateZ(0deg) translateY(-8px); }
}
.qz-example-cap { margin: 8px 0 0; font-size: 13.5px; color: var(--mf-slate); }
@media (prefers-reduced-motion: reduce) { .qz-example-img { animation: none; } }
@media (max-width: 760px) { .qz-example { margin-top: 20px; } .qz-example-img { transform: rotateX(10deg) rotateY(-6deg); } }
.qz-lstep.is-failed .qz-lstep-bar i { background: var(--mf-clay, #b5523b); }
/* D520: the brand marks (D516) on a lead magnet's pages, the gradient headline words, and the glowing question panel. */
.et-mark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; margin-left: .22em; overflow: visible; }
.et-mark-claude { color: #d97757; }
.et-mark-chatgpt { color: #10a37f; }
.qz-grad { background: var(--mf-g-summit); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.qz-glow .qz-screen > .qz-panel { border: 2px solid var(--mf-pine); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mf-pine) 14%, transparent), 0 0 34px 6px color-mix(in srgb, var(--mf-lake, #4fb3a4) 38%, transparent), 0 18px 40px -20px rgba(16, 42, 30, 0.35); animation: qz-glow-pulse 4.5s ease-in-out infinite; }
@keyframes qz-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mf-pine) 14%, transparent), 0 0 30px 4px color-mix(in srgb, var(--mf-lake, #4fb3a4) 32%, transparent), 0 18px 40px -20px rgba(16, 42, 30, 0.35); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mf-pine) 18%, transparent), 0 0 44px 10px color-mix(in srgb, var(--mf-lake, #4fb3a4) 46%, transparent), 0 18px 40px -20px rgba(16, 42, 30, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .qz-glow .qz-screen > .qz-panel { animation: none; } }
/* D523/D520: "Included today" in a lead magnet's results offer: the sales hero's setup-call box. */
.mg-included { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 4px 0 18px; padding: 16px 18px; text-align: left; background: var(--mf-surface); border: 2px solid var(--mf-heartwood); border-radius: 14px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mf-heartwood) 12%, transparent), 0 12px 28px -18px rgba(23, 63, 39, .35); }
.mg-included-avatar { position: relative; width: 56px; height: 56px; }
.mg-included-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--mf-limestone); }
.mg-included-zoom { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 8px; background: #0B5CFF; border: 2px solid var(--mf-surface); display: grid; place-items: center; }
.mg-included-zoom svg { width: 16px; height: 16px; }
.mg-included-text { display: grid; gap: 4px; min-width: 0; }
.mg-included-head { font-size: 16px; line-height: 1.4; color: var(--mf-ink); padding-right: 92px; }
.mg-included-head b { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; }
.mg-included-line { font-size: 14.5px; line-height: 1.45; color: var(--mf-slate); }
.mg-included-pill { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px; background: var(--mf-heartwood); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) {
  .mg-included { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av head pill" "line line line"; column-gap: 12px; row-gap: 10px; }
  .mg-included-text { display: contents; }
  .mg-included-avatar { grid-area: av; }
  .mg-included-head { grid-area: head; padding-right: 0; }
  .mg-included-pill { grid-area: pill; position: static; align-self: center; }
  .mg-included-line { grid-area: line; }
}
.mg-offer-img { display: block; width: min(320px, 80%); height: auto; margin: -4px auto 12px; }
/* D543: a plan magnet -- the landing variant's hook line, the intro lesson, the day cards (Day 1 open, the rest locked). */
.qz-hook { font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--mf-ink); max-width: 34em; margin: -6px 0 18px; text-wrap: pretty; }
.mg-lesson { line-height: 1.6; overflow-wrap: anywhere; }
.mg-lesson p { margin: 0 0 14px; }
.mg-lesson h2, .mg-lesson h3 { font-size: 18px; margin: 18px 0 8px; color: var(--mf-ink); }
.mg-lesson ul, .mg-lesson ol { padding-left: 22px; margin: 0 0 14px; }
.mg-lesson blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--mf-shallows); color: var(--mf-slate); }
.mg-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mg-day { min-width: 0; padding: 16px; border: 1px solid var(--mf-line); border-radius: 14px; background: var(--mf-surface); }
.mg-day:first-child { border: 2px solid var(--mf-pine); }
.mg-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.mg-day-n { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-pine); }
.mg-day-lock { display: inline-flex; color: var(--mf-slate); }
.mg-day-t { overflow-wrap: anywhere; }
.mg-day-sum { margin: 0 0 8px; line-height: 1.5; }
.mg-day-by { margin: 0 0 6px; font-size: 14px; color: var(--mf-slate); font-style: italic; }
.mg-day-note { margin: 0; font-size: 14px; }
.mg-day.is-locked .mg-day-sum { filter: blur(5px); user-select: none; -webkit-user-select: none; pointer-events: none; }
.mg-day.is-locked .mg-day-note { margin-bottom: 10px; }
.mg-unlock { margin-top: 2px; }
.mg-plan-title { margin-top: 2px; overflow-wrap: anywhere; }
.mg-plan-sum { margin: 0 0 14px; color: var(--mf-slate); line-height: 1.5; }

/* The Pay-For-Itself Growth Plan's Results page (quiz.js renderGrowth) */
.mg-g-total { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 14px; }
.mg-g-total b { font-size: 64px; line-height: 1; font-weight: 800; color: var(--mf-forest); font-variant-numeric: tabular-nums; }
.mg-g-total span { font-size: 20px; font-weight: 600; color: var(--mf-slate); }
.mg-g-bars { display: grid; gap: 10px; margin-bottom: 22px; }
.mg-g-bar { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; font-size: 15px; }
.mg-g-bar-t { display: block; height: 12px; border-radius: 999px; background: var(--mf-line); overflow: hidden; }
.mg-g-bar-t i { display: block; height: 100%; border-radius: 999px; background: var(--mf-forest); }
.mg-g-bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.mg-g-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mg-g-fix { display: grid; grid-template-columns: 32px 1fr; gap: 12px; background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 16px; padding: 14px; }
.mg-g-fix p, .mg-g-step p, .mg-g-day p, .mg-g-week p { margin: 4px 0 0; }
.mg-g-fix h4 { margin: 0; }
.mg-g-fix-n, .mg-g-step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mf-forest); color: #fff; font-weight: 700; font-size: 14px; }
.mg-g-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mg-g-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--mf-forest); color: #fff; }
.mg-g-pill.is-next { background: var(--mf-canvas); color: var(--mf-forest); border: 1px solid var(--mf-line); }
.mg-g-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mg-g-chip { padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--mf-canvas); border: 1px solid var(--mf-line); color: var(--mf-slate); }
.mg-g-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.mg-g-step { position: relative; flex: 1 1 0; min-width: 0; background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 16px; padding: 14px; font-size: 14.5px; }
.mg-g-step b { display: block; margin-top: 8px; }
.mg-g-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--mf-slate); }
.mg-g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.mg-g-card { background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 16px; padding: 16px; }
.mg-g-price { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--mf-forest); }
.mg-g-promise { margin: 0 0 8px; font-weight: 600; }
.mg-g-inc { margin: 0; padding-left: 20px; font-size: 14.5px; }
.mg-g-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0; }
.mg-g-fig { background: var(--mf-canvas); border: 1px solid var(--mf-line); border-radius: 16px; padding: 16px 14px; text-align: center; }
.mg-g-fig .mg-big-num { font-size: 30px; }
.mg-g-est { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-slate); border: 1px solid var(--mf-line); }
.mg-g-table td, .mg-g-table th { text-align: left !important; white-space: normal !important; vertical-align: top; min-width: 150px; }
.mg-g-table td:first-child, .mg-g-table th:first-child { min-width: 36px; }
.mg-g-stack td, .mg-g-stack th { white-space: nowrap; }
.mg-g-days, .mg-g-phase { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mg-g-day, .mg-g-week { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.mg-g-day .mg-day-n, .mg-g-week .mg-day-n { white-space: nowrap; }
.mg-g-phase { margin-bottom: 20px; }
.mg-g-phase-t { color: var(--mf-forest); }
@media (max-width: 760px) {
  .mg-g-bar { grid-template-columns: 96px 1fr 44px; gap: 8px; font-size: 14px; }
  .mg-g-total b { font-size: 52px; }
  .mg-g-steps { flex-direction: column; gap: 22px; }
  .mg-g-step:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%); }
  .mg-g-day, .mg-g-week { grid-template-columns: 1fr; gap: 2px; }
}

/* Klemen, 2026-10-29: the Growth Plan's Results page in a paid product's layout (partials/growth-results.liquid on
   results.css). Only what the plan's own blocks need inside the paid section cards. */
.mg-gx .fp-body :is(ol, ul)[class*="mg-g-"] { padding-left: 0; }
.mg-gx .fp-body ul.mg-g-inc { padding-left: 20px; }
.mg-gx .mg-audio { position: static; }
.mg-gx .mg-audio .mg-audio-head { align-items: center; margin-top: 16px; }
.mg-gx .mg-audio .mg-audio-badge { position: static; }
.mg-gx .mg-audio .mg-audio-t { padding-right: 0; }
.mg-gx .mg-summary { font-family: var(--mf-font-display); font-size: 19px; line-height: 1.45; margin: 0; }
.mg-gx .mg-player { display: block; width: 100%; margin-top: 14px; }
.mg-gx .mg-player[hidden] { display: none; }
.mg-gx .mg-g-total { margin-top: 0; }
.mg-gx .fp-status-note { margin: 14px 0 0; font-size: 14px; color: var(--mf-slate); }
.mg-gx .fp-status-note[hidden] { display: none; }
.mg-gx .fp-share-btn[hidden] { display: none; }
/* The funnel map reads top to bottom inside the card, an arrow down between steps. */
.mg-gx .mg-g-steps { flex-direction: column; gap: 26px; }
.mg-gx .mg-g-step:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); }
.mg-gx .fp-title-h1:focus { outline: none; }
@media print {
  .mg-gx .mg-audio-head, .mg-gx .mg-player, .mg-gx .mg-recording { display: none !important; }
  .mg-gx .fp-results-call, .mg-gx .fp-next-step { display: none !important; }
}

/* D587: freebie and product idea cards: the ad headline at the foot of each card. */
.mg-g-idea { display: flex; flex-direction: column; }
.mg-g-hl { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--mf-line); display: grid; gap: 2px; }
.mg-gx .fp-body .mg-g-hl { margin: auto 0 0; }
.mg-g-hl-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-slate); }
.mg-g-hl-t { font-family: var(--mf-font-display); font-size: 16.5px; line-height: 1.35; color: var(--mf-forest); }
.mg-g-idea .mg-g-inc { margin-bottom: 14px; }

/* D595: the Sprints quiz -- sprint cards (title and subhead) and the mirror card's answers so far. */
.qz-opt-card { align-items: flex-start; }
.qz-opt-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qz-opt-card .qz-opt-label { font-weight: 650; }
.qz-opt-sub { font-size: 14.5px; font-weight: 400; line-height: 1.4; color: var(--mf-slate); }
.qz-opt-card[aria-pressed="true"] .qz-opt-sub { color: var(--mf-forest); }
.qz-opt-card .qz-opt-check { margin-top: 2px; }
.qz-mirror { width: 100%; margin: 0 0 4px; padding: 6px 18px; border: 1px solid var(--mf-limestone); border-radius: 14px; background: var(--mf-canvas); }
.qz-mirror-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--mf-limestone); }
.qz-mirror-row:first-child { border-top: 0; }
.qz-mirror dt { margin: 0; font-size: 14.5px; color: var(--mf-slate); }
.qz-mirror dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--mf-ink); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .qz-mirror { padding: 4px 14px; }
  .qz-mirror-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Brief 14: the notes step's microphone (templates/assets/js/dictation.js, the Start page's): the button sits in the
   box's bottom-right corner; interim words show lighter in a mirror over the textarea, which holds final text only. */
.qz-dict-box { position: relative; }
.qz-dict-box .qz-textarea { display: block; resize: none; min-height: 156px; }
.qz-dict-mirror { position: absolute; inset: 0; box-sizing: border-box; padding: 14px 16px; border: 1px solid transparent; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; font: inherit; font-size: 17px; line-height: 1.5; color: transparent; pointer-events: none; }
.qz-dict-mirror:empty { display: none; }
.qz-dict-interim { color: var(--mf-slate); }
.qz-dict-box.has-mic .qz-textarea, .qz-dict-box.has-mic .qz-dict-mirror { padding-bottom: 58px; }
.qz-mic { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--mf-line); background: var(--mf-surface); color: var(--mf-forest); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.qz-mic:hover { border-color: var(--mf-pine); background: var(--mf-shallows); }
.qz-mic:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.qz-mic[aria-pressed="true"] { color: var(--mf-canvas); background: var(--mf-pine); border-color: var(--mf-pine); }
.qz-dict-box.is-listening .qz-textarea { border-color: var(--mf-pine); }
.qz-dict-box.is-listening .qz-textarea::placeholder { color: transparent; }
.qz-dict-hint { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 14.5px; font-weight: 600; color: var(--mf-pine); }
.qz-dict-hint::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.qz-dict-hint.is-blocked { color: var(--mf-slate); font-weight: 500; }
.qz-dict-hint.is-blocked::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .qz-mic[aria-pressed="true"] { animation: qz-mic-pulse 1.6s ease-out infinite; }
  .qz-dict-box.is-listening ~ .qz-dict-hint::before { animation: qz-mic-dot 1.6s ease-in-out infinite; }
}
@keyframes qz-mic-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mf-pine) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes qz-mic-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* D660: a text screen's files box (magnet.json `files`; templates/assets/js/file-text.js, the Start page's step 4 box):
   the attach button and its hint, one chip per file (name, size, state, remove), drag and drop on the field. */
.qz-files { margin-top: 12px; }
.qz-files-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.qz-files-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px 8px 12px; border-radius: 999px; border: 1px solid var(--mf-line); background: var(--mf-surface); font-size: 15px; font-weight: 600; color: var(--mf-ink); transition: background-color .15s ease, border-color .15s ease; }
.qz-files-btn svg { flex: none; width: 18px; height: 18px; color: var(--mf-pine); }
.qz-files-btn:hover { border-color: var(--mf-pine); background: var(--mf-shallows); }
.qz-files-btn:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 2px; }
.qz-files-hint { font-size: 13.5px; color: var(--mf-slate); }
.qz-files-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.qz-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--mf-line); background: var(--mf-surface); font-size: 14.5px; color: var(--mf-ink); }
.qz-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.qz-file-size { flex: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--mf-slate); }
.qz-file-state { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mf-slate); }
.qz-file.is-ready .qz-file-state { color: var(--mf-pine); }
.qz-file.is-ready .qz-file-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.qz-file.is-failed, .qz-file.is-missing { border-color: color-mix(in srgb, var(--mf-heartwood) 55%, transparent); }
.qz-file.is-failed .qz-file-state, .qz-file.is-missing .qz-file-state { color: var(--mf-heartwood); }
.qz-file.is-reading .qz-file-state::before { content: ""; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--mf-pine) 30%, transparent); border-top-color: var(--mf-pine); }
@media (prefers-reduced-motion: no-preference) { .qz-file.is-reading .qz-file-state::before { animation: qz-file-spin .8s linear infinite; } }
@keyframes qz-file-spin { to { transform: rotate(360deg); } }
.qz-file-x { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; font-size: 20px; line-height: 1; color: var(--mf-slate); }
.qz-file-x:hover { color: var(--mf-ink); background: var(--mf-shallows); }
.qz-file-x:focus-visible { outline: 3px solid var(--mf-sky-light); outline-offset: 1px; }
.qz-files-error { margin-top: 10px; }
.qz-field.is-drop .qz-textarea { border-color: var(--mf-pine); border-style: dashed; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-sky-light) 80%, transparent); }
@media (max-width: 480px) {
  .qz-file { flex-wrap: wrap; row-gap: 2px; padding-left: 12px; }
  .qz-file-name { flex-basis: calc(100% - 44px); }
  .qz-file-x { order: 2; margin-left: auto; }
  .qz-file-size { order: 3; }
  .qz-file-state { order: 4; }
}

/* D661: the "what you get" card under the first question: a head (title + line), then one row per item: an icon
   tile, the words (brand lockups sit on the text's own line, logo centred on the x-height), a value pill on the right;
   on phones the pill drops under the words. Rows are split by hairlines. */
.qz-offer { margin: 22px 0 0; padding: 22px 22px 8px; border-radius: 20px; background: var(--mf-surface); border: 1px solid var(--mf-limestone); box-shadow: var(--mf-shadow-card); }
.qz-offer-head { margin: 0 0 6px; }
.qz-offer-title { margin: 0; font-family: var(--mf-font-display); font-size: 23px; line-height: 1.2; font-weight: 700; color: var(--mf-ink); }
.qz-offer-sub { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--mf-slate); }
.qz-offer-list { list-style: none; margin: 0; padding: 0; }
.qz-offer-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 15px 0; font-size: 17px; line-height: 1.45; color: var(--mf-ink); }
.qz-offer-item + .qz-offer-item { border-top: 1px solid var(--mf-limestone); }
.qz-offer-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mf-shallows); color: var(--mf-pine); }
.qz-offer-ic svg { width: 21px; height: 21px; }
.qz-offer-text { min-width: 0; font-weight: 500; text-wrap: pretty; }
.qz-offer-value { white-space: nowrap; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--mf-pine); background: var(--mf-shallows); }
.qz-brands { white-space: normal; }
.qz-lockup { white-space: nowrap; font-weight: 600; }
.qz-logo { display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -0.14em; }
.qz-logo-c { color: #D97757; }
.qz-logo-g { color: #000; }
.qz-trust-below { margin: 16px 0 0; }
@media (max-width: 480px) {
  .qz-offer { padding: 20px 18px 6px; }
  .qz-offer-title { font-size: 21px; }
  .qz-offer-item { grid-template-columns: 38px minmax(0, 1fr); row-gap: 8px; font-size: 16.5px; padding: 14px 0; align-items: start; }
  .qz-offer-ic { width: 38px; height: 38px; }
  .qz-offer-value { grid-column: 2; justify-self: start; }
}
/* D663: the second subheadline (the AI line) and the offer card's finish line. */
.qz-ai-line { font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--mf-slate); max-width: 36em; margin: -4px 0 18px; text-wrap: pretty; }
.qz-offer-finish { display: grid; gap: 4px; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--mf-shallows); font-size: 15.5px; line-height: 1.5; color: var(--mf-ink); }
.qz-offer-finish-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-pine); }
.qz-to-top { margin: 22px 0 0; text-align: center; }
.qz-to-top-btn { display: inline-flex; align-items: center; gap: 10px; }