/* Public live-demo landing/onboarding styling. Loaded only when DEMO_MODE is on (see renderApp in
   src/index.js). Matches app.css's existing color tokens (--bg, --navy, --blue, --line, --shadow)
   for visual consistency with the rest of the app. */

.demo-hero{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 80% 8%,#e6f2fa 0,transparent 40%),radial-gradient(circle at 10% 90%,#eaf6f0 0,transparent 35%),linear-gradient(150deg,#f3f8fa,#f9fbfc)}
.demo-hero-card{width:100%;max-width:460px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px rgba(20,49,67,.14);padding:34px 30px;text-align:center}
.demo-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.demo-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35);display:inline-block}
.demo-hero-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:22px}
.demo-brand-logo{height:30px;width:auto}
.demo-brand-name{font-size:14px;font-weight:800;color:var(--navy,#123f5d);letter-spacing:.01em}
.demo-hero-title{font-size:26px;font-weight:900;color:var(--text,#142531);margin:0 0 10px;line-height:1.45}
.demo-hero-sub{font-size:14.5px;color:var(--muted,#71808b);line-height:1.9;margin:0 0 26px}
.demo-cta{font-size:16px;min-height:52px;border-radius:14px}
.demo-hero-note{font-size:11.5px;color:var(--muted,#71808b);margin:14px 0 6px;line-height:1.8}
.demo-staff-link{display:inline-block;margin-top:10px;font-size:12px;color:#93a2ab;text-decoration:none;border-bottom:1px dashed #c7d2d8}
.demo-staff-link:hover{color:var(--navy,#123f5d)}

/* Onboarding "what can I try" panel, injected inside the assistant panel once a demo guest is
   signed in (see openAssistant()/renderDemoOnboarding() in app.js). */
.demo-onboarding{background:#f6fafc;border:1px solid #dcebf1;border-radius:16px;padding:14px 16px;margin-bottom:14px}
.demo-onboarding h3{margin:0 0 4px;font-size:13.5px;font-weight:800;color:var(--navy,#123f5d)}
.demo-onboarding p{margin:0 0 12px;font-size:11.5px;color:var(--muted,#71808b)}
.demo-prompt-groups{display:flex;flex-direction:column;gap:10px}
.demo-prompt-group-label{font-size:10.5px;font-weight:800;color:#7e8d95;margin-bottom:5px}
.demo-prompt-chips{display:flex;flex-wrap:wrap;gap:6px}
.demo-prompt-chip{background:#fff;border:1px solid #d5e3ea;border-radius:999px;padding:7px 12px;font-size:12px;color:var(--navy,#123f5d);cursor:pointer;transition:.14s}
.demo-prompt-chip:hover{background:var(--navy,#123f5d);color:#fff;border-color:var(--navy,#123f5d);transform:translateY(-1px)}
.demo-onboarding-dismiss{position:absolute;left:10px;top:10px;border:0;background:transparent;color:#9aa7ae;font-size:16px;cursor:pointer;line-height:1;padding:4px}
.demo-onboarding{position:relative}

/* Non-intrusive commercial CTA, docked in the app header. */
.demo-cta-header{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #d5e3ea;color:var(--navy,#123f5d);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.14s}
.demo-cta-header:hover{background:var(--navy,#123f5d);color:#fff;border-color:var(--navy,#123f5d)}

@media(max-width:480px){
  .demo-hero-card{padding:28px 20px;border-radius:20px}
  .demo-hero-title{font-size:21px}
  .demo-cta-header span.demo-cta-full-text{display:none}
}