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

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

/* step 04: left arrow, 537 -> 564px */
.planning-scheduling-step-04 .callout {
  /* Left arrow: the tip is pinned to the highlight's right edge at x=1255, so
     the box can only grow rightwards. Its container reserves 27px, putting the
     limit at x=1893 -- hence 638px. Even at that limit the inner width is
     536px against a 723px footer row, so the row still has to wrap; the extra
     width just stops the box looking narrow against the empty canvas. */
  width: 638px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
  padding: 30px 30px 30px 71.8px;
}
.planning-scheduling-step-04 .headline { width: 536.2px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-04 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-04 li { margin-left: 20px; }
/* Step 04's arrow points left, so its left edge is pinned at x=1255 and the
   callout can be at most 665px wide before running off the canvas -- not enough
   for the 723px footer row. The CTA rollout widened it to 564px and stopped,
   which left the button hanging outside the border. Wrap the row instead. */
.planning-scheduling-step-04 .flex-row {
  margin-left: 0;
  align-self: stretch;
  flex-wrap: wrap;
  row-gap: 14px;
  min-width: 0;
}
.planning-scheduling-step-04 a.cta-demo { margin-left: 0; }

/* step 05: down arrow, 503 -> 811px */
.planning-scheduling-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: 30px 29.0px 59.1px 29.0px;
}
.planning-scheduling-step-05 .headline { width: 753.0px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-05 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-05 li { margin-left: 20px; }
.planning-scheduling-step-05 .flex-row { margin-left: 0; }

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

/* step 09: left arrow, 734 -> 847px */
.planning-scheduling-step-09 .callout {
  width: 847px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
  padding: 27px 27.1px 27px 67.1px;
}
.planning-scheduling-step-09 .headline { width: 752.9px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-09 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-09 li { margin-left: 20px; }
.planning-scheduling-step-09 .flex-row { margin-left: 0; }

/* --------------------------------------------------------------------
   Steps 01, 02, 03, 06 and 08: the CTA rollout skipped these because their
   footer was not a .flex-row -- steps 01/02/03/08 named it .group-634..637,
   step 06 buried it in an absolutely positioned .overlap-group1.
   normalize_footer.py put all five on the standard shape; these rules restore
   the row styling the old class names carried, then widen as elsewhere.

   Step 02 is the exception: its arrow points left, so the callout sits to the
   RIGHT of its highlight with the left edge fixed at x=1200. Widening to 813px
   would run it off the 1920px canvas, so its row wraps onto a second line and
   the callout grows taller instead (same fallback as inventory step 05).
   -------------------------------------------------------------------- */

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

/* step 01: up arrow, 587 -> 813px. align-self:center keeps the centre fixed
   as the width grows, so no margin change is needed. */
.planning-scheduling-step-01 .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;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
  padding: 33px 30px 33px 30px;
}
.planning-scheduling-step-01 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-01 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-01 li { margin-left: 20px; }

/* step 02: left arrow pinned against the canvas edge -- row wraps instead */
.planning-scheduling-step-02 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
  /* The left arrow eats 31px of the box before the white panel starts, so the
     original 30px left padding put every line flush against the panel edge.
     31 + 30 gives the text the same air as the other three sides. */
  padding: 30px 30px 30px 61px;
}
.planning-scheduling-step-02 .headline { width: 486px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-02 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-02 li { margin-left: 20px; }
.planning-scheduling-step-02 .flex-row {
  align-self: stretch;
  flex-wrap: wrap;
  row-gap: 14px;
  min-width: 0;
}
.planning-scheduling-step-02 a.cta-demo { margin-left: 0; }

/* step 03: down arrow, 599 -> 813px, centre held by align-self:center */
.planning-scheduling-step-03 .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;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
  /* Down arrow: the white panel STOPS at 87.54% of the box height -- the last
     12.5% is the arrow notch. padding-bottom is measured from the BOX bottom,
     so the old 30px put BACK/NEXT and the CTA 4px BELOW the panel, sitting on
     the green stroke. 63.4px puts the footer 25px clear of the panel, matching
     the other three sides. (qc_tour.py cannot catch this: its panel bbox
     includes the arrow, so the box bottom and the panel bottom look identical.) */
  padding: 30px 30px 63.4px 30px;
  /* Down arrow: the BOTTOM edge is the anchor. Widening shortened the
     callout 361 -> 275px, so push it down by the whole loss. The taller box
     (275 -> 308px) then has to come back up by the 32.3px the arrow tip moved. */
  margin-top: 53.7px;
}
.planning-scheduling-step-03 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-03 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-03 li { margin-left: 20px; }

/* step 06: down arrow, 503 -> 813px, centre held by align-self:center */
.planning-scheduling-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;
  align-items: flex-start;
  gap: 0;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
  /* Down arrow: the white panel stops at 87.70% of the box height. The old
     26.5px bottom padding left ALL APPS, BACK, NEXT and the CTA 6px below the
     panel, straddling the green stroke -- clearly visible in the screenshot.
     62.4px clears the panel by 25px. */
  padding: 26.5px 30px 62.4px 30px;
  /* Down arrow: hold the bottom edge after the 317 -> 268px shortening, then
     lift again by the 35.3px the taller box (268 -> 304px) moved the tip. */
  margin-top: 13.7px;
}
.planning-scheduling-step-06 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-06 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-06 li { margin-left: 20px; }

/* step 08: up arrow, 663 -> 813px, centre held by align-self:center */
.planning-scheduling-step-08 .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;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
  padding: 30px 30px 30px 30px;
}
.planning-scheduling-step-08 .headline { width: 753px; margin-left: 0; margin-right: 0; }
.planning-scheduling-step-08 ul { margin: 10px 0 0 0; }
.planning-scheduling-step-08 li { margin-left: 20px; }

/* The step-10 next-steps screen has no background-color in combined.css, and
   css/planning-scheduling-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. */
.planning-scheduling-step-10 { background-color: var(--white); }

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

/* step 05, bottom clearance 63 -> 32-ish.
   min-height: 318px was sized for the old 503px-wide callout; once the CTA
   widening let the bullets reflow onto fewer lines the leftover showed as a
   dead white band under the footer row -- 63px against the 28-32px every
   other step in this tour shows. Releasing min-height lets the box hug its
   content. */
.planning-scheduling-step-05 .callout { min-height: 0; }
/* Re-anchor: .callout-container is a column flex and this callout is its first
   child, so the box is TOP-anchored at padding-top 188.2px and shrinks UPWARD
   off its bottom edge. The DOWN arrow lives on that bottom edge, so all 39px
   of the 318 -> 279px shortening came straight off the apex (y 504 -> 465).
   margin-top: 39px puts the box back down on its old bottom edge; apex held at
   [805, 504], and .callout-image-05 below still starts at y=506 as before. */
.planning-scheduling-step-05 .callout { margin-top: 39px; }