/* =========================================================================
   Hair Type Quiz
   Everything is scoped under .htq 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.
   ========================================================================= */

.htq {
	/* Light palette. The dark block further down overrides these. */
	--htq-page: transparent;
	--htq-surface: #ffffff;
	--htq-surface-2: #f7f5f2;
	--htq-surface-3: #efeae4;
	--htq-text: #1a1720;
	--htq-muted: #635c6e;
	--htq-line: rgba(26, 23, 32, 0.10);
	--htq-line-2: rgba(26, 23, 32, 0.055);
	--htq-shadow: 0 1px 2px rgba(24, 18, 40, 0.04), 0 12px 30px -14px rgba(24, 18, 40, 0.18);
	--htq-shadow-lg: 0 2px 4px rgba(24, 18, 40, 0.04), 0 34px 70px -28px rgba(24, 18, 40, 0.30);
	--htq-ok: #1f9d61;
	--htq-warn: #c9791b;

	--htq-a: #7a5af5;
	--htq-a2: #f2825c;
	--htq-a-rgb: 122, 90, 245;
	--htq-a2-rgb: 242, 130, 92;
	--htq-r: 22px;
	--htq-scale: 1;
	--htq-display: inherit;

	--htq-grad: linear-gradient(116deg, var(--htq-a), var(--htq-a2));

	/* Illustration tokens. Every SVG in the plugin paints from these. */
	--htq-art-bg: rgba(var(--htq-a-rgb), 0.07);
	--htq-art-soft: rgba(var(--htq-a-rgb), 0.20);
	--htq-art-deep: rgba(var(--htq-a-rgb), 0.34);
	--htq-art-line: rgba(var(--htq-a-rgb), 0.85);
	--htq-art-ink: rgba(26, 23, 32, 0.42);
	--htq-art-water: rgba(var(--htq-a-rgb), 0.16);
	--htq-art-accent: var(--htq-a2);

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

	background: var(--htq-page);
	border-radius: calc(var(--htq-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;
}

.htq *,
.htq *::before,
.htq *::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. */

.htq :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. */
.htq :where(ul, ol, li) {
	list-style: none;
}

.htq :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;
}

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

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

.htq :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. */
.htq :where(svg) {
	width: 18px;
	height: 18px;
	flex: none;
}

.htq :where(.htq-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. */
.htq :where(h2, h3, h4, h5) {
	font-family: var(--htq-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.012em;
	text-transform: none;
}

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

.htq-art__bg { fill: var(--htq-art-bg); }
.htq-art__soft { fill: var(--htq-art-soft); }
.htq-art__soft--deep { fill: var(--htq-art-deep); }
.htq-art__bg-cut { fill: var(--htq-art-bg); }
.htq-art__accent-fill { fill: var(--htq-art-accent); opacity: 0.55; }
.htq-art__flake { fill: var(--htq-art-ink); opacity: 0.55; }
.htq-art__shine { fill: none; stroke: var(--htq-art-accent); stroke-width: 3; stroke-linecap: round; }
.htq-art__dot { fill: var(--htq-art-ink); }

.htq-art__hair {
	fill: none;
	stroke: var(--htq-art-line);
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.htq-art__hair--soft { opacity: 0.45; stroke-width: 3; }
.htq-art__hair--flat { stroke-width: 3.4; opacity: 0.7; }
.htq-art__hair--onwater { stroke-width: 3; }
.htq-art__hair--hair1 { stroke-width: 1.6; }
.htq-art__hair--hair2 { stroke-width: 3.4; }
.htq-art__hair--hair3 { stroke-width: 6; }

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

.htq-art__ink--thin { stroke-width: 2; opacity: 0.7; }

.htq-art__ring {
	fill: none;
	stroke: var(--htq-art-ink);
	stroke-width: 2;
	opacity: 0.5;
	stroke-dasharray: 4 5;
}

.htq-art__ring--thick {
	stroke-width: 3;
	stroke-dasharray: none;
	opacity: 0.4;
}

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

.htq-art__heat {
	fill: none;
	stroke: var(--htq-art-accent);
	stroke-width: 3.4;
	stroke-linecap: round;
}

.htq-art__water { fill: var(--htq-art-water); }
.htq-art__water-drop { fill: var(--htq-art-water); stroke: var(--htq-art-line); stroke-width: 2; }

/* -------------------------------------------------------------------------
   Background aura
   ------------------------------------------------------------------------- */

.htq-aura {
	position: absolute;
	inset: 0 0 auto;
	height: 460px;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(44% 48% at 14% 8%, rgba(var(--htq-a-rgb), 0.22), transparent 70%),
		radial-gradient(40% 46% at 86% 0%, rgba(var(--htq-a2-rgb), 0.20), transparent 72%),
		radial-gradient(32% 40% at 50% 40%, rgba(var(--htq-a-rgb), 0.08), transparent 76%);
	filter: blur(10px);
	opacity: 0.95;
}

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

.htq-hero {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 10px 12px 26px;
}

.htq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.012em;
	color: var(--htq-muted);
	background: var(--htq-surface);
	border: 1px solid var(--htq-line);
	border-radius: 999px;
	padding: 6px 14px 6px 12px;
	box-shadow: var(--htq-shadow);
}

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

.htq-hero__title {
	margin-top: 16px;
	font-size: clamp(1.9em, 5.2vw, 3.1em);
	line-height: 1.06;
	letter-spacing: -0.028em;
}

.htq-hero__sub {
	margin-top: 14px;
	margin-inline: auto;
	max-width: 62ch;
	font-size: 1.02em;
	color: var(--htq-muted);
}

/* -------------------------------------------------------------------------
   Cards and buttons
   ------------------------------------------------------------------------- */

.htq-app {
	position: relative;
	z-index: 1;
}

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

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

.htq .htq-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.htq .htq-btn:hover {
	transform: translateY(-1px);
}

.htq .htq-btn:focus-visible {
	outline: 3px solid rgba(var(--htq-a-rgb), 0.45);
	outline-offset: 2px;
}

.htq .htq-btn--primary {
	color: #fff;
	background: var(--htq-grad);
	box-shadow: 0 10px 24px -10px rgba(var(--htq-a-rgb), 0.75);
}

.htq .htq-btn--primary:hover {
	box-shadow: 0 16px 32px -12px rgba(var(--htq-a-rgb), 0.85);
}

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

.htq .htq-btn--ghost:hover {
	color: var(--htq-text);
	border-color: rgba(var(--htq-a-rgb), 0.45);
}

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

.htq .htq-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

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

.htq-start {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(20px, 4vw, 44px);
	align-items: center;
}

.htq-start__art {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

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

.htq-start__tile:nth-child(2) { transform: translateY(-10px); }
.htq-start__tile:nth-child(3) { transform: translateY(10px); }

/* A grid item defaults to min-width:auto, which lets a long unbroken word push
   the column wider than its track. Every text column in here gets min-width:0. */
.htq-start__body {
	min-width: 0;
}

.htq-start__title {
	font-size: clamp(1.3em, 2.6vw, 1.65em);
}

.htq-start__lede {
	margin-top: 12px;
	color: var(--htq-muted);
}

.htq-start__list {
	margin-top: 18px;
	display: grid;
	gap: 9px;
}

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

.htq-start__list svg {
	width: 17px;
	height: 17px;
	margin-top: 3px;
	color: var(--htq-a);
	flex: none;
}

.htq-start .htq-btn {
	margin-top: 24px;
}

.htq-start__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 16px;
	font-size: 0.85em;
	color: var(--htq-muted);
}

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

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

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

.htq-prog {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.htq-prog__track {
	position: relative;
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--htq-surface-3);
	overflow: hidden;
}

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

.htq-prog__meta {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--htq-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

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

/* -------------------------------------------------------------------------
   Question card
   ------------------------------------------------------------------------- */

.htq-q__title {
	font-size: clamp(1.25em, 3.1vw, 1.72em);
	max-width: 26ch;
}

.htq-q__help {
	margin-top: 12px;
	max-width: 62ch;
	font-size: 0.93em;
	color: var(--htq-muted);
}

.htq-q__hint {
	margin-top: 14px;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--htq-muted);
}

/* Options grid ------------------------------------------------------------ */

.htq-opts {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.htq-opts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.htq-opts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.htq-opts--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.htq .htq-opt {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	padding: 12px 12px 16px;
	border-radius: calc(var(--htq-r) * 0.8);
	border: 1.5px solid var(--htq-line);
	background: var(--htq-surface);
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.htq .htq-opt:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--htq-a-rgb), 0.5);
	box-shadow: 0 18px 34px -20px rgba(var(--htq-a-rgb), 0.6);
}

.htq .htq-opt:focus-visible {
	outline: 3px solid rgba(var(--htq-a-rgb), 0.45);
	outline-offset: 2px;
}

.htq .htq-opt.is-on {
	border-color: var(--htq-a);
	background: rgba(var(--htq-a-rgb), 0.06);
	box-shadow: 0 0 0 3px rgba(var(--htq-a-rgb), 0.14), 0 18px 34px -22px rgba(var(--htq-a-rgb), 0.7);
}

.htq-opt__art {
	display: block;
	border-radius: calc(var(--htq-r) * 0.6);
	overflow: hidden;
	background: var(--htq-surface-2);
}

.htq-opt__text {
	display: block;
	min-width: 0;
}

.htq-opt__label {
	display: block;
	font-weight: 650;
	font-size: 0.96em;
	line-height: 1.32;
}

.htq-opt__desc {
	display: block;
	margin-top: 4px;
	font-size: 0.82em;
	line-height: 1.42;
	color: var(--htq-muted);
}

.htq-opt__tick {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--htq-grad);
	color: #fff;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 4px 12px -4px rgba(var(--htq-a-rgb), 0.9);
}

.htq-opt__tick svg {
	width: 13px;
	height: 13px;
}

.htq .htq-opt.is-on .htq-opt__tick {
	opacity: 1;
	transform: scale(1);
}

/* The compact layout used for the concerns card. */

.htq-opts--compact .htq-opt {
	align-items: center;
	text-align: center;
	padding: 12px 8px 14px;
	gap: 8px;
}

.htq-opts--compact .htq-opt__art {
	width: 62px;
}

.htq-opts--compact .htq-opt__label {
	font-size: 0.85em;
}

/* Navigation row ---------------------------------------------------------- */

.htq-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--htq-line-2);
}

.htq-nav__right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* Resume prompt ----------------------------------------------------------- */

.htq-resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 14px 18px;
	border-radius: calc(var(--htq-r) * 0.7);
	background: rgba(var(--htq-a-rgb), 0.07);
	border: 1px solid rgba(var(--htq-a-rgb), 0.2);
	font-size: 0.92em;
}

.htq-resume__text {
	flex: 1;
	min-width: 200px;
	font-weight: 600;
}

/* Working screen ---------------------------------------------------------- */

.htq-working {
	display: grid;
	place-items: center;
	gap: 18px;
	text-align: center;
	padding: clamp(40px, 10vw, 90px) 20px;
}

.htq-working__ring {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 3px solid var(--htq-surface-3);
	border-top-color: var(--htq-a);
	animation: htq-spin 0.9s linear infinite;
}

.htq-working__text {
	font-weight: 600;
	color: var(--htq-muted);
}

@keyframes htq-spin {
	to { transform: rotate(360deg); }
}

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

.htq-result {
	display: grid;
	gap: 16px;
}

.htq-res-hero {
	position: relative;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: clamp(18px, 3.4vw, 34px);
	align-items: center;
	overflow: hidden;
}

.htq-res-hero::after {
	content: "";
	position: absolute;
	inset: auto -40% -70% auto;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--htq-a2-rgb), 0.16), transparent 68%);
	pointer-events: none;
}

.htq-res-hero__art {
	border-radius: calc(var(--htq-r) * 0.75);
	overflow: hidden;
	background: var(--htq-surface-2);
	border: 1px solid var(--htq-line-2);
}

.htq-res-hero__body {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.htq-kicker {
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--htq-muted);
}

.htq-code {
	display: block;
	margin-top: 4px;
	font-family: var(--htq-display);
	font-size: clamp(2.6em, 8vw, 4.2em);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.04em;
	background: var(--htq-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.htq-res-hero__name {
	margin-top: 8px;
	font-size: clamp(1.15em, 2.6vw, 1.5em);
}

.htq-res-hero__tag {
	margin-top: 8px;
	color: var(--htq-muted);
	max-width: 46ch;
}

.htq-conf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 0.8em;
	font-weight: 600;
	padding: 5px 13px 5px 9px;
	border-radius: 999px;
	background: var(--htq-surface-2);
	border: 1px solid var(--htq-line);
}

.htq-conf__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--htq-ok);
	flex: none;
}

.htq-conf--medium .htq-conf__dot { background: var(--htq-a); }
.htq-conf--low .htq-conf__dot { background: var(--htq-warn); }

/* Block heading used across the result cards ------------------------------- */

.htq-block__title {
	font-size: 1.15em;
	display: flex;
	align-items: center;
	gap: 10px;
}

.htq-block__title svg {
	width: 19px;
	height: 19px;
	color: var(--htq-a);
}

.htq-block__lede {
	margin-top: 10px;
	color: var(--htq-muted);
	font-size: 0.95em;
}

/* Meters ------------------------------------------------------------------ */

.htq-meters {
	display: grid;
	gap: 14px;
	margin-top: 20px;
}

.htq-meter {
	padding: 16px 18px;
	border-radius: calc(var(--htq-r) * 0.7);
	background: var(--htq-surface-2);
	border: 1px solid var(--htq-line-2);
}

.htq-meter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.htq-meter__axis {
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--htq-muted);
}

.htq-meter__value {
	font-family: var(--htq-display);
	font-size: 1.16em;
	font-weight: 600;
}

.htq-meter__bar {
	position: relative;
	height: 8px;
	margin-top: 12px;
	border-radius: 999px;
	background: var(--htq-surface-3);
}

.htq-meter__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 999px;
	background: var(--htq-grad);
	transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.htq-meter__knob {
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--htq-surface);
	border: 3px solid var(--htq-a);
	transform: translateY(-50%);
	transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 3px 10px -3px rgba(var(--htq-a-rgb), 0.8);
}

.htq-meter__short {
	margin-top: 12px;
	font-size: 0.92em;
	font-weight: 600;
}

.htq-meter__body {
	margin-top: 6px;
	font-size: 0.9em;
	color: var(--htq-muted);
}

/* Wash frequency strip ---------------------------------------------------- */

.htq-wash {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	padding: 16px 20px;
	border-radius: calc(var(--htq-r) * 0.7);
	background: var(--htq-grad);
	color: #fff;
}

.htq-wash svg {
	width: 22px;
	height: 22px;
}

.htq-wash__label {
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.86;
}

.htq-wash__value {
	font-family: var(--htq-display);
	font-size: 1.2em;
	font-weight: 600;
}

/* Routine ----------------------------------------------------------------- */

.htq-plan {
	margin-top: 20px;
}

.htq-plan__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 5px;
	border-radius: 999px;
	background: var(--htq-surface-2);
	border: 1px solid var(--htq-line-2);
}

.htq .htq-plan__tab {
	flex: 1;
	min-width: 110px;
	text-align: center;
	font-size: 0.88em;
	font-weight: 600;
	padding: 9px 12px;
	border-radius: 999px;
	color: var(--htq-muted);
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.htq .htq-plan__tab.is-on {
	background: var(--htq-surface);
	color: var(--htq-text);
	box-shadow: var(--htq-shadow);
}

.htq .htq-plan__tab:focus-visible {
	outline: 3px solid rgba(var(--htq-a-rgb), 0.45);
	outline-offset: 2px;
}

.htq-plan__panel {
	margin-top: 18px;
	display: grid;
	gap: 12px;
}

.htq-plan__panel[hidden] {
	display: none;
}

/* Only earns its place on paper, where the tabs are gone. */
.htq-plan__head {
	display: none;
}

.htq-plan__line {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: calc(var(--htq-r) * 0.6);
	background: var(--htq-surface-2);
	border: 1px solid var(--htq-line-2);
	font-size: 0.95em;
}

.htq-plan__n {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.72em;
	font-weight: 700;
	color: var(--htq-a);
	background: rgba(var(--htq-a-rgb), 0.12);
}

/* Ingredients ------------------------------------------------------------- */

.htq-ing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 20px;
}

.htq-ing__col {
	padding: 18px;
	border-radius: calc(var(--htq-r) * 0.7);
	border: 1px solid var(--htq-line-2);
	background: var(--htq-surface-2);
}

.htq-ing__col--yes { border-color: rgba(31, 157, 97, 0.28); }
.htq-ing__col--no { border-color: rgba(201, 121, 27, 0.28); }

.htq-ing__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--htq-muted);
}

.htq-ing__col--yes .htq-ing__title { color: var(--htq-ok); }
.htq-ing__col--no .htq-ing__title { color: var(--htq-warn); }

.htq-ing__title svg { width: 15px; height: 15px; }

.htq-ing__list {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}

.htq-ing__list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.91em;
	line-height: 1.45;
}

.htq-ing__list li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
}

/* Goals ------------------------------------------------------------------- */

.htq-goals {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

.htq-goal {
	padding: 16px 18px;
	border-radius: calc(var(--htq-r) * 0.7);
	background: var(--htq-surface-2);
	border: 1px solid var(--htq-line-2);
}

.htq-goal__label {
	display: inline-flex;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--htq-a);
	background: rgba(var(--htq-a-rgb), 0.1);
	border-radius: 999px;
	padding: 4px 11px;
}

.htq-goal__text {
	margin-top: 10px;
	font-size: 0.94em;
}

/* Products ---------------------------------------------------------------- */

.htq-products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin-top: 20px;
}

.htq-prod {
	display: flex;
	flex-direction: column;
	border-radius: calc(var(--htq-r) * 0.7);
	border: 1px solid var(--htq-line);
	background: var(--htq-surface);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.htq-prod:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--htq-a-rgb), 0.45);
	box-shadow: 0 20px 36px -22px rgba(var(--htq-a-rgb), 0.65);
}

.htq-prod__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--htq-surface-2);
}

.htq-prod__body {
	padding: 15px 16px 17px;
}

.htq-prod__name {
	font-weight: 650;
	font-size: 0.98em;
}

.htq-prod__desc {
	margin-top: 6px;
	font-size: 0.86em;
	color: var(--htq-muted);
}

.htq-prod__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 0.86em;
	font-weight: 650;
	color: var(--htq-a);
}

.htq-prod__cta svg { width: 15px; height: 15px; }

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

.htq-lead {
	background: var(--htq-surface-2);
	border: 1px dashed rgba(var(--htq-a-rgb), 0.4);
}

.htq-lead__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.htq .htq-input {
	flex: 1;
	min-width: 220px;
	padding: 13px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--htq-line);
	background: var(--htq-surface);
	font-size: 0.96em;
}

.htq .htq-input:focus-visible {
	outline: none;
	border-color: var(--htq-a);
	box-shadow: 0 0 0 3px rgba(var(--htq-a-rgb), 0.16);
}

.htq-lead__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	font-size: 0.87em;
	color: var(--htq-muted);
	cursor: pointer;
}

.htq-lead__consent input {
	margin-top: 3px;
	width: 17px;
	height: 17px;
	accent-color: var(--htq-a);
	flex: none;
}

.htq-err {
	margin-top: 10px;
	font-size: 0.88em;
	font-weight: 600;
	color: #c02f3c;
	min-height: 0;
}

.htq-err:empty {
	margin-top: 0;
}

.htq-ok-msg {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--htq-ok);
}

.htq-lead__skip {
	margin-top: 14px;
	font-size: 0.87em;
	font-weight: 600;
	color: var(--htq-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.htq-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.htq-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border-radius: calc(var(--htq-r) * 0.7);
	background: var(--htq-surface-2);
	border: 1px solid var(--htq-line-2);
	font-size: 0.9em;
	color: var(--htq-muted);
}

.htq-note svg {
	width: 19px;
	height: 19px;
	margin-top: 2px;
	color: var(--htq-a);
}

.htq-note strong {
	color: var(--htq-text);
}

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

.htq-section {
	position: relative;
	z-index: 1;
	margin-top: clamp(40px, 7vw, 76px);
}

.htq-section__title {
	font-size: clamp(1.45em, 3.4vw, 2.05em);
	max-width: 24ch;
}

.htq-section__lede {
	margin-top: 14px;
	max-width: 68ch;
	color: var(--htq-muted);
}

/* Steps */

.htq-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
	counter-reset: htq-step;
}

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

.htq-step__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	font-size: 0.86em;
	font-weight: 700;
	color: #fff;
	background: var(--htq-grad);
}

.htq-step__title {
	margin-top: 14px;
	font-size: 1.05em;
}

.htq-step__text {
	margin-top: 8px;
	font-size: 0.93em;
	color: var(--htq-muted);
}

/* Axes */

.htq-axes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
}

.htq-axis {
	padding: 24px;
	border-radius: var(--htq-r);
	background: var(--htq-surface);
	border: 1px solid var(--htq-line);
	box-shadow: var(--htq-shadow);
}

.htq-axis__title {
	font-size: 1.12em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--htq-line-2);
}

.htq-axis__text {
	margin-top: 12px;
	font-size: 0.94em;
	color: var(--htq-muted);
}

/* Chart */

.htq-chart-group {
	margin-top: 28px;
}

.htq-chart-group__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.1em;
}

.htq-chart-group__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	font-size: 0.84em;
	font-weight: 700;
	color: #fff;
	background: var(--htq-grad);
	font-family: system-ui, sans-serif;
}

.htq-chart {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.htq-tcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: var(--htq-r);
	background: var(--htq-surface);
	border: 1px solid var(--htq-line);
	box-shadow: var(--htq-shadow);
}

.htq-tcard__art {
	flex: none;
	width: 74px;
	border-radius: calc(var(--htq-r) * 0.55);
	overflow: hidden;
	background: var(--htq-surface-2);
}

.htq-tcard__body {
	min-width: 0;
}

.htq-tcard__code {
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.09em;
	color: var(--htq-a);
}

.htq-tcard__name {
	margin-top: 3px;
	font-size: 1em;
}

.htq-tcard__text {
	margin-top: 5px;
	font-size: 0.85em;
	line-height: 1.45;
	color: var(--htq-muted);
}

/* Myths */

.htq-myths {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
}

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

.htq-myth__claim {
	font-family: var(--htq-display);
	font-size: 1.08em;
	font-weight: 600;
	line-height: 1.32;
}

.htq-myth__tag {
	display: inline-block;
	margin-right: 8px;
	font-family: system-ui, sans-serif;
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--htq-a2);
	vertical-align: 0.22em;
}

.htq-myth__real {
	margin-top: 12px;
	font-size: 0.93em;
	color: var(--htq-muted);
}

/* FAQ */

.htq-faq__list {
	display: grid;
	gap: 10px;
	margin-top: 24px;
}

.htq-qa {
	border-radius: calc(var(--htq-r) * 0.8);
	background: var(--htq-surface);
	border: 1px solid var(--htq-line);
	box-shadow: var(--htq-shadow);
	overflow: hidden;
}

.htq-qa__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
}

.htq-qa__q::-webkit-details-marker {
	display: none;
}

.htq-qa__q h3 {
	font-size: 1.02em;
	font-weight: 600;
}

.htq-qa__icon {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(var(--htq-a-rgb), 0.12);
}

.htq-qa__icon::before,
.htq-qa__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 2px;
	border-radius: 2px;
	background: var(--htq-a);
	transform: translate(-50%, -50%);
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.htq-qa__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.htq-qa[open] .htq-qa__icon::after {
	transform: translate(-50%, -50%) rotate(0);
	opacity: 0;
}

.htq-qa__a {
	padding: 0 22px 20px;
	font-size: 0.94em;
	color: var(--htq-muted);
	max-width: 76ch;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.htq-start {
		grid-template-columns: 1fr;
	}

	.htq-start__art {
		grid-template-columns: repeat(4, 1fr);
		max-width: 380px;
	}

	.htq-start__tile:nth-child(2),
	.htq-start__tile:nth-child(3) {
		transform: none;
	}

	.htq-steps,
	.htq-axes,
	.htq-myths,
	.htq-chart {
		grid-template-columns: 1fr;
	}

	/* Four illustrated cards across a tablet leaves each one about 150px wide,
	   which is too narrow for the label and the description underneath. Two
	   across reads properly, and the 600px rule below turns them into rows. */
	.htq-opts--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.htq-opts--compact {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.htq-res-hero {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.htq-res-hero__art {
		width: 128px;
	}

	.htq-res-hero__tag {
		margin-inline: auto;
	}

	.htq-ing {
		grid-template-columns: 1fr;
	}
}

/* Below this width every picture grid becomes a list of rows. Four illustrated
   squares side by side on a 360px screen are too small to read, and two rows of
   two forces a scroll on every question. A row with the picture on the left and
   the label beside it stays legible and stays thumb sized. */
@media (max-width: 600px) {
	.htq-opts--four,
	.htq-opts--three {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.htq-opts--four .htq-opt,
	.htq-opts--three .htq-opt {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 12px 44px 12px 12px;
	}

	.htq-opts--four .htq-opt__art,
	.htq-opts--three .htq-opt__art {
		flex: none;
		width: 74px;
	}

	.htq-opt__tick {
		top: 50%;
		right: 12px;
		margin-top: -12px;
	}

	.htq-opts--compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.htq-opts--compact .htq-opt__art {
		width: 52px;
	}

	.htq-prog {
		flex-wrap: wrap;
		gap: 10px;
	}

	.htq-prog__track {
		order: 3;
		flex-basis: 100%;
	}

	.htq-plan__tab {
		min-width: calc(50% - 4px);
		flex: none;
	}

	.htq-acts .htq-btn {
		flex: 1 1 100%;
	}

	.htq-nav {
		flex-wrap: wrap;
	}
}

/* Only the smallest phones drop to two across. At 360px and up, three tiles
   still clear 85px each, and three columns saves a whole row of scrolling on a
   ten option card. */
@media (max-width: 340px) {
	.htq-opts--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.htq--dark {
	--htq-page: #0d0b12;
	--htq-surface: #16131d;
	--htq-surface-2: #1e1a29;
	--htq-surface-3: #282234;
	--htq-text: #f3f0f7;
	--htq-muted: #a49dba;
	--htq-line: rgba(255, 255, 255, 0.11);
	--htq-line-2: rgba(255, 255, 255, 0.06);
	--htq-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
	--htq-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 34px 70px -28px rgba(0, 0, 0, 0.85);
	--htq-ok: #48d68d;
	--htq-warn: #f0b357;

	--htq-art-bg: rgba(var(--htq-a-rgb), 0.14);
	--htq-art-soft: rgba(var(--htq-a-rgb), 0.30);
	--htq-art-deep: rgba(var(--htq-a-rgb), 0.5);
	--htq-art-line: rgba(255, 255, 255, 0.82);
	--htq-art-ink: rgba(255, 255, 255, 0.42);
	--htq-art-water: rgba(var(--htq-a-rgb), 0.24);
}

@media (prefers-color-scheme: dark) {
	.htq--auto {
		--htq-page: #0d0b12;
		--htq-surface: #16131d;
		--htq-surface-2: #1e1a29;
		--htq-surface-3: #282234;
		--htq-text: #f3f0f7;
		--htq-muted: #a49dba;
		--htq-line: rgba(255, 255, 255, 0.11);
		--htq-line-2: rgba(255, 255, 255, 0.06);
		--htq-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
		--htq-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 34px 70px -28px rgba(0, 0, 0, 0.85);
		--htq-ok: #48d68d;
		--htq-warn: #f0b357;

		--htq-art-bg: rgba(var(--htq-a-rgb), 0.14);
		--htq-art-soft: rgba(var(--htq-a-rgb), 0.30);
		--htq-art-deep: rgba(var(--htq-a-rgb), 0.5);
		--htq-art-line: rgba(255, 255, 255, 0.82);
		--htq-art-ink: rgba(255, 255, 255, 0.42);
		--htq-art-water: rgba(var(--htq-a-rgb), 0.24);
	}
}

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

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

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

@media (prefers-reduced-motion: reduce) {
	.htq *,
	.htq *::before,
	.htq *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.htq .htq-opt:hover,
	.htq .htq-btn:hover,
	.htq-prod:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Print

   Printing a WordPress page normally gives you the site header, the nav, a
   sidebar, the footer and whatever cookie banner is floating about, with the
   thing you actually wanted somewhere in the middle. These rules isolate the
   tool: anything that is neither an ancestor of the quiz nor part of it is
   dropped, and the ancestors are flattened so no theme wrapper can constrain,
   offset or crop the page.

   Three other things matter on paper and none of them are obvious on screen.
   Browsers do not print background images by default, so every piece of white
   text sitting on a gradient would come out white on white and simply vanish,
   including the hair type code itself. Each of those gets an ink safe
   treatment below rather than a print-color-adjust hint the visitor can turn
   off. A visitor whose device is in dark mode would otherwise print pale grey
   onto white, so the light palette is forced. And the routine tabs mean
   nothing on paper, so every panel opens and each grows a heading that is
   hidden on screen.
   ------------------------------------------------------------------------- */

@media print {
	@page {
		margin: 14mm;
	}

	/* Everything that is not on the path to the quiz, and not part of it. */
	body :not(:has(.htq)):not(.htq):not(.htq *) {
		display: none !important;
	}

	/* Flatten the theme wrappers the quiz happens to be sitting inside. */
	:has(.htq) {
		display: block !important;
		position: static !important;
		overflow: visible !important;
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		transform: none !important;
		columns: auto !important;
	}

	/* Force the light palette, whatever the device was set to. */
	.htq,
	.htq--dark,
	.htq--auto {
		--htq-page: transparent;
		--htq-surface: #fff;
		--htq-surface-2: #fff;
		--htq-surface-3: #eee;
		--htq-text: #000;
		--htq-muted: #333;
		--htq-line: #bbb;
		--htq-line-2: #ddd;
		--htq-shadow: none;
		--htq-shadow-lg: none;
		--htq-ok: #000;
		--htq-warn: #000;
		--htq-art-bg: #f5f5f5;
		--htq-art-soft: #d6d6d6;
		--htq-art-deep: #b4b4b4;
		--htq-art-line: #333;
		--htq-art-ink: #666;
		--htq-art-water: #ededed;
	}

	.htq {
		max-width: none;
		margin: 0;
		padding: 0;
		font-size: 11pt;
	}

	/* Screen furniture that earns nothing on paper. */
	.htq-aura,
	.htq-acts,
	.htq-lead,
	.htq-section,
	.htq-prog,
	.htq-resume,
	.htq-noscript,
	.htq-eyebrow,
	.htq-hero__sub,
	.htq-start__note,
	.htq-plan__tabs,
	.htq-meter__bar,
	.htq-opt__tick,
	.htq .htq-btn {
		display: none !important;
	}

	.htq-hero {
		padding: 0 0 12px;
		text-align: left;
	}

	.htq-hero__title {
		font-size: 15pt;
	}

	.htq-card {
		box-shadow: none;
		border: 1px solid #ccc;
		padding: 14px 16px;
		break-inside: avoid;
	}

	.htq-meter,
	.htq-plan__line,
	.htq-goal,
	.htq-ing__col,
	.htq-note,
	.htq-prod {
		break-inside: avoid;
	}

	/* The hair type code is gradient filled text on screen. Without the
	   background it clips to nothing, so the single most important thing on
	   the page prints blank. Paint it with ink instead. */
	.htq-code {
		background: none !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		color: #000 !important;
		-webkit-text-fill-color: #000 !important;
		font-size: 30pt;
	}

	/* White on a gradient becomes white on white. */
	.htq-wash {
		background: none !important;
		color: #000 !important;
		border: 1px solid #999;
		padding: 10px 14px;
	}

	.htq-plan__n {
		background: none !important;
		color: #000 !important;
		border: 1px solid #999;
	}

	.htq-goal__label,
	.htq-kicker,
	.htq-meter__axis,
	.htq-ing__title {
		background: none !important;
		color: #000 !important;
	}

	.htq-conf {
		border: 1px solid #999;
	}

	.htq-conf__dot {
		display: none;
	}

	/* Every routine bucket prints, each with the heading the tabs carried. */
	.htq-plan__panel[hidden] {
		display: grid !important;
	}

	.htq-plan__panel {
		margin-top: 10px;
		break-inside: avoid;
	}

	.htq-plan__head {
		display: block;
		margin-bottom: 6px;
		font-family: var(--htq-display);
		font-size: 1.05em;
		font-weight: 600;
	}

	.htq-result {
		gap: 10px;
	}

	/* A printed link to a shop is only useful if you can read the address. */
	.htq-prod::after {
		content: " (" attr(href) ")";
		display: block;
		padding: 0 16px 12px;
		font-size: 0.75em;
		word-break: break-all;
		color: #555;
	}

	.htq-prod__img {
		display: none;
	}
}