/* Public demo card. Selections remain wired to the existing voice transport. */
.marketing-light .demo-card { padding: 26px; border-radius: 20px; }
.marketing-light .demo-card h2 { font-size: clamp(28px, 2.7vw, 40px); font-weight: 750; letter-spacing: -1.4px; margin: 26px 0 8px; }
.demo-card .demo-subtitle { color: #7a7e8b; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.35; margin: 0 0 25px; }
.demo-card .demo-label { font-size: 17px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 12px; }
.demo-card svg { width: 24px; height: 24px; flex-shrink: 0; }
.marketing-light .demo-card .demo-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.marketing-light .demo-card .demo-option { border: 1px solid transparent; border-radius: 40px; background: #f8f7f5; padding: 12px 8px; justify-content: center; gap: 10px; font-size: 14px; color: #191b22; }
.demo-card .scenario-icon { display: flex; }
.demo-card .selected-check { display: none; font-size: 23px; line-height: 1; color: #9d50dc; }
.marketing-light .demo-card .demo-option[aria-pressed=true] { background: #f5effa; border-color: transparent; color: #743195; font-weight: 600; }
.demo-option[aria-pressed=true] .scenario-icon { display: none; }
.demo-option[aria-pressed=true] .selected-check { display: inline; }
.marketing-light #demo-description { min-height: 38px; margin: 16px 0 20px; color: #7a7e8b; }
.demo-packages-section { border-top: 1px solid #e6e4e8; padding-top: 20px; }
.demo-card #demo-package[hidden] { display: none; }
.demo-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f5f4f6; border-radius: 14px; }
.marketing-light .demo-packages button { display: flex; flex-direction: column; gap: 2px; padding: 7px 5px; border: 1px solid transparent; border-radius: 13px; color: #191b22; background: transparent; min-width: 0; font-size: 14px; }
.marketing-light .demo-packages button:hover { background: #eee9f2; color: #191b22; }
.marketing-light .demo-packages button[aria-pressed=true] { border-color: #9d50dc; background: white; box-shadow: 0 0 0 1px #9d50dc22; }
.demo-packages button > span { color: #7a7e8b; font-size: 11px; font-weight: 400; }
.demo-packages strong { font-weight: 700; white-space: nowrap; }
.demo-packages .package-check { color: #9d50dc; display: none; }
.demo-packages [aria-pressed=true] .package-check { display: inline; }
.demo-packages-section .muted { color: #7a7e8b; margin: 8px 0; font-size: 12px; }
.marketing-light .demo-card .demo-talk-actions { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 8px; }
.marketing-light .demo-card #demo-start { width: 86px; height: 86px; padding: 20px; border: 2px solid white; border-radius: 50%; color: #8034a6; background: #eee2fa; box-shadow: 0 0 0 8px #f8f4fb, 0 8px 22px #66398018; }
.marketing-light .demo-card #demo-start svg { width: 36px; height: 36px; }
.marketing-light .demo-card #demo-start:hover { background: #e3cef6; color: #6f258f; }
.demo-talk-label { font-size: 17px; font-weight: 700; color: #191b22; margin-top: 7px; }
.demo-active .demo-talk-label { display: none; }
.marketing-light .demo-card #demo-stop { border-radius: 30px; background: #26272a; font-size: 15px; padding: 12px 25px; }
.demo-card.demo-active #demo-start { display: none; }
.marketing-light #demo-status { text-align: center; color: #7a7e8b; margin: 8px 0 16px; }
.marketing-light .demo-card .demo-disclosure { text-align: center; color: #7a7e8b; margin-bottom: 0; font-size: 11px; line-height: 1.45; }
@media (min-width: 761px) and (max-width: 1100px) {
  .marketing-light .demo-card .demo-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-packages strong { font-size: 12px; }
  .demo-packages button > span { font-size: 10px; }
}
@media (max-width: 420px) {
  .marketing-light .demo-card { padding: 18px; }
  .marketing-light .demo-card .demo-option { font-size: 12px; gap: 5px; padding: 10px 5px; }
  .demo-card .scenario-icon svg { width: 19px; height: 19px; }
  .demo-packages strong { font-size: 12px; }
  .demo-packages button > span { font-size: 10px; }
}
/* On phones, lead with the interactive demo instead of the marketing copy. */
@media(max-width:760px){
 .marketing-light .hero{padding:8px 4% 32px;gap:28px}
 .marketing-light .hero .demo-card{order:-1;padding:16px;border-radius:18px}
 .marketing-light .demo-card .card-top,.marketing-light .demo-card .demo-subtitle{display:none}
 .marketing-light .demo-card h2{font-size:25px;letter-spacing:-.8px;margin:0 0 16px}
 .marketing-light .demo-card .demo-label{font-size:14px;margin:0 0 8px}
 .marketing-light .demo-card .demo-options{gap:7px}
 .marketing-light .demo-card .demo-option{min-height:44px;padding:9px 5px;font-size:13px;gap:6px}
 .marketing-light #demo-description{min-height:0;font-size:12px;line-height:1.4;margin:10px 0 12px}
 .marketing-light .demo-packages-section{padding-top:12px}
 .marketing-light .demo-packages button{min-height:46px;padding:6px 4px}
 .marketing-light .demo-packages-section>.muted{display:none}
 .marketing-light .demo-card .demo-talk-actions{margin:16px 0 6px;gap:5px}
 .marketing-light .demo-card #demo-start{width:64px;height:64px;padding:15px;box-shadow:0 0 0 5px #f8f4fb}
 .marketing-light .demo-card #demo-start svg{width:30px;height:30px}
 .marketing-light .demo-talk-label{font-size:15px;margin-top:3px}
 .marketing-light #demo-status{font-size:11px;line-height:1.4;margin:4px 0 12px}
 .marketing-light .demo-card .demo-disclosure{font-size:10px;line-height:1.4}
 .marketing-light .hero>.hero-copy{padding-top:0}
}

.mobile-demo-intro,.mobile-demo-disclosure{display:none}
@media(max-width:760px){
 .marketing-light .mobile-demo-intro{display:block;padding:6px 5% 12px}
 .marketing-light .mobile-demo-intro h2{font-size:23px;font-weight:700;line-height:1.18;letter-spacing:-.7px;margin:0 0 5px;color:#191b22}
 .marketing-light .mobile-demo-intro p{font-size:13px;line-height:1.4;color:#7a7e8b;margin:0}
 .marketing-light .hero #live-demo{padding-top:16px}
 .marketing-light #live-demo>h2{display:none}
 .marketing-light .desktop-demo-disclosure{display:none}
 .marketing-light .mobile-demo-disclosure{display:block;text-align:center;color:#7a7e8b;font-size:10px;line-height:1.4}
 .mobile-demo-disclosure>p{margin:6px 0}
 .mobile-demo-disclosure details{border:0;padding:2px 0 0}
 .mobile-demo-disclosure summary{font-size:11px;color:#79529a;cursor:pointer;min-height:28px;padding:6px}
 .mobile-demo-disclosure details p{font-size:10px;line-height:1.5;margin:8px 0 0}
 .marketing-light .site-header.nav-enhanced button.mobile-menu-toggle{background:#EEE5F6;color:#684184;border-color:transparent;box-shadow:none;background-image:none}
 .marketing-light .site-header.nav-enhanced button.mobile-menu-toggle:hover{background:#E3D4EF;color:#684184;filter:none}
}