/* Role Cards Section (diagnosis table) — Figma node 4020:451 (1440 x 777) */

.diag { position: relative; height: 777px; background: var(--off-white); }

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

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

/* Column head row */
.diag__head {
  position: absolute; top: 270px; left: 0; width: 1440px;
  font-size: 20px; font-weight: 400; line-height: 30px; color: var(--obsidian);
}

.diag__head span { position: absolute; transform: translateY(var(--figma-baseline-shift)); }
/* v4 column tracks: 150 and 297 wide with a 43px gap, from the 80px gutter. */
.diag__head span:nth-child(1) { left: 80px; }
.diag__head span:nth-child(2) { left: 273px; }
.diag__head span:nth-child(3) { left: 613px; }

/* Table — 1px OUTSIDE stroke around the block, 2px OUTSIDE rule above each row */
/* The table frame carries a 1px OUTSIDE stroke; on a full-bleed 1440 frame the
   left and right edges fall outside the canvas, so only the bottom is visible. */
.diag__table {
  position: absolute; top: 316px; left: 0; width: 1440px; height: 460px;
}

.diag__table::after {
  content: ""; position: absolute; top: 460px; left: 0; width: 1440px; height: 1px;
  background: var(--obsidian);
}

/* The left edge of that outside stroke does land in column 0 once Figma clips
   the export to 1440; the right edge falls off the canvas. */
.diag__table::before {
  content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 461px;
  background: var(--obsidian);
}

.diag__row { position: absolute; left: 0; width: 1440px; height: 92px; }
.diag__row::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 1440px; height: 2px;
  background: var(--obsidian);
}

.diag__row:nth-child(1) { top: 0; }
.diag__row:nth-child(2) { top: 92px; }
.diag__row:nth-child(3) { top: 184px; }
.diag__row:nth-child(4) { top: 276px; }
.diag__row:nth-child(5) { top: 368px; }

/* Named classes, not element selectors: the row also holds the funnel blocks,
   and `.diag__row i` would outrank their modifier classes. */
.diag__stage,
.diag__symptom,
.diag__fix { position: absolute; top: 30px; transform: translateY(var(--figma-baseline-shift)); }

.diag__stage   { left: 80px;  width: 192px; font-size: 28px; font-weight: 700; line-height: 32.2px; color: var(--orange); }
.diag__symptom { left: 272px; width: 350px; font-size: 20px; font-weight: 400; line-height: 30px; color: var(--obsidian); }
.diag__fix     { left: 622px; font-size: 18px; font-weight: 400; line-height: 27px; color: var(--muted); }

/* Narrowing funnel on the right edge (v4). Five steps that shrink toward the
   canvas edge — 157, 155, 85, 82, 22 — ramping sky blue to lime to orange.
   The two tapering steps are exported vectors because their diagonal carries
   the 2px stroke; the straight ones are plain fills with an inside stroke on
   their left edge. The exports include their own 2px stroke bleed, so they are
   positioned by their render box, not by the layout box. */
.diag__vis { position: absolute; top: 0; height: 92px; }

.diag__vis--1,
.diag__vis--3,
.diag__vis--5 { box-shadow: inset 2px 0 0 var(--obsidian); }

.diag__vis--1 { left: 1283px; width: 157px; background: var(--sky-blue); }
.diag__vis--3 { left: 1355px; width: 85px;  background: var(--lime); }
.diag__vis--5 { left: 1418px; width: 22px;  background: linear-gradient(to right, #fa541a, #f97316); }

.diag__vis--2 { left: 1280.86px; top: -2px; width: 161.14px; height: 96px; }
.diag__vis--4 { left: 1354.24px; top: -2px; width: 87.76px;  height: 96.07px; }