/* Landing v4: ditimpa di atas v3. Bagian "Kenapa pilih Barengin", perbandingan dengan akun sharing biasa. */
.px4-why{padding:clamp(80px,11vw,150px) 0;background:var(--bg,#f5f5f7)}
.px4-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px4-why-cols,.px4-why-row{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:start}
.px4-why-cols{padding:0 0 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft,#8e8e93);font-weight:600}
.px4-why-brand{color:var(--ink,#111114)}
.px4-why-list{display:grid;border-top:1px solid var(--line,rgba(17,17,20,.1))}
.px4-why-row{position:relative;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line,rgba(17,17,20,.1))}
.px4-why-row::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ink,#111114);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.px4-why-label{display:flex;align-items:baseline;gap:12px;font-size:clamp(26px,2.6vw,38px);font-weight:520;letter-spacing:-.045em;line-height:1.05;color:var(--ink,#111114)}
.px4-why-label span{font-size:13px;letter-spacing:0;font-weight:600;color:var(--soft,#8e8e93);font-variant-numeric:tabular-nums}
.px4-why-us,.px4-why-them{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.px4-why-us{font-size:clamp(17px,1.35vw,20px);color:var(--ink,#111114);font-weight:500}
.px4-why-them{font-size:16px;color:var(--soft,#8e8e93)}
.px4-why-them s{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/100% 1px}
.px4-why-us svg,.px4-why-them svg{flex:none;width:24px;height:24px;margin-top:1px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.px4-why-us svg circle{fill:var(--ink,#111114);stroke:none}
.px4-why-us svg path{stroke:#fff;stroke-dasharray:16;stroke-dashoffset:0}
.px4-why-them svg{stroke:var(--soft,#8e8e93);padding:3px;border:1px solid var(--line,rgba(17,17,20,.12));border-radius:50%}
.px4-why-row:hover::before{transform:scaleX(1)}
.px4-why-cta{margin-top:clamp(28px,4vw,48px)}

/* Gerak: baris naik, centang tergambar, coretan menyapu teks lawan */
.px4-why.is-motion .px4-why-row{opacity:0;transform:translateY(32px)}
.px4-why.is-motion .px4-why-row.is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*60ms),transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--i)*60ms)}
.px4-why.is-motion .px4-why-row.is-in::before{transform:scaleX(1);transition-delay:calc(var(--i)*60ms + .2s)}
.px4-why.is-motion .px4-why-us svg path{stroke-dashoffset:16}
.px4-why.is-motion .px4-why-row.is-in .px4-why-us svg path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.6,0,.2,1) calc(var(--i)*60ms + .45s)}
.px4-why.is-motion .px4-why-them s{background-size:0 1px}
.px4-why.is-motion .px4-why-row.is-in .px4-why-them s{background-size:100% 1px;transition:background-size .9s cubic-bezier(.6,0,.2,1) calc(var(--i)*60ms + .6s)}
.px4-why.is-motion .px4-why-row.is-in:hover::before{transform:scaleX(1)}
.px4-why.is-motion .px4-why-row.is-in::before{opacity:.12}
.px4-why.is-motion .px4-why-row.is-in:hover::before{opacity:1}

@media (max-width:860px){
  .px4-why-cols{display:none}
  .px4-why-row{grid-template-columns:1fr;gap:12px}
  .px4-why-them{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.px4-why *{transition:none!important}}