/* Sticky "Motherload" bar and bottom call to action shared by all demos. Loaded after each demo's own stylesheet. */
body .demo-bar {
	position: sticky;
	top: 0;
	z-index: 90;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 20px;
	padding: 8px clamp(12px, 3vw, 28px);
	background: #0f2a3a;
	color: #f4efe6;
	border-bottom: 2px solid #e3ae4c;
	font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: left;
}
body .demo-bar a { text-decoration: none; }
body .demo-bar-home { color: #f4efe6; font-weight: 400; white-space: nowrap; }
body .demo-bar-home strong { color: #e3ae4c; letter-spacing: .03em; }
body .demo-bar-home:hover strong { text-decoration: underline; }
body .demo-bar-note { flex: 1; color: #bfd3de; text-align: center; }
body .demo-bar-note strong { color: #f4efe6; }
body .demo-bar-actions { display: flex; align-items: center; gap: 16px; }
body .demo-bar-link { color: #f4efe6; font-weight: 600; }
body .demo-bar-link:hover { text-decoration: underline; }
.demo-bar-btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 6px;
	background: #e3ae4c;
	color: #0f2a3a !important;
	font: 700 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-decoration: none;
	white-space: nowrap;
}
.demo-bar-btn:hover { background: #f0c26e; }

/* Bottom call to action. */
.demo-cta {
	padding: 72px 24px;
	background: #0f2a3a;
	color: #f4efe6;
	font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}
.demo-cta-inner { max-width: 640px; margin: 0 auto; }
.demo-cta h2 { margin: 0 0 12px; color: #e3ae4c; font: 700 clamp(28px, 5vw, 40px)/1.15 Georgia, "Times New Roman", serif; }
.demo-cta p { margin: 0 0 20px; color: #f4efe6; }
.demo-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; }
.demo-cta .demo-bar-btn { padding: 14px 28px; font-size: 16px; border-radius: 8px; }
.demo-cta-secondary { color: #f4efe6; font-weight: 600; text-decoration: underline; }
.demo-cta-back { margin: 8px 0 0; font-size: 14px; }
.demo-cta-back a { color: #bfd3de; }

@media (max-width: 640px) {
	body .demo-bar { justify-content: space-between; padding: 8px 12px; }
	body .demo-bar-note { display: none; }
	body .demo-bar-link { display: none; }
	body .demo-bar-btn { padding: 7px 12px; font-size: 12px; }
}