.demo-page { --demo-ink: #0c1933; --demo-blue: #0861ed; color: #526176; background: white; }
.demo-page h1, .demo-page h2, .demo-page h3 { color: var(--demo-ink); font-family: var(--sans); }
.demo-page .eyebrow { color: var(--demo-blue); letter-spacing: .2em; }
.demo-page .container { max-width: 1160px; }
.demo-hero { padding-block: 25px 20px; background: radial-gradient(ellipse at 50% 70%, #eaf5ff, transparent 72%), linear-gradient(180deg, #fbfdff, #fff); }
.demo-intro { margin-bottom: 20px; text-align: center; }
.demo-intro .eyebrow { margin-bottom: 10px; font-size: .72rem; }
.demo-intro h1 { margin: 0 auto 10px; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; }
.demo-lead { max-width: 850px; margin: 0 auto; font-size: 1.04rem; line-height: 1.5; }
.demo-industry-intro { max-width: 850px; margin: 10px auto 0; font-size: .94rem; line-height: 1.5; }
.demo-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.demo-page .button { min-height: 46px; border-radius: 10px; font-size: .9rem; line-height: 1.3; transition: background .15s, box-shadow .15s; }
.demo-page .button:hover { transform: none; }
.demo-page .button-primary { color: white; background: var(--demo-blue); box-shadow: 0 4px 12px #0861ed20; }
.demo-page .button-primary:hover { background: #004ec6; }
.demo-page .button-outline { color: #0758d5; border-color: var(--demo-blue); background: white; }
.demo-page .button-outline:hover { background: #edf5ff; }
.demo-video-frame { position: relative; width: min(100%, 920px); aspect-ratio: 16 / 9; margin-inline: auto; background: var(--navy-dark); border: 1px solid #b9cbdc; border-radius: 12px; box-shadow: 0 12px 32px #102e5126; }
.demo-video-player { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; border: 0; border-radius: 11px; background: var(--navy-dark); }
#overview-video { scroll-margin-top: 8px; }
.demo-video-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 76px; height: 76px; padding: 0 0 0 4px; transform: translate(-50%, -50%); color: white; background: #071525d9; border: 1px solid #ffffff70; border-radius: 50%; box-shadow: 0 6px 24px #0003; font-size: 29px; cursor: pointer; }
.demo-video-play:hover { background: #0758d5; }
.demo-video-play[hidden], .demo-video-error[hidden] { display: none; }
.demo-video-error { max-width: 920px; margin: 12px auto; font-size: .88rem; }
.demo-video-error a, .demo-full-link a { text-decoration: underline; text-underline-offset: .2em; }
.demo-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 38px; margin: 16px 0 0; padding: 0; list-style: none; }
.demo-benefits li { display: flex; align-items: center; gap: 9px; color: #34445b; font-size: .82rem; font-weight: 650; }
.demo-benefits li > span { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; color: white; background: #259a58; border-radius: 50%; font-size: .85rem; }
.demo-walkthrough { padding-block: 36px 32px; background: linear-gradient(135deg, #edf6ff, #f5faff 60%, #eaf5fb); border-block: 1px solid #e3edf7; }
.demo-section-heading { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.demo-section-heading h2 { margin-bottom: 10px; font-size: clamp(1.65rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.2; }
.demo-section-heading > p:last-child { margin-bottom: 0; font-size: .98rem; }
.demo-industries { padding-block: 4px 24px; }
.demo-industries-card { max-width: 920px; margin-bottom: 0; padding: 28px 32px; background: linear-gradient(135deg, #f5faff, #edf6ff); border: 1px solid #dce5ef; border-radius: 12px; }
.demo-industries-card .eyebrow { margin-bottom: 10px; font-size: .7rem; }
.demo-industries-card h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.demo-industries-card .demo-industries-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #dce5ef; font-size: .84rem; }
.demo-full-frame { background: var(--navy-dark) url('/demos/videos/belltech-ai-voice-demo_First_Frame.png') center / contain no-repeat; }
.demo-full-frame:has(noscript iframe) > iframe { display: none; }
.demo-full-link { margin: 18px 0 0; text-align: center; font-size: .8rem; color: var(--navy); }
.demo-workflow { padding-block: 56px; }
.demo-workflow-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.demo-workflow-list li { display: flex; gap: 14px; padding: 24px 20px; background: white; border: 1px solid #e0e9f3; border-radius: 12px; box-shadow: 0 5px 20px #102e5109; }
.demo-workflow-list li > span { display: grid; flex: 0 0 36px; height: 36px; place-items: center; color: #0758d5; background: #eaf3ff; border-radius: 10px; font-size: .78rem; font-weight: 800; }
.demo-workflow-list h3 { margin: 6px 0 8px; font-size: .96rem; line-height: 1.3; }
.demo-workflow-list p { margin: 0; font-size: .84rem; line-height: 1.6; }
.demo-scope-note { margin: 24px 0 0; padding: 14px 18px; background: #f0f8f7; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; font-size: .8rem; }
.demo-cta { padding-block: 52px; color: #dce9f1; background: linear-gradient(120deg, #102e51, #123e5b 75%, #175455); }
.demo-cta-inner { display: grid; justify-items: center; text-align: center; }
.demo-cta .eyebrow { color: #99d4ce; }
.demo-cta h2 { max-width: 780px; margin-bottom: 14px; color: white; font-size: clamp(1.85rem, 3vw, 2.5rem); font-weight: 750; line-height: 1.2; }
.demo-cta-inner > p:not(.eyebrow) { max-width: 650px; margin-bottom: 24px; }
.demo-cta-actions { justify-content: center; }

@media (max-width: 900px) {
  .demo-workflow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) and (max-height: 800px) {
  .demo-hero { padding-top: 18px; }
  .demo-intro { margin-bottom: 16px; }
  .demo-video-frame { max-width: 840px; }
  .demo-full-frame { max-width: 920px; }
}

@media (max-width: 580px) {
  .demo-page .container { width: calc(100% - 28px); }
  .demo-hero { padding-block: 22px 22px; }
  .demo-intro { text-align: left; margin-bottom: 18px; }
  .demo-intro .eyebrow { font-size: .67rem; margin-bottom: 12px; }
  .demo-intro h1 { max-width: 400px; margin-bottom: 12px; font-size: clamp(1.85rem, 8.2vw, 2.8rem); line-height: 1.12; }
  .demo-lead { font-size: .93rem; line-height: 1.5; }
  .demo-industry-intro { font-size: .86rem; }
  .demo-hero-actions { gap: 8px; margin-top: 18px; }
  .demo-hero-actions .button { flex: 1 1 145px; gap: 6px; min-height: 48px; padding: 9px 7px; font-size: .75rem; }
  .demo-hero-actions .button > span:last-child { max-width: 132px; }
  .demo-video-frame { border-radius: 9px; }
  .demo-video-player { border-radius: 8px; }
  .demo-video-play { width: 58px; height: 58px; font-size: 23px; }
  .demo-benefits { flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin-top: 16px; }
  .demo-benefits li { flex: 1; flex-direction: column; gap: 6px; text-align: center; font-size: .69rem; line-height: 1.35; }
  .demo-benefits li > span { flex-basis: 20px; width: 20px; height: 20px; }
  .demo-walkthrough { padding-block: 28px; }
  .demo-section-heading { margin-bottom: 20px; }
  .demo-section-heading > p:last-child { font-size: .9rem; }
  .demo-industries-card { margin-bottom: 0; padding: 22px 18px; text-align: left; }
  .demo-workflow { padding-block: 36px; }
  .demo-workflow-list { grid-template-columns: 1fr; gap: 12px; }
  .demo-workflow-list li { padding: 20px; }
  .demo-cta { padding-block: 36px; }
}