/* The public demo (demo.html): a gentle arrival. The page fades in (the home page fades out first, js/page-fade.js),
   the dashboard eases in, and a short welcome card says what this is before you explore. Nothing moves for people
   who ask for reduced motion. */
body { animation: demo-fade .3s ease both; }
/* Opacity only: a transform (even a finished one) would make the dashboard the frame for its fixed-position parts,
   and the guided tour's card and highlight would be placed against the page instead of the screen. */
#cs-sheet.demo-arrive { animation: demo-in .45s ease both; }
@keyframes demo-in { from { opacity: 0; } to { opacity: 1; } }

.demo-intro { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(11, 31, 77, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: demo-fade .3s ease both; }
.demo-intro[hidden] { display: none; }
.demo-intro.demo-leave { animation: demo-fade-out .25s ease both; }
@keyframes demo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes demo-fade-out { to { opacity: 0; } }
.demo-intro-card { width: min(460px, 100%); background: #fff; border-radius: 20px; padding: 24px 22px 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
  animation: demo-pop .4s cubic-bezier(.2, .8, .2, 1) .05s both; color: #0f172a; }
@keyframes demo-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.demo-intro-tag { display: inline-block; background: #fef3c7; color: #78350f; border-radius: 99px; padding: 3px 10px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.demo-intro h2 { margin: 12px 0 6px; font-size: 1.4rem; line-height: 1.25; color: #0b1f4d; }
.demo-intro p { margin: 0 0 12px; color: #475569; line-height: 1.55; }
.demo-intro ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.demo-intro li { display: flex; gap: 10px; align-items: flex-start; color: #1e293b; font-weight: 600; }
.demo-intro li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #d1fae5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.demo-intro-acts { display: grid; gap: 8px; }
.demo-intro-go, .demo-intro-skip { min-height: 48px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.demo-intro-go { background: #059669; color: #fff; border: 0; }
.demo-intro-go:hover { background: #047857; }
.demo-intro-skip { background: #fff; color: #0b1f4d; border: 1px solid #cbd5e1; }
.demo-intro-note { margin: 12px 0 0 !important; font-size: .82rem; color: #64748b !important; text-align: center; }
.demo-intro button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body, #cs-sheet.demo-arrive, .demo-intro, .demo-intro-card, .demo-intro.demo-leave { animation: none; }
}

/* Inside the home page's sample sheet: the sheet's own bar has the logo, Close and the sign-up button */
.demo-embed .demo-logo, .demo-embed .demo-cta, .demo-embed .demo-link[href="/"], .demo-embed .demo-pill, .demo-embed .demo-note, .demo-embed .demo-panel > p { display: none !important; }
.demo-embed .demo-bar { justify-content: flex-end; }
.demo-embed .demo-bar { padding-top: 6px; padding-bottom: 6px; }