.demo-page{--demo-banner-height:42px}.demo-banner{z-index:60;height:var(--demo-banner-height);background:var(--ink);color:var(--on-dark);border-bottom:1px solid var(--on-dark-line);align-items:center;display:flex;position:fixed;inset:0 0 auto}.demo-banner-inner{justify-content:space-between;align-items:center;gap:16px;width:min(1200px,100% - clamp(32px,5vw,80px));margin-inline:auto;font-size:13px;display:flex}.demo-banner-text{color:var(--on-dark-2);min-width:0;margin:0;line-height:1.4}.demo-banner-text a{color:var(--on-dark);text-underline-offset:2px;text-decoration:underline}.demo-banner-text a:hover{color:#fff}.demo-banner-tag{letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--demo-banner-accent,var(--accent));border-radius:999px;margin-right:8px;padding:2px 8px;font-size:10px;font-weight:700;display:inline-block}.demo-banner--plumbing{--demo-banner-accent:#6b2799}.demo-banner--hvac{--demo-banner-accent:#ea580c}.demo-banner-actions{flex-shrink:0;align-items:center;gap:12px;display:flex}.demo-banner-btn{border:1px solid var(--on-dark-line);color:#fff;cursor:pointer;background:#ffffff14;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;transition:background .2s,border-color .2s}.demo-banner-btn:hover{background:#ffffff24;border-color:#ffffff47}.demo-banner-link{color:#fff;white-space:nowrap;font-size:12px;font-weight:600;transition:opacity .2s}.demo-banner-link:hover{opacity:.85}@media (max-width:768px){.demo-page{--demo-banner-height:64px}.demo-banner-inner{flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding-block:8px}.demo-banner-actions{flex-wrap:wrap;justify-content:flex-start;gap:8px;width:100%}}
