/* The Step 4 screen, both Guru poses and the commercial payoff share the
   journey's single sticky stage. There is no second section or DOM handoff. */

.keep-payoff{
  position:absolute;
  z-index:2;
  inset:23% var(--gutter) 5%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
}

.keep-context{
  margin:0 0 20px;
  color:var(--teal);
  font-size:14px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.keep-payoff h2{
  max-width:12ch;
  color:var(--ink);
  font-size:clamp(5rem,8.4vw,8.5rem);
  line-height:.82;
  letter-spacing:-.04em;
}

.keep-payoff h2 em{color:var(--teal);font-style:normal}
.keep-line{display:block;overflow:hidden}
.keep-line>span{display:block}

.keep-support{
  max-width:34rem;
  margin:28px auto 0;
  font-size:clamp(18px,1.5vw,22px);
  font-weight:600;
  line-height:1.4;
}

.system-journey[data-ready] [data-keep-word]{
  opacity:0;
  transform:translate3d(0,115%,0);
  will-change:transform,opacity;
}

.journey-step--bookings.is-push-active{
  overflow:visible;
  background:transparent;
  box-shadow:none;
}

.journey-step--bookings .journey-finish.is-keep-card{
  position:absolute;
  left:0;
  top:0;
  max-width:none;
  transform:none;
  transform-origin:top left;
  will-change:left,top,width,height;
}

.keep-push-guru{
  position:absolute;
  z-index:12;
  left:0;
  top:0;
  width:clamp(184px,16vw,240px);
  aspect-ratio:512/448;
  display:none;
  opacity:0;
  pointer-events:none;
  transform-origin:center bottom;
  will-change:transform,opacity;
}

.system-journey[data-keep-active] .keep-push-guru{display:block}
.keep-push-guru img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.keep-push-guru img[data-on]{opacity:1}

@media(max-width:999px){
  .keep-payoff{inset:24% 20px 7%}
  .keep-context{margin-bottom:14px;font-size:11px}

  .keep-payoff h2{
    width:100%;
    max-width:none;
    font-size:clamp(3.2rem,13.5vw,4.7rem);
    line-height:.84;
  }

  .keep-support{max-width:20rem;margin-top:22px;font-size:16px}
  .keep-push-guru{width:120px}
}

@media(prefers-reduced-motion:reduce){
  .keep-push-guru{display:none!important}
  [data-keep-word]{transform:none!important;opacity:1!important;will-change:auto!important}

  .keep-payoff{
    position:relative;
    inset:auto;
    margin:clamp(64px,9vw,112px) auto 0;
    padding-bottom:clamp(24px,4vw,48px);
  }
}

/* The payoff's way into the CRM page. Carries a data-keep-word start like the
   lines above it, so it arrives on the same scrubbed clock rather than simply
   being present from the beginning. */
.keep-actions{
  margin-top:clamp(20px,2vw,28px);
  display:flex;
  justify-content:center;
}

/* Phone only. The payoff was landing with roughly a third of the cloud panel
   blank under the CTA, so the section read as finished and nothing pulled the
   reader on. Two things were making it: the payoff's content block is only
   ~345px tall inside a full-viewport pinned stage, and the higher-specificity
   .system-journey[data-keep-active] .keep-payoff rule in css/journey-finish.css
   top-anchors it (inset 32%, justify-content:flex-start), which parks every
   spare pixel below the button. Round 2 pulled the text UP to close a gap ABOVE
   it, which is what opened the gap below.

   The seesaw only stops if the block itself gets bigger, so grow the type and
   its rhythm and share the remaining slack evenly instead of dumping it under
   the CTA. Scoped to 900px so tablet and desktop are untouched. */
@media(max-width:900px){
  .keep-context{margin-bottom:24px}

  .keep-payoff h2{
    font-size:clamp(3.4rem,15.4vw,4.9rem);
    line-height:.88;
  }

  .keep-support{max-width:21rem;margin-top:34px;font-size:17px}
  .keep-actions{margin-top:42px}
  .keep-actions .btn{padding-block:17px}
}

/* Placement only, and only for the scrubbed build: the reduced-motion fallback
   above takes the payoff out of the sticky stage into normal flow, where an
   inset would strand it. */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .system-journey[data-ready][data-keep-active] .keep-payoff{
    inset:30% 20px 5%;
    justify-content:center;
  }
}