/* The "course videos" card in the bottom-left corner (inc/promo.php). Same finish as the footer and the chatbot:
   dark #101218, accent #4175fc -> #084af3, soft radius. The chatbot's launcher owns the bottom-right corner. */
.kj-promo {
	position: fixed; left: 24px; bottom: 24px; z-index: 99990;
	box-sizing: border-box; width: 318px; max-width: calc(100vw - 48px); padding: 18px 20px 20px;
	border-radius: 18px; color: #c9cedb;
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(65, 117, 252, .42), transparent 62%),
		linear-gradient(135deg, #101218, #171b27);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 24px 50px -20px rgba(16, 18, 36, .65), 0 2px 6px rgba(16, 18, 36, .25);
	font-family: "Open Sans", sans-serif; text-align: left;
	opacity: 0; transform: translateY(18px); pointer-events: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.kj-promo[hidden] { display: none; }
.kj-promo.is-in { opacity: 1; transform: none; pointer-events: auto; }
.kj-promo p { margin: 0 !important; }
.kj-promo__eyebrow {
	display: flex; align-items: center; gap: 9px;
	font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #a9c1ff;
}
.kj-promo__badge {
	padding: 3px 9px; border-radius: 999px; background: #22c55e; color: #06270f;
	font-size: 10.5px; letter-spacing: .08em;
}
.kj-promo__title {
	margin-top: 10px !important; padding-right: 18px;
	font-family: Raleway, "Open Sans", sans-serif; font-size: 19px; line-height: 1.3; font-weight: 700; color: #fff;
}
.kj-promo__text { margin-top: 6px !important; font-size: 14px; line-height: 1.6; color: #c9cedb; }
.kj-promo a.kj-promo__button {
	display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 9px 18px 9px 10px;
	border-radius: 999px; background: linear-gradient(135deg, #4175fc, #084af3); color: #fff !important;
	font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap;
	box-shadow: 0 10px 22px -10px rgba(65, 117, 252, .9);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.kj-promo a.kj-promo__button:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(65, 117, 252, .95); }
.kj-promo__play {
	display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .2);
}
.kj-promo__play svg { width: 12px; height: 12px; }
.kj-promo button.kj-promo__close {
	position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
	width: 28px; height: 28px; min-height: 0; padding: 0; border: 0 !important; border-radius: 50% !important;
	background: rgba(255, 255, 255, .08) !important; color: #c9cedb !important; box-shadow: none !important; cursor: pointer;
	transition: background .2s ease, color .2s ease; transform: none !important;
}
.kj-promo button.kj-promo__close:hover { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.kj-promo__close svg { width: 13px; height: 13px; }
/* Phones: a slimmer card that leaves the chatbot's launcher (62px at the right) free. */
@media (max-width: 600px) {
	.kj-promo { left: 12px; bottom: 14px; width: auto; max-width: calc(100vw - 104px); padding: 14px 16px 16px; border-radius: 16px; }
	.kj-promo__title { font-size: 16.5px; }
	.kj-promo__text { display: none; }
	.kj-promo a.kj-promo__button { margin-top: 12px; padding: 8px 15px 8px 9px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .kj-promo, .kj-promo a.kj-promo__button { transition: none; } }
@media print { .kj-promo { display: none; } }