body.production-preview > header {
  min-height: 76px;
  padding: 8px 28px;
}

body.production-preview > header .brand-logo {
  width: 60px;
  height: 60px;
}

body.production-preview > header .trial,
body.production-preview > header .role-toggle,
body.production-preview #office-space > .notice {
  display: none !important;
}

body.production-preview .pv-toggle,
body.production-preview .pv-footnote {
  display: none !important;
}

.production-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #30363c;
}

.production-brand strong {
  font: 700 18px/1.1 Georgia, serif;
}

.production-brand span {
  color: #5e6870;
  font-size: 12px;
  font-weight: 700;
}

.production-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.production-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #4d545a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.production-account .identity {
  color: #30363c;
  font-size: 13px;
  font-weight: 750;
}

.production-logout {
  border: 1px solid #8c98a3;
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  color: #30363c;
  padding: 8px 11px;
  font-weight: 700;
}

body.production-preview main {
  padding-top: 24px;
}

@media (max-width: 700px) {
  body.production-preview > header { padding: 8px 14px; }
  .production-brand span, .production-account .identity { display: none; }
  .production-account { gap: 8px; }
  .production-logout { padding: 8px 9px; }
}