/* Keep the interactive demo header visually aligned with the shared site navigation. */
.demo-header {
  height: 88px;
  padding: 0 7vw;
  border-bottom-color: #e1e7ef;
}

.demo-header img {
  width: 170px;
  height: 60px;
  max-height: 60px;
}

.demo-header nav {
  gap: 28px;
}

.demo-header nav a {
  padding: 0;
  color: #344768;
  font: 600 14px/normal 'DM Sans', 'Kanit', sans-serif;
}

.demo-header nav a[aria-current='page'] {
  color: #102452;
}

.demo-header > button {
  min-height: 44px;
  padding: 6px 11px;
  border-color: #b8c5d6;
  border-radius: 18px;
  color: #102452;
  font: 600 12px 'DM Sans', 'Kanit', sans-serif;
}

@media (max-width: 720px) {
  .demo-header {
    height: auto;
    min-height: 72px;
    padding: 12px 5%;
    gap: 8px;
  }

  .demo-header img {
    width: 132px;
    height: 48px;
    max-height: 48px;
  }

  .demo-header nav {
    gap: 8px;
  }

  .demo-header nav a {
    min-height: 32px;
    padding: 6px 0;
    font-size: 12px;
    line-height: 18px;
  }
}