/* =========================================================================
   04-walkthrough — "Unify your finances" stepped feature walkthrough.
   Full-viewport, white text on orange. The original used Rive vector
   animations + a stepped scroll of phone screens; here the visuals are
   .ph-phone mockups (one per step) cross-faded by JS, with caption steps
   that advance as you scroll. Ported from the reference walkthrough and the
   global ._stepper rules (which the rebuild foundation doesn't carry).
   Every rule is scoped under ._walkthrough.
   ========================================================================= */

._walkthrough {
  /* Local 16-col helpers (exact formula from source entry.css). */
  --cols-1:  calc((var(--100vw) - 2 * var(--grid-padding)) / 16     - var(--grid-gap));
  --cols-4:  calc((var(--100vw) - 2 * var(--grid-padding)) / 4      - var(--grid-gap));
  --cols-5:  calc((var(--100vw) - 2 * var(--grid-padding)) / 3.2    - var(--grid-gap));
  --cols-10: calc((var(--100vw) - 2 * var(--grid-padding)) / 1.6    - var(--grid-gap));
  --cols-14: calc((var(--100vw) - 2 * var(--grid-padding)) / 1.1429 - var(--grid-gap));

  color: #fff;
  background-color: var(--surface-dark); /* deep near-black to match the reference */
  height: 100vh;
  height: 100lvh;
  position: relative;
  width: 100%;
}

/* ---- Phone stack (was the Rive canvas stack) ---------------------------- */
._walkthrough .rives {
  --sh: 60vh;
  height: var(--sh);
  width: var(--sh);
}
@media only screen and (max-width: 1023px) {
  ._walkthrough .rives { --sh: 59vh; top: -6vh; }
}
@media only screen and (max-width: 743px) {
  ._walkthrough .rives { top: -7vh; }
}

/* Each phone is stacked dead-centre; JS cross-fades the active one. */
._walkthrough .rive-phone {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  will-change: opacity, transform;
}
._walkthrough .rive-phone .wt-shot {
  /* Old budget ×1.25 (bigger shot, section itself unchanged at 100vh). */
  height: min(clamp(488px, 325px + 100vw * .211, 812px), 67.5vh);
  width: auto;
  display: block;
  /* Re-centre, measured off wt1: within the 958×1698 canvas the phone's bbox
     centre sits at 41.96% x / 48.35% y (blank space right + below for the
     wt4 watch). Shift right/down so the PHONE itself is dead-centre.
     (Percentages are relative to the image, so they scale with it.) */
  transform: translate(8.04%, 1.65%);
}
@media only screen and (max-width: 743px) {
  /* Mobile phone budget: another ×1.1 (56vh cap). The extra translateY drops
     the shot toward the vertical middle of the free band between the stepper
     and the caption (it sat noticeably high). */
  ._walkthrough .rive-phone .wt-shot {
    height: min(clamp(536px, 142.9vw, 714px), 56vh);
    transform: translate(8.04%, 1.65%) translateY(5.3vh);
  }
}

/* ---- Stepper (bottom-left dotted progress) ------------------------------ */
._walkthrough .stepper {
  align-items: flex-end;
  display: flex;
  height: 100%;
  padding: var(--32);
  position: absolute;
  width: 100%;
}
@media only screen and (max-width: 1023px) {
  /* Top-centered, pushed down so it sits BELOW the fixed header. */
  ._walkthrough .stepper {
    align-items: flex-start;
    justify-content: center;
    padding-top: 96px;
  }
}

/* ---- Step layers -------------------------------------------------------- */
._walkthrough article {
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

._walkthrough .feature {
  font-weight: 500;
  position: absolute;
}

/* ---- Feature blocks (step captions) -------------------------------------- */
._walkthrough .feature {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: var(--grid-margin);
  position: absolute;
  width: var(--cols-5);
}
@media only screen and (max-width: 1023px) {
  ._walkthrough .feature {
    justify-content: flex-end;
    /* centred captions on mobile (Sign up with email, Verify…, etc.) */
    align-items: center;
    text-align: center;
    padding-bottom: 13vh;
    width: var(--grid-width);
  }
}
@media only screen and (min-width: 1023px) {
  ._walkthrough .feature[data-position=right] {
    align-items: flex-end;
    left: unset;
    right: var(--grid-margin);
  }
}
._walkthrough .feature p { width: var(--cols-4); }
@media only screen and (max-width: 1023px) {
  ._walkthrough .feature p { width: var(--cols-10); }
}
@media only screen and (max-width: 743px) {
  ._walkthrough .feature p { width: 100%; }
}
._walkthrough .feature .divider {
  margin-bottom: var(--20);
  transform-origin: left;
  width: calc(100% + var(--grid-gap));
}
@media only screen and (max-width: 1023px) {
  ._walkthrough .feature .divider { display: none; }
}
._walkthrough .feature .text {
  color: #fdcbc4;
  font-weight: 450;
}
@media only screen and (max-width: 1290px) {
  ._walkthrough .feature .text { font-weight: 400; }
}

/* Step-1 first feature title gets a wider measure than the default --cols-4
   (source set --width on .t-fm-1, which consumed it as its width). */
._walkthrough article:first-child .feature .title {
  --width: clamp(300px, 240.447px + 100vw * .1527, 500px);
  width: var(--width);
}
@media only screen and (max-width: 743px) {
  ._walkthrough article:first-child .feature .title { width: 100%; }
}
@media only screen and (min-width: 2000px) {
  ._walkthrough article:first-child .feature .title { --width: 25vw; }
}

/* ---- Stepper button internals (ported from global ._stepper rules) ------ */
._walkthrough ._stepper button { position: relative; }
._walkthrough ._stepper button[data-active=true] { pointer-events: none; }
._walkthrough ._stepper button[data-active=true] > div { opacity: 1; }
._walkthrough ._stepper button[data-active=true] .label { width: var(--w, auto); }
._walkthrough ._stepper button[data-active=true] .label > div {
  opacity: 1;
  transform: translate(0);
}
._walkthrough ._stepper button::before {
  background-color: rgba(255, 255, 255, .1);
  border-radius: .5em;
  content: "";
  top: -.5em; right: -.5em; bottom: -.5em; left: -.5em;
  opacity: 0;
  outline: 1px solid hsla(0, 0%, 100%, .2);
  position: absolute;
}
._walkthrough ._stepper button > div { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  ._walkthrough ._stepper button:hover .index { background-color: rgba(255, 255, 255, .1); }
}
._walkthrough ._stepper button:focus-visible::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(255, 255, 255, .5);
  opacity: 1;
}
._walkthrough ._stepper button .index {
  border-radius: 100%;
  height: var(--24);
  position: relative;
  transition: background-color .2s;
  width: var(--24);
}
._walkthrough ._stepper button .index svg {
  stroke: #fff;
  stroke-width: 1px;
  overflow: visible;
}
._walkthrough ._stepper button .index svg circle:first-child { opacity: .5; }
._walkthrough ._stepper button .index svg circle:last-child {
  stroke-dasharray: 74.912361145 calc((1 - var(--p, 0)) * 75.66148px);
  stroke-dashoffset: 74.912361145;
  transform: rotate(-90deg) scaleY(-1);
  transform-origin: center;
}
._walkthrough ._stepper button .label {
  overflow: hidden;
  transition: width .5s var(--ease-out-quint);
  width: 0;
  will-change: width;
}
._walkthrough ._stepper button .label div {
  opacity: 0;
  transform: translate(33%);
  transition: transform .4s var(--ease-out-quint) .05s;
  transition-property: transform, opacity;
  white-space: nowrap;
  width: max-content;
}