/* ============================================================
   Closure visual: DONE crossed by the path. Homepage section 04 only.
   Locked 17 Sep 2026. The four scratch comparison pages are deleted and
   everything that existed only for them has been removed with them.

   Drawn at real pixel size, not a scaled viewBox, so the mono labels keep
   their set size at every width. The word size follows the column
   (container query units) and every vertical position derives from the
   measured cap height, so the line crosses at the same proportion of the
   letterforms at any width.

   Measured Geist metrics, display sans 600: cap height 0.726em, DONE inks
   2.827em, so half its ink width is 1.414em.

   Locked: 984px line (the width at which "still reachable" holds 40px
   clear of both the word and the customer-db label), crossing at 70% of
   letterform height measured from the cap top down, display sans.
   ============================================================ */

.cz { container-type: inline-size; max-width: 984px; margin: var(--space-8) auto 0; }
.cz svg { display: block; width: 100%; height: var(--cz-h); overflow: visible; }
.cz text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; }

.cz svg {
  --fs: min(140px, max(46px, calc((50cqi - 150px) / 1.37)));
  --ink: 1.414;                                   /* half the ink width, per em */
  --cap: calc(var(--fs) * 0.726);
  --yb: calc(16px + var(--cap));                  /* word baseline */
  --ly: calc(var(--yb) - var(--cap) * 0.3);       /* crossing at 70% of cap height */
  --ann: calc(var(--yb) + 78px);   /* 42px below the verdict, so the
                                      provenance reads quieter than it */
  --cz-h: calc(var(--yb) + 92px);
}

/* Contrast against the #0A0D12 band, measured from resolved values:
   heading 15.82:1 (site default) > line and still reachable 11.75:1
   (#48DCE8, the dark-band accent) > word 4.84:1 (line is 2.43x the word,
   and it clears AA for large text) > annotation 4.65:1 (quietest element,
   still AA for normal text). */
.cz text.cz__word {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs); fill: #74808F; text-anchor: middle;
  transform: translateY(var(--yb));
}
/* The line passes through the word: a thin dark channel under a 2px stroke.
   Continuous end to end; the letters stay legible either side. */
.cz__knock { stroke: #0A0D12; stroke-width: max(3px, calc(var(--fs) * 0.03)); transform: translateY(var(--ly)); }
.cz__line  { stroke: var(--accent-text); stroke-width: 2px; transform: translateY(var(--ly)); }
.cz__node  { fill: var(--accent-text); transform: translateY(var(--ly)); }

.cz__lbl { fill: #A2ABBB; }
.cz__lbl--l { transform: translate(0px, calc(var(--ly) + 24px)); }
.cz__lbl--r { text-anchor: end; transform: translate(0px, calc(var(--ly) + 24px)); }

/* "still reachable": the verdict. Centred directly beneath the word, at
   17px accent medium, so it reads as a verdict on DONE rather than as a
   third node label. Only edge-proxy-03 and customer-db stay on the line
   baseline. Same placement at every width. */
.cz text.cz__still {
  font-size: 17px; font-weight: 500; fill: var(--accent-text);
  text-anchor: middle; transform: translate(0px, calc(var(--yb) + 36px));
}

.cz__ann { fill: #707D8E; text-anchor: middle; transform: translateY(var(--ann)); }

/* Section 04 is centred as a whole: eyebrow, heading and lead on the
   figure's axis, matching the centred sections either side of it. */
.cz-center { text-align: center; }
.cz-center .uw-h2, .cz-center .uw-lead { margin-inline: auto; }