/* Issue #60 — full-lifecycle stepped demo. Mobile-first; reached by scanning the
   /qr-code-rsvp QR or "See how it works". Standalone (not the marketing chrome). */
:root{
  --d-brand:#4f46e5; --d-brand-2:#6366f1; --d-ink:#1e293b; --d-soft:#64748b;
  --d-bg:#f5f5fb; --d-card:#ffffff; --d-line:#e6e6f2;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Helvetica Neue',Helvetica,Arial,system-ui,-apple-system,sans-serif;
  background:linear-gradient(180deg,#ffffff 0%,var(--d-bg) 100%);
  color:var(--d-ink);
}
.demo{
  /* svh = the SMALL viewport (always-visible area). Unlike dvh/vh it never extends under
     iOS Safari's floating toolbar, so the bottom controls stay clear of it. */
  min-height:100vh; min-height:100svh; max-width:480px; margin:0 auto;
  display:flex; flex-direction:column;
  padding:max(12px,env(safe-area-inset-top)) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
}

/* Top bar */
.demo-top{display:flex; align-items:center; justify-content:space-between; padding:6px 2px 14px}
.demo-brand{font-weight:800; font-size:18px; letter-spacing:.3px; color:var(--d-brand); text-decoration:none}
.demo-exit{font-size:13px; font-weight:600; color:var(--d-soft); text-decoration:none}
.demo-exit:hover{color:var(--d-ink)}

/* Stage */
.demo-stage{flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0}
.demo-slide{display:flex; flex-direction:column}
.demo-slide[hidden]{display:none}

/* Screenshot frame — adapts to each image's aspect (guest views are portrait,
   host create/dashboard views are landscape). */
.demo-shot{
  background:var(--d-card); border:1px solid var(--d-line); border-radius:16px;
  box-shadow:0 10px 40px rgba(30,27,75,.12); overflow:hidden;
  margin:0 auto 20px; max-width:100%; display:flex; align-items:center; justify-content:center;
}
.demo-shot img{display:block; max-width:100%; max-height:56vh; max-height:56svh; width:auto; height:auto; object-fit:contain}
.demo-shot--missing{
  width:280px; height:420px;
  background:repeating-linear-gradient(45deg,#eef0fb,#eef0fb 12px,#e6e8f6 12px,#e6e8f6 24px);
}
.demo-shot--missing img{display:none}

/* Copy */
.demo-copy{text-align:center; padding:0 6px}
.demo-eyebrow{margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--d-brand-2)}
.demo-title{margin:0 0 8px; font-size:21px; line-height:1.25; font-weight:800}
.demo-text{margin:0 auto; max-width:340px; font-size:14px; line-height:1.55; color:var(--d-soft)}

/* CTA slide */
.demo-slide--cta{align-items:center; text-align:center}
.demo-cta{padding:24px 0}
.demo-cta-title{margin:0 0 8px; font-size:24px; font-weight:800}
.demo-cta-sub{margin:0 0 22px; font-size:15px; color:var(--d-soft)}
.demo-cta-btn{
  display:inline-block; padding:14px 28px; border-radius:12px; text-decoration:none;
  background:var(--d-brand); color:#fff; font-size:16px; font-weight:700;
  box-shadow:0 8px 24px rgba(79,70,229,.35);
}
.demo-cta-btn:hover{background:#4338ca}
.demo-links{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.demo-links a{font-size:14px; font-weight:600; color:var(--d-brand-2); text-decoration:none}
.demo-links a:hover{text-decoration:underline}

/* Controls */
.demo-controls{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px}
.demo-dots{display:flex; gap:7px; flex:1; justify-content:center}
.demo-dot{width:8px; height:8px; border-radius:50%; background:#cbd0e6; transition:all .2s}
.demo-dot.is-active{background:var(--d-brand); transform:scale(1.25)}
.demo-btn{
  border:none; border-radius:10px; padding:11px 20px; font-size:14px; font-weight:700; cursor:pointer;
  font-family:inherit;
}
.demo-btn--primary{
  background:var(--d-brand); color:#fff;
  /* Glow so the main action stands out from the rest of the controls. */
  box-shadow:0 0 0 3px rgba(99,102,241,.18), 0 8px 22px rgba(79,70,229,.50);
  animation:demo-glow 2s ease-in-out infinite;
}
.demo-btn--primary:hover{background:#4338ca}
@keyframes demo-glow{
  0%,100%{box-shadow:0 0 0 3px rgba(99,102,241,.16), 0 6px 18px rgba(79,70,229,.42)}
  50%    {box-shadow:0 0 0 6px rgba(99,102,241,.28), 0 10px 26px rgba(79,70,229,.62)}
}
@media (prefers-reduced-motion:reduce){ .demo-btn--primary{animation:none} }
.demo-btn--ghost{background:transparent; color:var(--d-soft)}
.demo-btn--ghost:hover{color:var(--d-ink)}

/* Desktop: roomier so the screenshots read large. Landscape host frames (dashboard)
   are width-bound by the container; portrait guest frames stay height-bound by max-height. */
@media (min-width:560px){
  .demo{max-width:760px}
  .demo-title{font-size:24px}
  .demo-text{font-size:15px}
}