/* ============================================================= */
/*  Rabbit Hole navigation — the homepage rabbits, the ladders on  */
/*  the four destination pages, and the camera move between them   */
/*  (assets/rabbit-hole.js).                                       */
/*                                                                 */
/*  The artwork is the original rabbit-hole.svg / ladder-hole.svg, */
/*  shown as-is: only its size is set here.                        */
/* ============================================================= */

/* ---- The rabbit: replaces Show Me! / LEARN MORE ---------------- */
.rh-rabbit {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  /* Without JavaScript the ladder's #anchor brings the rabbit back */
  /* to the middle of the screen, where the camera left it.          */
  scroll-margin-top: calc(50vh - 36px);
  -webkit-tap-highlight-color: transparent;
}
.rh-rabbit img { display: block; width: 75px; height: auto; }
.value-inner .btn-pill + .rh-rabbit { margin-left: .75rem; }
.pricing-inner > .rh-rabbit { margin-top: clamp(1.25rem, 3vw, 1.75rem); }

/* ---- The ladder: where a Back button would sit ----------------- */
.rh-ladder {
  display: inline-block;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.rh-ladder img { display: block; width: 60px; height: auto; }
/* Above an opening headline: held in the space the hero already    */
/* leaves under the fixed header, so nothing below it moves.        */
.rh-perch { position: relative; }
.rh-ladder--above { position: absolute; left: 0; bottom: calc(100% + 12px); }
/* At the top of a pricing section: the #anchor lands right here.   */
.rh-ladder--flow { margin-bottom: 14px; }

.rh-rabbit:focus-visible,
.rh-ladder:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 12px;
}

@media (max-width: 760px) {
  .rh-rabbit img { width: 60px; }
  .rh-rabbit { scroll-margin-top: calc(50vh - 28px); }
  .rh-ladder img { width: 45px; }
  /* No room between the header and a phone-sized headline: the     */
  /* ladder takes its own line above it instead of overlapping.      */
  .rh-ladder--above { position: static; display: block; width: max-content; margin-bottom: 10px; }
  .vp-open > .rh-ladder--above { margin-bottom: calc(10px - clamp(1.5rem, 4vw, 4rem)); }   /* less the grid gap */
}

/* ---- The camera -------------------------------------------------- */
/* Arriving: the page stays white until the move begins.            */
html.rh-arrive,
html.rh-white { background: #fff; }
html.rh-arrive body,
html.rh-white body { opacity: 0; }

/* The vector copy of the rabbit the camera flies into, above the     */
/* whole page (the header included) while the page moves beneath it. */
.rh-camera {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  contain: strict;
}
/* While the camera moves, the browser must not re-anchor the scroll. */
html.rh-camera-on { overflow-anchor: none; }

/* The section the visitor returns to is already in place.           */
.rh-settle .reveal,
.rh-settle .from-left,
.rh-settle .from-right { transition: none !important; }

/* A destination page grows and recedes on View Transition snapshots */
/* — the live page is never transformed. rabbit-hole.js sets --rh-t  */
/* every frame.                                                      */
html.rh-vt::view-transition {
  background: #fff;
  animation: rh-hold var(--rh-ms, 3s) linear;   /* keeps the transition open while the camera moves */
}
html.rh-vt::view-transition-group(*),
html.rh-vt::view-transition-image-pair(*),
html.rh-vt::view-transition-old(*),
html.rh-vt::view-transition-new(*) { animation: none; }
html.rh-vt::view-transition-group(root) {
  transform-origin: 0 0;
  transform: var(--rh-t, none);
  box-shadow: var(--rh-shadow, none);
}
/* Receding, the departing page is the one seen; arriving, the new one. */
html.rh-recede::view-transition-new(root) { opacity: 0; }
html.rh-come::view-transition-old(root) { opacity: 0; }
@keyframes rh-hold { from { opacity: 1; } to { opacity: 1; } }