/* Own product identity; the native shell and third-party marks stay separate. */
:root{--product-mark:url('/xshop-lab/brand/source-bot.svg')}
.deck-brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0;color:#f4f4f5;white-space:nowrap;min-width:0}
.deck-brand>img{width:198px;height:auto;object-fit:contain;flex:none;max-width:100%}
.foot-mark.deck-brand>img{height:auto;width:280px}
.lab-last-card>.deck-brand{align-self:flex-start;width:100%}
.lab-last-card>.deck-brand>img{width:100%;max-width:340px;height:auto}
.product-wordmark{display:block;width:min(1240px,92vw);height:auto;line-height:0;font-size:0;letter-spacing:normal}
.product-wordmark>img{display:block;width:100%;height:auto}
.hero .stage{margin-top:calc(min(1240px,92vw) / 7.911 * -.22)}
.glogo{-webkit-mask:var(--product-mark) center/contain no-repeat;mask:var(--product-mark) center/contain no-repeat}
.btn-x>.deck-button-mark{filter:brightness(0)}
.launch-ticker>.deck-ticker-mark{display:grid;place-items:center;width:46px;height:46px;flex:none;padding:9px;border-radius:13px;background:#e9e9ed}
.deck-ticker-mark>img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0)}
#draft-art.project-fallback{filter:brightness(0);border-radius:0}
.phone .ph-top>.deck-avatar{background:#111;border:1px solid #ffffff28;padding:6px;filter:none}
.phone .dm-gc i{-webkit-mask:var(--product-mark) center/contain no-repeat;mask:var(--product-mark) center/contain no-repeat}
.phone .ph-in{width:calc(100% - 24px)}
#agents-window .rcpt-card>.agent-receipt-mark,.agent-receipt-mark{-webkit-mask:var(--product-mark) center/contain no-repeat;mask:var(--product-mark) center/contain no-repeat}
@media(max-width:560px){
 .nav .deck-brand>img{width:152px;height:auto}
 .product-wordmark{font-size:0}
 .launch-ticker>.deck-ticker-mark{width:38px;height:38px;padding:8px}
 .logo-grid>.logo-tile{min-height:124px;gap:8px;padding:12px 8px;aspect-ratio:auto;min-width:0;width:100%}
 .logo-grid>.logo-tile>img{height:38px;width:50%}
}
@media(max-width:380px){
 .nav .deck-brand>img{width:132px}
 .nav-right .btn-x{padding-inline:12px}
 .nav-right .btn-x>.deck-button-mark{display:none}
}

/* Theme-aware monochrome ecosystem marks, including both hover and keyboard focus. */
#brands-live{grid-template-columns:repeat(5,minmax(0,1fr))}
#brands-live .logo-tile{min-width:0;color:#f4f4f5;transition:background .3s,color .3s}
#brands-live .logo-tile>img{filter:brightness(0) invert(1)}
#brands-live .logo-tile>img.eco-tonal{filter:grayscale(1)}
#brands-live .eco-name{color:#b1b1b6}
#brands-live .logo-tile small{color:#8e8e95}
#brands-live .eco-pair{display:flex;align-items:center;justify-content:center;gap:12px;width:82%;height:66px;color:inherit}
#brands-live .eco-pair img{display:block;width:36%;max-width:64px;height:58px;object-fit:contain;filter:brightness(0) invert(1);transition:transform .5s var(--ease)}
#brands-live .eco-pair b{font:300 25px/1 var(--sans);color:inherit}
#brands-live .logo-tile:is(:hover,:focus-visible){background:#f4f4f5;color:#101011}
#brands-live .logo-tile:is(:hover,:focus-visible) .eco-name{color:#101011}
#brands-live .logo-tile:is(:hover,:focus-visible) small{color:#505057}
#brands-live .logo-tile:is(:hover,:focus-visible)>img:not(.eco-tonal),
#brands-live .logo-tile:is(:hover,:focus-visible) .eco-pair img{filter:brightness(0)}
#brands-live .logo-tile:focus-visible{outline:2px solid #777;outline-offset:-5px}
@media(max-width:860px){
 #brands-live{grid-template-columns:repeat(3,minmax(0,1fr))}
 #brands-live .logo-tile-connect{grid-column:span 2;aspect-ratio:auto}
}
@media(max-width:560px){
 #brands-live{grid-template-columns:repeat(2,minmax(0,1fr))}
 #brands-live .logo-tile>img{height:44px}
 #brands-live .eco-pair{height:44px;gap:18px}
 #brands-live .eco-pair img{width:44px;height:44px}
 #brands-live .eco-name{font-size:13px}
}

/* Unmodified official X toolkit SVG; geometry and proportions are preserved. */
.nav-links{align-items:center}
.social-x-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;vertical-align:middle;text-decoration:none}
.social-x-link.social-x-icon{min-width:44px}
.social-x-link>img{display:block;flex:none;width:18px;height:18px;object-fit:contain}
.social-x-link:hover>img{opacity:.75}
.social-x-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

/* Match the navigation text at rest; retain the exact official mark. */
.nav-links .social-x-icon{min-width:24px}
.nav-links .social-x-icon>img{opacity:.6;transition:opacity .2s}
.nav-links .social-x-icon:is(:hover,:focus-visible)>img{opacity:1}

/* Keep the profile beside the workspace action, within the same quiet navigation. */
.nav-right{display:flex;align-items:center;gap:12px}
.nav-right .social-x-icon{flex:none;min-width:32px;width:32px}
.nav-right .social-x-icon>img{opacity:.6;transition:opacity .2s}
.nav-right .social-x-icon:is(:hover,:focus-visible)>img{opacity:1}
@media(max-width:560px){.nav-right{gap:5px}.nav-right .social-x-icon{min-width:28px;width:28px}}
@media(max-width:380px){.nav .deck-brand>img{width:112px}.nav-right .btn-x{padding-inline:10px;font-size:11px}}

/* A social destination always carries the exact official mark and its handle. */
.social-x-link{white-space:nowrap}
.nav-right .social-x-link.social-x-icon{width:auto;min-width:0;gap:7px;font-size:13px;color:#a9a9af}
.nav-right .social-x-link.social-x-icon>img{width:16px;height:16px}
.nav-right .social-x-link.social-x-icon:is(:hover,:focus-visible){color:#f4f4f5}
@media(max-width:560px){.nav{gap:8px}.nav .deck-brand>img{width:clamp(96px,29vw,132px)}.nav-right{gap:7px}.nav-right .social-x-link.social-x-icon{width:auto;min-width:0;font-size:12px;gap:5px}.nav-right .social-x-link.social-x-icon>img{width:14px;height:14px}}
@media(max-width:380px){.nav .deck-brand>img{width:96px}.nav-right{gap:6px}.nav-right .social-x-link.social-x-icon{font-size:12px;gap:4px}.nav-right .social-x-link.social-x-icon>img{width:13px;height:13px}.nav-right .btn-x{padding-inline:9px;font-size:10px}}

/* XPAD is shorter: retain the native wordmark silhouette without stretching it. */
.product-wordmark{width:min(800px,88vw)}
.hero .stage{margin-top:calc(min(800px,88vw) / 4.063 * -.22)}
.nav .deck-brand>img{width:150px}
.foot-mark.deck-brand>img{width:210px}
.lab-last-card>.deck-brand>img{max-width:260px}
@media(max-width:560px){.nav .deck-brand>img{width:clamp(82px,23vw,104px)}}
@media(max-width:380px){.nav .deck-brand>img{width:82px}}