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

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

/* step 01: left arrow, 684 -> 865px.
   Panel padding re-cut 2026-08-20 to the tour-wide 32px standard.
   Right was 56px: the box had been widened to 885px for a footer row that only
   needs 727, so the headline stopped 56px short of the panel. Width 885 -> 865
   fixes it; .overlap-group1 is justify-content: flex-start here, so the box is
   pinned by its LEFT edge (x=276) and narrowing takes the slack off the right --
   the arrow-bearing left edge and the apex x do not move.
   Bottom was 66px: min-height 283px holds the box 42px taller than its content,
   and all of the slack sat under the footer row. The box is NOT shrunk (a side
   arrow rides at mid-height, so losing height would drop the apex); the row is
   pushed to the bottom padding edge with margin-top:auto and padding-bottom cut
   to 33px, leaving 32px of visible panel. Height stays 283, apex stays y=490.1.
   padding-left 71.6 -> 75 clears the 43px left arrow notch by 32px. */
.crm-step-01 .callout {
  width: 865px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
  padding: 32px 32px 33px 75px;
}
.crm-step-01 .headline { width: 756.9px; margin-left: 0; margin-right: 0; }
.crm-step-01 ul { margin: 10px 0 0 0; }
.crm-step-01 li { margin-left: 20px; }
.crm-step-01 .flex-row { margin-left: 0; margin-top: auto; }

/* step 02: left arrow, genuinely boxed in -- row still wraps.
   Measured 2026-08-20: the arrow tip sits at x=1169 and the highlighted
   Companies grid's green border ends at x=1166, so the left edge cannot move
   left without the callout climbing onto its own target; the canvas ends at
   1920, so the widest this box can ever be is 751px. A one-line footer row
   needs 727px of content plus ~45px of left padding to clear the arrow plus a
   right padding, i.e. ~813px. It does not fit. Do not "fix" this by sliding
   the callout left -- that is the defect step 09 had. Needs a design call:
   shorter CTA label, tighter dot spacing tour-wide, or leave it stacked. */
.crm-step-02 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
  padding: 25.7px 28.5px 25.7px 57.9px;
}
.crm-step-02 .headline { width: 596.6px; margin-left: 0; margin-right: 0; }
.crm-step-02 ul { margin: 10px 0 0 0; }
.crm-step-02 li { margin-left: 20px; }
.crm-step-02 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.crm-step-02 a.cta-demo { margin-left: 0; }

/* step 03: down arrow, 550 -> 824px */
.crm-step-03 .callout {
  width: 824px;
  margin-left: -137.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
  padding: 26.1px 33.5px 59.7px 33.5px;
}
.crm-step-03 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.crm-step-03 ul { margin: 10px 0 0 0; }
.crm-step-03 li { margin-left: 20px; }
.crm-step-03 .flex-row { margin-left: 0; }

/* step 04: right arrow, 583 -> 869px */
.crm-step-04 .callout {
  width: 869px;
  margin-left: -286px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
  padding: 24.9px 77.9px 24.9px 34.5px;
}
.crm-step-04 .headline { width: 756.6px; margin-left: 0; margin-right: 0; }
.crm-step-04 ul { margin: 10px 0 0 0; }
.crm-step-04 li { margin-left: 20px; }
.crm-step-04 .flex-row { margin-left: 0; }

/* step 05: left arrow, 584 -> 802px.
   The arrow-bearing (left) edge stays at x=1093.5. This step's flex line is
   justified to flex-end, so the box has to grow RIGHTWARD through a negative
   right margin; a plain width bump would drag the arrow left off its target.
   The footer gaps are shaved ~12px so the one-line row fits without shoving
   the box up against the 1920 canvas edge. */
.crm-step-05 .callout {
  width: 813px;
  margin-right: -229px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
  /* padding-left 58.9 -> 75: the left arrow notch eats 47px of the box at this
     width, so the old value left the text only 12px clear of the white panel,
     against the 27-28px its left-arrow siblings (steps 01 and 09) show. Width
     goes 802 -> 813 and margin-right -218 -> -229 so the extra padding does not
     squeeze the one-line footer row; the arrow-bearing left edge stays on
     x=1093.5, and right padding is trimmed 33.5 -> 28 to keep a canvas gutter.
     2026-08-20: bottom was 43px because min-height 290px holds the box 15px
     taller than its content. The box keeps its height (a side arrow at
     mid-height would drop if it shrank); the footer row goes to the bottom
     padding edge via margin-top:auto and padding-bottom drops to 33px, leaving
     32px of panel. Top 28.5 -> 32 to match. Apex holds at y=539. */
  padding: 32px 28px 33px 75px;
}
.crm-step-05 .headline { width: 710px; margin-left: 0; margin-right: 0; }
.crm-step-05 ul { margin: 10px 0 0 0; }
.crm-step-05 li { margin-left: 20px; }
.crm-step-05 .flex-row { margin-left: 0; margin-top: auto; }
.crm-step-05 .flex-row .navigation { margin-left: 18px; }
.crm-step-05 .flex-row .t-button-container { margin-left: 14px; }
.crm-step-05 a.cta-demo { margin-left: 12px; }

/* step 06: up arrow, 550 -> 824px.
   Fixed 2026-08-20. Two things were wrong:
   1) This step's .overlap-group1 is justify-content: flex-end, so the callout is
      pinned by its RIGHT edge and the extra 274px grew entirely LEFTWARD. The
      margin-left: -137px that was here is a NO-OP under flex-end (a negative
      left margin only adds free space; the right edge still lands on the
      container's content edge), so the centred up arrow ended up at x=859
      instead of the design's x=996. A negative margin-RIGHT of half the growth
      moves the box right and puts the apex back on x=996.
   2) The taller CTA footer grew the box UPWARD (it is bottom-anchored by
      align-items: flex-end + padding-bottom on .overlap-group1), pushing the
      top edge from y=540 to y=525. The green marker around the Open Orders
      grid ends at y=538, so the arrow apex punched through the green border
      and covered the Customer Part cell of the last highlighted row. Dropping
      .overlap-group1's bottom padding 195 -> 180 shifts the box back down so
      the apex sits at y=540 again, 2px clear of the marker as authored.
   3) 2026-08-20 panel padding: top read 43px because the up arrow eats the top
      35px of the box, and padding-top 58.2 (plus the headline's own 20px
      margin-top from combined.css) overshot it. padding-top 47.2 lands the text
      32px below the panel edge.
      The box must NOT lose height doing that -- it is bottom-anchored, so a
      shorter box slides its top edge, and the apex with it, down off the Open
      Orders marker. Content plus padding now totals 346px, under the 360px the
      box actually paints, so min-height is pinned at 360px and the footer row is
      held on the bottom padding edge by margin-top:auto. Height stays 360, apex
      stays (995, 541.4), and .overlap-group1 keeps padding-bottom 180px. */
.crm-step-06 .callout {
  width: 824px;
  margin-right: -137px;
  min-height: 360px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
  padding: 47.2px 33.5px 33px 33.5px;
}
.crm-step-06 .overlap-group1 { padding-bottom: 180px; }
.crm-step-06 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.crm-step-06 ul { margin: 10px 0 0 0; }
.crm-step-06 li { margin-left: 20px; }
.crm-step-06 .flex-row { margin-left: 0; margin-top: auto; }

/* step 07: right arrow, 583 -> 869px */
.crm-step-07 .callout {
  width: 869px;
  margin-left: -286px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
  padding: 24.9px 77.9px 24.9px 34.5px;
}
.crm-step-07 .headline { width: 756.6px; margin-left: 0; margin-right: 0; }
.crm-step-07 ul { margin: 10px 0 0 0; }
.crm-step-07 li { margin-left: 20px; }
.crm-step-07 .flex-row { margin-left: 0; }

/* step 08: right arrow, 633 -> 795px.
   The arrow-bearing (right) edge stays at x=837, hard against the highlighted
   funnel chart, so the box grows LEFTWARD through a negative left margin.
   Right padding is re-cut for the new width (the arrow notch scales with the
   box). Footer gaps shaved ~12px as on step 05.
   2026-08-20 panel padding: right read 14px -- the right arrow notch eats 42px
   of a 795px box, so the headline all but touched the panel. The arrow-bearing
   right edge stays on x=837, so the box grows LEFTWARD again: width 795 -> 819
   and margin-left -162 -> -186, which puts 32px of panel on both sides.
   Bottom read 76px: min-height 283px holds the box 51px taller than its content
   and all of it pooled under the footer row. The box keeps its height (a side
   arrow rides at mid-height and would drop with it); margin-top:auto puts the row
   on the bottom padding edge and padding-bottom 33px leaves 32px of panel.
   Height stays 283, apex stays (835, 789.5). */
.crm-step-08 .callout {
  width: 819px;
  margin-left: -186px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
  padding: 32px 56px 33px 32px;
}
.crm-step-08 .headline { width: 711.5px; margin-left: 0; margin-right: 0; }
.crm-step-08 ul { margin: 10px 0 0 0; }
.crm-step-08 li { margin-left: 20px; }
.crm-step-08 .flex-row { margin-left: 0; margin-top: auto; }
.crm-step-08 .flex-row .navigation { margin-left: 18px; }
.crm-step-08 .flex-row .t-button-container { margin-left: 14px; }
.crm-step-08 a.cta-demo { margin-left: 12px; }

/* step 09: left arrow, 584 -> 868px.
   This step's flex line is justified to flex-end, so widening alone pinned the
   RIGHT edge and dragged the arrow-bearing left edge 284px left, parking the
   callout on top of the Revenue @ Status chart it points at. The negative
   right margin grows the box rightward instead, putting the left edge back on
   the design's x=753.
   2026-08-20 panel padding: bottom read 43px because min-height 291px holds the
   box 14px taller than its content. Same treatment as steps 01 and 05 -- keep the
   height (side arrow at mid-height), push the footer row to the bottom padding
   edge with margin-top:auto, and cut padding-bottom to 33px for 32px of panel.
   Height stays 291, apex stays (754, 434.1). */
.crm-step-09 .callout {
  width: 868px;
  margin-right: -284px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
  padding: 32px 33.5px 33px 77.9px;
}
.crm-step-09 .headline { width: 756.6px; margin-left: 0; margin-right: 0; }
.crm-step-09 ul { margin: 10px 0 0 0; }
.crm-step-09 li { margin-left: 20px; }
.crm-step-09 .flex-row { margin-left: 0; margin-top: auto; }