.demo-account-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 52px 10px 18px;
  border-bottom: 2px solid #17201c;
  background: #fff1a8;
  color: #17201c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.demo-account-banner + .header,
body:has(.demo-account-banner) .jobs-header,
body:has(.demo-account-banner) .pe-header {
  top: 44px;
}

.demo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid #725a00;
  border-radius: 999px;
  background: #fff1a8;
  color: #503f00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.demo-disclaimer {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 4px solid #725a00;
  border-radius: 7px;
  background: #fff9d9;
  color: #503f00;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

@media (max-width: 650px) {
  .demo-account-banner {
    min-height: 56px;
    padding-inline: 12px;
    font-size: 11px;
  }

  .demo-account-banner + .header,
  body:has(.demo-account-banner) .jobs-header,
  body:has(.demo-account-banner) .pe-header {
    top: 56px;
  }
}