/*
 * Quill Pages — the one stylesheet behind every section and template.
 *
 * Loaded only on pages that use it. System fonts, so a page downloads no font
 * at all. Designed at 375px wide first; wider screens only add room.
 *
 * Every colour is a variable on .qp-section, so a page's palette can be
 * changed in one place, and any section's colours can still be overridden in
 * the editor with the block's own colour settings.
 */

:root {
	--qp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--qp-accent: #04812d;
	--qp-accent-deep: #03561f;
	--qp-cta: #ffc83d;
	--qp-cta-text: #1a1a1a;
	--qp-link: #1372d3;
	--qp-ink: #1d2327;
	--qp-muted: #5b6670;
	--qp-soft: #f3f8f4;
	--qp-line: #e1ece4;
	--qp-dark: #0e1512;
	--qp-dark-card: #172019;
	--qp-dark-line: #26352b;
	--qp-dark-ink: #e8ece9;
	--qp-dark-muted: #9aa69f;
	--qp-width: 720px;
	--qp-radius: 14px;
}

/* ------------------------------------------------------------------ page */

body.qp-blank {
	margin: 0;
	background: #fff;
	color: var(--qp-ink);
	font-family: var(--qp-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.qp-blank .qp-page {
	display: block;
	overflow-x: hidden;
	/* clip, where supported: same effect, but it does not stop the deck's
	   stack meter from staying pinned to the bottom of the screen. */
	overflow-x: clip;
}

/* --------------------------------------------------------------- section */

.qp-section {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(52px, 8vw, 84px) 20px;
	font-family: var(--qp-font);
	font-weight: 400;
	color: var(--qp-ink);
	font-size: 18px;
	line-height: 1.65;
}

/* Pinned here, not left to the theme: some themes set a light body weight
   that makes landing-page copy look faint and flattens bold lead-ins. */
.qp-section strong,
.qp-section b {
	font-weight: 700;
}

.qp-section > * {
	max-width: var(--qp-width);
	margin-left: auto;
	margin-right: auto;
}

.qp-section > * + * {
	margin-top: 18px;
}

.qp-section h1,
.qp-section h2,
.qp-section h3 {
	font-family: var(--qp-font);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: inherit;
	margin-bottom: 0;
}

/* Even line lengths, so a headline never ends on one stranded word. */
.qp-section h1,
.qp-section h2,
.qp-section h3 { text-wrap: balance; }

.qp-section h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.05; }
.qp-section h2 { font-size: clamp(28px, 4.6vw, 42px); line-height: 1.12; }
.qp-section h3 { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; }

.qp-section p { margin-bottom: 0; }
.qp-section a:not(.wp-block-button__link) { color: var(--qp-link); }
.qp-section strong { color: inherit; }
.qp-center { text-align: center; }

/* Colour moods */
.qp-hero {
	background: linear-gradient(160deg, var(--qp-accent) 0%, var(--qp-accent-deep) 100%);
	color: #fff;
	text-align: center;
}
.qp-hero a:not(.wp-block-button__link) { color: #fff; }
.qp-soft { background: var(--qp-soft); }
.qp-dark { background: var(--qp-dark); color: var(--qp-dark-ink); }
.qp-dark a:not(.wp-block-button__link) { color: #7cc4ff; }

/* ------------------------------------------------------------ text bits */

.qp-eyebrow {
	font-size: 14px !important;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qp-accent);
}
.qp-dark .qp-eyebrow { color: #21c17b; }
.qp-hero .qp-eyebrow { color: rgba(255, 255, 255, 0.85); }

.qp-badge {
	display: table !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 6px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	font-size: 15px !important;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.qp-lead {
	font-size: clamp(18px, 2.4vw, 21px) !important;
	line-height: 1.55;
	opacity: 0.94;
}
.qp-hero .qp-lead { max-width: 580px; }

.qp-small {
	font-size: 15px !important;
	line-height: 1.5;
	color: var(--qp-muted);
}
.qp-hero .qp-small { color: rgba(255, 255, 255, 0.82); }
.qp-dark .qp-small { color: var(--qp-dark-muted); }

.qp-callout {
	background: rgba(255, 200, 61, 0.12);
	border-left: 4px solid var(--qp-cta);
	border-radius: 8px;
	padding: 14px 18px;
	font-size: 17px;
}
.qp-dark .qp-callout { background: rgba(255, 200, 61, 0.09); color: #fff; }

/* ---------------------------------------------------------------- lists */

.qp-section ul.qp-ticks,
.qp-section ol.qp-steps {
	list-style: none;
	padding: 0;
}

.qp-ticks li {
	position: relative;
	padding-left: 34px;
	margin: 0 0 12px;
}
.qp-ticks li::before {
	content: "✓";
	position: absolute;
	left: 2px;
	top: 0;
	font-weight: 800;
	color: var(--qp-accent);
}
.qp-dark .qp-ticks li::before,
.qp-hero .qp-ticks li::before { color: #21c17b; }

.qp-steps { counter-reset: qp-step; }
.qp-steps li {
	counter-increment: qp-step;
	position: relative;
	margin: 0 0 14px;
	padding: 70px 18px 18px;
	background: var(--qp-soft);
	border: 1px solid var(--qp-line);
	border-radius: var(--qp-radius);
	font-size: 17px;
	line-height: 1.65;
}
.qp-steps li::before {
	content: counter(qp-step);
	position: absolute;
	left: 18px;
	top: 18px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--qp-accent);
	color: #fff;
	font-weight: 800;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
}
.qp-soft .qp-steps li { background: #fff; }
.qp-dark .qp-steps li { background: var(--qp-dark-card); border-color: var(--qp-dark-line); }

@media (min-width: 600px) {
	.qp-steps li { padding: 22px 22px 22px 80px; }
	.qp-steps li::before { left: 22px; top: 20px; }
}

/* ---------------------------------------------------------------- cards */

.qp-card {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--qp-line);
	border-radius: 16px;
	padding: 22px 18px;
}
.qp-card > * + * { margin-top: 14px; }
.qp-soft .qp-card { background: #fff; }
.qp-dark .qp-card { background: var(--qp-dark-card); border-color: var(--qp-dark-line); }
.qp-dark .qp-card h3 { color: #fff; }

@media (min-width: 600px) {
	.qp-card { padding: 28px; }
}

.qp-tag {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(33, 193, 123, 0.15);
	color: #1a9e62;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.qp-dark .qp-tag { color: #21c17b; }

/* Testimonial */
.qp-quote {
	margin-left: auto;
	margin-right: auto;
	border: 0 !important;
	padding: 0 !important;
}
.qp-quote p {
	font-size: clamp(19px, 2.4vw, 22px);
	line-height: 1.5;
	font-style: normal;
}
.qp-quote cite {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	color: var(--qp-muted);
}
.qp-dark .qp-quote cite { color: var(--qp-dark-muted); }

/* Guarantee */
.qp-guarantee {
	text-align: center;
	border: 2px dashed var(--qp-accent);
	background: var(--qp-soft);
}
.qp-guarantee h3::before {
	content: "🛡️";
	display: block;
	font-size: 42px;
	margin-bottom: 8px;
}

/* Price */
.qp-price {
	font-size: clamp(44px, 8vw, 64px) !important;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.qp-price s { font-size: 0.5em; color: var(--qp-muted); font-weight: 600; margin-right: 10px; }

/* FAQ — core Details blocks */
.qp-section .wp-block-details {
	border-bottom: 1px solid var(--qp-line);
	padding: 16px 0;
	margin-top: 0;
}
.qp-dark .wp-block-details { border-color: var(--qp-dark-line); }
.qp-section .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	list-style-position: outside;
}
.qp-section .wp-block-details > :not(summary) { margin-top: 10px; color: var(--qp-muted); }
.qp-dark .wp-block-details > :not(summary) { color: var(--qp-dark-muted); }

/* --------------------------------------------------------------- buttons */

.qp-section .wp-block-buttons {
	justify-content: center;
	margin-top: 30px;
}

.qp-section .wp-block-button__link,
.qp-optin-button {
	display: inline-block;
	box-sizing: border-box;
	border: 0;
	border-radius: 10px;
	padding: 19px 36px;
	background: var(--qp-btn, var(--qp-cta));
	color: var(--qp-btn-text, var(--qp-cta-text));
	font-family: var(--qp-font);
	font-size: clamp(18px, 2.4vw, 21px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.qp-section .wp-block-button__link:hover,
.qp-optin-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}

.qp-section .wp-block-button__link:focus-visible,
.qp-optin-button:focus-visible,
.qp-optin-input:focus-visible {
	outline: 3px solid #7cc4ff;
	outline-offset: 2px;
}

/* A second, quieter action — "blue" in the bridge template. */
.qp-section .is-style-qp-secondary .wp-block-button__link {
	background: var(--qp-link);
	color: #fff;
}

@media (max-width: 599px) {
	.qp-section .wp-block-button,
	.qp-section .wp-block-button__link {
		width: 100%;
	}
}

/* -------------------------------------------------------------- opt-in */

.qp-optin {
	box-sizing: border-box;
	max-width: 520px;
	text-align: left;
}
.qp-center .qp-optin,
.qp-hero .qp-optin { margin-left: auto; margin-right: auto; }

.qp-optin-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qp-optin-input {
	box-sizing: border-box;
	width: 100%;
	min-height: 58px;
	padding: 14px 16px;
	border: 2px solid #d4dcd7;
	border-radius: 10px;
	background: #fff;
	color: var(--qp-ink);
	font-family: var(--qp-font);
	font-size: 18px; /* 16px or more stops phones zooming in on focus */
}
.qp-hero .qp-optin-input,
.qp-dark .qp-optin-input { border-color: transparent; }

.qp-optin-button {
	width: 100%;
	min-height: 60px;
}

@media (min-width: 600px) {
	.qp-optin--inline { max-width: 640px; }
	.qp-optin--inline .qp-optin-fields { flex-direction: row; }
	.qp-optin--inline .qp-optin-input { flex: 1 1 auto; }
	.qp-optin--inline .qp-optin-button { width: auto; flex: 0 0 auto; }
}

.qp-optin-consent {
	margin: 12px 0 0 !important;
	font-size: 14px !important;
	line-height: 1.5;
	text-align: center;
	opacity: 0.8;
}

.qp-optin-notice {
	margin: 0 !important;
	padding: 16px 18px;
	border-radius: 10px;
	font-size: 17px !important;
	line-height: 1.5;
	font-weight: 600;
	text-align: center;
}
.qp-optin-notice--success { background: #ecfdf5; color: #065f46; }
.qp-optin-notice--error { background: #fef2f2; color: #991b1b; margin-bottom: 12px !important; }

.qp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qp-page .screen-reader-text,
.qp-optin .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* --------------------------------------------------------------- video */

.qp-video { margin-left: auto; margin-right: auto; }

.qp-video-poster,
.qp-video-frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--qp-radius);
	overflow: hidden;
}

.qp-video-poster {
	position: relative;
	padding: 0;
	cursor: pointer;
	/* A poster image, when set, replaces the gradient via an inline style. */
	background: linear-gradient(160deg, #24352b 0%, #0b110e 100%) center / cover no-repeat;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	font-family: var(--qp-font);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.qp-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: var(--qp-cta);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}
.qp-video-play::after {
	content: "";
	position: absolute;
	left: 34px;
	top: 26px;
	border-style: solid;
	border-width: 16px 0 16px 26px;
	border-color: transparent transparent transparent var(--qp-cta-text);
}
.qp-video-poster:hover .qp-video-play { transform: scale(1.06); }

.qp-video-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	font-size: 16px;
	font-weight: 700;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.qp-video figcaption {
	margin-top: 10px;
	font-size: 15px;
	color: var(--qp-muted);
	text-align: center;
}

/* ---------------------------------------------------------- disclosure */

.qp-disclosure {
	font-size: 14px !important;
	line-height: 1.5;
	text-align: center;
	color: var(--qp-muted);
}
.qp-dark .qp-disclosure { color: #8a968f; }

/* -------------------------------------------------------------- footer */

.qp-footer {
	padding: 26px 20px;
	background: var(--qp-dark);
	border-top: 1px solid #1f2a23;
	color: #6f7b74;
	font-size: 14px;
	text-align: center;
}
.qp-footer a:not(.wp-block-button__link) { color: #9aa69f; }

/* ------------------------------------------------------ squeeze pages */
/*
 * The solo-ad layouts. Everything here serves one rule: on the first screen
 * of a small phone the visitor sees the promise and the form, and nothing
 * else competes with them.
 */

/* One screen, content centred: the whole offer without scrolling. */
.qp-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	box-sizing: border-box;
}
/* Flex items with auto margins shrink to fit; keep them full width. */
.qp-screen > * {
	width: 100%;
	box-sizing: border-box;
}
.qp-screen > .qp-badge {
	width: auto;
}

/* Tighter hero on phones, so the form reaches the first screen. */
@media (max-width: 599px) {
	.qp-squeeze.qp-section {
		padding-top: 28px;
		padding-bottom: 40px;
	}
	.qp-squeeze.qp-section > * + * {
		margin-top: 14px;
	}
	.qp-squeeze h1 {
		font-size: clamp(30px, 8.6vw, 38px);
	}
	.qp-squeeze .qp-lead {
		font-size: 17px !important;
	}
}

/* "Step 1 of 2": people finish what they have started. */
.qp-progress {
	max-width: 420px !important;
	font-size: 13px !important;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
}
.qp-progress::after {
	content: "";
	display: block;
	height: 12px;
	margin-top: 8px;
	border-radius: 999px;
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0 10px, transparent 10px 20px) 0 0 / 50% 100% no-repeat,
		linear-gradient(90deg, var(--qp-cta) 0 50%, rgba(255, 255, 255, 0.22) 50% 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.qp-progress.qp-progress--almost::after {
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0 10px, transparent 10px 20px) 0 0 / 90% 100% no-repeat,
		linear-gradient(90deg, var(--qp-cta) 0 90%, rgba(255, 255, 255, 0.22) 90% 100%);
}
.qp-section:not(.qp-hero):not(.qp-dark) .qp-progress::after {
	box-shadow: inset 0 0 0 1px var(--qp-line);
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 10px, transparent 10px 20px) 0 0 / 50% 100% no-repeat,
		linear-gradient(90deg, var(--qp-accent) 0 50%, var(--qp-soft) 50% 100%);
}

/* The small pointer line above a form. */
.qp-pointer {
	font-size: 16px !important;
	font-weight: 800;
	text-align: center;
	color: var(--qp-cta);
}
.qp-section:not(.qp-hero):not(.qp-dark) .qp-pointer { color: var(--qp-accent); }

/* Two columns — cover and form — that stack on phones. */
.qp-section > .qp-split {
	max-width: 980px;
	gap: 36px;
	align-items: center;
	margin-top: 34px;
}

/* On a phone the button's text needs the room more than the padding does. */
@media (max-width: 599px) {
	.qp-optin-button,
	.qp-section .wp-block-button__link {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 18px;
	}
}
@media (max-width: 781px) {
	/* Form first on a phone: the cover is a picture, the form is the job. */
	.qp-split--form-first > .wp-block-column:last-child { order: -1; }
	.qp-section > .qp-split { gap: 22px; }
}

/* The boxed form: a white card that the eye lands on. */
.qp-formbox {
	box-sizing: border-box;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 20px 20px;
	border-radius: 16px;
	background: #fff;
	color: var(--qp-ink);
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.qp-formbox > * + * { margin-top: 12px; }
.qp-formbox h3 {
	font-size: clamp(21px, 2.6vw, 25px);
	line-height: 1.2;
	color: var(--qp-ink);
}
.qp-formbox .qp-optin { max-width: none; }
.qp-formbox .qp-optin-input { border-color: #d4dcd7 !important; }
.qp-formbox .qp-optin-consent { opacity: 1; color: var(--qp-muted); }
@media (min-width: 600px) {
	.qp-formbox { padding: 30px 28px 24px; }
}

.qp-privacy {
	font-size: 14px !important;
	line-height: 1.45;
	text-align: center;
	opacity: 0.85;
}
.qp-privacy::before { content: "🔒 "; }

/* A lead-magnet cover: slight tilt and shadow, like the real thing. */
.qp-mockup {
	margin: 0 auto;
	max-width: 340px;
}
.qp-mockup img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	transform: rotate(-3deg);
	filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.35));
}
@media (max-width: 781px) {
	.qp-mockup { max-width: 220px; }
}

/* The ads-friendly footer small print. */
.qp-footer .qp-disclaimer {
	max-width: 720px;
	margin: 12px auto 0;
	font-size: 12px !important;
	line-height: 1.5;
	opacity: 0.8;
}

/* ----------------------------------------------- editor-only hint text */

.qp-notice {
	padding: 12px 14px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	background: #fcf9e8;
	color: #3c434a;
	font: 14px/1.5 var(--qp-font);
}

/* ---------------------------------------------------------- wide blocks */

.qp-section > .alignwide { max-width: 1120px; }

/* ---------------------------------------------------------------- cards
   A playing card for a tool: picture (or monogram) on top, then the job,
   name, one line and how it is paid for. In the deck it flips over to the
   verdict: both faces share one grid cell, so the card is as tall as its
   taller face and nothing jumps. */

.qp-dc {
	--qp-dc: var(--qp-accent);
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: 18px;
	background: #fff;
	color: var(--qp-ink);
	box-shadow: 0 1px 2px rgba(14, 21, 18, 0.06), 0 8px 24px rgba(14, 21, 18, 0.08);
	border: 1px solid var(--qp-line);
	text-align: left;
	font-family: var(--qp-font);
	font-size: 16px;
	line-height: 1.5;
}
.qp-dc--powerup {
	border: 2px solid #e2b33c;
	background: linear-gradient(180deg, #fffaf0 0%, #fff 55%);
}

.qp-dc-faces {
	display: grid;
	flex: 1 1 auto;
	perspective: 1400px;
}
.qp-dc-face {
	grid-area: 1 / 1;
	min-width: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.qp-dc-back {
	transform: rotateY(180deg);
	padding: 20px 20px 8px;
}
.qp-dc.is-flipped .qp-dc-front { transform: rotateY(-180deg); }
.qp-dc.is-flipped .qp-dc-back { transform: rotateY(0); }

.qp-dc-art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 17px 17px 0 0;
	background:
		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.28), transparent 45%),
		linear-gradient(145deg, var(--qp-dc) 0%, #0e1512 140%);
}
.qp-dc--powerup .qp-dc-art {
	background:
		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.35), transparent 45%),
		linear-gradient(145deg, #e2b33c 0%, #8a5a00 130%);
}
.qp-dc-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.qp-dc-mono {
	font-size: 54px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.qp-dc-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--qp-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.qp-dc-body { padding: 16px 20px 8px; }
.qp-dc .qp-dc-job {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qp-muted);
}
.qp-dc .qp-dc-name {
	margin: 4px 0 0 !important;
	font-size: 23px !important;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--qp-ink);
}
.qp-dc .qp-dc-tagline {
	margin: 8px 0 0 !important;
	font-size: 16px !important;
	color: var(--qp-ink);
}
.qp-dc .qp-dc-billing {
	display: inline-block;
	margin: 12px 0 0 !important;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 13px !important;
	font-weight: 700;
	background: #ecfdf5;
	color: #065f46;
}
.qp-dc .qp-dc-billing--monthly { background: #fff7e6; color: #8a4b00; }
.qp-dc .qp-dc-billing--free { background: #eaf3fe; color: #0b4f99; }

.qp-dc-facts { margin: 12px 0 0; }
.qp-dc-facts dt {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qp-muted);
}
.qp-dc-facts dt:first-child { margin-top: 0; }
.qp-dc-facts dd { margin: 2px 0 0; font-size: 15px; }
.qp-dc .qp-dc-note {
	margin: 12px 0 0 !important;
	padding: 8px 10px;
	border-radius: 8px;
	background: #fff7e6;
	color: #6b3d00;
	font-size: 14px !important;
}

.qp-dc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 12px 20px 20px;
}
.qp-dc-flip {
	padding: 0;
	border: 0;
	background: none;
	color: var(--qp-link);
	font: 600 15px/1.4 var(--qp-font);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.qp-dc-pick {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.qp-dc-pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--qp-accent); }
.qp-section a.qp-dc-cta,
.qp-dc-cta {
	flex: 1 0 100%;
	box-sizing: border-box;
	display: block;
	padding: 13px 16px;
	border-radius: 10px;
	background: var(--qp-cta);
	color: var(--qp-cta-text);
	font-weight: 800;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s;
}
.qp-dc-cta:hover { filter: brightness(0.95); }
.qp-dc-flip:focus-visible,
.qp-dc-cta:focus-visible,
.qp-dc-pick input:focus-visible {
	outline: 3px solid var(--qp-link);
	outline-offset: 3px;
}

/* Deck cards turn over when tapped anywhere; the corner tag says so. */
.qp-deck .qp-dc { cursor: pointer; }
.qp-dc-front { position: relative; }
.qp-dc-hint {
	position: absolute;
	right: 12px;
	bottom: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--qp-soft);
	color: var(--qp-accent-deep);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
.qp-dc.is-flipped .qp-dc-hint { visibility: hidden; }
.qp-deck .qp-dc-body { padding-bottom: 42px; }

/* A card without a back is one big link to the tool: the button's link is
   stretched over the whole card, so a tap anywhere opens it. */
.qp-dc--link { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.qp-dc--link:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(14, 21, 18, 0.06), 0 16px 36px rgba(14, 21, 18, 0.14);
}
.qp-dc--link .qp-dc-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.qp-dc--link:focus-within { outline: 3px solid var(--qp-link); outline-offset: 3px; }
.qp-dc--link .qp-dc-cta:focus-visible { outline: none; }
.qp-deck .qp-dc--link .qp-dc-body { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
	.qp-dc--link, .qp-dc--link:hover { transition: none; transform: none; }
}

/* In the visitor's hand, and in their stack */
.qp-dc.is-hand::before {
	content: "In your hand";
	position: absolute;
	z-index: 2;
	top: -11px;
	right: 16px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--qp-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.qp-dc.is-picked { outline: 3px solid var(--qp-accent); outline-offset: -1px; }

/* ----------------------------------------------------------------- deck */

.qp-deck { text-align: left; }
.qp-deck > * + * { margin-top: 18px; }
.qp-section .qp-deck .qp-deck-heading {
	margin-top: 44px;
	font-size: clamp(26px, 4vw, 36px);
}
.qp-section .qp-deck .qp-deck-heading:first-child,
.qp-deck-handnote + .qp-deck-heading { margin-top: 0; }
.qp-deck .qp-deck-handnote {
	margin: 0 0 28px !important;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--qp-soft);
	border: 1px solid var(--qp-line);
	font-weight: 600;
}
.qp-deck .qp-deck-handnote[hidden] { display: none; }
.qp-deck .qp-deck-text { color: var(--qp-muted); }
.qp-deck-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 26px 22px;
	margin-top: 26px !important;
}
.qp-deck .qp-deck-small {
	font-size: 14px !important;
	line-height: 1.55;
	color: var(--qp-muted);
}

.qp-meter {
	position: sticky;
	bottom: 12px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 32px !important;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--qp-dark);
	color: var(--qp-dark-ink);
	box-shadow: 0 10px 30px rgba(14, 21, 18, 0.28);
}
.qp-meter[hidden],
.qp-meter p[hidden] { display: none; }
.qp-meter-main { flex: 1 1 auto; min-width: 0; }
.qp-meter p { margin: 0 !important; font-size: 15px !important; line-height: 1.45; }
.qp-meter .qp-meter-count { font-weight: 700; }
.qp-meter .qp-meter-save { color: var(--qp-dark-muted); }
.qp-meter .qp-meter-save strong { color: var(--qp-cta); }
.qp-meter-clear {
	flex: 0 0 auto;
	padding: 8px 12px;
	border: 1px solid var(--qp-dark-line);
	border-radius: 8px;
	background: transparent;
	color: var(--qp-dark-ink);
	font: 600 14px/1 var(--qp-font);
	cursor: pointer;
}

/* ----------------------------------------------------------------- quiz */

.qp-quiz {
	box-sizing: border-box;
	padding: clamp(20px, 4vw, 36px);
	border-radius: 20px;
	background: #fff;
	color: var(--qp-ink);
	box-shadow: 0 1px 2px rgba(14, 21, 18, 0.06), 0 16px 40px rgba(14, 21, 18, 0.12);
	text-align: left;
}
.qp-quiz > .qp-optin-notice { margin-top: 0 !important; }

/* A hero that holds a quiz: the first question should be on the first
   screen of a laptop, so less room above and a slightly smaller headline. */
.qp-hero:has(.qp-quiz) { padding-top: clamp(28px, 4.5vw, 52px); }
.qp-hero:has(.qp-quiz) h1 { font-size: clamp(32px, 5.2vw, 52px); line-height: 1.08; }
.qp-section > .qp-quiz { margin-top: 30px; }
/* The quiz is a white card even inside a dark or coloured section, so it
   takes back what those sections change for their own text and inputs. */
.qp-quiz .qp-eyebrow { color: var(--qp-accent); }
.qp-quiz .qp-optin-input { border-color: #d4dcd7; }
.qp-quiz .qp-optin-consent { color: var(--qp-muted); opacity: 1; }
.qp-quiz-top { margin-bottom: 18px; }
.qp-quiz-top[hidden] { display: none; }
.qp-quiz .qp-quiz-count {
	margin: 0 0 8px !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qp-muted);
}
.qp-quiz-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--qp-line);
	overflow: hidden;
}
.qp-quiz-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--qp-accent);
	transition: width 0.35s ease;
}
.qp-quiz-q {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	min-width: 0;
}
.qp-quiz-q[hidden] { display: none; }
.qp-quiz-legend {
	padding: 0;
	margin-bottom: 16px;
	font-size: clamp(22px, 3.4vw, 28px);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.qp-quiz-answers { display: grid; gap: 10px; }
@media (min-width: 600px) {
	.qp-quiz-answers { grid-template-columns: 1fr 1fr; }
}
.qp-quiz-answer {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60px;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 2px solid var(--qp-line);
	border-radius: 12px;
	background: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.qp-quiz-answer:hover { border-color: var(--qp-accent); }
.qp-quiz-answer input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0 12px 0 0;
	accent-color: var(--qp-accent);
}
.qp-quiz-answer:has(input:checked) {
	border-color: var(--qp-accent);
	background: var(--qp-soft);
	transform: scale(0.99);
}
.qp-quiz-answer:has(input:focus-visible) { outline: 3px solid var(--qp-link); outline-offset: 2px; }

.qp-quiz-back {
	padding: 0;
	border: 0;
	background: none;
	color: var(--qp-muted);
	font: 600 15px/1.4 var(--qp-font);
	cursor: pointer;
}
.qp-quiz-back[hidden] { display: none; }

.qp-quiz-result .qp-eyebrow { margin: 0 !important; }
.qp-quiz .qp-quiz-result-heading {
	margin: 6px 0 0 !important;
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.15;
	outline: none;
}
/* Small cards: four across on a computer, two by two on a phone. */
.qp-quiz-hand {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
	gap: 14px;
	margin: 24px 0;
}
.qp-quiz-hand .qp-dc { border-radius: 14px; }
.qp-quiz-hand .qp-dc-art { aspect-ratio: 4 / 3; border-radius: 13px 13px 0 0; }
.qp-quiz-hand .qp-dc-mono { font-size: 34px; }
.qp-quiz-hand .qp-dc-badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 9px; }
.qp-quiz-hand .qp-dc-body { padding: 12px 12px 14px; }
.qp-quiz-hand .qp-dc .qp-dc-job { font-size: 10px !important; }
.qp-quiz-hand .qp-dc .qp-dc-name { font-size: 17px !important; }
.qp-quiz-hand .qp-dc .qp-dc-tagline { font-size: 14px !important; line-height: 1.4; }
.qp-quiz-hand .qp-dc .qp-dc-billing { font-size: 11px !important; padding: 2px 7px; }
.qp-quiz .qp-quiz-result-text { margin: 0 0 16px !important; font-weight: 600; }
.qp-quiz .qp-optin { max-width: none; }

/* Without the script the quiz is a plain form: every question, then the
   email box. The dealt hand only means something with it. */
.qp-quiz:not(.qp-quiz--js) .qp-quiz-top,
.qp-quiz:not(.qp-quiz--js) .qp-quiz-hand,
.qp-quiz:not(.qp-quiz--js) .qp-quiz-result .qp-eyebrow,
.qp-quiz:not(.qp-quiz--js) .qp-quiz-result-heading { display: none; }
.qp-quiz-result[hidden],
.qp-dc[hidden] { display: none; }

/* Hand kept back: dealt quietly for the deck page, shown only there. */
.qp-quiz--nohand .qp-quiz-hand { display: none !important; }
.qp-quiz--nohand .qp-quiz-result-text { margin-top: 12px !important; }

/* The deal: cards land one after another. */
@keyframes qp-deal {
	from { opacity: 0; transform: translateY(24px) rotate(-3deg) scale(0.96); }
	to { opacity: 1; transform: none; }
}
.qp-dc.is-dealt {
	animation: qp-deal 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--qp-deal, 0) * 0.14s);
}

@media (prefers-reduced-motion: reduce) {
	.qp-dc-face,
	.qp-quiz-answer,
	.qp-quiz-progress span { transition: none; }
	.qp-dc.is-dealt { animation: none; }
}

/* In the editor */
.qp-quiz-editor { padding: 16px; border: 1px solid #dcdcde; border-radius: 8px; background: #fff; color: #1e1e1e; text-align: left; font: 14px/1.5 var(--qp-font); }
.qp-quiz-editor label { color: #1e1e1e; }
.qp-quiz-editor-help { margin: 0 0 12px; color: #50575e; }
.qp-quiz-editor-q { margin-bottom: 16px; padding: 12px; border-radius: 8px; background: #f6f7f7; }
.qp-quiz-editor-a { display: grid; grid-template-columns: 2fr 2fr 1.4fr auto; gap: 8px; align-items: end; margin-left: 12px; }
.qp-quiz-editor-row { display: flex; gap: 8px; margin: 8px 0 0 12px; }

/* ------------------------------------------------------ palette: midnight
   Deep navy with a soft violet glow and the warm yellow buttons. A page
   switches to it by giving its first section the class
   "qp-palette-midnight"; every section on that page then follows. */

.qp-page:has(.qp-palette-midnight) {
	--qp-accent: #6d4aff;
	--qp-accent-deep: #3b1f99;
	--qp-cta: #ffd24a;
	--qp-cta-text: #17122b;
	--qp-link: #5b3df5;
	--qp-ink: #17152e;
	--qp-muted: #5f5b7d;
	--qp-soft: #f5f3ff;
	--qp-line: #e6e2fb;
	--qp-dark: #0d0b1f;
	--qp-dark-card: #17142f;
	--qp-dark-line: #2a2550;
	--qp-dark-ink: #ecebf7;
	--qp-dark-muted: #a19dc2;
}
.qp-page:has(.qp-palette-midnight) .qp-hero {
	background:
		radial-gradient(900px 460px at 50% -120px, rgba(124, 92, 255, 0.5), transparent 70%),
		radial-gradient(640px 380px at 100% 110%, rgba(255, 110, 190, 0.14), transparent 70%),
		linear-gradient(180deg, #0d0b1f 0%, #16123b 100%);
}
.qp-page:has(.qp-palette-midnight) .qp-hero .qp-eyebrow {
	display: table;
	margin-left: auto;
	margin-right: auto;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: #d9d3ff;
	letter-spacing: 0.12em;
}
@media (max-width: 599px) {
	.qp-page:has(.qp-palette-midnight) .qp-hero .qp-eyebrow {
		font-size: 11px !important;
		letter-spacing: 0.08em;
		white-space: nowrap;
	}
}
.qp-page:has(.qp-palette-midnight) .qp-hero h1 { letter-spacing: -0.03em; }
.qp-page:has(.qp-palette-midnight) .qp-hero .qp-lead { color: #cfcae8; opacity: 1; }
.qp-page:has(.qp-palette-midnight) .qp-quiz { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2); }
.qp-page:has(.qp-palette-midnight) .qp-ticks li::before { color: var(--qp-accent); }
.qp-page:has(.qp-palette-midnight) .qp-footer { background: var(--qp-dark); }

/* A highlighted phrase inside a headline. */
.qp-hl {
	background: linear-gradient(90deg, #b9a8ff 0%, #ff9bd2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}