/* The symbol is a folded motion aperture. The original wordmark and page
   typography stay intact; every mark uses the same scalable vector master. */
.wordmark:has(.brand-symbol){display:inline-flex;align-items:center;gap:10px}
.wordmark .brand-symbol{display:block;flex:none;width:34px;height:34px;object-fit:contain}
.wordmark:has(.brand-symbol) sup{align-self:flex-start;margin-left:-7px;top:5px}
.footer-brand .wordmark .brand-symbol{width:40px;height:40px}
.app-window .wordmark:has(.brand-symbol){gap:7px}
.app-window .wordmark .brand-symbol{width:25px;height:25px}
.mock-ws i .brand-symbol{display:block;width:15px;height:15px}
.avatar-initial .brand-symbol{display:block;width:17px;height:17px}
.account-card .wordmark:has(.brand-symbol){gap:9px}
.account-card .wordmark .brand-symbol{width:31px;height:31px}
.sidebar .brand{display:flex;align-items:center;gap:9px}
.sidebar .brand .brand-symbol{display:block;flex:none;width:31px;height:31px;object-fit:contain}
.sidebar .brand sup{align-self:flex-start;margin-left:-5px}
.workspace-icon .brand-symbol{display:block;width:21px;height:21px}
@media(max-width:800px){
  .nav .wordmark:has(.brand-symbol){gap:8px}
  .nav .wordmark .brand-symbol{width:28px;height:28px}
  .footer-brand .wordmark .brand-symbol{width:36px;height:36px}
}
@media(max-width:480px){
  .nav .wordmark:has(.brand-symbol){gap:7px}
  .nav .wordmark .brand-symbol{width:24px;height:24px}
}