/* WorkScudo PUBLIC DEMO only (demo-app/_build.py). Banner, Demo tag and the "available at launch" states. */
.ws-demobar { background: var(--ink); color: #FFFFFF; position: relative; z-index: 31; }
.ws-demobar__in { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; max-width: 1440px; margin: 0 auto; padding: 10px 20px; }
.ws-demobar__t { margin: 0; flex: 1 1 320px; font-size: .88rem; line-height: 1.45; color: #FFFFFF; }
.ws-demobar__t b { font-weight: 700; }
.ws-demobar__t span { color: #C9D2E3; }
.ws-demobar__view { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.ws-demobar__opt { min-height: 34px; padding: 0 14px; border-radius: 999px; color: #E5EAF3; font: 600 .84rem/1 var(--f-body); white-space: nowrap; }
.ws-demobar__opt:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.ws-demobar__opt.is-on { background: #FFFFFF; color: var(--ink); }
.ws-demobar__opt:focus-visible, .ws-demobar__cta:focus-visible { outline: 2px solid #7DB0FF; outline-offset: 2px; }
.ws-demobar__cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--brand);
  color: #FFFFFF; font: 700 .86rem/1 var(--f-body); white-space: nowrap; text-decoration: none; }
.ws-demobar__cta:hover { background: #0753C4; color: #FFFFFF; }
.ws-demotag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 8px; border-radius: 6px;
  background: var(--brand-soft, #EAF2FF); color: #0753C4; font: 700 .7rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }

.ws-demolock { max-width: 560px; margin: 48px auto; text-align: center; }
.ws-demolock--sheet { margin: 0 auto; padding: 4px 0 8px; }
.ws-demolock__ic { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 50%;
  background: var(--brand-soft, #EAF2FF); color: var(--brand); }
.ws-demolock .ws-lead { margin-top: 10px; }
.ws-demolock .ws-sub { margin-top: 10px; }
.ws-demolock .ws-actions { justify-content: center; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 767px) {
  .ws-demobar__in { justify-content: center; text-align: center; padding: 10px 16px 12px; gap: 10px; }
  .ws-demobar__t { flex-basis: 100%; font-size: .82rem; }
  .ws-demobar__t span { display: block; }
  .ws-demobar__cta { display: none; }
  .ws-demotag { display: none; }
}