/* Willa voice demo — section styles only. Uses the site theme variables. */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.demo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.demo-card h3 { margin-bottom: 6px; }
.demo-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-strong);
  background: var(--amber-soft);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 10px;
}
.demo-listen { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 12px; }
.demo-card audio { width: 100%; margin: 4px 0 10px; }
.demo-card details { border-top: 1px solid var(--line); padding-top: 10px; }
.demo-card summary { cursor: pointer; font-weight: 600; }
.demo-transcript { margin-top: 10px; display: grid; gap: 8px; font-size: 0.98rem; }
.demo-transcript p { margin: 0; }
.demo-transcript .who { font-weight: 700; }
.demo-note { color: var(--ink-soft); margin-top: 14px; }
.tryit {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 26px;
}
.tryit h3 { margin-bottom: 8px; }
.tryit-answer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 3.2em;
  margin: 14px 0;
}
.tryit-answer .who { font-weight: 700; }
.tryit-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tryit-row input[type="text"] {
  flex: 1 1 260px;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.tryit-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tryit-chip {
  font: inherit;
  font-size: 0.92rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.tryit-chip:hover { border-color: var(--amber); }