/* The "three apps" strip, shared by /, /meetings/ and /blur-photo/.
   A file rather than three inline copies for the same reason legal-style.css is
   one: the three product pages each carry their own full stylesheet, so anything
   duplicated across them drifts. Tokens are already defined by whichever page
   loads this, so nothing here declares a colour of its own. */
.family{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.fam{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  background:var(--surface-container);border:1px solid var(--surface-high);
  border-radius:var(--r-card);padding:24px 24px 26px;
  transition:transform .22s var(--ease),border-color .2s ease}
a.fam:hover{transform:translateY(-3px);border-color:var(--outline-variant)}
.fam img{width:34px;height:34px;display:block}
.fam .nm{font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.fam .nm small{display:block;font-size:12px;font-weight:600;color:var(--outline);
  letter-spacing:.06em;margin-top:3px}
.fam .ln{font-size:14.5px;color:var(--on-surface-variant);margin:0;flex:1}
.fam .plat{font-size:12px;letter-spacing:.06em;color:var(--outline);text-transform:uppercase;
  font-weight:700}
/* The page you are already on is shown, not linked — a link back to here reads
   as a dead end when you click it. */
.fam.here{border-color:var(--primary);background:transparent}
.fam.here .plat{color:var(--primary)}