.vespera-demo-notice { position: sticky; top: 0; z-index: 2147480000; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem 1.2rem; min-height: 64px; margin: 0; padding: .65rem clamp(.75rem,2vw,1.25rem); border-bottom: 1px solid #aa83da55; color: #f5f3ff; background: #100d18f7; box-shadow: 0 8px 28px #0005; backdrop-filter: blur(14px); font: 14px/1.5 system-ui, sans-serif; text-align: left; box-sizing: border-box; }
.vespera-demo-notice strong { color: #c4b5fd; font-weight: 650; }
.vespera-demo-notice a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.vespera-demo-notice a:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; }
.vespera-demo-notice.is-enhanced { justify-content: space-between; flex-wrap: nowrap; }
.vespera-demo-back { flex: 0 0 auto; gap: .45rem; padding: .25rem .7rem; border: 1px solid #c4b5fd4d; border-radius: 5px; background: #ffffff05; }
.vespera-demo-back:hover { border-color: #c4b5fd99; background: #c4b5fd12; }
.vespera-demo-context { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .1rem .65rem; min-width: 0; color: #c8c2d0; }
.vespera-demo-context > span { font-size: .75rem; }
.vespera-demo-conversion { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-left: auto; white-space: nowrap; }
.vespera-demo-conversion > span { color: #cfc7da; font-size: .78rem; }
.vespera-demo-conversion .vespera-demo-contact { gap: .6rem; padding: .25rem .8rem; border: 1px solid #b994e76b; border-radius: 5px; background: linear-gradient(120deg,#9862d82b,#9862d80d); color: #f0e3ff; font-weight: 650; }
.vespera-demo-conversion .vespera-demo-contact:hover { border-color: #d0aaff; background-color: #a873e31c; }
.vespera-demo-form-note { color: inherit; font: 15px/1.6 system-ui, sans-serif; margin: 0 0 1rem; }
.vespera-demo-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.vespera-demo-fields :disabled { cursor: not-allowed; }
/* Long example headings must fit small screens, including utility pages. */
body { overflow-wrap: anywhere; }
.utility-page > *, .hero-content { min-width: 0; max-width: 100%; }
/* Keep fixed template headers from covering the demo disclosure. */
.vespera-demo-notice ~ .site-header { position: sticky; top: var(--vespera-demo-toolbar-height,64px); }
/* A failed or disabled script leaves ordinary navigation, without inert menu buttons. */
html:not(.js) .site-header { position: relative; }
html:not(.js) .site-header .header-inner { flex-wrap: wrap; }
html:not(.js) .site-header .nav-toggle,
html:not(.js) .site-header .menu-toggle,
html:not(.js) .site-header .nav-close { display: none; }
html:not(.js) .site-header .site-nav,
html:not(.js) .site-header .main-nav { position: static; display: flex; flex-wrap: wrap; width: 100%; max-height: none; height: auto; visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 700px) {
  .vespera-demo-notice { min-height: 112px; }
  .vespera-demo-notice.is-enhanced { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .35rem .65rem; }
  .vespera-demo-context { justify-content: flex-start; align-content: center; line-height: 1.3; }
  .vespera-demo-context > span { display: none; }
  .vespera-demo-conversion { grid-column: 1/-1; width: 100%; justify-content: space-between; margin: 0; white-space: normal; }
  .vespera-demo-conversion > span { font-size: .72rem; }
  .vespera-demo-conversion .vespera-demo-contact { flex: 0 0 auto; min-height: 40px; padding-inline: .7rem; font-size: .75rem; }
}