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

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

/* step 01: up arrow, 750 -> 827px */
.order-management-and-shipping-step-01 .callout {
  width: 827px;
  margin-left: -38.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
}
.order-management-and-shipping-step-01 .headline { width: 757px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-01 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-01 li { margin-left: 20px; }
.order-management-and-shipping-step-01 .flex-row { margin-left: 0; }

/* step 02: down arrow, 750 -> 862px */
.order-management-and-shipping-step-02 .callout {
  width: 862px;
  margin-left: -56.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
  padding: 35px 65px 59.6px 35px;
}
.order-management-and-shipping-step-02 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-02 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-02 li { margin-left: 20px; }
.order-management-and-shipping-step-02 .flex-row { margin-left: 0; }

/* step 03: left arrow, 759 -> 791px. Container is justify-content:flex-end, so
   the negative margin-right cancels the pull and the arrow-bearing LEFT edge
   stays put; the box grows right only. This step starts 19px further right than
   step 08, so 791px is all the room there is before the border crowds the canvas
   edge -- the footer gaps go to 14/9/9 and the right padding to 28px to land the
   row on one line. */
.order-management-and-shipping-step-03 .callout {
  width: 791px;
  margin-right: -32px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
  padding: 35px 28px 35px 65px;
}
.order-management-and-shipping-step-03 .headline { width: 698px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-03 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-03 li { margin-left: 20px; }
.order-management-and-shipping-step-03 .flex-row { margin-left: 0; }
.order-management-and-shipping-step-03 .flex-row .navigation { margin-left: 14px; }
.order-management-and-shipping-step-03 .flex-row .t-button-container { margin-left: 9px; }
.order-management-and-shipping-step-03 a.cta-demo { margin-left: 9px; }

/* step 04: down arrow, 775 -> 832px */
.order-management-and-shipping-step-04 .callout {
  width: 832px;
  margin-left: -28.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
}
.order-management-and-shipping-step-04 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-04 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-04 li { margin-left: 20px; }
.order-management-and-shipping-step-04 .flex-row { margin-left: 0; }

/* step 05: up arrow, 825 -> 832px */
.order-management-and-shipping-step-05 .callout {
  width: 832px;
  margin-left: -3.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
}
.order-management-and-shipping-step-05 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-05 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-05 li { margin-left: 20px; }
.order-management-and-shipping-step-05 .flex-row { margin-left: 0; }

/* step 06: up arrow, 750 -> 832px */
.order-management-and-shipping-step-06 .callout {
  width: 832px;
  margin-left: -41.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
}
.order-management-and-shipping-step-06 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-06 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-06 li { margin-left: 20px; }
.order-management-and-shipping-step-06 .flex-row { margin-left: 0; }

/* step 07: left arrow, 734 -> 865px. Its container is justify-content:flex-end,
   so the extra 131px grew LEFTWARD and buried half the highlighted filter panel
   (highlight ends at x=664, the arrow-bearing edge belongs there). margin-right
   of -131px cancels the flex-end pull and puts the left edge back on 664; the
   box grows to the right instead. */
.order-management-and-shipping-step-07 .callout {
  width: 865px;
  margin-right: -131px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
  padding: 35px 35px 35px 68.1px;
}
.order-management-and-shipping-step-07 .headline { width: 761.9px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-07 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-07 li { margin-left: 20px; }
.order-management-and-shipping-step-07 .flex-row { margin-left: 0; }

/* step 08: left arrow, 734 -> 806px. Its container is justify-content:flex-end,
   so a negative margin-right cancels the pull and the arrow-bearing LEFT edge
   stays exactly where it was; the box grows to the right only. 806px is the
   widest that still leaves ~20px between the border and the canvas edge, so
   the footer gaps are tightened to 16/10/10 to land the row on one line. */
.order-management-and-shipping-step-08 .callout {
  width: 806px;
  margin-right: -72px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
}
.order-management-and-shipping-step-08 .headline { width: 706px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-08 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-08 li { margin-left: 20px; }
.order-management-and-shipping-step-08 .flex-row { margin-left: 0; }
.order-management-and-shipping-step-08 .flex-row .navigation { margin-left: 16px; }
.order-management-and-shipping-step-08 .flex-row .t-button-container { margin-left: 10px; }
.order-management-and-shipping-step-08 a.cta-demo { margin-left: 10px; }

/* step 09: up arrow, 825 -> 832px */
.order-management-and-shipping-step-09 .callout {
  width: 832px;
  margin-left: -3.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
}
.order-management-and-shipping-step-09 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.order-management-and-shipping-step-09 ul { margin: 10px 0 0 0; }
.order-management-and-shipping-step-09 li { margin-left: 20px; }
.order-management-and-shipping-step-09 .flex-row { margin-left: 0; }

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

/* step 02, right clearance 64 -> 33.
   padding-right carried the 65px arrow allowance over from the original
   art even though this step's arrow is on the BOTTOM, so the text column
   stopped 64px short of the panel while the left side sat at 35. Trimming
   padding-right to 34 alone would not move the text: the headline is a fixed
   762px, so it has to grow with the inner width (862 - 35 - 34 = 793) to take
   up the room. The title measures 892px unwrapped, so it stays on two lines
   at 793 and the box height is unchanged.
   Nothing about the box changes -- width, height and margins are untouched --
   so the DOWN arrow apex stays on [678, 480]. */
.order-management-and-shipping-step-02 .callout { padding-right: 34px; }
.order-management-and-shipping-step-02 .headline { width: 793px; }

/* step 07, bottom clearance 65 -> 32-ish.
   min-height: 348px was sized before the CTA widening let the bullets reflow
   shorter, leaving a dead white band under the footer row. Releasing it lets
   the box hug its content.
   Re-anchor: .overlap-group1 is align-items: flex-end so the box shrinks
   UPWARD from a fixed bottom, and the LEFT arrow rides at 50% of the box
   height (the SVG is stretched, background-size: 100% 100%), so the apex
   would fall by half the height lost. padding-bottom is raised by exactly
   that half to lift the box back. Apex held at [665, 321].
   margin-right: -131px above is untouched -- it is what keeps this callout
   off the highlighted filter panel. */
.order-management-and-shipping-step-07 .callout { min-height: 0; }
/*   348 -> 317px tall, so the arrow would fall 16px; padding-bottom 584 -> 600. */
.order-management-and-shipping-step-07 .overlap-group1 { padding-bottom: 600px; }