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

/* --------------------------------------------------------------------
   routing-and-bill-of-materials-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 .routing-and-bill-of-materials-step-NN, read from each page's hidden input --
   it does not always match the folder or the file name.
   -------------------------------------------------------------------- */

/* step 01: up arrow, 650 -> 806px */
.routing-and-bill-of-materials-step-01 .callout {
  width: 806px;
  margin-left: -78.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-01.svg?v=4);
  padding: 59.7px 30px 30px 35px;
}
.routing-and-bill-of-materials-step-01 .headline { width: 741px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-01 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-01 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-01 .flex-row { margin-left: 0; }

/* step 02: up arrow, 650 -> 811px */
.routing-and-bill-of-materials-step-02 .callout {
  width: 811px;
  margin-left: -80.5px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
  padding: 57.9px 30px 30px 35px;
}
.routing-and-bill-of-materials-step-02 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-02 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-02 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-02 .flex-row { margin-left: 0; }

/* step 03: right arrow, 681 -> 848px */
.routing-and-bill-of-materials-step-03 .callout {
  width: 848px;
  margin-left: -167px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-03.svg?v=4);
  padding: 30px 67.1px 30px 35px;
}
.routing-and-bill-of-materials-step-03 .headline { width: 745.9px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-03 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-03 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-03 .flex-row { margin-left: 0; }

/* step 04: left arrow, 685 -> 845px */
.routing-and-bill-of-materials-step-04 .callout {
  width: 845px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
  padding: 25.7px 30px 30px 69.3px;
}
.routing-and-bill-of-materials-step-04 .headline { width: 745.7px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-04 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-04 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-04 .flex-row { margin-left: 0; }

/* step 05: up arrow, 725 -> 803px */
.routing-and-bill-of-materials-step-05 .callout {
  width: 803px;
  margin-left: -39.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-05.svg?v=4);
  padding: 91.0px 30px 65.9px 26.7px;
}
.routing-and-bill-of-materials-step-05 .headline { width: 746.3px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-05 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-05 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-05 .flex-row { margin-left: 0; }

/* step 06: left arrow, 684 -> 845px */
.routing-and-bill-of-materials-step-06 .callout {
  width: 845px;
  margin-left: 0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-06.svg?v=4);
  padding: 30px 30px 30px 69.3px;
  /* The highlighted validation tooltip in the page art runs to x=692, but the
     callout box started at x=533, so the left arrow sat ON the tooltip and hid
     the right half of its text. Nudge the whole box right until the arrow tip
     (x = box left + 6) clears the tooltip and points at its edge instead. */
  position: relative;
  left: 158px;
}
.routing-and-bill-of-materials-step-06 .headline { width: 745.7px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-06 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-06 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-06 .flex-row { margin-left: 0; }

/* step 07: up arrow, 625 -> 811px */
.routing-and-bill-of-materials-step-07 .callout {
  width: 811px;
  margin-left: -93.0px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
}
.routing-and-bill-of-materials-step-07 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-07 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-07 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-07 .flex-row { margin-left: 0; }

/* step 08: right arrow, 733 -> 850px */
.routing-and-bill-of-materials-step-08 .callout {
  width: 850px;
  margin-left: -117px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
}
.routing-and-bill-of-materials-step-08 .headline { width: 746px; margin-left: 0; margin-right: 0; }
.routing-and-bill-of-materials-step-08 ul { margin: 10px 0 0 0; }
.routing-and-bill-of-materials-step-08 li { margin-left: 20px; }
.routing-and-bill-of-materials-step-08 .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 inside the box edge
   and the padding has to clear the wall, not the box. On an UP arrow the
   wall is a fixed fraction of the box HEIGHT (e.g. 34/348 on step 01), so
   it moves whenever the box is resized -- the numbers below are the
   measured post-change values, not the pre-change ones.

   Most of these boxes carried a stale `min-height` sized before the CTA
   widening let the copy reflow shorter, leaving 60-100px of dead panel
   under 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:
   resize the box and the arrow walks off its target. Which padding gives
   the height back depends on how `.overlap-group1` pins the box:
     - align-items: flex-end  -> bottom edge fixed, box shrinks UPWARD, so
       padding-BOTTOM grows (steps 01, 02, 05).
     - align-items: flex-start -> top edge fixed, box shrinks UPWARD from
       the bottom, so padding-TOP grows (steps 03, 08).
   And by how much depends on where the arrow sits:
     - up arrow, apex ON the top edge -> give back the FULL height lost.
     - side arrow, apex at ~50% of box height -> give back HALF.
   Apex positions measured before and after are in the per-step comments.
   -------------------------------------------------------------------- */

/* step 01 - top was 51. The headline sits 25.3px below the padding box,
   so padding-top 59.7 put it 85px down. Cut to 38.2 and the box also has
   to stop being held open: min-height 348 was 4px past the content, and
   losing 21.5px of padding would have dumped the slack at the bottom
   instead of closing the gap.
   UP arrow (apex x=881 is a fraction of WIDTH, which does not change).
   apex y 385 before; box shrinks 348 -> 322.5 against a fixed bottom edge,
   so the apex would drop the full 25.5px to 410.5 -- all of it goes back
   into padding-bottom (348 -> 373.5). */
.routing-and-bill-of-materials-step-01 .callout {
  padding-top: 38.2px;
  min-height: 0;
}
.routing-and-bill-of-materials-step-01 .overlap-group1 { padding-bottom: 373.5px; }

/* step 02 - top was 50, same shape as step 01: 25.1px of headline offset
   under a 57.9px padding-top, cut to 37.7, with min-height 375 released so
   the 20.2px comes out of the gap instead of moving to the bottom.
   UP arrow, apex (785.5, 464); box shrinks 375 -> 349.8 against a fixed
   bottom edge, so the full 25.2px goes back into padding-bottom
   (241 -> 266.2). */
.routing-and-bill-of-materials-step-02 .callout {
  padding-top: 37.7px;
  min-height: 0;
}
.routing-and-bill-of-materials-step-02 .overlap-group1 { padding-bottom: 266.2px; }

/* step 03 - bottom was 104, the worst on this tour: min-height 353 held
   75px of empty panel below the footer row. Padding is already right at
   30, so this is purely the stale height.
   RIGHT arrow, apex y 454, sitting at 49.86% of the box height. Here
   `.overlap-group1` is align-items: flex-START, so the box keeps its TOP
   and shrinks upward from the bottom: 353 -> 278 lifts the apex 37.4px to
   416.6, and padding-TOP takes it back (278 -> 315.4). */
.routing-and-bill-of-materials-step-03 .callout { min-height: 0; }
.routing-and-bill-of-materials-step-03 .overlap-group1 { padding-top: 315.4px; }

/* step 05 - top 88 AND bottom 65, the only step off on two sides. This box
   is content-driven (415px tall against a min-height of 318), so both are
   real padding: 91 top over a 40px headline offset, 65.9 bottom.
   Cut to 25 / 33. The up arrow's panel wall is 43/415 = 10.36% of the
   height, so it rides up as the box shrinks -- 25 + 40 - 32.7 lands the
   top clearance at 32, and the bottom edge has no arrow so 33 - 1 = 32.
   The callout deliberately covers the empty lower half of the Router
   Maintenance dialog; shrinking it 415 -> 316 only uncovers more of the
   dialog, and the top edge does not move.
   UP arrow, apex (978, 441.1); against a fixed bottom edge the box loses
   98.9px, so all 98.9 goes back into padding-bottom (225 -> 323.9). */
.routing-and-bill-of-materials-step-05 .callout {
  padding-top: 25px;
  padding-bottom: 33px;
  min-height: 0;
}
.routing-and-bill-of-materials-step-05 .overlap-group1 { padding-bottom: 323.9px; }

/* step 06 keeps its `position: relative; left: 158px` untouched -- that is
   what holds the arrow off the validation tooltip. Its clearance already
   measures 27/29/30/36, inside the band, so nothing here. */

/* step 08 - bottom was 61: min-height 310 held 32px of dead panel.
   RIGHT arrow at 49.68% of the height, apex y 536, and `.overlap-group1`
   is align-items: flex-start again, so the box shrinks upward from the
   bottom: 310 -> 278 lifts the apex 15.9px to 520.1, and padding-TOP takes
   it back (382 -> 397.9). */
.routing-and-bill-of-materials-step-08 .callout { min-height: 0; }
.routing-and-bill-of-materials-step-08 .overlap-group1 { padding-top: 397.9px; }

/* Arrow-tip tangency (Matt, 2026-08-20: "fix the spacing between arrow and
   box"). The arrow apex sits on the callout's box edge, so the box edge must
   touch the green highlight line - not float short of it, not cross it. */
/* step 03: right arrow floated 13px short of the highlight (box right 1435 vs
   highlight left 1448). margin-left measured as a no-op on this step despite
   the earlier flex-start note - the right edge is the anchored one, so a
   negative margin-right is what moves the box rightward. Verified empirically. */
.routing-and-bill-of-materials-step-03 .callout { margin-right: -13px; }
/* step 05: up arrow crossed 107px past the highlight's bottom line (box top
   440 vs highlight bottom 547). Bottom-anchored; give back 107 of padding. */
.routing-and-bill-of-materials-step-05 .overlap-group1 { padding-bottom: 216.9px; }