/* Shell shared by every role page.
   Each page is a carbon copy of the TOP of that company's front page: their
   nav, their hero, their stat treatment, with Matt's info in it. Nothing below
   the fold. The black bar is always his, so whose site you are on is never
   ambiguous. */

*{ margin:0; padding:0; box-sizing:border-box; }
img,svg{ display:block; max-width:100%; }

/* the bar that says whose site this is, in the docs style the resume uses:
   white, a bordered MF mark, a dark pill hard right */
.mfbar{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; gap:12px;
  height:52px; padding:0 22px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid #E8E7E7;
  font-family:"Inter", -apple-system, system-ui, Arial, sans-serif;
  font-size:14px; color:#767474;
}
.mfbar .mark{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:13px; font-weight:600; letter-spacing:.04em; color:#201D1D;
  border:1px solid #D8D7D7; padding:3px 6px; border-radius:2px;
}
.mfbar a{ color:#201D1D; text-decoration:none; }
.mfbar a:hover{ color:#0052FF; }
.mfbar .sep{ color:#D8D7D7; }
.mfbar .co{ color:#767474; }
.mfbar .who{ margin-left:auto; color:#767474; font-size:12.5px; }
.mfbar .who a{ color:#0052FF; }
.mfbar .back{
  background:#201D1D; color:#fff; font-size:13px; font-weight:500;
  padding:7px 14px; border-radius:999px; white-space:nowrap;
}
.mfbar .back:hover{ background:#000; color:#fff; }
@media (max-width:820px){ .mfbar .who{ display:none; } }
@media (max-width:520px){ .mfbar{ padding:0 14px; gap:9px; } }

/* company nav */
.nav{ display:flex; align-items:center; gap:28px; }
.nav-co{ font-weight:700; letter-spacing:-.02em; }
.nav-links{ display:flex; gap:22px; font-size:14px; }
.nav-links a{ text-decoration:none; }
.nav-r{ display:flex; align-items:center; gap:18px; margin-left:auto; font-size:14px; }
.nav-r a{ text-decoration:none; }
@media (max-width:900px){ .nav-links{ display:none; } }

/* hero primitives, dressed per company */
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
h1{ letter-spacing:-.03em; }
.sub{ line-height:1.5; }
.btns{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; text-decoration:none; font-weight:600; font-size:14px; }

/* the stat treatment each company actually uses */
.statrow{ display:grid; gap:12px; }
.stat b{ display:block; line-height:1; }
.stat span{ display:block; }

.fine{ font-size:11.5px; line-height:1.5; }
.fine a{ color:inherit; }

@media (max-width:860px){
  .split{ grid-template-columns:1fr !important; }
  .statrow{ grid-template-columns:1fr !important; }
}