/* 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 (paperless-parts-integration): steps whose footer row
   cannot fit the CTA are widened to 870px. Arrow rule: up/down keeps the
   callout CENTER fixed; left/right keeps the ARROW-BEARING EDGE fixed.
   Step 06 is capped at 835px because its right-arrow edge sits at x=835.
   ------------------------------------------------------------------ */

.paperless-parts-integration-step-01 .callout,
.paperless-parts-integration-step-04 .callout,
.paperless-parts-integration-step-05 .callout,
.paperless-parts-integration-step-08 .callout {
  width: 870px;
  background-size: 100% 100%;
}
.paperless-parts-integration-step-06 .callout {
  width: 835px;
  background-size: 100% 100%;
}

/* ?v=2 busts cached pre-stretch copies of the SVGs */
.paperless-parts-integration-step-01 .callout { background-image: url(../img/border-step-01.svg?v=4); }
.paperless-parts-integration-step-03 .callout { background-image: url(../img/border-step-03.svg?v=4); }
.paperless-parts-integration-step-04 .callout { background-image: url(../img/border-step-04.svg?v=4); }
.paperless-parts-integration-step-05 .callout { background-image: url(../img/border-step-05.svg?v=4); }
.paperless-parts-integration-step-06 .callout { background-image: url(../img/border-step-06.svg?v=4); }
.paperless-parts-integration-step-08 .callout { background-image: url(../img/border-step-08.svg?v=4); }

/* Repositioned canvas paddings for the widened callouts */
.paperless-parts-integration-step-01 .overlap-group1 { padding: 172px 368px 590px 682px; }
.paperless-parts-integration-step-03 .overlap-group1 { padding: 367.5px 811px 426.5px 159px; }
.paperless-parts-integration-step-04 .overlap-group1 { padding: 402px 405px 396px 645px; }
.paperless-parts-integration-step-05 .overlap-group1 { padding: 480px 526px 243px 524px; }
.paperless-parts-integration-step-06 .overlap-group1 { padding: 381.5px 1085px 372.5px 0px; }
.paperless-parts-integration-step-08 .overlap-group1 { padding: 596px 612.5px 127px 437.5px; }

/* Headlines refit to the widened inner width (arrow side pads 65px) */
.paperless-parts-integration-step-01 .headline,
.paperless-parts-integration-step-05 .headline,
.paperless-parts-integration-step-08 .headline { width: 800px; }
.paperless-parts-integration-step-04 .headline { width: 770px; }
.paperless-parts-integration-step-06 .headline { width: 735px; }

/* Step 06's footer row used to run tighter gaps (navigation 22px, cta 10px)
   than every other step. With the row centred inside the callout that pulled
   its right edge 43.5px off the white panel while the rest of the tour sits
   near 34, so the tightening is removed and the row runs the tour-standard
   gaps: 702px -> 716px wide, still one line inside the 735px inner width,
   right clearance 43.5 -> 36. Nothing about the box, border or arrow moves. */

/* Step 07 widened 913 -> 925 so the headline fits one line (natural 846px
   vs 843px inner). Up arrow: center held at x=1085.5. */
.paperless-parts-integration-step-07 .callout {
  width: 925px;
  min-height: 318px;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
}
.paperless-parts-integration-step-07 .overlap-group1 { padding: 615px 372px 147px 623px; }
.paperless-parts-integration-step-07 .headline { width: 855px; }

/* Step 03 widened 870 -> 950 so the headline fits one line (natural 834px vs
   850px inner). Right arrow: arrow-bearing edge held at x=1109, so the box
   grows leftward only (left edge 239 -> 159). Losing the second headline line
   drops the height 324 -> 286, so the vertical centre is held at y=510.5. */
.paperless-parts-integration-step-03 .callout {
  width: 950px;
  min-height: 286px;
  background-size: 100% 100%;
}
.paperless-parts-integration-step-03 .headline { width: 850px; min-height: 0; }

/* ------------------------------------------------------------------
   Headline line-break repair (steps 05 and 06). Both headlines are too
   long to fit one line inside a callout this tour can accommodate, so
   they stay two lines -- but the break was landing in a bad place. Only
   the headline's wrap width changes here: the callout box, the border,
   the arrow and the page anchoring are all untouched, and both headlines
   remain exactly two lines, so no re-anchoring is needed.

   Step 05 "Track Uploaded Records from Paperless Parts to Global Shop
   Solutions": at 800px it broke after "Global", splitting the client's
   own name across lines (784 / 211). At 660px it breaks after "Parts"
   (648 / 311), keeping both "Paperless Parts" and "Global Shop
   Solutions" whole.

   Step 06 "Confirm When an Uploaded Order Has Processed Successfully":
   at 735px it broke after "Processed", orphaning the single word
   "Successfully" on line two (704 / 175). At 520px it broke after
   "Order", stranding "Has" at the head of line two (489 / 389).
   Laurie asked for "Has" on the upper line (2026-08-24), so the box
   goes to 560px: line one "...Order Has" measures 550.5px and fits,
   line two "Processed Successfully" 327.9px. Still exactly two lines,
   so the box height, the border, the arrow and the anchoring do not
   move. The painted headline now ends at x=585 inside the callout,
   still well inside the footer row's x=760, which is what sets this
   step's right clearance -- so the panel-padding numbers are unchanged.
   ------------------------------------------------------------------ */
.paperless-parts-integration-step-05 .headline { width: 660px; }
.paperless-parts-integration-step-06 .headline { width: 560px; }

/* ------------------------------------------------------------------
   Panel clearance pass (2026-08-20). Target: 32px of content-to-white-panel
   clearance on all four sides, +/-8px, measured with
   scripts/check_panel_padding.py. Steps 03, 05 and 06 were the outliers and
   each has its own cause -- there is no shared one in this tour.
   ------------------------------------------------------------------ */

/* Step 03, RIGHT clearance 22 -> 34. The headline BOX was 850px, exactly
   filling the 950px callout's inner width, while the headline TEXT is only
   834.1px wide. The oversized box, not the text, was crowding the border.
   838px still clears the text on one line and leaves the box honest. The
   950px callout width, its arrow edge and the text's own position are all
   unchanged, so nothing moves on screen. */
.paperless-parts-integration-step-03 .headline { width: 838px; }

/* Step 05, RIGHT clearance 76 -> 36. Nothing in this callout reached its
   right side: the headline is deliberately wrapped at 660px, the bullets run
   727.9px and the footer row 716px, inside an 870px box. The box was simply
   too wide for its contents, so it comes down to 800px (inner width 730px --
   1.6px of slack over the widest bullet, so no bullet re-wraps and the
   headline's two-line break is untouched).
   RE-ANCHORED: this step's arrow points UP, so it rides at 50% of box WIDTH.
   Losing 70px of width would drag it 35px left. .overlap-group1's left and
   right padding both move 35px inward (524/526 -> 559/561), holding the box
   centre -- and the apex -- at canvas x=959. Verified before and after. */
.paperless-parts-integration-step-05 .callout { width: 800px; }
.paperless-parts-integration-step-05 .overlap-group1 { padding: 480px 561px 243px 559px; }