.topbar { height: auto; min-height: 86px; padding: 10px 0; gap: 24px; }
.topbar .stage-brand { min-width: 0; max-width: 540px; gap: 12px; letter-spacing: 0; flex: 1 1 auto; }
.topbar .brand-instrument { display: flex; flex: 0 0 60px; width: 60px; transform: rotate(-3deg); }
.topbar .brand-instrument svg { width: 60px; height: 60px; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-title { display: flex; align-items: center; gap: 10px; }
.topbar .stage-brand .brand-name { display: block !important; width: 190px; flex: 0 0 auto; line-height: 1; }
.brand-name > img { display: block; width: 100%; height: auto; }
.brand-tagline { display: block; max-width: 365px; white-space: normal; color: #697764; font: 450 8.6px/1.55 Playpen, sans-serif; letter-spacing: 0; }
.version-chip { display: inline-flex; justify-content: center; align-items: center; gap: 1px; padding: 6px 8px; border: 1px solid #dfc97d; border-radius: 8px 10px 7px 10px; background: #fff3bd; box-shadow: 0 2px 0 #eddfaa; font: 700 11px/1 Playpen, sans-serif; letter-spacing: 0; transform: rotate(4deg); }
.version-chip > span:nth-child(1) { color: #287f8b; }
.version-chip > span:nth-child(2) { color: #cb5b50; }
.version-chip > span:nth-child(3) { color: #5b8a62; }
.topbar .app-version { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.topbar nav { flex: 0 0 auto; }
.about-brand { display: grid; justify-items: center; gap: 10px; padding: 22px 28px 26px; text-align: center; border-bottom: 1px dashed #cdd6c8; }
.about-brand > img { width: min(100%, 410px); height: auto; }
.about-brand .info-version { margin: 0; padding: 0; border: 0; font-size: 11px; }
.info-version .version-chip { margin-left: 5px; }
.app-footer .footer-brand { display: inline-flex; align-items: center; gap: 6px; color: #647660; font-weight: 600; }
.footer-brand svg { width: 24px; height: 24px; }
.print-app-name { display: inline-flex; align-items: center; gap: 6px; }
.print-app-name > svg { width: 22px; height: 22px; flex: 0 0 22px; }
@media (max-width: 1050px) {
  .topbar { gap: 16px; }
  .topbar .brand-instrument, .topbar .brand-instrument svg { width: 48px; height: 48px; flex-basis: 48px; }
  .topbar .stage-brand .brand-name { width: 175px; }
  .brand-tagline { max-width: 320px; font-size: 8px; }
}
@media (max-width: 650px) {
  .topbar { min-height: 64px; padding: 6px 0; gap: 10px; }
  .topbar .stage-brand { gap: 7px; }
  .topbar .brand-instrument, .topbar .brand-instrument svg { width: 40px; height: 40px; flex-basis: 40px; }
  .topbar .stage-brand .brand-name { width: 153px; }
  .brand-tagline { display: none; }
  .brand-title { gap: 6px; }
  .topbar .app-version { font-size: 9px; padding: 5px 6px; }
}
@media (max-width: 450px) {
  .topbar { gap: 6px; }
  .topbar .brand-instrument, .topbar .brand-instrument svg { width: 34px; height: 34px; flex-basis: 34px; }
  .topbar .stage-brand .brand-name { width: 128px; }
  .topbar .app-version { display: none; }
}
@media print { .print-app-name > svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

/* Only the header's two voices move; the mark's outline stays steady. */
.topbar .brand-instrument .brand-voice { transform-origin: 58px 50px; animation: compatura-voice-sway 6s ease-in-out infinite; }
@keyframes compatura-voice-sway {
  0%, 36%, 100% { transform: translateY(0) rotate(0); }
  47% { transform: translateY(-1.2px) rotate(-1deg); }
  60% { transform: translateY(.4px) rotate(.6deg); }
  72% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .topbar .brand-instrument .brand-voice { animation: none; } }
@media print { .topbar .brand-instrument .brand-voice { animation: none; } }