/* Who's coming, as on the app's rally page: a sample that fills up on its own (whos-coming.js).
   Used on the home page and on Features under "Proof people are coming". Everything is scoped to .who-coming. */
.who-coming{display:grid;gap:12px}
.who-coming .rt{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.who-coming .rt .thumb{width:48px;height:48px;border-radius:12px;flex:none}
.who-coming .rt .thumb .cover{width:100%;height:100%;border-radius:12px}
.who-coming .rt .thumb .cover::after{background:none}
.who-coming .rt b{display:block;font:800 18px/1.1 var(--display)}
.who-coming .rt .meta{font:500 13px var(--body);color:var(--muted)}
.who-coming .rt .sample-tag{margin-bottom:6px}
.who-coming .wc{display:flex;align-items:center;gap:8px}
.who-coming .wc h3{font:800 20px var(--body);flex:1}
.who-coming .mline{display:flex;align-items:center;gap:8px;font:600 14px var(--body);color:var(--soon);min-height:22px}
.who-coming .mline .lb{flex:none;background:var(--onair);color:#fff;font:800 11px var(--body);letter-spacing:.06em;padding:4px 9px;border-radius:99px;display:flex;align-items:center;gap:5px}
.who-coming .mline .lb i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s steps(2,start) infinite}
.who-coming .seg{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.who-coming .seg button{appearance:none;border:1px solid transparent;background:none;border-radius:12px;height:44px;font:600 16px var(--body);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .2s}
.who-coming .seg .here{color:var(--here)} .who-coming .seg .otw{color:var(--soon)} .who-coming .seg .going{color:var(--text)}
.who-coming .seg button[aria-pressed=true].here{background:rgba(63,207,142,.14);border-color:rgba(63,207,142,.45)}
.who-coming .seg button[aria-pressed=true].otw{background:rgba(255,181,71,.12);border-color:rgba(255,181,71,.4)}
.who-coming .seg button[aria-pressed=true].going{background:rgba(255,255,255,.08);border-color:var(--line-2)}
.who-coming .seg b{font-weight:600;display:inline-block}
.who-coming .list{border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:4px 14px;min-height:64px}
.who-coming .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);animation:rowin .45s var(--ease)}
.who-coming .row:first-child{border-top:0}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.who-coming .row .av{width:38px;height:38px;font-size:15px;border:0}
.who-coming .row .nm{flex:1;min-width:0}
.who-coming .row .nm b{font:700 16px var(--body);display:flex;align-items:center;gap:6px}
.who-coming .host2{font:800 10px var(--body);letter-spacing:.06em;color:var(--teal);border:1.2px solid var(--teal);border-radius:99px;padding:1px 6px}
.who-coming .row .nm span{display:block;font:500 13px var(--body);margin-top:1px}
.who-coming .s-here{color:var(--here)} .who-coming .s-otw{color:var(--soon)} .who-coming .s-going{color:var(--muted)} .who-coming .ice{color:var(--teal-text)}
.who-coming .bumpb{display:flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid var(--line);font:700 13px var(--body);color:var(--text)}
.who-coming .bumpb svg{width:14px;height:14px;color:var(--soon)}
.who-coming .more{color:var(--muted);font:900 16px var(--body);letter-spacing:1px;padding:0 2px}
.who-coming .empty{padding:16px 0;color:var(--muted);font-size:15px}
.who-coming .foot{font:500 12px/1.45 var(--body);color:var(--muted)}