/* Role Cards Section (stack orbit) — Figma node 4020:352 (1440 x 640) */

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

/* Section Header — 460 wide, 2px inside stroke on its right edge */
.stack__header {
  position: absolute;
  top: 0;
  left: 0;
  width: 460px;
  height: 640px;
  box-shadow: inset -2px 0 0 var(--obsidian);
}

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

.stack__sub {
  position: absolute;
  top: 305px;
  left: var(--gutter);
  width: 300px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.stack__cta {
  position: absolute;
  top: 456px;
  left: var(--gutter);
  width: 259px;
  height: 45px;
  padding: 13px 24px;
}

/* The orbit diagram is ~50 Figma nodes of glows, shadows and logo rasters.
   Shipped as one exported image rather than rebuilt in CSS — it is decorative,
   and the labels it contains are repeated in the copy around it. */
.stack__orbit {
  position: absolute;
  /* Figma exports an image at the node's RENDER bounds, which include the glow
     and shadow bleed — 1202x542 here, not the 900x540 layout box. Position by
     absoluteRenderBounds or the whole thing lands ~300px off. */
  top: 47.75px;
  left: 197.969px;
  width: 1202.031px;
  height: 542.25px;
}