.tandt-sc-banner {
	background: linear-gradient(100deg, var(--tandt-navy, #0F172A) 0%, #16233f 100%);
	color: #E2E8F0;
	position: relative;
}
.tandt-sc-banner-inner {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 2.75rem 0.65rem 1rem;
	text-align: left;
}
.tandt-sc-banner-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #7DD3FC;
}
.tandt-sc-banner-icon svg { width: 15px; height: 15px; }
.tandt-sc-banner-text {
	margin: 0;
	flex: 1;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.5;
	color: #E2E8F0;
}
.tandt-sc-banner-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-left: 0.5em;
	font-weight: 700;
	color: #7DD3FC;
	white-space: nowrap;
}
.tandt-sc-banner-link svg { width: 13px; height: 13px; transition: transform var(--tandt-transition, 180ms ease); }
.tandt-sc-banner-link:hover { color: var(--tandt-white, #fff); }
.tandt-sc-banner-link:hover svg { transform: translateX(3px); }
.tandt-sc-banner-dismiss {
	position: absolute;
	top: 50%;
	right: 0.85rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: rgba(226, 232, 240, 0.7);
	cursor: pointer;
	transition: background var(--tandt-transition, 180ms ease), color var(--tandt-transition, 180ms ease);
}
.tandt-sc-banner-dismiss svg { width: 12px; height: 12px; }
.tandt-sc-banner-dismiss:hover { background: rgba(255, 255, 255, 0.12); color: var(--tandt-white, #fff); }
.tandt-sc-banner.is-dismissed { display: none; }

/* Mobile: drop the icon (the room it needs matters more than the
   decoration at this width) and tighten padding so the bar reads as a
   single compact strip instead of a tall block that pushes the hero
   down the screen. The CTA is part of the same text flow (an inline
   link, not a separate stacked button), so it wraps naturally with
   the sentence instead of dropping onto its own line with a large
   gap underneath. */
@media (max-width: 640px) {
	.tandt-sc-banner-icon { display: none; }
	.tandt-sc-banner-inner { padding: 0.55rem 2.5rem 0.55rem 0.9rem; }
	.tandt-sc-banner-text { font-size: 0.84rem; }
	.tandt-sc-banner-dismiss { right: 0.6rem; }
}