/* Page-only composition for social-connect.html — Social Media Connect.
   Shared rules live in assets/app.css, which loads first. Tokens only.
   Brand marks use each network's own colour — the one fixed-palette
   exception the baseline allows, since the identity itself is the content. */

.connect-intro-copy { max-width: 72ch; }
.connect-summary { color: var(--ink); font-weight: 600; }

.connect-list { display: flex; flex-direction: column; gap: var(--s-4); }

.connect-card .card-head { align-items: flex-start; }

.platform-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--surface);
}
.platform-mark.is-linkedin { background: #0A66C2; }
.platform-mark.is-facebook { background: #1877F2; }
.platform-mark.is-x        { background: #0F1419; }

.connect-body { --od-gap: var(--s-4); display: flex; flex-direction: column; }