/* ---- H2 · who: three equal cards (E3) -------------------------------------- */
/* One width, one drawing frame, and the label and the line on one baseline
   grid (subgrid), as round five's mock: the pins and the slight turn are
   the cards' only differences. A label is plain text, never a pill (E6). */
/* G22: the user's line is longer than E3's, so two lines need the room */
.who .h2{max-width:16.5em}
.who .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:clamp(20px,2.6vw,40px);margin-top:clamp(40px,4.6vw,64px)}
.who .card{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;background:#fff;border:1px solid var(--edge);border-radius:var(--r-card);padding:14px 14px 24px;box-shadow:var(--shadow-raised);background-clip:padding-box}
.who .card:nth-child(1){transform:rotate(-.7deg)}
.who .card:nth-child(2){transform:rotate(.5deg)}
.who .card:nth-child(3){transform:rotate(-.4deg)}
.who .card::before{content:"";position:absolute;top:-9px;left:50%;margin-left:-9px;width:18px;height:18px;border-radius:50%;background:var(--amber);border:2.6px solid #18202C;box-shadow:0 3px 4px rgba(16,21,29,.18);z-index:1}
.who .card .art{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#F7F5EE}
.who .card .art svg{display:block;width:100%;height:100%}
.who .card .label{align-self:start;margin:18px 6px 0;font:600 13.5px/1.3 var(--ui);color:var(--dim);text-wrap:balance}
.who .say{align-self:start;margin:8px 6px 0;font:700 clamp(18px,1.6vw,23px)/1.2 var(--display);font-stretch:106%;letter-spacing:-.012em;text-wrap:pretty}
.who .say .hk{white-space:nowrap}
.who .say .hk .kc{font-size:.72em}
.who .founder{max-width:760px;margin:72px auto 0;text-align:center}
/* A tester's words in a card are the card's evidence, not its headline:
   body size, under the line (break-ui). */
.who .card .quote{margin:14px 6px 0}
.who .card .quote blockquote{font:500 16.5px/1.45 var(--ui);color:var(--body)}
.who .card .quote figcaption{margin-top:8px;font-size:13px}
@media (max-width:1100px){
  .who .card .label{font-size:13px}
}
/* a phone: one under another, each drawing the card's width */
@media (max-width:640px){
  .who .cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:34px;max-width:440px;margin-left:auto;margin-right:auto}
  .who .card{grid-row:auto;grid-template-rows:none}
  .who .card .label{margin-top:16px}
  .who .say{font-size:21px}
}