/* 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 (this tour only). Two reasons a step is widened: 1. CTA fit: the footer row (ALL APPS + dots + BACK/NEXT + CTA) is ~716px, so any callout under ~790px inner width puts the icon and button on the green border. Steps 03, 05, 06 are widened to 870px for this. 2. One-line titles (Matt, 2026-08-13): steps 01, 02, 07, 08 wrapped their headline onto a second line with one hanging word. Each is widened to its own headline's natural width plus padding: 01: 888px text + 65 + 35 -> 990px 02: 838px text + 35 + 35 -> 915px 07: 844px text + 65 + 35 -> 950px 08: 771px text + 65 + 35 -> 880px Step 04 (918px, title already one line) needs nothing. Side-arrow steps keep the ARROW-BEARING edge fixed: - right arrow (03, 05, 06, 08): flex-end anchors bottom-right, so pad-right stays and the extra width grows leftward. - left arrow (01, 07): pad-right = 1920 - width - left_edge keeps the left (arrow) edge in place. Up-arrow step 02 keeps its CENTER fixed on the highlight center (x=959) and its top edge on the highlight bottom (y=550). The one-line titles drop each of those four callouts by 36px of content height, so their min-heights shrink to the new natural height and the border stretches to the box with 100% 100% (SVGs carry preserveAspectRatio="none"). Vertical paddings re-center side-arrow steps on their highlight centers (01/07: 539, 08: 537.5). ------------------------------------------------------------------ */ .edi-step-03 .callout { width: 870px; background-size: 100% 100%; } .edi-step-05 .callout { width: 870px; min-height: 352px; background-size: 100% 100%; } .edi-step-06 .callout { width: 870px; min-height: 288px; background-size: 100% 100%; } .edi-step-01 .callout { width: 990px; min-height: 288px; background-size: 100% 100%; } .edi-step-02 .callout { width: 915px; min-height: 318px; background-size: 100% 100%; } .edi-step-07 .callout { width: 950px; min-height: 290px; background-size: 100% 100%; } .edi-step-08 .callout { width: 880px; min-height: 288px; background-size: 100% 100%; } /* ?v=2 busts cached copies of the SVGs from before the preserveAspectRatio="none" edit (browsers cache SVG images hard). */ .edi-step-01 .callout { background-image: url(../img/border-step-01.svg?v=4); } .edi-step-02 .callout { background-image: url(../img/border-step-02.svg?v=4); } .edi-step-03 .callout { background-image: url(../img/border-step-03.svg?v=4); } .edi-step-05 .callout { background-image: url(../img/border-step-05.svg?v=4); } .edi-step-06 .callout { background-image: url(../img/border-step-06.svg?v=4); } .edi-step-07 .callout { background-image: url(../img/border-step-07.svg?v=4); } .edi-step-08 .callout { background-image: url(../img/border-step-08.svg?v=4); } /* Left padding = 1920 - pad_right - width so the flex content box is exactly the callout width and nothing is squeezed. */ .edi-step-01 .overlap-group1 { padding: 395px 7px 397px 923px; } .edi-step-02 .overlap-group1 { padding: 550px 503.5px 212px 501.5px; } .edi-step-03 .overlap-group1 { padding: 396.5px 932px 397.5px 118px; } .edi-step-05 .overlap-group1 { padding: 363.5px 894px 364.5px 156px; } .edi-step-06 .overlap-group1 { padding: 394px 1044px 398px 6px; } .edi-step-07 .overlap-group1 { padding: 394px 13px 396px 957px; } .edi-step-08 .overlap-group1 { padding: 393.5px 776px 398.5px 264px; } /* Headlines sized to each callout's inner width. */ .edi-step-03 .headline, .edi-step-05 .headline, .edi-step-06 .headline { width: 770px; } .edi-step-01 .headline { width: 890px; } .edi-step-02 .headline { width: 845px; } .edi-step-07 .headline { width: 850px; } .edi-step-08 .headline { width: 780px; } /* -------------------------------------------------------------------- Panel-clearance pass: step 07 only, onto the site-wide 32px content-to-panel clearance (+/-8). scripts/check_panel_padding.py --target 32 --tol 8 -------------------------------------------------------------------- */ /* step 07, left clearance 22 -> 32. The LEFT arrow notch eats 42px of the box at this width, so the 65px padding-left left the text only 22px clear of the white panel, against the 34-35px its siblings show. padding-left goes 65 -> 75. The 10px has to come from somewhere: the callout already fills its container exactly (padding-left 957 to right edge 1907), so the box widens 950 -> 960 instead of squeezing the 850px headline, which would otherwise overhang and pull R down to 24. .overlap-group1 is justify-content: flex-end, so margin-right: -10px lets the box take the 10px out of the right-hand canvas gutter (13 -> 3px, the same gutter step 05 of the reference tour uses) and the arrow-bearing LEFT edge stays on x=957. Apex held at [958, 538]; the arrow rides at 50% of box HEIGHT, which is unchanged. */ .edi-step-07 .callout { width: 960px; margin-right: -10px; padding-left: 75px; }