/* Original brand artwork: choose the variant for the surface, without recoloring. */
.platform-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.platform-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.platform-mark .platform-logo-light { display: none; }
.platform-on-dark .platform-mark .platform-logo-dark,
body:not(.app-light) .navbar-static-side .platform-mark .platform-logo-dark { display: none; }
.platform-on-dark .platform-mark .platform-logo-light,
body:not(.app-light) .navbar-static-side .platform-mark .platform-logo-light { display: block; }

.brand-logo > .platform-mark { width: 48px; height: 48px; }
.brand-logo > .platform-brand-copy { min-width: 0; }
.platform-brand-copy .brand-name { overflow-wrap: anywhere; }
.hero > .platform-mark { display: flex; width: 72px; height: 72px; margin: 0 auto 20px; }

.platform-nav-brand { display: block; text-decoration: none; }
.navbar-static-side .platform-nav-brand .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    line-height: normal;
}
.platform-nav-brand .logo-lg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
body.mini-navbar .platform-nav-brand .logo-lg { display: none; }
body.mini-navbar .navbar-static-side .platform-nav-brand .logo { padding: 0; }
.platform-nav-brand:focus-visible, .platform-mobile-brand:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.platform-mobile-brand { display: none; }

@media (max-width: 768px) {
    .platform-mobile-brand { display: inline-flex; float: left; align-items: center; justify-content: center; height: 50px; padding: 0 8px; }
}