.demo-only { display: none; }
.public-demo .demo-only { display: block; }
.demo-banner { max-width: 90rem; width: 100%; margin: 0 auto; padding: .25rem clamp(1rem, 3vw, 2rem); background: #f2eade; border-bottom: 1px solid #d8cdbd; color: #352d24; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.demo-banner [hidden] { display: none !important; }
.demo-banner p { margin: .3rem 0; }
.demo-banner-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .25rem 1.5rem; }
.demo-banner-copy { flex: 1; min-width: 0; padding-block: .4rem; }
.demo-options { flex: 0 1 auto; margin: 0; border: 0; }
.demo-options summary { min-height: 44px; padding: .65rem .25rem; cursor: pointer; font-size: .875rem; font-weight: 650; }
.demo-options-body { max-width: 30rem; padding-bottom: .75rem; }
.demo-badge { display: inline-block; color: #625039; font-weight: 700; margin-right: .5rem; }
.demo-expiry { color: #675b4c; font-size: .875rem; }
.demo-controls, .demo-confirm-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.demo-banner .demo-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem .85rem; border: 1px solid #796c5b; border-radius: .25rem; color: #352d24; background: transparent; text-decoration: none; font: inherit; cursor: pointer; }
.demo-banner .demo-action-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.demo-banner #demo-confirm-reset { background: #a83325; border-color: #a83325; }
.demo-banner :is(a,button,summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.demo-confirmation { max-width: 30rem; }
.demo-status { padding-block: .5rem; font-weight: 600; }
.demo-intake-notice { background: #f2eade; border-left: 3px solid #a83325; padding: 1rem; margin: 1rem 0; }
.demo-intake-notice .check-control { min-height: 44px; }
@media(max-width: 48rem) {
  .demo-banner-row { align-items: center; flex-wrap: wrap; gap: .25rem .75rem; }
  .demo-banner-copy { flex: 1 1 12rem; padding-block: .2rem; }
  .demo-options { flex: 0 1 auto; }
  .demo-banner-row:has(.demo-options[open]) { flex-wrap: wrap; }
  .demo-banner-row:has(.demo-options[open]) > * { flex-basis: 100%; }
  .demo-controls { margin-top: .4rem; gap: .5rem; }
  .demo-banner .demo-action { padding: .4rem .6rem; }
  .demo-controls > .demo-action { flex: 1; }
  .demo-confirmation { width: 100%; }
}