/* Home - Desktop 1443, first group — Figma node 4020:235 (1440 x 1576)
   Hero Section (1113) + lede band (238) + Proof Bar (225). */

.h3 { position: relative; height: 1576px; }

/* ---- Hero Section (4020:236) — 0..1113, 2px bottom stroke ---- */
.h3__hero {
  position: absolute;
  inset: 0 0 463px 0;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
  overflow: hidden; /* the right-hand cells overshoot 1440 */
}

/* Navigation (4020:237) — 1440 x 88 */
.h3__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 88px;
  padding: 0 64px;
}

/* Deliberate divergence from Figma 4020:237, requested after the build:
   the orange "Request a call" was dropped (one CTA, not two) and "Events" was
   added to the links. With one CTA gone the 645px Figma frame no longer fits
   its contents, so the row hugs content and right-aligns on the 64px gutter —
   which keeps the 32px rhythm between every item. */
.h3__nav .nav__links { width: auto; }
.h3__nav .nav__actions { margin-left: 0; } /* uniform 32px gap, no pinning */

/* The second button is now a legible outline button, not white-on-white. */
.h3__nav .btn--ghost {
  width: 185px;
  height: 50px;
  justify-content: center;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--muted);
  color: var(--obsidian);
}

/* Logo (image 3) — @80,152, 336 x 80 */
.h3__logo { position: absolute; top: 152px; left: var(--gutter); width: 336px; height: 80px; }

/* ---- Headline band (4020:243) — @0,264, 1440 x 280 ---- */
.h3__band { position: absolute; top: 264px; left: 0; width: 1440px; height: 280px; }

.h3__band::before { /* 2px inside stroke, top */
  content: ""; position: absolute; top: 0; left: 0; width: 1440px; height: 2px;
  background: var(--obsidian);
}

/* This is the page's <h1>. Its two lines are spans, not paragraphs: a <p>
   inside a heading is invalid and the browser would close the h1 before it. */
.h3__hl { position: absolute; top: 1px; left: 0; width: 1054px; height: 278px; margin: 0; font-weight: inherit; }

.h3__row {
  display: flex;
  align-items: center;
  height: 140px;
  padding: 0 var(--gutter);
  margin: 0;
  color: var(--obsidian);
}

.h3__row--b { gap: 12px; width: 769px; }

.h3__row > span:not(.h3__mark),
.h3__mark > span { transform: translateY(var(--figma-baseline-shift)); }

/* Lime marker behind "growth work." */
.h3__mark { position: relative; width: 410px; height: 67px; }
.h3__mark::before {
  content: ""; position: absolute; top: 6px; left: 0; width: 433px; height: 74px;
  background: var(--lime);
}
.h3__mark > span { position: relative; display: block; white-space: nowrap; }

/* Rules inside the band. Figma `line` nodes are centre-aligned strokes, so a
   line at y=Y paints Y-1..Y+1; frame strokes are inside-aligned. */
.h3__band i { position: absolute; background: var(--obsidian); }
.h3__r-mid   { top: 139px; left: 0;     width: 767px;  height: 2px; }  /* Line 3 */
.h3__r-row2  { top: 141px; left: 767px; width: 2px;    height: 140px; } /* row 2, right */
.h3__r-cellA { top: 2px;   left: 1274px; width: 2px;   height: 278px; } /* cell A, right */
.h3__r-cellB { top: 2px;   left: 1496px; width: 2px;   height: 278px; } /* cell B, right */
.h3__r-Atop  { top: 141px; left: 1054px; width: 220px; height: 2px; }
.h3__r-Aleft { top: 141px; left: 1054px; width: 2px;   height: 140px; }
.h3__r-Bbot  { top: 279px; left: 1276px; width: 220px; height: 2px; }

/* ---- Diagram (4020:263) — @0,544, 1440 x 567 ---- */
.h3__diagram { position: absolute; top: 544px; left: 0; width: 1440px; height: 567px; }

.h3__tree { position: absolute; top: 0; left: 184px; width: 1092px; height: 567px; }

.h3__diagram > i { /* Line 4 — 628.5px rule along the top edge */
  position: absolute; top: -1px; left: 0; width: 628.5px; height: 2px;
  background: var(--obsidian);
}

.node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  padding: 12px 16px;
  border-radius: 100px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--muted);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--obsidian);
  white-space: pre;
}

.node > span { transform: translateY(var(--figma-baseline-shift-mono)); }

.node--data    { top: 36px;  left: 147px;  width: 77px; }
.node--process { top: 171px; left: 1002px; width: 110px; }
.node--growth  { top: 343px; left: 719px;  width: 99px;
                 box-shadow: inset 0 0 0 1px var(--orange); color: var(--orange); font-weight: 700; }
.node--q       { top: 264px; left: 740px;  width: 55px; height: 55px; padding: 0; }
.node--q img   { width: 17.556px; height: 27.588px; }

/* ---- Lede band (4020:274) — @0,1113, 1440 x 238 ---- */
.h3__lede {
  position: absolute;
  top: 1113px;
  left: 0;
  width: 1440px;
  height: 238px;
  background: var(--off-white);
}

.h3__lede::after { /* right stroke of Frame 48098649, 2px inside at x=893 */
  content: ""; position: absolute; top: 0; left: 893px; width: 2px; height: 238px;
  background: var(--obsidian);
}

.h3__lede p {
  position: absolute;
  top: 40px;
  left: var(--gutter);
  width: 694px;
  margin: 0;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.h3__lede .btn { position: absolute; top: 153px; left: var(--gutter); width: 254px; height: 45px; padding: 13px 24px; }

.h3__badge { position: absolute; top: 77.5px; left: 1121px; width: 239px; height: 83px; }
.h3__badge img { position: absolute; top: 0; left: 0; width: 185px; height: 83px; }
.h3__badge span {
  position: absolute; top: 20px; left: 138px; width: 101px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-onest); font-size: 16px; font-weight: 300;
  line-height: 21px; letter-spacing: 2px; text-align: center; color: var(--muted);
}

/* ---- Proof Bar in this layout gains a top stroke and a left divider ---- */
.h3 .proof { position: absolute; top: 1351px; left: 0; width: 1440px; }
.h3 .proof { box-shadow: inset 0 2px 0 var(--obsidian), inset 0 -2px 0 var(--obsidian); }