[hidden] {
  display: none !important;
}

html.demo-unlocked #demo-room[hidden] {
  display: block !important;
}

html.demo-unlocked #demo-gate {
  display: none !important;
}

html:not(.demo-unlocked) body:has(#demo-gate:not([hidden])) {
  overflow: hidden;
}

.demo-header {
  padding: var(--bh-space-16) 0;
}

.demo-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-16);
}

.demo-logo {
  display: inline-flex;
}

.demo-cro {
  display: flex;
  align-items: center;
  gap: var(--bh-space-16);
}

.demo-cro-reply {
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-body-sm);
  font-weight: var(--bh-w-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.demo-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bh-space-24);
  background: var(--bh-bg-soft);
}

.demo-gate-card {
  width: 100%;
  max-width: 26rem;
  background: var(--bh-white);
  border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: var(--bh-space-40) var(--bh-space-32) var(--bh-space-32);
  text-align: left;
}

.demo-gate-greet {
  margin: 0 0 var(--bh-space-8);
  font-family: var(--bh-font-display);
  font-size: 28px;
  font-weight: var(--bh-w-black);
  color: var(--bh-ink);
  text-wrap: balance;
}

.demo-gate-intro {
  margin: 0 0 var(--bh-space-24);
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-body);
  text-wrap: pretty;
}

.demo-gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-16);
}

.demo-gate-submit {
  width: 100%;
  min-height: 44px;
}

.demo-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.demo-gate-note {
  margin: var(--bh-space-16) 0 0;
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-fine);
}

.demo-gate-noscript {
  margin: var(--bh-space-16) 0 0;
  color: var(--bh-pink-deep);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-fine);
}

.demo-room {
  padding-bottom: var(--bh-space-60);
}

.demo-menu {
  display: flex;
  align-items: center;
  gap: var(--bh-space-8);
  overflow-x: auto;
  margin-bottom: var(--bh-space-24);
  padding-bottom: var(--bh-space-4);
  -webkit-overflow-scrolling: touch;
}

.demo-menu-item {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--bh-space-12);
  min-height: 44px;
  padding: 0 var(--bh-space-16);
  border: 1.5px solid var(--bh-hairline);
  border-radius: var(--bh-r-8);
  background: var(--bh-white);
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-body-sm);
  font-weight: var(--bh-w-semibold);
  white-space: nowrap;
  transition: background-color var(--bh-dur-fast) var(--bh-ease), color var(--bh-dur-fast) var(--bh-ease), border-color var(--bh-dur-fast) var(--bh-ease);
}

.demo-menu-item:hover {
  border-color: var(--bh-body);
  color: var(--bh-ink);
}

.demo-menu-item.is-current {
  background: var(--bh-accent);
  border-color: var(--bh-accent);
  color: var(--bh-white);
  font-weight: var(--bh-w-bold);
}

.demo-menu-item.is-current .demo-menu-dot {
  display: none;
}

.demo-menu-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: var(--bh-r-pill);
}

.demo-menu-dot--pm {
  background: var(--bh-pink);
}

.demo-menu-dot--bdm {
  background: var(--bh-green);
}

.demo-app-title {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: 32px;
  font-weight: var(--bh-w-black);
  color: var(--bh-ink);
  text-wrap: balance;
}

.demo-app-line {
  margin: var(--bh-space-8) 0 0;
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-body);
  max-width: 640px;
  text-wrap: pretty;
}

.demo-app-try {
  margin: var(--bh-space-8) 0 var(--bh-space-24);
  color: var(--bh-accent-deep);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-body-sm);
  font-weight: var(--bh-w-bold);
}

#tour {
  width: 100%;
  position: relative;
}

#tour .tour-screen:not(.is-live),
#tour .tour-frame:not(.is-live) {
  width: 100%;
  height: 680px;
  overflow: hidden;
  background: var(--bh-bg-soft);
  border-radius: var(--bh-r-20);
}

/* bx-core/property-analyzer CSS loads after this file and sizes the frame for its own product
   page - !important wins the room's full-bleed width regardless, Sagi 2026-09-14. */
#tour .tour-screen.is-live,
#tour .tour-frame.is-live {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .demo-header-inner {
    flex-wrap: wrap;
  }

  .demo-cro {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 100%;
    padding: var(--bh-space-12) var(--bh-space-16) calc(var(--bh-space-12) + env(safe-area-inset-bottom, 0px));
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-nav);
  }

  .demo-cro-book {
    flex: 1 1 auto;
    text-align: center;
  }

  .demo-room {
    padding-bottom: 88px;
  }

  #tour .tour-screen:not(.is-live),
  #tour .tour-frame:not(.is-live) {
    height: 720px;
  }

  .demo-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-8);
  }

  .demo-menu-item {
    align-self: stretch;
    justify-content: center;
    padding: var(--bh-space-8) var(--bh-space-12);
    font-size: var(--bh-fs-body);
    font-weight: var(--bh-w-medium);
    white-space: normal;
    text-align: center;
  }

  .demo-menu-item .demo-menu-dot {
    flex: 0 0 var(--bh-r-6);
    width: var(--bh-r-6);
    height: var(--bh-r-6);
  }

  .demo-footer-inner {
    flex-wrap: wrap;
  }

  .demo-footer-copy {
    flex-basis: 100%;
  }
}

.demo-footer {
  border-top: 1px solid var(--bh-hairline);
  padding: var(--bh-space-24) 0 calc(var(--bh-space-24) + 88px);
}

.demo-footer-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-16);
}

.demo-footer-copy {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-fine);
  line-height: var(--bh-lh-body);
}

.demo-footer-links {
  flex: none;
  display: flex;
  gap: var(--bh-space-16);
}

.demo-footer-links a {
  color: var(--bh-body);
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-fine);
  font-weight: var(--bh-w-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 768px) {
  .demo-footer {
    padding-bottom: var(--bh-space-24);
  }
}