html {
  scroll-padding-top: 16px;
}

.demo-view [data-demo-header] {
  position: relative;
}

.demo-view [data-demo-bottom-nav] {
  position: static;
}

.demo-view [data-demo-compact-hero] {
  padding-block: clamp(32px, 4.5vw, 64px);
}

.demo-studio {
  padding: 20px clamp(20px, 4vw, 48px);
  background: #f4f5f6;
  border-top: 1px solid #dce0e5;
  color: #172435;
  font: 14px/1.5 system-ui, sans-serif;
}

.demo-studio-inner {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.demo-studio p {
  margin: 0;
}

.demo-studio p span {
  display: block;
  color: #475569;
}

.demo-studio nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.demo-studio a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #172435;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.demo-studio a:focus-visible,
.demo-view a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


.demo-clinical-notice {
  color: inherit;
  font-size: 0.875rem;
}

.demo-view summary[data-demo-question] {
  cursor: pointer;
  list-style: none;
}

.demo-view summary[data-demo-question]::-webkit-details-marker {
  display: none;
}

.demo-view summary[data-demo-question]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.demo-view details[open] .faq-icon {
  transform: rotate(180deg);
}

.demo-view [data-demo-scenic-hero] {
  min-height: clamp(480px, 68svh, 720px);
}

.demo-category-copy {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
}

.demo-view [data-demo-brand-row] {
  justify-content: center;
}