.business-demos { margin: 40px 0 60px; }
.demo-intro { max-width: 720px; margin-bottom: 28px; }
.demo-intro h3 { font: 600 clamp(25px, 3vw, 34px)/1.2 'Space Grotesk', sans-serif; color: var(--navy); margin: 0 0 14px; }
.demo-intro > p:last-child { color: #52657d; font-size: 14px; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.business-demo { min-width: 0; padding: 26px; border: 1px solid #d3e2ec; border-radius: 22px; background: #fff; box-shadow: 0 18px 44px -32px #082b5755; display: flex; flex-direction: column; }
.demo-heading { display: flex; align-items: start; gap: 12px; min-height: 76px; }
.demo-heading > span { font-size: 12px; color: #237b32; padding-top: 4px; }
.demo-heading h4 { margin: 0; color: #082b57; font: 600 23px/1.25 'Space Grotesk', sans-serif; }
.demo-stage { overflow: hidden; min-height: 342px; background: #f1f6f9; border: 1px solid #d5e3eb; border-radius: 14px; color: #163b34; }
.demo-browser-bar, .demo-app-head { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #e6efef; font-size: 12px; min-height: 44px; }
.demo-browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #739b89; }
.demo-browser-bar > span { margin-left: auto; font-size: 11px; }
.demo-app-head { justify-content: space-between; font-weight: 700; flex-wrap: wrap; }
.demo-app-head > span { font-size: 10px; font-weight: 400; }
.demo-site, .demo-booking, .demo-checkout, .demo-workflow { padding: 18px; }
.demo-site-brand { font-family: Georgia, serif; font-size: 22px; line-height: 1.2; }
.demo-site-brand small { display: block; font: 9px/1.8 'DM Sans', sans-serif; letter-spacing: 1.5px; }
.demo-garden { margin: 12px 0; border-radius: 8px; overflow: hidden; }
.demo-garden svg { width: 100%; height: 108px; display: block; }
.demo-site strong { font-size: 15px; }
.demo-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; font-size: 10px; color: #456b5f; }
.demo-services span { padding: 4px 7px; background: #e3eee7; border-radius: 5px; }
.demo-cta { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #245d47; color: #fff; border-radius: 7px; padding: 10px 14px; font-size: 12px; font-weight: 700; }
.demo-booking > p { margin: 0 0 14px; font-size: 13px; }
.demo-times { display: flex; gap: 7px; margin-bottom: 22px; }
.demo-times > span { flex: 1; text-align: center; padding: 10px 3px; background: white; border: 1px solid #cadcd4; border-radius: 6px; font-size: 11px; white-space: nowrap; }
.demo-times .demo-chosen { background: #245d47; color: white; }
.demo-notice, .demo-flow-item { display: flex; gap: 10px; align-items: center; border: 1px solid #d0e2d7; background: #fff; border-radius: 10px; padding: 13px; }
.demo-notice + .demo-notice { margin-top: 16px; }
.demo-reminder { background: #e6f0e6; }
.demo-symbol { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #dcebd8; color: #245d47; font-size: 14px; }
.demo-notice strong, .demo-flow-item strong { display: block; font-size: 13px; line-height: 1.4; }
.demo-notice small, .demo-flow-item small { display: block; color: #526b61; font-size: 11px; margin-top: 4px; }
.demo-order { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; font-size: 14px; }
.demo-order > strong { font-size: 25px; }
.demo-order small { font-size: 10px; color: #526b61; }
.demo-card-line { display: flex; justify-content: space-between; padding: 12px; background: #fff; border: 1px solid #cadcd4; border-radius: 6px; font-size: 12px; margin-bottom: 10px; }
.demo-checkout > .demo-notice { margin-top: 20px; }
.demo-flow-line { width: 2px; height: 18px; margin-left: 27px; background: #72a388; transform-origin: top; }
.demo-steps { font-size: 11px; color: #237b32; margin: 18px 0 0; line-height: 1.8; }
.demo-caption { font-size: 14px; color: #52657d; margin: 10px 0 16px; }
.demo-replay { align-self: start; margin-top: auto; min-height: 44px; border: 1px solid #c9d9e7; border-radius: 7px; background: white; padding: 8px 12px; color: #1257a6; cursor: pointer; font: 600 12px 'DM Sans',sans-serif; }
.demo-replay:disabled { color: #52657d; cursor: default; }
.demo-security { padding: 16px; }
.demo-security-tabs { display: flex; gap: 6px; }
.demo-security-tabs button { flex: 1; min-height: 44px; padding: 6px; border: 1px solid #cbd9cf; border-radius: 7px; background: #fff; color: #245d47; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.demo-security-tabs button[aria-selected="true"] { background: #245d47; color: #fff; }
.demo-security-note { font-size: 10px; color: #526b61; margin: 10px 0 16px; }
.demo-security [role="tabpanel"] { min-height: 262px; }
.demo-security [hidden] { display: none; }
.demo-camera-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-camera-grid > div { min-width: 0; }
.demo-camera-grid strong, .demo-lock-card strong, .demo-access-card > strong { display: block; font-size: 13px; }
.demo-camera-grid small, .demo-lock-card small { display: block; font-size: 11px; color: #526b61; }
.demo-camera-grid .demo-garden { margin: 10px 0; }
.demo-camera-grid svg { height: 108px; }
.demo-status-pill { display: inline-block; border-radius: 5px; padding: 4px 6px; font-size: 10px; background: #deedda; color: #245d47; }
.demo-unlocked { background: #f6e8cc; color: #775520; }
.demo-security-summary { font-size: 12px; color: #526b61; margin: 18px 0 0; }
.demo-lock-card { display: flex; gap: 10px; align-items: center; padding: 18px 12px; border: 1px solid #d0e2d7; background: white; border-radius: 9px; margin-bottom: 12px; }
.demo-lock-card > div { flex: 1; min-width: 0; }
.demo-lock-icon { font-size: 23px; color: #497b5b; }
.demo-access-card { background: #fff; border: 1px solid #d0e2d7; border-radius: 10px; padding: 14px; }
.demo-access-card dl { margin: 12px 0; font-size: 11px; }
.demo-access-card dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; padding: 5px 0; }
.demo-access-card dd { margin: 0; font-weight: 600; }
.demo-access-confirm { display: flex; gap: 9px; align-items: center; font-size: 12px; color: #245d47; }
.demo-access-pending .demo-access-confirm { visibility: hidden; }
@media (max-width: 400px) {
  .demo-security { padding: 10px; }
  .demo-camera-grid { gap: 8px; }
  .demo-lock-card { padding: 14px 8px; gap: 6px; }
  .demo-lock-icon { display: none; }
}
.demo-credit { color: #52657d; font-size: 11px; margin-bottom: 12px; }
.demo-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-project-link { font-size: 12px; color: #1257a6; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.demo-camera { position: relative; }
.demo-camera svg { height: 135px; background: #deeee8; }
.demo-camera-label { position: absolute; left: 8px; bottom: 6px; font-size: 10px; padding: 3px 7px; background: #163b34; color: #fff; border-radius: 4px; }
.demo-scan { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #70cb9c; opacity: 0; }
.demo-court { background: #e6efef; border-radius: 8px; padding: 6px; margin-bottom: 12px; }
.demo-court svg { display: block; width: 100%; height: 90px; }
.demo-court > span { display: block; text-align: center; font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .demo-playing .demo-scan { animation: camera-scan 1.3s 1.5s both; }
  .demo-playing .demo-ball { animation: court-rally 1.6s .4s both; }
  @keyframes camera-scan { 0% { opacity: 0; top: 5%; } 25%, 75% { opacity: .8; } 100% { opacity: 0; top: 95%; } }
  @keyframes court-rally { 0% { transform: translate(0, 0); } 35% { transform: translate(145px, -35px); } 70% { transform: translate(15px, -20px); } 100% { transform: translate(125px, 10px); } }
  .demo-playing .demo-phase { animation: business-step .65s both cubic-bezier(.2,.7,.2,1); }
  .demo-playing .phase-one { animation-delay: .25s; }
  .demo-playing .phase-two { animation-delay: 1.4s; }
  .demo-playing .phase-three { animation-delay: 3s; }
  .demo-playing .demo-chosen { animation: choose-time 1.1s .4s both; }
  .demo-playing .demo-chosen b { animation: business-step .3s 1s both; }
  .demo-playing .demo-flow-line { animation: business-connect .8s .7s both; }
  .demo-playing .demo-flow-line:nth-of-type(4) { animation-delay: 2.1s; }
  @keyframes business-step { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes choose-time { 0% { background: #fff; color: #163b34; } 70% { box-shadow: 0 0 0 5px #a9dc5260; } 100% { background: #245d47; color: #fff; box-shadow: none; } }
  @keyframes business-connect { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@media (max-width: 700px) {
  .demo-grid { grid-template-columns: 1fr; gap: 20px; }
  .business-demo { padding: 18px; }
  .demo-heading h4 { font-size: 21px; }
  .demo-stage { min-height: 0; }
  .demo-site, .demo-booking, .demo-checkout, .demo-workflow { padding: 12px; }
  .demo-notice, .demo-flow-item { padding: 10px; gap: 7px; }
  .demo-times { gap: 4px; }
  .demo-times > span { font-size: 10px; }
}