/* Social proof lesson. All rules scoped under .sop-* */
.sop-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sop-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.sop-lab { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.sop-walk { fill: rgba(255,255,255,.04); }

/* ---------- people ---------- */
.sop-hd, .sop-bd { fill: #6F6A86; stroke: var(--bg); stroke-width: 1.5; }
.sop-man .sop-hd, .sop-man .sop-bd { fill: var(--violet-bright); }
.sop-walker .sop-hd, .sop-walker .sop-bd { fill: #8A8798; transition: fill .3s; }
.sop-walker.sop-stopped .sop-hd, .sop-walker.sop-stopped .sop-bd { fill: var(--mint); }
.sop-pop .sop-pi { animation: sopPop .3s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sopPop { from { transform: scale(.4); opacity: 0; } }

/* ---------- the street ---------- */
.sop-street { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.sop-count { display: flex; justify-content: center; gap: 18px; font-size: 13.5px; color: var(--dim); font-weight: 600; }
.sop-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.sop-count span:last-child b { color: var(--mint); }
.sop-st { display: block; width: 100%; height: auto; }
.sop-bld { fill: rgba(169,155,255,.07); stroke: rgba(169,155,255,.25); stroke-width: 1.5; }
.sop-w { fill: rgba(10,8,24,.55); stroke: rgba(169,155,255,.22); stroke-width: 1; }
.sop-w.on { stroke: var(--gold); stroke-width: 2; }
.sop-look { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 4; opacity: .45; }
.sop-look.w { stroke: var(--mint); }

.sop-monte { display: block; width: 100%; max-width: 360px; height: auto; }

/* ---------- the con ---------- */
.sop-box { fill: #8E7F6A; stroke: #C2A77E; stroke-width: 1.2; }
.sop-card { fill: #F4F0FF; stroke: #C9C2E8; stroke-width: 1; }
.sop-dealer .sop-hd, .sop-dealer .sop-bd { fill: #6F6A86; }
.sop-by .sop-hd, .sop-by .sop-bd { fill: #8A8798; transition: fill .4s; }
.sop-cash { fill: rgba(63,214,154,.25); stroke: var(--mint); stroke-width: 1.2; }
.sop-cashT { fill: var(--mint); font: 700 12px var(--sans); text-anchor: middle; }
.sop-shown .sop-shill .sop-hd, .sop-shown .sop-shill .sop-bd { fill: var(--gold); }
.sop-tag { fill: var(--gold); font: 700 12px var(--sans); text-anchor: middle; opacity: 0; transition: opacity .4s; }
.sop-shown .sop-tag { opacity: 1; }

@media (max-height: 700px) {
  .sop-street, .sop-monte { max-width: 330px; }
}