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

/* --------------------------------------------------------------------
   inventory-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 .inventory-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 */
.inventory-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 30px 29.5px 85.1px;
}
.inventory-step-01 .headline { width: 752.9px; margin-left: 0; margin-right: 0; }
.inventory-step-01 ul { margin: 10px 0 0 0; }
.inventory-step-01 li { margin-left: 20px; }
.inventory-step-01 .flex-row { margin-left: 0; }

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

/* step 03: left arrow, 537 -> 868px */
.inventory-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 30px 29.5px 85.1px;
  /* combined.css reserves min-height 80px on this headline and 325px on the
     callout, both sized for the old 537px box where the title took two lines.
     At 868px it fits on one, so the reserve showed as ~40px of dead air between
     the title and the first bullet plus slack under the footer. Releasing both
     shortens the callout 325 -> 277px; the border SVG stretches, so its arrow
     rides at a fixed 0.4969 of the height. Push the box down by half the loss
     to hold the arrow tip on the Functions panel at y=789.5. */
  min-height: 0;
  top: 651.9px;
}
.inventory-step-03 .headline { width: 752.9px; margin-left: 0; margin-right: 0; min-height: 41px; }
.inventory-step-03 ul { margin: 10px 0 0 0; }
.inventory-step-03 li { margin-left: 20px; }
.inventory-step-03 .flex-row { margin-left: 0; }

/* step 04: up arrow, 503 -> 813px */
.inventory-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: 65.2px 30px 35.3px 30px;  /* 35.2 arrow notch + 30 clearance */
}
.inventory-step-04 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.inventory-step-04 ul { margin: 10px 0 0 0; }
.inventory-step-04 li { margin-left: 20px; }
.inventory-step-04 .flex-row { margin-left: 0; }

/* step 05: right arrow, pinned to the canvas edge -- row wraps.
   The arrow-bearing edge is the RIGHT one (x=585, it points at the document
   window that starts there), and the box already sits at x=49, so the callout
   can only grow 49px leftward. One line needs ~723px of inner width against the
   444.8px it has, so a one-line footer is impossible here without moving the
   arrow off its target. The row therefore wraps by design -- but only ONCE:
   the two inner gaps are tightened just enough that ALL APPS + dots + BACK/NEXT
   share line 1 (441px of the 444.8px available) and the CTA alone takes line 2,
   left-aligned under ALL APPS. Untightened it took three lines with BACK/NEXT
   orphaned and indented, which is the misalignment that was reported. */
.inventory-step-05 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
  padding: 29.5px 58.7px 29.5px 32.5px;
  /* Dropping the footer from three lines to two shortens the callout 440 -> 380px.
     The border SVG stretches, so the arrow rides at a fixed fraction of the
     height; push the box down by half the loss to hold the arrow's y at ~597. */
  top: 408px;
}
.inventory-step-05 .headline { width: 444.8px; margin-left: 0; margin-right: 0; }
.inventory-step-05 ul { margin: 10px 0 0 0; }
.inventory-step-05 li { margin-left: 20px; }
.inventory-step-05 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.inventory-step-05 .flex-row .navigation { margin-left: 16px; }
.inventory-step-05 .flex-row .t-button-container { margin-left: 10px; }
.inventory-step-05 a.cta-demo { margin-left: 0; }

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

/* step 09: left arrow, 537 -> 873px */
.inventory-step-09 .callout {
  width: 873px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
  padding: 29.5px 35px 29.5px 85.5px;
}
.inventory-step-09 .headline { width: 752.5px; margin-left: 0; margin-right: 0; }
.inventory-step-09 ul { margin: 10px 0 0 0; }
.inventory-step-09 li { margin-left: 20px; }
.inventory-step-09 .flex-row { margin-left: 0; }

/* --------------------------------------------------------------------
   Steps 06 and 07: the footer used to live in an absolutely positioned
   .overlap-group1 wrapper, so the CTA rollout skipped them. normalize_footer.py
   rebuilt the markup into the standard ul + .flex-row shape; 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.
   -------------------------------------------------------------------- */

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

/* step 06: up arrow, 503 -> 813px, centre held with a negative left margin */
.inventory-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: 35.3px 30px 35.3px 30px;
}
.inventory-step-06 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.inventory-step-06 ul { margin: 10px 0 0 0; }
.inventory-step-06 li { margin-left: 20px; }

/* step 07: left arrow, 537 -> 868px, arrow-bearing edge held */
.inventory-step-07 .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: 868px;
  align-items: flex-start;
  gap: 0;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
  padding: 29.5px 30px 29.5px 85.1px;
  /* Widening shortened the callout 320 -> 275px, lifting the centre the
     left arrow points from. Push it back down by half the loss. */
  margin-top: 22.5px;
}
.inventory-step-07 .headline { width: 752.9px; margin-left: 0; margin-right: 0; }
.inventory-step-07 ul { margin: 10px 0 0 0; }
.inventory-step-07 li { margin-left: 20px; }

/* --------------------------------------------------------------------
   Step 10 is this tour's next-steps page: no callout, its own orange
   SCHEDULE A DEMO button, and the footer CTA is deliberately absent.

   combined.css gives .inventory-step-10 no background-color, so the screen is
   transparent and the Barba transition placeholder that scripts.js paints on
   .desktop-demo-inner-wrapper (backgrounds/step-10.svg) stays visible behind
   the entire page as a blurred smear -- ghost text behind the headline, halos
   behind the cards and buttons. The template's equivalent screen rule carries
   background-color: var(--white) (dashboards-and-kpis-demo/css/combined.css,
   ".next-steps"). Match it.
   -------------------------------------------------------------------- */
.inventory-step-10 { background-color: var(--white); }

/* --------------------------------------------------------------------
   Panel padding pass (2026-08-20): one cause, two pages.

   Steps 02 and 04 measured 51px of top clearance against the 30px every other
   step in this tour shows. Both are up-arrow steps, and both carry a leftover
   `.headline { margin-top: 27px }` in combined.css -- artwork positioning from
   before the callout had padding of its own. That margin lands ON TOP of the
   callout's padding-top, which already contains the arrow notch (the up arrow
   eats the first ~35px of the box, so the white panel starts that far down).
   The two stack, and the title floats. Step 06 carries the same margin but its
   padding-top was never given a notch allowance, so its 33px already measures
   correctly -- do not zero that one without re-doing its padding.

   Fix: zero the stale margin, and set padding-top to `arrow notch + 30`.

   Re-anchoring: these callouts are position:absolute with an explicit `top`,
   so the TOP edge is pinned and the up arrow that rides on it cannot move --
   the box simply ends 21px higher. min-height (377 and 319px, sized for the
   taller box) is released so that lost height is not re-added as dead air
   under the footer row.
     step 02  395 -> 374px,  apex held at y=555
     step 04  339 -> 318px,  apex held at y=518
   -------------------------------------------------------------------- */
.inventory-step-02 .headline,
.inventory-step-04 .headline { margin-top: 0; }

.inventory-step-02 .callout,
.inventory-step-04 .callout { min-height: 0; }