/* demo.css — only on demo sites (site.json "demo": true), linked after site.css,
   so a client site's stylesheet stays byte for byte as it was: the ROGR banner
   above the page and the placeholder where the contact form would be, in ROGR's
   palette rather than the site's accent. */
.demo-banner { background: #1f2324; color: #fff; font: 400 .875rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: normal; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.25rem; padding-top: .55rem; padding-bottom: .55rem; }
.demo-banner p { margin: 0; }
.demo-what strong { display: inline-block; margin-right: .4rem; color: #fff; }
.demo-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.demo-banner a { color: #8fd3f5; font-weight: 600; }
.demo-banner a.demo-cta { color: #fff; background: #0079b5; padding: .25rem .8rem; border-radius: 999px; text-decoration: none; }
.demo-banner a.demo-cta:hover { background: #008cd2; }
.demo-form { border: 2px dashed var(--line); border-radius: 10px; background: var(--bg-alt); padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; text-align: center; min-height: 14rem; }
.demo-form h3 { margin-top: 0; }
.demo-form p { color: var(--muted); max-width: 22rem; margin: 0 auto; }