/* ==========================================================================
   SCALE — PLATFORM BRAND ICONS
   The three messaging platforms Scale answers on, as their real brand marks:
   WhatsApp, Messenger, Instagram.

   THIS FILE IS THE ONLY PLACE THE ASSET URLS APPEAR. Everywhere else — the
   marketing templates, the app shell, the inbox JS — writes the class and
   nothing else, so re-pointing an icon is a one-line edit here and every
   surface follows. Before 1.23.0 each surface drew its own inline SVG glyph and
   they had drifted into three different WhatsApp icons and two Instagrams.

   Loaded on the public website (Scale_AI_Landing, Scale_AI_Auth_Shortcodes) and
   on the app shell (Scale_AI_Shortcode) — the marks are the same in both.

   ---- Using it ---------------------------------------------------------------
   The tile fills its host box, exactly as the `<svg>` it replaced did, so the
   host keeps deciding the size — including at breakpoints. Two shapes:

     INSET  keep the host chip and its sized `.li` wrapper, and swap the svg for
            the tile. Use inside a MIXED row, where the neighbours are still
            generic glyphs in tinted chips and the rhythm has to hold:
            <span class="sh-icochip sh-icochip--green sh-int__icon">
              <span class="li"><span class="sc-brandico sc-brandico--whatsapp"></span></span>
            </span>

     FILL   drop the host's tint modifier and the `.li` wrapper, and let the tile
            be the whole chip. Use where the chip existed only to colour-code the
            channel — an inbox avatar, a row of channel chips — because the mark
            now carries the colour itself:
            <span class="sh-inbox__ava"><span class="sc-brandico sc-brandico--whatsapp"></span></span>

   The tile is decorative: every host either sits next to the platform's name or
   carries its own aria-label, so mark the span `aria-hidden="true"` rather than
   giving it a role and repeating the label to a screen reader.
   ========================================================================== */

.sc-brandico{
    display:block;
    width:100%;
    height:100%;
    flex:none;
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:contain;
}

/* The marks. Each is a complete, self-contained tile — the blue Messenger
   bubble, the Instagram gradient square, the green WhatsApp badge — which is
   why the FILL hosts have to give up their own background: two brand colours
   stacked on each other is what this is meant to end. */
.sc-brandico--whatsapp{
    background-image:url("https://getscale.me/wp-content/uploads/2026/08/whatsapp-color-icon.png");
}
.sc-brandico--messenger{
    background-image:url("https://getscale.me/wp-content/uploads/2026/08/facebook-messenger-icon.svg");
}
.sc-brandico--instagram{
    background-image:url("https://getscale.me/wp-content/uploads/2026/08/ig-instagram-icon.svg");
}