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

/* ------------------------------------------------------------------
   Callout widening (this tour only): the footer row needs ~790px of
   inner width to fit the CTA. Narrow callouts are widened to 870px,
   the border SVG is stretched to the new width, and the right padding
   drops by half the added width so the callout center (and the
   downward arrow) stays on the same screen spot.
   ------------------------------------------------------------------ */

.dashboards-and-kpis-step-01 .callout,
.dashboards-and-kpis-step-02 .callout,
.dashboards-and-kpis-step-03 .callout,
.dashboards-and-kpis-step-04 .callout,
.dashboards-and-kpis-step-05 .callout,
.dashboards-and-kpis-step-08 .callout,
.dashboards-and-kpis-step-09 .callout {
  width: 870px;
  background-size: 100% 100%;
}

/* ?v=2 busts cached copies of the SVGs from before the
   preserveAspectRatio="none" edit (browsers cache SVG images hard). */
.dashboards-and-kpis-step-01 .callout { background-image: url(../img/border-step-01.svg?v=4); }
.dashboards-and-kpis-step-02 .callout { background-image: url(../img/border-step-02.svg?v=4); }
.dashboards-and-kpis-step-03 .callout { background-image: url(../img/border-step-03.svg?v=4); }
.dashboards-and-kpis-step-04 .callout { background-image: url(../img/border-step-04.svg?v=4); }
.dashboards-and-kpis-step-05 .callout { background-image: url(../img/border-step-05.svg?v=4); }
.dashboards-and-kpis-step-08 .callout { background-image: url(../img/border-step-08.svg?v=4); }
.dashboards-and-kpis-step-09 .callout { background-image: url(../img/border-step-09.svg?v=4); }

/* bottom padding 445->439: the stretched border sits at the box edge, where
   the old proportional render floated 6px lower; shift down to compensate */
.dashboards-and-kpis-step-01 .overlap-group1 { padding: 445px 525px 439px; }
.dashboards-and-kpis-step-02 .overlap-group1 { padding: 445px 525px 439px; }
.dashboards-and-kpis-step-03 .overlap-group1 { padding: 385px 3px; }
.dashboards-and-kpis-step-04 .overlap-group1 { padding: 415px 555px; }
.dashboards-and-kpis-step-05 .overlap-group1 { padding: 385px 3px; }
.dashboards-and-kpis-step-08 .overlap-group1 { padding: 205px 565px; }
.dashboards-and-kpis-step-09 .overlap-group1 { padding: 458px 1025px 300px 25px; }

/* Headlines kept their old fixed widths from the narrow callouts, so titles
   wrapped early. Set each to the widened callout's inner width
   (870 - side paddings; arrow side is 65px). */
.dashboards-and-kpis-step-01 .headline,
.dashboards-and-kpis-step-02 .headline,
.dashboards-and-kpis-step-04 .headline,
.dashboards-and-kpis-step-08 .headline { width: 800px; }
.dashboards-and-kpis-step-03 .headline,
.dashboards-and-kpis-step-05 .headline,
.dashboards-and-kpis-step-09 .headline { width: 770px; }

/* --------------------------------------------------------------------
   Panel-clearance pass: bring this tour's two outliers onto the site-wide
   32px content-to-panel clearance (+/-8). Nothing else here is touched --
   this tour is the approved reference layout.
   Clearance is measured to the painted white panel, not to the box edge:
   scripts/check_panel_padding.py --target 32 --tol 8
   -------------------------------------------------------------------- */

/* step 05, bottom clearance 68 -> 32-ish.
   min-height: 322px was sized before the CTA widening let the bullets reflow
   shorter, so a dead white band sat under the footer row. Releasing it lets
   the box hug its content (322 -> 288px).
   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%). 34px of lost
   height would drop the apex by 17px, so padding-bottom goes 385 -> 402 to
   lift the box back by exactly that much. Apex held at y=533. */
.dashboards-and-kpis-step-05 .callout { min-height: 0; }
.dashboards-and-kpis-step-05 .overlap-group1 { padding: 385px 3px 402px; }

/* step 07, right clearance 14 -> 32-ish.
   The headline is 800px wide inside an 850px box with 35px side padding, so
   it overhangs the inner width by 20px and stops 14px short of the panel.
   The title measures 784px unwrapped, so it cannot be narrowed past ~790
   without wrapping to two lines -- the box widens instead, 850 -> 868px.
   Re-anchor: .overlap-group1 is justify-content: flex-end, so the 18px of
   growth goes LEFTWARD, and the DOWN arrow rides at 50% of the box WIDTH.
   margin-right: -9px (half the growth) pushes the box back so the box centre,
   and with it the arrow apex, stays on x=959.
   The border keeps background-size: contain; at 868x329 contain scales the
   850x321 artwork to fill the width exactly, so no stretch flag is needed. */
.dashboards-and-kpis-step-07 .callout { width: 868px; margin-right: -9px; }

/* Arrow-tip tangency (2026-08-20): step 06's up-arrow tip crossed 8px past the
   highlight's bottom line. Bottom-anchored; drop 8px. */
.dashboards-and-kpis-step-06 .overlap-group1 { padding-bottom: 252px; }