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

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

/* step 01: left arrow, 820 -> 837px */
.cad-interface-step-01 .callout {
  width: 837px;
  margin-right: -17px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
}
.cad-interface-step-01 .headline { width: 737px; margin-left: 0; margin-right: 0; }
.cad-interface-step-01 ul { margin: 10px 0 0 0; }
.cad-interface-step-01 li { margin-left: 20px; }
.cad-interface-step-01 .flex-row { margin-left: 0; }

/* step 02: right arrow, 729 -> 870px. Headline needs 759px to sit on one line
   ("Instantly" was orphaning onto a second line at 737px), so the callout takes
   33px more width and the right arrow-bearing edge stays pinned at x=1109. */
.cad-interface-step-02 .callout {
  width: 870px;
  margin-left: -141px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
}
.cad-interface-step-02 .headline { width: 770px; margin-left: 0; margin-right: 0; }
.cad-interface-step-02 ul { margin: 10px 0 0 0; }
.cad-interface-step-02 li { margin-left: 20px; }
.cad-interface-step-02 .flex-row { margin-left: 0; }

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

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

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

/* step 06: right arrow, already wide enough */
.cad-interface-step-06 .callout {
  align-items: flex-start;
}
.cad-interface-step-06 .headline { width: 751px; margin-left: 0; margin-right: 0; }
.cad-interface-step-06 ul { margin: 10px 0 0 0; }
.cad-interface-step-06 li { margin-left: 20px; }
.cad-interface-step-06 .flex-row { margin-left: 0; }

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

/* Steps 02 and 03 reserved the border artwork's full natural height via
   min-height, sized before the CTA widening let the bullets reflow shorter. The
   result was a dead white band under the footer row: 100px on step 02 and 63px on
   step 03, against the 35px every other step in this tour shows.

   Releasing min-height lets the box hug its content, but both callouts are
   bottom-anchored (.overlap-group1 is align-items: flex-end), so the box shrinks
   upward from a fixed bottom edge. Both borders carry a SIDE arrow whose apex
   rides at 50% of the box height because the SVG is stretched to the box
   (background-size: 100% 100%) - so a shorter box drops the arrow by half the
   height lost. padding-bottom is raised by exactly that half to lift the box back
   and hold each arrow on its original target.
     step 02: 409 -> 344px tall, arrow would fall 32.5px, apex held at y=541
     step 03: 316 -> 288px tall, arrow would fall 14px,   apex held at y=539 */
.cad-interface-step-02 .callout { min-height: 0; }
.cad-interface-step-02 .overlap-group1 { padding-bottom: 367px; }

.cad-interface-step-03 .callout { min-height: 0; }
.cad-interface-step-03 .overlap-group1 { padding-bottom: 397px; }