/* LinkedIn profile banner. 1584x396, the size LinkedIn crops least. */
:root { --banner-w: 1584px; --banner-h: 396px; }
.banner-row { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; max-width: 1500px; }
.banner-wrap { width: 792px; height: 198px; position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: #000; flex: 0 0 auto; }
.banner-wrap.size-md { width: 1056px; height: 264px; }
.banner-wrap.size-lg { width: 1320px; height: 330px; }
.banner { width: var(--banner-w); height: var(--banner-h); transform-origin: 0 0; transform: scale(0.5); position: relative; overflow: hidden; }
.banner-wrap.size-md .banner { transform: scale(0.6667); }
.banner-wrap.size-lg .banner { transform: scale(0.8333); }

/* The profile photo sits over the lower left of a LinkedIn banner on desktop
   and shifts left on mobile, so nothing that has to be read goes in the
   first 380px. That reserve is what .safe holds open. */
.banner .s { padding: 48px 64px; flex-direction: row; align-items: center; gap: 40px; }
.banner .ch { margin-bottom: 0; }
.banner .safe { flex: 0 0 380px; }
.banner .display { font-size: 62px; line-height: 1.04; }
.banner .h1 { font-size: 48px; }
.banner .h2 { font-size: 38px; }
.banner .lede { font-size: 22px; max-width: 40ch; }
.banner .body-c { font-size: 19px; max-width: 52ch; }
.banner .kicker { font-size: 14px; }
.banner .wm { font-size: 40px; }
.banner .lockup { font-size: 15px; }
.banner .pill { font-size: 19px; padding: 13px 24px; }
.banner .chip { font-size: 17px; padding: 11px 18px; }
.banner .stat-hero { font-size: 96px; }
.banner .stat-cap { font-size: 15px; max-width: 26ch; }