/* ===========================================================================
   Brand marks
   ---------------------------------------------------------------------------
   The six platform logos on the homepage, and nothing else.

   Font Awesome ships one stylesheet of 103KB covering two thousand icons in
   three families. The site uses six of them, all from the brands family, so
   this is those six rules and that one @font-face - about a kilobyte instead
   of a hundred, and the browser fetches one webfont rather than three.

   Taken from the vendored copy in builder/assets/vendor/fontawesome. If a
   seventh is ever needed, its codepoint is in that file's all.min.css under
   .fa-NAME:before.
   =========================================================================== */

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    /* block, not swap: half a second of nothing is better than half a second
       of a letter standing in for a logo. */
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2");
}

.fab {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    /* The marks are drawn on their own baseline; without this they sit a
       little high next to the words beside them. */
    vertical-align: -.08em;
    -webkit-font-smoothing: antialiased;
}

.fa-wordpress:before   { content: "\f19a"; }
.fa-shopify:before     { content: "\e057"; }
.fa-webflow:before     { content: "\e65c"; }
.fa-wix:before         { content: "\f5cf"; }
.fa-squarespace:before { content: "\f5be"; }
.fa-hubspot:before     { content: "\f3b2"; }