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

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

/* step 01: LEFT arrow, 768.384 -> 857px (+88.6).
   .overlap-group1 is justify-content:flex-end, so the callout is pinned by its
   RIGHT edge and the extra width grows LEFTWARD -- which dragged the arrow from
   its original x=651 (tangent to the phone body's right edge, measured at x=651
   in img/background-step-01.png) to x=562, burying 88px of the phone including
   46px of its live screen. margin-left is a no-op under flex-end and fixed
   nothing. The negative margin-right grows the box RIGHT by the same 89px
   instead, putting the arrow-bearing left edge back on the phone edge. */
.paperless-gs-mobile-step-01 .callout {
  width: 857px;
  margin-left: 0px;
  margin-right: -89px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
}
.paperless-gs-mobile-step-01 .headline { width: 757px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-01 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-01 li { margin-left: 20px; }
.paperless-gs-mobile-step-01 .flex-row { margin-left: 0; }

/* step 02: right arrow, 753 -> 862px */
.paperless-gs-mobile-step-02 .callout {
  width: 862px;
  margin-left: -109px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
}
.paperless-gs-mobile-step-02 .headline { width: 761.5px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-02 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-02 li { margin-left: 20px; }
.paperless-gs-mobile-step-02 .flex-row { margin-left: 0; }

/* step 03: right arrow, 768 -> 862px */
.paperless-gs-mobile-step-03 .callout {
  width: 862px;
  margin-left: -94px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
}
.paperless-gs-mobile-step-03 .headline { width: 762px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-03 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-03 li { margin-left: 20px; }
.paperless-gs-mobile-step-03 .flex-row { margin-left: 0; }

/* step 04: right arrow, 768 -> 890px.
   862 left the first bullet 7px short, orphaning "Queue" on its own line.
   Right-pinned, so the extra width grows leftward and the arrow stays put. */
.paperless-gs-mobile-step-04 .callout {
  width: 890px;
  margin-left: -122px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
}
.paperless-gs-mobile-step-04 .headline { width: 790px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-04 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-04 li { margin-left: 20px; }
.paperless-gs-mobile-step-04 .flex-row { margin-left: 0; }

/* step 05: LEFT arrow, 768 -> 940px, to pull the orphaned "Control" up onto
   the headline's first line (it needs 831px of text width).
   The callout is right-pinned by .overlap-group1's padding-right, so extra
   width would otherwise drag the arrow left across the phone screen. The
   negative margin-right must cancel the WHOLE growth: 940 - 768.384 = 171.6px.
   It was -78px, which only cancelled part of it, so the arrow still slid from
   its original x=651 (tangent to the phone body's right edge, measured at
   x=651 in img/background-step-05.png) to x=557 and buried 94px of the phone,
   48px of it live screen. -172px puts the left edge back on the phone edge. */
.paperless-gs-mobile-step-05 .callout {
  width: 940px;
  margin-left: 0px;
  margin-right: -172px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
}
.paperless-gs-mobile-step-05 .headline { width: 840px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-05 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-05 li { margin-left: 20px; }
.paperless-gs-mobile-step-05 .flex-row { margin-left: 0; }

/* step 06: right arrow, 845 -> 900px, to pull the orphaned "Field" up onto
   the headline's first line (it needs 791px of text width).
   Right-pinned, so the extra width grows leftward and the arrow stays put. */
.paperless-gs-mobile-step-06 .callout {
  width: 900px;
  margin-left: -55px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
}
.paperless-gs-mobile-step-06 .headline { width: 800px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-06 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-06 li { margin-left: 20px; }
.paperless-gs-mobile-step-06 .flex-row { margin-left: 0; }

/* step 07: right arrow, 850 -> 925px, to pull the orphaned "Transactions" up
   onto the headline's first line (it needs 813px of text width).
   Right-pinned, so the extra width grows leftward and the arrow stays put. */
.paperless-gs-mobile-step-07 .callout {
  width: 925px;
  margin-left: -75px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
}
.paperless-gs-mobile-step-07 .headline { width: 825px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-07 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-07 li { margin-left: 20px; }
.paperless-gs-mobile-step-07 .flex-row { margin-left: 0; }

/* step 08: left arrow, already wide enough */
.paperless-gs-mobile-step-08 .callout {
  align-items: flex-start;
}
.paperless-gs-mobile-step-08 .headline { width: 785px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-08 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-08 li { margin-left: 20px; }
.paperless-gs-mobile-step-08 .flex-row { margin-left: 0; }

/* step 09: right arrow, pinned to the canvas edge -- row wraps, and it cannot
   be fixed by widening. Measured 2026-08-20 at 1920x1080:
     footer row needs 716px on one line (666px even with every gap zeroed);
     the arrow-bearing right edge is fixed at x=720 by .overlap-group1's
     padding-right, so the widest the callout can get before it leaves the
     canvas is 720px -> 620px of inner width. 46px short at best.
   Moving the right edge instead would push the arrow past x=766 into the
   phone's screen art and clip its field labels. Left as a wrapped two-line
   footer; qc_tour.py reports this page as failing by design. */
.paperless-gs-mobile-step-09 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
}
.paperless-gs-mobile-step-09 .headline { width: 589px; margin-left: 0; margin-right: 0; }
.paperless-gs-mobile-step-09 ul { margin: 10px 0 0 0; }
.paperless-gs-mobile-step-09 li { margin-left: 20px; }
.paperless-gs-mobile-step-09 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.paperless-gs-mobile-step-09 a.cta-demo { margin-left: 0; }

/* ------------------------------------------------------------------
   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.

   ONE shared root cause for steps 03-07: combined.css pins a `min-height`
   on each `.callout` (378px on 03/04, 322/322/321 on 05/06/07). Those
   numbers were sized BEFORE the CTA rollout widened the callouts, and the
   wider boxes let the headline and bullets reflow onto fewer lines. The
   content now needs only 324px (03/04) and 288px (05/06/07), so the stale
   floor left 67-88px of dead white below the footer row instead of 32.
   `min-height: 0` lets each box hug its own content again.

   RE-ANCHORING. The border SVG is stretched with `background-size: 100% 100%`,
   so its arrow rides at a FIXED FRACTION of the box height. Every one of
   these five steps has a SIDE arrow at ~50% of height, and every
   .overlap-group1 is `align-items: flex-end`, so the box shrinks UPWARD from
   a fixed bottom -- which drops the arrow by half the height lost. Each step
   below therefore adds (lost height / 2) to .overlap-group1's padding-bottom,
   lifting the whole box so the apex lands back on its original pixel.
   Apexes verified before and after; see the per-step notes.
   ------------------------------------------------------------------ */

/* step 03: 378 -> 324 (-54). Right arrow apex held at canvas y=506. */
.paperless-gs-mobile-step-03 .callout { min-height: 0; }
.paperless-gs-mobile-step-03 .overlap-group1 { padding-bottom: 412px; }

/* step 04: 378 -> 324 (-54). Right arrow apex held at canvas y=476. */
.paperless-gs-mobile-step-04 .callout { min-height: 0; }
.paperless-gs-mobile-step-04 .overlap-group1 { padding-bottom: 442px; }

/* step 05: 322 -> 288 (-34). LEFT arrow apex held at canvas y=531; its x
   stays at 652 (the phone's right edge) because height changes do not move
   a left arrow sideways, and the -172px margin-right above is untouched. */
.paperless-gs-mobile-step-05 .callout { min-height: 0; }
.paperless-gs-mobile-step-05 .overlap-group1 { padding-bottom: 403px; }

/* step 06: 322 -> 288 (-34). Right arrow apex held at canvas y=500. */
.paperless-gs-mobile-step-06 .callout { min-height: 0; }
.paperless-gs-mobile-step-06 .overlap-group1 { padding-bottom: 426px; }

/* step 07: 321 -> 288 (-33). Right arrow apex held at canvas y=506. */
.paperless-gs-mobile-step-07 .callout { min-height: 0; }
.paperless-gs-mobile-step-07 .overlap-group1 { padding-bottom: 429px; }