/* Schedule-a-demo CTA button (footer of each step page).
   Self-contained: loaded after globals.css, touches nothing else. */

.screen a.cta-demo {
  align-items: center;
  background-color: var(--white);
  border: 3px solid var(--orange);
  cursor: pointer;
  display: flex;
  height: 54px;
  margin-left: 16px;
  padding: 0 14px;
  transition: background-color 0.18s ease;
}

.screen a.cta-demo:hover {
  background-color: var(--orange);
}

.cta-demo .cta-demo-text {
  color: var(--orange);
  font-family: var(--font-family-lato);
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  transition: color 0.18s ease;
  white-space: nowrap;
}

.cta-demo .cta-demo-text small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.screen a.cta-demo:hover .cta-demo-text {
  color: var(--white);
}

/* Tighten the footer row's internal gaps so the row sits with breathing
   room inside the border instead of flush against it. */
.screen .flex-row .navigation { margin-left: 30px; }
.screen .flex-row .t-button-container { margin-left: 20px; }

/* --------------------------------------------------------------------
   document-control-and-version-management-demo: fit the schedule-a-demo CTA into the footer row.

   Each step widens only as far as its own footer row needs, keeping the arrow
   anchored -- the arrow-bearing edge for side arrows, the centre otherwise.
   Padding on every side clears the white panel, whose edges are measured off
   the rendered border image (the arrow juts in, so the panel starts further
   in than the box edge). Steps whose arrow pins them against the canvas edge
   cannot widen; there the row is given the callout's inner width so it wraps,
   and the callout grows taller instead.
   Step class prefix is .document-control-and-version-management-step-NN, read from each page's hidden input --
   it does not always match the folder or the file name.
   -------------------------------------------------------------------- */

/* Re-anchoring note (fix 2026-08-20)
   .overlap-group1 is a flex row with justify-content: flex-end, so a callout is
   pinned by its RIGHT edge and any extra width grows it LEFTWARD. margin-left
   therefore does nothing here; only a negative margin-right moves the box right.
   Each widened step below carries the margin-right that puts its arrow back on
   the target it pointed at before the CTA was added (measured against the green
   highlight baked into img/background-step-NN.png). */

/* step 01: left arrow, 740 -> 857px; push right 117px so the arrow stays on the
   file-tree panel's right edge (x=399) instead of covering the tree */
.document-control-and-version-management-step-01 .callout {
  width: 857px;
  margin-right: -117px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
}
.document-control-and-version-management-step-01 .headline { width: 757px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-01 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-01 li { margin-left: 20px; }
.document-control-and-version-management-step-01 .flex-row { margin-left: 0; }

/* step 02: up arrow, already wide enough */
.document-control-and-version-management-step-02 .callout {
  align-items: flex-start;
}
.document-control-and-version-management-step-02 .headline { width: 770px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-02 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-02 li { margin-left: 20px; }
.document-control-and-version-management-step-02 .flex-row { margin-left: 0; }

/* step 03: left arrow, pinned to the canvas edge -- row wraps */
.document-control-and-version-management-step-03 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
}
.document-control-and-version-management-step-03 .headline { width: 584px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-03 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-03 li { margin-left: 20px; }
.document-control-and-version-management-step-03 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.document-control-and-version-management-step-03 a.cta-demo { margin-left: 0; }

/* step 04: up arrow, already wide enough */
.document-control-and-version-management-step-04 .callout {
  align-items: flex-start;
}
.document-control-and-version-management-step-04 .headline { width: 770px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-04 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-04 li { margin-left: 20px; }
.document-control-and-version-management-step-04 .flex-row { margin-left: 0; }

/* step 05: down arrow, 710 -> 832px; push right 61px (half the growth) so the
   arrow stays centred on the VMS tab panel */
.document-control-and-version-management-step-05 .callout {
  width: 832px;
  margin-right: -61px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
}
.document-control-and-version-management-step-05 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-05 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-05 li { margin-left: 20px; }
.document-control-and-version-management-step-05 .flex-row { margin-left: 0; }

/* step 06: left arrow, 784 -> 862px; push right 78px so the arrow stays on the
   Document Control Groups panel's right edge (x=791) instead of clipping the VMS tab */
.document-control-and-version-management-step-06 .callout {
  width: 862px;
  margin-right: -78px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
}
.document-control-and-version-management-step-06 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-06 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-06 li { margin-left: 20px; }
.document-control-and-version-management-step-06 .flex-row { margin-left: 0; }

/* step 07: left arrow, 778 -> 862px; push right 84px so the arrow stays on the
   document tree panel's right edge (x=536) */
.document-control-and-version-management-step-07 .callout {
  width: 862px;
  margin-right: -84px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
}
.document-control-and-version-management-step-07 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-07 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-07 li { margin-left: 20px; }
.document-control-and-version-management-step-07 .flex-row { margin-left: 0; }

/* step 08: right arrow, 783 -> 862px. Right-anchored by flex-end already, which
   is the arrow-bearing edge here, so no margin correction is needed. */
.document-control-and-version-management-step-08 .callout {
  width: 862px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
}
.document-control-and-version-management-step-08 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-08 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-08 li { margin-left: 20px; }
.document-control-and-version-management-step-08 .flex-row { margin-left: 0; }

/* step 09: up arrow, 760 -> 832px; push right 36px (half the growth) so the
   arrow stays centred under the shipment grid row */
.document-control-and-version-management-step-09 .callout {
  width: 832px;
  margin-right: -36px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
}
.document-control-and-version-management-step-09 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.document-control-and-version-management-step-09 ul { margin: 10px 0 0 0; }
.document-control-and-version-management-step-09 li { margin-left: 20px; }
.document-control-and-version-management-step-09 .flex-row { margin-left: 0; }

/* --------------------------------------------------------------------
   Panel-clearance pass: step 02 only, onto the site-wide 32px
   content-to-panel clearance (+/-8).
   scripts/check_panel_padding.py --target 32 --tol 8
   -------------------------------------------------------------------- */

/* step 02, bottom clearance 41 -> 34.
   min-height: 353px holds the box 7px taller than its content stacks, so the
   footer row floats 7px higher than the 35px padding-bottom implies.
   The box is NOT shrunk here: this border still paints with background-size:
   contain (the SVG has no preserveAspectRatio="none"), so a shorter box would
   scale the whole artwork down and pull the left and right panel edges inward
   by ~7px each, breaking L and R to fix B. Instead the footer row takes the
   slack -- margin-top 28 -> 35px -- which leaves the box height, the panel,
   and the TOP arrow (apex y=103) all exactly where they were. */
.document-control-and-version-management-step-02 .flex-row { margin-top: 35px; }

/* Arrow-tip tangency (2026-08-20): step 05's down-arrow tip crossed 13px past
   the highlight's top line. Bottom-anchored; lift 13px. */
.document-control-and-version-management-step-05 .overlap-group1 { padding-bottom: 659px; }