/* Infirise AI: live demo hub and demo pages ("Try asking…" prompts, demo cards, live transcript panel). */

/* ---------- "Try asking…" prompts (hub cards on light, page hero on dark) ---------- */

.try-label { font: 600 13px/1.4 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.prompts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prompts li {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--soft); font-size: 15px; line-height: 1.5; color: var(--navy);
}
.prompts span { color: var(--muted); }

.try { display: flex; flex-direction: column; gap: 10px; }
.prompts-dark { max-width: 600px; }
.prompts-dark li { border-color: rgba(108, 184, 240, 0.3); background: rgba(108, 184, 240, 0.08); color: var(--pale); }
.prompts-dark span { color: var(--mist); }
.try-label-dark { color: var(--sky); }

/* ---------- Hub demo cards: the homepage industry card holding buttons instead of being one link ---------- */

.demo-card .demo-actions { margin-top: auto; padding-top: 6px; }
.demo-read { align-self: flex-start; font: 600 14px/1.3 var(--body); color: var(--azure-hover); }

/* ---------- Grid for the five "What to listen for" points ---------- */

.grid-listen { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 18px; }
.grid-listen .card-title { font-size: 18px; }

/* ---------- Demo page: demo card in the hero, text-chat fallback, live transcript panel ---------- */

@media (min-width: 1024px) {
  .page-hero .demo { margin-top: 24px; }
}
.chat-link { font-size: 14px; }
.live-panel {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--soft);
}
.live-head { font: 600 13px/1.4 var(--body); color: var(--indigo); }
.live-note { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* "Get a call" form beside "What this demo shows" */
.grid-call { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 56px; align-items: start; }

/* Jump target for "Read the transcript" clears the sticky header */
#transcript { scroll-margin-top: 72px; }

@media (max-width: 600px) {
  .chat-link a, .demo-read { display: inline-block; padding-block: 12px; margin-block: -12px; }
}