.demo-hero{padding:52px 0 64px;background:linear-gradient(180deg,#fff 0%,#f7faff 100%);border-bottom:1px solid #dce7f2}
.demo-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
.demo-hero-copy h1{font-size:clamp(38px,3.35vw,48px);line-height:1.03;max-width:670px;margin-top:14px}
.demo-hero-copy>p{font-size:17px;line-height:1.68;max-width:670px;margin-top:18px;color:#6e829f}
.demo-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.demo-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.demo-proof article{border:1px solid #d7e3f0;background:#fff;border-radius:14px;padding:16px;min-width:0}
.demo-proof strong{display:block;font-size:15px;color:#153963}.demo-proof span{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:#7286a0}
.demo-hero-media{min-width:0}.browser-frame{background:#fff;border:1px solid #cad9e9;border-radius:18px;overflow:hidden;box-shadow:0 28px 60px rgba(19,57,99,.12)}
.browser-top{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#f7f9fc;border-bottom:1px solid #dce5ef;font-size:10px;font-weight:800;letter-spacing:.05em;color:#5b7595}.browser-top span{width:9px;height:9px;border-radius:50%;background:#ff8650}.browser-top span:nth-child(2){background:#f4c155}.browser-top span:nth-child(3){background:#62c4a5}.browser-top b{margin-left:6px}.browser-frame img{width:100%;height:auto;display:block}
.demo-section-head{max-width:790px;margin:0 auto 34px}.demo-section-head h2{margin-top:12px}.demo-section-head p{margin:12px auto 0;max-width:720px}
.demo-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.demo-cap-grid article{background:#fff;border:1px solid #d8e4f0;border-radius:16px;padding:22px;min-height:190px}.demo-cap-grid article span{display:block;color:#ff6b00;font-size:12px;font-weight:900;letter-spacing:.08em}.demo-cap-grid h3{font-size:23px;margin-top:10px}.demo-cap-grid p{margin-top:8px;font-size:14px;line-height:1.65;color:#6f839f}
.demo-form-section{background:#fff}.demo-form-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:36px;align-items:start}.demo-form-copy{position:sticky;top:120px}.demo-form-copy h2{font-size:clamp(34px,3vw,46px);margin-top:12px}.demo-form-copy>p{font-size:16px;line-height:1.7;margin-top:14px;max-width:520px}.demo-mini-card{margin-top:24px;border:1px solid #d7e3ef;border-radius:16px;padding:20px;background:#f7faff}.demo-mini-card strong{display:block;color:#153963}.demo-mini-card ul{margin:12px 0 0;padding-left:18px;color:#647c9a;font-size:14px;line-height:1.7}.demo-form-card{margin:0}.demo-form-card .form-actions{margin-top:6px}
@media(max-width:1100px){.demo-hero-grid,.demo-form-layout{grid-template-columns:1fr}.demo-form-copy{position:static}.demo-cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.demo-hero{padding:34px 0 42px}.demo-hero-grid{gap:30px}.demo-hero-copy h1{font-size:38px;max-width:none}.demo-hero-copy>p{font-size:15px}.demo-proof{grid-template-columns:1fr}.demo-cap-grid{grid-template-columns:1fr}.demo-form-layout{gap:24px}.demo-form-copy h2{font-size:36px}.demo-hero-actions .btn{width:100%}.browser-top b{font-size:9px}.demo-cap-grid article{min-height:auto}}

/* Demo page alignment — match the approved inner-page spacing and remove grid treatment. */
body[data-page="demo"]{padding-top:0!important}
body[data-page="demo"] .demo-hero{
  padding:30px 0 56px;
  background:#fff;
}
body[data-page="demo"] .demo-hero::before,
body[data-page="demo"] main > section::before,
body[data-page="demo"] main > .section::before,
body[data-page="demo"] .web-grid::before{
  display:none!important;
  content:none!important;
  background:none!important;
}
@media(max-width:760px){
  body[data-page="demo"] .demo-hero{padding:24px 0 40px}
}