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

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

/* step 01: left arrow, already wide enough */
.nesting-interface-step-01 .callout {
  align-items: flex-start;
}
.nesting-interface-step-01 .headline { width: 789px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-01 ul { margin: 10px 0 0 0; }
.nesting-interface-step-01 li { margin-left: 20px; }
.nesting-interface-step-01 .flex-row { margin-left: 0; }

/* step 02: right arrow, pinned to the canvas edge -- row wraps */
.nesting-interface-step-02 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-02.svg?v=4);
}
.nesting-interface-step-02 .headline { width: 543px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-02 ul { margin: 10px 0 0 0; }
.nesting-interface-step-02 li { margin-left: 20px; }
.nesting-interface-step-02 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.nesting-interface-step-02 a.cta-demo { margin-left: 0; }

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

/* step 04: left arrow, pinned to the canvas edge -- row wraps */
.nesting-interface-step-04 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-04.svg?v=4);
}
.nesting-interface-step-04 .headline { width: 644px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-04 ul { margin: 10px 0 0 0; }
.nesting-interface-step-04 li { margin-left: 20px; }
.nesting-interface-step-04 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.nesting-interface-step-04 a.cta-demo { margin-left: 0; }

/* step 05: up arrow, already wide enough */
.nesting-interface-step-05 .callout {
  align-items: flex-start;
}
.nesting-interface-step-05 .headline { width: 790px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-05 ul { margin: 10px 0 0 0; }
.nesting-interface-step-05 li { margin-left: 20px; }
.nesting-interface-step-05 .flex-row { margin-left: 0; }

/* step 06: up arrow, already wide enough */
.nesting-interface-step-06 .callout {
  align-items: flex-start;
}
.nesting-interface-step-06 .headline { width: 765px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-06 ul { margin: 10px 0 0 0; }
.nesting-interface-step-06 li { margin-left: 20px; }
.nesting-interface-step-06 .flex-row { margin-left: 0; }

/* step 07: right arrow, pinned to the canvas edge -- row wraps */
.nesting-interface-step-07 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-07.svg?v=4);
}
.nesting-interface-step-07 .headline { width: 513px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-07 ul { margin: 10px 0 0 0; }
.nesting-interface-step-07 li { margin-left: 20px; }
.nesting-interface-step-07 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.nesting-interface-step-07 a.cta-demo { margin-left: 0; }

/* step 08: left arrow, pinned to the canvas edge -- row wraps */
.nesting-interface-step-08 .callout {
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-08.svg?v=4);
}
.nesting-interface-step-08 .headline { width: 525px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-08 ul { margin: 10px 0 0 0; }
.nesting-interface-step-08 li { margin-left: 20px; }
.nesting-interface-step-08 .flex-row { margin-left: 0; align-self: stretch; flex-wrap: wrap; row-gap: 14px; }
.nesting-interface-step-08 a.cta-demo { margin-left: 0; }

/* step 09: right arrow, 743 -> 813px. The callout is right-anchored by
   .overlap-group1's padding-right, so the extra width grows leftward and the
   arrow-bearing right edge stays put at x=845. The negative margin buys the
   flex item the room it needs past padding-left. */
.nesting-interface-step-09 .callout {
  width: 813px;
  margin-left: -70px;
  align-items: flex-start;
  background-size: 100% 100%;
  background-image: url(../img/border-step-09.svg?v=4);
}
.nesting-interface-step-09 .headline { width: 713px; margin-left: 0; margin-right: 0; }
.nesting-interface-step-09 ul { margin: 10px 0 0 0; }
.nesting-interface-step-09 li { margin-left: 20px; }
.nesting-interface-step-09 .flex-row { margin-left: 0; }

/* --------------------------------------------------------------------
   Panel-clearance pass: step 09 only, onto the site-wide 32px
   content-to-panel clearance (+/-8).
   scripts/check_panel_padding.py --target 32 --tol 8
   -------------------------------------------------------------------- */

/* step 09, right clearance 19 -> 28-ish (left 26 -> 35 with it).
   The footer row measures 732px against a 713px inner width, and .flex-row is
   align-self: center, so the 19px of overflow split evenly and hung out BOTH
   sides of the panel -- 9.5px past the text column on the left and the same
   on the right, where the arrow notch already eats 36px.
   Tightening the row's own gaps by 22px (the same lever crm-step-05 uses)
   drops it to 710px so it sits inside the text column again; the headline and
   bullets then define both edges. Nothing about the box changes -- same
   width, same height, same negative margin -- so the RIGHT arrow apex stays
   on [844, 538]. The row stays on ONE line; it is not one of this tour's
   deliberately wrapped steps (02, 04, 07, 08). */
.nesting-interface-step-09 .flex-row .navigation { margin-left: 16px; }
.nesting-interface-step-09 .flex-row .t-button-container { margin-left: 12px; }
.nesting-interface-step-09 a.cta-demo { margin-left: 10px; }