/* Group 2085663684 (module grid) — Figma node 4020:713 (1440 x 677)
   Five module rows joined by a pipe of straight rules and quarter-round arcs. */

/* No clipping: rows 1 and 3 carry OUTSIDE top strokes, which paint 2px above
   the group and complete the rule across the full width. Isolated section
   renders cut them off, but on the page they belong to this section. */
.mods { position: relative; height: 677px; background: var(--off-white); }

.mod {
  position: absolute;
  background: var(--off-white);
}

/* p.mod__n, not .mod__n: the number is a <p>, and `.mod p` below is one
   specificity point higher, so the plain class lost both the size and the
   colour and every number rendered as 18px muted body text. */
.mod p.mod__n {
  position: absolute; width: 60px; margin: 0;
  font-size: 45px; font-weight: 500; line-height: 49.5px; color: var(--orange);
  transform: translateY(var(--figma-baseline-shift));
}

.mod h3 {
  position: absolute; margin: 0;
  font-size: 24px; font-weight: 500; line-height: 28.8px; color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.mod p {
  position: absolute; margin: 0;
  font-size: 18px; font-weight: 400; line-height: 27px; color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

/* Row strokes. INSIDE strokes become inset shadows; the OUTSIDE ones that fall
   on the canvas are drawn as separate rules (the rest are clipped away). */
.mod--2 { box-shadow: inset 0 2px 0 var(--muted); }
.mod--4,
.mod--5 { box-shadow: inset 0 -2px 0 var(--muted); }

/* Row boxes and their strokes, in Figma's own order */
.mod--1 { left: 0.998535px; top: 0;    width: 463.356px; height: 366px; }
.mod--2 { left: 464.354px;  top: 0;    width: 564.216px; height: 363px; }
.mod--3 { left: 1028.57px;  top: 0;    width: 409.431px; height: 363px; }
.mod--4 { left: 0.998535px; top: 363px; width: 718.002px; height: 314px; }
.mod--5 { left: 719px;      top: 363px; width: 721px;     height: 314px; }

.mod--1 .mod__n { left: 40px;   top: 158px; }
.mod--2 .mod__n { left: 40px;   top: 156.5px; }
.mod--3 .mod__n { left: 40px;   top: 156.5px; }
.mod--4 .mod__n { left: 40px;   top: 132px; }
.mod--5 .mod__n { left: 40px;   top: 132px; }

.mod--1 h3 { left: 124px;   top: 110.5px; width: 279.356px; }
.mod--2 h3 { left: 124px;   top: 108px;   width: 380.216px; }
.mod--3 h3 { left: 124px;   top: 81px;    width: 233px; }
.mod--4 h3 { left: 124px;   top: 111.5px; width: 534.002px; }
.mod--5 h3 { left: 124px;   top: 111.5px; width: 557px; }

.mod--1 p { left: 124px; top: 147.5px; width: 279.356px; }
.mod--2 p { left: 124px; top: 174px;   width: 380.216px; }
.mod--3 p { left: 124px; top: 147px;   width: 233px; }
.mod--4 p { left: 124px; top: 148.5px; width: 534.002px; }
.mod--5 p { left: 124px; top: 148.5px; width: 557px; }

/* Connector pipe. Straight segments are 2px rules; the corners are exported
   arcs, since a CSS border-radius corner would not match the stroke geometry. */
.pipe { position: absolute; background: var(--muted); }
.pipe--h { height: 2px; }
.pipe--v { width: 2px; }

.arc { position: absolute; }