/* Role Cards Section — Figma node 4020:328 (1440 x 583) */

.roles {
  position: relative;
  height: 583px;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.roles__title {
  position: absolute;
  top: 120px;
  left: var(--gutter);
  width: 820px;
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 49.5px;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

/* Card pair. The 2px stroke on this frame is OUTSIDE-aligned, so it sits
   around the 1280x237 box rather than inside it. */
.roles__cards {
  position: absolute;
  top: 226px;
  left: var(--gutter);
  width: 1280px;
  height: 237px;
  outline: 2px solid var(--muted);
}

.role-card {
  position: absolute;
  top: 0;
  height: 237px;
  padding: 40px;
  text-decoration: none;
}

a.role-card:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }

.role-card--a {
  left: 0;
  width: 641px;
  background: var(--lime);
  box-shadow: inset -2px 0 0 var(--muted); /* right stroke only */
}

.role-card--b {
  left: 641px;
  width: 639px;
  background: var(--sky-blue);
}

.role-card h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 32.2px;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.role-card__lede {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.role-card ul {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.role-card li {
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.role-card li + li { margin-top: 8px; }

/* Arrow affordance — 51.768 x 38.868 pill, 1px inside stroke */
.role-card__go {
  position: absolute;
  top: 40px;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51.768px;
  height: 38.868px;
  border-radius: 100px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--obsidian);
}

.role-card__go img { width: 19.768px; height: 14.868px; }