/* The sketch is the default; the supplied official art stays intact beneath it. */
.client-card .logo-reveal{padding:0;border:0;background:none;border-radius:6px;cursor:pointer}
.client-logo-layer{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:112px}
.client-logo-layer img{position:absolute;transition:opacity 280ms ease;pointer-events:none}
.client-card .client-logo-wrap .client-logo-sketch{width:260px;height:112px;max-width:100%;object-fit:contain;opacity:1}
.client-logo-layer .client-logo-official{opacity:0}
.logo-reveal[aria-pressed="true"] .client-logo-sketch,.logo-reveal:focus-visible .client-logo-sketch{opacity:0}
.logo-reveal[aria-pressed="true"] .client-logo-official,.logo-reveal:focus-visible .client-logo-official{opacity:1}
.client-instruction{display:block;margin-top:9px;font-size:.875rem;line-height:1.5}
@media(hover:hover) and (pointer:fine){.client-card:hover .client-logo-sketch{opacity:0}.client-card:hover .client-logo-official{opacity:1}}
@media(max-width:700px){.client-logo-layer{height:97px}.client-card .client-logo-wrap .client-logo-sketch{width:100%;height:97px;max-width:100%}}
@media(prefers-reduced-motion:reduce){.client-logo-layer img{transition:none}}

/* New symbol cards retain the original company artwork beneath each sketch. */
.company-figma .client-logo-official,.company-notion .client-logo-official,.company-linear .client-logo-official,.company-dropbox .client-logo-official,.company-spotify .client-logo-official,.company-airbnb .client-logo-official{width:84px;height:84px;object-fit:contain}
@media(max-width:700px){.company-figma .client-logo-official,.company-notion .client-logo-official,.company-linear .client-logo-official,.company-dropbox .client-logo-official,.company-spotify .client-logo-official,.company-airbnb .client-logo-official{width:72px;height:72px}}