/* Footer social links (app/services/social_links.py is the markup source).
   The icon takes the footer's own link colour (currentColor), so each
   footer's colour, hover and light/dark ink carry over unchanged. */
.ss-social{display:inline-flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;vertical-align:middle}
.ss-social li{display:flex;margin:0;padding:0;list-style:none}
.ss-social__link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border-radius:6px;text-decoration:none;transition:color .15s,opacity .15s}
.ss-social__icon{display:block;width:18px;height:18px;flex-shrink:0}
.ss-social__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* Phone widths: a full 44px touch target. */
@media (max-width:767px){.ss-social__link{width:44px;height:44px}}

/* Per-footer ink, matching each footer's existing link colours. */
/* Homepage + About (dark): muted like .foot-meta, full ink on hover. */
.foot-end{display:flex;align-items:center;justify-content:center;gap:6px 14px;flex-wrap:wrap}
.foot-row .ss-social__link{color:rgba(200,196,184,.75)}
.foot-row .ss-social__link:hover{color:#E5E4E2}
/* Pricing: faint like .foot-links, brand on hover. */
.foot .ss-social__link{color:var(--faint)}
.foot .ss-social__link:hover{color:var(--brand)}
/* Legal paper pages: the list sits under the links paragraph. */
.footer > .ss-social{display:flex;margin-top:6px}
/* In-app footer: muted like .app-footer__link, gold on hover. */
.app-footer .ss-social__link{color:var(--shell-text-muted,#8A8680);width:28px;height:28px}
.app-footer .ss-social__link:hover{color:var(--shell-gold,#E5E4E2)}