/* System demos hub — site-shell tokens. */
.sd-disclaimer { margin: 8px 0 22px; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.1); font-size: .93rem; }
.sd-grid { align-items: stretch; }
.sd-card { display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.sd-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, #0369a1, #0ea5e9); }
.sd-card--planner::before { background: linear-gradient(90deg, #047857, #10b981); }
.sd-card--ref::before { background: linear-gradient(90deg, var(--brand), #a78bfa); }
.sd-card--rdlc::before { background: linear-gradient(90deg, #c2410c, #fb923c); }
.sd-card__head { display: flex; align-items: center; gap: 12px; }
.sd-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.sd-features li { display: flex; gap: 8px; align-items: baseline; }
.sd-features li::before { content: "✓"; color: var(--ok); font-weight: 800; }
html.light-mode .sd-features li::before { color: #047857; }
.sd-card__btn { margin-top: auto; align-self: flex-start; }
.sd-services { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.sd-services > div { flex: 1 1 320px; }
.sd-services h2 { margin: 0 0 4px; font-size: 1.2rem; }
.sd-services p { margin: 0; }
@media (max-width: 560px) { .sd-card__btn { align-self: stretch; } }