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

/* --------------------------------------------------------------------
   Accounting: fit the schedule-a-demo CTA into the footer row.

   The row with the CTA is 727px wide; these callouts were 650-684px, so it
   overflowed every step. Each step is widened just enough to hold the row,
   keeping its arrow anchored (the arrow-bearing edge for side arrows, the
   centre for up/down). Side-arrow steps also need extra padding on the arrow
   side: the arrow juts into the box, so the white panel starts further in.
   Steps whose arrow pins them against the canvas edge cannot widen at all --
   there the row wraps and the callout grows taller instead.
   -------------------------------------------------------------------- */

/* step 01: up arrow, 650 -> 814px */
.accounting-step-01 .callout {
  width: 814px;
  padding: 34.6px 28.5px 34.6px 28.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
}
.accounting-step-01 .overlap-group1 { padding: 252.3px 553.0px 252.3px 553.0px; }
.accounting-step-01 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.accounting-step-01 ul { margin: 10px 0 0 0; }
.accounting-step-01 li { margin-left: 20px; }
.accounting-step-01 .flex-row { margin-left: 0; }

/* step 02: left arrow, 683 -> 851px.
   Panel padding re-cut 2026-08-20 to the tour-wide 32px standard. This border
   carries TWO arrows (left, at the AR Aging tab strip; bottom, at the grid
   header) so the box height is fully pinned: the SVG stretches to the box, and
   only H=318 puts both apexes on their targets at once. The 70px of dead white
   under the footer row therefore cannot be removed by shrinking the box -- it is
   removed by pushing the footer row down to the bottom padding edge with
   margin-top:auto and cutting padding-bottom to leave exactly 32px of panel.
   Height, and both arrows, stay exactly where they were. */
.accounting-step-02 .callout {
  width: 851px;
  padding: 32px 28.5px 66px 66.2px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
}
.accounting-step-02 .overlap-group1 { padding: 36.5px 651.9px 36.5px 417.1px; }
.accounting-step-02 .headline { width: 756.3px; margin-left: 0; margin-right: 0; }
.accounting-step-02 ul { margin: 10px 0 0 0; }
.accounting-step-02 li { margin-left: 20px; }
.accounting-step-02 .flex-row { margin-left: 0; margin-top: auto; }

/* step 03: up arrow, 650 -> 814px.
   Panel padding re-cut to 32px. The up arrow eats the top 33px of the box, so
   35.2px of padding left only 24px of visible panel above the headline (which
   also carries a 22px margin-top from combined.css, counted in here).
   padding-top 43 + that 22px puts the text 32px below the panel edge;
   padding-bottom 33 with margin-top:auto on the footer row leaves 32px under it.
   min-height stays 317px, so the box and its arrow do not move at all. */
.accounting-step-03 .callout {
  width: 814px;
  padding: 43px 28.5px 33px 28.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
}
.accounting-step-03 .overlap-group1 { padding: 201.4px 553.0px 201.4px 553.0px; }
.accounting-step-03 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.accounting-step-03 ul { margin: 10px 0 0 0; }
.accounting-step-03 li { margin-left: 20px; }
.accounting-step-03 .flex-row { margin-left: 0; margin-top: auto; }

/* step 04: up arrow, 650 -> 814px */
.accounting-step-04 .callout {
  width: 814px;
  padding: 36.5px 28.5px 36.5px 28.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
}
.accounting-step-04 .overlap-group1 { padding: 258.0px 569.5px 258.0px 536.5px; }
.accounting-step-04 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.accounting-step-04 ul { margin: 10px 0 0 0; }
.accounting-step-04 li { margin-left: 20px; }
.accounting-step-04 .flex-row { margin-left: 0; }

/* step 05: down arrow, 650 -> 814px.
   Panel padding re-cut to 32px. min-height 324px was sized before the CTA
   widening let the bullets reflow shorter, so 43px of dead panel sat under the
   footer row. The box is NOT shrunk: the down arrow's apex rides at the bottom
   edge and the box is bottom-anchored, but the box also has to stay 324px for
   the border to paint at its authored proportions. Instead the footer row is
   pushed to the bottom padding edge (margin-top:auto) and padding-bottom is cut
   to 67px, of which 33px is the arrow notch and 32px is visible panel. */
.accounting-step-05 .callout {
  width: 814px;
  padding: 32px 28.5px 67px 28.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
}
.accounting-step-05 .overlap-group1 { padding: 327.0px 462.5px 327.0px 643.5px; }
.accounting-step-05 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.accounting-step-05 ul { margin: 10px 0 0 0; }
.accounting-step-05 li { margin-left: 20px; }
.accounting-step-05 .flex-row { margin-left: 0; margin-top: auto; }

/* step 06: left arrow -- pinned to the canvas edge, row wraps (leave it wrapped).
   Panel padding re-cut to 32px. This box is content-driven, not min-height
   driven, so 23px top / 21px bottom could only be fixed by GROWING it: 22.6 ->
   32 top and 33 bottom takes the box 415 -> 435px tall.
   Re-anchor: the box is bottom-anchored (.overlap-group1 is align-items:
   flex-end) and the border's side arrow rides at 49.6% of box height, so 20px of
   extra height would lift the apex ~10px off the highlight it points at.
   .overlap-group1 padding-bottom 338.5 -> 328.6 drops the box back by that half,
   holding the apex on y=532.3. */
.accounting-step-06 .callout {
  padding: 32px 28.5px 33px 58.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
}
.accounting-step-06 .overlap-group1 { padding-bottom: 328.6px; }
.accounting-step-06 .headline { width: 597.0px; margin-left: 0; margin-right: 0; }
.accounting-step-06 ul { margin: 10px 0 0 0; }
.accounting-step-06 li { margin-left: 20px; }
.accounting-step-06 .flex-row { margin-left: 0; flex-wrap: wrap; row-gap: 14px; }
.accounting-step-06 a.cta-demo { margin-left: 0; }

/* step 07: left arrow, 684 -> 853px.
   Panel padding re-cut to 32px. min-height 283px was holding the box 20px taller
   than its content, and all of that slack sat under the footer row (42px of dead
   panel against 22px above the headline). padding-top 32 + padding-bottom 33 sums
   to exactly the 283px min-height, so the box height and the arrow are unchanged;
   margin-top:auto keeps the row on the bottom padding edge if the copy reflows. */
.accounting-step-07 .callout {
  width: 853px;
  padding: 32px 28.5px 33px 67.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
}
.accounting-step-07 .overlap-group1 { padding: 324.3px 784.0px 324.3px 283.0px; }
.accounting-step-07 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.accounting-step-07 ul { margin: 10px 0 0 0; }
.accounting-step-07 li { margin-left: 20px; }
.accounting-step-07 .flex-row { margin-left: 0; margin-top: auto; }

/* step 08: right arrow -- pinned to the canvas edge, row wraps (leave it wrapped).
   Panel padding re-cut to 32px. Content-driven box, so top/bottom 22 -> 32/33
   grows it 331 -> 351px tall. No re-anchor needed here: .overlap-group1 is
   align-items: center, so the box stays centred on y=540 and a side arrow at
   mid-height does not move when the height changes (apex holds at y~539.5).
   Right clearance was only 23.5px because the right arrow notch eats 34px of a
   683px box. The arrow-bearing RIGHT edge must stay on x=713, so the box grows
   LEFTWARD: width 683 -> 689 with margin-left -6px. padding-left 34.5 -> 32
   evens the two sides at 32/32. The row still wraps at this width (it needs
   727px on one line and has 599). */
.accounting-step-08 .callout {
  width: 689px;
  margin-left: -6px;
  padding: 32px 57.5px 33px 32px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
}
.accounting-step-08 .headline { width: 591.0px; margin-left: 0; margin-right: 0; }
.accounting-step-08 ul { margin: 10px 0 0 0; }
.accounting-step-08 li { margin-left: 20px; }
.accounting-step-08 .flex-row { margin-left: 0; flex-wrap: wrap; row-gap: 14px; }
.accounting-step-08 a.cta-demo { margin-left: 0; }

/* step 09: down arrow, 650 -> 814px.
   Panel padding re-cut to 32px, same shape as step 05: min-height 351px is 10px
   taller than the content needs and the border's down arrow means the box cannot
   shrink without the apex leaving its target, so the footer row is pushed to the
   bottom padding edge instead. padding-bottom 67 = 35px arrow notch + 32px panel. */
.accounting-step-09 .callout {
  width: 814px;
  padding: 32px 28.5px 67px 28.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
}
.accounting-step-09 .overlap-group1 { padding: 346.9px 396.0px 346.9px 710.0px; }
.accounting-step-09 .headline { width: 757.0px; margin-left: 0; margin-right: 0; }
.accounting-step-09 ul { margin: 10px 0 0 0; }
.accounting-step-09 li { margin-left: 20px; }
.accounting-step-09 .flex-row { margin-left: 0; margin-top: auto; }

/* Arrow-tip tangency (2026-08-20): step 01's up-arrow tip crossed 6px past the
   highlight's bottom line. Bottom-anchored box; drop it 6px. */
.accounting-step-01 .overlap-group1 { padding-bottom: 246.3px; }