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

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

/* step 01: up arrow, 650 -> 819px */
.estimating-quoting-step-01 .callout {
  width: 819px;
  margin-left: -84.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
  padding: 59.8px 28.5px 39.4px 28.5px;
}
.estimating-quoting-step-01 .headline { width: 762.0px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-01 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-01 li { margin-left: 20px; }
.estimating-quoting-step-01 .flex-row { margin-left: 0; }

/* step 02: left arrow, 683 -> 858px.
   .overlap-group1 is a flex row with justify-content:flex-end, so the callout is
   pinned by its RIGHT edge and the extra 175px grew LEFTWARD, sliding the left
   arrow 175px onto the Materials dialog it points at (12% of the highlight
   buried). margin-left is a no-op against flex-end -- it only shrinks the margin
   box, it does not push the item. A negative margin-right of the same 175px grows
   the box rightward instead and holds the arrow-bearing LEFT edge at x=977, which
   is exactly the highlight's right edge (tangent, as designed). */
.estimating-quoting-step-02 .callout {
  width: 858px;
  margin-right: -175px;
  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 67.7px;
}
.estimating-quoting-step-02 .headline { width: 761.8px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-02 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-02 li { margin-left: 20px; }
.estimating-quoting-step-02 .flex-row { margin-left: 0; }

/* step 03: up arrow, 650 -> 819px */
.estimating-quoting-step-03 .callout {
  width: 819px;
  margin-left: -84.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
  padding: 60.8px 28.5px 36.2px 28.5px;  /* 30.8 arrow notch + 30 clearance */
}
.estimating-quoting-step-03 .headline { width: 762.0px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-03 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-03 li { margin-left: 20px; }
.estimating-quoting-step-03 .flex-row { margin-left: 0; }

/* step 04: right arrow, 683 -> 863px */
.estimating-quoting-step-04 .callout {
  width: 863px;
  margin-left: -180px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
  padding: 25.7px 67.9px 25.7px 34.5px;
}
.estimating-quoting-step-04 .headline { width: 760.6px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-04 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-04 li { margin-left: 20px; }
.estimating-quoting-step-04 .flex-row { margin-left: 0; }

/* step 05: up arrow, 650 -> 819px. Same flex-end problem as step 02: the box grew
   169px leftward, carrying the centred up-arrow 84.5px left of the Unit Estimates
   column it was aimed at (apex x=982 -> 898). margin-left cannot pull it back
   under flex-end; a negative margin-right of half the growth re-centres the box
   over the original arrow position (apex back to x=982). */
.estimating-quoting-step-05 .callout {
  width: 819px;
  margin-right: -84.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
  padding: 61.0px 28.5px 35.5px 28.5px;  /* 31.0 arrow notch + 30 clearance */
}
.estimating-quoting-step-05 .headline { width: 762.0px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-05 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-05 li { margin-left: 20px; }
.estimating-quoting-step-05 .flex-row { margin-left: 0; }

/* step 06: up arrow, 650 -> 818px */
.estimating-quoting-step-06 .callout {
  width: 818px;
  margin-left: -84.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
  padding: 60.0px 28.5px 35.4px 28.5px;  /* 30.0 arrow notch + 30 clearance */
}
.estimating-quoting-step-06 .headline { width: 761.0px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-06 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-06 li { margin-left: 20px; }
.estimating-quoting-step-06 .flex-row { margin-left: 0; }

/* step 07: down arrow, 650 -> 819px */
.estimating-quoting-step-07 .callout {
  width: 819px;
  margin-left: -84.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
  padding: 25.4px 28.5px 57.9px 28.5px;
}
.estimating-quoting-step-07 .headline { width: 762.0px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-07 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-07 li { margin-left: 20px; }
.estimating-quoting-step-07 .flex-row { margin-left: 0; }

/* step 08: up arrow, 650 -> 818px */
.estimating-quoting-step-08 .callout {
  width: 818px;
  margin-left: -84.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
  padding: 58.8px 28.5px 36.6px 28.5px;  /* 28.8 arrow notch + 30 clearance */
}
.estimating-quoting-step-08 .headline { width: 761.0px; margin-left: 0; margin-right: 0; }
.estimating-quoting-step-08 ul { margin: 10px 0 0 0; }
.estimating-quoting-step-08 li { margin-left: 20px; }
.estimating-quoting-step-08 .flex-row { margin-left: 0; }

/* --------------------------------------------------------------------
   Layout defect fixes (QC pass, 2026-08-20)
   -------------------------------------------------------------------- */

/* step 03: its headline carried min-height:80px while every other step in this
   tour (and the dashboards-and-kpis template) uses 41px. The headline is a
   single 32px line, so the extra 39px opened an orphan gap between the title
   and the first bullet. */
.estimating-quoting-step-03 .headline { min-height: 41px; }

/* Every callout in this tour still carries the fixed min-height of the original
   border artwork (466px on step 01, 403px on step 06, ...). The CTA widening let
   the bullets fall onto one line each, so the content now ends up to 100px short
   of that height and the border paints a dead white band under the footer row.
   Drop the min-height so each box hugs its content, and move the group padding by
   the same amount so the arrow still points at what it pointed at:
     - up arrow    -> hold the TOP edge   (raise the bottom, so padding-bottom grows)
     - down arrow  -> hold the BOTTOM edge (lower the top, so padding-top grows)
     - side arrow  -> hold the vertical CENTRE
   Step 02 already centres its callout in the group, so its left arrow needs no
   compensation. */
.estimating-quoting-step-01 .callout,
.estimating-quoting-step-02 .callout,
.estimating-quoting-step-03 .callout,
.estimating-quoting-step-04 .callout,
.estimating-quoting-step-05 .callout,
.estimating-quoting-step-06 .callout,
.estimating-quoting-step-07 .callout,
.estimating-quoting-step-08 .callout { min-height: 0; }

.estimating-quoting-step-01 .overlap-group1 { padding-bottom: 388.3px; }  /* up   */
.estimating-quoting-step-03 .overlap-group1 { padding-bottom: 156.4px; }  /* up   */
.estimating-quoting-step-04 .overlap-group1 { padding-top: 354.3px; }     /* right */
.estimating-quoting-step-05 .overlap-group1 { padding-bottom: 95.5px; }   /* up   */
.estimating-quoting-step-06 .overlap-group1 { padding-bottom: 150.7px; }  /* up   */
.estimating-quoting-step-07 .overlap-group1 { padding-top: 356.0px; }     /* down */
.estimating-quoting-step-08 .overlap-group1 { padding-bottom: 263.5px; }  /* up   */

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

   Steps 01/03/05/06/08 measured 48-52px of top clearance against 25-26px on
   their siblings. All five are the tour's UP-ARROW steps, and every one of them
   carries a leftover `.headline { margin-top: 19-25px }` in combined.css --
   artwork positioning from before the callout had padding of its own. That
   margin is added ON TOP of the callout's padding-top, which already contains
   the arrow notch (the up arrow eats the first ~29-31px of the box, so the
   white panel starts that far down). The two stack, and the title floats.

   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 02/04/07
   have no such margin and are untouched.

   Each of these five boxes is bottom-anchored (.overlap-group1 is
   align-items: flex-end), so losing height slides the TOP edge -- and with it
   the up arrow, which sits on that edge -- downward. padding-bottom above is
   raised by exactly the height lost, holding every apex on its original target:
     step 01  403 -> 384px,  apex held at y=309
     step 03  326 -> 308px,  apex held at y=617
     step 05  293 -> 271px,  apex held at y=715
     step 06  359 -> 341px,  apex held at y=589
     step 08  331 -> 313px,  apex held at y=504
   -------------------------------------------------------------------- */
.estimating-quoting-step-01 .headline,
.estimating-quoting-step-03 .headline,
.estimating-quoting-step-05 .headline,
.estimating-quoting-step-06 .headline,
.estimating-quoting-step-08 .headline { margin-top: 0; }