/* The social links in the footer of every marketing page (under the brand line): round and quiet on the night
   footer, filling with the brand gradient on hover. The icons are Font Awesome's brand set, which these pages load. */
.ep-social { display: flex; flex-wrap: wrap; gap: 10px; }
.ep-social a { position: relative; isolation: isolate; overflow: hidden; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(244, 245, 251, .16); border-radius: 50%; background: rgba(244, 245, 251, .04); color: rgba(244, 245, 251, .8);
  font-size: 17px; line-height: 1; text-decoration: none;
  transition: color .2s ease, border-color .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.ep-social a::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, #6B3BF2 0%, #3BC4F2 100%); opacity: 0; transition: opacity .2s ease; }
.ep-social a:hover { color: #fff; border-color: transparent; }
.ep-social a:hover::before { opacity: 1; }
.ep-social a:active { transform: scale(.95); }
.ep-social a:focus-visible { outline: 2px solid #3BC4F2; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ep-social a, .ep-social a::before { transition: none; } }