/* Thin bar shown on top of every demo: labels it as a fictional concept and links back to the agency site. */
:root { --pf-bar: 44px; }
body.pf-has-bar { padding-top: var(--pf-bar); }
.pf-demo-bar { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; height: var(--pf-bar); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: #0B1730; color: #F3EFE7; font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.pf-demo-bar a { color: inherit; text-decoration: none; padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: background .2s; }
.pf-demo-bar a:hover { background: rgba(255,255,255,.12); }
.pf-demo-bar .pf-left, .pf-demo-bar .pf-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-demo-bar .pf-badge { background: #F2A71B; color: #0B1730; font-weight: 800; letter-spacing: .1em; font-size: 11px; padding: 6px 9px; border-radius: 6px; }
.pf-demo-bar .pf-note { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-demo-bar .pf-cta { background: #F2A71B; color: #0B1730; font-weight: 700; }
.pf-demo-bar .pf-cta:hover { background: #ff7a52; }
@media (max-width: 720px) { .pf-demo-bar .pf-note { display: none; } .pf-demo-bar { padding: 0 8px; } }