/* ============================================================
   PARTNER JOURNEY STEPPER . 2026-09-22
   The partner hub board's five-node rail (sept-ptrhome-board.css, fold 4),
   made a portable component for the four partner pages. PM feedback via
   Yuval, 2026-09-22: the timeline belongs on the follow-up pages, one per
   partnership type, so it informs the reader about that type's path.

   Geometry is the board's: rail 960 wide, 20px nodes on a 1px line that
   runs node-centre to node-centre, labels 16/500 over 12/400, one detail
   card open (border #E1DED6, r24, pad 40, 240px step column in orange).
   Left-aligned in the alt shell's .wrap, where every heading is left-aligned.
   partner-journey.js moves the open card; without JS step 1 stays open.
   ============================================================ */
.pj{
  --pj-orange:#F37F00;--pj-ink:#121212;--pj-grey1:#666666;--pj-grey2:#888888;
  --pj-grey4:#B2B2B2;--pj-border:#E1DED6;--pj-done:0;
  max-width:960px;margin:2rem 0 0;display:flex;flex-direction:column;gap:48px;
}
.pj-rail{position:relative;width:100%;display:grid;grid-template-columns:repeat(5,1fr)}
.pj-line{position:absolute;top:10px;left:10%;width:80%;height:1px;background:var(--pj-grey4)}
.pj-line-active{
  position:absolute;top:10px;left:10%;width:calc(80% / 4 * var(--pj-done));height:1px;
  background:var(--pj-orange);transition:width .3s cubic-bezier(.16,1,.3,1);
}
.pj-step{
  display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;
  background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:center;
  border-radius:0;box-shadow:none;min-height:0;width:100%;
}
.pj-step:hover{background:none}
.pj-circle{
  width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--pj-grey4);
  display:flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
}
.pj-step.pj-done .pj-circle,.pj-step.pj-active .pj-circle{border-color:var(--pj-orange)}
.pj-step.pj-active .pj-circle::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--pj-orange)}
.pj-lbl{display:flex;flex-direction:column;align-items:center;gap:3px}
.pj-lbl b{display:block;font-size:16px;font-weight:500;color:var(--pj-grey1);line-height:normal}
.pj-step.pj-active .pj-lbl b{font-weight:600;color:var(--pj-orange)}
.pj-lbl span{display:block;font-size:12px;font-weight:400;color:var(--pj-grey2);max-width:120px;line-height:normal}
.pj-step:focus-visible{outline:none}
.pj-step:focus-visible .pj-circle{outline:2px solid var(--pj-orange);outline-offset:3px}
.pj-detail{
  width:100%;min-height:172px;padding:40px;display:flex;align-items:center;gap:40px;
  border:1px solid var(--pj-border);border-radius:24px;background:#fff;box-sizing:border-box;
}
.pj-detail[hidden]{display:none!important}
.pj-detail .pj-l{width:240px;padding-right:40px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.pj-detail .pj-l b{font-size:28px;font-weight:700;color:var(--pj-orange);line-height:normal}
.pj-detail .pj-l span{font-size:20px;font-weight:400;color:var(--pj-ink);line-height:normal}
.pj-detail .pj-r{flex:1;font-size:16px;font-weight:400;line-height:1.5;color:var(--pj-grey1);margin:0}
.pj-detail .pj-r a{color:var(--pj-ink);text-decoration:underline}
.pj-foot{max-width:720px;margin:1.4rem 0 0;font-size:14px;line-height:1.5;color:var(--pj-grey2)}
@media (max-width:760px){
  .pj{gap:32px}
  .pj-step{gap:12px}
  .pj-lbl b{font-size:13px}
  .pj-lbl span{font-size:11px}
  .pj-detail{min-height:0;flex-direction:column;align-items:flex-start;padding:24px;gap:14px}
  .pj-detail .pj-l{width:auto;padding:0}
}
@media (max-width:559px){
  .pj-lbl span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pj-line-active{transition:none}
}