/* 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; } /* -------------------------------------------------------------------- job-costing-accounting-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 .job-costing-accounting-step-NN, read from each page's hidden input -- it does not always match the folder or the file name. -------------------------------------------------------------------- */ /* step 01: right arrow, 819 -> 857px */ .job-costing-accounting-step-01 .callout { width: 857px; margin-left: -38px; align-items: flex-start; background-size: 100% 100%; background-image: url(../img/border-step-01.svg?v=4); } .job-costing-accounting-step-01 .headline { width: 757px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-01 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-01 li { margin-left: 20px; } .job-costing-accounting-step-01 .flex-row { margin-left: 0; } /* step 02: left arrow, 730 -> 865px. Its .overlap-group1 is justify-content:flex-end, so the callout is pinned by its RIGHT edge and the extra 135px grew LEFTWARD: the left edge slid from x=966 to x=831 and the left arrow landed INSIDE the highlighted "Work Order Query - Operations" window (highlight runs x=38..967), clipping the Act Hours and Cost columns off the grid. margin-left is a no-op under flex-end, so the growth is taken out of the RIGHT margin instead (-135px): the left edge and its arrow return to x=966, tangent to the highlight's right edge, and the box grows into the free canvas on the right (right edge 1696 -> 1831, 89px clear of the 1920 canvas edge). */ .job-costing-accounting-step-02 .callout { width: 865px; margin-right: -135px; align-items: flex-start; background-size: 100% 100%; background-image: url(../img/border-step-02.svg?v=4); padding: 35px 35px 35px 68.1px; } .job-costing-accounting-step-02 .headline { width: 761.9px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-02 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-02 li { margin-left: 20px; } .job-costing-accounting-step-02 .flex-row { margin-left: 0; } /* step 03: up arrow, already wide enough */ .job-costing-accounting-step-03 .callout { align-items: flex-start; } .job-costing-accounting-step-03 .headline { width: 809px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-03 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-03 li { margin-left: 20px; } .job-costing-accounting-step-03 .flex-row { margin-left: 0; } /* step 04: up arrow, 814 -> 832px */ .job-costing-accounting-step-04 .callout { width: 832px; margin-left: -9.0px; align-items: flex-start; background-size: 100% 100%; background-image: url(../img/border-step-04.svg?v=4); } .job-costing-accounting-step-04 .headline { width: 762px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-04 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-04 li { margin-left: 20px; } .job-costing-accounting-step-04 .flex-row { margin-left: 0; } /* step 05: right arrow, already wide enough */ .job-costing-accounting-step-05 .callout { align-items: flex-start; } .job-costing-accounting-step-05 .headline { width: 825px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-05 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-05 li { margin-left: 20px; } .job-costing-accounting-step-05 .flex-row { margin-left: 0; } /* step 06: left arrow, 660 -> 800px. Its .overlap-group1 is justify-content:flex-end with padding-right:163px, so the callout is anchored by its RIGHT edge. The arrow is on the LEFT edge and its tip lands on the WO History window at x=1097, so the extra 140px is taken out of the right margin (-140px): the left edge stays put and the box grows into the free canvas on the right. The arrow makes the painted panel start 40px inside the box (body edge at x=1137), and only 823px of canvas exists right of 1097, so 800px is close to the ceiling -- padding is trimmed to 58/24 (content 1155..1873, 18px and 23px inside the panel) and this step's footer gaps are pulled in a little, so the 712px row fits the 718px inner width on one line. With the row unwrapped the callout returns to its native 411px height and the border SVG stops being stretched vertically. */ .job-costing-accounting-step-06 .callout { width: 800px; margin-right: -140px; padding: 35px 24px 35px 58px; align-items: flex-start; background-size: 100% 100%; background-image: url(../img/border-step-06.svg?v=4); } .job-costing-accounting-step-06 .headline { width: 718px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-06 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-06 li { margin-left: 20px; } .job-costing-accounting-step-06 .flex-row { margin-left: 0; } .job-costing-accounting-step-06 .flex-row .navigation { margin-left: 20px; } .job-costing-accounting-step-06 .flex-row .t-button-container { margin-left: 14px; } .job-costing-accounting-step-06 a.cta-demo { margin-left: 12px; } /* step 07: right arrow, 832 -> 862px */ .job-costing-accounting-step-07 .callout { width: 862px; margin-left: -30px; align-items: flex-start; background-size: 100% 100%; background-image: url(../img/border-step-07.svg?v=4); } .job-costing-accounting-step-07 .headline { width: 762px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-07 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-07 li { margin-left: 20px; } .job-costing-accounting-step-07 .flex-row { margin-left: 0; } /* step 08: right arrow, 762 -> 862px */ .job-costing-accounting-step-08 .callout { width: 862px; margin-left: -100px; align-items: flex-start; background-size: 100% 100%; background-image: url(../img/border-step-08.svg?v=4); } .job-costing-accounting-step-08 .headline { width: 762px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-08 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-08 li { margin-left: 20px; } .job-costing-accounting-step-08 .flex-row { margin-left: 0; } /* step 09: up arrow, 825 -> 832px */ .job-costing-accounting-step-09 .callout { width: 832px; margin-left: -3.5px; align-items: flex-start; background-size: 100% 100%; background-image: url(../img/border-step-09.svg?v=4); } .job-costing-accounting-step-09 .headline { width: 762px; margin-left: 0; margin-right: 0; } .job-costing-accounting-step-09 ul { margin: 10px 0 0 0; } .job-costing-accounting-step-09 li { margin-left: 20px; } .job-costing-accounting-step-09 .flex-row { margin-left: 0; } /* -------------------------------------------------------------------- Panel padding pass: consistent 32px (+/-8) of clearance between the content and the painted white panel on all four sides. Clearance is NOT the padding value. The border SVG's arrow juts out of the box, so on the arrow side the panel wall sits ~41px inside the box edge; padding has to clear that wall, not the box. Every box here carried a stale `min-height` sized before the CTA widening let the copy reflow shorter, so the panel ran on for 60-100px below the footer row. `min-height: 0` lets the box hug its content. RE-ANCHORING. The border is painted with `background-size: 100% 100%`, so the arrow rides at a fixed FRACTION of the box, not a fixed offset. Shrinking the box therefore walks the arrow off its target. Every `.overlap-group1` here is `align-items: flex-end`, so the box shrinks UPWARD from a fixed bottom edge: - side arrow (sits at ~50% of box HEIGHT): losing H px drops the apex by H/2, so add H/2 to `padding-bottom`. - up arrow (apex sits ON the top edge): losing H px drops the apex by the full H, so add H to `padding-bottom`. Apex positions measured before and after each change are in the per-step comments. -------------------------------------------------------------------- */ /* step 02 - bottom was 78. min-height 371 held 44px of dead panel under the footer. Left arrow, apex y 546.5 before; box shrinks 371->327, so the apex would fall to 569 -- 22.1px of that is given back to padding-bottom (347.5 -> 369.6) and the apex returns to 546.5. */ .job-costing-accounting-step-02 .callout { min-height: 0; } .job-costing-accounting-step-02 .overlap-group1 { padding-bottom: 369.6px; } /* step 06 - left 17, right 23, bottom 101, the worst box on the site. LEFT/RIGHT. The arrow tip is pinned: the highlight around the WO History Reaveraging window ends at x=1098 and the callout's left edge sits at 1097, so the box cannot slide left without biting the highlight, and `.overlap-group1` is justify-content: flex-end, which makes margin-left a no-op. The only lever is growing rightward out of margin-right: 800 -> 812 (margin-right -140 -> -152), right edge 1897 -> 1909. That is close to the ceiling; the canvas ends at 1920. The 12px is split into padding, 58/24 -> 67/27. The arrow is part of the stretched SVG, so the panel wall stays a fixed 41/800 = 5.125% of the width and widens with the box: every extra pixel of box only buys 0.949 of a pixel of left clearance. Result: left 67 - 41.6 = 25, right 27 - 1 = 26. Both are inside the 32 +/- 8 band but at its low end, and that is the geometric limit for this step, not a choice. The headline box, not the 712px footer row, is the widest content and its text needs 717.7px to stay on one line, so its 718px width is held and the inner width (812 - 67 - 27 = 718) is sized to it. BOTTOM. min-height 411 held 67px of dead panel below the footer. Left arrow, apex y 536 before; the box shrinks 411 -> 344 so the apex would fall to 569.5, and 33.6px of that goes back into padding-bottom (338 -> 371.6). */ .job-costing-accounting-step-06 .callout { width: 812px; margin-right: -152px; padding: 35px 27px 35px 67px; min-height: 0; } .job-costing-accounting-step-06 .headline { width: 718px; } .job-costing-accounting-step-06 .overlap-group1 { padding-bottom: 371.6px; } /* step 08 - bottom was 61. min-height 371 held 27px of dead panel. Right arrow, apex y 539.5 before; box shrinks 371->344, so the apex would fall to 553 and 13.6px goes back into padding-bottom (354.5 -> 368.1). */ .job-costing-accounting-step-08 .callout { min-height: 0; } .job-costing-accounting-step-08 .overlap-group1 { padding-bottom: 368.1px; } /* step 09 - bottom was 41. min-height 325 held 7px of dead panel. UP arrow: its apex sits on the top edge (x=955.5, y=680), so the whole 7px of lost height, not half, goes back into padding-bottom (76 -> 83). The apex x is a fraction of WIDTH, which does not change here. */ .job-costing-accounting-step-09 .callout { min-height: 0; } .job-costing-accounting-step-09 .overlap-group1 { padding-bottom: 83px; } /* Arrow-tip tangency (2026-08-20): step 09's up-arrow tip crossed 6px past the highlight's bottom line. Bottom-anchored; drop 6px. */ .job-costing-accounting-step-09 .overlap-group1 { padding-bottom: 77px; }