/* Table of contents
 * 1. Demo banner
 * 2. Checkout hint
 * 3. Scenario grid (demo home page)
 */

/* 1. Demo banner */
.zsd-banner {
	background: #0f2250;
	color: #dbe7ff;
	font-size: 14px;
	line-height: 1.5;
	padding: 10px 16px;
	text-align: center;
}
.zsd-banner strong { color: #ffd34d; }
.zsd-banner a { color: #fff; text-decoration: underline; }

/* 2. Checkout hint */
.zsd-hint {
	background: #fffbea;
	border-bottom: 1px solid #f3e3a1;
	color: #4a4f5c;
	font-size: 15px;
	padding: 12px 16px;
	text-align: center;
}

/* 3. Scenario grid (demo home page) */
.zsd-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	margin: 32px 0;
}
.zsd-card {
	background: #fff;
	border: 1px solid #e3e8f0;
	border-radius: 18px;
	color: #18202f;
	display: flex;
	flex-direction: column;
	padding: 26px;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}
.zsd-card:hover { box-shadow: 0 18px 40px rgba(15, 34, 80, .12); transform: translateY(-3px); }
.zsd-card .zsd-tag {
	align-self: flex-start;
	background: #eaf2fe;
	border-radius: 999px;
	color: #2c7be5;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	margin-bottom: 12px;
	padding: 3px 10px;
	text-transform: uppercase;
}
.zsd-card h3 { font-size: 20px; margin: 0 0 8px; }
.zsd-card p { color: #5b6577; flex: 1; font-size: 15px; margin: 0 0 16px; }
.zsd-card .zsd-go { color: #2c7be5; font-weight: 700; }
.zsd-login {
	background: #f5f8fd;
	border-radius: 18px;
	margin: 8px 0 32px;
	padding: 26px;
}
.zsd-login code { background: #fff; border-radius: 6px; padding: 2px 8px; }

@media (max-width: 900px) {
	.zsd-grid { grid-template-columns: 1fr; }
}