/* "Demo site" ribbon shown on template pages when opened directly (hidden inside previews). */
.demo-pill { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(22,21,15,.92); color: #F4F1EA; font: 500 13px/1 system-ui, -apple-system, sans-serif; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); backdrop-filter: blur(8px); white-space: nowrap; }
.demo-pill a { color: #16150F; background: #F4F1EA; text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 600; }
.demo-pill a:hover { background: #D4502A; color: #fff; }
.demo-pill button { background: none; border: 0; color: #9A9387; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; }
@media (max-width: 520px) { .demo-pill { top: auto; bottom: 84px; font-size: 12px; } .demo-pill span { display: none; } }
.demo-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); z-index: 9999; max-width: min(92vw, 460px); margin: 0; padding: 14px 18px; border-radius: 14px; background: #16150F; color: #F4F1EA; font: 500 15px/1.4 system-ui, -apple-system, sans-serif; text-align: center; box-shadow: 0 14px 40px -10px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.demo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 10000; padding: 10px 16px; border-radius: 8px; background: #16150F; color: #fff; font: 600 15px/1 system-ui, sans-serif; }
.skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }