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

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

   ANCHORING (2026-08-20): .overlap-group1 is a flex row. On every step except 06
   it is justify-content: flex-end, so the callout is pinned by its RIGHT edge and
   all added width grows LEFTWARD. margin-LEFT is a NO-OP there -- it changes the
   margin box but not the item's right edge -- so the arrow slid left by half the
   growth on 02/03/04/07/08 and stopped pointing at what it was aimed at. Every
   arrow in this tour is centred on its edge (verified by rendering each
   border-step-NN.svg), so the growth must be split evenly: negative margin-RIGHT
   of half the growth pushes the right edge back out and re-centres the box.
   Step 06 has no justify-content, i.e. flex-START: there the box is pinned by its
   LEFT edge and margin-LEFT is the one that works. Check justify-content in
   combined.css before touching either margin.
   -------------------------------------------------------------------- */

/* step 01: left arrow, pinned to the canvas edge -- row wraps.
   Measured 2026-08-20: a one-line footer row needs 711px of INNER width
   (ALL APPS 62 + 30 + dots 123 + 20 + BACK/NEXT 218 + 16 + CTA 242).
   The arrow-bearing left edge is fixed at x=1135, so the box can reach 785px
   before it hits the canvas; minus the stretched arrow notch (~45px) and the
   text gap it tops out near 674px of inner width. It cannot fit -- the row is
   given the callout's inner width so it wraps, and the callout grows taller. */
.purchasing-step-01 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
  padding: 30px 30px 35px 70px;  /* the left arrow leaves the top edge flush, so 30 = 30 clearance */
}
.purchasing-step-01 .headline { width: 500px; margin-left: 0; margin-right: 0; }
.purchasing-step-01 ul { margin: 10px 0 0 0; }
.purchasing-step-01 li { margin-left: 20px; }
.purchasing-step-01 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.purchasing-step-01 a.cta-demo { margin-left: 0; }

/* step 02: up arrow, 605 -> 806px */
.purchasing-step-02 .callout {
  width: 806px;
  margin-right: -100.5px;  /* grow half each side: keeps the centred arrow on target under flex-end */
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
  padding: 64.7px 30px 30px 30px;  /* 34.7 arrow notch + 30 clearance */
}
.purchasing-step-02 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.purchasing-step-02 ul { margin: 10px 0 0 0; }
.purchasing-step-02 li { margin-left: 20px; }
.purchasing-step-02 .flex-row { margin-left: 0; }

/* step 03: up arrow, 650 -> 808px */
.purchasing-step-03 .callout {
  width: 808px;
  margin-right: -79.0px;  /* grow half each side: keeps the centred arrow on target under flex-end */
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
  padding: 59.6px 30px 30px 32px;
}
.purchasing-step-03 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.purchasing-step-03 ul { margin: 10px 0 0 0; }
.purchasing-step-03 li { margin-left: 20px; }
.purchasing-step-03 .flex-row { margin-left: 0; }

/* step 04: down arrow, 675 -> 815px */
.purchasing-step-04 .callout {
  width: 815px;
  margin-right: -70.0px;  /* grow half each side: keeps the centred arrow on target under flex-end */
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
  padding: 25.6px 34.5px 59.5px 34.5px;
}
.purchasing-step-04 .headline { width: 746.0px; margin-left: 0; margin-right: 0; }
.purchasing-step-04 ul { margin: 10px 0 0 0; }
.purchasing-step-04 li { margin-left: 20px; }
.purchasing-step-04 .flex-row { margin-left: 0; }

/* step 05: left arrow, pinned to the canvas edge -- row wraps.
   Measured 2026-08-20: the one-line footer row needs 711px of inner width. The
   arrow-bearing left edge is fixed at x=1181, so the box can reach only 739px
   before it hits the canvas; minus the arrow notch and the text gap that is
   ~648px of inner width. It cannot fit -- the row wraps instead. */
.purchasing-step-05 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
  padding: 25.9px 30px 30px 59.4px;
}
.purchasing-step-05 .headline { width: 619.6px; margin-left: 0; margin-right: 0; }
.purchasing-step-05 ul { margin: 10px 0 0 0; }
.purchasing-step-05 li { margin-left: 20px; }
.purchasing-step-05 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.purchasing-step-05 a.cta-demo { margin-left: 0; }

/* step 06: up arrow, 650 -> 806px.
   NOTE: this is the ONE step whose .overlap-group1 has no justify-content, so it
   is flex-START -- the callout is pinned by its LEFT edge here and margin-left
   really does move it. Do not "fix" this one to margin-right like the others. */
.purchasing-step-06 .callout {
  width: 806px;
  margin-left: -78.0px;  /* grow half each side: keeps the centred arrow on target under flex-start */
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
  padding: 62.9px 30px 30px 30px;  /* 32.9 arrow notch + 30 clearance */
}
.purchasing-step-06 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.purchasing-step-06 ul { margin: 10px 0 0 0; }
.purchasing-step-06 li { margin-left: 20px; }
.purchasing-step-06 .flex-row { margin-left: 0; }

/* step 07: up arrow, 675 -> 806px */
.purchasing-step-07 .callout {
  width: 806px;
  margin-right: -65.5px;  /* grow half each side: keeps the centred arrow on target under flex-end */
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
  padding: 65.3px 30px 30px 30px;  /* 35.3 arrow notch + 30 clearance */
}
.purchasing-step-07 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.purchasing-step-07 ul { margin: 10px 0 0 0; }
.purchasing-step-07 li { margin-left: 20px; }
.purchasing-step-07 .flex-row { margin-left: 0; }

/* step 08: down arrow, 650 -> 809px */
.purchasing-step-08 .callout {
  width: 809px;
  margin-right: -79.5px;  /* grow half each side: keeps the centred arrow on target under flex-end */
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
  padding: 25.4px 30px 59.6px 33px;
}
.purchasing-step-08 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.purchasing-step-08 ul { margin: 10px 0 0 0; }
.purchasing-step-08 li { margin-left: 20px; }
.purchasing-step-08 .flex-row { margin-left: 0; }

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

   Steps 01/02/06/07 measured 20, 45, 50 and 39px of top clearance against the
   26px their siblings show. Every one of them carries a leftover
   `.headline { margin-top }` in combined.css -- artwork positioning from before
   the callout had padding of its own (-15px on 01, +21 on 02, +25 on 06, +15 on
   07). That margin lands ON TOP of the callout's padding-top, which already
   contains the arrow notch (an up arrow eats the first ~33-35px of the box, so
   the white panel starts that far down). The two stack, and step 01's negative
   one subtracts, which is why the same defect reads as both too much air and
   too little.

   Fix: zero the stale margin, and set padding-top to `arrow notch + 30` so the
   title clears the painted panel by the same 30px on every step. Steps
   03/04/05/08 have no such margin and are untouched, as are the deliberately
   wrapped footer rows on 01 and 05.

   Re-anchoring. 02 and 07 are bottom-anchored (.overlap-group1 is
   align-items: flex-end), so losing height slides the TOP edge -- and the up
   arrow that sits on it -- downward; padding-bottom is raised by the height
   lost. Step 01 is bottom-anchored too but its box grew 10px taller (the stale
   margin was negative) and its arrow is a SIDE arrow riding at 50% of the
   height, so the apex rose 5px; padding-bottom drops by that 5px instead.
   Step 06 is the flex-START step (see the note above), so its top edge is
   pinned and its up arrow cannot move -- it needs no compensation, only the
   release of a min-height sized for the taller box.
     step 01  352 -> 362px,  apex held at y=510  (left arrow)
     step 02  339 -> 324px,  apex held at y=581  (up)
     step 06  375 -> 350px,  apex held at y=194  (up, top-pinned)
     step 07  333 -> 324px,  apex held at y=448  (up)
   -------------------------------------------------------------------- */
.purchasing-step-01 .headline,
.purchasing-step-02 .headline,
.purchasing-step-06 .headline,
.purchasing-step-07 .headline { margin-top: 0; }

.purchasing-step-06 .callout { min-height: 0; }

.purchasing-step-01 .overlap-group1 { padding-bottom: 388px; }    /* left, box grew 10 */
.purchasing-step-02 .overlap-group1 { padding-bottom: 175px; }    /* up,   box lost 15 */
.purchasing-step-07 .overlap-group1 { padding-bottom: 308.7px; }  /* up,   box lost  9 */

/* Arrow-tip tangency (Matt, 2026-08-20). Up-arrow tips crossed the green line:
   step 02 by 17px, step 07 by 18px. Bottom-anchored; drop each by the excess. */
.purchasing-step-02 .overlap-group1 { padding-bottom: 158px; }
.purchasing-step-07 .overlap-group1 { padding-bottom: 290.7px; }