/* The funnel is the page. Each step is a filter, and the widths show where
 * people fall out — a stage that is wide and far down the list is where the
 * money is stuck. */
.funnel { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.fstep {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  background: var(--card); border: 1px solid var(--rule); border-radius: 9px;
  padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 118px;
  border-left: 3px solid var(--rule);
}
.fstep:hover { border-color: var(--ink-faint); }
.fstep[aria-pressed="true"] { background: var(--field); border-color: var(--navy); border-left-color: var(--navy); }
.fstep__n { font: 600 21px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.fstep__l { font: 500 11.5px/1.3 var(--sans); color: var(--ink-soft); }
.fstep__w { font: 400 10.5px/1.3 var(--sans); color: var(--ink-faint); }

/* Won, and stalled-with-something-given, read differently at a glance. */
.fstep--signed    { border-left-color: var(--go); }
.fstep--signed .fstep__n { color: var(--go); }
.fstep--cma_done  { border-left-color: var(--navy); }
.fstep--photos    { border-left-color: var(--royal); }
.fstep--texted, .fstep--no_contact { border-left-color: var(--signal); }
.fstep--texted .fstep__n, .fstep--no_contact .fstep__n { color: var(--signal); }

.lead__where { font: 400 11.5px/1.5 var(--mono); color: var(--ink-faint); margin: 9px 0 0; }