/* =====================================================================
   WHO IT'S FOR — the cases listed one under the other, and to the right of
   each a small stick figure of that person mid-chaos (or, on /social,
   mid-ambition). Slate strokes, round caps, nothing photoreal. Each figure
   fades in with its row (motion.js .is-in) and keeps one small, slow
   movement going: dryer air, juggled things bobbing, a phone buzzing.
   Reduced motion: still drawings.
   ===================================================================== */
.who{display:block;margin-top:14px;max-width:820px;margin-left:auto;margin-right:auto}
.whocase{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:32px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.whocase:first-child{border-top:0}
.whocase h3{font-size:19px;letter-spacing:-.015em}
.whocase p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink);max-width:52ch}
.stick{width:168px;height:132px;display:block;overflow:visible;justify-self:end;
  stroke:var(--slate);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.stick .fill{fill:var(--slate);stroke:none}
.stick .soft{stroke:var(--muted);opacity:.7}
.stick .paper{fill:#fff}
@media (max-width:640px){.whocase{grid-template-columns:1fr;gap:10px}.stick{justify-self:start;width:140px;height:110px}}

/* ---- the small, slow movements ---- */
@media (prefers-reduced-motion:no-preference){
  .is-in .stick .air{animation:air 1.1s ease-in-out infinite}
  .is-in .stick .air path:nth-child(2){animation-delay:.35s}
  @keyframes air{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:.8;transform:translateX(-4px)}}
  .is-in .stick .bob{animation:bob 2.6s ease-in-out infinite}
  .is-in .stick .bob:nth-child(2){animation-delay:.6s}.is-in .stick .bob:nth-child(3){animation-delay:1.2s}.is-in .stick .bob:nth-child(4){animation-delay:1.8s}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .is-in .stick .buzz{animation:buzz .5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
  @keyframes buzz{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
  .is-in .stick .buzzlines{animation:blink 1s steps(2) infinite}
  @keyframes blink{50%{opacity:.15}}
  .stick .pop{opacity:0;transform:scale(.6);transform-origin:center;transform-box:fill-box}
  .is-in .stick .pop{animation:popin .6s cubic-bezier(.16,1,.3,1) forwards}
  .is-in .stick .pop.p1{animation-delay:.6s}.is-in .stick .pop.p2{animation-delay:1.2s}.is-in .stick .pop.p3{animation-delay:1.7s}
  @keyframes popin{to{opacity:1;transform:none}}
  .stick .heart{opacity:0}
  .is-in .stick .heart{animation:float 2.8s ease-out infinite}
  .is-in .stick .heart:nth-of-type(2){animation-delay:1.4s}
  @keyframes float{0%{opacity:0;transform:translateY(0) scale(.7)}20%{opacity:.9}100%{opacity:0;transform:translateY(-26px) scale(1)}}
}