/* ── DESIGN TOKENS SITE ── */
		:root {
			--topbar-h: 68px;
			--bg-site: #080c14;
			--primary: #1C93CA;
			--glass-bg: rgba(255,255,255,0.06);
			--glass-bd: rgba(255,255,255,0.12);
			--text: #c8d0e0;
		}

		/* ── OVERRIDE QUIZ BG to match site theme ── */
		body {
			background-color: var(--bg-site) !important;
			background-image: radial-gradient(ellipse 90% 40% at 50% -5%, rgba(28,147,202,0.10) 0%, transparent 60%) !important;
			padding-top: var(--topbar-h);
		}

		/* ── TOPBAR ── */
		.topbar {
			position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
			height: var(--topbar-h);
			display: flex; align-items: center;
			padding: 0 2rem; gap: 1.5rem;
			background: rgba(8,12,20,0.75);
			backdrop-filter: blur(18px) saturate(1.6);
			border-bottom: 1px solid var(--glass-bd);
			transition: background .3s;
		}
		.topbar.scrolled { background: rgba(8,12,20,0.97); }
		.topbar-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
		.topbar-logo img { height: 38px; }
		.topbar-nav { display:flex; align-items:center; gap:.25rem; margin-left:1rem; flex:1; }
		.topbar-nav a {
			padding: .45rem .9rem; border-radius: 8px; font-size: .875rem; font-weight: 500;
			color: var(--text); text-decoration: none; transition: background .2s, color .2s;
			white-space: nowrap;
		}
		.topbar-nav a:hover, .topbar-nav a.active { background: rgba(28,147,202,.12); color: var(--primary); }
		.topbar-cta { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
		.btn-ghost {
			padding: .45rem 1rem; border-radius: 8px; font-size: .875rem; font-weight: 500;
			color: var(--text); text-decoration: none; border: 1px solid var(--glass-bd);
			transition: background .2s; white-space: nowrap;
		}
		.btn-ghost:hover { background: var(--glass-bg); }
		.btn-fill {
			padding: .45rem 1.1rem; border-radius: 8px; font-size: .875rem; font-weight: 600;
			background: var(--primary); color: #fff; text-decoration: none;
			border: none; cursor: pointer; transition: opacity .2s; white-space: nowrap;
		}
		.btn-fill:hover { opacity: .85; }
		.topbar-hamburger {
			display: none; flex-direction: column; justify-content: center; gap: 5px;
			background: none; border: none; cursor: pointer; padding: .5rem; margin-left: auto;
		}
		.topbar-hamburger span {
			display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px;
			transition: transform .25s, opacity .25s;
		}
		.topbar-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
		.topbar-hamburger.open span:nth-child(2){opacity:0;}
		.topbar-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
		.topbar-mobile-nav{display:none;position:fixed;top:var(--topbar-h);left:0;right:0;background:rgba(8,12,20,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.12);z-index:999;padding:1rem 1.5rem 1.5rem;flex-direction:column;gap:.25rem;}
		.topbar-mobile-nav.open{display:flex;}
		.topbar-mobile-nav a{padding:.7rem 1rem;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--text);text-decoration:none;transition:background .2s,color .2s;}
		.topbar-mobile-nav a:hover,.topbar-mobile-nav a.active{background:rgba(28,147,202,.12);color:var(--primary);}
		@media(max-width:900px){.topbar-nav,.topbar-cta{display:none;}.topbar-hamburger{display:flex;}}

		/* ── QUIZ PROGRESS STRIP (under topbar) ── */
		#quiz-progress-strip {
			display: none;
			position: sticky; top: var(--topbar-h); z-index: 900;
			background: rgba(8,12,20,0.92); backdrop-filter: blur(10px);
			border-bottom: 1px solid rgba(255,255,255,0.08);
			padding: .6rem 2rem;
			align-items: center; gap: 1.5rem;
		}
		#quiz-progress-strip.visible { display: flex; }
		#quiz-progress-strip .prog-track {
			flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden;
		}
		#quiz-progress-strip .prog-fill-bar {
			height: 100%; background: var(--primary); border-radius: 2px;
			transition: width .4s ease;
		}
		#quiz-progress-strip .step-label {
			font-size: .78rem; color: var(--text); white-space: nowrap; opacity: .75;
		}

		/* ── QUIZ CONTAINER ── */
		#quiz-root {
			min-height: calc(100vh - var(--topbar-h));
			padding: 2.5rem 1rem 4rem;
		}

		/* ── OVERRIDE QUIZ COLORS for site dark theme ── */
		:root {
			--bg:      #080c14;
			--surface: #0d1220;
			--card:    #111827;
			--card-hover: #1a2335;
			--border:  rgba(255,255,255,0.08);
			--border-strong: rgba(255,255,255,0.15);
			--text-1:  #e8edf5;
			--text-2:  #8fa3b8;
		}

		/* Keep the quiz header (#hdr) hidden since we use the site topbar */
		#hdr { display: none !important; }

		/* Main/footer from quiz page */
		main { padding-top: 0; }
		footer { display: none; }

		/* ── HERO INTRO BANNER ── */
		.quiz-hero-banner {
			max-width: 760px; margin: 0 auto 2.5rem; text-align: center;
		}
		.quiz-hero-banner .quiz-brand {
			display: flex; align-items: center; justify-content: center; gap: .75rem;
			margin-bottom: 1.5rem;
		}
		.quiz-hero-banner .quiz-brand img {
			height: 44px;
		}
		.quiz-hero-banner .quiz-brand-name {
			font-size: 1.2rem; font-weight: 700; color: #e8edf5;
		}
		.quiz-hero-banner .quiz-eyebrow {
			font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
			color: var(--primary); margin-bottom: .6rem;
		}
		.quiz-hero-banner h1 {
			font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: #e8edf5;
			line-height: 1.3; margin-bottom: .9rem;
		}
		.quiz-hero-banner p {
			font-size: .95rem; color: #8fa3b8; line-height: 1.7; max-width: 600px; margin: 0 auto;
		}

/* ── Mobile nav active link ── */
.mobile-nav-active { color:#1C93CA; font-weight:600; }
/* ── Progress bar initial state ── */
.prog-fill-bar-init { width:3%; }
/* ── hdr-wizard hidden ── */
.hdr-wizard-hidden { display:none !important; }