/* GENERATED by .claude/design/pages-build/mk_bench_new.py from the live medical benchmarks page's own <style> blocks. Do not edit: rerun the script.
   Layer pgpage (under the pg layer); rules apply inside <main> only (@scope), so the shared header and footer are never touched.
   !important is stripped (layer order would invert it); --ink and --teal are renamed --lg-ink / --lg-teal (they clashed with CF2 tokens). */
@layer pgpage {

	/* ============================================
	   CSS Variables - Brand Colors
	   ============================================ */
	:root {
		/* Primary Colors */
		--primary-color: #005F6E;        /* Teal - main brand color */
		--secondary-color: #6e0f31;      /* Burgundy - accent color */
		--accent-color: #ED8B00;         /* Orange - highlights */
		--accent-color-dark: #C57300;    /* Darker orange - for gradients */
		--success-color: #1ABC9C;        /* Turquoise - positive/success */
		--success-color-dark: #16A085;   /* Darker turquoise - for gradients */
		--dark-color: #1A171B;           /* Dark - text/headers */

		/* Neutral Colors */
		--neutral-1: #999967;            /* Olive grey */
		--neutral-2: #CCCCCC;            /* Light grey */
		--neutral-3: #CCCC9A;            /* Beige grey */

		/* Dark Navy Theme (from indexLanding.html) */
		--dark-navy-1: #0a0f1a;          /* Deepest navy */
		--dark-navy-2: #141c2e;          /* Mid navy */
		--dark-navy-3: #1a2540;          /* Lighter navy */
	}


	@keyframes drawLine {
		0% {
			stroke-dashoffset: 2500;
			opacity: 0;
		}
		10% {
			opacity: 1;
		}
		100% {
			stroke-dashoffset: 0;
			opacity: 1;
		}
	}

	@keyframes pulse {
		0% { transform: scale(0.5); opacity: 0.8; }
		100% { transform: scale(2); opacity: 0; }
	}


	/* ============================================
	   Medical Benchmarks — App Styles (v2: design restraint pass)
	   ============================================ */
	:root {
		--lg-ink: #0f172a;
		--slate-700: #334155;
		--slate-600: #475569;
		--slate-500: #64748b;
		--slate-400: #94a3b8;
		--slate-300: #cbd5e1;
		--slate-200: #e2e8f0;
		--slate-100: #f1f5f9;
		--slate-50:  #f8fafc;
		--lg-teal:      #005F6E;
		--teal-soft: #e8f0f2;
		--amber:     #ED8B00;
		--amber-soft:#fff4e0;
		--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		--radius:     8px;
		--radius-lg:  12px;
		--radius-xl:  16px;
	}

	@keyframes catLbShimmer { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }

	@keyframes catLbBarShine {
		0% { opacity: 0; }
		40% { opacity: 0.85; }
		100% { opacity: 0; }
	}

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

	@keyframes hiwSlideIn { from { opacity: 0; transform: translate(-50%,-48%); } to { opacity: 1; transform: translate(-50%,-50%); } }

	@keyframes medspin { to { transform: rotate(360deg); } }
@scope (main) {


	/* Reserve specific height for navbar on desktop to prevent shift when menu loads */
	@media (min-width: 992px) {
		.topNav-navbar {
			min-height: 80px;
		}
		#navbarNavDropdown {
			min-height: 40px;
		}
	}


	/* Staggered animation delays for each line */
	.fl1 { animation-delay: 0s; }

	.fl2 { animation-delay: 0.15s; }

	.fl3 { animation-delay: 0.3s; }

	.fl4 { animation-delay: 0.45s; }

	.fl5 { animation-delay: 0.6s; }

	.fl6 { animation-delay: 0.75s; }

	.fl7 { animation-delay: 0.9s; }

	.fl8 { animation-delay: 1.05s; }

	.fl9 { animation-delay: 1.2s; }

	.fl10 { animation-delay: 1.35s; }

	.fl11 { animation-delay: 1.5s; }

	.fl12 { animation-delay: 1.65s; }

	.fl13 { animation-delay: 1.8s; }

	.fl14 { animation-delay: 1.95s; }

	.fl15 { animation-delay: 2.1s; }

	.fl16 { animation-delay: 2.25s; }

	.fl17 { animation-delay: 2.4s; }

	.fl18 { animation-delay: 2.55s; }

	.fl19 { animation-delay: 2.7s; }

	.fl20 { animation-delay: 2.85s; }

	.fl21 { animation-delay: 3s; }


	/* Secondary fan delays - starts after primary completes (~5s) */
	.fs1 { animation-delay: 5s; }

	.fs2 { animation-delay: 5.12s; }

	.fs3 { animation-delay: 5.24s; }

	.fs4 { animation-delay: 5.36s; }

	.fs5 { animation-delay: 5.48s; }

	.fs6 { animation-delay: 5.6s; }

	.fs7 { animation-delay: 5.72s; }

	.fs8 { animation-delay: 5.84s; }

	.fs9 { animation-delay: 5.96s; }

	.fs10 { animation-delay: 6.08s; }

	.fs11 { animation-delay: 6.2s; }

	.fs12 { animation-delay: 6.32s; }

	.fs13 { animation-delay: 6.44s; }

	.fs14 { animation-delay: 6.56s; }

	.fs15 { animation-delay: 6.68s; }

	.fs16 { animation-delay: 6.8s; }

	@media (max-width: 640px) {
		.eco-hero-scale-hint { display: none; }
	}


	/* Mobile Adjustments */
	@media (max-width: 768px) {
		/* Prevent horizontal overflow - only on html to not interfere with scroll */
		html {
			overflow-x: hidden;
		}

		/* Ensure smooth scrolling on iOS */
		body {
			-webkit-overflow-scrolling: touch;
		}

		/* Fix scroll-to-top button positioning on mobile */
		.scroll-to-top {
			right: 1rem;
			width: 44px;
			height: 44px;
		}

		/* Content section fits neatly */
		#content,
		.content-wrap,
		.container {
			max-width: 98vw;
			margin: 0 auto;
		}

		.eco-hero {
			padding: 2rem 0 1.75rem;
		}

		.eco-hero-title-row {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.75rem;
		}

		.eco-hero-meta {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5rem;
		}
	}


	@media (max-width: 991px) {
		.topNav-navbar {
			min-height: 70px;
		}
		#navbarNavDropdown { position: fixed; top: 85px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100vh - 85px); max-height: calc(100vh - 85px); background: white; z-index: 1040; display: none; overflow-y: auto; overflow-x: hidden; padding: 0; margin: 0; border: none; transform: none; transition: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
		#navbarNavDropdown.show { display: block; }
		body.dark-mode #navbarNavDropdown { background: #1a1a1a; }
		#navbarNavDropdown .navbar-nav { flex-direction: column; width: 100%; margin: 0; padding: 0; }
		#navbarNavDropdown .nav-item { width: 100%; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
		body.dark-mode #navbarNavDropdown .nav-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
		#navbarNavDropdown .nav-link { padding: 18px 20px; font-size: 17px; color: var(--text-color, #333); display: flex; justify-content: space-between; align-items: center; text-decoration: none; background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; }
		#navbarNavDropdown .nav-link:hover, #navbarNavDropdown .nav-link:focus { background-color: rgba(237, 139, 0, 0.08); outline: none; }
		#navbarNavDropdown .dropdown-toggle::after { content: '+'; border: none; font-size: 24px; font-weight: 300; color: #999; margin-left: auto; transition: transform 0.3s ease; width: auto; height: auto; vertical-align: unset; }
		#navbarNavDropdown .dropdown.show .dropdown-toggle::after { content: '−'; transform: none; }
		#navbarNavDropdown .dropdown-menu { position: static; float: none; width: 100%; margin: 0; padding: 0; border: none; border-radius: 0; background: rgba(0, 0, 0, 0.02); box-shadow: none; transform: none; display: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; top: auto; left: auto; right: auto; bottom: auto; }
		body.dark-mode #navbarNavDropdown .dropdown-menu { background: rgba(255, 255, 255, 0.02); }
		#navbarNavDropdown .dropdown.show .dropdown-menu { display: block; max-height: 500px; transition: max-height 0.3s ease-in; }
		#navbarNavDropdown .dropdown-item { padding: 14px 20px 14px 40px; font-size: 16px; color: var(--text-color, #666); border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: transparent; border-radius: 0; white-space: normal; word-wrap: break-word; }
		body.dark-mode #navbarNavDropdown .dropdown-item { color: #ccc; border-bottom-color: rgba(255, 255, 255, 0.05); }
		#navbarNavDropdown .dropdown-item:last-child { border-bottom: none; }
		#navbarNavDropdown .dropdown-item:hover, #navbarNavDropdown .dropdown-item:focus { background-color: rgba(237, 139, 0, 0.1); color: var(--text-color, #333); }
		#navbarNavDropdown .dropdown-menu[data-bs-popper] { position: static; inset: unset; transform: none; }
		body.mobile-menu-open { overflow: hidden; position: fixed; width: 100%; height: 100%; }
		#navbarNavDropdown .topNav-search-icon { margin: 20px; width: calc(100% - 40px); justify-content: center; background: var(--accent-color); color: white; border: none; padding: 12px; border-radius: 8px; font-size: 16px; }
		#navbarNavDropdown, #navbarNavDropdown * { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; }
	}

	#content {
		visibility: visible;
		opacity: 1;
	}


	.med-content { font-family: var(--font-sans); color: var(--lg-ink); }

	.med-content,
	.med-content p,
	.med-content h1, .med-content h2, .med-content h3,
	.med-content h4, .med-content h5, .med-content h6 {
		font-family: var(--font-sans); letter-spacing: -0.005em;
	}

	.med-content { font-feature-settings: "cv02","cv03","cv04","cv11"; }

	.med-content .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }


	/* Section rhythm */
	.med-content { padding-top: 8px; }

	.med-content .section { padding: 2.25rem 0 0.5rem; }

	.med-content .section:first-child { padding-top: 2.25rem; }


	.med-section-title { margin-bottom: 1.25rem; }

	.med-section-title h2 {
		font-size: 1.3rem; font-weight: 700;
		color: var(--lg-ink); margin: 0 0 4px 0;
		letter-spacing: -0.02em;
	}

	.med-section-title p {
		font-size: 13px; margin: 0;
		color: var(--slate-500);
	}


	/* Detail view header removed in iter 25 (no below-dashboard filters). */

	/* ============================================
	   FIND & ASSESS CTA BLOCK (adapted from childcare)
	   ============================================ */
	.cta-block {
		background: linear-gradient(135deg, #0b1a2e 0%, #132f4c 55%, #0d3b4f 100%);
		border-radius: var(--radius-lg);
		padding: 3rem 3rem;
		color: white;
		position: relative;
		overflow: hidden;
	}

	.cta-block::before {
		content: ''; position: absolute; top: -60%; right: -15%;
		width: 500px; height: 500px; border-radius: 50%;
		background: radial-gradient(circle, rgba(6,182,212,0.14), transparent 65%);
		pointer-events: none;
	}

	.cta-block::after {
		content: ''; position: absolute; bottom: -40%; left: -10%;
		width: 350px; height: 350px; border-radius: 50%;
		background: radial-gradient(circle, rgba(237,139,0,0.09), transparent 65%);
		pointer-events: none;
	}

	.cta-image-bg {
		position: absolute; top:0; right:0; height:100%; width:50%; max-width:600px;
		background-image: url('/images/analysis_target_cc.webp');
		background-size: cover; background-position: center left;
		mask-image: linear-gradient(to right, transparent 0%, black 60%);
		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%);
		opacity: 0.85; z-index: 0; pointer-events: none;
	}

	.cta-content-inner { position: relative; z-index: 1; }

	.cta-title-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }

	.cta-title-row h3 {
		color: #fff; font-size: 1.9rem; font-weight: 700; margin: 0;
		letter-spacing: -0.3px;
	}

	.cta-title-row .cta-icon {
		width: 48px; height: 48px; border-radius: 10px;
		background: rgba(6,182,212,0.18);
		display: flex; align-items: center; justify-content: center;
		font-size: 1.3rem; color: var(--accent-vivid); flex-shrink: 0;
	}

	.cta-subtitle {
		color: rgba(255,255,255,0.62); font-size: 1rem;
		margin: 0 0 2rem 0; max-width: 600px; line-height: 1.55;
	}

	.cta-steps {
		display: flex; align-items: flex-start; gap: 0;
		margin-bottom: 2rem; max-width: 540px;
	}

	.cta-step {
		display: flex; flex-direction: column; align-items: center;
		flex: 1; position: relative; text-align: center;
	}

	.cta-step:not(:last-child)::after {
		content: ''; position: absolute; top: 20px; left: calc(50% + 24px);
		width: calc(100% - 48px); height: 1px;
		background: rgba(255,255,255,0.18);
	}

	.cta-step-num {
		width: 40px; height: 40px; border-radius: 50%;
		background: rgba(255,255,255,0.08);
		border: 1.5px solid rgba(255,255,255,0.22);
		display: flex; align-items: center; justify-content: center;
		font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.8);
		margin-bottom: 0.55rem; position: relative; z-index: 1;
		transition: all 0.3s;
	}

	.cta-step:hover .cta-step-num {
		background: rgba(6,182,212,0.22);
		border-color: var(--accent-vivid); color: #fff;
	}

	.cta-step-label {
		font-size: 0.82rem; color: rgba(255,255,255,0.55);
		font-weight: 500; line-height: 1.35;
	}

	.cta-how-link {
		display: inline-block; color: rgba(255,255,255,0.72);
		font-size: 0.9rem; cursor: pointer; transition: color 0.25s;
		margin: 0 0 1.2rem 0; background: none; border: none; padding: 0;
		text-decoration: underline;
	}

	.cta-how-link:hover { color: #fff; }

	.cta-how-link i { font-size: 0.8rem; margin-right: 4px; }


	.search-mode-toggle {
		display: inline-flex; align-self: flex-start;
		margin-bottom: 0.85rem; border-radius: 50px;
		background: rgba(255,255,255,0.07);
		border: 1px solid rgba(255,255,255,0.12);
		padding: 3px; gap: 2px;
	}

	.smt-btn {
		padding: 0.55rem 1.4rem; border: none; background: transparent;
		color: rgba(255,255,255,0.5); font-size: 0.88rem; font-weight: 600;
		cursor: pointer; transition: all 0.2s; letter-spacing: 0.2px;
		border-radius: 50px; display: inline-flex; align-items: center;
		justify-content: center; gap: 6px;
	}

	.smt-btn i { font-size: 0.82rem; }

	.smt-btn:not(.active):hover {
		color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05);
	}

	.smt-btn.active {
		background: rgba(6,182,212,0.22); color: #fff;
		box-shadow: inset 0 0 0 1px rgba(6,182,212,0.35);
	}

	.smt-btn.active i { color: var(--accent-vivid); }


	.cta-search {
		display: flex; max-width: 560px;
		border-radius: var(--radius); overflow: hidden;
		box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	}

	.cta-search input {
		flex: 1; border: none; border-radius: 0;
		padding: 0.95rem 1.2rem; font-size: 0.98rem;
		outline: none; background: rgba(255,255,255,0.96); color: var(--lg-ink);
	}

	.cta-search input::placeholder { color: #94a3b8; }

	.cta-search input:focus { background: #fff; }

	.cta-search button {
		background: var(--signal); border: none; border-radius: 0;
		padding: 0.95rem 1.5rem; color: #fff; font-weight: 600;
		cursor: pointer; transition: background 0.2s;
		font-size: 0.95rem; white-space: nowrap;
	}

	.cta-search button:hover { background: #d97706; }

	.cta-search button i { margin-right: 6px; }


	.go-pro-wrap {
		position: relative; width: 100%; height: 100%;
		overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.25);
		border-radius: var(--radius-lg); background: #000;
		cursor: pointer; min-height: 200px;
	}

	.go-pro-wrap iframe {
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%; border: 0;
	}

	.go-pro-wide { min-height: 160px; height: 160px; }

	@media (max-width: 768px) { .go-pro-wide { height: 220px; min-height: 220px; } }


	@media (max-width: 768px) {
		.cta-block { padding: 2rem 1.5rem; }
		.cta-title-row h3 { font-size: 1.55rem; }
		.cta-steps { gap: 0.25rem; margin-bottom: 1.5rem; }
		.cta-step-label { font-size: 0.75rem; }
		.cta-search { flex-direction: column; border-radius: var(--radius); }
		.cta-search button { padding: 0.85rem; }
	}


	.med-cta-hero {
		background: linear-gradient(135deg, var(--primary-color) 0%, #1b8cb4 50%, var(--success-color) 100%);
		color:#fff; border-radius:14px; padding:24px; box-shadow:0 8px 24px rgba(0,95,110,0.18);
		position:relative; overflow:hidden;
	}

	.med-cta-hero::before {
		content:''; position:absolute; inset:0;
		background:radial-gradient(circle at 85% 20%, rgba(237,139,0,0.25), transparent 50%);
		pointer-events:none;
	}

	.med-cta-hero h4 { color:#fff; margin:0 0 8px 0; font-size:18px; font-weight:700; }

	.med-cta-hero p { color:rgba(255,255,255,0.85); font-size:13px; margin-bottom:14px; line-height:1.5; }

	.med-cta-hero .med-cta-btn {
		display:inline-flex; align-items:center; gap:8px;
		background:var(--accent-color); color:#fff; padding:9px 18px;
		border-radius:100px; font-weight:700; font-size:13px; text-decoration:none;
		transition:all 0.2s; box-shadow:0 2px 8px rgba(237,139,0,0.35);
	}

	.med-cta-hero .med-cta-btn:hover { background:var(--accent-color-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(237,139,0,0.45); color:#fff; }


	.med-section-header { margin:8px 0 12px; padding-bottom:6px; border-bottom:2px solid #f0f0f0; }

	.med-section-header h5 { margin:0 0 2px 0; color:var(--primary-color); font-weight:700; font-size:16px; }


	/* ----- Category picker: tabs + horizontal swiper ----- */
	.cat-picker {
		border: 1px solid var(--slate-200);
		border-radius: var(--radius-lg);
		background: #fff;
		padding: 14px 16px 16px;
		margin-bottom: 0;
	}

	.cat-picker-tabs {
		display: flex; flex-wrap: wrap; gap: 3px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--slate-100);
		margin-bottom: 12px;
	}

	.cpt {
		padding: 6px 13px; font-size: 12px; font-weight: 500;
		border: none; background: transparent;
		color: var(--slate-500); border-radius: 100px;
		cursor: pointer; transition: color 0.12s, background 0.12s;
		font-family: inherit; letter-spacing: -0.005em;
	}

	.cpt:hover { color: var(--lg-ink); background: var(--slate-100); }

	.cpt.active { color: #fff; background: var(--lg-ink); }

	.cpt-count {
		display: inline-block; margin-left: 5px;
		font-size: 10px; color: var(--slate-400); font-weight: 500;
	}

	.cpt.active .cpt-count { color: rgba(255,255,255,0.55); }


	.cat-swiper-wrap { position: relative; }

	.cat-swiper { padding: 2px 36px; }

	.cat-swiper .swiper-slide {
		width: 170px;
		height: auto;
	}


	.med-card {
		display: block; height: 100%;
		border: 1px solid var(--slate-200); border-radius: var(--radius);
		padding: 13px 14px 12px; cursor: pointer; background: #fff;
		transition: border-color 0.15s, background 0.15s, transform 0.15s;
		position: relative;
	}

	.med-card:hover {
		border-color: var(--slate-400); background: var(--slate-50);
		transform: translateY(-1px);
	}

	.med-card.active {
		border-color: var(--lg-teal); background: var(--teal-soft);
		box-shadow: inset 3px 0 0 var(--lg-teal);
	}

	.med-card h5 {
		margin: 0 0 8px 0; font-size: 12.5px;
		color: var(--lg-ink); font-weight: 600; line-height: 1.3;
		letter-spacing: -0.01em;
		display: flex; align-items: center; gap: 7px;
	}

	.med-card h5 i {
		font-size: 12px; color: var(--slate-400); width: 14px;
		text-align: center; flex-shrink: 0;
	}

	.med-card.active h5 i { color: var(--lg-teal); }

	.med-card .stat-row {
		display: flex; gap: 14px; align-items: flex-end;
	}

	.med-card .stat { min-width: 0; }

	.med-card .stat-val {
		font-size: 14px; font-weight: 700; color: var(--lg-ink);
		line-height: 1; font-variant-numeric: tabular-nums;
		letter-spacing: -0.01em;
	}

	.med-card .stat-label {
		font-size: 9px; color: var(--slate-500);
		text-transform: uppercase; letter-spacing: 0.05em;
		margin-top: 3px; font-weight: 500;
	}


	/* Swiper nav arrows, muted + inset */
	.cat-swiper-wrap .swiper-button-next,
	.cat-swiper-wrap .swiper-button-prev {
		color: var(--slate-500);
		width: 28px; height: 28px;
		background: #fff;
		border: 1px solid var(--slate-200);
		border-radius: 100px;
		top: 50%; margin-top: -14px;
		transition: color 0.12s, border-color 0.12s;
	}

	.cat-swiper-wrap .swiper-button-next:hover,
	.cat-swiper-wrap .swiper-button-prev:hover {
		color: var(--lg-ink); border-color: var(--slate-400);
	}

	.cat-swiper-wrap .swiper-button-next:after,
	.cat-swiper-wrap .swiper-button-prev:after {
		font-size: 12px; font-weight: 700;
	}

	.cat-swiper-wrap .swiper-button-disabled { opacity: 0.3; }


	/* Mask fade on left/right edges of the swiper strip */
	.cat-swiper-wrap::before,
	.cat-swiper-wrap::after {
		content: ''; position: absolute; top: 0; bottom: 0;
		width: 36px; pointer-events: none; z-index: 2;
	}

	.cat-swiper-wrap::before { left: 0; background: linear-gradient(to right, #fff 30%, transparent); }

	.cat-swiper-wrap::after { right: 0; background: linear-gradient(to left, #fff 30%, transparent); }


	.state-pill {
		display: inline-flex; align-items: center;
		padding: 5px 14px; border-radius: 100px;
		font-size: 12.5px; font-weight: 500;
		cursor: pointer; border: 1px solid var(--slate-200);
		background: #fff; color: var(--slate-600);
		margin: 2px; transition: all 0.12s;
	}

	.state-pill:hover { border-color: var(--lg-teal); color: var(--lg-teal); }

	.state-pill.active {
		background: var(--lg-teal); border-color: var(--lg-teal); color: #fff;
	}


	.gcc-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 6px; }

	.gcc-pill {
		display: inline-flex; align-items: center;
		padding: 4px 12px; border-radius: 100px;
		font-size: 11.5px; font-weight: 500;
		cursor: pointer; border: 1px solid var(--slate-200);
		background: #fff; color: var(--slate-600);
		transition: all 0.12s;
	}

	.gcc-pill:hover { border-color: var(--amber); color: var(--amber); }

	.gcc-pill.active {
		background: var(--amber); border-color: var(--amber); color: #fff;
	}


	/* Active context bar — sits at the top of the detail dashboard and
	   anchors the reader to the current category + scale. */
	.active-context {
		display: flex; align-items: center; gap: 14px;
		padding: 14px 18px;
		background: linear-gradient(135deg, var(--lg-ink) 0%, #1e293b 100%);
		color: #fff;
		border-radius: var(--radius-lg);
		margin-bottom: 18px;
		flex-wrap: wrap;
	}

	.active-context-icon {
		width: 44px; height: 44px; border-radius: 10px;
		background: rgba(255,255,255,0.1);
		display: flex; align-items: center; justify-content: center;
		font-size: 18px; color: var(--amber);
		flex-shrink: 0;
	}

	.active-context-body { flex: 1; min-width: 0; }

	.active-context-cat {
		font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
		color: #fff; line-height: 1.1;
	}

	.active-context-sub {
		font-size: 12px; color: rgba(255,255,255,0.65);
		margin-top: 3px; font-weight: 500;
	}

	.active-context-sub strong { color: #fff; font-weight: 600; }

	.active-context-meta {
		display: flex; gap: 16px; flex-wrap: wrap;
		font-size: 11px; color: rgba(255,255,255,0.7);
		font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
	}

	.active-context-meta .ac-pill {
		display: inline-flex; align-items: center; gap: 6px;
		padding: 4px 10px;
		background: rgba(255,255,255,0.08);
		border: 1px solid rgba(255,255,255,0.12);
		border-radius: 100px;
	}

	.active-context-meta .ac-pill i { font-size: 10px; opacity: 0.7; }


	/* Per-category summary paragraph at top of dashboard */
	.cat-summary {
		font-size: 14.5px; line-height: 1.65;
		color: var(--slate-700);
		padding: 2px 0 18px;
		border-bottom: 1px solid var(--slate-100);
		margin-bottom: 20px;
	}

	.cat-summary strong { color: var(--lg-ink); font-weight: 600; }

	.cat-summary .cs-metric {
		display: inline-block; padding: 1px 6px;
		background: var(--slate-100); border-radius: 4px;
		font-variant-numeric: tabular-nums; color: var(--lg-ink);
		font-weight: 600; font-size: 13.5px;
	}


	/* ====== Big benchmark table (mbt-*) ====== */
	.mbt-toolbar {
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
	}

	.mbt-toggle {
		display: inline-flex; gap: 2px; padding: 3px;
		background: var(--slate-100);
		border: 1px solid var(--slate-200);
		border-radius: 100px;
	}

	.mbt-btn {
		padding: 7px 16px; font-size: 12.5px; font-weight: 500;
		border: none; background: transparent;
		color: var(--slate-600); cursor: pointer;
		border-radius: 100px; transition: all 0.12s;
		font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
	}

	.mbt-btn:hover { color: var(--lg-ink); background: #fff; }

	.mbt-btn.active {
		background: var(--lg-ink); color: #fff;
	}

	.mbt-pro {
		display: inline-block; font-size: 9px; font-weight: 700;
		padding: 2px 6px; border-radius: 100px;
		background: var(--amber); color: #fff; letter-spacing: 0.06em;
	}

	.mbt-btn.active .mbt-pro { background: #fff; color: var(--amber); }

	.mbt-meta { font-size: 11.5px; color: var(--slate-500); }

	.mbt-meta span { font-weight: 600; color: var(--lg-ink); font-variant-numeric: tabular-nums; }


	.mbt-wrap {
		position: relative;
		border: 1px solid var(--slate-200);
		border-radius: var(--radius-lg);
		background: #fff; overflow: hidden;
	}

	.mbt-scroll {
		overflow-x: auto; overflow-y: auto;
		max-height: 560px;
		-webkit-overflow-scrolling: touch;
	}

	.mbt-table {
		border-collapse: separate; border-spacing: 0;
		font-size: 12px; font-variant-numeric: tabular-nums;
		min-width: 100%;
	}

	.mbt-table th,
	.mbt-table td {
		padding: 8px 10px;
		border-bottom: 1px solid var(--slate-100);
		white-space: nowrap;
	}

	.mbt-table thead th {
		background: var(--slate-50); color: var(--slate-500);
		font-size: 10px; font-weight: 600;
		text-transform: uppercase; letter-spacing: 0.05em;
		border-bottom: 1px solid var(--slate-200);
		position: sticky; top: 0; z-index: 3;
	}

	.mbt-table thead tr.mbt-group-row th {
		background: var(--slate-50);
		color: var(--lg-ink); font-weight: 700;
		font-size: 11px;
		border-bottom: 1px solid var(--slate-200);
		text-transform: none; letter-spacing: 0;
		text-align: right;
	}

	.mbt-table thead tr.mbt-group-row th.mbt-sticky {
		text-align: left;
	}

	.mbt-cat-h {
		display: inline-flex; align-items: center; gap: 6px;
		justify-content: flex-end;
		white-space: nowrap;
	}

	.mbt-cat-h i {
		font-size: 11px; color: var(--slate-400); width: 12px; text-align: center;
	}

	/* Force numeric sub-headers and cells to right-align */
	.mbt-table th.mbt-cat-count,
	.mbt-table td.mbt-cat-count,
	.mbt-table th.mbt-cat-per,
	.mbt-table td.mbt-cat-per,
	.mbt-table th.mbt-demo,
	.mbt-table td.mbt-demo {
		text-align: right;
	}

	.mbt-table th.mbt-cat-count { padding-right: 4px; }

	.mbt-table th.mbt-cat-per   { padding-left: 4px; }

	/* Sticky first column (region name) */
	.mbt-table th.mbt-sticky,
	.mbt-table td.mbt-sticky {
		position: sticky; left: 0;
		background: #fff; z-index: 2;
		border-right: 1px solid var(--slate-200);
		min-width: 180px; max-width: 240px;
		white-space: normal;
		text-align: left;
	}

	.mbt-table thead th.mbt-sticky { z-index: 4; background: var(--slate-50); }

	.mbt-table tbody tr:hover td { background: var(--slate-50); }

	.mbt-table tbody tr:hover td.mbt-sticky { background: var(--slate-50); }


	.mbt-region-name {
		font-weight: 600; color: var(--lg-ink); font-size: 12.5px;
		display: block; line-height: 1.25;
	}

	.mbt-region-sub {
		font-size: 10px; color: var(--slate-500); font-weight: 500;
		text-transform: uppercase; letter-spacing: 0.04em;
	}


	.mbt-demo { background: rgba(232, 240, 242, 0.25); }

	.mbt-demo-head {
		background: rgba(0, 95, 110, 0.08);
		color: var(--lg-teal);
	}

	.mbt-cat-pair {
		cursor: pointer;
		transition: background 0.1s;
	}

	.mbt-cat-pair:hover { background: var(--teal-soft); }

	.mbt-cat-pair.active { background: var(--teal-soft); box-shadow: inset 0 -2px 0 var(--lg-teal); }


	/* Clickable category column headers */
	.mbt-cat-head {
		cursor: pointer;
		transition: background 0.1s, color 0.1s;
	}

	.mbt-cat-head:hover { background: var(--teal-soft); color: var(--lg-teal); }

	.mbt-cat-head:hover .mbt-cat-h i { color: var(--lg-teal); }

	.mbt-cat-head.active {
		background: var(--teal-soft);
		color: var(--lg-teal);
		box-shadow: inset 0 -2px 0 var(--lg-teal);
	}

	.mbt-cat-head.active .mbt-cat-h i { color: var(--lg-teal); }

	.mbt-cat-head-locked { color: var(--slate-300); }

	.mbt-val { color: var(--lg-ink); font-weight: 600; }

	.mbt-val-muted { color: var(--slate-400); }

	.mbt-cat-count { text-align: right; padding-right: 4px; }

	.mbt-cat-per   { text-align: right; padding-left: 4px; }


	/* SA4 lock overlay */
	.mbt-lock {
		position: absolute; inset: 0;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(3px);
		display: flex; align-items: center; justify-content: center;
		z-index: 10; padding: 20px;
	}

	.mbt-lock-inner {
		text-align: center; max-width: 440px;
	}

	.mbt-lock-inner i {
		font-size: 28px; color: var(--amber);
		background: var(--amber-soft); padding: 14px;
		border-radius: 100px; margin-bottom: 12px;
	}

	.mbt-lock-inner h4 {
		font-size: 16px; font-weight: 700; color: var(--lg-ink);
		margin: 0 0 6px 0; letter-spacing: -0.01em;
	}

	.mbt-lock-inner p {
		font-size: 13px; color: var(--slate-500); margin: 0 0 16px 0;
		line-height: 1.55;
	}

	.mbt-lock-btn {
		display: inline-block; padding: 10px 22px;
		background: var(--amber); color: #fff; font-weight: 600;
		font-size: 13px; border-radius: 100px;
		text-decoration: none; transition: background 0.15s;
	}

	.mbt-lock-btn:hover { background: #d97706; color: #fff; }

	/* Dismiss (×) — top-right of the lock overlay so the user can hide the
	   gate and view the blurred SA4 preview underneath. */
	.mbt-lock-close {
		position: absolute; top: 10px; right: 12px;
		width: 32px; height: 32px;
		background: rgba(15,23,42,0.06);
		color: var(--slate-500, #64748b);
		border: none; border-radius: 50%;
		font: 700 18px/1 var(--font-sans);
		display: flex; align-items: center; justify-content: center;
		cursor: pointer;
		transition: background 0.15s, color 0.15s, transform 0.15s;
		z-index: 11;
	}

	.mbt-lock-close:hover {
		background: rgba(15,23,42,0.12);
		color: var(--lg-ink, #0f172a);
		transform: scale(1.06);
	}


	/* Cohort blocks — used in GCC Rankings to separate Greater vs Rest */
	.cohort-block {
		background: #fff;
		border: 1px solid var(--slate-200);
		border-radius: var(--radius);
		padding: 16px 18px 10px;
		height: 100%;
	}

	.cohort-head {
		display: flex; align-items: center; justify-content: space-between;
		gap: 10px; margin-bottom: 8px;
	}

	.cohort-badge {
		display: inline-flex; align-items: center; gap: 7px;
		padding: 5px 12px; font-size: 11.5px; font-weight: 600;
		border-radius: 100px; letter-spacing: 0.01em;
	}

	.cohort-badge i { font-size: 11px; }

	.cohort-badge--greater { background: #e8f0f2; color: var(--lg-teal); }

	.cohort-badge--rest    { background: #fff4e0; color: #b35c00; }

	.cohort-sub {
		font-size: 11px; color: var(--slate-400);
		text-transform: uppercase; letter-spacing: 0.05em;
	}

	.cohort-table { margin-top: 4px; }

	.cohort-table .comparison-table { font-size: 12px; }

	.cohort-table .comparison-table th,
	.cohort-table .comparison-table td { padding: 7px 9px; }


	/* Co-Location sub-block (inside Distance Analysis) */
	.coloc-block {
		margin-top: 32px;
		padding-top: 24px;
		border-top: 1px solid var(--slate-100);
	}

	.coloc-head { margin-bottom: 14px; }

	.coloc-title {
		font-size: 14px; font-weight: 700; color: var(--lg-ink);
		margin: 0 0 4px 0; letter-spacing: -0.01em;
	}

	.coloc-desc {
		font-size: 12.5px; color: var(--slate-500);
		margin: 0; line-height: 1.5;
	}

	.coloc-picker {
		display: flex; flex-wrap: wrap; gap: 6px;
		margin-bottom: 18px;
	}

	.coloc-pill {
		display: inline-flex; align-items: center; gap: 6px;
		padding: 6px 12px; border-radius: 100px;
		background: #fff; border: 1px solid var(--slate-200);
		color: var(--slate-600); font-size: 12px; font-weight: 500;
		cursor: pointer; transition: all 0.12s;
		font-family: inherit;
	}

	.coloc-pill i { font-size: 11px; color: var(--slate-400); }

	.coloc-pill .coloc-pill-pct {
		font-size: 10px; font-weight: 600;
		background: var(--slate-100); color: var(--slate-500);
		padding: 1px 6px; border-radius: 100px;
		font-variant-numeric: tabular-nums;
	}

	.coloc-pill:hover {
		border-color: var(--lg-teal); color: var(--lg-teal);
	}

	.coloc-pill:hover i { color: var(--lg-teal); }

	.coloc-pill.active {
		background: var(--lg-teal); border-color: var(--lg-teal); color: #fff;
	}

	.coloc-pill.active i { color: #fff; }

	.coloc-pill.active .coloc-pill-pct {
		background: rgba(255,255,255,0.18); color: #fff;
	}


	.coloc-result {
		background: var(--slate-50);
		border: 1px solid var(--slate-200);
		border-radius: var(--radius);
		padding: 18px 20px;
	}

	.coloc-result-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 14px;
		margin-bottom: 14px;
	}

	.coloc-stat {
		background: #fff;
		border: 1px solid var(--slate-200);
		border-radius: var(--radius);
		padding: 12px 14px;
	}

	.coloc-stat-label {
		font-size: 10px; color: var(--slate-500);
		text-transform: uppercase; letter-spacing: 0.06em;
		font-weight: 600; margin-bottom: 6px;
	}

	.coloc-stat-val {
		font-size: 22px; font-weight: 700; color: var(--lg-ink);
		font-variant-numeric: tabular-nums; line-height: 1.1;
	}

	.coloc-stat-note {
		font-size: 11px; color: var(--slate-500);
		margin-top: 4px;
	}

	.coloc-narrative {
		font-size: 13px; line-height: 1.6;
		color: var(--slate-700);
		margin: 0;
	}

	.coloc-narrative strong { color: var(--lg-ink); font-weight: 600; }


	/* FAQ accordion */
	.faq-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--slate-100); }

	.faq-list {
		display: flex; flex-direction: column; gap: 8px;
	}

	.faq-item {
		border: 1px solid var(--slate-200);
		border-radius: var(--radius);
		background: #fff;
		overflow: hidden;
		transition: border-color 0.15s;
	}

	.faq-item[open] { border-color: var(--slate-300); }

	.faq-item summary {
		list-style: none; cursor: pointer;
		padding: 14px 18px;
		font-size: 14px; font-weight: 600;
		color: var(--lg-ink);
		display: flex; align-items: center; justify-content: space-between;
		gap: 14px;
		letter-spacing: -0.005em;
	}

	.faq-item summary::-webkit-details-marker { display: none; }

	.faq-item summary:hover { background: var(--slate-50); }

	.faq-item[open] summary { background: var(--slate-50); border-bottom: 1px solid var(--slate-100); }

	.faq-chev {
		font-size: 11px; color: var(--slate-500);
		transition: transform 0.2s;
		flex-shrink: 0;
	}

	.faq-item[open] .faq-chev { transform: rotate(180deg); }

	.faq-a {
		padding: 14px 18px 18px;
		font-size: 13.5px; line-height: 1.65;
		color: var(--slate-700);
	}


	/* Stacked dashboard sections */
	.dash-section {
		padding: 28px 0;
		border-top: 1px solid var(--slate-100);
	}

	.dash-section:first-of-type { border-top: none; padding-top: 16px; }

	.dash-head { margin-bottom: 16px; }

	.dash-head h3 {
		font-size: 18px; font-weight: 700; color: var(--lg-ink);
		margin: 0 0 4px 0; letter-spacing: -0.015em;
		display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	}

	.dash-head .dash-cat {
		display: inline-flex; align-items: center; gap: 6px;
		font-size: 18px; font-weight: 800; color: var(--lg-teal);
		letter-spacing: -0.015em;
	}

	.dash-head .dash-cat::after {
		content: '·'; color: var(--slate-300); margin-left: 6px;
		font-weight: 400;
	}

	.dash-head .dash-title {
		font-size: 18px; font-weight: 600; color: var(--slate-700);
	}

	.dash-head p {
		font-size: 13px; color: var(--slate-500);
		margin: 0; letter-spacing: -0.005em;
	}

	.sec-scale-badge {
		display: inline-block; margin-left: 8px;
		padding: 2px 8px; border-radius: 100px;
		background: var(--slate-100); color: var(--slate-500);
		font-size: 10px; font-weight: 500;
		text-transform: uppercase; letter-spacing: 0.08em;
		vertical-align: middle;
	}


	/* ============================================
	   SA3 Explorer — horizontal-scroll category strip
	   + scope/metric pill toggles + single column histogram.
	   Pattern adapted from incolour/childcare.php .chart-tabs
	   ============================================ */
	.sa3x-tabs-wrap {
		position: relative;
		margin-bottom: 18px;
	}

	.sa3x-tabs {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		border-bottom: 2px solid var(--slate-200);
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-bottom: 1px; /* keep border visible above scrollbar */
	}

	.sa3x-tabs::-webkit-scrollbar { height: 6px; }

	.sa3x-tabs::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 3px; }

	.sa3x-tab {
		font-family: var(--f);
		font-size: 0.78rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--slate-500);
		padding: 0.7rem 1rem;
		cursor: pointer;
		border: none;
		background: none;
		border-bottom: 2px solid transparent;
		margin-bottom: -2px;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		transition: color 0.15s, border-color 0.15s;
	}

	.sa3x-tab i { font-size: 0.72rem; opacity: 0.7; }

	.sa3x-tab:hover { color: var(--lg-ink); }

	.sa3x-tab.active {
		color: var(--lg-teal);
		border-bottom-color: var(--lg-teal);
	}

	.sa3x-tab.active i { opacity: 1; }


	.sa3x-controls {
		display: flex;
		flex-wrap: wrap;
		gap: 18px;
		margin: 14px 0 12px 0;
		align-items: center;
	}

	.sa3x-control-group {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.sa3x-control-label {
		font-family: 'IBM Plex Mono', Consolas, monospace;
		font-size: 0.7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--slate-500);
	}

	.sa3x-pills {
		display: inline-flex;
		background: var(--slate-100);
		border-radius: 100px;
		padding: 3px;
		gap: 2px;
	}

	.sa3x-pill {
		border: none;
		background: transparent;
		color: var(--slate-600);
		font-family: var(--f);
		font-size: 0.78rem;
		font-weight: 600;
		padding: 6px 12px;
		border-radius: 100px;
		cursor: pointer;
		transition: background 0.15s, color 0.15s;
		white-space: nowrap;
	}

	.sa3x-pill:hover { color: var(--lg-ink); }

	.sa3x-pill.active {
		background: #fff;
		color: var(--lg-teal);
		box-shadow: 0 1px 2px rgba(15,23,42,0.08);
	}

	.sa3x-pill[disabled] {
		opacity: 0.45;
		cursor: not-allowed;
	}


	.sa3x-chart-wrap {
		min-height: 360px;
		position: relative;
	}

	.sa3x-empty {
		padding: 36px 20px;
		text-align: center;
		color: var(--slate-500);
		font-size: 0.92rem;
		background: var(--slate-50, #f8fafc);
		border: 1px dashed var(--slate-200);
		border-radius: 8px;
	}

	.sa3x-empty strong { color: var(--lg-ink); display: block; margin-bottom: 4px; font-size: 1rem; }

	.sa3x-meta {
		font-family: 'IBM Plex Mono', Consolas, monospace;
		font-size: 0.72rem;
		color: var(--slate-500);
		margin-top: 6px;
		text-align: right;
	}


	@media (max-width: 600px) {
		.sa3x-tab { padding: 0.65rem 0.85rem; font-size: 0.72rem; }
		.sa3x-controls { gap: 12px; }
		.sa3x-control-label { font-size: 0.65rem; }
		.sa3x-pill { padding: 5px 10px; font-size: 0.72rem; }
	}


	/* Detail view body — now a stand-alone rounded card */
	.detail-view-body {
		border: 1px solid var(--slate-200);
		border-radius: var(--radius-lg);
		padding: 24px;
		background: #fff;
		margin-top: 28px;
		margin-bottom: 24px;
	}


	/* Scrollspy sidebar layout — sticky TOC beside the dashboard body */
	.detail-layout {
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 28px;
		align-items: start;
		margin-top: 28px;
		margin-bottom: 24px;
	}

	.detail-layout .detail-view-body { margin-top: 0; margin-bottom: 0; }

	/* Sticky applied on the aside itself (not an inner wrapper) so it works
	   inside the grid — inner wrapper can't be sticky because the aside
	   collapses to content height with align-items:start */
	.scrollspy-nav {
		position: sticky; top: 88px;
		align-self: start; padding-top: 24px;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}

	.scrollspy-sticky { display: flex; flex-direction: column; gap: 18px; }

	.scrollspy-inner { border-left: 2px solid var(--slate-100); padding: 4px 0; }

	.scrollspy-gopro {
		border: 1px solid var(--slate-200);
		border-radius: 10px;
		overflow: hidden;
		background: #0f172a;
		/* Banner artwork is taller than 260px and was getting cropped at the
		   bottom — bump up so the CTA button sits inside the visible area. */
		min-height: 460px;
		display: flex;
	}

	.scrollspy-gopro iframe {
		width: 100%;
		min-height: 460px;
		height: 100%;
		border: 0;
		display: block;
		flex: 1;
	}

	@media (max-width: 991px) {
		.scrollspy-gopro,
		.scrollspy-gopro iframe { min-height: 320px; }
	}

	.scrollspy-label {
		font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
		text-transform: uppercase; color: var(--slate-500);
		padding: 0 0 10px 16px;
	}

	.scrollspy-link {
		display: flex; align-items: center; gap: 10px;
		padding: 7px 4px 7px 16px;
		margin-left: -2px;
		font-size: 13px; color: var(--slate-500); text-decoration: none;
		border-left: 2px solid transparent;
		line-height: 1.25;
		transition: color .2s, border-color .2s, background .2s;
	}

	.scrollspy-link:hover { color: var(--lg-teal); text-decoration: none; }

	.scrollspy-dot {
		width: 6px; height: 6px; border-radius: 50%;
		background: var(--slate-300); flex-shrink: 0;
		transition: background .2s, transform .2s;
	}

	.scrollspy-link.active {
		color: var(--lg-ink); font-weight: 600;
		border-left-color: var(--lg-teal);
		background: linear-gradient(90deg, rgba(16,185,129,0.06), transparent);
	}

	.scrollspy-link.active .scrollspy-dot { background: var(--lg-teal); transform: scale(1.4); }

	@media (max-width: 991px) {
		.detail-layout { grid-template-columns: 1fr; gap: 0; }
		.scrollspy-nav { display: none; }
	}

	/* Give each dash-section a bit of scroll offset so the sticky header doesn't cover it */
	.dash-section { scroll-margin-top: 100px; }


	/* ---- Correlations & Co-Location: shared styles ---- */
	/* "See full matrices" cross-link in the category-page section header */
	.corr-cross-link {
		font-weight: 600; color: var(--lg-teal); margin-left: 8px;
		text-decoration: none; white-space: nowrap;
	}

	.corr-cross-link:hover { text-decoration: underline; color: var(--lg-teal); }


	/* ---- Category page: ranked top-partners table ---- */
	.corr-takeaway {
		background: linear-gradient(90deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02));
		border-left: 3px solid var(--lg-teal);
		padding: 14px 16px; margin: 0 0 18px 0;
		border-radius: 6px;
		font-size: 14px; line-height: 1.5; color: var(--slate-700);
	}

	.corr-takeaway strong { color: var(--lg-ink); }

	.corr-ranked-table { font-size: 13px; width: 100%; }

	.corr-ranked-table thead th {
		font-size: 11px; font-weight: 600; text-transform: uppercase;
		letter-spacing: 0.04em; color: var(--slate-500);
		padding: 8px 10px; vertical-align: bottom;
		border-bottom: 1px solid var(--slate-200); white-space: nowrap;
	}

	.corr-ranked-table tbody td { padding: 10px; vertical-align: middle; }

	.corr-ranked-table .corr-rank {
		width: 28px; text-align: center; color: var(--slate-400);
		font-variant-numeric: tabular-nums; font-weight: 600;
	}

	.corr-ranked-table .corr-partner { font-weight: 600; color: var(--lg-ink); }

	.corr-partner-link { color: var(--lg-ink); text-decoration: none; border-bottom: 1px dotted var(--slate-300); }

	.corr-partner-link:hover { color: var(--lg-teal); border-bottom-color: var(--lg-teal); }

	.corr-ranked-table .corr-num {
		text-align: center; font-variant-numeric: tabular-nums;
		font-weight: 600; min-width: 64px;
	}

	.corr-fineprint {
		font-size: 12px; color: var(--slate-500); margin: 12px 0 0 0; line-height: 1.5;
	}

	.corr-fineprint a { color: var(--lg-teal); font-weight: 600; }

	@media (max-width: 480px) {
		.corr-ranked-table thead th { font-size: 10px; padding: 6px 6px; }
		.corr-ranked-table tbody td { padding: 8px 6px; }
		.corr-ranked-table .corr-num { min-width: 50px; font-size: 12px; }
	}


	/* ---- Index page: full matrices block ---- */
	.corr-index-body { display: flex; flex-direction: column; gap: 16px; }

	.corr-index-intro {
		font-size: 14px; color: var(--slate-600); line-height: 1.55; margin: 0 0 8px 0;
	}

	/* Narrative paragraph that sits above the "Same Area" matrix and quotes
	   real percentages pulled from the live SA2 co-location data. */
	.corr-area-narrative {
		background: rgba(16,185,129,0.06);
		border: 1px solid rgba(16,185,129,0.22);
		border-left: 4px solid #10b981;
		border-radius: 10px;
		padding: 14px 18px 12px;
		margin: 4px 0 4px;
	}

	.corr-area-narrative-lead {
		font-size: 14.5px;
		line-height: 1.55;
		color: var(--lg-ink, #0f172a);
		margin: 0 0 8px;
	}

	.corr-area-narrative-lead strong { color: #047857; font-weight: 700; }

	.corr-area-narrative-body {
		font-size: 13.5px;
		line-height: 1.55;
		color: var(--slate-700, #334155);
		margin: 0;
	}

	.corr-area-narrative-body em { color: var(--lg-ink, #0f172a); font-style: italic; }


	/* Picker row above the dynamic narrative body */
	.corr-narr-controls {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		margin: 0 0 10px;
	}

	.corr-narr-label {
		font: 600 0.85rem/1.2 var(--font-sans);
		color: var(--slate-700, #334155);
		margin: 0;
	}

	.corr-narr-picker {
		appearance: none;
		-webkit-appearance: none;
		background: #fff
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>")
			no-repeat right 10px center;
		border: 1.5px solid var(--slate-300, #cbd5e1);
		border-radius: 8px;
		padding: 7px 32px 7px 12px;
		font: 600 0.92rem/1.2 var(--font-sans);
		color: var(--lg-ink, #0f172a);
		cursor: pointer;
		min-width: 200px;
	}

	.corr-narr-picker:hover { border-color: var(--slate-400, #94a3b8); }

	.corr-narr-picker:focus {
		outline: none;
		border-color: #10b981;
		box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
	}

	.corr-narr-hint {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font: 500 0.78rem/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
		font-style: italic;
		margin-left: auto;
	}

	.corr-narr-hint i { color: var(--primary-color, #005F6E); font-size: 0.86rem; font-style: normal; }

	@media (max-width: 768px) { .corr-narr-hint { width: 100%; margin-left: 0; margin-top: 4px; } }

	@media (max-width: 768px) {
		.corr-area-narrative { padding: 12px 14px 10px; }
		.corr-area-narrative-lead { font-size: 13px; }
		.corr-area-narrative-body { font-size: 12.5px; }
		.corr-narr-picker { min-width: 0; flex: 1; }
	}


	/* Tabbed co-location matrices (Same Complex / Closeby / Same Area).
	   Same Complex is the default tab — the narrative above leads with it,
	   and the tightest scale is where the co-location signal is most
	   actionable for site-selection. */
	.corr-coloc-tabwrap {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: var(--radius-lg, 12px);
		box-shadow: 0 8px 22px rgba(15,23,42,0.04);
		overflow: hidden;
	}

	.corr-coloc-tabs {
		display: flex;
		gap: 4px;
		padding: 8px;
		background: var(--slate-50, #f8fafc);
		border-bottom: 1px solid var(--slate-200, #e2e8f0);
		flex-wrap: wrap;
	}

	.corr-coloc-tab {
		flex: 1 1 200px;
		min-width: 0;
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 12px 16px;
		border: 1.5px solid var(--slate-200, #e2e8f0);
		border-radius: 10px;
		background: #fff;
		color: var(--slate-600, #475569);
		font: 600 0.94rem/1.2 var(--font-sans);
		cursor: pointer;
		text-align: left;
		position: relative;
		transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .12s;
	}

	.corr-coloc-tab i {
		margin-right: 8px;
		color: var(--slate-400, #94a3b8);
		opacity: 0.95;
		transition: color .15s;
	}

	.corr-coloc-tab:hover {
		background: #fff;
		color: var(--lg-ink, #0f172a);
		border-color: var(--slate-300, #cbd5e1);
		box-shadow: 0 2px 6px rgba(15,23,42,0.06);
	}

	.corr-coloc-tab:hover i { color: var(--slate-600, #475569); }

	/* Active tab — stand out with a coloured top border + matching icon tint
	   so each scale's identity is reinforced (blue=Same Complex, amber=Closeby,
	   green=Same Area). Each scale also gets a subtle tinted background. */
	.corr-coloc-tab.active {
		background: #fff;
		color: var(--lg-ink, #0f172a);
		border-color: var(--slate-300, #cbd5e1);
		border-top-width: 3px;
		box-shadow: 0 6px 14px rgba(15,23,42,0.08);
		transform: translateY(-1px);
	}

	.corr-coloc-tab[data-target="corrIdxMb"].active  { border-top-color: #3b82f6; background: rgba(59,130,246,0.04); }

	.corr-coloc-tab[data-target="corrIdxMb"].active i  { color: #3b82f6; }

	.corr-coloc-tab[data-target="corrIdxSa1"].active { border-top-color: #f59e0b; background: rgba(245,158,11,0.05); }

	.corr-coloc-tab[data-target="corrIdxSa1"].active i { color: #f59e0b; }

	.corr-coloc-tab[data-target="corrIdxSa2"].active { border-top-color: #10b981; background: rgba(16,185,129,0.05); }

	.corr-coloc-tab[data-target="corrIdxSa2"].active i { color: #10b981; }

	.corr-coloc-tab-sub {
		display: block;
		font: 500 0.74rem/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
		margin-top: 2px;
		margin-left: 26px; /* aligns under the label, past the icon */
	}

	.corr-coloc-tab.active .corr-coloc-tab-sub { color: var(--slate-600, #475569); }


	.corr-coloc-panels { padding: 14px 16px 4px; }


	/* Click affordance + active-category highlight on the matrix headers.
	   The user can click any row label or column header to set that category
	   as the focus of the dynamic narrative below. */
	.corr-coloc-panel .corr-matrix-table th.corr-row[data-cat],
	.corr-coloc-panel .corr-matrix-table th.corr-col[data-cat],
	.corr-matrix-table th.corr-row[data-cat],
	.corr-matrix-table th.corr-col[data-cat] {
		cursor: pointer;
		user-select: none;
		transition: background-color .12s, color .12s;
	}

	.corr-matrix-table th.corr-row[data-cat]:hover,
	.corr-matrix-table th.corr-col[data-cat]:hover {
		background: rgba(0,95,110,0.08);
		color: var(--primary-color, #005F6E);
	}

	.corr-matrix-table th.corr-cat-selected {
		background: rgba(0,95,110,0.12);
		color: var(--primary-color, #005F6E);
		font-weight: 700;
		box-shadow: inset 3px 0 0 var(--primary-color, #005F6E);
	}

	.corr-matrix-table th.corr-col.corr-cat-selected {
		box-shadow: inset 0 -3px 0 var(--primary-color, #005F6E);
	}

	.corr-matrix-table tbody tr td.corr-cat-selected {
		outline: 1px solid rgba(0,95,110,0.35);
		outline-offset: -2px;
	}

	.corr-coloc-panel { display: none; }

	.corr-coloc-panel.active { display: block; }

	/* Inside the tab panels the `<details>` wrapper is redundant — the tab is
	   the only toggle the user needs. Hide the summary head and force the
	   matrix open so it always fills the active panel cleanly. */
	.corr-coloc-panel .corr-matrix { border: none; box-shadow: none; background: transparent; }

	.corr-coloc-panel .corr-matrix-head { display: none; }

	.corr-coloc-panel .corr-matrix-sub { margin-top: 0; }


	@media (max-width: 768px) {
		.corr-coloc-tabs { gap: 2px; padding: 6px; }
		.corr-coloc-tab { flex: 1 1 100%; padding: 8px 10px; font-size: 0.84rem; }
		.corr-coloc-tab-sub { font-size: 0.72rem; margin-left: 22px; }
		.corr-coloc-panels { padding: 10px 10px 2px; }
	}

	.corr-matrix {
		border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
		background: #fff; overflow: hidden;
	}

	.corr-matrix-head {
		list-style: none; cursor: pointer;
		padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
		gap: 12px; background: var(--slate-50);
		border-bottom: 1px solid var(--slate-200);
	}

	.corr-matrix-head::-webkit-details-marker { display: none; }

	.corr-matrix-title { font-size: 15px; font-weight: 700; color: var(--lg-ink); letter-spacing: -0.01em; }

	.corr-matrix-toggle {
		width: 14px; height: 14px; border-right: 2px solid var(--slate-500);
		border-bottom: 2px solid var(--slate-500); transform: rotate(45deg);
		transition: transform .2s; flex-shrink: 0; opacity: 0.6;
	}

	.corr-matrix[open] .corr-matrix-toggle { transform: rotate(-135deg); }

	.corr-matrix-sub {
		font-size: 12.5px; color: var(--slate-500); margin: 0;
		padding: 12px 18px 0 18px; line-height: 1.5;
	}

	.corr-matrix-wrap { padding: 12px 18px 18px 18px; overflow-x: auto; }

	.corr-matrix-table {
		font-size: 11px; border-collapse: separate; border-spacing: 0;
		width: 100%; min-width: 560px;
	}

	.corr-matrix-table th.corr-col {
		max-width: 30px; font-size: 10px; font-weight: 600;
		writing-mode: vertical-lr; transform: rotate(180deg);
		padding: 4px 2px; vertical-align: bottom;
		color: var(--slate-600);
		transition: color .15s, background .15s;
	}

	.corr-matrix-table th.corr-row {
		text-align: left; font-weight: 600; font-size: 11px;
		padding: 4px 8px 4px 4px; color: var(--slate-700);
		white-space: nowrap;
		transition: color .15s, background .15s;
	}

	.corr-matrix-table .corr-cell {
		text-align: center; font-size: 10px; padding: 5px 4px;
		font-variant-numeric: tabular-nums;
		transition: outline-color .15s;
	}

	.corr-matrix-table .corr-na { background: #f5f5f7; color: var(--slate-400); }


	/* Cross-matrix hover sync */
	.corr-matrix-table tbody tr.corr-row-hover { outline: 2px solid rgba(16,185,129,0.55); outline-offset: -1px; }

	.corr-matrix-table th.corr-axis-hover { color: var(--lg-teal); background: rgba(16,185,129,0.10); }


	/* Mobile: collapse the matrices by default — 4 wide tables stacked at
	   390px is too dense to scroll past. User taps to expand. */
	@media (max-width: 767px) {
		.corr-matrix:not([data-keep-open]) { /* collapsible behaviour intact */ }
		.corr-index-intro { font-size: 13px; }
	}


	/* Insight strip: at-a-glance takeaways for the selected category */
	.insight-strip {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 10px;
		margin-bottom: 22px;
		padding-bottom: 22px;
		border-bottom: 1px solid var(--slate-100);
	}

	.insight-card {
		display: flex; align-items: flex-start; gap: 11px;
		padding: 12px 14px;
		background: var(--slate-50);
		border: 1px solid var(--slate-200);
		border-radius: var(--radius);
	}

	.insight-card .ic-icon {
		width: 32px; height: 32px; border-radius: 8px;
		display: flex; align-items: center; justify-content: center;
		flex-shrink: 0; font-size: 13px;
	}

	.insight-card.positive .ic-icon { background: #dcfce7; color: #16a34a; }

	.insight-card.negative .ic-icon { background: #fee2e2; color: #dc2626; }

	.insight-card.info     .ic-icon { background: #e0f2fe; color: #0284c7; }

	.insight-card.amber    .ic-icon { background: #fef3c7; color: #d97706; }

	.insight-card .ic-body { min-width: 0; }

	.insight-card .ic-label {
		font-size: 10px; text-transform: uppercase;
		letter-spacing: 0.07em; color: var(--slate-500);
		font-weight: 600; margin-bottom: 3px;
	}

	.insight-card .ic-val {
		font-size: 15px; font-weight: 700; color: var(--lg-ink);
		line-height: 1.2; font-variant-numeric: tabular-nums;
		letter-spacing: -0.01em;
	}

	.insight-card .ic-sub {
		font-size: 11px; color: var(--slate-500); margin-top: 2px;
		font-variant-numeric: tabular-nums;
	}


	/* ============================================
	   Category Key Insights — replaces the legacy 4-card insight strip with
	   a data-rich green callout that quotes live numbers (best/worst access
	   with %, top correlation partner, top mesh-block co-loc partner, gap
	   count, median nearest distance). Mirrors the home page narrative
	   pattern but anchored to the active category.
	   ============================================ */
	.cat-insights {
		background: rgba(16,185,129,0.06);
		border: 1px solid rgba(16,185,129,0.22);
		border-left: 4px solid #10b981;
		border-radius: 12px;
		padding: 16px 20px 14px;
		margin-bottom: 22px;
	}

	.cat-insights-head {
		display: flex; align-items: center; justify-content: space-between;
		gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
	}

	.cat-insights-kicker {
		font: 700 0.92rem/1.2 var(--font-sans);
		color: #047857;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		display: inline-flex; align-items: center; gap: 8px;
	}

	.cat-insights-kicker i { font-size: 0.95rem; }

	.cat-insights-meta {
		display: flex; gap: 6px; flex-wrap: wrap;
	}

	.cat-insights-pill {
		display: inline-flex; align-items: center; gap: 5px;
		padding: 4px 10px;
		font: 600 0.78rem/1 var(--font-sans);
		color: var(--slate-700, #334155);
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 999px;
		font-variant-numeric: tabular-nums;
	}

	.cat-insights-pill i { color: var(--slate-400, #94a3b8); font-size: 0.78rem; }

	.cat-insights-body {
		font: 400 0.96rem/1.6 var(--font-sans);
		color: var(--lg-ink, #0f172a);
		margin: 0;
	}

	.cat-insights-body strong { color: #047857; font-weight: 700; font-variant-numeric: tabular-nums; }

	@media (max-width: 768px) {
		.cat-insights { padding: 13px 15px 11px; }
		.cat-insights-body { font-size: 0.88rem; line-height: 1.55; }
		.cat-insights-pill { font-size: 0.72rem; }
	}


	.locked-overlay { position: relative; border: 1px dashed var(--slate-300); border-radius: var(--radius); }

	.locked-overlay::after {
		content: '\f023  Login required for SA4+ detail';
		font-family: 'Font Awesome 6 Free', 'FontAwesome';
		position: absolute; inset: 0;
		background: rgba(255,255,255,0.94);
		display: flex; align-items: center; justify-content: center;
		font-size: 13px; color: var(--slate-500);
		border-radius: var(--radius); z-index: 10; font-weight: 500;
	}


	.summary-stat {
		text-align: left; padding: 16px 18px; border-radius: var(--radius);
		background: #fff; border: 1px solid var(--slate-200);
		transition: border-color 0.15s;
	}

	.summary-stat:hover { border-color: var(--slate-300); }

	.summary-stat .val {
		font-size: 26px; font-weight: 700; line-height: 1.1;
		color: var(--lg-ink); font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
	}

	.summary-stat .lbl {
		font-size: 11px; color: var(--slate-500);
		text-transform: uppercase; letter-spacing: 0.06em;
		margin-top: 6px; font-weight: 500;
	}

	/* All value colours collapse to the ink colour; semantic tinting can still
	   be opted into by the individual stat via inline style if needed. */
	.val-green, .val-orange, .val-blue, .val-purple { color: var(--lg-ink); }


	.chart-container { min-height: 350px; margin: 16px 0; }

	/* Pair of equal-height chart cells (used for the State bar + donut combo
	   in #sec-state). Both cells flex to 380px so the ApexCharts renderers
	   produce visually-matching rectangles regardless of legend placement. */
	/* Equal-height chart cells: shared 440px so the donut chart's bottom-
	   placed legend (8 states wraps to 2 rows) doesn't get clipped, and
	   the bar chart's axis labels still have room. */
	.chart-equal { height: 520px; width: 100%; overflow: hidden; }

	@media (max-width: 768px) {
		/* Stack the State bar + donut pair on phones with their own height
		   each rather than sharing one — the donut needs less vertical real
		   estate when its legend wraps below it on narrow viewports. */
		.chart-equal { height: 460px; }
	}


	/* ============================================
	   MOBILE FIT — category page (added after audit)
	   The dashboard section bodies, summary-stat tiles and percentile bar
	   all needed targeted shrinking on narrow viewports. Truncations were
	   showing as "PERCENTI..." labels and "GP — Pop / Provider by S..."
	   chart titles on iPhone-class screens.
	   ============================================ */
	@media (max-width: 768px) {
		.detail-view-body { padding: 12px 12px; }
		.dash-section .dash-body { padding-left: 0; padding-right: 0; }
		/* Percentile-band tiles in Distance Analysis — give them more
		   horizontal breathing room and stop their labels truncating. */
		.summary-stat { padding: 12px 10px; min-height: 0; }
		.summary-stat .val { font-size: 18px; }
		.summary-stat .lbl { font-size: 9.5px; letter-spacing: 0.04em; }
		/* Force the National Snapshot KPI strip into a single-column stack
		   on narrow viewports — the 5-up grid was crushing values like
		   "1 : 3,589" against tile edges. */
		.med-cat-kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
		.med-cat-kpi { padding: 10px 12px; }
		.med-cat-kpi .kv { font-size: 1.05rem; }
		/* Percentile snapshot bar — labels under the bar overflow on
		   narrow widths, so reduce font + tighten label gaps. */
		.med-cat-pctbar { padding: 10px 10px 16px; }
		.pctbar-title { font-size: 0.74rem; line-height: 1.4; }
		.pctbar-meta  { font-size: 0.62rem; }
		.pctbar-lab   { font-size: 0.62rem; }
		.pctbar-lab small { font-size: 0.55rem; }
		/* The "By Region" leaderboard — remove the count column at very
		   small widths so the popPer column can breathe. */
		.cat-leaderboard-row {
			grid-template-columns: 22px 1fr 88px;
			padding: 10px 12px;
			gap: 10px;
		}
		.cat-leaderboard-count { display: none; }
		.cat-leaderboard-popper { font-size: 0.92rem; }
		.cat-leaderboard-name { font-size: 0.85rem; }
		.cat-leaderboard-name small { font-size: 10px; }
		/* Active context bar — let it span full width and sit nicely. */
		.active-context { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
		.active-context-icon { width: 36px; height: 36px; font-size: 16px; }
		.active-context-cat { font-size: 0.95rem; }
		.active-context-sub { font-size: 0.78rem; }
		.active-context-meta { gap: 4px; }
		.active-context-meta .ac-pill { font-size: 0.7rem; padding: 3px 8px; }
		/* Cat insights callout — pills wrap below the kicker on phones
		   so the lead text doesn't get crushed. */
		.cat-insights-head { flex-direction: column; align-items: flex-start; gap: 6px; }
		.cat-insights-pill { font-size: 0.68rem; padding: 3px 8px; }
		/* mbt-style scale toggle on the leaderboard — the SA4 PRO badge
		   wraps to its own line on small widths if not constrained. */
		.cat-leaderboard-toolbar .mbt-toggle { flex-wrap: wrap; gap: 4px; }
		.cat-leaderboard-toolbar .mbt-btn { padding: 6px 10px; font-size: 12px; }
		.cat-leaderboard-toolbar .mbt-pro { font-size: 9px; padding: 1px 4px; }
	}

	@media (max-width: 480px) {
		/* Very narrow phones — final squeeze. */
		.med-cat-kpi-strip { grid-template-columns: 1fr; }
		.summary-stat .val { font-size: 16px; }
		.dash-head h3 { font-size: 1.05rem; }
		.dash-head p { font-size: 0.82rem; }
	}


	/* Plain-English explainer block above the Opportunity Analysis chart.
	   Scoped to its own class (.gap-explainer is legacy — the metric is
	   user-labelled "opportunity score") so page typography isn't affected. */
	.gap-explainer {
		background: var(--slate-50, #f8fafc);
		border: 1px solid var(--slate-100, #f1f5f9);
		border-left: 3px solid var(--primary-color, #005F6E);
		border-radius: 8px;
		padding: 12px 16px;
		margin: 0 0 18px;
	}

	.gap-explainer p {
		font: 400 0.92rem/1.55 var(--font-sans);
		color: var(--slate-700, #334155);
		margin: 0 0 8px;
	}

	.gap-explainer p strong { color: var(--lg-ink, #0f172a); font-weight: 700; }

	.gap-explainer-list {
		margin: 0; padding: 0 0 0 1.1rem;
		font: 400 0.86rem/1.55 var(--font-sans);
		color: var(--slate-700, #334155);
	}

	.gap-explainer-list li { margin-bottom: 3px; }

	.gap-explainer-list strong { color: var(--lg-ink, #0f172a); }

	.gap-explainer-list em { color: var(--slate-600, #475569); font-style: italic; }

	@media (max-width: 768px) {
		.gap-explainer { padding: 10px 12px; }
		.gap-explainer p, .gap-explainer-list { font-size: 0.82rem; }
	}


	/* ============================================
	   Final mobile override — must come AFTER the unconditional
	   .detail-layout { grid-template-columns: 220px ... } rule that
	   sits later in the file and otherwise wins the cascade.
	   Forces the dashboard grid into a single column on tablets and
	   below so the dash-section content uses the full viewport width
	   (charts, tables, percentile tiles all need this to fit).
	   ============================================ */
	@media (max-width: 991px) {
		.detail-layout { grid-template-columns: 1fr; gap: 0; }
		.detail-view-body { padding: 14px; }
		.dash-section { padding: 18px 0; }
	}


	.comparison-table { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; }

	.comparison-table th {
		background: var(--slate-50); padding: 10px 12px; font-size: 11px;
		text-transform: uppercase; color: var(--slate-500);
		cursor: pointer; white-space: nowrap;
		border-bottom: 1px solid var(--slate-200);
		letter-spacing: 0.06em; font-weight: 600;
	}

	.comparison-table th:hover { background: var(--slate-100); color: var(--lg-ink); }

	.comparison-table td {
		padding: 10px 12px; border-bottom: 1px solid var(--slate-100);
		font-variant-numeric: tabular-nums;
	}

	.comparison-table tr:hover td { background: var(--slate-50); }


	/* Opportunity Summary table — sits in a narrow col-md-4 next to the chart.
	   Wrap container scrolls if the table can't shrink enough; tighter cell
	   padding lets it fit at most desktop widths without scrolling. */
	.opp-summary-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

	.comparison-table.opp-summary-tbl { font-size: 12px; }

	.comparison-table.opp-summary-tbl th { padding: 7px 5px; font-size: 10px; letter-spacing: 0.03em; white-space: normal; line-height: 1.2; }

	.comparison-table.opp-summary-tbl td { padding: 6px 5px; }


	.cta-box {
		background: #fff;
		color: var(--lg-ink);
		border: 1px solid var(--slate-200);
		border-left: 3px solid var(--amber);
		border-radius: var(--radius-lg);
		padding: 24px 28px;
		margin: 24px 0;
	}

	.cta-box h4 {
		color: var(--lg-ink); margin: 0 0 6px 0;
		font-size: 1.1rem; font-weight: 700;
		letter-spacing: -0.01em;
	}

	.cta-box p {
		margin: 0; color: var(--slate-600);
		font-size: 14px; line-height: 1.55;
	}

	.cta-box a {
		color: var(--lg-teal); font-weight: 600; text-decoration: none;
		border-bottom: 1px solid transparent; transition: border-color 0.15s;
	}

	.cta-box a:hover { border-bottom-color: var(--lg-teal); }


	@media (max-width: 768px) {
		.icon-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
		.med-card { padding:12px 10px; }
		.med-card .stat-val { font-size:15px; }
		.summary-stat .val { font-size:22px; }
		.section-nav { padding:6px 12px; font-size:12px; }
	}

	.med-content {
		padding-top: 0;
	}

	.med-content .section {
		padding: 2rem 0 0.75rem;
	}

	.med-content .section > .container {
		max-width: 1240px;
	}

	.med-section-title {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
	}

	.med-section-title h2 {
		font-size: 1.42rem;
	}

	#nationalSummary {
		row-gap: 14px;
	}

	.summary-stat {
		box-shadow: 0 10px 28px rgba(15,23,42,0.045);
	}

	.summary-stat:hover {
		transform: translateY(-1px);
		box-shadow: 0 14px 34px rgba(15,23,42,0.07);
	}

	.mbt-panel {
		border: 1px solid var(--slate-200);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 18px 46px rgba(15,23,42,0.07);
		overflow: hidden;
	}

	.mbt-panel-head {
		padding: 16px 18px 12px;
		border-bottom: 1px solid var(--slate-100);
		background: linear-gradient(180deg, #fff, #fbfdff);
	}

	.mbt-toolbar {
		margin-bottom: 12px;
	}

	.mbt-tools {
		display: grid;
		grid-template-columns: minmax(260px, 1fr) auto;
		gap: 12px;
		align-items: center;
	}

	.mbt-search {
		position: relative;
		max-width: 520px;
	}

	.mbt-search i {
		position: absolute;
		left: 13px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--slate-400);
		font-size: 13px;
		pointer-events: none;
	}

	.mbt-search input {
		width: 100%;
		min-height: 40px;
		border: 1px solid var(--slate-200);
		border-radius: 8px;
		padding: 9px 12px 9px 36px;
		font: 500 13px/1.2 var(--font-sans);
		color: var(--lg-ink);
		background: #fff;
		outline: none;
	}

	.mbt-search input:focus {
		border-color: var(--lg-teal);
		box-shadow: 0 0 0 3px rgba(0,95,110,0.1);
	}

	.mbt-tool-hint {
		font-size: 12px;
		color: var(--slate-500);
		text-align: right;
	}

	.mbt-wrap {
		border: 0;
		border-radius: 0;
	}

	.mbt-scroll {
		max-height: 620px;
	}

	.mbt-table th,
	.mbt-table td {
		padding: 9px 11px;
	}

	.mbt-table tbody tr {
		transition: opacity .12s ease;
	}

	.mbt-table tbody tr.mbt-row-hidden {
		display: none;
	}

	.mbt-no-results {
		display: none;
		padding: 22px;
		text-align: center;
		color: var(--slate-500);
		font-size: 13px;
		border-top: 1px solid var(--slate-100);
	}

	.mbt-no-results i {
		color: var(--amber);
		margin-right: 6px;
	}

	.detail-view-body {
		box-shadow: 0 18px 46px rgba(15,23,42,0.06);
	}

	.chart-container {
		background: #fff;
		border: 1px solid var(--slate-100);
		border-radius: 8px;
		padding: 8px;
	}

	.comparison-table {
		background: #fff;
		border: 1px solid var(--slate-100);
		border-radius: 8px;
		overflow: hidden;
	}

	.cta-block {
		border-radius: 12px;
	}

	@media (max-width: 768px) {
		.eco-hero-actions {
			align-items: stretch;
		}
		.eco-hero-action {
			width: 100%;
		}
		.med-section-title {
			display: block;
		}
		.mbt-panel-head {
			padding: 14px;
		}
		.mbt-tools {
			grid-template-columns: 1fr;
		}
		.mbt-tool-hint {
			text-align: left;
		}
		.mbt-toggle {
			width: 100%;
			overflow-x: auto;
			justify-content: flex-start;
		}
		.mbt-btn {
			flex: 0 0 auto;
		}
	}


	/* ============================================
	   INDEX-ONLY: sector card grid + cross-sector rankings
	   ============================================ */
	.med-sector-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 14px;
	}

	/* CLS fix (#1): reserve the height of the JS-filled index sections so filling
	   them (even the early render in #2 lands just after first paint on this heavy
	   page) doesn't shove the page. min-heights are the measured rendered heights
	   per column-count band (1-col ≤768 · 2-col 780-799 · 3-col 800-1039 ·
	   4-col ≥1040), reserving each band's max so it never under-reserves. */
	#sectorGrid      { min-height: 4350px; }
   /* 1 col × 24 cards */
	#crossRankings   { min-height: 740px;  }
   /* stacked */
	#nationalSummary { min-height: 255px;  }
   /* 2-up stat cards */
	@media (min-width: 768px)  { #nationalSummary { min-height: 125px; } }

	@media (min-width: 780px)  { #sectorGrid { min-height: 2220px; } #crossRankings { min-height: 365px; } }

	@media (min-width: 800px)  { #sectorGrid { min-height: 1540px; } }

	@media (min-width: 1040px) { #sectorGrid { min-height: 1170px; } }

	.med-sector-card {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 18px 18px 16px;
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 12px;
		box-shadow: 0 8px 22px rgba(15,23,42,0.04);
		text-decoration: none;
		color: inherit;
		transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
		position: relative;
		overflow: hidden;
	}

	.med-sector-card::before {
		content: "";
		position: absolute;
		left: 0; top: 0; bottom: 0;
		width: 4px;
		background: var(--mscc, var(--primary-color));
		opacity: 0.85;
	}

	.med-sector-card:hover, .med-sector-card:focus-visible {
		transform: translateY(-3px);
		box-shadow: 0 18px 38px rgba(15,23,42,0.10);
		border-color: rgba(0,95,110,0.35);
		text-decoration: none;
		color: inherit;
		outline: none;
	}

	.med-sector-card-head {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.med-sector-card-icon {
		width: 38px; height: 38px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--msci, rgba(0,95,110,0.1));
		color: var(--mscc, var(--primary-color));
		font-size: 16px;
		flex: 0 0 38px;
	}

	.med-sector-card-name {
		font: 700 0.98rem/1.2 var(--font-sans);
		color: var(--lg-ink, #0f172a);
	}

	.med-sector-card-group {
		font: 500 11px/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
		letter-spacing: 0.02em;
		text-transform: uppercase;
		margin-top: 2px;
	}

	.med-sector-card-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 12px;
		padding-top: 4px;
		border-top: 1px solid var(--slate-100, #f1f5f9);
		margin-top: 4px;
	}

	.med-sector-card-stat .ssv {
		font: 700 1.05rem/1.1 var(--font-sans);
		color: var(--lg-ink, #0f172a);
	}

	.med-sector-card-stat .ssl {
		font: 500 11px/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
		margin-top: 2px;
	}

	.med-sector-card-cta {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font: 600 12px/1 var(--font-sans);
		color: var(--mscc, var(--primary-color));
		margin-top: 4px;
	}

	.med-sector-card-cta i {
		font-size: 10px;
		transition: transform .14s ease;
	}

	.med-sector-card:hover .med-sector-card-cta i {
		transform: translateX(3px);
	}


	.med-cross-rankings {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.med-cross-rank-col {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 12px;
		padding: 16px 18px;
		box-shadow: 0 8px 22px rgba(15,23,42,0.04);
	}

	.med-cross-rank-col h3 {
		font: 700 0.98rem/1.2 var(--font-sans);
		margin: 0 0 12px 0;
		color: var(--lg-ink, #0f172a);
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.med-cross-rank-col.best h3 i { color: #16a34a; }

	.med-cross-rank-col.tightest h3 i { color: #dc2626; }

	.med-cross-rank-list { list-style: none; padding: 0; margin: 0; }

	.med-cross-rank-list li {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 0;
		border-bottom: 1px solid var(--slate-100, #f1f5f9);
		font: 500 0.9rem/1.2 var(--font-sans);
	}

	.med-cross-rank-list li:last-child { border-bottom: none; }

	.med-cross-rank-list .mcr-pos {
		font: 700 12px/1 var(--font-sans);
		color: var(--slate-500, #64748b);
		width: 22px;
		flex: 0 0 22px;
	}

	.med-cross-rank-list .mcr-name {
		flex: 1;
		color: var(--lg-ink, #0f172a);
		text-decoration: none;
	}

	.med-cross-rank-list .mcr-name:hover { color: var(--primary-color); text-decoration: underline; }

	.med-cross-rank-list .mcr-val {
		font: 700 0.92rem/1.1 var(--font-sans);
		color: var(--lg-ink, #0f172a);
	}

	.med-cross-rank-list .mcr-val small {
		font: 500 11px/1.1 var(--font-sans);
		color: var(--slate-500, #64748b);
	}


	/* Scale-tag pill (e.g. "— National" / "— Metro") inside section titles.
	   Used by both the catchment treemap and the SA3 hist swiper to mirror
	   the active state of the Regional Benchmark Table scale toggle. */
	.med-scale-tag {
		font-weight: 500;
		color: var(--slate-500, #64748b);
		font-size: 0.78em;
		letter-spacing: 0.01em;
	}


	/* ============================================
	   CATCHMENT TREEMAP — index page
	   ============================================ */
	.med-catchment-card {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 14px;
		padding: 14px;
		box-shadow: 0 8px 22px rgba(15,23,42,0.04);
	}

	#catchmentTreemap { min-height: 520px; }

	#catchmentTreemap .apexcharts-treemap-rect { cursor: pointer; transition: opacity .15s; }

	#catchmentTreemap .apexcharts-treemap-rect:hover { opacity: 0.88; }


	/* ============================================
	   SA3 HIST SWIPER — index page
	   ============================================ */
	.med-sa3hist-card {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 14px;
		padding: 16px 18px 18px;
		box-shadow: 0 8px 22px rgba(15,23,42,0.04);
	}

	.med-sa3hist-swiper {
		position: relative;
		padding: 4px 36px;
		margin: 0 -4px 14px;
		border-bottom: 1px solid var(--slate-100, #f1f5f9);
	}

	.med-sa3hist-swiper .swiper-wrapper { align-items: stretch; }

	.med-sa3hist-tab {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 9px 14px;
		border-radius: 999px;
		border: 1px solid transparent;
		background: transparent;
		color: var(--slate-500, #64748b);
		font: 600 0.86rem/1 var(--font-sans);
		cursor: pointer;
		white-space: nowrap;
		width: auto;
		user-select: none;
		transition: background .15s, color .15s, border-color .15s;
	}

	.med-sa3hist-tab i { font-size: 0.92rem; }

	.med-sa3hist-tab:hover { color: var(--lg-ink, #0f172a); background: var(--slate-50, #f8fafc); }

	.med-sa3hist-tab.active {
		color: #fff;
		border-color: transparent;
		box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	}

	.med-sa3hist-swiper .swiper-button-prev,
	.med-sa3hist-swiper .swiper-button-next {
		color: var(--slate-500, #64748b);
		width: 28px;
		height: 28px;
		margin-top: -14px;
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 999px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	}

	.med-sa3hist-swiper .swiper-button-prev::after,
	.med-sa3hist-swiper .swiper-button-next::after { font-size: 12px; font-weight: 700; }


	.med-sa3hist-toggle {
		display: inline-flex;
		gap: 4px;
		padding: 4px;
		background: var(--slate-100, #f1f5f9);
		border-radius: 999px;
		margin-bottom: 12px;
	}

	.med-sa3hist-toggle button {
		border: none;
		background: transparent;
		padding: 7px 14px;
		border-radius: 999px;
		font: 600 0.84rem/1 var(--font-sans);
		color: var(--slate-500, #64748b);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.med-sa3hist-toggle button.active {
		background: #fff;
		color: var(--lg-ink, #0f172a);
		box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	}


	.med-sa3hist-titlebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 4px 0 6px;
		flex-wrap: wrap;
	}

	.med-sa3hist-current-cat {
		font: 700 1.02rem/1.2 var(--font-sans);
		color: var(--lg-ink, #0f172a);
	}

	.med-sa3hist-current-metric {
		font: 500 0.82rem/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
		margin-top: 2px;
	}

	.med-sa3hist-deeplink {
		font: 600 0.82rem/1 var(--font-sans);
		color: var(--primary-color);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		border-radius: 8px;
		background: rgba(0,95,110,0.06);
		transition: background .15s;
	}

	.med-sa3hist-deeplink:hover { background: rgba(0,95,110,0.12); color: var(--primary-color); }

	#sa3HistChart { min-height: 380px; }


	@media (max-width: 768px) {
		.med-sa3hist-card { padding: 12px; }
		.med-sa3hist-tab { padding: 7px 11px; font-size: 0.78rem; }
		.med-sa3hist-toggle button { padding: 6px 10px; font-size: 0.78rem; }
		.med-sa3hist-current-cat { font-size: 0.96rem; }
		#catchmentTreemap { min-height: 380px; }
		#sa3HistChart { min-height: 320px; }
	}


	/* ============================================
	   CATEGORY-ONLY: above-the-fold narrative + KPI strip
	   ============================================ */
	.med-cat-narrative {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 14px;
		padding: 22px 24px 18px;
		box-shadow: 0 12px 34px rgba(15,23,42,0.05);
		position: relative;
	}

	.med-cat-narrative-head {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		margin-bottom: 12px;
	}

	.med-cat-narrative-head h2 {
		font: 700 1.42rem/1.2 var(--font-sans);
		margin: 0;
		color: var(--lg-ink, #0f172a);
	}

	.med-cat-icon-chip {
		width: 52px; height: 52px;
		border-radius: 12px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--msci, rgba(0,95,110,0.1));
		color: var(--mscc, var(--primary-color));
		font-size: 22px;
		flex: 0 0 52px;
	}

	.med-cat-group-tag {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font: 600 11px/1 var(--font-sans);
		color: var(--mscc, var(--primary-color));
		background: var(--msci, rgba(0,95,110,0.1));
		padding: 4px 9px;
		border-radius: 999px;
		margin-top: 6px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.med-cat-narrative-body {
		font: 400 0.96rem/1.6 var(--font-sans);
		color: var(--slate-700, #334155);
		margin: 4px 0 16px;
	}

	.med-cat-kpi-strip {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 10px;
		padding-top: 12px;
		border-top: 1px solid var(--slate-100, #f1f5f9);
	}

	.med-cat-kpi {
		padding: 8px 4px;
	}

	.med-cat-kpi .kv {
		font: 800 1.18rem/1.1 var(--font-sans);
		color: var(--lg-ink, #0f172a);
	}

	.med-cat-kpi .kv.kv-blue { color: #1d4ed8; }

	.med-cat-kpi .kv.kv-green { color: #15803d; }

	.med-cat-kpi .kv.kv-orange { color: var(--accent-color); }

	.med-cat-kpi .kv.kv-red { color: #b91c1c; }

	.med-cat-kpi .kv.kv-teal { color: var(--primary-color); }

	.med-cat-kpi .kl {
		font: 500 11px/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
		margin-top: 3px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}


	/* ============================================
	   SA3 percentile snapshot bar (under the National Snapshot KPI strip).
	   Shows the spread of pop-per-provider across ~340 SA3 regions: min,
	   P25, median, P75, max — with the inter-quartile range highlighted in
	   the active category's brand colour. Log-scaled because popPer is
	   right-skewed (a few SA3s sit at 10× the median). The national average
	   marker is overlaid as a small triangle when it differs from the median.
	   ============================================ */
	.med-cat-pctbar {
		margin-top: 14px;
		padding: 14px 16px 22px;
		background: var(--slate-50, #f8fafc);
		border: 1px solid var(--slate-100, #f1f5f9);
		border-radius: 10px;
	}

	.pctbar-head {
		display: flex; align-items: center; justify-content: space-between;
		gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
	}

	.pctbar-title {
		font: 500 0.86rem/1.4 var(--font-sans);
		color: var(--slate-700, #334155);
	}

	.pctbar-title i { margin-right: 6px; color: var(--slate-500, #64748b); }

	.pctbar-title strong { color: var(--lg-ink, #0f172a); font-weight: 700; font-variant-numeric: tabular-nums; }

	.pctbar-meta {
		font: 500 0.72rem/1.3 var(--font-sans);
		color: var(--slate-500, #64748b);
		text-transform: uppercase; letter-spacing: 0.04em;
	}


	.pctbar-track {
		position: relative;
		height: 14px;
		background: linear-gradient(to right, #e2e8f0, #cbd5e1);
		border-radius: 999px;
		overflow: visible;
	}

	.pctbar-iqr {
		position: absolute;
		top: 0; bottom: 0;
		opacity: 0.85;
		border-radius: 999px;
		box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	}

	.pctbar-tick {
		position: absolute;
		top: -4px; bottom: -4px;
		width: 3px;
		transform: translateX(-50%);
		border-radius: 2px;
	}

	.pctbar-natmark {
		position: absolute;
		top: -10px;
		width: 0; height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 8px solid #0f172a;
		transform: translateX(-50%);
		filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
	}


	.pctbar-labels {
		position: relative;
		height: 32px;
		margin-top: 8px;
	}

	.pctbar-lab {
		position: absolute;
		top: 0;
		transform: translateX(-50%);
		font: 600 0.75rem/1 var(--font-sans);
		color: var(--slate-600, #475569);
		font-variant-numeric: tabular-nums;
		text-align: center;
		white-space: nowrap;
	}

	.pctbar-lab small {
		display: block;
		margin-top: 2px;
		font: 500 0.65rem/1 var(--font-sans);
		color: var(--slate-400, #94a3b8);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.pctbar-lab-strong { color: var(--lg-ink, #0f172a); font-weight: 700; }

	.pctbar-lab-strong small { color: var(--slate-500, #64748b); }

	@media (max-width: 768px) {
		.med-cat-pctbar { padding: 12px 12px 18px; }
		.pctbar-title { font-size: 0.78rem; }
		.pctbar-lab { font-size: 0.68rem; }
		.pctbar-lab small { font-size: 0.6rem; }
	}


	/* ============================================
	   CATEGORY-ONLY: category-scoped leaderboard
	   ============================================ */
	.cat-leaderboard-panel {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 12px;
		box-shadow: 0 18px 46px rgba(15,23,42,0.05);
		overflow: hidden;
		position: relative;
	}

	/* Locked SA4 teaser rows — show layout/placeholders only, the lock
	   overlay sits on top of these and the user can't read real numbers. */
	.cat-leaderboard-row-locked { filter: blur(2.5px); opacity: 0.55; pointer-events: none; }

	.cat-lb-skel {
		display: inline-block;
		height: 14px;
		background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
		background-size: 200% 100%;
		border-radius: 4px;
		animation: catLbShimmer 1.5s ease-in-out infinite;
	}

	.cat-leaderboard-toolbar {
		padding: 14px 18px;
		border-bottom: 1px solid var(--slate-100, #f1f5f9);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
		background: linear-gradient(180deg, #fff, #fbfdff);
	}

	.cat-leaderboard-meta {
		font: 500 12px/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
	}

	.cat-leaderboard-body {
		padding: 8px 0;
	}

	.cat-leaderboard-row {
		display: grid;
		/* pos | name (compact) | popper | count | bar (dominant) */
		grid-template-columns: 36px 120px 130px 100px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		padding: 10px 18px;
		border-bottom: 1px solid var(--slate-100, #f1f5f9);
	}

	.cat-leaderboard-row:last-child { border-bottom: none; }

	.cat-leaderboard-pos {
		font: 700 13px/1 var(--font-sans);
		color: var(--slate-500, #64748b);
	}

	.cat-leaderboard-name {
		font: 600 0.95rem/1.2 var(--font-sans);
		color: var(--lg-ink, #0f172a);
	}

	.cat-leaderboard-name small {
		display: block;
		font: 500 11px/1.2 var(--font-sans);
		color: var(--slate-500, #64748b);
		margin-top: 2px;
	}

	.cat-leaderboard-popper {
		font: 700 1.02rem/1.1 var(--font-sans);
		color: var(--primary-color);
		text-align: right;
	}

	.cat-leaderboard-popper small {
		font: 500 10px/1.1 var(--font-sans);
		color: var(--slate-500, #64748b);
		display: block;
		text-align: right;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin-top: 2px;
	}

	.cat-leaderboard-count {
		font: 600 0.9rem/1.1 var(--font-sans);
		color: var(--lg-ink, #0f172a);
		text-align: right;
	}

	.cat-leaderboard-count small {
		font: 500 10px/1.1 var(--font-sans);
		color: var(--slate-500, #64748b);
		display: block;
		text-align: right;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		margin-top: 2px;
	}

	.cat-leaderboard-bar {
		position: relative;
		height: 16px;
		background: var(--slate-100, #f1f5f9);
		border-radius: 999px;
		overflow: hidden;
		box-shadow: inset 0 1px 2px rgba(15,23,42,0.06);
	}

	.cat-leaderboard-bar > span {
		position: absolute;
		left: 0; top: 0; bottom: 0;
		width: 0%;
		background: linear-gradient(90deg, var(--primary-color), var(--success-color));
		border-radius: 999px;
		transition: width 1.05s cubic-bezier(.22,.61,.36,1);
		box-shadow: 0 1px 3px rgba(0,95,110,0.25);
	}

	.cat-leaderboard-bar > span::after {
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: 28px;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45));
		border-radius: 0 999px 999px 0;
		opacity: 0;
		animation: catLbBarShine 1.4s ease-out 0.25s 1 forwards;
	}

	@media (max-width: 768px) {
		.cat-leaderboard-row {
			grid-template-columns: 24px 90px 1fr 70px;
			gap: 10px;
		}
		.cat-leaderboard-bar { display: none; }
		.cat-leaderboard-popper { font-size: 0.95rem; }
	}


	/* ============================================
	   CATEGORY-ONLY: related categories block
	   ============================================ */
	.med-related-cats {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 10px;
	}

	.med-related-cat-card {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 10px;
		text-decoration: none;
		color: inherit;
		transition: transform .14s ease, border-color .14s ease;
	}

	.med-related-cat-card:hover {
		transform: translateY(-2px);
		border-color: var(--primary-color);
		text-decoration: none;
		color: inherit;
	}

	.med-related-cat-card .mrc-icon {
		width: 32px; height: 32px;
		border-radius: 8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--msci, rgba(0,95,110,0.1));
		color: var(--mscc, var(--primary-color));
		flex: 0 0 32px;
	}

	.med-related-cat-card .mrc-name {
		font: 600 0.9rem/1.2 var(--font-sans);
	}

	/* ============================================
	   Long Swiper carousel of all 24 categories on every cat page.
	   Replaces the older 6-card "related cats" grid. Active chip is pinned
	   in its category brand colour; others sit as plain pills.
	   ============================================ */
	.med-related-swiper {
		position: relative;
		padding: 4px 36px;
		margin-bottom: 14px;
	}

	.med-related-swiper .swiper-wrapper { align-items: stretch; }

	.med-related-chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 16px;
		background: #fff;
		border: 1.5px solid var(--slate-200, #e2e8f0);
		border-radius: 999px;
		color: var(--slate-700, #334155);
		font: 600 0.86rem/1 var(--font-sans);
		text-decoration: none;
		white-space: nowrap;
		width: auto;        /* override Swiper's slide width */
		transition: background .15s, border-color .15s, color .15s, transform .15s;
		cursor: pointer;
	}

	.med-related-chip i {
		font-size: 0.9rem;
		color: var(--accent, var(--slate-400, #94a3b8));
	}

	.med-related-chip:hover {
		background: var(--slate-50, #f8fafc);
		border-color: var(--slate-300, #cbd5e1);
		color: var(--lg-ink, #0f172a);
	}

	.med-related-chip.active {
		background: var(--accent, var(--primary-color, #005F6E));
		border-color: var(--accent, var(--primary-color, #005F6E));
		color: #fff;
		cursor: default;
		box-shadow: 0 4px 10px rgba(15,23,42,0.10);
	}

	.med-related-chip.active i { color: #fff; }

	.med-related-swiper .swiper-button-prev,
	.med-related-swiper .swiper-button-next {
		color: var(--slate-500, #64748b);
		width: 28px; height: 28px;
		margin-top: -14px;
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 999px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	}

	.med-related-swiper .swiper-button-prev::after,
	.med-related-swiper .swiper-button-next::after { font-size: 12px; font-weight: 700; }

	@media (max-width: 768px) {
		.med-related-swiper { padding: 4px 28px; }
		.med-related-chip { padding: 8px 12px; font-size: 0.78rem; }
	}


	.med-related-back {
		text-align: center;
		margin-top: 14px;
	}

	.med-related-back-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 18px;
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 999px;
		font: 600 13px/1 var(--font-sans);
		color: var(--primary-color);
		text-decoration: none;
		transition: all .14s ease;
	}

	.med-related-back-link:hover {
		background: var(--primary-color);
		color: #fff;
		text-decoration: none;
		border-color: var(--primary-color);
	}


	@media (max-width: 768px) {
		.med-cross-rankings {
			grid-template-columns: 1fr;
		}
		.med-cat-narrative-head h2 { font-size: 1.18rem; }
		.med-cat-icon-chip { width: 44px; height: 44px; flex: 0 0 44px; font-size: 18px; }
	}


	/* ============================================
	   Content polish pass - scoped to benchmark body
	   ============================================ */
	.med-content {
		background:
			linear-gradient(180deg, #f8fafc 0, #fff 300px),
			linear-gradient(180deg, transparent 0, transparent 100%);
		--med-surface-cool: #f8fafc;
		--med-border: #e2e8f0;
		--med-border-light: #edf2f7;
		--med-ink-muted: #64748b;
		--med-table-hover: rgba(0,95,110,0.035);
	}

	.med-content,
	.med-content p,
	.med-content h1, .med-content h2, .med-content h3,
	.med-content h4, .med-content h5, .med-content h6 {
		letter-spacing: 0;
	}

	.med-content .section {
		padding: 2.6rem 0 0.9rem;
	}

	.med-content .section:first-child {
		padding-top: 2.4rem;
	}

	.med-content .section > .container {
		max-width: 1220px;
	}

	.med-section-title {
		display: block;
		padding-bottom: 0;
		margin-bottom: 1.35rem;
		border-bottom: 0;
	}

	.med-section-title[data-kicker]::before {
		content: attr(data-kicker);
		display: flex;
		align-items: center;
		gap: 0.4rem;
		font-family: 'IBM Plex Mono', Consolas, monospace;
		font-size: 0.7rem;
		font-weight: 500;
		letter-spacing: 0.15em;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--amber);
		margin-bottom: 0.5rem;
	}

	.med-section-title h2 {
		display: block;
		font-family: var(--f);
		font-size: 1.95rem;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.01em;
		margin-bottom: 0.75rem;
	}

	.med-section-title p {
		max-width: 720px;
		font-size: 1.02rem;
		line-height: 1.7;
		color: var(--slate-600);
	}

	.summary-stat,
	.med-sector-card,
	.med-cross-rank-col,
	.med-cat-narrative,
	.cat-leaderboard-panel,
	.detail-view-body,
	.corr-matrix,
	.faq-item,
	.cta-box,
	.cta-block,
	.med-related-cat-card,
	.coloc-result,
	.coloc-stat,
	.cohort-block,
	.chart-container,
	.comparison-table {
		border-radius: 8px;
	}

	.summary-stat,
	.med-sector-card,
	.med-cross-rank-col,
	.med-cat-narrative,
	.cat-leaderboard-panel,
	.detail-view-body {
		box-shadow: 0 14px 34px rgba(15,23,42,0.055);
	}

	.summary-stat {
		position: relative;
		overflow: hidden;
		padding: 18px 20px;
	}

	.summary-stat::after {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 3px;
		background: linear-gradient(90deg, var(--lg-teal), rgba(237,139,0,0.78));
		opacity: 0.88;
	}

	.summary-stat .val {
		font-size: 28px;
	}

	.med-sector-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 16px;
	}

	.med-sector-card {
		padding: 18px;
	}

	.med-sector-card::before {
		width: 3px;
	}

	.med-sector-card-icon,
	.med-cat-icon-chip,
	.med-related-cat-card .mrc-icon,
	.insight-card .ic-icon,
	.active-context-icon {
		border-radius: 8px;
	}

	.med-sector-card-stats {
		background: var(--slate-50);
		border: 1px solid var(--slate-100);
		border-radius: 8px;
		padding: 10px 12px;
		margin-top: 2px;
	}

	.med-cross-rankings {
		gap: 18px;
	}

	.med-cat-narrative {
		padding: 24px;
		overflow: hidden;
	}

	.med-cat-narrative::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 4px;
		background: linear-gradient(90deg, var(--mscc, var(--lg-teal)), rgba(237,139,0,0.75));
	}

	.med-cat-narrative-head {
		margin-bottom: 14px;
	}

	.med-cat-narrative-head > div:last-child::before {
		content: "National Snapshot";
		display: block;
		font-family: 'IBM Plex Mono', Consolas, monospace;
		font-size: 0.68rem;
		font-weight: 500;
		letter-spacing: 0.14em;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--amber);
		margin-bottom: 0.45rem;
	}

	.med-cat-narrative-head h2 {
		font-family: var(--f);
		font-size: 1.75rem;
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	.med-cat-narrative-body {
		max-width: 980px;
		font-size: 1rem;
		line-height: 1.68;
		color: var(--slate-700);
	}

	.med-cat-kpi-strip,
	.insight-strip {
		gap: 12px;
	}

	.med-cat-kpi {
		padding: 12px 14px;
		background: var(--slate-50);
		border: 1px solid var(--slate-100);
		border-radius: 8px;
		min-height: 72px;
	}

	.insight-strip {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.insight-card {
		background: #fff;
		border-color: var(--slate-200);
		border-radius: 8px;
		box-shadow: 0 10px 24px rgba(15,23,42,0.045);
	}

	.cat-leaderboard-toolbar,
	.mbt-panel-head {
		background: #fff;
		border-bottom: 1px solid var(--med-border);
	}

	.cat-leaderboard-row {
		transition: background .14s ease;
	}

	.cat-leaderboard-row:hover {
		background: var(--slate-50);
	}

	.detail-layout {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 24px;
	}

	.detail-view-body {
		padding: 26px;
	}

	.dash-section {
		padding: 30px 0;
	}

	.dash-head {
		margin-bottom: 18px;
	}

	.dash-head h3 {
		font-size: 19px;
		letter-spacing: 0;
	}

	.dash-head .dash-cat,
	.dash-head .dash-title {
		font-size: 19px;
		letter-spacing: 0;
	}

	.chart-container {
		border-color: var(--slate-200);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
	}

	.mbt-panel,
	.mbt-wrap,
	.corr-matrix,
	.comparison-table,
	.corr-ranked-table,
	.cat-leaderboard-panel,
	.cohort-block {
		border: 1px solid var(--med-border);
		border-radius: 8px;
		overflow: hidden;
		background: #fff;
	}

	.mbt-panel,
	.cat-leaderboard-panel {
		box-shadow: none;
	}

	.mbt-scroll {
		max-height: 640px;
	}

	.mbt-table,
	.comparison-table,
	.corr-ranked-table {
		border-collapse: collapse;
		font-size: 0.85rem;
		margin: 0;
	}

	.mbt-table th,
	.comparison-table th,
	.corr-ranked-table thead th {
		background: var(--med-surface-cool);
		font-family: var(--f);
		font-weight: 600;
		font-size: 0.73rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--med-ink-muted);
		padding: 0.75rem 1rem;
		border-bottom: 2px solid var(--med-border);
		white-space: nowrap;
		user-select: none;
	}

	.mbt-table th:hover,
	.comparison-table th:hover,
	.corr-ranked-table thead th:hover {
		color: var(--lg-teal);
		background: var(--med-surface-cool);
	}

	.mbt-table td,
	.comparison-table td,
	.corr-ranked-table tbody td {
		padding: 0.65rem 1rem;
		border-bottom: 1px solid var(--med-border-light);
		color: var(--lg-ink);
		font-variant-numeric: tabular-nums;
	}

	.mbt-table tbody tr:hover td,
	.comparison-table tr:hover td,
	.corr-ranked-table tbody tr:hover td,
	.cat-leaderboard-row:hover {
		background: var(--med-table-hover);
	}

	.mbt-table th.mbt-sticky,
	.mbt-table td.mbt-sticky {
		border-right: 1px solid var(--med-border);
	}

	.mbt-table thead th.mbt-sticky {
		background: var(--med-surface-cool);
	}

	.mbt-table tbody tr:hover td.mbt-sticky {
		background: #f3f8f9;
	}

	.mbt-region-name,
	.corr-partner-link,
	.med-cross-rank-list .mcr-name,
	.cat-leaderboard-name {
		color: var(--lg-teal);
		font-weight: 600;
	}

	.mbt-region-name:hover,
	.corr-partner-link:hover,
	.med-cross-rank-list .mcr-name:hover {
		color: var(--amber);
		text-decoration: underline;
	}

	.cat-leaderboard-row {
		border-bottom: 1px solid var(--med-border-light);
	}

	.cat-leaderboard-row:last-child {
		border-bottom: 0;
	}

	.cat-leaderboard-popper,
	.cat-leaderboard-count {
		font-family: 'IBM Plex Mono', Consolas, monospace;
		font-weight: 500;
	}

	.corr-matrix-head {
		background: var(--med-surface-cool);
		border-bottom: 2px solid var(--med-border);
	}

	.corr-matrix-title {
		font-family: var(--f);
		font-size: 0.88rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.cohort-block {
		padding: 0;
	}

	.cohort-head {
		padding: 0.85rem 1rem;
		margin: 0;
		background: var(--med-surface-cool);
		border-bottom: 2px solid var(--med-border);
	}

	.cohort-table {
		margin-top: 0;
	}

	.cohort-table .comparison-table {
		border: 0;
		border-radius: 0;
	}

	.scrollspy-inner {
		background: #fff;
		border: 1px solid var(--slate-200);
		border-left: 3px solid var(--slate-200);
		border-radius: 8px;
		padding: 10px 0;
		box-shadow: 0 10px 24px rgba(15,23,42,0.045);
	}

	.scrollspy-label {
		padding-left: 14px;
	}

	.scrollspy-link {
		padding-left: 14px;
	}

	.cta-box {
		background: linear-gradient(180deg, #fff, #fbfdff);
		box-shadow: 0 10px 24px rgba(15,23,42,0.045);
	}

	.faq-section {
		margin-top: 20px;
	}

	.faq-item {
		box-shadow: 0 8px 20px rgba(15,23,42,0.035);
	}


	/* ============================================
	   METHODOLOGY / ABOUT — both views
	   ============================================ */
	.med-method {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 14px;
		padding: 24px 28px 14px;
		box-shadow: 0 8px 22px rgba(15,23,42,0.04);
	}

	.med-method-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 36px;
		margin-top: 6px;
	}

	.med-method-block h3 {
		font: 700 1.02rem/1.25 var(--font-sans);
		color: var(--lg-ink, #0f172a);
		margin: 0 0 10px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.med-method-block h3 i {
		color: var(--primary-color, #005F6E);
		font-size: 0.95em;
		width: 22px;
		text-align: center;
	}

	.med-method-block p {
		font: 400 0.93rem/1.55 var(--font-sans);
		color: var(--slate-700, #334155);
		margin: 0 0 12px;
	}

	.med-method-block strong {
		color: var(--lg-ink, #0f172a);
		font-weight: 600;
	}

	.med-method-block ul {
		margin: 0 0 12px;
		padding-left: 1.1rem;
	}

	.med-method-block li {
		font: 400 0.92rem/1.5 var(--font-sans);
		color: var(--slate-700, #334155);
		margin-bottom: 6px;
	}

	.med-method-block a {
		color: var(--primary-color, #005F6E);
		text-decoration: none;
		font-weight: 600;
	}

	.med-method-block a:hover { text-decoration: underline; }

	@media (max-width: 768px) {
		.med-method { padding: 18px 18px 8px; }
		.med-method-grid { grid-template-columns: 1fr; gap: 20px; }
		.med-method-block h3 { font-size: 0.96rem; }
		.med-method-block p, .med-method-block li { font-size: 0.88rem; }
	}

	@media (max-width: 991px) {
		.med-content .section {
			padding: 2.1rem 0 0.7rem;
		}
		.detail-view-body {
			padding: 20px;
		}
	}

	@media (max-width: 768px) {
		.med-section-title {
			padding-bottom: 0.75rem;
		}
		.med-section-title h2 {
			font-size: 1.45rem;
		}
		.med-section-title p {
			margin-top: 6px;
		}
		.med-sector-grid {
			grid-template-columns: 1fr;
		}
		.med-sector-card,
		.med-cat-narrative {
			padding: 16px;
		}
		.med-cat-kpi-strip,
		.insight-strip {
			grid-template-columns: 1fr;
		}
		.cat-leaderboard-toolbar {
			align-items: stretch;
		}
		.detail-view-body {
			padding: 16px;
			box-shadow: none;
		}
		.dash-head h3,
		.dash-head .dash-cat,
		.dash-head .dash-title {
			font-size: 17px;
		}
		.med-cat-narrative-head h2 {
			font-size: 1.28rem;
		}
	}


	/* ============================================
	   SEO ECHO — server-rendered state breakdown table on category pages.
	   Same numbers the JS dashboard renders, but in plain HTML so crawlers
	   and no-JS clients still index real data. Styled to look at home in
	   the section flow but kept compact.
	   ============================================ */
	.med-seo-echo { padding: 1rem 0 1.4rem; }

	.med-seo-card {
		background: #fff;
		border: 1px solid var(--slate-200, #e2e8f0);
		border-radius: 14px;
		padding: 1.4rem 1.5rem 1.25rem;
		box-shadow: 0 6px 18px rgba(11,26,46,0.05);
	}

	.med-seo-card h2 {
		font: 700 1.1rem/1.3 var(--font-sans);
		color: var(--lg-ink, #0f172a);
		margin: 0 0 0.5rem;
		letter-spacing: -0.01em;
	}

	.med-seo-lead {
		font-size: 0.95rem;
		color: var(--slate-600, #475569);
		margin: 0 0 0.95rem;
		line-height: 1.55;
	}

	.med-seo-lead strong { color: var(--primary-color, #005F6E); font-weight: 700; }

	.med-seo-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.9rem;
	}

	.med-seo-table thead th {
		text-align: left;
		font: 600 0.78rem/1.2 var(--font-sans);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--slate-500, #64748b);
		padding: 0.55rem 0.85rem;
		border-bottom: 1px solid var(--slate-200, #e2e8f0);
		background: var(--slate-50, #f8fafc);
	}

	.med-seo-table th.num, .med-seo-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

	.med-seo-table tbody th { font-weight: 600; color: var(--lg-ink, #0f172a); }

	.med-seo-table tbody td { color: var(--slate-700, #334155); }

	.med-seo-table tbody tr { border-bottom: 1px solid var(--slate-100, #f1f5f9); }

	.med-seo-table tbody tr:last-child { border-bottom: none; }

	.med-seo-table tbody th, .med-seo-table tbody td { padding: 0.55rem 0.85rem; }

	.med-seo-note {
		font-size: 0.78rem;
		color: var(--slate-500, #64748b);
		margin: 0.85rem 0 0;
		font-style: italic;
	}

	.visually-hidden {
		position: absolute;
		width: 1px; height: 1px;
		padding: 0; margin: -1px; overflow: hidden;
		clip: rect(0,0,0,0); white-space: nowrap; border: 0;
	}


	/* ============================================
	   HOW IT WORKS modal — ported from incolour/childcare.php with
	   medical-flavoured copy. Self-contained styles.
	   ============================================ */
	#hiw-overlay {
		display: none;
		position: fixed; inset: 0;
		background: rgba(10,22,40,0.6);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		z-index: 9998;
		animation: hiwFadeIn 0.25s ease;
	}

	#hiw-modal {
		display: none;
		position: fixed;
		top: 50%; left: 50%;
		transform: translate(-50%,-50%);
		width: 94%;
		max-width: 620px;
		max-height: 88vh;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 24px 64px rgba(0,0,0,0.3);
		z-index: 9999;
		overflow: hidden;
		animation: hiwSlideIn 0.3s ease;
	}


	#hiw-modal .hiw-header {
		background: linear-gradient(135deg, #0b1a2e 0%, #132f4c 100%);
		padding: 1.75rem 2rem 1.5rem;
		position: relative;
	}

	#hiw-modal .hiw-header h3 {
		color: #fff; font-size: 1.25rem; font-weight: 700;
		margin: 0 0 0.25rem;
	}

	#hiw-modal .hiw-header p {
		color: rgba(255,255,255,0.55); font-size: 0.85rem; margin: 0;
	}

	#hiw-modal .hiw-close {
		position: absolute; top: 1rem; right: 1rem;
		background: rgba(255,255,255,0.1); border: none;
		color: rgba(255,255,255,0.6);
		width: 32px; height: 32px; border-radius: 50%;
		font-size: 1.1rem; cursor: pointer;
		display: flex; align-items: center; justify-content: center;
		transition: all 0.2s;
	}

	#hiw-modal .hiw-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

	#hiw-modal .hiw-body {
		padding: 1.25rem 1.75rem 1.75rem;
		overflow-y: auto;
		max-height: calc(88vh - 110px);
	}

	#hiw-modal .hiw-flow { display: flex; flex-direction: column; gap: 0; }

	#hiw-modal .hiw-step {
		display: flex; gap: 1rem;
		padding: 0.95rem 0;
		border-bottom: 1px solid #f1f5f9;
	}

	#hiw-modal .hiw-step:last-child { border-bottom: none; }

	#hiw-modal .hiw-step-icon {
		flex-shrink: 0;
		width: 44px; height: 44px;
		border-radius: 12px;
		display: flex; align-items: center; justify-content: center;
		color: #fff; font-size: 1.05rem;
	}

	#hiw-modal .step-search   { background: linear-gradient(135deg, #0e4d64 0%, #1b8cb4 100%); }

	#hiw-modal .step-select   { background: linear-gradient(135deg, #ED8B00 0%, #f59e0b 100%); }

	#hiw-modal .step-analyse  { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }

	#hiw-modal .step-report   { background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); }

	#hiw-modal .hiw-step-content h5 {
		font: 700 0.95rem/1.3 var(--font-sans);
		color: #0f172a; margin: 2px 0 4px;
	}

	#hiw-modal .hiw-step-content p {
		font: 400 0.86rem/1.5 var(--font-sans);
		color: #475569; margin: 0;
	}

	#hiw-modal .hiw-tip {
		margin-top: 14px; padding: 11px 14px;
		background: rgba(16,185,129,0.08);
		border-left: 3px solid #10b981;
		border-radius: 8px;
		font: 400 0.84rem/1.5 var(--font-sans);
		color: #334155;
	}

	#hiw-modal .hiw-tip strong { color: #047857; }


	/* Inline "Contact us" link inside the find&assess subtitle. */
	.cta-contact-link {
		color: var(--primary-color, #005F6E);
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.cta-contact-link:hover { color: var(--accent-color, #ED8B00); text-decoration: underline; }

	.cta-contact-link i { margin-right: 4px; font-size: 0.92em; }


	/* ============================================
	   Testimonial band — standalone strip directly below the Find&Assess
	   search section. Sits on its own white background so the quote stands
	   out from both the dark search CTA above and the next section below.
	   ============================================ */
	.testimonial-band {
		padding: 0.6rem 0 1.6rem; /* tucked up close to the search section above */
		background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	}

	.med-testimonial {
		position: relative;
		max-width: 880px;
		margin: 0 0 0 auto; /* right-aligned within the container */
		padding: 1.85rem 2rem 1.65rem 4.4rem;
		background: #ffffff;
		border: 1px solid #e2e8f0;
		border-left: 5px solid var(--accent-color, #ED8B00);
		/* square left edge, soft right corners */
		border-radius: 0 14px 14px 0;
		box-shadow: 0 12px 32px rgba(11,26,46,0.08);
		color: #1f2a37;
	}

	.med-testimonial-quote {
		position: absolute;
		top: 1.15rem; left: 1.4rem;
		color: var(--accent-color, #ED8B00);
		font-size: 2rem;
		opacity: 0.55;
		line-height: 1;
	}

	.med-testimonial blockquote {
		margin: 0 0 0.85rem;
		padding: 0;
		border: none;
		font: 500 1.04rem/1.65 var(--font-sans, inherit);
		color: #1f2a37;
		quotes: none;
	}

	.med-testimonial figcaption {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35rem 0.55rem;
		font-size: 0.88rem;
		color: #475569;
		padding-top: 0.6rem;
		border-top: 1px solid #f1f5f9;
	}

	.med-testimonial-name {
		font-weight: 700;
		color: var(--primary-color, #005F6E);
		letter-spacing: 0.01em;
	}

	.med-testimonial-sep { color: #cbd5e1; padding: 0 0.1rem; }

	.med-testimonial-role { color: #64748b; font-style: italic; }

	/* Swiper carousel — fade transition between quotes. Container needs to
	   be the swiper's bounding box; slides absolute-position when fade is
	   used so we set a min-height on the wrapper to accommodate the longest
	   quote and avoid layout jumps as it cycles. */
	.med-testimonial-swiper {
		max-width: 880px;
		margin: 0 0 0 auto; /* right-aligned to match the .med-testimonial card */
		padding-bottom: 2.2rem; /* room for pagination dots */
		overflow: hidden;
	}

	.med-testimonial-swiper .swiper-wrapper {
		min-height: 240px;
	}

	.med-testimonial-swiper .swiper-slide {
		opacity: 0;
		transition: opacity 0.6s ease;
	}

	.med-testimonial-swiper .swiper-slide-active { opacity: 1; }

	.med-testimonial-swiper .med-testimonial { margin: 0; }

	.med-testimonial-pagination {
		position: absolute;
		bottom: 0.4rem;
		left: 0; right: 0;
		text-align: center;
	}

	.med-testimonial-pagination .swiper-pagination-bullet {
		width: 8px; height: 8px;
		background: #cbd5e1;
		opacity: 1;
		margin: 0 4px;
		transition: all 0.25s;
	}

	.med-testimonial-pagination .swiper-pagination-bullet-active {
		background: var(--accent-color, #ED8B00);
		width: 24px;
		border-radius: 999px;
	}

	@media (max-width: 575px) {
		.testimonial-band { padding: 1.4rem 0 1.8rem; }
		.med-testimonial { padding: 1.4rem 1.15rem 1.2rem 2.9rem; border-radius: 0 12px 12px 0; }
		.med-testimonial-quote { top: 0.95rem; left: 1rem; font-size: 1.55rem; }
		.med-testimonial blockquote { font-size: 0.95rem; line-height: 1.55; }
		.med-testimonial-swiper .swiper-wrapper { min-height: 320px; }
	}


	/* ============================================
	   MEDICAL CENTRE SEARCH MODAL
	   Visual clone of the childcare cc-search-modal. Dark glassmorphism
	   panel with a centred dialog and full-screen overlay. The backing
	   data is /processMedReportInfo.php's `searchMedicalCentres` action.
	   ============================================ */
	#med-search-overlay {
		position: fixed; inset: 0;
		background: rgba(0,0,0,0.55);
		opacity: 0;
		pointer-events: none;
		z-index: 999;
		transition: opacity .25s ease;
	}

	#med-search-overlay.open { opacity: 1; pointer-events: auto; }


	#med-search-modal {
		position: fixed;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%) scale(0.95);
		width: 92%;
		max-width: 900px;
		max-height: 80vh;
		background: rgba(10, 15, 25, 0.94);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(255,255,255,0.10);
		border-radius: 12px;
		padding: 0;
		z-index: 1000;
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s cubic-bezier(0.16,1,0.3,1), transform .3s cubic-bezier(0.16,1,0.3,1);
		box-shadow: 0 20px 50px rgba(0,0,0,0.6);
		display: flex;
		flex-direction: column;
		color: #fff;
	}

	#med-search-modal.open {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, -50%) scale(1);
	}

	#med-search-modal .sm-header {
		padding: 16px 22px;
		border-bottom: 1px solid rgba(255,255,255,0.10);
		display: flex; justify-content: space-between; align-items: center;
	}

	#med-search-modal .sm-header h4 {
		margin: 0;
		font: 500 14px/1.2 var(--font-sans);
		color: rgba(255,255,255,0.75);
	}

	#med-search-modal .sm-close {
		background: none; border: none;
		color: rgba(255,255,255,0.55);
		font-size: 24px; line-height: 1;
		cursor: pointer; padding: 0 4px;
	}

	#med-search-modal .sm-close:hover { color: #fff; }


	#med-search-modal .sm-body {
		padding: 15px 20px;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		max-height: calc(80vh - 60px);
	}

	#med-search-modal .results-header {
		display: flex; justify-content: space-between; align-items: center;
		padding: 10px 16px;
		margin: -15px -20px 15px -20px;
		border-bottom: 1px solid rgba(255,255,255,0.08);
		background: rgba(0,95,110,0.16);
	}

	#med-search-modal .results-title {
		font: 500 12px/1 var(--font-sans);
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #67e8f9;
	}

	#med-search-modal .results-count {
		font: 400 12px/1 var(--font-sans);
		color: rgba(255,255,255,0.55);
	}

	#med-search-modal .result-card {
		padding: 14px 18px;
		border-bottom: 1px solid rgba(255,255,255,0.05);
		transition: background .2s ease;
	}

	#med-search-modal .result-card:hover { background: rgba(6,182,212,0.08); }

	#med-search-modal .result-card-header {
		display: flex; justify-content: space-between; align-items: flex-start;
		gap: 12px; margin-bottom: 8px;
	}

	#med-search-modal .result-location {
		color: #fff;
		text-decoration: none;
		font: 600 15px/1.3 var(--font-sans);
	}

	#med-search-modal .result-location-state {
		color: rgba(255,255,255,0.55);
		font: 400 13px/1.3 var(--font-sans);
		margin-left: 8px;
	}

	#med-search-modal .result-type-badge {
		font: 600 10px/1 var(--font-sans);
		padding: 4px 8px;
		border-radius: 4px;
		text-transform: uppercase;
		letter-spacing: .5px;
		flex: 0 0 auto;
		white-space: nowrap;
		color: #fff;
	}

	#med-search-modal .centre-meta {
		display: flex; flex-wrap: wrap; gap: 12px;
		font: 400 12.5px/1.4 var(--font-sans);
		color: rgba(255,255,255,0.65);
		margin: 4px 0 10px;
	}

	#med-search-modal .centre-meta i { margin-right: 5px; opacity: 0.8; }

	#med-search-modal .result-actions {
		display: flex; gap: 8px; flex-wrap: wrap;
	}

	#med-search-modal .s-btn {
		display: inline-flex; align-items: center; gap: 6px;
		padding: 6px 11px;
		border-radius: 6px;
		font: 600 11.5px/1 var(--font-sans);
		text-decoration: none;
		border: 1px solid rgba(255,255,255,0.12);
		color: #fff;
		background: rgba(255,255,255,0.05);
		transition: background .15s, border-color .15s;
	}

	#med-search-modal .s-btn:hover {
		background: rgba(255,255,255,0.10);
		border-color: rgba(255,255,255,0.25);
		color: #fff;
	}

	#med-search-modal .s-btn-map { background: rgba(66,133,244,0.18); border-color: rgba(66,133,244,0.45); }

	#med-search-modal .s-btn-map:hover { background: rgba(66,133,244,0.30); }

	#med-search-modal .s-btn-bench { background: rgba(237,139,0,0.18); border-color: rgba(237,139,0,0.45); }

	#med-search-modal .s-btn-bench:hover { background: rgba(237,139,0,0.32); }


	#med-search-modal .search-empty-state,
	#med-search-modal .search-loading {
		text-align: center;
		padding: 40px 20px;
		color: rgba(255,255,255,0.55);
	}

	#med-search-modal .search-empty-state i,
	#med-search-modal .search-loading i {
		font-size: 38px;
		color: rgba(255,255,255,0.35);
		margin-bottom: 12px;
		display: block;
	}

	#med-search-modal .search-empty-state h3 {
		font: 600 17px/1.3 var(--font-sans);
		color: #fff;
		margin: 0 0 6px;
	}

	#med-search-modal .search-spinner {
		display: inline-block;
		width: 32px; height: 32px;
		border: 3px solid rgba(255,255,255,0.15);
		border-top-color: #67e8f9;
		border-radius: 50%;
		animation: medspin 0.8s linear infinite;
		margin-bottom: 10px;
	}


	@media (max-width: 768px) {
		#med-search-modal { width: 96%; max-height: 88vh; }
		#med-search-modal .sm-body { max-height: calc(88vh - 56px); padding: 12px 14px; }
		#med-search-modal .result-card-header { flex-direction: column; gap: 4px; }
	}
}
}
@layer pg {
@scope (main) {
.active-context-meta .ac-pill,
.cat-insights-pill,
.cat-swiper-wrap .swiper-button-next,
.cat-swiper-wrap .swiper-button-prev,
.cohort-badge,
.coloc-pill,
.coloc-pill .coloc-pill-pct,
.cpt,
.eco-hero-badge,
.eco-hero-scale-pill,
.gcc-pill,
.mbt-btn,
.mbt-lock-btn,
.mbt-pro,
.mbt-toggle,
.med-cat-group-tag,
.med-cta-hero .med-cta-btn,
.med-related-back-link,
.med-related-chip,
.med-related-swiper .swiper-button-next,
.med-related-swiper .swiper-button-prev,
.med-sa3hist-swiper .swiper-button-next,
.med-sa3hist-swiper .swiper-button-prev,
.med-sa3hist-tab,
.med-sa3hist-toggle,
.med-sa3hist-toggle button,
.sa3x-pill,
.sa3x-pills,
.search-mode-toggle,
.sec-scale-badge,
.smt-btn,
.state-pill { border-radius: var(--r-1); }
}
}
@layer pg {
html[data-theme="dark"] main .med-section-title p { color: var(--fg-2); }
html[data-theme="dark"] main .cta-search input:focus { background: var(--surface); }
html[data-theme="dark"] main .med-section-header h5 { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .cat-picker { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .cpt { color: var(--fg-2); }
html[data-theme="dark"] main .cpt:hover { background: var(--alt); }
html[data-theme="dark"] main .med-card { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .med-card:hover { background: var(--alt); }
html[data-theme="dark"] main .med-card.active h5 i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-card .stat-label { color: var(--fg-2); }
html[data-theme="dark"] main .state-pill { border-color: var(--hair); background: var(--surface); color: var(--fg-2); }
html[data-theme="dark"] main .state-pill:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .gcc-pill { border-color: var(--hair); background: var(--surface); color: var(--fg-2); }
html[data-theme="dark"] main .cat-summary { color: var(--ink); }
html[data-theme="dark"] main .cat-summary .cs-metric { background: var(--alt); }
html[data-theme="dark"] main .mbt-toggle { background: var(--alt); border-color: var(--hair); }
html[data-theme="dark"] main .mbt-btn { color: var(--fg-2); }
html[data-theme="dark"] main .mbt-btn:hover { background: var(--surface); }
html[data-theme="dark"] main .mbt-btn.active .mbt-pro { background: var(--surface); }
html[data-theme="dark"] main .mbt-meta { color: var(--fg-2); }
html[data-theme="dark"] main .mbt-wrap { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .mbt-table thead th { background: var(--alt); color: var(--fg-2); border-bottom-color: var(--hair); }
html[data-theme="dark"] main .mbt-table thead tr.mbt-group-row th { background: var(--alt); border-bottom-color: var(--hair); }
html[data-theme="dark"] main .mbt-table th.mbt-sticky { background: var(--surface); border-right-color: var(--hair); }
html[data-theme="dark"] main .mbt-table td.mbt-sticky { background: var(--surface); border-right-color: var(--hair); }
html[data-theme="dark"] main .mbt-table thead th.mbt-sticky { background: var(--alt); }
html[data-theme="dark"] main .mbt-table tbody tr:hover td { background: var(--alt); }
html[data-theme="dark"] main .mbt-table tbody tr:hover td.mbt-sticky { background: var(--alt); }
html[data-theme="dark"] main .mbt-region-sub { color: var(--fg-2); }
html[data-theme="dark"] main .mbt-demo-head { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mbt-cat-head:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mbt-cat-head:hover .mbt-cat-h i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mbt-cat-head.active { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mbt-cat-head.active .mbt-cat-h i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mbt-lock-inner p { color: var(--fg-2); }
html[data-theme="dark"] main .mbt-lock-close { color: var(--fg-2); }
html[data-theme="dark"] main .cohort-block { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .cohort-badge--greater { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .cohort-badge--rest { color: #ddb68c; }
html[data-theme="dark"] main .coloc-desc { color: var(--fg-2); }
html[data-theme="dark"] main .coloc-pill { background: var(--surface); border-color: var(--hair); color: var(--fg-2); }
html[data-theme="dark"] main .coloc-pill .coloc-pill-pct { background: var(--alt); color: var(--fg-2); }
html[data-theme="dark"] main .coloc-pill:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .coloc-pill:hover i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .coloc-stat { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .coloc-stat-label { color: var(--fg-2); }
html[data-theme="dark"] main .coloc-stat-note { color: var(--fg-2); }
html[data-theme="dark"] main .coloc-narrative { color: var(--ink); }
html[data-theme="dark"] main .faq-item { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .faq-item[open] { border-color: var(--hair); }
html[data-theme="dark"] main .faq-item summary:hover { background: var(--alt); }
html[data-theme="dark"] main .faq-item[open] summary { background: var(--alt); }
html[data-theme="dark"] main .faq-chev { color: var(--fg-2); }
html[data-theme="dark"] main .faq-a { color: var(--ink); }
html[data-theme="dark"] main .dash-head .dash-cat { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .dash-head .dash-title { color: var(--ink); }
html[data-theme="dark"] main .dash-head p { color: var(--fg-2); }
html[data-theme="dark"] main .sec-scale-badge { background: var(--alt); color: var(--fg-2); }
html[data-theme="dark"] main .sa3x-tabs { border-bottom-color: var(--hair); }
html[data-theme="dark"] main .sa3x-tab { color: var(--fg-2); }
html[data-theme="dark"] main .sa3x-tab.active { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .sa3x-control-label { color: var(--fg-2); }
html[data-theme="dark"] main .sa3x-pills { background: var(--alt); }
html[data-theme="dark"] main .sa3x-pill { color: var(--fg-2); }
html[data-theme="dark"] main .sa3x-pill.active { background: var(--surface); color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .sa3x-empty { color: var(--fg-2); background: var(--alt); border-color: var(--hair); }
html[data-theme="dark"] main .sa3x-meta { color: var(--fg-2); }
html[data-theme="dark"] main .detail-view-body { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .scrollspy-gopro { border-color: var(--hair); }
html[data-theme="dark"] main .scrollspy-label { color: var(--fg-2); }
html[data-theme="dark"] main .scrollspy-link { color: var(--fg-2); }
html[data-theme="dark"] main .scrollspy-link:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .insight-card { background: var(--alt); border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .insight-card.negative .ic-icon { color: #ef9d9d; }
html[data-theme="dark"] main .insight-card .ic-label { color: var(--fg-2); }
html[data-theme="dark"] main .insight-card .ic-sub { color: var(--fg-2); }
html[data-theme="dark"] main .cat-insights-kicker { color: #8ec2b3; }
html[data-theme="dark"] main .cat-insights-pill { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] main .cat-insights-body strong { color: #8ec2b3; }
html[data-theme="dark"] main .locked-overlay { border-color: var(--hair); }
html[data-theme="dark"] main .summary-stat { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .summary-stat:hover { border-color: var(--hair); }
html[data-theme="dark"] main .summary-stat .lbl { color: var(--fg-2); }
html[data-theme="dark"] main .comparison-table th { background: var(--alt); color: var(--fg-2); border-bottom-color: var(--hair); }
html[data-theme="dark"] main .comparison-table th:hover { background: var(--alt); color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .comparison-table tr:hover td { background: var(--alt); }
html[data-theme="dark"] main .cta-box { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .cta-box p { color: var(--fg-2); }
html[data-theme="dark"] main .cta-box a { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mbt-panel { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .mbt-search input { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .mbt-tool-hint { color: var(--fg-2); }
html[data-theme="dark"] main .mbt-no-results { color: var(--fg-2); }
html[data-theme="dark"] main .comparison-table { background: var(--surface); }
html[data-theme="dark"] main .med-sector-card { background: var(--surface); }
html[data-theme="dark"] main .med-sector-card-group { color: var(--fg-2); }
html[data-theme="dark"] main .med-sector-card-stat .ssl { color: var(--fg-2); }
html[data-theme="dark"] main .med-cross-rank-col { background: var(--surface); }
html[data-theme="dark"] main .med-cross-rank-col.tightest h3 i { color: #ef9d9d; }
html[data-theme="dark"] main .med-cross-rank-list .mcr-pos { color: var(--fg-2); }
html[data-theme="dark"] main .med-cross-rank-list .mcr-name:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-cross-rank-list .mcr-val small { color: var(--fg-2); }
html[data-theme="dark"] main .med-scale-tag { color: var(--fg-2); }
html[data-theme="dark"] main .med-catchment-card { background: var(--surface); }
html[data-theme="dark"] main .med-sa3hist-card { background: var(--surface); }
html[data-theme="dark"] main .med-sa3hist-tab { color: var(--fg-2); }
html[data-theme="dark"] main .med-sa3hist-tab:hover { background: var(--alt); }
html[data-theme="dark"] main .med-sa3hist-toggle { background: var(--alt); }
html[data-theme="dark"] main .med-sa3hist-toggle button { color: var(--fg-2); }
html[data-theme="dark"] main .med-sa3hist-toggle button.active { background: var(--surface); }
html[data-theme="dark"] main .med-sa3hist-current-metric { color: var(--fg-2); }
html[data-theme="dark"] main .med-sa3hist-deeplink { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-sa3hist-deeplink:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-cat-narrative { background: var(--surface); }
html[data-theme="dark"] main .med-cat-narrative-body { color: var(--ink); }
html[data-theme="dark"] main .med-cat-kpi .kv.kv-blue { color: #99afed; }
html[data-theme="dark"] main .med-cat-kpi .kv.kv-green { color: #96c6a8; }
html[data-theme="dark"] main .med-cat-kpi .kv.kv-red { color: #e09999; }
html[data-theme="dark"] main .med-cat-kpi .kv.kv-teal { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-cat-kpi .kl { color: var(--fg-2); }
html[data-theme="dark"] main .cat-leaderboard-panel { background: var(--surface); }
html[data-theme="dark"] main .cat-leaderboard-meta { color: var(--fg-2); }
html[data-theme="dark"] main .cat-leaderboard-pos { color: var(--fg-2); }
html[data-theme="dark"] main .cat-leaderboard-name small { color: var(--fg-2); }
html[data-theme="dark"] main .cat-leaderboard-popper { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .cat-leaderboard-popper small { color: var(--fg-2); }
html[data-theme="dark"] main .cat-leaderboard-count small { color: var(--fg-2); }
html[data-theme="dark"] main .cat-leaderboard-bar { background: var(--alt); }
html[data-theme="dark"] main .med-related-cat-card { background: var(--surface); }
html[data-theme="dark"] main .med-related-chip { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] main .med-related-chip:hover { background: var(--alt); border-color: var(--hair); }
html[data-theme="dark"] main .med-related-back-link { background: var(--surface); color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-sector-card-stats { background: var(--alt); }
html[data-theme="dark"] main .med-cat-kpi { background: var(--alt); }
html[data-theme="dark"] main .cat-leaderboard-toolbar { background: var(--surface); }
html[data-theme="dark"] main .mbt-panel-head { background: var(--surface); }
html[data-theme="dark"] main .cat-leaderboard-row:hover { background: var(--alt); }
html[data-theme="dark"] main .mbt-table th:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mbt-region-name { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-cross-rank-list .mcr-name { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .cat-leaderboard-name { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .scrollspy-inner { background: var(--surface); border-color: var(--hair); border-left-color: var(--hair); }
html[data-theme="dark"] main .med-method { background: var(--surface); }
html[data-theme="dark"] main .med-method-block h3 i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-method-block p { color: var(--ink); }
html[data-theme="dark"] main .med-method-block li { color: var(--ink); }
html[data-theme="dark"] main .med-method-block a { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-seo-card { background: var(--surface); }
html[data-theme="dark"] main .med-seo-lead { color: var(--fg-2); }
html[data-theme="dark"] main .med-seo-lead strong { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-seo-table thead th { color: var(--fg-2); background: var(--alt); }
html[data-theme="dark"] main .med-seo-table tbody td { color: var(--ink); }
html[data-theme="dark"] main .med-seo-note { color: var(--fg-2); }
html[data-theme="dark"] main #hiw-modal { background: var(--surface); }
html[data-theme="dark"] main #hiw-modal .hiw-step-content h5 { color: var(--ink); }
html[data-theme="dark"] main #hiw-modal .hiw-step-content p { color: var(--fg-2); }
html[data-theme="dark"] main #hiw-modal .hiw-tip { color: var(--ink); }
html[data-theme="dark"] main #hiw-modal .hiw-tip strong { color: #8ec2b3; }
html[data-theme="dark"] main .cta-contact-link { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-testimonial { background: var(--surface); border-color: var(--hair); color: #9a9fa5; }
html[data-theme="dark"] main .med-testimonial blockquote { color: #9a9fa5; }
html[data-theme="dark"] main .med-testimonial figcaption { color: var(--fg-2); }
html[data-theme="dark"] main .med-testimonial-name { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .med-testimonial-role { color: var(--fg-2); }
}