/* Jompom How It Works: dark section, winding road (path drawn by how.js), travelling 3D "7", zig-zag steps. */
.jp-how{background:var(--ink);color:#fff;padding:110px 0 120px;overflow:hidden}
.jp-how .hw-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-how .hw-head p{color:#c9d3da;font-size:17px;max-width:30em}
.jp-how .hw-road{position:relative}
.jp-how .hw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.jp-how .hw-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.jp-how .hw-base{stroke:#2f3236;stroke-width:38}
.jp-how .hw-fill{stroke:var(--deep);stroke-width:38}
.jp-how .hw-lane{stroke:var(--sun);stroke-width:4;stroke-dasharray:2 18}
.jp-how .hw-traveller{position:absolute;left:0;top:0;width:100px;height:100px;perspective:600px;z-index:3;pointer-events:none;will-change:transform}
.jp-how .hw-trip{position:relative;z-index:2}
.jp-how .hw-leg{display:flex;align-items:center;gap:22px;width:66%;padding:46px 0}
.jp-how .hw-leg:nth-child(odd){margin-right:auto}
.jp-how .hw-leg:nth-child(even){margin-left:auto;flex-direction:row-reverse}
.jp-how .hw-num{width:68px;height:68px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--ink);border:3px solid var(--ink);box-shadow:0 0 0 6px var(--ink);font:800 30px/1 var(--jp-display);transition:transform .7s var(--spring),background .3s}
.jp-how .hw-box{background:var(--ink2);border:3px solid #3a3d40;border-radius:26px;padding:26px 28px;transition:border-color .4s,transform .7s var(--spring),opacity .4s}
.jp-how .hw-box h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:8px}
.jp-how .hw-box p{color:#c9d3da;font-size:16px}
.js-motion .jp-how .hw-leg:not(.lit) .hw-box{opacity:.45;transform:scale(.96)}
.jp-how .hw-leg.lit .hw-num{background:var(--blue);transform:scale(1.15) rotate(-8deg)}
.jp-how .hw-leg.lit .hw-box{border-color:var(--blue)}

@media (max-width:980px){
  .jp-how .hw-head{grid-template-columns:minmax(0,1fr)}
  .jp-how .hw-leg,.jp-how .hw-leg:nth-child(even){width:100%;flex-direction:row}
}
@media (max-width:560px){
  .jp-how .hw-leg{gap:14px;padding:30px 0}
  .jp-how .hw-num{width:54px;height:54px;font-size:24px}
  .jp-how .hw-traveller{width:62px;height:62px}
  .jp-how .hw-box{padding:20px}
}