/**
 * Quiz engine — styles for the pieces main.css doesn't already cover.
 *
 * Loaded only on data-driven quiz and result pages. main.css already styles
 * .gq-step, .gq-option, .gq-checkbox, .gq-interstitial, .gq-nav and the rest,
 * so this file adds only what's new: the cover, the three question variants,
 * free text, errors, and the results page. main.css is untouched.
 *
 * @since 5.3.0
 */

/* ── Cover ───────────────────────────────────────────────── */

/* Headline sits above question one, not on a screen of its own, and the
   engine hides it once they answer. Sized to lead the question rather than
   compete with it. */
.gq-cover-headline {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 1.2;
	max-width: 20ch;
	margin: 0 0 1.75rem;
	text-wrap: balance;
}

.gq-hidden {
	display: none !important;
}

/* ── Question variants ───────────────────────────────────── */

/* Card: two across on desktop, one on mobile. */
.gq-variant-card .gq-options {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.gq-variant-card .gq-options {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr;          /* every card in a row matches the tallest */
	}

	/* Five of the eight card questions have an odd number of options, which
	   leaves a lone card in the last row next to a hole. Let it run full width
	   instead. */
	.gq-variant-card .gq-option:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.gq-variant-card .gq-option {
		display: flex;
		align-items: center;
		min-height: 4.5rem;
		padding: 1rem 1.25rem;
		line-height: 1.4;
	}
}

/* Slider and scale: banded answers read as a scale rather than a list, so
   they get a rail and a numbered feel. Still buttons underneath, because the
   engine only knows about .gq-option. */
.gq-variant-slider .gq-options,
.gq-variant-scale .gq-options {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-left: 2px solid var(--gray-300, #d4d4d4);
	margin-left: 0.75rem;
	padding-left: 1.25rem;
}

.gq-variant-slider .gq-option,
.gq-variant-scale .gq-option {
	position: relative;
	text-align: left;
	border-radius: 0;
	margin: 0;
	border-width: 0 0 1px 0;
}

.gq-variant-slider .gq-option:last-child,
.gq-variant-scale .gq-option:last-child {
	border-bottom-width: 0;
}

.gq-variant-slider .gq-option::before,
.gq-variant-scale .gq-option::before {
	content: "";
	position: absolute;
	left: -1.7rem;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--gray-300, #d4d4d4);
	transition: background 0.15s ease, transform 0.15s ease;
}

.gq-variant-slider .gq-option:hover::before,
.gq-variant-scale .gq-option:hover::before,
.gq-variant-slider .gq-option-selected::before,
.gq-variant-scale .gq-option-selected::before {
	background: var(--accent, #0b6);
	transform: translateY(-50%) scale(1.35);
}

/* ── Reason why, free text, errors ───────────────────────── */

.gq-reason-why {
	font-size: 0.9rem;
	opacity: 0.7;
	margin-bottom: 0.5rem;
}

.gq-freetext {
	margin-top: 0.75rem;
}

.gq-error {
	color: #b00020;
	font-size: 0.9rem;
	margin-top: 0.75rem;
}

/* ── Results page ────────────────────────────────────────── */

.gq-result {
	max-width: 46rem;
	margin: 0 auto;
	padding: 3rem 1.25rem 5rem;
	font-size: 1.075rem;
	line-height: 1.65;
}

.gq-result p {
	margin: 0 0 1.15rem;
}

.gq-result section {
	margin-bottom: 2.5rem;
}

.gq-result-lede {
	font-weight: 600;
}

.gq-result-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(1.9rem, 5vw, 2.9rem);
	line-height: 1.1;
	margin: 0 0 1.25rem;
}

.gq-result-gap {
	border-left: 3px solid var(--accent, #0b6);
	padding: 1.5rem 0 0.5rem 1.5rem;
}

.gq-result-gap h2,
.gq-result-goodnews h2,
.gq-result-offer h2 {
	font-size: 1.35rem;
	margin: 0 0 1rem;
}

.gq-result-disclaimer {
	font-size: 0.85rem;
	opacity: 0.65;
}

.gq-result-offer {
	border: 1px solid var(--gray-300, #d4d4d4);
	border-radius: 0.75rem;
	padding: 2rem 1.75rem;
}

.gq-result-price {
	font-size: 2rem;
	font-weight: 700;
	margin: 0.5rem 0 1.25rem;
}

/* Visible only while the checkout URL is unset. Deliberately ugly. */
.gq-result-todo {
	background: #fff3cd;
	border: 1px dashed #b8860b;
	padding: 0.75rem;
	font-size: 0.9rem;
}

.gq-result-missing {
	max-width: 32rem;
	margin: 0 auto;
	padding: 5rem 1.25rem;
	text-align: center;
}

/* Continue stays disabled on multi-selects until something is chosen.
   Every question is mandatory, so an untouched multi-select must not advance. */
.gq-btn-disabled,
.gq-continue:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Mid-quiz email gate ─────────────────────────────────── */

.gq-gate {
	text-align: center;
	max-width: 30rem;
	margin: 0 auto;
	padding: 1rem 0 0.5rem;
}

.gq-gate-body {
	margin-bottom: 1.5rem;
	line-height: 1.55;
}

.gq-gate .gq-input-wrap {
	margin-bottom: 1rem;
}

/* Skip is a real out, not a link dressed to be missed. Quieter than the
   primary action, still obviously pressable. */
.gq-gate-skip {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 0.75rem;
	background: none;
	border: 0;
	font-size: 0.95rem;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.75;
}

.gq-gate-skip:hover {
	opacity: 1;
}

/* ── Interstitial types ──────────────────────────────────── */

/* Interstitials are content, not spacers, so they get a panel of their own
   rather than a bare line of text on a white field. */
.gq-engine .gq-interstitial {
	max-width: 34rem;
	margin: 0 auto;
	padding: 2.25rem 2rem 2rem;
	border-radius: 0.9rem;
	background: rgba(0, 0, 0, 0.025);
	border: 1px solid rgba(0, 0, 0, 0.07);
	text-align: left;
}

.gq-interstitial-icon svg {
	width: 2.25rem;
	height: 2.25rem;
	display: block;
	margin: 0 0 1.1rem;
}

.gq-engine .gq-interstitial-stat {
	font-size: 1.08rem;
	line-height: 1.6;
	margin: 0 0 1.75rem;
}

/* A rule in the type colour, so each kind of beat is recognisable before it's
   read and the arc is visible as you move through it. */
.gq-engine .gq-interstitial::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	border-radius: 3px;
	margin-bottom: 1.5rem;
	background: currentColor;
}

.gq-int-reinforce { color: var(--green, #17915b); }
.gq-int-principle { color: var(--accent, #0b6); }
.gq-int-echo      { color: var(--accent, #0b6); }
.gq-int-absolve   { color: #b8860b; }
.gq-int-comfort   { color: #b5546a; }
.gq-int-progress  { color: var(--green, #17915b); }

/* The body copy stays neutral. Only the mark and rule carry the type colour. */
.gq-engine .gq-interstitial-stat,
.gq-engine .gq-interstitial .gq-continue-btn {
	color: var(--ink, #16181d);
}

/* Each type gets its own colour so the arc is legible at a glance:
   green while things are fine, amber once blame is being lifted,
   red-ish through the negative third. */

/* The echoed phrase is the reader's own words. Marked so it reads as a
   quotation of them rather than as our copy. */
.gq-echo {
	font-style: italic;
	font-weight: 600;
}

/* ── Result loader ───────────────────────────────────────── */

.gq-loader {
	max-width: 26rem;
	margin: 0 auto;
	padding: 6rem 1.25rem;
	text-align: center;
}

.gq-loader-ring {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.gq-loader-ring span {
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: var(--accent, #0b6);
	animation: gqPulse 1.1s ease-in-out infinite;
}

.gq-loader-ring span:nth-child(2) { animation-delay: 0.15s; }
.gq-loader-ring span:nth-child(3) { animation-delay: 0.3s; }

@keyframes gqPulse {
	0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
	40%           { opacity: 1;    transform: scale(1); }
}

.gq-loader-line {
	font-size: 1.05rem;
	margin-bottom: 1.5rem;
	min-height: 1.6em;
}

.gq-loader-track {
	height: 3px;
	background: var(--gray-300, #d4d4d4);
	border-radius: 3px;
	overflow: hidden;
}

.gq-loader-fill {
	height: 100%;
	width: 0;
	background: var(--accent, #0b6);
	transition: width 0.6s ease;
}

/* ── Result page ─────────────────────────────────────────── */

.gq-result-body .gq-wrapper { padding-bottom: 4rem; }

.gq-result-lede {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 2.5rem 0 0.5rem;
}

.gq-result-label { margin-top: 0.5rem; }

.gq-result-mechanism {
	border-top: 1px solid var(--gray-200, #e5e5e5);
	padding-top: 2rem;
}

.gq-result-cta {
	display: inline-block;
	margin-top: 0.5rem;
}

/* ── Click reliability ───────────────────────────────────── */

/* main.css animates every incoming step with translateY(12px) -> 0 over 350ms.
   Options are 61px tall with 12px gaps, so a click during that window lands in
   the gap between two of them and registers as nothing. That's the "sometimes
   I have to click twice" bug. Fade only, no movement, so a click always lands
   where it was aimed. Scoped to .gq-engine, main.css and the legacy quiz are
   untouched. */
.gq-engine .gq-step {
	animation: gqFadeFlat 0.22s ease;
}

@keyframes gqFadeFlat {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.gq-engine .gq-step { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   RESULT MODULES
   Each panel shows one thing back to the person who typed it.
   ══════════════════════════════════════════════════════════ */

.gq-mod {
	border: 1px solid rgba(0,0,0,0.09);
	border-radius: 0.9rem;
	padding: 1.75rem;
	margin: 2rem 0;
	background: #fff;
}

.gq-mod h2 {
	font-size: 1.1rem;
	margin: 0 0 1.25rem;
	letter-spacing: 0.01em;
}

.gq-mod-eyebrow {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	opacity: 0.55;
	margin: 0 0 0.5rem;
}

.gq-mod-note {
	font-size: 0.85rem;
	opacity: 0.6;
	margin: 1.25rem 0 0;
}

/* 1. Diagnosis */
.gq-mod-diagnosis {
	border-width: 2px;
	text-align: center;
	padding: 2.5rem 1.75rem;
}

.gq-diag-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(2rem, 6vw, 3.1rem);
	line-height: 1.05;
	margin: 0 0 0.75rem;
}

.gq-diag-blurb { font-size: 1.05rem; opacity: 0.75; margin: 0; }

.gq-label-broadcaster    { border-color: #2f6fd0; }
.gq-label-tinkerer       { border-color: #b8860b; }
.gq-label-guesser        { border-color: #7d5ba6; }
.gq-label-over_optimiser { border-color: #17915b; }
.gq-label-averager       { border-color: #b5546a; }

/* 2. Match bars */
.gq-bars { list-style: none; margin: 0; padding: 0; }

.gq-bar-row {
	display: grid;
	grid-template-columns: 10rem 1fr 2rem;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
	font-size: 0.92rem;
}

.gq-bar-label { opacity: 0.6; }
.gq-bar-row.is-winner .gq-bar-label { opacity: 1; font-weight: 600; }

.gq-bar-track {
	height: 0.55rem;
	background: rgba(0,0,0,0.07);
	border-radius: 1rem;
	overflow: hidden;
}

.gq-bar-fill {
	display: block;
	height: 100%;
	background: rgba(0,0,0,0.2);
	border-radius: 1rem;
}

.gq-bar-row.is-winner .gq-bar-fill { background: var(--accent, #0b6); }
.gq-bar-score { text-align: right; opacity: 0.5; font-variant-numeric: tabular-nums; }
.gq-bar-row.is-winner .gq-bar-score { opacity: 1; font-weight: 600; }

/* 3. Now versus goal */
.gq-gap-pair {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.gq-gap-tag { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.55; margin: 0 0 0.4rem; }
.gq-gap-figure { font-size: clamp(1.2rem, 3.5vw, 1.7rem); font-weight: 700; margin: 0; line-height: 1.2; }
.gq-gap-side.is-target .gq-gap-figure { color: var(--accent, #0b6); }
.gq-gap-arrow svg { width: 2.5rem; height: 1.5rem; opacity: 0.35; }

/* 4. What you told us */
.gq-chips { display: grid; gap: 0.75rem; margin: 0; }
@media (min-width: 640px) { .gq-chips { grid-template-columns: 1fr 1fr; } }

.gq-chip {
	background: rgba(0,0,0,0.03);
	border-radius: 0.6rem;
	padding: 0.85rem 1rem;
}

.gq-chip dt { font-size: 0.78rem; opacity: 0.55; margin: 0 0 0.25rem; }
.gq-chip dd { margin: 0; font-size: 0.93rem; line-height: 1.4; }

/* 5. What you know about your buyers */
.gq-attr-count { font-size: 1.6rem; margin: -0.5rem 0 1.25rem; opacity: 0.55; }
.gq-attr-count strong { font-size: 2.4rem; color: var(--accent, #0b6); opacity: 1; }

.gq-attr-list { list-style: none; margin: 0; padding: 0; }

.gq-attr {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	font-size: 0.95rem;
}

.gq-attr:last-child { border-bottom: 0; }
.gq-attr-mark svg { width: 1.1rem; height: 1.1rem; display: block; margin-top: 0.15rem; }
.gq-attr.is-have { color: inherit; }
.gq-attr.is-have .gq-attr-mark { color: var(--green, #17915b); }
.gq-attr.is-miss { opacity: 0.45; }

/* 6. Twelve months */
.gq-track { display: grid; gap: 1rem; }
@media (min-width: 640px) { .gq-track { grid-template-columns: 1fr 1fr; } }

.gq-track-path { padding: 1.1rem 1.25rem; border-radius: 0.7rem; }
.gq-track-path.is-current { background: rgba(181,84,106,0.08); border: 1px solid rgba(181,84,106,0.25); }
.gq-track-path.is-alt { background: rgba(23,145,91,0.07); border: 1px solid rgba(23,145,91,0.25); }
.gq-track-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; }
.gq-track-path p { margin: 0.4rem 0 0; font-size: 0.98rem; line-height: 1.45; }

/* ── Result v2 additions ─────────────────────────────────── */

/* Short paragraphs are the register. Give them room to be short. */
.gq-result p { margin-bottom: 1.35rem; }

.gq-attr-kicker {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 1.5rem 0 0.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(0,0,0,0.08);
}

.gq-offer-intro { font-weight: 600; }

.gq-offer-list {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
}

.gq-offer-list li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.75rem;
	font-size: 0.97rem;
	line-height: 1.45;
}

.gq-offer-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75rem;
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 50%;
	background: var(--green, #17915b);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 13 9 18 20 6"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 13 9 18 20 6"/></svg>') center / contain no-repeat;
}

.gq-offer-proof {
	font-size: 0.88rem;
	opacity: 0.65;
	border-left: 3px solid rgba(0,0,0,0.12);
	padding-left: 1rem;
}

/* Risk reversal sits between the price and the button, quiet but read. */
.gq-offer-guarantee {
	font-size: 0.92rem;
	opacity: 0.75;
	max-width: 34rem;
	margin: 0 0 1.25rem;
}

/* ══════════════════════════════════════════════════════════
   RESULT v3 — the letter
   ══════════════════════════════════════════════════════════ */

/* Hero. The label is the headline. Tight vertical rhythm: the eyebrow sits
   on the name, the deck hangs off it, and the lead starts a clear beat later. */
.gq-hero {
	text-align: center;
	padding: 1rem 0 0;
	border-bottom: 0;
}

.gq-hero .gq-mod-eyebrow {
	margin: 0 0 0.35rem;
}

.gq-hero-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(2.4rem, 7vw, 4rem);
	line-height: 1.02;
	margin: 0 0 0.9rem;
}

.gq-label-broadcaster    .gq-hero-name { color: #2f5fa8; }
.gq-label-tinkerer       .gq-hero-name { color: #9a7409; }
.gq-label-guesser        .gq-hero-name { color: #6a4d91; }
.gq-label-over_optimiser .gq-hero-name { color: #14724a; }
.gq-label-averager       .gq-hero-name { color: #a04a5e; }

.gq-hero-deck {
	font-size: 1.15rem;
	line-height: 1.5;
	max-width: 38rem;
	margin: 0 auto;
	opacity: 0.85;
}

.gq-lead {
	margin-top: 2.5rem;
}

/* Exhibits. Their answer, set like evidence. */
.gq-exhibit {
	margin: 1.75rem 0;
}

.gq-exhibit figcaption {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.55;
	margin-bottom: 0.4rem;
}

.gq-exhibit blockquote {
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid currentColor;
	background: rgba(0, 0, 0, 0.035);
	border-radius: 0 0.6rem 0.6rem 0;
	font-size: 1.1rem;
	font-style: italic;
	line-height: 1.5;
}

.gq-evidence-close {
	font-weight: 600;
}

/* The turn. What the page now knows, as a card of chips. */
.gq-knows {
	display: grid;
	gap: 0.6rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 0.9rem;
	background: #fff;
}

@media (min-width: 640px) {
	.gq-knows { grid-template-columns: 1fr 1fr; }
}

.gq-know {
	background: rgba(0, 0, 0, 0.03);
	border-radius: 0.6rem;
	padding: 0.7rem 0.9rem;
}

.gq-know dt {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	opacity: 0.55;
	margin-bottom: 0.2rem;
}

.gq-know dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.4;
}

.gq-turn-landing {
	font-weight: 600;
}

/* Price anchor strip. Three lines, the last one lands. */
.gq-anchor {
	margin: 1.75rem 0;
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 0.9rem;
	overflow: hidden;
}

.gq-anchor-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.9rem 1.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gq-anchor-row:last-child {
	border-bottom: 0;
	background: rgba(23, 145, 91, 0.07);
}

.gq-anchor-row:last-child .gq-anchor-val {
	color: var(--green, #17915b);
	font-size: 1.4rem;
}

.gq-anchor-tag { font-size: 0.92rem; opacity: 0.75; }
.gq-anchor-val { font-weight: 700; white-space: nowrap; }

/* Proof stats. Big numbers, scannable. */
.gq-stats {
	display: grid;
	gap: 0.9rem;
	margin: 1.5rem 0;
}

@media (min-width: 640px) {
	.gq-stats { grid-template-columns: 1fr 1fr; }
}

.gq-stat {
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 0.9rem;
	padding: 1.25rem 1.25rem 1rem;
	background: #fff;
}

.gq-stat-num {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 2.2rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
	color: var(--accent, #0b6);
}

.gq-stat-line {
	font-size: 0.92rem;
	line-height: 1.45;
	margin: 0;
	opacity: 0.85;
}

/* Objections */
.gq-objection {
	margin-bottom: 1.5rem;
}

.gq-objection-q {
	font-weight: 700;
	margin-bottom: 0.35rem;
}

/* Close */
.gq-close {
	background: rgba(0, 0, 0, 0.03);
	border-radius: 0.9rem;
	padding: 2rem 1.75rem;
	text-align: left;
}

.gq-sources {
	font-size: 0.78rem;
	opacity: 0.5;
	margin-top: 3rem;
	line-height: 1.5;
}

/* Sticky buy bar, shown by JS only after the offer has been seen. */
.gq-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
	transform: translateY(110%);
	transition: transform 0.25s ease;
	z-index: 50;
}

.gq-buybar.is-visible { transform: translateY(0); }

.gq-buybar-price { font-weight: 700; font-size: 1.1rem; }
.gq-buybar .gq-submit-btn { margin: 0; padding: 0.6rem 1.4rem; }

/* ── Ellipsis-led lists, the house list style ────────────── */

.gq-dots-intro { margin-bottom: 0.5rem; }

.gq-dots {
	list-style: none;
	margin: 0 0 1.35rem;
	padding: 0;
}

.gq-dots li {
	padding: 0.3rem 0 0.3rem 2rem;
	position: relative;
	line-height: 1.5;
}

.gq-dots li::before {
	content: "...";
	position: absolute;
	left: 0.25rem;
	top: 0.15rem;
	letter-spacing: 0.05em;
	opacity: 0.6;
}

.gq-attr-fix {
	font-weight: 600;
	margin-top: 0.75rem;
}

/* ── Quiz option contrast ────────────────────────────────── */

/* The options read as flat panels on an off-white page. Make them read as
   buttons: real border, real shadow, a hover that moves. Scoped to the new
   engine so the legacy quiz is untouched. */
.gq-engine .gq-option,
.gq-engine .gq-checkbox {
	background: #ffffff;
	border: 1.5px solid rgba(15, 23, 32, 0.16);
	box-shadow: 0 1px 3px rgba(15, 23, 32, 0.07);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	cursor: pointer;
}

.gq-engine .gq-option:hover,
.gq-engine .gq-checkbox:hover {
	border-color: var(--accent, #0b6);
	box-shadow: 0 4px 12px rgba(15, 23, 32, 0.12);
	transform: translateY(-1px);
}

.gq-engine .gq-option-selected,
.gq-engine .gq-checkbox-selected {
	border-color: var(--accent, #0b6);
	border-width: 2px;
	background: rgba(23, 145, 91, 0.05);
	box-shadow: 0 1px 3px rgba(15, 23, 32, 0.07);
}

/* ══════════════════════════════════════════════════════════
   Engine gaps build, 2026-07-29. Everything below serves the
   rebuild's new step types and results modules. No selector
   here touches markup the live v1 config renders.
   ══════════════════════════════════════════════════════════ */

/* ── Text steps (name capture, the enrichment URL) ───────── */

.gq-text-step {
	margin: 1.25rem 0 0.5rem;
}

.gq-text-step .gq-text-input {
	font-size: 1.1rem;
	padding: 0.9rem 1rem;
	width: 100%;
}

/* ── Conditional callout under a choice ──────────────────── */

.gq-callout {
	margin: 0.9rem 0 0;
	padding: 0.7rem 1rem;
	border-left: 3px solid var(--accent, #0b6);
	background: rgba(23, 145, 91, 0.06);
	border-radius: 0 6px 6px 0;
	font-size: 0.95rem;
	animation: gq-callout-in 220ms ease-out;
}

@keyframes gq-callout-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* ── Relate run: statement first, thumb-speed answers ────── */

.gq-variant-relate .gq-question {
	font-family: var(--font-serif, Georgia, serif);
	font-style: italic;
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	padding: 1.1rem 1.25rem;
	border-left: 3px solid var(--accent, #0b6);
	background: rgba(15, 23, 32, 0.03);
	border-radius: 0 8px 8px 0;
}

.gq-variant-relate .gq-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: 0.6rem;
}

.gq-variant-relate .gq-option {
	text-align: center;
	justify-content: center;
	padding: 0.85rem 0.5rem;
}

/* ── The running stack toast ─────────────────────────────── */

.gq-stack-toast {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translate(-50%, 120%);
	background: #0f1720;
	color: #fff;
	font-size: 0.9rem;
	padding: 0.6rem 1.1rem;
	border-radius: 99px;
	box-shadow: 0 6px 20px rgba(15, 23, 32, 0.25);
	opacity: 0;
	transition: transform 260ms ease, opacity 260ms ease;
	z-index: 60;
	pointer-events: none;
	max-width: min(92vw, 30rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gq-stack-toast.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gq-stack-toast { transition: opacity 100ms ease; transform: translate(-50%, 0); }
}

/* ── Machine interstitials: label lines + footnotes ──────── */

.gq-int-labels {
	margin: 0 0 1.1rem;
	text-align: left;
	border: 1px solid rgba(15, 23, 32, 0.12);
	border-radius: 10px;
	padding: 1rem 1.15rem;
	background: #fff;
}

.gq-int-label-line {
	margin: 0.35rem 0;
	font-size: 0.98rem;
}

.gq-int-label-line .gq-enrich {
	font-weight: 600;
}

.gq-interstitial-heading {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(1.2rem, 3vw, 1.55rem);
	margin: 0 0 0.9rem;
}

.gq-int-footnote {
	font-size: 0.78rem;
	opacity: 0.65;
	margin-top: 0.9rem;
}

/* ── Plan preview tiles (blurred contents, readable titles) ─ */

.gq-preview-tiles {
	display: grid;
	gap: 0.7rem;
	margin: 1.1rem 0;
	text-align: left;
}

@media (min-width: 720px) {
	.gq-preview-tiles { grid-template-columns: 1fr 1fr; }
}

.gq-preview-tile {
	border: 1px solid rgba(15, 23, 32, 0.12);
	border-radius: 10px;
	padding: 0.9rem 1rem;
	background: #fff;
}

.gq-preview-title {
	margin: 0 0 0.55rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.gq-preview-blur span {
	display: block;
	height: 0.55rem;
	border-radius: 4px;
	background: rgba(15, 23, 32, 0.12);
	filter: blur(2.5px);
	margin: 0.4rem 0;
}

.gq-preview-blur span:nth-child(2) { width: 85%; }
.gq-preview-blur span:nth-child(3) { width: 60%; }

/* ── Processing with questions ───────────────────────────── */

.gq-processing {
	padding: 0.5rem 0;
}

.gq-proc-bar {
	margin: 0 0 1.1rem;
	opacity: 0.35;
	transition: opacity 200ms ease;
}

.gq-proc-bar.is-running,
.gq-proc-bar.is-done {
	opacity: 1;
}

.gq-proc-label {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	text-align: left;
}

.gq-proc-track {
	height: 6px;
	border-radius: 4px;
	background: rgba(15, 23, 32, 0.1);
	overflow: hidden;
}

.gq-proc-fill {
	height: 100%;
	width: 0;
	background: var(--accent, #0b6);
	transition-property: width;
	transition-timing-function: ease-in-out;
}

.gq-proc-question {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(15, 23, 32, 0.1);
	animation: gq-callout-in 220ms ease-out;
}

.gq-proc-q-heading {
	font-size: 1.1rem;
	margin: 0 0 0.9rem;
}

/* ── Reveal ──────────────────────────────────────────────── */

.gq-reveal {
	text-align: center;
	padding: 2rem 0;
}

.gq-reveal-line {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	margin: 0.9rem 0;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 500ms ease, transform 500ms ease;
}

.gq-reveal-line.is-shown {
	opacity: 1;
	transform: none;
}

.gq-reveal-cta {
	margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.gq-reveal-line { opacity: 1; transform: none; transition: none; }
}

/* ── Results: transformation pair ────────────────────────── */

.gq-mod-transform .gq-transform-cols {
	display: grid;
	gap: 1rem;
}

@media (min-width: 720px) {
	.gq-mod-transform .gq-transform-cols { grid-template-columns: 1fr 1fr; }
}

.gq-transform-col {
	border-radius: 10px;
	padding: 1.1rem 1.2rem;
	border: 1px solid rgba(15, 23, 32, 0.12);
}

.gq-transform-col.is-after {
	border-color: var(--accent, #0b6);
	background: rgba(23, 145, 91, 0.05);
}

.gq-transform-tag {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
	margin: 0 0 0.6rem;
}

.gq-transform-item {
	margin: 0.5rem 0;
	font-size: 0.98rem;
}

/* ── Results: dimension scores ───────────────────────────── */

.gq-dim {
	margin: 0 0 1rem;
}

.gq-dim-head {
	display: flex;
	justify-content: space-between;
	font-size: 0.92rem;
	margin-bottom: 0.3rem;
}

.gq-dim-pct { opacity: 0.7; }

.gq-dim-track {
	height: 8px;
	border-radius: 5px;
	background: rgba(15, 23, 32, 0.1);
	overflow: hidden;
}

.gq-dim-fill {
	height: 100%;
	border-radius: 5px;
	background: var(--accent, #0b6);
}

/* ── Results: future pace beyond-line ────────────────────── */

.gq-futurepace-beyond {
	font-style: italic;
	border-left: 3px solid var(--accent, #0b6);
	padding-left: 1rem;
}

/* ── Results: plan tiles, price frame, bonus ─────────────── */

.gq-offer-subtitle {
	font-size: 0.95rem;
	opacity: 0.75;
	margin: -0.5rem 0 1rem;
}

.gq-plan-tiles {
	display: grid;
	gap: 0.7rem;
	margin: 1.1rem 0;
}

@media (min-width: 720px) {
	.gq-plan-tiles { grid-template-columns: 1fr 1fr; }
}

.gq-plan-tile {
	border: 1px solid rgba(15, 23, 32, 0.12);
	border-radius: 10px;
	padding: 0.9rem 1rem;
	background: #fff;
}

.gq-plan-title { margin: 0; font-weight: 600; font-size: 0.95rem; }

.gq-plan-from {
	margin: 0.35rem 0 0;
	font-size: 0.82rem;
	opacity: 0.7;
}

.gq-price-frame {
	border-top: 1px solid rgba(15, 23, 32, 0.1);
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.gq-bonus {
	border: 2px solid var(--accent, #0b6);
	border-radius: 10px;
	padding: 1.1rem 1.2rem;
	margin: 1.25rem 0;
	background: rgba(23, 145, 91, 0.05);
}

.gq-bonus-heading {
	font-weight: 700;
	margin: 0 0 0.4rem;
}

.gq-bonus-body { margin: 0 0 0.6rem; }

.gq-bonus-timer {
	font-variant-numeric: tabular-nums;
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0;
	color: var(--accent, #0b6);
}

/* ── Cover lead-in + legal footer (2026-07-30) ───────────── */

/* The sub carries the benefit and stays at body weight. The lead-in is meta,
   what the quiz costs them in time, so it sits smaller and quieter. */
.gq-engine .gq-cover-leadin {
	font-size: 0.92rem;
	opacity: 0.7;
	margin: -0.75rem 0 1.5rem;
}

.gq-cover-legal {
	max-width: 34rem;
	margin: 2.5rem auto 0;
	padding: 1.25rem 1.25rem 2rem;
	border-top: 1px solid rgba(15, 23, 32, 0.1);
	text-align: left;
}

.gq-legal-line,
.gq-legal-note {
	font-size: 0.78rem;
	line-height: 1.6;
	opacity: 0.62;
	margin: 0 0 0.5rem;
}

.gq-legal-line a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gq-legal-line a:hover {
	color: var(--accent, #0b6);
}

/* ══════════════════════════════════════════════════════════════
   Sliders (the maths trio), 5.5.0
   ══════════════════════════════════════════════════════════════ */

.gq-slider { margin: 1.4rem 0 0.6rem; }
.gq-slider-value { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 0.9rem; }
.gq-slider-input { width: 100%; accent-color: var(--accent, #0b6); cursor: pointer; }
.gq-slider-ends { display: flex; justify-content: space-between; font-size: 0.8rem; opacity: 0.65; margin-top: 0.3rem; }
.gq-slider-subline { margin-top: -0.3rem; }

/* ══════════════════════════════════════════════════════════════
   Report frame (results v3), 5.5.0
   Caption-level prose, visual modules. Uses the letter frame's
   base type styles; this is layout only.
   ══════════════════════════════════════════════════════════════ */

.gq-report .gq-mod { margin: 2.6rem 0; }
.gq-report-hero { margin-bottom: 2.2rem; }
.gq-report-statement { font-style: italic; opacity: 0.85; }
.gq-report-mismatch { font-size: 0.9rem; opacity: 0.7; }
.gq-report-mirror { list-style: none; padding: 0; margin: 0.8rem 0; }
.gq-report-mirror li { padding: 0.55rem 0 0.55rem 1.4rem; position: relative; }
.gq-report-mirror li::before { content: "•"; position: absolute; left: 0.2rem; color: var(--accent, #0b6); }
.gq-report-fix { border-left: 3px solid var(--accent, #0b6); padding-left: 0.9rem; }

.gq-tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; margin: 0.9rem 0; }
.gq-tile { border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 0.8rem; }
.gq-tile-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; margin: 0 0 0.25rem; }
.gq-tile-val { font-weight: 700; margin: 0; }
.gq-tile.is-amber { background: #fff6e5; border-color: #e8b84a; }
.gq-tile.is-amber .gq-tile-val { color: #a06a00; }

.gq-report-chart { width: 100%; height: auto; margin: 1rem 0 0.4rem; }
.gq-ch-axis { stroke: rgba(0,0,0,0.25); stroke-width: 1; }
.gq-ch-month { font-size: 12px; fill: rgba(0,0,0,0.5); }
.gq-ch-today { stroke: #8a8f98; stroke-width: 2.5; stroke-dasharray: 6 5; }
.gq-ch-cons { stroke: #e8b84a; stroke-width: 2.5; }
.gq-ch-doc { stroke: var(--accent, #0b6); stroke-width: 3; }
text.gq-ch-today { fill: #8a8f98; stroke: none; font-weight: 700; font-size: 15px; }
text.gq-ch-cons { fill: #b8860b; stroke: none; font-weight: 700; font-size: 15px; }
text.gq-ch-doc { fill: var(--accent, #0b6); stroke: none; font-weight: 700; font-size: 15px; }
.gq-chart-legend { list-style: none; padding: 0; margin: 0.4rem 0 1rem; font-size: 0.85rem; }
.gq-chart-legend li { padding-left: 1.3rem; position: relative; margin: 0.25rem 0; }
.gq-chart-legend li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.85rem; height: 3px; border-radius: 2px; background: #8a8f98; }
.gq-chart-legend li.gq-leg-1::before { background: #e8b84a; }
.gq-chart-legend li.gq-leg-2::before { background: var(--accent, #0b6); }
.gq-report-money { font-weight: 600; }
.gq-bench-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1rem 0; }
.gq-bench-card { border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 1rem; }
.gq-bench-card.is-asking { border-color: var(--accent, #0b6); }
.gq-bench-val { font-weight: 700; margin: 0.3rem 0 0; }

.gq-note-box { border: 1px solid rgba(0,0,0,0.15); border-radius: 12px; padding: 1.3rem 1.5rem; background: #fbfaf7; }
.gq-note-kicker { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.gq-note-sig { font-weight: 700; margin-bottom: 0; }

.gq-route-steps { counter-reset: route; list-style: none; padding: 0; }
.gq-route-steps li { counter-increment: route; padding: 0.7rem 0 0.7rem 2.4rem; position: relative; }
.gq-route-steps li::before { content: counter(route); position: absolute; left: 0; top: 0.8rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent, #0b6); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.gq-route-title { font-weight: 700; margin: 0 0 0.2rem; }
.gq-route-body { margin: 0; }
.gq-first-move { border-left: 3px solid var(--accent, #0b6); padding-left: 0.9rem; margin: 1.1rem 0; }
.gq-first-move-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin: 0 0 0.2rem; }
.gq-name-block { text-align: center; margin: 1.6rem 0 0; }
.gq-name-brand { font-size: 1.35rem; font-weight: 800; margin: 0.2rem 0; }
.gq-name-spine { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; margin: 0; }
.gq-name-subtitle { opacity: 0.75; font-size: 0.9rem; }

.gq-build-grid { border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; }
.gq-build-ticks, .gq-build-pending { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.4rem; }
.gq-build-ticks li::before { content: "✓ "; color: var(--accent, #0b6); font-weight: 700; }
.gq-build-badge { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin: 0.9rem 0 0.3rem; }
.gq-build-pending li::before { content: "· "; }
.gq-build-arrives-tag { font-weight: 700; margin: 1.1rem 0 0.3rem; }
.gq-build-closer { font-size: 0.92rem; opacity: 0.85; }

.gq-price-card { border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 1rem 1.2rem; margin: 0.7rem 0; }
.gq-price-card-title { font-weight: 700; margin: 0; }
.gq-price-card-price { color: #a04545; font-weight: 700; margin: 0.15rem 0; }
.gq-price-card-body { margin: 0; font-size: 0.95rem; }

.gq-report-price { text-align: center; }
.gq-price-chip { display: inline-block; background: #fff6e5; border: 1px solid #e8b84a; border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.85rem; }
.gq-price-line { opacity: 0.85; }

.gq-bonus-keyed { font-weight: 600; margin-top: 0.6rem; }
.gq-guarantee-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.gq-guarantee-card { border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 1rem 1.2rem; }
.gq-guarantee-title { font-weight: 700; margin: 0 0 0.3rem; }

.gq-process-steps { counter-reset: proc; list-style: none; padding: 0; }
.gq-process-steps li { counter-increment: proc; padding: 0.55rem 0 0.55rem 2.4rem; position: relative; }
.gq-process-steps li::before { content: counter(proc); position: absolute; left: 0; top: 0.62rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--accent, #0b6); color: var(--accent, #0b6); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.gq-process-title { font-weight: 700; margin: 0 0 0.15rem; }

.gq-doubt { border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 0.4rem 1rem; margin: 0.55rem 0; }
.gq-doubt summary { font-weight: 700; cursor: pointer; padding: 0.5rem 0; }
.gq-proof-meta { font-weight: 600; font-style: italic; }

@media (max-width: 560px) {
	.gq-bench-cards, .gq-guarantee-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   Report frame v2 — the diagnostic-report skin (2026-07-31).
   Supersedes the v1 scaffolding above by cascade order.
   The page renders as a dark report document on the site canvas,
   MadMuscles' grammar: cards, badges, scale markers, node pills.
   ALL colour comes from the token block below; Pete's palette
   pass replaces these provisional values in one place.
   ══════════════════════════════════════════════════════════════ */

.gq-report {
	--rep-bg: #101216;
	--rep-card: #191c22;
	--rep-card-2: #21252d;
	--rep-border: rgba(255, 255, 255, 0.09);
	--rep-text: #eceef2;
	--rep-muted: rgba(236, 238, 242, 0.62);
	--rep-accent: #ff6a2b;      /* provisional, replaced by palette pass */
	--rep-accent-soft: rgba(255, 106, 43, 0.14);
	--rep-good: #2fd08a;
	--rep-warn: #ffb020;
	--rep-warn-soft: rgba(255, 176, 32, 0.14);
	background: var(--rep-bg);
	color: var(--rep-text);
	border-radius: 18px;
	padding: clamp(1.2rem, 4vw, 2.8rem);
}
.gq-report h1, .gq-report h2 { color: var(--rep-text); }
.gq-report .gq-mod-note, .gq-report .gq-result-disclaimer, .gq-report .gq-int-footnote, .gq-report .gq-sources { color: var(--rep-muted); }

/* Numbered section headers: the document affordance. */
.gq-report { counter-reset: repsec; }
.gq-report .gq-mod > h2 { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0; }
.gq-report .gq-mod > h2::before {
	counter-increment: repsec;
	content: counter(repsec, decimal-leading-zero);
	font-size: 0.8em; font-weight: 800; color: var(--rep-accent);
	letter-spacing: 0.06em;
}

/* Masthead */
.gq-report-masthead { text-align: center; margin-bottom: 1.6rem; }
.gq-report-badge {
	display: inline-block; background: var(--rep-accent); color: #fff;
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
	padding: 0.35rem 0.9rem; border-radius: 999px;
}
.gq-report-prepared { color: var(--rep-muted); font-size: 0.9rem; margin: 0.6rem 0 0; }

/* Hero card */
.gq-report-hero {
	background: var(--rep-card); border: 1px solid var(--rep-border);
	border-radius: 16px; padding: 1.6rem 1.7rem; margin-bottom: 2rem;
}
.gq-report-hero .gq-mod-eyebrow { display: none; } /* masthead replaced it */
.gq-report-statement { color: var(--rep-muted); }
.gq-report-hero .gq-hero-name { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.25; }
.gq-report-mirror li { border-bottom: 1px solid var(--rep-border); padding: 0.7rem 0 0.7rem 2rem; }
.gq-report-mirror li:last-child { border-bottom: 0; }
.gq-report-mirror li::before {
	content: "!"; color: var(--rep-warn); background: var(--rep-warn-soft);
	width: 1.25rem; height: 1.25rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 0.8rem; top: 0.75rem;
}
.gq-report-fix { border-left: 3px solid var(--rep-good); }

/* Severity scale (the honest metabolic-age move) */
.gq-severity { margin: 1.3rem 0 0.4rem; }
.gq-severity-track {
	position: relative; height: 10px; border-radius: 6px;
	background: linear-gradient(90deg, var(--rep-good), var(--rep-warn) 55%, #ff4d4d);
}
.gq-severity-marker {
	position: absolute; top: 50%; transform: translate(-50%, -50%);
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; border: 4px solid var(--rep-bg); box-shadow: 0 0 0 2px #fff;
}
.gq-severity-label { color: var(--rep-muted); font-size: 0.88rem; margin: 0.55rem 0 0; }
.gq-severity-label strong { color: var(--rep-text); }

/* Tiles */
.gq-report .gq-tile {
	background: var(--rep-card); border: 1px solid var(--rep-border);
	border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.gq-report .gq-tile-tag { color: var(--rep-muted); }
.gq-report .gq-tile.is-amber { background: var(--rep-card); border-color: var(--rep-warn); }
.gq-report .gq-tile.is-amber .gq-tile-val {
	display: inline-block; color: var(--rep-warn); background: var(--rep-warn-soft);
	padding: 0.15rem 0.7rem; border-radius: 999px; font-weight: 800;
}

/* Chart canvas */
.gq-report-projection { background: var(--rep-card); border: 1px solid var(--rep-border); border-radius: 16px; padding: 1.5rem 1.6rem; }
.gq-report-chart { background: var(--rep-card-2); border-radius: 12px; padding: 0.4rem; }
.gq-ch-axis { stroke: rgba(255, 255, 255, 0.18); }
.gq-ch-month { fill: var(--rep-muted); }
.gq-ch-today { stroke: rgba(236, 238, 242, 0.45); }
.gq-ch-cons { stroke: var(--rep-warn); }
.gq-ch-doc { stroke: var(--rep-accent); stroke-width: 3.5; }
.gq-ch-band { fill: var(--rep-warn-soft); stroke: none; }
.gq-ch-band-label { fill: var(--rep-warn); font-size: 14px; font-weight: 700; }
.gq-ch-node rect { fill: var(--rep-card-2); stroke-width: 2; }
.gq-ch-node.gq-ch-today rect { stroke: rgba(236, 238, 242, 0.45); }
.gq-ch-node.gq-ch-cons rect { stroke: var(--rep-warn); }
.gq-ch-node.gq-ch-doc rect { stroke: var(--rep-accent); }
.gq-ch-node text { fill: var(--rep-text); font-weight: 800; font-size: 15px; stroke: none; }
.gq-report .gq-chart-legend li::before { background: rgba(236, 238, 242, 0.45); }
.gq-report .gq-chart-legend li.gq-leg-1::before { background: var(--rep-warn); }
.gq-report .gq-chart-legend li.gq-leg-2::before { background: var(--rep-accent); }
.gq-report-money { background: var(--rep-warn-soft); border-radius: 10px; padding: 0.8rem 1rem; }

/* Route + name block */
.gq-report .gq-route-steps li::before { background: var(--rep-accent); }
.gq-report .gq-first-move { border-left-color: var(--rep-accent); background: var(--rep-accent-soft); border-radius: 0 10px 10px 0; padding: 0.8rem 1rem; }
.gq-report .gq-name-block { background: var(--rep-card); border: 1px solid var(--rep-border); border-radius: 14px; padding: 1.4rem; }
.gq-report .gq-name-spine { color: var(--rep-accent); font-weight: 800; }

/* Build grid */
.gq-report .gq-build-grid { background: var(--rep-card); border-color: var(--rep-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.gq-report .gq-build-ticks li::before {
	content: "✓"; color: #fff; background: var(--rep-good);
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.15rem; height: 1.15rem; border-radius: 50%; font-size: 0.75rem;
	margin-right: 0.45rem;
}
.gq-report .gq-build-badge {
	display: inline-block; background: var(--rep-accent); color: #fff;
	border-radius: 999px; padding: 0.3rem 0.85rem; opacity: 1;
	font-weight: 800;
}
.gq-report .gq-offer-list li { padding: 0.5rem 0 0.5rem 1.9rem; position: relative; border-bottom: 1px solid var(--rep-border); }
.gq-report .gq-offer-list li:last-child { border-bottom: 0; }
.gq-report .gq-offer-list li::before {
	content: "✓"; position: absolute; left: 0; top: 0.55rem;
	color: #fff; background: var(--rep-accent);
	width: 1.15rem; height: 1.15rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}

/* Price cards + the transaction zone */
.gq-report .gq-price-card { background: var(--rep-card); border-color: var(--rep-border); }
.gq-report .gq-price-card-price { color: var(--rep-warn); }
.gq-report-price {
	background: var(--rep-card); border: 2px solid var(--rep-accent);
	border-radius: 18px; padding: 2rem 1.6rem;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.gq-report .gq-price-chip { background: var(--rep-warn-soft); border-color: var(--rep-warn); color: var(--rep-warn); font-weight: 700; }
.gq-report .gq-result-price { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 900; margin: 0.6rem 0 0.2rem; }
.gq-report .gq-result-cta {
	display: block; width: 100%; text-align: center;
	background: var(--rep-accent); border-radius: 999px;
	padding: 1rem; font-weight: 800; font-size: 1.05rem;
}
.gq-report .gq-result-todo { color: var(--rep-muted); }

/* Bonus + timer bar */
.gq-timer-bar {
	display: flex; justify-content: space-between; align-items: center;
	background: var(--rep-card-2); border: 1px solid var(--rep-border);
	border-radius: 10px; padding: 0.7rem 1rem; margin-bottom: 0.8rem;
	font-weight: 700;
}
.gq-timer-bar-clock { color: var(--rep-accent); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.gq-report .gq-bonus { background: var(--rep-card); border: 1px solid var(--rep-good); border-radius: 14px; }
.gq-report .gq-bonus-timer { color: var(--rep-good); font-variant-numeric: tabular-nums; }

/* Guarantees, process, doubts, proof */
.gq-report .gq-guarantee-card { background: var(--rep-card); border-color: var(--rep-border); }
.gq-report .gq-guarantee-title::before { content: "✓ "; color: var(--rep-good); }
.gq-report .gq-process-steps li::before { border-color: var(--rep-accent); color: var(--rep-accent); background: var(--rep-card); }
.gq-report .gq-doubt { background: var(--rep-card); border-color: var(--rep-border); }
.gq-report .gq-doubt[open] { border-color: var(--rep-accent); }
.gq-report .gq-stat { background: var(--rep-card); border: 1px solid var(--rep-border); border-radius: 12px; padding: 1rem; }
.gq-report .gq-stat-num { color: var(--rep-accent); font-size: 1.6rem; font-weight: 900; margin: 0 0 0.2rem; }
.gq-report .gq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; }
.gq-report .gq-proof-meta { border-left: 3px solid var(--rep-accent); padding-left: 0.9rem; }

/* The buy bar inherits the accent */
.gq-buybar .gq-buybar-clock { color: var(--rep-accent); font-weight: 800; margin-right: 0.6rem; font-variant-numeric: tabular-nums; }

/* Typography alignment with the 5.5.1 theme pass (Archivo display face):
   Archivo needs 800 + tight tracking to carry what Source Serif held at 700. */
.gq-wrapper h1, .gq-wrapper h2, .gq-wrapper h3, .gq-wrapper .gq-question, .gq-wrapper .gq-interstitial-heading {
	font-weight: 800; line-height: 1.12; letter-spacing: -0.025em;
}
.gq-wrapper h1, .gq-wrapper .gq-hero-name { letter-spacing: -0.037em; }
.gq-wrapper h2 { letter-spacing: -0.032em; }

/* Report page goes full-bleed dark (body-scoped so the letter frame and the
   live result page are untouched). Contrast pass: the theme's blue heading
   colour loses to the report's own tokens, and the dim tones brighten. */
body.gq-report-page { background: #101216; }
body.gq-report-page .gq-wrapper { max-width: none; padding-left: 0; padding-right: 0; }
body.gq-report-page .gq-header { max-width: 900px; margin: 0 auto; padding: 1.2rem clamp(1rem, 4vw, 2rem); }
body.gq-report-page .gq-report { border-radius: 0; max-width: none; }
body.gq-report-page .gq-report > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.gq-report { --rep-text: #f4f6fa; --rep-muted: rgba(244, 246, 250, 0.72); }
.gq-report .gq-hero-name,
.gq-report .gq-mod > h2,
.gq-report h1, .gq-report h2, .gq-report h3 { color: var(--rep-text) !important; }
.gq-report .gq-report-statement, .gq-report p { color: var(--rep-text); }
.gq-report .gq-mod-note, .gq-report .gq-result-disclaimer, .gq-report .gq-int-footnote,
.gq-report .gq-sources, .gq-report .gq-report-prepared, .gq-report .gq-tile-tag,
.gq-report .gq-severity-label, .gq-report .gq-report-statement { color: var(--rep-muted); }

/* Kill the letter-frame's white section backgrounds inside the report:
   every module is a dark card, inner elements a shade lighter for depth. */
.gq-report .gq-mod {
	background: var(--rep-card);
	border: 1px solid var(--rep-border);
	border-radius: 16px;
	padding: 1.5rem 1.6rem;
}
.gq-report .gq-tile, .gq-report .gq-price-card, .gq-report .gq-doubt, .gq-report .gq-stat,
.gq-report .gq-bonus, .gq-report .gq-guarantee-card, .gq-report .gq-build-grid,
.gq-report .gq-name-block, .gq-report .gq-note-box, .gq-report .gq-timer-bar {
	background: var(--rep-card-2);
}
.gq-report .gq-report-price { border: 2px solid var(--rep-accent); }
.gq-report .gq-report-chart { background: var(--rep-bg); }

/* ══════════════════════════════════════════════════════════════
   Report skin: LIGHT, on the brand identity (Pete, 2026-07-31).
   The dark scheme above was a provisional misread of the MM
   reference (visualisation grammar wanted, not its palette).
   Settled brand values: ground #EBEEF0, border #8C8C85, Archivo.
   Accent stays provisional until the palette chat completes.
   ══════════════════════════════════════════════════════════════ */

.gq-report {
	--rep-bg: #EBEEF0;
	--rep-card: #FFFFFF;
	--rep-card-2: #F4F5F3;
	--rep-border: rgba(140, 140, 133, 0.38);
	--rep-text: #14161A;
	--rep-muted: rgba(20, 22, 26, 0.64);
	--rep-accent: #ff6a2b;      /* provisional, awaiting the palette pass */
	--rep-accent-soft: rgba(255, 106, 43, 0.12);
	--rep-good: #178a55;
	--rep-warn: #a86a00;
	--rep-warn-soft: rgba(168, 106, 0, 0.12);
}
body.gq-report-page, body.gq-report-page .gq-wrapper { background: #EBEEF0 !important; }
.gq-report { background: var(--rep-bg); }
.gq-report .gq-mod, .gq-report-hero { box-shadow: 0 6px 22px rgba(20, 22, 26, 0.07); }
.gq-report .gq-report-price { box-shadow: 0 10px 30px rgba(20, 22, 26, 0.12); }
.gq-ch-axis { stroke: rgba(20, 22, 26, 0.25); }
.gq-ch-today { stroke: rgba(20, 22, 26, 0.4); }
.gq-ch-node.gq-ch-today rect { stroke: rgba(20, 22, 26, 0.4); }
.gq-ch-node rect { fill: #FFFFFF; }
.gq-ch-node text { fill: var(--rep-text); }
.gq-report .gq-chart-legend li::before { background: rgba(20, 22, 26, 0.4); }
.gq-severity-marker { border-color: #FFFFFF; box-shadow: 0 0 0 2px rgba(20, 22, 26, 0.55); }
.gq-report .gq-report-chart { background: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════
   FINAL palette tokens from the theme session (light, AA-measured,
   2026-07-31). Supersedes every provisional --rep-* block above.
   Additions wired here: the accent fill/text split, --rep-danger
   replacing the hardcoded gradient red, --rep-neutral for the
   chart baseline.
   ══════════════════════════════════════════════════════════════ */

.gq-report {
	--rep-bg:          #EBEEF0;
	--rep-card:        #FFFFFF;
	--rep-card-2:      #DFE4E8;
	--rep-border:      #7D858A;
	--rep-text:        #16181D;
	--rep-muted:       #60676B;
	--rep-accent:      #059DD9;
	--rep-accent-text: #03719C;
	--rep-accent-soft: rgba(5, 157, 217, 0.12);
	--rep-good:        #0A7A64;
	--rep-warn:        #7A5A0F;
	--rep-danger:      #A32C25;
	--rep-warn-soft:   rgba(122, 90, 15, 0.14);
	--rep-neutral:     #8C959C;
}
/* Accent as TEXT uses the reading-size variant. */
.gq-report .gq-mod > h2::before { color: var(--rep-accent-text); }
.gq-report .gq-name-spine { color: var(--rep-accent-text); }
.gq-timer-bar-clock { color: var(--rep-accent-text); }
.gq-buybar .gq-buybar-clock { color: var(--rep-accent-text); }
/* Severity gradient: the hardcoded red retires for the derived danger. */
.gq-severity-track { background: linear-gradient(90deg, var(--rep-good), var(--rep-warn) 55%, var(--rep-danger)); }
/* Chart baseline takes the tokened neutral. */
.gq-ch-today { stroke: var(--rep-neutral); }
.gq-ch-node.gq-ch-today rect { stroke: var(--rep-neutral); }
.gq-report .gq-chart-legend li::before { background: var(--rep-neutral); }

/* Buttons: ink on sky, settled with Pete (white fails at 3.07:1; ink is 5.78:1).
   Matches every sky button already live on the site. */
.gq-report .gq-result-cta, .gq-report .gq-submit-btn { background: var(--rep-accent); color: var(--rep-text); }
.gq-report .gq-report-badge, .gq-report .gq-build-badge { color: var(--rep-text); }

/* ══════════════════════════════════════════════════════════════
   V4 RESULTS PAGE (frame "v4", 2026-08-03 workshop build)
   Ported from systems/quiz-funnel-offer/mockups/results-rebuild-mockup.html.
   Scoped to body.gq-v4-page / .gq-v4 so nothing bleeds into the engine
   or the legacy frames.
   ══════════════════════════════════════════════════════════════ */

body.gq-v4-page, body.gq-v4-page .gq-wrapper { background: #EBEEF0 !important; }
body.gq-v4-page .gq-wrapper { max-width: none; padding-left: 0; padding-right: 0; }
body.gq-v4-page .gq-header { max-width: 920px; margin: 0 auto; padding: 1.2rem clamp(1rem, 4vw, 2rem); }
body.gq-v4-page .gq-result-body .gq-wrapper { padding-bottom: 0; }

.gq-v4 { color: #16181D; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.55; }
.gq-v4 .v4-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.gq-v4 section { padding: 64px 0; }
.gq-v4 .band-white { background: #ffffff; }
.gq-v4 .band-navy { background: #0E2233; }

.gq-v4 .v4-eyebrow {
	font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase; color: #03719C;
	display: flex; align-items: center; gap: 10px; justify-content: center;
}
.gq-v4 .v4-eyebrow::before, .gq-v4 .v4-eyebrow::after { content: ""; height: 1px; width: 42px; background: #7D858A; opacity: .5; }
.gq-v4 h2 {
	font-family: 'Archivo', -apple-system, sans-serif; font-weight: 800; letter-spacing: -0.025em;
	line-height: 1.12; color: #16181D; text-align: center;
	font-size: clamp(26px, 3.8vw, 36px); margin: 14px auto 0; max-width: 680px;
}
.gq-v4 .lead-in { text-align: center; max-width: 560px; margin: 14px auto 0; font-size: 16px; color: #4A4F58; }
/* #4A4F58 not #7D858A: the old grey sat at 3.2:1 on the #EBEEF0 page,
   under the 4.5:1 WCAG AA floor for small text, and it is where the first
   test user stopped to say the text was hard to read (2026-08-04). */
.gq-v4 .fine { max-width: 760px; margin: 14px auto 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: #4A4F58; }
.gq-v4 sup { color: #03719C; }

/* Beat 1 — hook */
.gq-v4 .s1 { padding: 40px 0 64px; }
.gq-v4 .s1 h1 {
	font-family: 'Archivo', -apple-system, sans-serif; font-weight: 800; letter-spacing: -0.025em;
	line-height: 1.12; color: #16181D; text-align: center;
	font-size: clamp(30px, 4.6vw, 44px); max-width: 720px; margin: 18px auto 0;
}
.gq-v4 .s1 h1 .money { color: #03719C; white-space: nowrap; }
.gq-v4 .s1-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; align-items: stretch; }
.gq-v4 .v4-card {
	background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px;
	padding: 26px 26px 10px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); text-align: left;
}
.gq-v4 .card-tag {
	font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; color: #4A4F58;
	padding-bottom: 16px; border-bottom: 1px solid #e5e7eb;
}
.gq-v4 .v4-card.is-now {
	border: 2px solid rgba(163, 44, 37, 0.35);
	background: linear-gradient(180deg, rgba(163, 44, 37, 0.045), rgba(163, 44, 37, 0.02)), #ffffff;
}
.gq-v4 .v4-card.is-now .card-tag { color: #A32C25; }
.gq-v4 .v4-card.is-now .card-tag::before { content: "●"; color: #A32C25; margin-right: 8px; font-size: 9px; vertical-align: 2px; }
.gq-v4 .v4-card.is-could {
	border: 2px solid rgba(13, 158, 129, 0.55);
	background: linear-gradient(180deg, rgba(13, 158, 129, 0.05), rgba(13, 158, 129, 0.02)), #ffffff;
	box-shadow: 0 10px 30px rgba(13, 158, 129, 0.14);
}
.gq-v4 .v4-card.is-could .card-tag { color: #0D9E81; }
.gq-v4 .v4-card.is-could .card-tag::before { content: "●"; color: #0D9E81; margin-right: 8px; font-size: 9px; vertical-align: 2px; }
.gq-v4 .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px solid #e5e7eb; }
.gq-v4 .row:last-child { border-bottom: 0; }
.gq-v4 .row-label { font-size: 13.5px; color: #4A4F58; font-weight: 500; }
.gq-v4 .row-val { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: #16181D; text-align: right; }
.gq-v4 .row-sub { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; color: #7D858A; }
.gq-v4 .gain {
	display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
	color: #0D9E81; background: rgba(13, 158, 129, 0.11); border-radius: 999px; padding: 3px 10px; margin-top: 7px;
}
.gq-v4 .s1-gap { margin: 30px auto 0; max-width: 560px; text-align: center; font-size: 19px; color: #16181D; font-weight: 500; line-height: 1.4; }
.gq-v4 .s1-gap strong { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; color: #03719C; letter-spacing: -0.01em; }
.gq-v4 .s1-mech { text-align: center; max-width: 560px; margin: 26px auto 0; font-size: 16px; color: #4A4F58; }

/* Beat 2 — diagnostic */
.gq-v4 .s2-verdict {
	max-width: 680px; margin: 0 auto; background: #ffffff;
	border: 1px solid #e5e7eb; border-radius: 20px;
	padding: 34px 34px 30px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); text-align: center;
}
.gq-v4 .s2-lead { text-align: center; font-size: 16px; color: #4A4F58; }
.gq-v4 .s2-name {
	font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: -0.02em;
	font-size: clamp(34px, 5vw, 48px); color: #16181D; margin-top: 10px; line-height: 1.05;
}
.gq-v4 .s2-intro { max-width: 560px; margin: 18px auto 0; font-size: 16px; color: #4A4F58; text-align: center; }
.gq-v4 .viz-panel {
	border: 1px solid #e5e7eb; border-radius: 20px;
	padding: 24px 24px 20px; margin: 28px auto 0; max-width: 640px; text-align: center;
}
.gq-v4 .viz-panel.on-white { background: #EBEEF0; }
.gq-v4 .viz-panel.on-paper { background: #ffffff; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); }
.gq-v4 .viz-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #4A4F58; }
.gq-v4 .match-svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 14px auto 0; }
.gq-v4 .match-svg .av-label { font-family: 'Inter', sans-serif; font-size: 10.5px; fill: #4A4F58; }
.gq-v4 .match-svg .sv-tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; fill: #4A4F58; }
.gq-v4 .match-svg .sv-buys { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; fill: #0D9E81; }
.gq-v4 .viz-caption { font-size: 13.5px; color: #4A4F58; margin-top: 18px; }
.gq-v4 .mirror { max-width: 620px; margin: 34px auto 0; }
.gq-v4 .mirror-lead { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #4A4F58; text-align: left; }
.gq-v4 .mirror ul { list-style: none; margin: 14px 0 0; padding: 0; }
.gq-v4 .mirror li { position: relative; padding: 12px 0 12px 30px; font-size: 15.5px; color: #16181D; border-bottom: 1px solid #e5e7eb; text-align: left; }
.gq-v4 .mirror li:last-child { border-bottom: 0; }
.gq-v4 .mirror li::before { content: "✕"; position: absolute; left: 4px; top: 12px; color: #A32C25; font-size: 13px; font-weight: 700; }

/* Beat 3 — method */
.gq-v4 .s3-sub { text-align: center; font-size: 15px; color: #4A4F58; margin: 10px auto 0; max-width: 640px; }
.gq-v4 .bridge { text-align: center; max-width: 600px; margin: 20px auto 0; font-size: 16.5px; color: #4A4F58; }
.gq-v4 .aaa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
.gq-v4 .aaa-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 26px 22px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); text-align: left; }
.gq-v4 .aaa-step { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: #7D858A; }
.gq-v4 .aaa-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: #03719C; margin-top: 6px; }
.gq-v4 .aaa-body { font-size: 14.5px; color: #4A4F58; margin-top: 10px; }
.gq-v4 .segue { margin: 44px auto 0; max-width: 560px; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: #16181D; }
.gq-v4 .segue .down { display: block; color: #03719C; font-size: 20px; margin-top: 8px; }

/* Beat 4 — the build */
.gq-v4 .s4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 40px; align-items: start; }
.gq-v4 .doc-stage { position: relative; padding: 10px 0 0 12px; }
.gq-v4 .doc-back { position: absolute; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; width: 82%; height: 94%; }
.gq-v4 .doc-back.b1 { transform: rotate(-4deg); top: 18px; left: 0; }
.gq-v4 .doc-back.b2 { transform: rotate(3deg); top: 10px; left: 34px; }
.gq-v4 .doc { position: relative; width: 86%; margin-left: 18px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px rgba(14, 34, 51, 0.16); }
.gq-v4 .doc-head { background: #0E2233; padding: 26px 22px; }
.gq-v4 .doc-brand { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #7FD4F5; }
.gq-v4 .doc-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; color: #fff; margin-top: 8px; line-height: 1.15; }
.gq-v4 .doc-sub { font-size: 11.5px; color: #9fb3c2; margin-top: 8px; }
.gq-v4 .doc-body { padding: 20px 22px 26px; }
.gq-v4 .doc-line { height: 7px; border-radius: 4px; background: #EBEEF0; margin-bottom: 9px; }
.gq-v4 .doc-line.w60 { width: 60%; } .gq-v4 .doc-line.w85 { width: 85%; } .gq-v4 .doc-line.w75 { width: 75%; } .gq-v4 .doc-line.w40 { width: 40%; }
.gq-v4 .fascinations { margin: 26px 0 0; padding: 0; list-style: none; }
.gq-v4 .fascinations li { position: relative; padding: 9px 0 9px 28px; font-size: 14.5px; color: #16181D; text-align: left; }
.gq-v4 .fascinations li::before { content: "✓"; position: absolute; left: 2px; top: 9px; color: #0D9E81; font-weight: 700; }
.gq-v4 .process { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 28px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); text-align: left; }
.gq-v4 .process-tag { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #03719C; }
.gq-v4 .process ol { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: step; }
.gq-v4 .process li { counter-increment: step; display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid #e5e7eb; }
.gq-v4 .process li:last-child { border-bottom: 0; }
.gq-v4 .process li::before {
	content: counter(step); flex: 0 0 30px; height: 30px; border-radius: 50%;
	background: #EBEEF0; color: #03719C; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px;
	display: flex; align-items: center; justify-content: center;
}
.gq-v4 .process .p-text { font-size: 14.5px; color: #16181D; }
.gq-v4 .process .p-text .badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: #03719C; background: rgba(5, 157, 217, 0.09); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }

/* Beat 5 — bonus, bars, reserve, checkout */
.gq-v4 .bonus-strip {
	max-width: 620px; margin: 0 auto 52px; background: #ffffff;
	border: 1px solid #e5e7eb; border-radius: 20px; padding: 22px 26px;
	display: flex; align-items: center; gap: 24px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); text-align: left;
}
.gq-v4 .bonus-book-img { flex: 0 0 170px; width: 170px; height: auto; }
.gq-v4 .bonus-strip-text { font-size: 16px; color: #16181D; line-height: 1.5; }
.gq-v4 .cost-rows { max-width: 680px; margin: 34px auto 0; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 10px 28px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); }
.gq-v4 .cr-row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid #e5e7eb; }
.gq-v4 .cr-row:last-child { border-bottom: 0; }
.gq-v4 .cr-row.is-ours { background: linear-gradient(90deg, rgba(13, 158, 129, 0.05), transparent); margin: 0 -28px; padding-left: 28px; padding-right: 28px; }
.gq-v4 .cr-name { font-weight: 600; font-size: 14.5px; color: #16181D; text-align: left; }
.gq-v4 .cr-row.is-ours .cr-name { color: #0D9E81; }
.gq-v4 .bar-line { display: flex; align-items: center; gap: 10px; }
.gq-v4 .bar-line + .bar-line { margin-top: 7px; }
.gq-v4 .bar-kind { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: #7D858A; width: 32px; flex: 0 0 32px; }
.gq-v4 .bar-track { flex: 1; height: 13px; background: #e8ebee; border-radius: 999px; overflow: hidden; display: flex; }
.gq-v4 .bar-fill { height: 100%; border-radius: 999px 0 0 999px; }
.gq-v4 .bar-fill:only-child, .gq-v4 .bar-fill:last-child { border-radius: 999px; }
.gq-v4 .bar-fill.money { background: #0E2233; }
.gq-v4 .bar-fill.time { background: #03719C; }
.gq-v4 .bar-fill.ours { background: #0D9E81; }
.gq-v4 .bar-fill.hatch { background: repeating-linear-gradient(45deg, rgba(14, 34, 51, 0.32) 0 4px, rgba(14, 34, 51, 0.08) 4px 8px); border-radius: 0 999px 999px 0; }
.gq-v4 .bar-fill.fade { background: linear-gradient(90deg, #03719C 55%, rgba(3, 113, 156, 0)); border-radius: 999px 0 0 999px; }
.gq-v4 .bar-val { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: #4A4F58; white-space: nowrap; flex: 0 0 auto; min-width: 118px; text-align: left; }
.gq-v4 .cr-row.is-ours .bar-val { color: #0D9E81; }
.gq-v4 .buy-box {
	max-width: 900px; margin: 56px auto 0;
	background: #F0F7FB; border: 2px solid #059DD9; border-radius: 24px;
	padding: 8px 36px 30px; box-shadow: 0 10px 34px rgba(3, 113, 156, 0.10);
}
.gq-v4 .buy-box .reserve { margin-top: 30px; }
.gq-v4 .buy-box .guarantee-row { margin-top: 22px; }
.gq-v4 .reserve { text-align: center; margin-top: 56px; }
.gq-v4 .reserve-para { max-width: 560px; margin: 16px auto 0; font-size: 16px; color: #4A4F58; line-height: 1.55; }
.gq-v4 .reserve-price { font-size: 17px; color: #4A4F58; margin-top: 14px; }
.gq-v4 .reserve-price strong { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 46px; letter-spacing: -0.03em; color: #16181D; margin-left: 6px; vertical-align: middle; }
.gq-v4 .checkout-card { max-width: 820px; margin: 30px auto 0; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 30px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); }
.gq-v4 .buy-cols { max-width: 820px; margin: 30px auto 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: stretch; }
.gq-v4 .buy-col { position: relative; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 16px; box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05); display: flex; flex-direction: column; justify-content: center; }
.gq-v4 .buy-col img { width: 100%; height: auto; border-radius: 12px; display: block; }
.gq-v4 .buy-col.is-bonus { text-align: center; }
.gq-v4 .buy-col.is-bonus img { max-width: 190px; margin: 26px auto 0; }
.gq-v4 .bonus-caption { font-size: 13.5px; color: #4A4F58; line-height: 1.5; margin-top: 12px; text-align: left; }
.gq-v4 .count-pill { position: absolute; top: 14px; right: 14px; background: #0E2233; color: #ffffff; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 15px; border-radius: 999px; padding: 7px 14px; z-index: 2; }
.gq-v4 .buy-cta { margin-top: 4px; text-align: center; }

/* Exit intent overlay */
.gq-v4 .exit-overlay {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(14, 34, 51, 0.62);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gq-v4 .exit-overlay[hidden] { display: none; }
.gq-v4 .exit-card {
	background: #ffffff; border-radius: 20px; max-width: 460px; width: 100%;
	max-height: 92vh; overflow-y: auto;
	padding: 30px 30px 24px; text-align: center;
	box-shadow: 0 24px 70px rgba(14, 34, 51, 0.35);
}
.gq-v4 .exit-card h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 23px; letter-spacing: -0.01em; color: #16181D; line-height: 1.2; }
.gq-v4 .exit-para { font-size: 14.5px; color: #4A4F58; line-height: 1.55; margin-top: 12px; text-align: left; }
.gq-v4 .exit-price { font-size: 15px; color: #4A4F58; margin-top: 10px; }
.gq-v4 .exit-price strong { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: #16181D; margin: 0 4px; vertical-align: middle; }
.gq-v4 .exit-img { width: 100%; height: auto; border-radius: 12px; display: block; margin-top: 14px; }
.gq-v4 .exit-bonus { display: flex; align-items: center; gap: 12px; margin-top: 14px; text-align: left; }
.gq-v4 .exit-bonus .count-pill.is-inline { position: static; flex: 0 0 auto; }
.gq-v4 .exit-bonus .bonus-caption { margin-top: 0; font-size: 12.5px; }
.gq-v4 .exit-card .order-cta { margin-top: 18px; max-width: none; }
.gq-v4 .exit-dismiss { display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; color: #7D858A; text-decoration: underline; text-underline-offset: 3px; }
.gq-v4 .guarantee-row { max-width: 820px; margin: 18px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px; }
.gq-v4 .order-g { display: flex; gap: 12px; padding: 12px 0; text-align: left; }
.gq-v4 .order-g .g-mark { color: #0D9E81; font-weight: 700; }
.gq-v4 .order-g .g-text { font-size: 13.5px; color: #4A4F58; }
.gq-v4 .order-g .g-text strong { color: #16181D; }

/* Beat 6 — FAQs, proof, final, refs */
.gq-v4 .doubts { max-width: 640px; margin: 34px auto 0; }
.gq-v4 .doubt { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.gq-v4 .doubt summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 14px; align-items: center; color: #16181D; }
.gq-v4 .doubt summary::after { content: "+"; font-family: 'JetBrains Mono', monospace; color: #03719C; font-size: 18px; }
.gq-v4 .doubt[open] summary::after { content: "−"; }
.gq-v4 .doubt p { padding: 0 20px 18px; font-size: 14.5px; color: #4A4F58; text-align: left; }
.gq-v4 .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 760px; margin: 44px auto 0; }
.gq-v4 .stat { text-align: center; background: #EBEEF0; border-radius: 20px; padding: 22px 14px; }
.gq-v4 .stat-num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: #03719C; }
.gq-v4 .stat-line { font-size: 12px; color: #4A4F58; margin-top: 6px; }
.gq-v4 .final { text-align: center; padding: 72px 0; }
.gq-v4 .final h2 { color: #fff; }
.gq-v4 .final .final-line { color: #9fb3c2; margin: 14px auto 0; max-width: 480px; font-size: 15.5px; }
.gq-v4 .final .final-line strong { color: #7FD4F5; }
.gq-v4 .order-cta {
	display: block; margin: 26px auto 0; max-width: 380px; border: 0; cursor: pointer;
	background: #059DD9; color: #fff; font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 17px; padding: 16px 20px; border-radius: 999px; text-decoration: none;
}
.gq-v4 .order-cta small { display: block; font-weight: 400; font-size: 11px; opacity: .8; margin-top: 2px; }
.gq-v4 .refs { padding: 36px 0; }
.gq-v4 .refs .fine { margin-top: 10px; }

@media (max-width: 680px) {
	.gq-v4 section { padding: 48px 0; }
	.gq-v4 .s1 { padding: 32px 0 48px; }
	.gq-v4 .s1-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
	.gq-v4 .row-val { font-size: 17px; }
	.gq-v4 .s2-verdict { padding: 26px 20px 24px; }
	.gq-v4 .aaa { grid-template-columns: 1fr; }
	.gq-v4 .s4-grid { grid-template-columns: 1fr; }
	.gq-v4 .bonus-strip { flex-direction: column; text-align: center; }
	.gq-v4 .buy-cols { grid-template-columns: 1fr; }
	.gq-v4 .cr-row { grid-template-columns: 1fr; gap: 8px; }
	.gq-v4 .bar-val { min-width: 0; font-size: 9.5px; }
	.gq-v4 .cost-rows { padding: 10px 18px; }
	.gq-v4 .cr-row.is-ours { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
	.gq-v4 .guarantee-row { grid-template-columns: 1fr; }
	.gq-v4 .stats { grid-template-columns: repeat(2, 1fr); }
}

/* Interstitial citations: below everything, visually a footer, never furniture
   between the message and the button (Pete, 2026-08-03). */
.gq-int-footnote-below { margin-top: 2.2rem; opacity: 0.7; }

/* ── Interstitial visual modules (2026-08-03 pass) ── */
.gq-int-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin: 1.4rem 0; text-align: left; }
.gq-int-col { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 18px; }
.gq-int-col-muted { background: #f0f2f4; }
.gq-int-col-muted .gq-int-col-title, .gq-int-col-muted li { color: #7D858A; }
.gq-int-col-title {
	font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase; color: #03719C;
	padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; margin: 0 0 4px;
}
.gq-int-col ul { list-style: none; margin: 0; padding: 0; }
.gq-int-col li { padding: 7px 0; border-bottom: 1px solid #eef0f2; font-size: 0.92rem; }
.gq-int-col li:last-child { border-bottom: 0; }
.gq-int-bullets { text-align: left; margin: 1.2rem 0 0; }
.gq-int-bullets-lead { font-weight: 600; margin: 0 0 0.5rem; }
.gq-int-bullets ul { list-style: none; margin: 0; padding: 0; }
.gq-int-bullets li { position: relative; padding: 6px 0 6px 26px; font-size: 0.95rem; }
.gq-int-bullets li::before { content: "✓"; position: absolute; left: 2px; top: 6px; color: #0D9E81; font-weight: 700; }
.gq-int-stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
.gq-int-stat-tile { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 14px; text-align: center; }
.gq-int-stat-num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: #03719C; margin: 0; }
.gq-int-stat-line { font-size: 0.85rem; color: #4A4F58; margin: 6px 0 0; }
@media (max-width: 600px) {
	.gq-int-cols { grid-template-columns: 1fr; }
	.gq-int-stat-tiles { grid-template-columns: 1fr 1fr; }
}
.gq-int-col li { color: #16181D; }
.gq-int-col-muted li { color: #7D858A; }

/* ── Banked interstitial pass (2026-08-03): width, colours, visuals ── */
.gq-engine .gq-card:has(.gq-step-active .gq-interstitial) { max-width: 920px; }
.gq-engine .gq-interstitial { max-width: 56rem; }
.gq-engine .gq-interstitial .gq-continue-btn { margin-top: 1.75rem; }
.gq-int-bullets-lead { color: #16181D; }
.gq-int-bullets li { color: #16181D; }
.gq-interstitial .gq-int-bullets li, .gq-interstitial .gq-int-bullets-lead { color: #16181D; }
.gq-int-absolve .gq-int-bullets li, .gq-int-absolve .gq-interstitial-stat, .gq-int-absolve .gq-int-bullets-lead { color: #16181D; }
.gq-int-col-bad {
	border: 2px solid rgba(163, 44, 37, 0.35);
	background: linear-gradient(180deg, rgba(163, 44, 37, 0.045), rgba(163, 44, 37, 0.02)), #ffffff;
}
.gq-int-col-bad .gq-int-col-title { color: #A32C25; }
.gq-int-col-good {
	border: 2px solid rgba(13, 158, 129, 0.55);
	background: linear-gradient(180deg, rgba(13, 158, 129, 0.05), rgba(13, 158, 129, 0.02)), #ffffff;
}
.gq-int-col-good .gq-int-col-title { color: #0D9E81; }
.gq-int-visual { margin: 1.2rem 0; }
.gq-int-visual svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.gq-viz-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; fill: #4A4F58; }
.gq-viz-callout { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; fill: #0D9E81; }
.gq-viz-num { font-family: 'Archivo', sans-serif; font-size: 20px; font-weight: 800; fill: #4A4F58; }
.gq-viz-num-good { fill: #0D9E81; }

/* Interstitial paragraph width: main.css caps it at 480px, which forced
   early mid-sentence wraps once the card widened (Pete, 2026-08-03). */
.gq-engine .gq-interstitial-stat { max-width: 62ch; }
.gq-viz-row { font-family: 'Inter', sans-serif; font-size: 12px; }
.gq-int-row-tagged { display: block; }
.gq-int-row-tag {
	display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px;
	font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7D858A;
	margin-bottom: 2px;
}
.gq-int-row-val { display: block; font-size: 0.95rem; color: #16181D; }