/* =========================================================================
   Love Language Quiz
   Everything is scoped under .llq so nothing leaks into the theme, and the
   theme has a hard time leaking in either. Colours come from CSS variables set
   inline on the wrapper by the shortcode, so two instances on one page can run
   different accents without a second stylesheet.
   ========================================================================= */

.llq.llq {
	/* Light palette. The dark block further down overrides these. */
	--llq-page: transparent;
	--llq-surface: #ffffff;
	--llq-surface-2: #faf6f5;
	--llq-surface-3: #f2eae9;
	--llq-text: #1b1420;
	--llq-muted: #6b6070;
	--llq-line: rgba(27, 20, 32, 0.10);
	--llq-line-2: rgba(27, 20, 32, 0.055);
	--llq-shadow: 0 1px 2px rgba(30, 16, 40, 0.04), 0 12px 30px -14px rgba(30, 16, 40, 0.18);
	--llq-shadow-lg: 0 2px 4px rgba(30, 16, 40, 0.04), 0 36px 70px -30px rgba(30, 16, 40, 0.32);
	--llq-ok: #17945c;

	--llq-a: #e0506b;
	--llq-a2: #8a63d2;
	--llq-a-rgb: 224, 80, 107;
	--llq-a2-rgb: 138, 99, 210;

	/* Contrast safe variants, derived from the accent in PHP. The bright
	   accent is for blocks of colour. These two are for anywhere the accent
	   has to carry actual words. */
	--llq-a-deep: #aa3d51;
	--llq-a2-deep: #694b9f;
	--llq-a-lift: #eb8a9d;

	/* Accent coloured text. Swapped for the lighter variant in dark mode. */
	--llq-ink-accent: var(--llq-a-deep);

	--llq-r: 24px;
	--llq-scale: 1;
	--llq-display: inherit;

	--llq-grad: linear-gradient(122deg, var(--llq-a), var(--llq-a2));

	/* White text sits on this one, so it stays dark in both themes. */
	--llq-grad-deep: linear-gradient(122deg, var(--llq-a-deep), var(--llq-a2-deep));

	/* Illustration tokens. Every SVG in the plugin paints from these. */
	--llq-art-bg: rgba(var(--llq-a-rgb), 0.08);
	--llq-art-soft: rgba(var(--llq-a-rgb), 0.20);
	--llq-art-deep: rgba(var(--llq-a2-rgb), 0.30);
	--llq-art-line: rgba(var(--llq-a-rgb), 0.85);
	--llq-art-ink: rgba(27, 20, 32, 0.42);
	--llq-art-accent: var(--llq-a2);
	--llq-art-cut: #ffffff;

	box-sizing: border-box;
	position: relative;
	max-width: 1120px;
	margin-inline: auto;
	color: var(--llq-text);
	font-size: calc(16px * var(--llq-scale));
	line-height: 1.62;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	text-align: left;

	background: var(--llq-page);
	border-radius: calc(var(--llq-r) + 14px);
	padding: clamp(10px, 2vw, 22px);

	/* Keeps the decorative aura from ever pushing the page sideways. Clip
	   rather than hidden so no scroll container is created. */
	overflow-x: clip;
}

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

/* The reset sits inside :where() so it carries no specificity of its own.
   Without that it would be at 0-1-1 and would quietly beat every single class
   component rule below, taking the spacing and the buttons with it. */

.llq :where(p, h2, h3, h4, h5, ul, ol, li, figure, dl, dd, fieldset, legend) {
	margin: 0;
	padding: 0;
	border: 0;
}

/* The li has to be named here, not just the ul. Plenty of themes set
   list-style on the li directly, and a direct rule beats the value the li would
   otherwise inherit from its parent, so resetting only ul and ol leaves bullets
   showing on somebody else's site. */
.llq :where(ul, ol, li) {
	list-style: none;
}

.llq.llq :where(button) {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}

.llq.llq :where(input, textarea, select) {
	font: inherit;
	color: inherit;
}

.llq.llq :where(a) {
	color: inherit;
}

/* Theme armour.
 *
 * A theme that colours body copy with a descendant selector, and most of them
 * do, beats a lone component class. `.entry-content p` scores (0,1,1) against
 * `.llq-note` at (0,1,0): the class counts tie, the element count decides, and
 * the theme wins. The symptom is every paragraph and list item inside the quiz
 * picking up the theme's body colour while the headings, which take their
 * colour by inheritance, look perfectly fine.
 *
 * So text colour is defended at two levels. This rule sits at (0,2,1) and
 * catches any element the plugin does not colour itself, handing it back to
 * whatever the surrounding component set. Every rule that does name a colour
 * carries a doubled root class and sits at (0,3,0), so it still wins over this
 * one and over the theme.
 *
 * If a theme ever manages to out-specify even that, switching Stylesheet
 * delivery to Always inline on the Design tab prints this file into the body,
 * which puts it after the theme in source order and settles any remaining tie.
 */
.llq.llq :is(p, li, span, strong, em, b, i, u, small, mark, cite,
	label, summary, figcaption, blockquote, dd, dt, td, th, output) {
	color: inherit;
}

.llq :where(img, canvas, svg) {
	max-width: 100%;
	display: block;
}

/* Every inline icon gets a size up front. An SVG carrying a viewBox but no
   width or height has no intrinsic size, so a component rule that misses one
   stretches to fill its container and swallows the card. This default means a
   missed rule costs a slightly wrong icon rather than a broken layout. Both
   selectors sit at 0-1-0 so component rules still win, and the artwork
   override comes second so it beats the icon default. */
.llq :where(svg) {
	width: 18px;
	height: 18px;
	flex: none;
}

.llq :where(.llq-art) {
	width: 100%;
	height: auto;
	flex: initial;
}

/* text-transform is reset here because themes love uppercasing headings, and an
   uppercased result card reads as shouting. The uppercase labels this plugin
   does want are all class rules further down the file, which sit at the same
   0-1-0 specificity and win on source order. */
.llq :where(h2, h3, h4, h5) {
	font-family: var(--llq-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.014em;
	text-transform: none;
}

.llq :where(summary) {
	display: block;
	cursor: pointer;
	list-style: none;
}

.llq :where(summary)::-webkit-details-marker {
	display: none;
}

/* -------------------------------------------------------------------------
   Illustration paint rules
   ------------------------------------------------------------------------- */

.llq-art__bg { fill: var(--llq-art-bg); }
.llq-art__soft { fill: var(--llq-art-soft); }
.llq-art__deep { fill: var(--llq-art-deep); }
.llq-art__accent { fill: var(--llq-art-accent); opacity: 0.72; }
.llq-art__cut { fill: var(--llq-art-cut); }
.llq-art__dot { fill: var(--llq-art-ink); }
.llq-art__ink-fill { fill: var(--llq-art-ink); opacity: 0.55; }

.llq-art__line {
	fill: none;
	stroke: var(--llq-art-line);
	stroke-width: 3.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.llq-art__line--soft { opacity: 0.45; stroke-width: 2.6; }
.llq-art__line--thick { stroke-width: 4; }

.llq-art__line-fill {
	fill: none;
	stroke: var(--llq-art-line);
	stroke-width: 3.2;
	stroke-linejoin: round;
}

.llq-art__ink {
	fill: none;
	stroke: var(--llq-art-ink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.llq-art__ink--thin { stroke-width: 2; opacity: 0.65; }
.llq-art__ink--thick { stroke-width: 3.6; }

.llq-art__accent-line {
	fill: none;
	stroke: var(--llq-art-accent);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.llq-art__accent-line--thick { stroke-width: 3.4; }

/* A knockout drawn as a stroke rather than a fill, used for ticks that sit on
   top of an accent shape. */
.llq-art__cut--stroke {
	fill: none;
	stroke: var(--llq-art-cut);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
   Decorative background
   ------------------------------------------------------------------------- */

.llq-aura {
	position: absolute;
	inset: -10% -14% auto -14%;
	height: 420px;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(46% 58% at 22% 12%, rgba(var(--llq-a-rgb), 0.20), transparent 68%),
		radial-gradient(42% 54% at 82% 6%, rgba(var(--llq-a2-rgb), 0.18), transparent 66%);
	filter: blur(6px);
}

.llq-hero,
.llq-app,
.llq-section {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.llq-hero {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto clamp(20px, 3.6vw, 34px);
	padding-top: clamp(6px, 2vw, 20px);
}

.llq.llq .llq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 14px 6px 10px;
	border-radius: 999px;
	background: var(--llq-surface);
	border: 1px solid var(--llq-line);
	box-shadow: var(--llq-shadow);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--llq-muted);
	text-transform: none;
}

.llq-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--llq-grad);
	flex: none;
}

.llq-hero__title {
	margin: 0 0 12px;
	font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.05rem);
	line-height: 1.08;
	letter-spacing: -0.028em;
	font-weight: 600;
}

.llq.llq .llq-hero__sub {
	margin: 0;
	color: var(--llq-muted);
	font-size: clamp(0.98rem, 0.93rem + 0.3vw, 1.1rem);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.llq-card {
	background: var(--llq-surface);
	border: 1px solid var(--llq-line);
	border-radius: var(--llq-r);
	box-shadow: var(--llq-shadow-lg);
	padding: clamp(18px, 3.2vw, 34px);
}

.llq-stage {
	min-height: 60px;
}

.llq-fade {
	animation: llq-fade 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes llq-fade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.llq.llq .llq-noscript {
	margin-top: 16px;
	color: var(--llq-muted);
}

/* ---- Opening card ---- */

.llq-start {
	display: grid;
	gap: clamp(18px, 3vw, 34px);
	align-items: center;
}

.llq-start__art {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.llq-start__tile {
	display: block;
	border-radius: calc(var(--llq-r) * 0.62);
	overflow: hidden;
	background: var(--llq-surface-2);
	border: 1px solid var(--llq-line-2);
}

/* Five emblems into a three column grid leaves an odd gap, so the last one
   spans the two remaining cells and reads as deliberate. */
.llq-start__tile:nth-child(5) {
	grid-column: span 2;
}

.llq-start__tile:nth-child(5) .llq-art {
	width: 50%;
	margin-inline: auto;
}

.llq-start__title {
	margin: 0 0 10px;
	font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.6rem);
}

.llq.llq .llq-start__lede {
	margin: 0 0 18px;
	color: var(--llq-muted);
}

.llq-start__list {
	display: grid;
	gap: 9px;
	margin: 0 0 22px;
}

.llq-start__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95em;
}

.llq.llq .llq-start__list svg {
	width: 17px;
	height: 17px;
	margin-top: 4px;
	color: var(--llq-a);
	stroke-width: 2.4;
}

.llq.llq .llq-start__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	color: var(--llq-muted);
	font-size: 0.84em;
	line-height: 1.5;
}

.llq.llq .llq-start__note svg {
	margin-top: 3px;
	flex: none;
	color: var(--llq-ok);
}

@media (min-width: 760px) {
	.llq-start {
		grid-template-columns: 0.85fr 1fr;
	}
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.llq.llq .llq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1px solid var(--llq-line);
	background: var(--llq-surface);
	color: var(--llq-text);
	font-size: 0.94em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.llq .llq-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--llq-shadow);
}

.llq .llq-btn:active {
	transform: none;
}

.llq.llq .llq-btn--primary {
	background: var(--llq-grad-deep);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(var(--llq-a-rgb), 0.85);
}

.llq .llq-btn--primary:hover {
	box-shadow: 0 16px 32px -14px rgba(var(--llq-a-rgb), 0.9);
}

.llq .llq-btn--lg {
	padding: 15px 28px;
	font-size: 1.02em;
}

.llq.llq .llq-btn--ghost {
	background: transparent;
	border-color: var(--llq-line);
	color: var(--llq-muted);
}

.llq.llq .llq-btn--ghost:hover {
	color: var(--llq-text);
	border-color: var(--llq-a);
}

.llq.llq .llq-btn--quiet {
	background: none;
	border-color: transparent;
	color: var(--llq-muted);
	padding: 10px 12px;
	font-weight: 500;
}

.llq.llq .llq-btn--quiet:hover {
	color: var(--llq-text);
	box-shadow: none;
}

.llq .llq-btn:focus-visible,
.llq .llq-choice:focus-visible,
.llq .llq-ctx:focus-visible,
.llq .llq-qa__q:focus-visible,
.llq .llq-field input:focus-visible {
	outline: 3px solid rgba(var(--llq-a-rgb), 0.55);
	outline-offset: 2px;
}

.llq-actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/* -------------------------------------------------------------------------
   Progress
   ------------------------------------------------------------------------- */

.llq-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.llq-progress__bars {
	display: flex;
	gap: 6px;
	flex: 1 1 200px;
	min-width: 140px;
}

.llq-progress__seg {
	position: relative;
	height: 7px;
	flex: 1;
	border-radius: 99px;
	background: var(--llq-surface-3);
	overflow: hidden;
}

.llq-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 99px;
	background: var(--llq-grad);
	transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.llq.llq .llq-progress__label {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--llq-muted);
	white-space: nowrap;
}

.llq.llq .llq-progress__round {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(var(--llq-a-rgb), 0.10);
	color: var(--llq-ink-accent);
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Context picker
   ------------------------------------------------------------------------- */

.llq-q__title {
	margin: 0 0 8px;
	font-size: clamp(1.24rem, 1.02rem + 0.95vw, 1.72rem);
	line-height: 1.18;
}

.llq.llq .llq-q__lede {
	margin: 0 0 22px;
	color: var(--llq-muted);
	font-size: 0.95em;
	max-width: 46rem;
}

.llq-ctxs {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.llq .llq-ctx {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 18px 14px 20px;
	border-radius: calc(var(--llq-r) * 0.7);
	border: 1.5px solid var(--llq-line);
	background: var(--llq-surface-2);
	text-align: center;
	transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.llq .llq-ctx:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--llq-a-rgb), 0.5);
	box-shadow: var(--llq-shadow);
}

.llq-ctx__art {
	width: 78px;
	margin-bottom: 4px;
}

.llq-ctx__label {
	font-weight: 650;
	font-size: 1.02em;
}

.llq.llq .llq-ctx__note {
	color: var(--llq-muted);
	font-size: 0.82em;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   The duel, which is the signature of this quiz
   ------------------------------------------------------------------------- */

.llq-duel {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	align-items: stretch;
}

.llq.llq .llq-or {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--llq-muted);
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.llq-or::before,
.llq-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--llq-line);
}

.llq .llq-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px;
	border-radius: calc(var(--llq-r) * 0.72);
	border: 1.5px solid var(--llq-line);
	background: var(--llq-surface-2);
	text-align: left;
	transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.llq .llq-choice:hover {
	transform: translateY(-2px);
	border-color: rgba(var(--llq-a-rgb), 0.55);
	background: var(--llq-surface);
	box-shadow: var(--llq-shadow);
}

.llq-choice__art {
	width: 76px;
	flex: none;
	border-radius: calc(var(--llq-r) * 0.5);
	overflow: hidden;
}

.llq-choice__text {
	font-size: 0.98em;
	font-weight: 550;
	line-height: 1.45;
}

.llq.llq .llq-choice__key {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--llq-surface-3);
	color: var(--llq-muted);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.llq.llq .llq-choice__tick {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--llq-grad);
	color: #fff;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.llq-choice__tick svg {
	width: 15px;
	height: 15px;
	stroke-width: 3;
}

.llq .llq-choice.is-picked {
	border-color: var(--llq-a);
	background: rgba(var(--llq-a-rgb), 0.07);
	transform: none;
}

.llq .llq-choice.is-picked .llq-choice__tick {
	opacity: 1;
	transform: none;
}

.llq .llq-choice.is-dimmed {
	opacity: 0.42;
}

@media (min-width: 700px) {
	.llq-duel {
		grid-template-columns: 1fr auto 1fr;
		gap: 16px;
	}

	.llq .llq-choice {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 20px;
	}

	.llq-choice__art {
		width: 100%;
		max-width: 132px;
		margin-inline: auto;
	}

	.llq-choice__text {
		font-size: 1.02em;
	}

	.llq-choice__key {
		display: flex;
	}

	.llq-or {
		flex-direction: column;
		width: auto;
	}

	.llq-or::before,
	.llq-or::after {
		width: 1px;
		height: auto;
		flex: 1;
	}
}

.llq.llq .llq-hint {
	margin-top: 16px;
	color: var(--llq-muted);
	font-size: 0.82em;
}

.llq-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	flex-wrap: wrap;
}

/* ---- Round two interstitial ---- */

.llq-inter {
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 14px;
}

.llq-inter__art {
	width: 108px;
}

.llq-inter__title {
	margin: 0;
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
}

.llq.llq .llq-inter__text {
	margin: 0;
	color: var(--llq-muted);
	max-width: 34rem;
}

/* ---- Tiebreak flag ---- */

.llq.llq .llq-flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(var(--llq-a2-rgb), 0.12);
	color: var(--llq-a2-deep);
	font-size: 0.78em;
	font-weight: 650;
}

/* -------------------------------------------------------------------------
   Result
   ------------------------------------------------------------------------- */

/* minmax(0, 1fr) rather than the default 1fr, and min-width on the items.
   A grid item's automatic minimum size is its min-content width, so a single
   nowrap string anywhere inside, the compare URL being the obvious one, would
   otherwise widen every panel on the result screen and push the lot off the
   side of a phone. */
.llq-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.llq-result > * {
	min-width: 0;
}

.llq-res-hero {
	display: grid;
	gap: 18px;
	align-items: center;
	padding: clamp(20px, 3.4vw, 36px);
	border-radius: var(--llq-r);
	border: 1px solid var(--llq-line);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(var(--llq-a-rgb), 0.13), transparent 62%),
		radial-gradient(120% 140% at 100% 20%, rgba(var(--llq-a2-rgb), 0.13), transparent 60%),
		var(--llq-surface);
	box-shadow: var(--llq-shadow-lg);
}

.llq-res-hero__art {
	width: 118px;
	justify-self: center;
}

.llq.llq .llq-kicker {
	display: block;
	margin-bottom: 6px;
	color: var(--llq-ink-accent);
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.llq-res-hero__name {
	margin: 0 0 6px;
	font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem);
	line-height: 1.06;
	letter-spacing: -0.028em;
}

.llq.llq .llq-res-hero__tagline {
	margin: 0 0 12px;
	color: var(--llq-ink-accent);
	font-size: 1.02em;
	font-weight: 600;
}

.llq.llq .llq-res-hero__text {
	margin: 0;
	color: var(--llq-muted);
}

.llq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.llq-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--llq-surface-2);
	border: 1px solid var(--llq-line);
	font-size: 0.82em;
	font-weight: 600;
}

.llq-chip b {
	font-weight: 700;
}

.llq.llq .llq-chip__pct {
	color: var(--llq-ink-accent);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 700px) {
	.llq-res-hero {
		grid-template-columns: 140px 1fr;
		gap: 28px;
	}

	.llq-res-hero__art {
		width: 100%;
	}
}

/* ---- Panels ---- */

.llq-panel {
	padding: clamp(18px, 3vw, 30px);
	border-radius: var(--llq-r);
	border: 1px solid var(--llq-line);
	background: var(--llq-surface);
	box-shadow: var(--llq-shadow);
}

.llq-panel--accent {
	background:
		linear-gradient(180deg, rgba(var(--llq-a-rgb), 0.08), transparent 70%),
		var(--llq-surface);
	border-color: rgba(var(--llq-a-rgb), 0.28);
}

.llq-panel__title {
	margin: 0 0 6px;
	font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.34rem);
}

.llq.llq .llq-panel__lede {
	margin: 0 0 18px;
	color: var(--llq-muted);
	font-size: 0.92em;
}

.llq-panel + .llq-panel {
	margin-top: 0;
}

.llq-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.llq-cols > * {
	min-width: 0;
}

@media (min-width: 780px) {
	.llq-cols--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- The ranking chart ---- */

.llq-bars {
	display: grid;
	gap: 16px;
}

.llq-bar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin-bottom: 7px;
}

.llq-bar__name {
	font-weight: 650;
	font-size: 0.96em;
}

.llq.llq .llq-bar__name.is-top {
	color: var(--llq-ink-accent);
}

.llq.llq .llq-bar__nums {
	display: flex;
	gap: 12px;
	font-size: 0.8em;
	color: var(--llq-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.llq-bar__track {
	position: relative;
	height: 12px;
	border-radius: 99px;
	background: var(--llq-surface-3);
	margin-bottom: 5px;
}

/* The width is written into the markup, so the chart is correct with no
   script involvement at all. The grow is a scaleX animation on top of that,
   which means a bar rendered in a background tab, or on a browser that never
   ran the animation, still reads the right length. */
.llq-bar__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 99px;
	background: var(--llq-grad);
	transform-origin: left center;
	animation: llq-grow 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes llq-grow {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.llq-bar__track--give {
	height: 8px;
	background: transparent;
	border: 1.5px dashed var(--llq-line);
	margin-bottom: 0;
}

.llq-bar__fill--give {
	background: rgba(var(--llq-a2-rgb), 0.42);
	inset: -1.5px auto -1.5px -1.5px;
	border-radius: 99px;
}

.llq.llq .llq-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--llq-line-2);
	font-size: 0.8em;
	color: var(--llq-muted);
}

.llq-legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.llq-swatch {
	width: 22px;
	height: 10px;
	border-radius: 99px;
	background: var(--llq-grad);
	flex: none;
}

.llq-swatch--give {
	background: rgba(var(--llq-a2-rgb), 0.42);
	border: 1.5px dashed var(--llq-line);
}

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

.llq.llq .llq-note {
	margin: 0;
	color: var(--llq-muted);
	font-size: 0.94em;
}

.llq-note + .llq-note {
	margin-top: 12px;
}

.llq-list {
	display: grid;
	gap: 11px;
	margin: 0;
}

.llq-list li {
	position: relative;
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 0.95em;
	line-height: 1.5;
}

.llq-list li::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--llq-a);
	flex: none;
}

.llq-list--num {
	counter-reset: llq-step;
}

.llq.llq .llq-list--num li::before {
	counter-increment: llq-step;
	content: counter(llq-step);
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 8px;
	background: rgba(var(--llq-a-rgb), 0.12);
	color: var(--llq-ink-accent);
	font-size: 0.76rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.llq.llq .llq-mini {
	margin: 0 0 8px;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--llq-muted);
}

/* ---- Compare ---- */

.llq-share {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.llq.llq .llq-share__link {
	flex: 1 1 260px;
	min-width: 0;
	padding: 12px 15px;
	border-radius: 12px;
	border: 1px solid var(--llq-line);
	background: var(--llq-surface-2);
	color: var(--llq-muted);
	font-size: 0.84em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.llq-vs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-top: 4px;
}

.llq-vs__row {
	display: grid;
	gap: 6px;
}

.llq-vs__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.9em;
	font-weight: 650;
}

.llq-vs__pair {
	display: grid;
	gap: 4px;
}

.llq-vs__line {
	display: grid;
	grid-template-columns: 46px 1fr;
	align-items: center;
	gap: 10px;
}

.llq.llq .llq-vs__who {
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--llq-muted);
}

.llq-vs__track {
	position: relative;
	height: 10px;
	border-radius: 99px;
	background: var(--llq-surface-3);
}

.llq-vs__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 99px;
	background: var(--llq-grad);
	transform-origin: left center;
	animation: llq-grow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.llq-vs__fill--them {
	background: linear-gradient(122deg, var(--llq-a2), var(--llq-a));
	opacity: 0.72;
}

.llq-banner {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin-bottom: 16px;
	padding: 14px 16px;
	border-radius: calc(var(--llq-r) * 0.6);
	background: rgba(var(--llq-a2-rgb), 0.10);
	border: 1px solid rgba(var(--llq-a2-rgb), 0.28);
}

.llq-banner__art {
	width: 44px;
	flex: none;
}

.llq-banner__title {
	margin: 0 0 2px;
	font-size: 0.96em;
	font-weight: 700;
}

.llq.llq .llq-banner__text {
	margin: 0;
	color: var(--llq-muted);
	font-size: 0.87em;
	line-height: 1.5;
}

/* ---- Lead capture ---- */

.llq-lead {
	display: grid;
	gap: 12px;
}

.llq-field {
	display: grid;
	gap: 6px;
}

.llq.llq .llq-field label {
	font-size: 0.82em;
	font-weight: 650;
	color: var(--llq-muted);
}

.llq.llq .llq-field input[type="email"] {
	width: 100%;
	padding: 13px 16px;
	border-radius: 12px;
	border: 1.5px solid var(--llq-line);
	background: var(--llq-surface-2);
	color: var(--llq-text);
	font-size: 0.98em;
	line-height: 1.3;
}

.llq.llq .llq-field input[type="email"]::placeholder {
	color: var(--llq-muted);
	opacity: 0.7;
}

.llq.llq .llq-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.86em;
	color: var(--llq-muted);
	line-height: 1.5;
	cursor: pointer;
}

.llq .llq-consent input {
	margin-top: 4px;
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: var(--llq-a);
}

.llq.llq .llq-error {
	margin: 0;
	color: #c62f4b;
	font-size: 0.85em;
	font-weight: 600;
}

.llq.llq .llq-success {
	margin: 0;
	color: var(--llq-ok);
	font-size: 0.9em;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Reading sections
   ------------------------------------------------------------------------- */

.llq-section {
	margin-top: clamp(38px, 6vw, 74px);
}

.llq-section--tint {
	padding: clamp(22px, 4vw, 44px);
	border-radius: calc(var(--llq-r) + 6px);
	background: var(--llq-surface-2);
	border: 1px solid var(--llq-line-2);
}

.llq-section__title {
	margin: 0 0 12px;
	font-size: clamp(1.4rem, 1.08rem + 1.3vw, 2.05rem);
	line-height: 1.14;
	letter-spacing: -0.022em;
}

.llq.llq .llq-section__lede {
	margin: 0 0 26px;
	max-width: 48rem;
	color: var(--llq-muted);
	font-size: clamp(0.96rem, 0.93rem + 0.2vw, 1.05rem);
}

/* ---- How it works ---- */

.llq-steps {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	counter-reset: none;
}

.llq-step {
	padding: 22px;
	border-radius: var(--llq-r);
	background: var(--llq-surface);
	border: 1px solid var(--llq-line);
	box-shadow: var(--llq-shadow);
}

.llq.llq .llq-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
	border-radius: 11px;
	background: var(--llq-grad);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
}

.llq-step__title {
	margin: 0 0 7px;
	font-size: 1.06em;
}

.llq.llq .llq-step__text {
	margin: 0;
	color: var(--llq-muted);
	font-size: 0.92em;
}

/* ---- The five languages ---- */

.llq-langs {
	display: grid;
	gap: 14px;
}

.llq-lang {
	display: grid;
	gap: 18px;
	padding: clamp(18px, 2.6vw, 26px);
	border-radius: var(--llq-r);
	background: var(--llq-surface);
	border: 1px solid var(--llq-line);
	box-shadow: var(--llq-shadow);
}

.llq-lang__art {
	display: block;
	width: 92px;
	border-radius: calc(var(--llq-r) * 0.55);
	overflow: hidden;
}

.llq-lang__name {
	margin: 0 0 4px;
	font-size: clamp(1.14rem, 1rem + 0.6vw, 1.4rem);
}

.llq.llq .llq-lang__tagline {
	margin: 0 0 10px;
	color: var(--llq-ink-accent);
	font-weight: 600;
	font-size: 0.95em;
}

.llq.llq .llq-lang__text {
	margin: 0 0 16px;
	color: var(--llq-muted);
	font-size: 0.96em;
}

.llq.llq .llq-lang__sub {
	margin: 0 0 8px;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--llq-muted);
}

.llq-lang__signs {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.llq-lang__signs li {
	position: relative;
	padding-left: 20px;
	font-size: 0.9em;
	line-height: 1.45;
}

.llq-lang__signs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(var(--llq-a-rgb), 0.55);
}

@media (min-width: 700px) {
	.llq-lang {
		grid-template-columns: 92px 1fr;
	}

	.llq-lang__art {
		width: 100%;
	}
}

/* ---- Two column explainer blocks ---- */

.llq-grid2 {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.llq-block {
	padding: 22px;
	border-radius: var(--llq-r);
	background: var(--llq-surface);
	border: 1px solid var(--llq-line);
}

.llq-section--tint .llq-block {
	box-shadow: var(--llq-shadow);
}

.llq-block__title {
	margin: 0 0 8px;
	font-size: 1.06em;
}

.llq.llq .llq-block__text {
	margin: 0;
	color: var(--llq-muted);
	font-size: 0.93em;
}

/* ---- Myths ---- */

.llq-myths {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.llq-myth {
	padding: 20px;
	border-radius: var(--llq-r);
	background: var(--llq-surface);
	border: 1px solid var(--llq-line);
}

.llq-myth__claim {
	margin: 0 0 10px;
	font-weight: 650;
	font-size: 0.98em;
	line-height: 1.4;
}

.llq.llq .llq-myth__tag {
	display: inline-block;
	margin-right: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(var(--llq-a-rgb), 0.12);
	color: var(--llq-ink-accent);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.llq.llq .llq-myth__real {
	margin: 0;
	color: var(--llq-muted);
	font-size: 0.91em;
}

/* ---- FAQ ---- */

.llq-faq__list {
	display: grid;
	gap: 10px;
}

.llq-qa {
	border-radius: calc(var(--llq-r) * 0.72);
	background: var(--llq-surface);
	border: 1px solid var(--llq-line);
	overflow: hidden;
}

.llq-qa__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 17px 20px;
}

.llq-qa__q h3 {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
}

.llq-qa__icon {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
}

.llq-qa__icon::before,
.llq-qa__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	border-radius: 2px;
	background: var(--llq-a);
	transform: translateY(-50%);
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.llq-qa__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.llq-qa[open] .llq-qa__icon::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.llq.llq .llq-qa__a {
	padding: 0 20px 19px;
	color: var(--llq-muted);
	font-size: 0.94em;
}

/* -------------------------------------------------------------------------
   Dark mode
   ------------------------------------------------------------------------- */

.llq.llq--dark,
.llq.llq--auto.llq-is-dark {
	--llq-page: #0c090f;
	--llq-surface: #17121c;
	--llq-surface-2: #1e1824;
	--llq-surface-3: #2a2233;
	--llq-text: #f3eef6;
	--llq-muted: #a99fb4;
	--llq-line: rgba(255, 255, 255, 0.12);
	--llq-line-2: rgba(255, 255, 255, 0.07);
	--llq-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
	--llq-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 36px 70px -30px rgba(0, 0, 0, 0.85);
	--llq-ok: #43c88b;

	/* On a dark surface the accent has to travel the other way to stay
	   readable, so accent coloured text uses the lifted variant here. */
	--llq-ink-accent: var(--llq-a-lift);

	--llq-art-bg: rgba(255, 255, 255, 0.05);
	--llq-art-soft: rgba(var(--llq-a-rgb), 0.32);
	--llq-art-deep: rgba(var(--llq-a2-rgb), 0.42);
	--llq-art-line: rgba(255, 255, 255, 0.86);
	--llq-art-ink: rgba(255, 255, 255, 0.5);
	--llq-art-cut: #17121c;
}

@media (prefers-color-scheme: dark) {
	.llq.llq--auto {
		--llq-page: #0c090f;
		--llq-surface: #17121c;
		--llq-surface-2: #1e1824;
		--llq-surface-3: #2a2233;
		--llq-text: #f3eef6;
		--llq-muted: #a99fb4;
		--llq-line: rgba(255, 255, 255, 0.12);
		--llq-line-2: rgba(255, 255, 255, 0.07);
		--llq-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
		--llq-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 36px 70px -30px rgba(0, 0, 0, 0.85);
		--llq-ok: #43c88b;

	/* On a dark surface the accent has to travel the other way to stay
	   readable, so accent coloured text uses the lifted variant here. */
	--llq-ink-accent: var(--llq-a-lift);

		--llq-art-bg: rgba(255, 255, 255, 0.05);
		--llq-art-soft: rgba(var(--llq-a-rgb), 0.32);
		--llq-art-deep: rgba(var(--llq-a2-rgb), 0.42);
		--llq-art-line: rgba(255, 255, 255, 0.86);
		--llq-art-ink: rgba(255, 255, 255, 0.5);
		--llq-art-cut: #17121c;
	}
}

/* The wrapper paints its own backdrop in dark mode. Without it a dark theme
   sets a light --llq-text on a transparent root, and on a light page that is
   light text on a light background.
   The margin goes with it. In light mode the root is transparent and sits in
   whatever spacing the page gives it, but a dark slab butted straight up
   against a light site header reads as broken rather than as deliberate. */
.llq.llq--dark,
.llq.llq--auto.llq-is-dark {
	background: var(--llq-page);
	margin-block: clamp(12px, 2.4vw, 28px);
}

@media (prefers-color-scheme: dark) {
	.llq.llq--auto {
		background: var(--llq-page);
		margin-block: clamp(12px, 2.4vw, 28px);
	}
}

.llq.llq--dark .llq-eyebrow,
.llq.llq--auto.llq-is-dark .llq-eyebrow {
	background: var(--llq-surface-2);
}

@media (prefers-color-scheme: dark) {
	.llq.llq--auto .llq-eyebrow {
		background: var(--llq-surface-2);
	}
}

/* -------------------------------------------------------------------------
   Motion and print
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.llq *,
	.llq *::before,
	.llq *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.llq-aura,
	.llq-actions-row,
	.llq-share,
	.llq-lead,
	.llq-nav,
	.llq-progress {
		display: none !important;
	}

	.llq {
		max-width: none;
		padding: 0;
	}

	.llq-card,
	.llq-panel,
	.llq-res-hero,
	.llq-step,
	.llq-lang,
	.llq-block,
	.llq-myth,
	.llq-qa {
		box-shadow: none !important;
		border-color: #ccc !important;
		break-inside: avoid;
	}

	.llq-qa__a {
		display: block !important;
	}
}