/**
 * Synergy Term Hub — Quiz Frontend Styles
 * Design system: minimalist black/white, no shadows, no gradients, no emoji.
 * Spec reference: new design/QUIZ-ACNEE-UX-UI-MOBILE-FIRST.md
 * Mobile-first. Breakpoints: 768px, 1024px.
 *
 * @since 2.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. TOKENS — scoped to #sth-quiz, isolated from WoodMart
   ═══════════════════════════════════════════════════════════════════════════════ */
#sth-quiz {
	--stq-ink: #111111;
	--stq-ink-soft: #4b4b4b;
	--stq-muted: #737373;
	--stq-line: #d9d9d6;
	--stq-line-strong: #181818;
	--stq-paper: #ffffff;
	--stq-paper-alt: #f6f6f3;
	--stq-success: #1f6b4c;
	--stq-warning-bg: #fff7e6;
	--stq-warning-ink: #5f4600;
	--stq-error: #b42318;

	--stq-space-1: 4px;
	--stq-space-2: 8px;
	--stq-space-3: 12px;
	--stq-space-4: 16px;
	--stq-space-5: 24px;
	--stq-space-6: 32px;
	--stq-space-7: 48px;
	--stq-space-8: 64px;

	--stq-radius: 0px;
	--stq-focus: 0 0 0 3px rgba(17, 17, 17, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. BASE — reset within quiz container
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-quiz-wrap {
	margin: 0 auto 32px;
	max-width: 100%;
}

#sth-quiz {
	font-family: var(--wd-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	background: var(--stq-paper);
	color: var(--stq-ink);
	position: relative;
	border: 1px solid var(--stq-line);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

#sth-quiz *,
#sth-quiz *::before,
#sth-quiz *::after {
	box-sizing: border-box;
}

#sth-quiz button {
	font-family: inherit;
	text-transform: none;
	cursor: pointer;
}

#sth-quiz img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════════ */
#sth-quiz h1,
#sth-quiz h2,
#sth-quiz h3,
#sth-quiz h4 {
	margin: 0;
	font-weight: 600;
	color: var(--stq-ink);
}

/* Remove focus outline on programmatically-focused headings (a11y focus is kept for screen readers) */
#sth-quiz [tabindex="-1"]:focus {
	outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. SCREENS — step container animation
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-screen {
	display: none;
	flex-direction: column;
}

.sth-screen.active {
	display: flex;
	animation: stqFadeIn 0.2s ease;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   5. TOP BAR — sticky header with back + counter + progress
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-topbar {
	position: sticky;
	top: 0;
	z-index: 5;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--stq-line);
}

.sth-topbar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 clamp(16px, 4vw, 32px);
	gap: 12px;
}

.sth-topbar .sth-logo {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--stq-ink);
}

.sth-topbar .sth-back {
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--stq-ink);
	padding: 8px 4px 8px 0;
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	text-transform: none;
}

.sth-topbar .sth-back:focus-visible {
	box-shadow: var(--stq-focus);
}

.sth-topbar .sth-counter {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--stq-muted);
	margin-left: auto;
}

/* Progress bar */
.sth-progress {
	height: 2px;
	background: var(--stq-line);
}

.sth-progress i {
	display: block;
	height: 100%;
	background: var(--stq-ink);
	transition: width 0.18s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. CONTENT AREA
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-content {
	width: min(100%, 760px);
	margin: 0 auto;
	padding: clamp(32px, 6vw, 64px) clamp(20px, 5.5vw, 32px) 48px;
	display: flex;
	flex-direction: column;
}

/* Eyebrow — hidden per design decision */
.sth-category {
	display: none;
}

/* Question title */
.sth-question {
	font-size: clamp(24px, 6vw, 38px);
	font-weight: 650;
	line-height: 1.08;
	letter-spacing: -0.035em;
	margin-bottom: var(--stq-space-5);
	color: var(--stq-ink);
	text-wrap: balance;
}

/* Sub-text */
.sth-question-sub {
	font-size: 16px;
	color: var(--stq-muted);
	margin-top: var(--stq-space-3);
	margin-bottom: var(--stq-space-6);
	line-height: 1.5;
	max-width: 590px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. OPTIONS — text list (single & multi choice)
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-opts {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--stq-line-strong);
}

.sth-opt {
	width: 100%;
	min-height: 56px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 2px;
	border: none;
	border-bottom: 1px solid var(--stq-line);
	background: var(--stq-paper);
	color: var(--stq-ink);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}

.sth-opt:hover,
.sth-opt:focus-visible {
	background: var(--stq-paper-alt);
	outline: none;
}

.sth-opt:focus-visible {
	box-shadow: var(--stq-focus);
}

/* Selected state */
.sth-opt.sel {
	border-bottom-color: var(--stq-ink);
	font-weight: 700;
}

/* Radio/check indicator (rendered in JS as .sth-opt-mark) */
.sth-opt .sth-opt-mark {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1.5px solid var(--stq-muted);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: border-color 0.12s, background 0.12s;
}

.sth-opt[data-multi] .sth-opt-mark {
	border-radius: 2px;
}

.sth-opt.sel .sth-opt-mark {
	border-color: var(--stq-ink);
	background: var(--stq-ink);
}

.sth-opt.sel .sth-opt-mark::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--stq-paper);
}

.sth-opt[data-multi].sel .sth-opt-mark::after {
	content: '\2713';
	color: var(--stq-paper);
	font-size: 12px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. OPTIONS — image choice grid
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.sth-gc {
	border: 1px solid var(--stq-line);
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s;
	background: var(--stq-paper);
}

.sth-gc:hover,
.sth-gc:focus-visible {
	border: 2px solid var(--stq-ink);
	outline: none;
}

.sth-gc.sel {
	border: 2px solid var(--stq-ink);
}

.sth-gc .sth-gc-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	background: var(--stq-ink);
	color: var(--stq-paper);
	font-size: 10px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
}

.sth-gc.sel .sth-gc-check {
	display: flex;
}

.sth-gc .sth-gc-thumb {
	width: 100%;
	aspect-ratio: 1 / 0.82;
	background: var(--stq-paper-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sth-gc .sth-gc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sth-gc figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--stq-ink);
}

/* "Selectat" label on selected image choice */
.sth-gc.sel figcaption::after {
	content: attr(data-sel-label);
	color: var(--stq-paper);
	background: var(--stq-ink);
	padding: 2px 6px;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. CTA BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 22px;
	border: 1px solid var(--stq-ink);
	background: var(--stq-ink);
	color: var(--stq-paper);
	font-size: 16px;
	font-weight: 650;
	font-family: inherit;
	text-transform: none;
	cursor: pointer;
	margin-top: var(--stq-space-5);
	transition: background 0.15s;
}

.sth-cta:hover {
	background: #333 !important;
	color: #fff !important;
	opacity: 1 !important;
}

.sth-cta:focus-visible {
	box-shadow: var(--stq-focus);
}

.sth-cta.primary {
	background: #111 !important;
	color: #fff !important;
	transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.sth-cta.primary:hover {
	background: #333 !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sth-cta.outline {
	background: var(--stq-paper);
	color: var(--stq-ink);
	border: 1px solid var(--stq-ink);
	padding: 0 22px;
	min-height: 50px;
}

.sth-cta.outline:hover {
	background: var(--stq-paper-alt) !important;
	color: var(--stq-ink) !important;
	opacity: 1 !important;
}

.sth-cta:disabled {
	background: #b6b6b3;
	border-color: #b6b6b3;
	color: var(--stq-paper);
	cursor: not-allowed;
}

/* Consultation CTA — compact, centered */
.sth-cta-consult {
	display: block;
	width: fit-content;
	margin: var(--stq-space-4) auto 0;
	padding: 10px 24px;
	border: 1px solid var(--stq-ink);
	background: transparent;
	color: var(--stq-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	text-transform: none;
	border-radius: 24px;
	transition: background 0.15s, color 0.15s;
}
.sth-cta-consult:hover {
	background: var(--stq-ink);
	color: var(--stq-paper);
}

/* Skip link */
.sth-skip {
	display: inline-block;
	margin-top: var(--stq-space-4);
	padding: 0;
	border: none;
	background: none;
	color: var(--stq-ink);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	text-align: center;
}

.sth-skip:hover {
	color: var(--stq-ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. HERO / INTRO SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-hero {
	padding: clamp(40px, 8vw, 72px) clamp(20px, 5.5vw, 32px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 400px;
}

.sth-hero .sth-badge {
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stq-muted);
	margin-bottom: var(--stq-space-4);
}

.sth-hero .sth-hero-icon {
	display: none; /* Removed per spec — no emoji/icon */
}

.sth-hero h2 {
	font-size: clamp(30px, 7vw, 48px);
	font-weight: 650;
	line-height: 1.02;
	letter-spacing: -0.04em;
	margin-bottom: var(--stq-space-4);
	color: var(--stq-ink);
	max-width: 680px;
	text-wrap: balance;
}

.sth-hero h2 em {
	font-style: normal;
}

.sth-hero p {
	font-size: 16px;
	color: var(--stq-muted);
	line-height: 1.55;
	max-width: 540px;
	margin-bottom: var(--stq-space-5);
}

.sth-hero .sth-meta {
	font-size: 13px;
	color: var(--stq-muted);
	margin-top: var(--stq-space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. EMAIL SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-email-screen {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	width: 100%;
}

.sth-email-screen .sth-email-icon {
	display: none; /* No decorative icons per spec */
}

.sth-email-screen h2 {
	font-size: clamp(24px, 5vw, 34px);
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: var(--stq-space-2);
	color: var(--stq-ink);
}

.sth-email-screen .sth-email-sub {
	font-size: 16px;
	color: var(--stq-muted);
	margin-bottom: var(--stq-space-5);
	line-height: 1.5;
}

#sth-quiz .sth-email-screen input[type="email"],
#sth-quiz input#sth-email-input {
	width: 100%;
	height: 54px;
	border: 1px solid var(--stq-ink);
	border-radius: 0;
	padding: 0 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--stq-ink);
	background: var(--stq-paper);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

#sth-quiz .sth-email-screen input[type="email"]:focus-visible,
#sth-quiz input#sth-email-input:focus-visible {
	box-shadow: var(--stq-focus);
	outline-offset: 1px;
}

/* Checkboxes (consent) */
.sth-checkboxes {
	width: 100%;
	margin: var(--stq-space-5) 0 var(--stq-space-4);
	border-top: 1px solid var(--stq-line);
	display: flex;
	flex-direction: column;
}

.sth-checkboxes label {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 8px;
	padding: 12px 0;
	border-bottom: 1px solid var(--stq-line);
	font-size: 14px;
	line-height: 1.4;
	color: var(--stq-ink-soft);
	cursor: pointer;
}

.sth-checkboxes label span,
.sth-checkboxes label > :last-child {
	display: inline;
}

.sth-checkboxes label a {
	color: var(--stq-ink) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	white-space: nowrap;
	display: inline !important;
}

.sth-checkboxes input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid var(--stq-muted);
	background: var(--stq-paper);
	cursor: pointer;
}

.sth-checkboxes input[type="checkbox"]:checked {
	border-color: var(--stq-ink);
	background: var(--stq-ink);
	box-shadow: inset 0 0 0 3px var(--stq-paper);
}

.sth-checkboxes input[type="checkbox"]:focus-visible {
	box-shadow: var(--stq-focus);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. SELFIE SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-selfie-upload {
	min-height: 180px;
	margin: var(--stq-space-5) 0 var(--stq-space-4);
	padding: 24px;
	display: grid;
	place-items: center;
	border: 1px dashed var(--stq-muted);
	background: var(--stq-paper-alt);
	text-align: center;
	font-size: 14px;
	color: var(--stq-muted);
}

.sth-selfie-upload.sth-selfie--loading {
	position: relative;
	overflow: hidden;
}

.sth-selfie-upload.sth-selfie--loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
	animation: stqShimmer 1.5s infinite;
}

@keyframes stqShimmer {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

.sth-selfie-upload.sth-selfie--success {
	border-color: var(--stq-success);
	color: var(--stq-success);
}

.sth-selfie-message {
	font-size: 13px;
	margin-top: var(--stq-space-2);
	text-align: center;
	min-height: 16px;
}

.sth-selfie-message--error {
	color: var(--stq-error);
}

.sth-selfie-message--success {
	color: var(--stq-success);
	font-weight: 600;
}

/* Selfie analyzing overlay */
.sth-analyzing {
	text-align: center;
	padding: 48px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 280px;
}

.sth-analyzing .sth-pulse {
	width: 64px;
	height: 64px;
	border: 2px solid var(--stq-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: var(--stq-space-5);
	animation: stqPulse 2s ease-in-out infinite;
}

@keyframes stqPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.sth-analyzing h3 {
	font-size: 18px;
	font-weight: 650;
	margin-bottom: var(--stq-space-2);
}

.sth-analyzing p {
	font-size: 14px;
	color: var(--stq-muted);
	max-width: 280px;
}

/* Selfie result overlay */
.sth-selfie-result-overlay {
	padding: var(--stq-space-4);
	animation: stqFadeIn 0.3s ease;
}

.sth-selfie-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.sth-selfie-photo-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sth-selfie-photo-wrap {
	position: relative;
	overflow: hidden;
	max-width: 280px;
	width: 100%;
	border: 1px solid var(--stq-line);
}

.sth-selfie-photo-wrap.sth-analyzing-pulse {
	animation: stqPulse 2s ease-in-out infinite;
}

.sth-selfie-preview-img {
	width: 100%;
	height: auto;
	display: block;
}

.sth-selfie-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.sth-zone-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: var(--stq-space-2);
	justify-content: center;
}

.sth-zone-chip {
	font-size: 10px;
	font-weight: 600;
	background: rgba(180, 35, 24, 0.06);
	color: var(--stq-error);
	padding: 3px 8px;
	border: 1px solid rgba(180, 35, 24, 0.15);
}

.sth-cond-chip {
	font-size: 10px;
	font-weight: 600;
	background: var(--stq-paper-alt);
	padding: 3px 9px;
	border: 1px solid var(--stq-line);
	color: var(--stq-ink-soft);
}

.sth-selfie-metrics-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sth-selfie-metric {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
}

.sth-sm-label {
	flex: 0 0 90px;
	font-size: 12px;
	font-weight: 500;
	color: var(--stq-ink);
}

.sth-sm-bar {
	flex: 1;
	height: 6px;
	background: var(--stq-paper-alt);
	overflow: hidden;
}

.sth-sm-bar i {
	display: block;
	height: 100%;
	background: var(--stq-ink);
}

.sth-sm-value {
	flex: 0 0 35px;
	text-align: right;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--stq-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. LOADING STATE
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-loading {
	text-align: center;
	padding: 60px 20px;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--stq-muted);
	font-size: 14px;
	background: var(--stq-paper-alt);
}

.sth-loading::before {
	content: '';
	display: block;
	width: 32px;
	height: 32px;
	border: 2px solid var(--stq-line);
	border-top-color: var(--stq-ink);
	border-radius: 50%;
	margin: 0 auto 14px;
	animation: stqSpin 0.7s linear infinite;
}

@keyframes stqSpin {
	to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14. RESULT PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-result {
	display: none;
	flex-direction: column;
}

.sth-result.active {
	display: flex;
}

/* Result hero */
.sth-result-hero {
	background: var(--stq-paper);
	color: var(--stq-ink);
	padding: clamp(32px, 6vw, 56px) clamp(20px, 5.5vw, 32px);
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	max-height: 450px;
}

.sth-result-hero .sth-hero-text {
	flex: 0 0 40%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: clamp(16px, 3vw, 32px);
}

.sth-result-hero .sth-hero-img {
	flex: 1 1 60%;
	object-fit: cover;
	border-radius: 0;
	max-height: 450px;
}

/* Mobile: full-width image on top, no border-radius */
@media (max-width: 600px) {
	.sth-result-hero {
		flex-direction: column;
		gap: 0;
	}

	.sth-result-hero .sth-hero-img {
		order: -1;
		flex: none;
		width: 100%;
		height: 200px;
		min-height: unset;
		border-radius: 0;
		object-fit: cover;
	}

	.sth-result-hero .sth-hero-text {
		flex: 1;
		order: 1;
		padding: var(--stq-space-4);
		padding-right: 0;
	}

	.sth-result-hero .sth-hero-text .sth-greeting {
		width: 100%;
		order: -1;
		flex-basis: 100%;
	}
}

.sth-result-hero .sth-greeting {
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stq-muted);
	margin-bottom: var(--stq-space-3);
}

.sth-result-hero .sth-profile-badge {
	display: none; /* Replaced by eyebrow greeting */
}

.sth-result-hero h2 {
	font-size: clamp(28px, 7vw, 44px);
	font-weight: 650;
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin-bottom: var(--stq-space-3);
	color: var(--stq-ink);
	max-width: 680px;
	outline: none;
}

.sth-result-hero .sth-result-desc {
	font-size: 16px;
	line-height: 1.55;
	color: var(--stq-muted);
	max-width: 590px;
	margin-top: var(--stq-space-4);
}

/* Result body */
.sth-result-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.sth-result-col {
	padding: var(--stq-space-5) clamp(20px, 5.5vw, 32px);
}

.sth-result-col + .sth-result-col {
	border-top: 1px solid var(--stq-line);
}

/* Section titles inside result */
.sth-sec-title {
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stq-muted);
	margin-top: var(--stq-space-7);
	margin-bottom: var(--stq-space-6);
	padding-top: var(--stq-space-5);
	border-top: 1px solid var(--stq-line);
}

/* Major section headings styling is now on .sth-sec-header and .sth-accordion-header individually */

.sth-sec-title:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	margin-bottom: var(--stq-space-6);
}

/* Section header (title + inline compact pills) */
.sth-sec-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--stq-space-8);
	margin-bottom: var(--stq-space-5);
	padding-top: var(--stq-space-6);
	border-top: 2px solid var(--stq-line);
}
.sth-sec-header .sth-sec-title {
	margin: 0;
	padding: 0;
	border: none;
	flex: 1;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--stq-ink);
}
.sth-sec-header .sth-tier-pills--inline {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15. PACKAGE TABS (tier selector)
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-pkg-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--stq-ink);
	margin-bottom: var(--stq-space-5);
}

.sth-pkg-tab {
	min-height: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: var(--stq-ink);
	background: var(--stq-paper);
	border: none;
	border-right: 1px solid var(--stq-ink);
	transition: background 0.12s, color 0.12s;
}

.sth-pkg-tab:last-child {
	border-right: none;
}

.sth-pkg-tab:hover {
	background: var(--stq-paper-alt) !important;
	color: var(--stq-ink) !important;
	opacity: 1 !important;
}

.sth-pkg-tab.active {
	background: var(--stq-ink);
	color: var(--stq-paper);
}

.sth-pkg-tab .sth-tab-name {
	display: block;
	font-size: 13px;
	font-weight: 700;
}

.sth-pkg-tab .sth-tab-price {
	font-size: 11px;
	opacity: 0.7;
	margin-top: 2px;
}

/* Tab icons */
.sth-pkg-tab .sth-tab-icon {
	display: block;
	margin: 0 auto 4px;
	opacity: 0.7;
}
.sth-pkg-tab.active .sth-tab-icon {
	opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15b. TIER PILLS (section-level switcher)
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-tier-pills {
	display: flex;
	gap: 8px;
	margin-bottom: var(--stq-space-4);
}

/* Main pills container: mobile-only (sticky overlay) — hidden on desktop */
.sth-tier-pills:not(.sth-tier-pills--inline) {
	display: none;
}

.sth-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--stq-line);
	background: var(--stq-paper);
	color: var(--stq-ink);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sth-tier-pill:hover {
	background: var(--stq-paper-alt);
	border-color: var(--stq-ink);
}

.sth-tier-pill.active {
	background: var(--stq-ink);
	color: var(--stq-paper);
	border-color: var(--stq-ink);
}

.sth-tier-pill .sth-pill-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.sth-tier-pill .sth-pill-label {
	display: none;
}

.sth-tier-pill .sth-pill-price {
	font-size: 11px;
	opacity: 0.7;
	white-space: nowrap;
}

.sth-tier-pill.active .sth-pill-price {
	opacity: 0.9;
}

/* Sticky on mobile only — activated via JS class toggle */
@media (max-width: 768px) {
	.sth-tier-pills:not(.sth-tier-pills--inline) {
		display: none;
	}
	.sth-tier-pills--inline {
		display: none !important;
	}
	.sth-tier-pills--sticky {
		display: flex !important;
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		z-index: 90;
		background: var(--stq-paper);
		padding: 10px var(--stq-space-4);
		border-bottom: 1px solid var(--stq-line);
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	}
	.sth-tier-pills--sticky .sth-tier-pill {
		flex: 1;
		justify-content: center;
		padding: 8px 6px;
		font-size: 12px;
	}
	.sth-tier-pills--sticky .sth-pill-label {
		display: none;
	}
	.sth-tier-pills--sticky .sth-pill-price {
		font-size: 12px;
		font-weight: 600;
		opacity: 1;
	}
}

/* Compact inline pills (icon + price only, no label) */
.sth-tier-pills--inline {
	margin-bottom: 0;
	gap: 4px;
}
.sth-tier-pills--inline .sth-tier-pill {
	padding: 4px 10px;
	font-size: 11px;
}
.sth-tier-pills--inline .sth-pill-label {
	display: none;
}
.sth-tier-pills--inline .sth-pill-price {
	font-size: 11px;
	font-weight: 600;
}

/* Package body */
.sth-pkg-body {
	border: 1px solid var(--stq-line);
	padding: var(--stq-space-5);
	margin-bottom: var(--stq-space-5);
}

.sth-pkg-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--stq-space-3);
}

.sth-pkg-head h4 {
	font-size: 16px;
	font-weight: 700;
}

.sth-pkg-head .sth-pkg-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stq-success);
}

.sth-pkg-meta {
	font-size: 14px;
	color: var(--stq-muted);
	margin-bottom: var(--stq-space-4);
	line-height: 1.45;
}

/* Product pills in package */
.sth-pkg-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: var(--stq-space-5);
}

.sth-pkg-products span.sth-prod-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 8px;
	border: 1px solid var(--stq-line);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--stq-ink);
}

.sth-prod-thumb {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
	background: var(--stq-paper-alt);
}

.sth-prod-thumb-placeholder {
	display: inline-block;
	width: 36px;
	height: 36px;
	background: var(--stq-paper-alt);
	border: 1px solid var(--stq-line);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   16. NOTE BOX (patch test / warnings)
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-note {
	background: var(--stq-warning-bg);
	border-top: 1px solid #b58a32;
	border-bottom: 1px solid #b58a32;
	padding: 15px 16px;
	font-size: 13px;
	color: var(--stq-warning-ink);
	line-height: 1.45;
	margin-top: var(--stq-space-5);
}

.sth-note strong {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   17. TIMELINE / RITUAL TABS
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-timeline {
	position: relative;
}

/* Routine tabs (AM / PM / Weekly) */
.sth-timeline .sth-routine-tabs,
.sth-routine-tabs {
	display: flex;
	gap: 24px;
	margin-bottom: var(--stq-space-4);
	border-bottom: 1px solid var(--stq-line);
}

.sth-timeline .sth-routine-tab,
.sth-routine-tab {
	padding: 0 0 10px;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--stq-muted);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.12s, border-color 0.12s;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sth-routine-tab .sth-tab-icon {
	flex-shrink: 0;
	opacity: 0.7;
}

.sth-routine-tab.active .sth-tab-icon {
	opacity: 1;
}

.sth-timeline .sth-routine-tab:hover,
.sth-routine-tab:hover {
	color: var(--stq-ink) !important;
	background: none !important;
	opacity: 1 !important;
}

.sth-timeline .sth-routine-tab.active,
.sth-routine-tab.active {
	border-bottom-color: var(--stq-ink);
	color: var(--stq-ink);
}

/* Timeline steps (legacy vertical layout) */
.sth-timeline::before {
	display: none; /* Remove old violet line */
}

.sth-tl-block {
	margin-bottom: var(--stq-space-5);
}

.sth-tl-block:last-child {
	margin-bottom: 0;
}

.sth-tl-title {
	font-size: 11px;
	font-weight: 750;
	color: var(--stq-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--stq-space-2);
	position: relative;
	padding-left: 0;
}

.sth-tl-title::before {
	display: none; /* Remove colored dot */
}

.sth-tl-step {
	display: grid;
	grid-template-columns: 24px 44px 1fr;
	gap: 12px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--stq-line);
	font-size: 14px;
	color: var(--stq-ink-soft);
	line-height: 1.4;
	position: relative;
}

.sth-tl-step::before {
	display: none; /* Remove colored dot */
}

.sth-tl-step strong {
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
	color: var(--stq-ink);
}

.sth-tl-tip {
	padding: 14px 0;
	border-bottom: 1px solid var(--stq-line);
	font-size: 14px;
	font-style: italic;
	color: var(--stq-warning-ink);
	position: relative;
	grid-column: 1 / -1;
}

.sth-tl-tip::before {
	content: none; /* Remove emoji lightbulb */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   18. ACCORDION (ingredients, AI, notes)
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-accordion {
	border-bottom: 1px solid var(--stq-line);
	margin-bottom: 0;
}

.sth-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	background: none;
	color: var(--stq-ink);
	border: none;
	border-top: 2px solid var(--stq-line);
	margin-top: var(--stq-space-6);
	width: 100%;
	text-align: left;
}

.sth-accordion-header:hover {
	color: var(--stq-ink-soft);
}

.sth-accordion-header .sth-arrow {
	font-size: 14px;
	color: var(--stq-muted);
	transition: transform 0.2s;
}

.sth-accordion.open .sth-accordion-header .sth-arrow {
	transform: rotate(180deg);
}

.sth-accordion-body {
	display: none;
	padding: 0 0 var(--stq-space-5);
}

.sth-accordion.open .sth-accordion-body {
	display: block;
}

/* AI Section — left column styling */
.sth-ai-section-left .sth-accordion {
	border: 1px solid var(--stq-line);
	padding: 0 var(--stq-space-4);
}

.sth-ai-section-left .sth-accordion-header {
	font-size: 14px;
	padding: var(--stq-space-4) 0;
}

.sth-ai-section-left .sth-accordion-body {
	padding: 0 0 var(--stq-space-4);
}

/* AI upload invitation — gated preview: bars visible on top, gradient fade, unlock CTA below */
.sth-ai-gated-preview {
	border: 1px solid var(--stq-line);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.sth-ai-peek {
	padding: var(--stq-space-4) var(--stq-space-5) 0;
	pointer-events: none;
	user-select: none;
}

.sth-ai-fade-mask {
	height: 60px;
	margin-top: -60px;
	position: relative;
	z-index: 1;
	background: linear-gradient(to bottom, transparent, var(--stq-paper, #fff));
	pointer-events: none;
}

.sth-ai-unlock {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 var(--stq-space-5) var(--stq-space-5);
}

.sth-ai-lock-icon {
	font-size: 28px;
	margin-bottom: var(--stq-space-2);
	opacity: 0.6;
}

.sth-ai-unlock .sth-ai-upload-title {
	font-size: 17px;
	font-weight: 650;
	line-height: 1.25;
	margin: 0 0 var(--stq-space-2);
	color: var(--stq-ink);
}

.sth-ai-unlock .sth-ai-upload-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--stq-muted);
	margin: 0 0 var(--stq-space-3);
	max-width: 380px;
}

.sth-ai-unlock .sth-checkboxes {
	margin: 0 0 var(--stq-space-3);
	text-align: left;
}

.sth-ai-unlock .sth-checkboxes label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	color: #444;
	margin-bottom: 6px;
}

.sth-ai-unlock .sth-cta {
	margin-top: var(--stq-space-2);
}

.sth-ai-unlock .sth-ai-upload-note {
	font-size: 11px;
	color: var(--stq-muted);
	margin-top: var(--stq-space-2);
	font-style: italic;
}

/* Legacy class kept for backward compat if anything references it */
.sth-ai-upload-cta {
	border: 1px solid var(--stq-line);
	padding: var(--stq-space-5);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.sth-ai-upload-eyebrow {
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stq-muted);
	margin-bottom: var(--stq-space-3);
}

.sth-ai-upload-title {
	font-size: 18px;
	font-weight: 650;
	line-height: 1.25;
	margin: 0 0 var(--stq-space-2);
	color: var(--stq-ink);
}

.sth-ai-upload-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--stq-muted);
	margin: 0;
}

.sth-ai-upload-cta .sth-checkboxes {
	margin: var(--stq-space-4) 0 var(--stq-space-2);
}

.sth-ai-upload-cta .sth-cta {
	margin-top: var(--stq-space-3);
}

.sth-ai-upload-note {
	font-size: 11px;
	color: var(--stq-muted);
	font-style: italic;
	margin: var(--stq-space-3) 0 0;
	text-align: center;
}

/* AI signal bars */
.sth-signal {
	display: grid;
	grid-template-columns: 95px 1fr 34px;
	gap: 10px;
	align-items: center;
	padding: 6px 0;
}

.sth-signal .sth-sg-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--stq-ink);
}

.sth-signal .sth-sg-bar {
	height: 6px;
	background: var(--stq-paper-alt);
	overflow: hidden;
}

.sth-signal .sth-sg-bar i {
	display: block;
	height: 100%;
	background: var(--stq-ink);
}

.sth-signal .sth-sg-value {
	text-align: right;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--stq-muted);
}

/* Ingredients */
.sth-ingredient {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--stq-line);
}

.sth-ingredient:last-child {
	border-bottom: none;
}

.sth-ingr-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--stq-paper-alt);
	border: 1px solid var(--stq-line);
}

.sth-ingr-text {
	flex: 1;
}

.sth-ingredient b {
	font-size: 15px;
	display: block;
	margin-bottom: 4px;
	color: var(--stq-ink);
}

.sth-ingredient span {
	font-size: 14px;
	color: var(--stq-muted);
	line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   19. THERM-SCRIPTION SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-therm-scription {
	margin-bottom: var(--stq-space-5);
	padding-bottom: var(--stq-space-5);
}

.sth-ts-steps {
	display: flex;
	flex-direction: column;
}

.sth-ts-step {
	padding: 20px 0;
	border-bottom: 1px solid var(--stq-line);
}

.sth-ts-step:last-child {
	border-bottom: none;
}

.sth-ts-step h5 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--stq-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.sth-ts-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stq-muted);
	display: block;
	margin-bottom: 2px;
}

.sth-ts-desc {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--stq-muted);
	line-height: 1.5;
}

.sth-ts-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--stq-ink-soft);
	border: 1px solid var(--stq-line);
	padding: 2px 8px;
	white-space: nowrap;
}

.sth-ts-badge svg {
	flex-shrink: 0;
}

.sth-ts-badge.sth-ts-pm {
	color: var(--stq-ink-soft);
}

.sth-ts-badge.sth-ts-wk {
	color: var(--stq-warning-ink);
	border-color: var(--stq-warning-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   20. REDO BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */
.sth-redo {
	margin-top: var(--stq-space-7);
}

.sth-redo-main {
	position: relative;
	overflow: hidden;
	background: var(--stq-paper-alt, #f8f8f6);
	padding: var(--stq-space-8) var(--stq-space-6);
	text-align: center;
}

/* BG image behind text on desktop */
.sth-redo-img {
	position: absolute;
	inset: 0;
	background: var(--sth-redo-img, none) center/cover no-repeat;
	opacity: 0.15;
	pointer-events: none;
}

.sth-redo-text {
	position: relative;
	z-index: 1;
	max-width: 520px;
	margin: 0 auto;
}

.sth-redo-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 var(--stq-space-3);
	color: var(--stq-ink);
}

.sth-redo-desc {
	font-size: 15px;
	line-height: 1.5;
	color: var(--stq-muted);
	margin: 0 0 var(--stq-space-5);
}

.sth-redo-text .sth-cta {
	width: auto;
	min-width: 280px;
	margin-top: 0;
}

/* Redo bottom row: title | text | button */
.sth-redo-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--stq-space-5) var(--stq-space-6);
	border-top: 1px solid var(--stq-line);
	gap: var(--stq-space-5);
	max-width: 860px;
	margin: 0 auto;
}

.sth-redo-bottom-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--stq-ink);
	white-space: nowrap;
}

.sth-redo-bottom-desc {
	flex: 1;
	font-size: 14px;
	color: var(--stq-muted);
	line-height: 1.4;
	text-align: center;
}

.sth-redo-bottom .sth-cta-sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border: 1px solid var(--stq-ink);
	background: transparent;
	color: var(--stq-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	border-radius: 24px;
	text-transform: none;
	transition: background 0.15s, color 0.15s;
}

.sth-redo-bottom .sth-cta-sm:hover {
	background: var(--stq-ink);
	color: var(--stq-paper);
}

@media (max-width: 768px) {
	.sth-redo-main {
		padding: var(--stq-space-6) var(--stq-space-4);
	}
	/* On mobile, show image below text as visible block */
	.sth-redo-img {
		position: relative;
		inset: auto;
		opacity: 1;
		width: 100%;
		height: 180px;
		margin-top: var(--stq-space-5);
	}
	.sth-redo-text .sth-cta {
		width: 100%;
	}
	.sth-redo-title {
		font-size: 20px;
	}
	.sth-redo-bottom {
		flex-direction: column;
		text-align: center;
		gap: var(--stq-space-3);
	}
}

/* AI suggestion badge */
.sth-ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 9px;
	font-weight: 700;
	color: var(--stq-muted);
	background: var(--stq-paper-alt);
	border: 1px solid var(--stq-line);
	padding: 2px 6px;
	white-space: nowrap;
	vertical-align: middle;
	margin-left: 4px;
}

.sth-opt.sth-ai-suggested {
	border-color: var(--stq-line-strong);
}

.sth-gc.sth-ai-suggested .sth-ai-badge {
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 8px;
	z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   21. RESPONSIVE — Tablet & Desktop
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
	/* Content stays centered and narrow */
	.sth-content {
		max-width: 760px;
	}

	.sth-hero {
		max-width: 760px;
		margin: 0 auto;
	}

	/* Questions get a bit bigger */
	.sth-question {
		font-size: clamp(30px, 5vw, 44px);
	}

	/* Image grid: 3 columns */
	.sth-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Result: 2 columns */
	.sth-result-body {
		grid-template-columns: minmax(0, 0.78fr) minmax(320px, 1.22fr);
		gap: clamp(32px, 5vw, 64px);
	}

	.sth-result-col + .sth-result-col {
		border-top: none;
		border-left: 1px solid var(--stq-line);
	}

	/* Selfie split */
	.sth-selfie-split {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

@media (min-width: 1024px) {
	/* Image grid: up to 4 columns */
	.sth-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sth-result-col {
		padding: var(--stq-space-6);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   22. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	#sth-quiz *,
	#sth-quiz *::before,
	#sth-quiz *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.sth-progress i {
		transition: none;
	}
}