.demo-preview { background:#eef5f5; }
.demo-preview .section-head { max-width:760px; margin-inline:auto; text-align:center; }
.demo-preview-image { display:block; max-width:1180px; margin:28px auto 0; }
.demo-preview-image img { display:block; width:100%; height:auto; border:1px solid #cbdcde; border-radius:6px; box-shadow:0 14px 36px #1b414c14; }
.demo-preview-image:focus-visible { outline:3px solid #087f80; outline-offset:5px; }
.demo-preview-actions { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px; }
.demo-preview-actions .btn,.demo-quick-entry .btn { gap:10px; min-height:46px; text-align:center; }
.demo-preview-note { text-align:center; color:#607881; font-size:12px; line-height:1.6; margin:16px 0 0; }
.hero-live-demo-link { display:inline-flex; align-items:center; gap:10px; font-weight:700; color:#087f80; font-size:14px; padding:10px 0; margin-top:6px; }
.hero-live-demo-link:hover { text-decoration:underline; }
.demo-quick-entry { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#edf5f4; }
.demo-quick-entry h2 { margin:0 0 10px; font-size:25px; }
.demo-quick-entry p { margin:0; color:#5b7480; max-width:650px; line-height:1.65; font-size:14px; }
.demo-quick-entry>.btn { flex:0 0 auto; }
.site-nav a { white-space:nowrap; }
@media (min-width:901px) and (max-width:1200px) {
  .site-header { flex-wrap:wrap; }
  .site-nav,.site-actions { display:none; }
  .mobile-menu { display:inline-grid; place-items:center; }
  .site-header.menu-open { row-gap:0; }
  .site-header.menu-open .site-nav,.site-header.menu-open .site-actions { position:static; flex:0 0 100%; width:100%; display:grid; padding:14px; border:1px solid var(--line); background:#fff; }
  .site-header.menu-open .site-nav { order:3; margin-top:14px; border-bottom:0; border-radius:8px 8px 0 0; }
  .site-header.menu-open .site-actions { order:4; border-top:0; border-radius:0 0 8px 8px; }
}
@media (max-width:700px) {
  .demo-preview-actions { flex-direction:column; align-items:stretch; }
  .demo-preview-actions .btn { font-size:13px; }
  .demo-preview-note { font-size:11px; }
  .demo-quick-entry { align-items:flex-start; flex-direction:column; }
  .demo-quick-entry h2 { font-size:22px; }
  .demo-quick-entry p { font-size:13px; }
}