/* =========================
   PetDentify · Demo (tap-to-call)
   Depends on: base.css, components.css, header.css
   ========================= */

.demo-wrap{
  max-width: 760px;
  margin: 56px auto 72px;
  padding: 0 20px;
}

.demo-card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:16px;
  padding:24px;
  text-align:center;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.demo-card:hover{
  border-color:#e3e8ee;
  box-shadow:0 8px 22px rgba(2,6,12,.08);
  transform: translateY(-1px);
}

.demo-card h1{
  margin:0 0 8px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight:800;
  letter-spacing:-.01em;
}
.demo-card .lead{
  margin:0 0 18px;
  color:#475467;
}

/* Phone mockup */
.phone-mockup{
  display:flex;
  justify-content:center;
  margin:20px 0;
}
.phone-mockup .screen{
  background:#0b0b0b;
  color:#fff;
  width:260px;
  padding:24px 18px;
  border-radius:28px;
  box-shadow:0 12px 28px rgba(2,6,12,.18);
  text-align:center;
}
.phone-mockup .muted{ color:#d1d5db; font-size:14px; margin-bottom:8px; }
.phone-mockup .demo-number{
  font-size:20px;
  font-weight:700;
  letter-spacing:.03em;
  margin:12px 0 18px;
  color:#fff;
}

/* Buttons inside demo */
.demo-btn{
  min-width: 220px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:12px 18px;
  font-weight:700;
  text-align:center;
}
.demo-btn::before{
  content:"📞";
  margin-right:8px;
  font-size:16px;
}

/* Tiny disclaimer */
.tiny{ font-size:12px; }
.tiny.muted{ color:#667085; }

/* Demo video section */
.demo-video{
  margin-top:48px;
  text-align:center;
}
.demo-video h2{
  font-size:22px;
  font-weight:800;
  margin:0 0 16px;
}
.demo-vid{
  background:#f9fafb;
  border:1px solid #eef2f7;
  border-radius:16px;
  padding:8px;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
}
.demo-vid__media{
  max-width:100%;
  border-radius:12px;
  display:block;
  margin:0 auto;
}
.demo-video p{
  color:#667085;
  font-size:14px;
  margin-top:12px;
}

/* Utilities */
.btn-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Responsive tweaks */
@media (max-width:640px){
  .phone-mockup .screen{ width:200px; padding:18px 14px; }
  .phone-mockup .demo-number{ font-size:18px; }
  .demo-btn{ min-width:180px; }
}