/* ==========================================================================
   Chroma — Color Analysis Quiz
   Self-contained styles. No external fonts or assets (fast + private).
   Scope: everything is under .caq to avoid clashing with themes.
   ========================================================================== */

.caq *,
.caq *::before,
.caq *::after { box-sizing: border-box; }

/* Reset inherited theme styling on our interactive elements so the widget
   looks identical on every theme. Specificity is raised in the theme-proofing
   block near the end of this file. */
.caq button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	min-height: 0;
	cursor: pointer;
}

.caq {
	/* Theme tokens (light default) */
	--caq-bg: #ffffff;
	--caq-bg-2: #f6f4f1;
	--caq-surface: #ffffff;
	--caq-surface-2: #fbfaf8;
	--caq-ink: #1c1a22;
	--caq-ink-soft: #605a6b;
	--caq-line: #eceaf1;
	--caq-line-strong: #dcd8e4;
	--caq-shadow: 24px 40px 80px -40px rgba(30, 24, 50, .32);
	--caq-shadow-sm: 0 6px 24px -12px rgba(30, 24, 50, .28);

	--caq-accent: #7c5cff;
	--caq-accent-2: #ff7ab6;
	--caq-accent-ink: #ffffff;
	--caq-radius: 28px;
	--caq-radius-inner: calc(var(--caq-radius) - 12px);

	--caq-ease: cubic-bezier(.22, 1, .36, 1);

	max-width: 1080px;
	margin-inline: auto;
	color: var(--caq-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------- Dark theme ------------------------------------------------- */
.caq-theme-dark {
	--caq-bg: #14121b;
	--caq-bg-2: #1b1826;
	--caq-surface: #1c1a26;
	--caq-surface-2: #232030;
	--caq-ink: #f4f1fb;
	--caq-ink-soft: #b3adc4;
	--caq-line: #2c2839;
	--caq-line-strong: #3a3550;
	--caq-shadow: 30px 50px 90px -40px rgba(0, 0, 0, .7);
	--caq-shadow-sm: 0 8px 28px -14px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
	.caq-theme-auto {
		--caq-bg: #14121b;
		--caq-bg-2: #1b1826;
		--caq-surface: #1c1a26;
		--caq-surface-2: #232030;
		--caq-ink: #f4f1fb;
		--caq-ink-soft: #b3adc4;
		--caq-line: #2c2839;
		--caq-line-strong: #3a3550;
		--caq-shadow: 30px 50px 90px -40px rgba(0, 0, 0, .7);
		--caq-shadow-sm: 0 8px 28px -14px rgba(0, 0, 0, .6);
	}
}

/* ---------- Shell ------------------------------------------------------ */
.caq-shell {
	position: relative;
	background: var(--caq-surface);
	border: 1px solid var(--caq-line);
	border-radius: var(--caq-radius);
	box-shadow: var(--caq-shadow);
	padding: clamp(20px, 4vw, 56px);
	overflow: hidden;
}
.caq-shell::before {
	/* soft top gradient wash */
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 220px;
	background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--caq-accent) 12%, transparent), transparent 60%),
	            radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--caq-accent-2) 12%, transparent), transparent 60%);
	pointer-events: none;
}

/* ---------- Progress --------------------------------------------------- */
.caq-progress { margin-bottom: clamp(18px, 3vw, 30px); position: relative; z-index: 2; }
.caq-progress-track {
	height: 8px;
	border-radius: 999px;
	background: var(--caq-line);
	overflow: hidden;
}
.caq-progress-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--caq-accent), var(--caq-accent-2));
	transition: width .5s var(--caq-ease);
}
.caq-progress-meta {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}
.caq-progress-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--caq-ink-soft);
}

/* ---------- Screens (slide transitions) -------------------------------- */
.caq-screen {
	display: none;
	position: relative;
	z-index: 2;
	animation: caq-in .5s var(--caq-ease) both;
}
.caq-screen.is-active { display: block; }
@keyframes caq-in {
	from { opacity: 0; transform: translateY(14px) scale(.99); }
	to   { opacity: 1; transform: none; }
}
.caq-screen.is-leaving {
	animation: caq-out .28s var(--caq-ease) both;
}
@keyframes caq-out {
	to { opacity: 0; transform: translateY(-10px) scale(.99); }
}
@media (prefers-reduced-motion: reduce) {
	.caq-screen, .caq-screen.is-leaving { animation: none; }
	.caq-progress-fill { transition: none; }
}

/* ---------- Typography helpers ---------------------------------------- */
.caq-title {
	font-size: clamp(26px, 4.4vw, 42px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 12px;
}
.caq-subtitle {
	font-size: clamp(15px, 2vw, 18px);
	color: var(--caq-ink-soft);
	margin: 0 auto 26px;
	max-width: 52ch;
}
.caq-q-title {
	font-size: clamp(21px, 3.2vw, 30px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.015em;
	margin: 0 0 8px;
}
.caq-q-sub {
	font-size: clamp(14px, 1.8vw, 16px);
	color: var(--caq-ink-soft);
	margin: 0 0 clamp(18px, 3vw, 28px);
	max-width: 60ch;
}

/* ---------- Intro ------------------------------------------------------ */
.caq-intro { text-align: center; padding-top: 8px; }
.caq-intro-art {
	position: relative;
	height: 150px;
	margin: 0 auto 20px;
	max-width: 420px;
}
.caq-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	opacity: .9;
	animation: caq-float 6s ease-in-out infinite;
}
.caq-orb-1 { width: 76px; height: 76px; left: 12%; top: 8px;  background: radial-gradient(circle at 30% 30%, #ffd27a, #ff8a3d); }
.caq-orb-2 { width: 54px; height: 54px; right: 16%; top: 0;   background: radial-gradient(circle at 30% 30%, #a9e0ff, #5b8fd0); animation-delay: -2s; }
.caq-orb-3 { width: 40px; height: 40px; right: 30%; bottom: 30px; background: radial-gradient(circle at 30% 30%, #ffb4dc, var(--caq-accent-2)); animation-delay: -4s; }
@keyframes caq-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}
.caq-swatch-strip {
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	padding: 8px;
	background: var(--caq-surface);
	border: 1px solid var(--caq-line);
	border-radius: 999px;
	box-shadow: var(--caq-shadow-sm);
}
.caq-swatch-strip span {
	width: 22px; height: 22px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.caq-badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	padding: 0;
	margin: 0 0 26px;
}
.caq-badges li {
	font-size: 13px;
	font-weight: 600;
	color: var(--caq-ink-soft);
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--caq-surface-2);
	border: 1px solid var(--caq-line);
}

/* ---------- Buttons ---------------------------------------------------- */
.caq-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 15px 30px;
	border-radius: 999px;
	transition: transform .18s var(--caq-ease), box-shadow .18s var(--caq-ease), background .18s, color .18s, opacity .18s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1;
}
.caq-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--caq-accent) 60%, transparent); outline-offset: 3px; }
.caq-btn-primary {
	color: var(--caq-accent-ink);
	background: linear-gradient(120deg, var(--caq-accent), var(--caq-accent-2));
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--caq-accent) 70%, transparent);
}
.caq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px color-mix(in srgb, var(--caq-accent) 70%, transparent); }
.caq-btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.2); }
.caq-btn-soft {
	color: var(--caq-ink);
	background: var(--caq-surface-2);
	border: 1px solid var(--caq-line-strong);
}
.caq-btn-soft:hover { transform: translateY(-2px); box-shadow: var(--caq-shadow-sm); }
.caq-btn-ghost {
	color: var(--caq-ink-soft);
	background: transparent;
	padding-inline: 18px;
}
.caq-btn-ghost:hover { color: var(--caq-ink); }

/* ---------- Options grid ---------------------------------------------- */
.caq-options { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.caq-options--grid { grid-template-columns: repeat(4, 1fr); }
.caq-options--row  { grid-template-columns: repeat(3, 1fr); }

.caq-opt {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: var(--caq-radius-inner);
	transition: transform .2s var(--caq-ease);
}
.caq-opt:hover { transform: translateY(-4px); }
.caq-opt-frame {
	position: relative;
	border-radius: var(--caq-radius-inner);
	padding: 5px;
	background: var(--caq-surface);
	border: 1.5px solid var(--caq-line);
	box-shadow: var(--caq-shadow-sm);
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.caq-opt-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--caq-radius-inner) - 5px);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	position: relative;
}
.caq-eye svg, .caq-vein-svg { width: 100%; height: 100%; display: block; }

/* ---- Rich swatch texture (built-in "photo" feel, no external images) ---- */
/* Hair: soft vertical strands + glossy diagonal sheen + gentle depth. */
.caq-media-swatch::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		repeating-linear-gradient(95deg,
			rgba(255,255,255,.05) 0 1px,
			rgba(0,0,0,.05) 1px 2px,
			transparent 2px 5px);
	mix-blend-mode: soft-light;
	opacity: .5;
}
.caq-media-swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(116deg, transparent 36%, rgba(255,255,255,.15) 50%, transparent 64%),
		radial-gradient(120% 85% at 28% 8%, rgba(255,255,255,.18), rgba(255,255,255,0) 52%),
		linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(0,0,0,.20));
}
/* Skin: soft natural sheen with a touch of dimension. */
.caq-media-skin::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(130% 90% at 32% 18%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(0,0,0,.14));
}
/* Metal: bright specular streaks for a polished, reflective look. */
.caq-media-metal::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(120deg, transparent 26%, rgba(255,255,255,.65) 40%, transparent 50%, rgba(255,255,255,.30) 62%, transparent 74%),
		linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12));
	opacity: .85;
}
/* Contrast: subtle gloss over the three-tone bands. */
.caq-media-contrast::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(0,0,0,.12));
}

.caq-opt-label {
	font-size: clamp(13px, 1.5vw, 15px);
	font-weight: 600;
	color: var(--caq-ink-soft);
	transition: color .2s;
	padding-inline: 4px;
}

/* Selected + focus states */
.caq-opt-check {
	position: absolute;
	top: 10px; right: 10px;
	width: 30px; height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--caq-accent-ink);
	background: linear-gradient(120deg, var(--caq-accent), var(--caq-accent-2));
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--caq-accent) 80%, transparent);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .2s var(--caq-ease), transform .28s var(--caq-ease);
}
.caq-opt-check svg { width: 17px; height: 17px; }
.caq-opt[aria-selected="true"] .caq-opt-frame {
	border-color: var(--caq-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--caq-accent) 26%, transparent), var(--caq-shadow-sm);
	background: color-mix(in srgb, var(--caq-accent) 5%, var(--caq-surface));
}
.caq-opt[aria-selected="true"] .caq-opt-check { opacity: 1; transform: scale(1); }
.caq-opt[aria-selected="true"] .caq-opt-label { color: var(--caq-ink); }
.caq-opt:focus-visible { outline: none; }
.caq-opt:focus-visible .caq-opt-frame { border-color: var(--caq-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--caq-accent) 30%, transparent); }

/* Row layout (wider cards, media a bit shorter) */
.caq-options--row .caq-opt-media { aspect-ratio: 16 / 10; }

/* ---------- Question footer ------------------------------------------- */
.caq-q-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: clamp(22px, 3.5vw, 34px);
}
.caq-q-foot .caq-back { visibility: visible; }
.caq-q-foot .caq-next { margin-left: auto; }

/* ---------- Lead / email step ----------------------------------------- */
.caq-lead { text-align: center; }
.caq-lead-inner { max-width: 460px; margin-inline: auto; }
.caq-lead-art { margin-bottom: 14px; }
.caq-lock {
	display: inline-grid;
	place-items: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	color: var(--caq-accent-ink);
	background: linear-gradient(120deg, var(--caq-accent), var(--caq-accent-2));
	box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--caq-accent) 70%, transparent);
}
.caq-lock svg { width: 30px; height: 30px; }
.caq-lead-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.caq-input {
	width: 100%;
	font: inherit;
	padding: 16px 20px;
	border-radius: 16px;
	border: 1.5px solid var(--caq-line-strong);
	background: var(--caq-surface-2);
	color: var(--caq-ink);
	text-align: center;
	transition: border-color .2s, box-shadow .2s;
}
.caq-input::placeholder { color: color-mix(in srgb, var(--caq-ink-soft) 80%, transparent); }
.caq-input:focus { outline: none; border-color: var(--caq-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--caq-accent) 22%, transparent); }
.caq-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
	font-size: 14px;
	color: var(--caq-ink-soft);
	cursor: pointer;
}
.caq-consent-box { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--caq-accent); flex: none; }
.caq-error { color: #e5484d; font-size: 14px; font-weight: 600; margin: 0; }
.caq-skip {
	appearance: none; border: 0; background: transparent; cursor: pointer;
	font: inherit; font-weight: 600; color: var(--caq-ink-soft);
	padding: 6px; text-decoration: underline; text-underline-offset: 3px;
}
.caq-skip:hover { color: var(--caq-ink); }
.caq-visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Loading ---------------------------------------------------- */
.caq-loading { text-align: center; padding: clamp(40px, 8vw, 90px) 0; }
.caq-loading-ring {
	position: relative;
	width: 74px; height: 74px;
	margin: 0 auto 22px;
}
.caq-loading-ring span {
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 4px solid transparent;
	border-top-color: var(--caq-accent);
	animation: caq-spin 1s linear infinite;
}
.caq-loading-ring span:nth-child(2) { inset: 10px; border-top-color: var(--caq-accent-2); animation-duration: 1.4s; }
.caq-loading-ring span:nth-child(3) { inset: 20px; border-top-color: color-mix(in srgb, var(--caq-accent) 50%, var(--caq-accent-2)); animation-duration: 1.8s; }
@keyframes caq-spin { to { transform: rotate(360deg); } }
.caq-loading-text { color: var(--caq-ink-soft); font-weight: 600; }

/* ---------- Result ----------------------------------------------------- */
.caq-result-hero {
	text-align: center;
	padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 30px);
	border-radius: var(--caq-radius-inner);
	background:
		radial-gradient(120% 160% at 50% -20%, color-mix(in srgb, var(--caq-accent) 22%, transparent), transparent 60%),
		var(--caq-surface-2);
	border: 1px solid var(--caq-line);
	margin-bottom: clamp(20px, 3vw, 30px);
}
.caq-result-eyebrow {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 12px;
	font-weight: 700;
	color: var(--caq-ink-soft);
	margin: 0 0 8px;
}
.caq-result-name {
	font-size: clamp(30px, 6vw, 54px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0;
	background: linear-gradient(120deg, var(--caq-accent), var(--caq-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.caq-result-tagline { margin: 10px 0 0; font-size: clamp(15px, 2vw, 19px); font-weight: 600; color: var(--caq-ink); }
.caq-result-summary {
	font-size: clamp(15px, 2vw, 17px);
	color: var(--caq-ink-soft);
	max-width: 62ch;
	margin: 0 auto clamp(24px, 4vw, 34px);
	text-align: center;
}
.caq-block-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
	margin: 0 0 12px;
	color: var(--caq-ink);
}
.caq-palette-block { margin-bottom: clamp(22px, 3.4vw, 30px); }
.caq-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.caq-swatches--neutral, .caq-swatches--avoid { grid-template-columns: repeat(4, 1fr); }
.caq-swatch {
	aspect-ratio: 1;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), var(--caq-shadow-sm);
	position: relative;
	transition: transform .2s var(--caq-ease);
	animation: caq-pop .5s var(--caq-ease) both;
}
.caq-swatch:hover { transform: translateY(-4px) scale(1.04); z-index: 2; }
.caq-swatch::after {
	content: attr(data-hex);
	position: absolute;
	left: 50%; bottom: -22px;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--caq-ink-soft);
	opacity: 0;
	transition: opacity .2s;
	white-space: nowrap;
	pointer-events: none;
}
.caq-swatch:hover::after { opacity: 1; }
@keyframes caq-pop {
	from { opacity: 0; transform: translateY(8px) scale(.9); }
	to   { opacity: 1; transform: none; }
}
.caq-result-cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(20px, 4vw, 40px);
}
.caq-result-meta { margin: clamp(20px, 3vw, 28px) 0; }
.caq-meta-chip {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 22px;
	border-radius: 16px;
	background: var(--caq-surface-2);
	border: 1px solid var(--caq-line);
}
.caq-meta-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--caq-ink-soft); }
.caq-meta-val { font-size: 16px; font-weight: 700; }
.caq-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: clamp(24px, 4vw, 34px);
}

/* ---------- Responsive ------------------------------------------------- */
@media (max-width: 860px) {
	.caq-options--grid { grid-template-columns: repeat(3, 1fr); }
	.caq-swatches { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
	.caq-options--grid { grid-template-columns: repeat(2, 1fr); }
	.caq-options--row  { grid-template-columns: 1fr; }
	.caq-options--row .caq-opt {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 16px;
	}
	.caq-options--row .caq-opt-frame { width: 108px; flex: none; }
	.caq-options--row .caq-opt-media { aspect-ratio: 1; }
	.caq-options--row .caq-opt-label { font-size: 16px; }
	.caq-result-cols { grid-template-columns: 1fr; }
	.caq-q-foot { flex-direction: row; }
	.caq-btn { padding: 14px 22px; }
	.caq-result-actions .caq-btn { width: 100%; }
}
@media (max-width: 400px) {
	.caq-options--grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.caq-swatches--wear { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Theme-proofing — some themes style content buttons/links with !important
   (e.g. `.entry-content button { background: crimson !important }`), which can
   bleed into the quiz. These rules are scoped under .caq and use !important so
   the widget always looks the same regardless of the active theme. They only
   affect elements inside the quiz — nothing else on the site is touched.
   ========================================================================== */

/* Option cards + ghost/skip buttons must have NO background from the theme. */
.caq .caq-opt,
.caq .caq-btn-ghost,
.caq .caq-skip {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	text-shadow: none !important;
	text-transform: none !important;
}
.caq .caq-opt { border-radius: var(--caq-radius-inner) !important; }

/* Generic button normalisation. */
.caq .caq-btn {
	text-transform: none !important;
	text-shadow: none !important;
	letter-spacing: .01em !important;
	line-height: 1 !important;
	min-height: 0 !important;
	border-radius: 999px !important;
}

/* Primary / submit buttons keep the brand gradient. */
.caq .caq-btn-primary,
.caq .caq-lead-submit,
.caq a.caq-btn-primary {
	color: var(--caq-accent-ink) !important;
	background: linear-gradient(120deg, var(--caq-accent), var(--caq-accent-2)) !important;
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--caq-accent) 70%, transparent) !important;
	border: 0 !important;
}

/* Soft (Share) button. */
.caq .caq-btn-soft {
	color: var(--caq-ink) !important;
	background: var(--caq-surface-2) !important;
	background-image: none !important;
	border: 1px solid var(--caq-line-strong) !important;
	box-shadow: none !important;
}

/* Ghost (Back) button — text only, no fill. */
.caq .caq-btn-ghost { color: var(--caq-ink-soft) !important; }
.caq .caq-btn-ghost:hover { color: var(--caq-ink) !important; background: transparent !important; }

/* Skip link. */
.caq .caq-skip { color: var(--caq-ink-soft) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* Labels must never inherit the theme's button text colour. */
.caq .caq-opt-label { color: var(--caq-ink-soft) !important; text-shadow: none !important; }
.caq .caq-opt[aria-selected="true"] .caq-opt-label { color: var(--caq-ink) !important; }

.caq a { text-decoration: none !important; }
.caq a.caq-btn { text-decoration: none !important; }
.caq .caq-input { background: var(--caq-surface-2) !important; color: var(--caq-ink) !important; }