/* RevMatic AI | /who-we-help/ and its seven group pages
   Loads after /assets/css/site.css and uses its tokens. Adds:
   .wh-idx     every business, by group: a numbered group heading (a link to its page) and its businesses as a
               calm line of names (each a link; with JavaScript a name opens in the card above)
   .wh-others  the other groups, at the end of a group page
   The example audits themselves are the shared card (.picker, .audit) from site.css. */

/* ------------------------------------------------------------ the index of every business */
.wh-idx { border-bottom: 1px solid var(--line); }
.wh-grp {
  position: relative; padding: clamp(20px, 0.8rem + 1vw, 30px) 0 clamp(14px, 0.6rem + 0.8vw, 22px);
  border-top: 1px solid var(--line);
}
.wh-grp__head { display: flex; align-items: center; gap: 14px; }
.wh-grp__n { display: inline-flex; align-items: center; gap: 12px; font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--plasma-soft); }
.wh-grp__n::after { content: ""; width: 28px; height: 1px; flex: none; background: var(--rule); }
.wh-grp__h { margin: 0; font: 500 12.5px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); }
.wh-grp__h a { display: inline-flex; align-items: center; min-height: 44px; color: var(--smoke); transition: color 0.18s; }
.wh-grp__h a:hover { color: var(--platinum); }

/* the businesses: one flowing line of names, readable at rest, violet when pointed at or showing in the card.
   Inline, so a long name wraps like words; every line is 44px high and each link's padding fills it. */
.wh-names {
  display: block; margin: 2px 0 0; padding: 0; list-style: none;
  font: 600 clamp(19px, 0.95rem + 0.55vw, 26px)/max(44px, 1.7em) var(--font-text); letter-spacing: -0.01em;
}
.wh-names li { display: inline; }
.wh-names li:not(:last-child)::after {
  content: "\a0/"; content: "\a0/" / "";
  padding-right: 0.22em; font-weight: 400; color: rgba(140, 112, 255, 0.42);
}
.wh-names a {
  padding: max(0px, calc((44px - 1em) / 2)) 0.04em; border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: var(--ink-78); white-space: nowrap; transition: color 0.18s;
}
.wh-names a:hover, .wh-names a:focus-visible, .wh-names a[aria-current] { color: var(--plasma-soft); }
.wh-names a:focus-visible { outline-offset: 0; }
@media (max-width: 767px) {
  .wh-names a { white-space: normal; }
}
.wh-grp__all { margin-top: 4px; }
.wh-grp__all .textlink { font-size: 15px; color: var(--ink-88); }

/* ------------------------------------------------------------ a group page: the other groups */
.wh-others { display: grid; grid-template-columns: minmax(0, 1fr); margin: 8px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.wh-others a { display: block; min-height: 44px; padding: 16px 0; border-top: 1px solid var(--line); }
.wh-others__t { display: flex; align-items: center; gap: 8px; font: 600 17px/1.3 var(--font-text); color: var(--platinum); }
.wh-others__n { display: block; margin-top: 3px; font: 400 14.5px/1.4 var(--font-text); color: var(--smoke); }
.wh-others .arr { color: var(--plasma-soft); transition: transform 0.18s var(--ease-out); }
.wh-others a:hover .arr { transform: translateX(3px); }
@media (min-width: 768px) {
  .wh-others { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1100px) {
  .wh-others { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}