/* 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; }

/* --------------------------------------------------------------------
   quality-control-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 .quality-control-step-NN, read from each page's hidden input --
   it does not always match the folder or the file name.
   -------------------------------------------------------------------- */

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

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

/* step 03: left arrow, 859 -> 862px */
.quality-control-step-03 .callout {
  width: 862px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
}
.quality-control-step-03 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.quality-control-step-03 ul { margin: 10px 0 0 0; }
.quality-control-step-03 li { margin-left: 20px; }
.quality-control-step-03 .flex-row { margin-left: 0; }

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

/* step 05: right arrow, 797 -> 862px */
.quality-control-step-05 .callout {
  width: 862px;
  margin-left: -65px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
}
.quality-control-step-05 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.quality-control-step-05 ul { margin: 10px 0 0 0; }
.quality-control-step-05 li { margin-left: 20px; }
.quality-control-step-05 .flex-row { margin-left: 0; }

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

/* step 07: up arrow, already wide enough */
.quality-control-step-07 .callout {
  align-items: flex-start;
}
.quality-control-step-07 .headline { width: 790px; margin-left: 0; margin-right: 0; }
.quality-control-step-07 ul { margin: 10px 0 0 0; }
.quality-control-step-07 li { margin-left: 20px; }
.quality-control-step-07 .flex-row { margin-left: 0; }

/* step 08: left arrow, 859 -> 862px */
.quality-control-step-08 .callout {
  width: 862px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
}
.quality-control-step-08 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.quality-control-step-08 ul { margin: 10px 0 0 0; }
.quality-control-step-08 li { margin-left: 20px; }
.quality-control-step-08 .flex-row { margin-left: 0; }

/* step 09: right arrow, 743 -> 862px.
   combined.css reserves min-height:408px for the OLD 743px-wide box; at 862px
   the copy no longer needs it and the reserve showed as a 56px dead white band
   under the CTA (bottom gap 91px against 35px on every other step). Release it.
   .overlap-group1 is align-items:flex-end, so the box grows/shrinks from the
   top -- shedding 56px would drop the centred arrow tip 28px off its target.
   margin-bottom lifts the box by that half, holding the tip at y=504. */
.quality-control-step-09 .callout {
  width: 862px;
  margin-left: -119px;
  min-height: 0;
  margin-bottom: 28px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
}
.quality-control-step-09 .headline { width: 761.5px; margin-left: 0; margin-right: 0; }
.quality-control-step-09 ul { margin: 10px 0 0 0; }
.quality-control-step-09 li { margin-left: 20px; }
.quality-control-step-09 .flex-row { margin-left: 0; }