.topiax-example-salon,
.topiax-example-auto,
.topiax-example-cafe,
.topiax-example-coach,
.topiax-example-clinic,
.topiax-example-gym,
.topiax-example-realtor,
.topiax-example-trades,
.topiax-example-cleaning,
.topiax-example-professional,
.topiax-example-salon body,
.topiax-example-auto body,
.topiax-example-cafe body,
.topiax-example-coach body,
.topiax-example-clinic body,
.topiax-example-gym body,
.topiax-example-realtor body,
.topiax-example-trades body,
.topiax-example-cleaning body,
.topiax-example-professional body {
  max-width: 100%;
  overflow-x: clip !important;
}

.topiax-concept-disclosure {
  position: fixed;
  z-index: 2147483647;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  max-width: none;
  padding: 8px max(16px, calc(env(safe-area-inset-right) + 16px)) 8px max(16px, calc(env(safe-area-inset-left) + 16px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: rgba(17, 18, 17, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  color: #fff;
  font: 600 0/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.topiax-concept-disclosure::before {
  content: "←";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, .68);
  font-size: 15px;
}

.topiax-concept-disclosure::after {
  content: "Back to Topiax";
  margin-left: auto;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

.topiax-concept-disclosure:hover,
.topiax-concept-disclosure:focus-visible {
  background: #000;
}

.topiax-concept-disclosure:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Reserve room for the shared utility bars on standalone demos. */
html.topiax-example-salon body,
html.topiax-example-auto body,
html.topiax-example-cafe body,
html.topiax-example-coach body,
html.topiax-example-clinic body,
html.topiax-example-gym body,
html.topiax-example-realtor body,
html.topiax-example-trades body,
html.topiax-example-cleaning body,
html.topiax-example-professional body {
  padding-top: 42px;
}

html.topiax-framed body,
html[data-topiax-preview] body {
  padding-top: 0 !important;
}

/* Keep fixed/sticky demo navigation below the utility bar. */
html.topiax-example-salon [data-testid^="navbar-"],
html.topiax-example-auto [data-testid="navbar"],
html.topiax-example-coach [data-testid="site-nav"],
html.topiax-example-clinic [data-testid="navbar"],
html.topiax-example-gym [data-testid="navbar"],
html.topiax-example-trades [data-testid="site-header"],
html.topiax-example-cleaning header,
html.topiax-example-cleaning [data-testid="main-nav"],
html.topiax-example-professional [data-testid="navbar"],
html.topiax-example-realtor .navbar {
  top: 42px !important;
}

html.topiax-framed .topiax-concept-disclosure,
html[data-topiax-preview] .topiax-concept-disclosure {
  display: none !important;
}

@media (max-width: 480px) {
  .topiax-concept-disclosure {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0;
    letter-spacing: .01em;
  }

  .topiax-concept-disclosure::before {
    font-size: 14px;
  }

  .topiax-concept-disclosure::after { font-size: 10px; }
}

@media (max-width: 360px) {
  html.topiax-example-realtor .hero-grid,
  html.topiax-example-realtor .hero-copy {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.topiax-example-realtor .hero-copy {
    padding-right: 18px !important;
  }

  html.topiax-example-realtor .hero h1 {
    font-size: clamp(42px, 15vw, 50px) !important;
  }

  html.topiax-example-realtor .hero-intro {
    max-width: 100% !important;
    font-size: 13px !important;
  }
}