:root {
	--vq-bg: #090a0b;
	--vq-foreground: #ffffff;
	--vq-silver: #c5c1b9;
	--vq-silver-muted: #a19d96; /* Brighter than original for readability */
	--vq-silver-muted-light: #e5e5e5; /* Even brighter for small text */
	--vq-graphite: #1a1a1a;
	--vq-card: #111213;
	--vq-border: rgba(255, 255, 255, 0.1);
	--vq-border-hover: rgba(255, 255, 255, 0.3);
	--font-sans: 'Inter', system-ui, sans-serif;
	--font-display: 'Playfair Display', serif;
	--font-mono: 'JetBrains Mono', monospace;
}

.vitalis-quiz-container {
	background-color: var(--vq-bg);
	color: var(--vq-foreground);
	font-family: var(--font-sans);
	min-height: 100vh;
	width: 100%;
	position: relative;
	box-sizing: border-box;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.vitalis-quiz-container * {
	box-sizing: border-box;
}


.vq-main {
	max-width: 48rem;
	margin: 0 auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 1.5rem;
}

/* Animations */
.vq-step {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	display: none;
}

.vq-step.active {
	opacity: 1;
	transform: translateY(0);
	display: block;
}

/* Text Intro Step */
.vq-intro-center {
	text-align: center;
}

.vq-icon-wrapper {
	margin: 0 auto;
	display: flex;
	height: 3.5rem;
	width: 3.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border: 1px solid rgba(255,255,255,0.1);
	background-color: var(--vq-graphite);
}

.vq-icon-wrapper svg {
	height: 1.5rem;
	width: 1.5rem;
	color: var(--vq-silver);
}

.vq-eyebrow {
	font-family: var(--font-mono);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--vq-silver-muted-light); /* Brighter */
	font-size: 13px; /* Increased */
	font-weight: 500; /* Thicker */
	margin-top: 2rem;
	display: block;
}

.vq-title {
	margin: 1.25rem auto 0 auto;
	max-width: 42rem;
	font-family: var(--font-display);
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

@media (min-width: 768px) {
	.vq-title { font-size: 3rem; }
}

.vq-body {
	margin: 1.5rem auto 0 auto;
	max-width: 36rem;
	font-size: 1.125rem; /* Increased base readability */
	line-height: 1.625;
	color: var(--vq-silver-muted-light); /* Brighter */
}

.vq-btn {
	margin-top: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	border-radius: 9999px;
	background-color: var(--vq-foreground);
	color: var(--vq-bg);
	padding: 1rem 2rem;
	font-size: 0.875rem;
	font-weight: 600; /* Thicker */
	letter-spacing: 0.025em;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.vq-btn:hover {
	transform: scale(1.02);
	background-color: var(--vq-foreground) !important;
	color: var(--vq-bg) !important;
}

.vq-btn svg {
	transition: transform 0.2s ease;
}

.vq-btn:hover svg {
	transform: translateX(4px);
}

.vq-trust {
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 12px; /* Increased from 11px */
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--vq-silver-muted-light); /* Brighter */
	font-weight: 500;
}

/* Question Step */
.vq-q-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.vq-q-counter {
	font-family: var(--font-mono);
	font-size: 13px; /* Increased */
	letter-spacing: 0.15em;
	color: var(--vq-silver-muted-light);
	font-weight: 500;
}

.vq-q-title {
	margin-top: 1.5rem;
	font-family: var(--font-display);
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

@media (min-width: 768px) {
	.vq-q-title { font-size: 3rem; }
}

.vq-q-sub {
	margin-top: 1rem;
	font-size: 1.125rem; /* Increased */
	color: var(--vq-silver-muted-light);
}

.vq-options {
	margin-top: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.vq-option {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--vq-border);
	background-color: var(--vq-card);
	padding: 1.25rem 1.5rem;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--vq-foreground);
}

.vq-option:hover {
	border-color: var(--vq-border-hover);
	background-color: var(--vq-graphite);
}

.vq-option.selected {
	border-color: var(--vq-silver);
	background-color: var(--vq-graphite);
}

.vq-option-label {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.vq-option-hint {
	margin-top: 0.35rem;
	font-size: 14px; /* Increased from 12px */
	color: var(--vq-silver-muted-light); /* Brighter */
}

.vq-option-arrow {
	opacity: 0;
	transition: all 0.2s ease;
	color: var(--vq-silver-muted);
}

.vq-option:hover .vq-option-arrow {
	opacity: 1;
	transform: translateX(4px);
}

.vq-footer {
	margin-top: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vq-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--vq-silver-muted-light);
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease;
	padding: 0;
}

.vq-back-btn:hover {
	color: var(--vq-foreground);
}

.vq-back-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Form Styles */
.vq-form-container {
	margin-top: 2.5rem;
	border-radius: 1rem;
	border: 1px solid rgba(255,255,255,0.1);
	background-color: var(--vq-card);
	padding: 2rem;
}

@media (min-width: 768px) {
	.vq-form-container { padding: 2.5rem; }
}

.vq-input-group {
	margin-bottom: 1.25rem;
}

.vq-input-group .vq-eyebrow {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.vq-input {
	display: block;
	width: 100%;
	border-radius: 0.375rem;
	border: 1px solid rgba(255,255,255,0.15);
	background-color: var(--vq-bg); /* changed from onyx to bg for contrast */
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: var(--vq-foreground);
	font-family: var(--font-sans);
}

.vq-input:focus {
	border-color: var(--vq-silver);
	outline: none;
}

.vq-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.vq-submit-btn {
	width: 100%;
	margin-top: 1.5rem;
}

/* Upgrades note styling */
.vq-footnote {
	font-size: 13px;
	color: var(--vq-silver-muted-light);
	font-style: italic;
	margin-top: 1rem;
	text-align: center;
	opacity: 0.8;
}

.vq-loading {
	text-align: center;
	padding: 2rem;
	color: var(--vq-silver-muted-light);
}

/* Success state */
.success-state {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================
   EXPANDED VIEWS STYLES (Results, Checkout, Intake)
   ============================================ */
.vq-loader-screen {
	text-align: center;
	padding: 5rem 1rem;
}
.vq-loader-percentage {
	font-family: var(--font-mono);
	font-size: 4rem;
	font-weight: 700;
	color: var(--vq-foreground);
	margin-top: 1rem;
}

/* Results Grid */
.vq-metrics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin-top: 2rem;
}
@media (min-width: 768px) {
	.vq-metrics-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.vq-metric-card {
	border-radius: 1rem;
	border: 1px solid var(--vq-border);
	background-color: var(--vq-card);
	padding: 1.5rem;
	position: relative;
}
.vq-metric-card.highlight {
	border-color: rgba(197, 193, 185, 0.4);
	background: linear-gradient(to bottom, #1a1a1a, var(--vq-card));
}
.vq-metric-card .vq-eyebrow {
	margin-top: 0;
	font-size: 11px;
}
.vq-metric-value-container {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin-top: 0.75rem;
}
.vq-metric-value {
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--vq-foreground);
}
.vq-metric-scale {
	font-size: 0.75rem;
	color: var(--vq-silver-muted);
}
.vq-progress-bg {
	height: 4px;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 9999px;
	margin-top: 1rem;
	overflow: hidden;
}
.vq-progress-fill {
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.4), var(--vq-foreground));
	width: 0%;
	transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dynamic sub-metrics grid */
.vq-sub-metrics-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-top: 0.75rem;
}
@media (min-width: 768px) {
	.vq-sub-metrics-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Matched Formations List */
.vq-protocol-list {
	margin-top: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--vq-border);
	background-color: var(--vq-card);
	overflow: hidden;
}
.vq-protocol-item {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 2rem;
	border-bottom: 1px solid var(--vq-border);
}
.vq-protocol-item:last-child {
	border-bottom: none;
}
.vq-protocol-icon {
	display: flex;
	height: 3rem;
	width: 3rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border: 1px solid var(--vq-border);
	background-color: var(--vq-graphite);
	color: var(--vq-silver);
}
.vq-protocol-details .vq-eyebrow {
	margin-top: 0;
	font-size: 11px;
}
.vq-protocol-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--vq-foreground);
	margin-top: 0.25rem;
}
.vq-protocol-note {
	font-size: 13px;
	color: var(--vq-silver-muted);
	margin-top: 0.25rem;
}

/* Split grids for why it matters and checkout pricing cards */
.vq-split-2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.vq-split-2col {
		grid-template-columns: repeat(2, 1fr);
	}
}
.vq-card-panel {
	border-radius: 1rem;
	border: 1px solid var(--vq-border);
	background-color: var(--vq-card);
	padding: 2rem;
}

/* Why this fits boxes */
.vq-fits-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 1.5rem;
}
@media (min-width: 768px) {
	.vq-fits-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.vq-fit-box {
	border-radius: 0.75rem;
	border: 1px solid var(--vq-border);
	background-color: rgba(26,26,26,0.6);
	padding: 1.5rem;
}

/* Checkout Page Columns Layout */
.vq-checkout-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.vq-checkout-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 2.5rem;
	}
	.vq-checkout-main {
		grid-column: span 3;
	}
	.vq-checkout-sidebar {
		grid-column: span 2;
	}
}
.vq-checkout-sticky {
	position: sticky;
	top: 8rem;
	border-radius: 1rem;
	border: 1px solid var(--vq-border);
	background: linear-gradient(to bottom, var(--vq-card), var(--vq-graphite));
	padding: 2rem;
}

/* Custom inputs grid inside forms */
.vq-inputs-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 768px) {
	.vq-inputs-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}
.vq-inputs-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 768px) {
	.vq-inputs-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Custom select dropdown styling */
.vq-select {
	display: block;
	width: 100%;
	border-radius: 0.375rem;
	border: 1px solid rgba(255,255,255,0.15);
	background-color: var(--vq-bg);
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: var(--vq-foreground);
	font-family: var(--font-sans);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.25rem;
}
.vq-select:focus {
	border-color: var(--vq-silver);
	outline: none;
}

/* Success details items badge */
.vq-detail-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	border: 1px solid var(--vq-border);
	background-color: rgba(26,26,26,0.8);
	padding: 0.375rem 1rem;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--vq-silver-muted);
}

/* ============================================
   VALIDATION AND LOGO HEADER HIDING OVERRIDES
   ============================================ */

/* Beautiful input validation styles on submit */
.vq-validated .vq-input:invalid,
.vq-validated .vq-select:invalid,
.vq-validated textarea:invalid {
	border-color: #ef4444 !important;
	background-color: rgba(239, 68, 68, 0.03) !important;
	box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15) !important;
}

/* Hide theme/header VITALIS span if it matches the specific inline styling */
span[style*="font-family:var(--font-display)"][style*="font-size:1.5rem"],
span[style*="font-family: var(--font-display)"][style*="font-size: 1.5rem"] {
	display: none !important;
}