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

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

/* step 01: left arrow, 537 -> 868px */
.shop-floor-step-01 .callout {
  width: 868px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
  padding: 29.5px 29.6px 29.5px 85.1px;
}
.shop-floor-step-01 .headline { width: 753.3px; margin-left: 0; margin-right: 0; }
.shop-floor-step-01 ul { margin: 10px 0 0 0; }
.shop-floor-step-01 li { margin-left: 20px; }
.shop-floor-step-01 .flex-row { margin-left: 0; }

/* step 03: left arrow, 537 -> 868px */
.shop-floor-step-03 .callout {
  width: 868px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
  padding: 29.5px 29.6px 29.5px 85.1px;
}
.shop-floor-step-03 .headline { width: 753.3px; margin-left: 0; margin-right: 0; }
.shop-floor-step-03 ul { margin: 10px 0 0 0; }
.shop-floor-step-03 li { margin-left: 20px; }
.shop-floor-step-03 .flex-row { margin-left: 0; }

/* step 04: down arrow, 503 -> 813px */
.shop-floor-step-04 .callout {
  width: 813px;
  margin-left: -155.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
  padding: 29.5px 30px 59.1px 30px;
}
.shop-floor-step-04 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.shop-floor-step-04 ul { margin: 10px 0 0 0; }
.shop-floor-step-04 li { margin-left: 20px; }
.shop-floor-step-04 .flex-row { margin-left: 0; }

/* step 05: up arrow, 503 -> 811px */
.shop-floor-step-05 .callout {
  width: 811px;
  margin-left: -154.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
  padding: 59.2px 29.0px 35.3px 29.0px;
}
.shop-floor-step-05 .headline { width: 753.0px; margin-left: 0; margin-right: 0; }
.shop-floor-step-05 ul { margin: 10px 0 0 0; }
.shop-floor-step-05 li { margin-left: 20px; }
.shop-floor-step-05 .flex-row { margin-left: 0; }

/* step 07: up arrow, 503 -> 813px */
.shop-floor-step-07 .callout {
  width: 813px;
  margin-left: -155.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
  padding: 59.1px 30px 35.3px 30px;
}
.shop-floor-step-07 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.shop-floor-step-07 ul { margin: 10px 0 0 0; }
.shop-floor-step-07 li { margin-left: 20px; }
.shop-floor-step-07 .flex-row { margin-left: 0; }

/* step 08: left arrow, 542 -> 865px */
.shop-floor-step-08 .callout {
  width: 865px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
  padding: 29.5px 29.6px 29.5px 82.5px;
}
.shop-floor-step-08 .headline { width: 752.9px; margin-left: 0; margin-right: 0; }
.shop-floor-step-08 ul { margin: 10px 0 0 0; }
.shop-floor-step-08 li { margin-left: 20px; }
.shop-floor-step-08 .flex-row { margin-left: 0; }

/* step 09: up arrow, 503 -> 813px */
.shop-floor-step-09 .callout {
  width: 813px;
  margin-left: -155.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
  padding: 59.1px 30px 35.3px 30px;
}
.shop-floor-step-09 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.shop-floor-step-09 ul { margin: 10px 0 0 0; }
.shop-floor-step-09 li { margin-left: 20px; }
.shop-floor-step-09 .flex-row { margin-left: 0; }

/* --------------------------------------------------------------------
   Steps 02 and 06: footer rebuilt out of the absolutely positioned
   .overlap-group1 wrapper by normalize_footer.py. These rules undo the
   absolute positioning combined.css still applies to the pieces, then widen
   the callout the same way as the rest of the tour.
   -------------------------------------------------------------------- */

.shop-floor-step-02 .flex-row,
.shop-floor-step-06 .flex-row {
  align-items: center;
  display: flex;
  margin: 25px 0 0 0;
  min-width: 440px;
}
.shop-floor-step-02 .all-apps-home,
.shop-floor-step-06 .all-apps-home { position: static; }
.shop-floor-step-02 .navigation,
.shop-floor-step-06 .navigation { position: static; margin-left: 20px; }
.shop-floor-step-02 .default-button,
.shop-floor-step-06 .default-button { left: 106px; top: 0; }
.shop-floor-step-02 .text-button,
.shop-floor-step-06 .text-button { left: 0; top: 0; }

/* step 02: up arrow, 503 -> 813px, centre held with a negative left margin */
.shop-floor-step-02 .callout {
  /* combined.css sizes min-height for the old narrow layout; a widened
     callout needs less height, and the leftover would show as a dead band
     under the footer row. */
  min-height: 0;
  width: 813px;
  margin-left: -155.0px;
  align-items: flex-start;
  gap: 0;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
  padding: 35.3px 30px 35.3px 30px;
}
.shop-floor-step-02 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.shop-floor-step-02 ul { margin: 10px 0 0 0; }
.shop-floor-step-02 li { margin-left: 20px; }

/* step 06: down arrow, 503 -> 813px, centre held with a negative left margin */
.shop-floor-step-06 .callout {
  /* combined.css sizes min-height for the old narrow layout; a widened
     callout needs less height, and the leftover would show as a dead band
     under the footer row. */
  min-height: 0;
  width: 813px;
  margin-left: -155.0px;
  align-items: flex-start;
  gap: 0;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
  padding: 29.5px 30px 29.5px 30px;
  /* Down arrow: hold the bottom edge after the 359 -> 271px shortening
     (widening plus the released two-line headline reserve). */
  margin-top: 88px;
}
.shop-floor-step-06 .headline { width: 753px; margin-left: 0; margin-right: 0; min-height: 0; }
.shop-floor-step-06 ul { margin: 10px 0 0 0; }
.shop-floor-step-06 li { margin-left: 20px; }

/* --------------------------------------------------------------------
   Post-widening cleanup (QC pass).

   Two leftovers from the pre-CTA narrow callouts showed up once the boxes
   were widened for the schedule-a-demo button:

   1. combined.css reserves `min-height: 80px` on the headline -- two lines
      at the 38px line-height. Widened to 753px, the headlines on steps 03,
      05, 07 and 09 fit on ONE line, so the reserve painted as a ~42px dead
      band between the title and the first bullet. Step 06 already carried
      this fix; these are the rest.
   2. globals.css pins every `ul` to 440px, sized for the old 503px callout.
      Inside an 813-868px panel the bullets wrapped early and left a wide
      ragged margin on the right. The template tour (dashboards-and-kpis)
      has no such rule -- bullets take the callout's inner width there.

   Releasing both shortens each callout, so `min-height` on the callout is
   released too (otherwise the reclaimed space just moves to the bottom as
   a dead band) and each box is re-anchored so its arrow keeps pointing at
   the same spot: up-arrow steps hold their top edge (nothing to do), the
   down-arrow step holds its bottom edge, the side-arrow step holds the
   arrow's vertical centre.
   -------------------------------------------------------------------- */

.shop-floor-step-03 .callout,
.shop-floor-step-04 .callout,
.shop-floor-step-05 .callout,
.shop-floor-step-07 .callout,
.shop-floor-step-09 .callout { min-height: 0; }

.shop-floor-step-03 .headline,
.shop-floor-step-05 .headline,
.shop-floor-step-07 .headline,
.shop-floor-step-09 .headline { min-height: 0; }

.shop-floor-step-03 ul { width: 753.3px; }
.shop-floor-step-04 ul,
.shop-floor-step-07 ul,
.shop-floor-step-09 ul { width: 753px; }

/* Re-anchor the two boxes whose arrow is not on the top edge, so the tip
   lands on the same pixel it did before the shortening.
   step 03: left arrow at 49.8% of the border height, 296 -> 218px.
   step 04: down arrow tip at 98.4% of the border height, 321 -> 278.6px. */
.shop-floor-step-03 .callout { margin-top: 38.9px; }
.shop-floor-step-04 .callout { margin-top: 41.8px; }

/* Up-arrow steps 05, 07 and 09 clear the arrow TWICE: the CTA rollout set
   padding-top to the arrow height plus the normal inset (59.1px), and
   combined.css still adds the old `margin-top: 27px` that used to do that
   job on its own. The headline ends up ~55px below the white panel's top
   edge where every other step sits ~29px below it. Drop the margin; the
   padding already covers it. Step 02 is left alone -- its padding-top is
   only the arrow height, so there the 27px is what provides the inset. */
.shop-floor-step-05 .headline,
.shop-floor-step-07 .headline,
.shop-floor-step-09 .headline { margin-top: 0; }

/* The step-10 next-steps screen has no background-color in combined.css, and
   css/shop-floor-step-10.css (which does set one) is not linked on the page. Without this the
   Barba transition placeholder stays painted behind the entire page - ghost text
   behind the headline, smears behind the resource cards. Template parity:
   dashboards-and-kpis-demo/css/combined.css sets it on .next-steps. */
.shop-floor-step-10 { background-color: var(--white); }

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

/* step 06, bottom clearance 3 -> 32-ish. Worst on the site: the footer row was
   all but touching the border.
   The other three sides use a flat 29.5/30px padding, which is right for them
   because their panel edge sits on the box edge. The BOTTOM edge does not --
   the DOWN arrow notch eats ~25px of the box there -- so the same 29.5px left
   only 3px of visible room. padding-bottom takes the arrow allowance:
   29.5 -> 60px. */
.shop-floor-step-06 .callout { padding-bottom: 60px; }
/* Re-anchor: this callout is absolutely positioned at top: 154px, so the extra
   30.5px of padding grew the box DOWNWARD and took the arrow with it
   (271 -> 302px tall, apex y 511 -> 542). margin-top 88 -> 57px gives the box
   back its old bottom edge at y=513; apex held at [775, 511]. */
.shop-floor-step-06 .callout { margin-top: 57px; }