/* Demo-only theme palette. Remove this file and demo-theme-switcher.js for production. */
.demo-theme-switcher {
	--switcher-accent: #1889b5;
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	font-family: Montserrat, Poppins, Arial, sans-serif;
	transform: translateY(-50%);
}

.demo-theme-toggle {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(18, 39, 51, .1);
	border-right: 0;
	border-radius: 16px 0 0 16px;
	color: #fff;
	background: var(--switcher-accent);
	box-shadow: 0 12px 30px rgba(12, 38, 52, .2);
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}

.demo-theme-toggle:hover { transform: translateX(-3px); }
.demo-theme-toggle svg { width: 21px; height: 21px; }

.demo-theme-panel {
	width: 222px;
	margin-right: -222px;
	padding: 19px;
	border: 1px solid rgba(18, 39, 51, .1);
	border-right: 0;
	border-radius: 18px 0 0 18px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 18px 55px rgba(12, 38, 52, .18);
	backdrop-filter: blur(18px);
	transition: margin-right .3s cubic-bezier(.2, .8, .2, 1);
}

.demo-theme-switcher.is-open .demo-theme-panel { margin-right: 0; }
.demo-theme-switcher.is-open .demo-theme-toggle { border-radius: 16px 0 0 16px; }

.demo-theme-kicker {
	display: block;
	margin-bottom: 3px;
	color: #7a8b94;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.demo-theme-title {
	margin: 0 0 14px;
	color: #163545;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
}

.demo-theme-options { display: grid; gap: 8px; }

.demo-theme-option {
	display: grid;
	grid-template-columns: 31px 1fr 17px;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 8px;
	border: 1px solid transparent;
	border-radius: 11px;
	color: #294755;
	background: transparent;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.demo-theme-option:hover { background: #f2f6f7; }
.demo-theme-option.is-active {
	border-color: color-mix(in srgb, var(--option-color) 32%, white);
	background: color-mix(in srgb, var(--option-color) 8%, white);
}

.demo-theme-swatch {
	width: 31px;
	height: 31px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--option-dark) 0 48%, var(--option-color) 50% 100%);
	box-shadow: 0 0 0 1px rgba(18, 39, 51, .12);
}

.demo-theme-check {
	color: var(--option-color);
	font-size: 14px;
	font-weight: 900;
	opacity: 0;
}

.demo-theme-option.is-active .demo-theme-check { opacity: 1; }

/* Homepage surfaces that originally used fixed blue shades. */
html[data-demo-theme] body footer { background: var(--navy, var(--color-secondry)); }
html[data-demo-theme] body .cta-inner { background: linear-gradient(120deg, var(--navy), var(--blue)); }
html[data-demo-theme] body .hero { background: linear-gradient(110deg, #fff 0%, #fff 39%, var(--ice) 67%, var(--line) 100%); }
html[data-demo-theme] body .stat { background: var(--ice); }
html[data-demo-theme] body .hero-points li::before { border-color: var(--line); }
html[data-demo-theme] body footer { color: rgba(255, 255, 255, .78); }

@media (max-width: 700px) {
	.demo-theme-switcher { top: 118px; transform: none; }
	.demo-theme-toggle { width: 43px; height: 47px; }
	.demo-theme-panel { width: 205px; margin-right: -205px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.demo-theme-panel, .demo-theme-toggle { transition: none; }
}