.plans{display:grid;grid-template-columns:minmax(0,640px) minmax(0,340px);justify-content:center;gap:28px;align-items:start;font-family:'Space Grotesk',sans-serif;color:var(--ink)}
.plan{position:relative;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:28px;display:flex;flex-direction:column;gap:14px}
.plan.pro{background:#FFD400;box-shadow:9px 9px 0 var(--ink);padding:32px}
.plan.free{margin-top:36px}
.plan h3{font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0}
.plan .price{font-weight:800;font-size:40px;letter-spacing:-.04em;line-height:1}
.plan .price small{font-size:15px;font-weight:600;letter-spacing:0}
.plan .was{font-weight:600;font-size:14px;min-height:20px}
.plan .was s{opacity:.55;margin-right:6px}
.plan .was b{white-space:nowrap;background:var(--pink);border:2px solid var(--ink);border-radius:6px;padding:1px 6px;font-size:12px;margin-left:6px}
.plan details[hidden]{display:none}
/* durasi: tombol 1 / 3 / 6 bulan di atas, 3 bulan dikasih label Hemat */
.plan .opts{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
.plan .opt{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border:0;border-radius:8px;background:none;color:var(--ink);font:700 15px 'Space Grotesk',sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .12s,color .12s}
.plan .opt:hover{background:#F2EFE4}
.plan .opt[aria-pressed="true"]{background:var(--ink);color:#fff}
.plan .opt:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.plan .opt em{padding:1px 6px;border:2px solid var(--ink);border-radius:6px;background:var(--pink);color:var(--ink);font:700 11px 'IBM Plex Mono',monospace;font-style:normal;text-transform:uppercase}
/* harga per bulan gede, harga bulanan dicoret + persen hemat, total yang dibayar di bawahnya */
.plan .pp{display:grid;gap:6px}
.plan .pp .off{display:flex;align-items:center;gap:8px;min-height:24px;font-size:14px;font-weight:600}
.plan .pp .off:empty{display:none}
.plan .pp .off s{opacity:.6}
.plan .pp .off b{padding:1px 7px;border:2px solid var(--ink);border-radius:6px;background:var(--pink);font-size:12px}
.plan .pp .pay{margin:0;font-size:15px;font-weight:600}
.plan .pp .pay b{font-weight:800}
.plan .pp .perk{margin:0;font-size:14px;font-weight:700}
.plan .pp .perk em{font-style:normal;text-decoration:underline 2px var(--pink);text-underline-offset:3px}
.plan .qa details.x12{counter-increment:none}
.plan .qa details.x12 summary::before{content:'3+';background:var(--pink);color:var(--ink)}
.plan .go{margin-top:4px;display:flex;justify-content:center;padding:14px;border:3px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:800 15px 'Space Grotesk',sans-serif;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.plan.pro .go{background:var(--ink);color:#fff}
.plan .go{cursor:pointer;width:100%;box-sizing:border-box}
.plan .go:disabled{cursor:progress;opacity:.7}
.plan .go.soon:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}
.plan .err{font-size:13px;font-weight:700;color:#B00020;margin:0}
.plan .err[hidden],.pro-status[hidden]{display:none}
.pro-status{max-width:1188px;margin:0 auto 20px;padding:12px 16px;background:#00C2CC;border:3px solid var(--ink);border-radius:10px;font:700 14px 'Space Grotesk',sans-serif;color:var(--ink)}
.plan .vp{font-weight:700;font-size:14.5px;margin:0}
.plan .fine{font-size:12px;font-weight:500;line-height:1.45;margin:0;opacity:.8}
.plan .tagline{font:700 11px 'IBM Plex Mono',monospace;background:#00C2CC;border:2px solid var(--ink);border-radius:6px;padding:3px 8px}
.plan .why{font-size:13px;font-weight:600;line-height:1.45;margin:0;padding:10px 12px;background:#fff;border:2px dashed var(--ink);border-radius:8px}
.plan .qa{display:grid;gap:8px;counter-reset:q}
.plan .qa details{counter-increment:q;--qc:#00C2CC;background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.plan .qa details:nth-child(3n+2){--qc:var(--pink)}
.plan .qa details:nth-child(3n+3){--qc:#FFD400}
.plan.pro .qa details:nth-child(3n+3){--qc:#B49CFF}
.plan .qa summary{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;list-style:none;font-weight:700;font-size:14.5px;line-height:1.25}
.plan .qa summary::-webkit-details-marker{display:none}
.plan .qa summary::before{content:counter(q,decimal-leading-zero);flex-shrink:0;padding:2px 6px;border-radius:5px;background:var(--ink);color:var(--qc);font:700 11px 'IBM Plex Mono',monospace}
.plan .qa summary::after{content:'+';flex-shrink:0;margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:7px;background:#fff;font:700 16px 'IBM Plex Mono',monospace;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.plan .qa details[open] summary{background:var(--qc);border-bottom:2px solid var(--ink)}
.plan .qa details[open] summary::before{color:#fff}
.plan .qa details[open] summary::after{transform:rotate(45deg)}
.plan .qa p{margin:0;padding:10px 12px 12px;font-size:13.5px;font-weight:500;line-height:1.5}
@media (prefers-reduced-motion:reduce){.plan .qa summary::after{transition:none}}
@media (max-width:1060px){.plans{grid-template-columns:minmax(0,560px);gap:34px}.plan.free{margin-top:0}}
@media (max-width:560px){.plan.pro{padding:22px}.plan .opts{display:flex;align-self:stretch}.plan .opt{flex:1;flex-direction:column;gap:3px;padding:8px 4px}}
/* landing diskala 1.25x di >=1440px (scripts/rescale.js); kartu harga ikut biar gak keliatan kecil */
@media (min-width:1440px){
#harga .plans{grid-template-columns:minmax(0,760px) minmax(0,400px);gap:36px}
#harga .plan{padding:35px;gap:17.5px}
#harga .plan h3{font-size:30px}
#harga .plan .price{font-size:50px}
#harga .plan .price small{font-size:18.5px}
#harga .plan .was,#harga .plan .vp{font-size:17.5px}
#harga .plan .why,#harga .plan .qa p{font-size:16.5px}
#harga .plan .qa summary{font-size:18px;padding:11px 12.5px}
#harga .plan .opt{font-size:18px;padding:11px 20px}
#harga .plan .pp .off{font-size:17px}
#harga .plan .pp .pay,#harga .plan .pp .perk{font-size:18px}
#harga .plan .go{font-size:18.5px;padding:17.5px}
#harga .plan .fine{font-size:15px}
}
.hold-pop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,10,.55)}
.hold-pop[hidden]{display:none}
.hold-box{max-width:380px;padding:26px 24px 22px;background:#FFD400;border:3px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink);text-align:center;rotate:-1.5deg;animation:holdIn .3s cubic-bezier(.34,1.56,.64,1) both}
.hold-box p{margin:0 0 18px;font:800 24px/1.15 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.hold-box button{padding:12px 28px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink);font:800 15px 'Space Grotesk',sans-serif;cursor:pointer}
@keyframes holdIn{from{opacity:0;scale:.8}}
@media (prefers-reduced-motion:reduce){.hold-box{animation:none}}
.plan .pays{display:grid;gap:10px}
.plan.pro .go.alt{background:#fff;color:var(--ink)}