/* ---------- How to use — process diagram ---------- */
.process-flow{
  margin-top:42px;
  max-width:var(--maxw);
}
.process-flow__track{
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
}
.process-step{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:16px;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease;
}
.process-step.is-visible{
  opacity:1;
  transform:translateY(0);
}
.process-step__rail{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.process-step__node{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;font-size:14px;
  color:var(--navy);
  background:var(--teal);
  border:2px solid rgba(123,194,196,0.45);
  box-shadow:0 0 0 0 rgba(123,194,196,0.35);
  flex:none;
  position:relative;z-index:1;
  transition:box-shadow .4s ease, transform .4s ease, background .4s ease;
}
.process-step.is-active .process-step__node{
  transform:scale(1.06);
  box-shadow:0 0 0 8px rgba(123,194,196,0.18);
}
.process-step--you .process-step__node{
  background:var(--buddy-out,#f4b860);
  border-color:rgba(244,184,96,0.5);
  color:#2a1a00;
}
.process-step--you.is-active .process-step__node{
  box-shadow:0 0 0 8px rgba(244,184,96,0.18);
}
.process-step--arm .process-step__node{
  background:rgba(123,194,196,0.18);
  color:var(--teal);
  border-color:rgba(123,194,196,0.4);
}
.process-step--approve .process-step__node{
  background:linear-gradient(140deg,var(--teal),var(--teal-dark));
  color:var(--navy);
}
.process-step__line{
  width:2px;
  flex:1;
  min-height:28px;
  background:rgba(123,194,196,0.18);
  position:relative;
  overflow:hidden;
}
.process-step:last-child .process-step__line{display:none;}
.process-step__line::after{
  content:"";
  position:absolute;left:0;top:0;width:100%;height:0;
  background:var(--teal);
  transition:height .55s ease;
}
.process-step.is-visible .process-step__line::after{height:100%;}

.process-step__body{
  padding-bottom:28px;
  min-width:0;
}
.process-step:last-child .process-step__body{padding-bottom:0;}
.process-step__label{
  font-family:var(--font-display);
  font-weight:600;font-size:11px;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--teal);
  margin:0 0 8px;
}
.process-step--you .process-step__label{color:var(--buddy-out,#f4b860);}
.process-step__title{
  font-family:var(--font-display);
  font-weight:600;font-size:17px;
  color:#F2FAFB;
  margin:0 0 8px;
}
.process-step__copy{
  margin:0;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.5;
  max-width:52ch;
}
.process-bubble{
  margin-top:12px;
  display:inline-flex;
  align-items:flex-start;
  gap:10px;
  max-width:min(100%,520px);
  padding:12px 16px;
  border-radius:14px;
  background:rgba(123,194,196,0.08);
  border:1px solid rgba(123,194,196,0.2);
  opacity:0;
  transform:translateY(10px) scale(0.98);
  transition:opacity .45s ease .15s, transform .45s ease .15s;
}
.process-step.is-visible .process-bubble{
  opacity:1;
  transform:translateY(0) scale(1);
}
.process-bubble--you{
  background:rgba(244,184,96,0.08);
  border-color:rgba(244,184,96,0.25);
}
.process-bubble--approve{
  background:rgba(33,114,133,0.2);
  border-style:dashed;
  border-color:rgba(123,194,196,0.35);
  align-items:center;
}
.process-bubble__who{
  font-family:var(--font-display);
  font-weight:600;font-size:11px;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--teal);
  flex:none;
  padding-top:2px;
}
.process-bubble--you .process-bubble__who{color:var(--buddy-out,#f4b860);}
.process-bubble p{
  margin:0;
  font-size:14.5px;
  line-height:1.45;
  color:var(--ink);
}
.process-bubble__cta{
  font-family:var(--font-display);
  font-weight:600;font-size:14px;
  color:var(--navy);
  background:var(--teal);
  padding:8px 16px;
  border-radius:100px;
  display:inline-block;
}

.process-flow__legend{
  display:flex;flex-wrap:wrap;gap:16px 22px;
  margin-top:22px;
  font-size:12.5px;color:var(--muted);
}
.process-flow__legend span{
  display:inline-flex;align-items:center;gap:7px;
}
.process-flow__legend i{
  width:10px;height:10px;border-radius:50%;display:inline-block;
}
.process-flow__legend .dot-piers{background:var(--teal);}
.process-flow__legend .dot-you{background:var(--buddy-out,#f4b860);}
.process-flow__legend .dot-arm{background:rgba(123,194,196,0.55);border:1px solid var(--teal);}

/* Mobile: process diagram replaces the Piers infographic */
.how-process-mobile{display:none;}

@media (max-width:640px){
  .how-process-mobile{display:block;}
  .how-to-use-desktop{display:none;}
  #how-buddy-works{display:none;}
  .process-flow{margin-top:34px;}
  .process-step{grid-template-columns:40px 1fr;gap:12px;}
  .process-step__node{width:40px;height:40px;font-size:12px;}

  /*
   * On mobile, notes + text bits are part of the step reveal only.
   * Speech bubbles (.process-bubble) are the only pieces that slide.
   * Side margin gives the glow room so highlights aren't clipped.
   */
  .process-bubble{
    margin-left:10px;
    margin-right:10px;
    max-width:calc(100% - 20px);
  }
  .process-step.is-visible .process-bubble{
    opacity:0;
    transform:translateX(40px);
    visibility:hidden;
    transition:none;
  }
  .process-step.has-bubble-shown .process-bubble{
    opacity:1;
    transform:none;
    visibility:visible;
  }
  .process-step.is-active .process-bubble.is-slide-in{
    visibility:visible;
    animation:process-bubble-slide-in 1s ease forwards;
  }
  @keyframes process-bubble-slide-in{
    from{opacity:0;transform:translateX(40px);}
    to{opacity:1;transform:none;}
  }

  /* Later cycles: glow the speech bubble while its note is active */
  .process-step.has-bubble-shown.is-active.is-bubble-glow .process-bubble{
    transition:box-shadow .35s ease, background .35s ease;
  }
  .process-step--piers.has-bubble-shown.is-active.is-bubble-glow .process-bubble,
  .process-step--arm.has-bubble-shown.is-active.is-bubble-glow .process-bubble{
    box-shadow:0 0 0 2px rgba(123,194,196,0.55), 0 0 24px rgba(123,194,196,0.28);
    background:rgba(123,194,196,0.16);
  }
  .process-step--you.has-bubble-shown.is-active.is-bubble-glow .process-bubble{
    box-shadow:0 0 0 2px rgba(244,184,96,0.6), 0 0 24px rgba(244,184,96,0.3);
    background:rgba(244,184,96,0.16);
  }
  .process-step--approve.has-bubble-shown.is-active.is-bubble-glow .process-bubble{
    box-shadow:0 0 0 2px rgba(123,194,196,0.5), 0 0 24px rgba(123,194,196,0.25);
    background:rgba(33,114,133,0.28);
  }
}

@media (prefers-reduced-motion:reduce){
  .process-step,
  .process-bubble{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .process-step__line::after{height:100% !important;}
}