.hpt-wrap{--hpt-accent:#6366f1;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#111;max-width:1200px;margin:0 auto;padding:32px 16px}
.hpt-header{text-align:center;margin-bottom:40px}
.hpt-header h2{font-size:36px;margin:0 0 8px;font-weight:800}
.hpt-header p{font-size:18px;color:#555;margin:0}
.hpt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.hpt-card{position:relative;background:#fff;border:1px solid #eaeaea;border-radius:18px;padding:32px 24px;display:flex;flex-direction:column;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:transform .2s, box-shadow .2s}
.hpt-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
.hpt-featured{border:2px solid var(--hpt-accent);box-shadow:0 12px 32px color-mix(in srgb,var(--hpt-accent) 25%, transparent)}
.hpt-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--hpt-accent);color:#fff;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.hpt-card h3{font-size:24px;margin:0 0 8px;font-weight:700}
.hpt-desc{color:#666;margin:0 0 20px;min-height:42px}
.hpt-price{display:flex;align-items:baseline;gap:4px;margin-bottom:24px}
.hpt-currency{font-size:18px;font-weight:600;color:#444}
.hpt-amount{font-size:48px;font-weight:800;line-height:1;color:#111}
.hpt-period{font-size:14px;color:#777}
.hpt-features{list-style:none;padding:0;margin:0 0 28px;flex:1}
.hpt-features li{display:flex;align-items:center;gap:10px;padding:8px 0;color:#333;font-size:15px}
.hpt-features svg{color:var(--hpt-accent);flex-shrink:0}
.hpt-btn{display:block;width:100%;background:var(--hpt-accent);color:#fff;text-align:center;padding:16px 24px;border-radius:14px;font-size:17px;font-weight:700;text-decoration:none;border:none;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--hpt-accent) 35%, transparent);transition:transform .15s, box-shadow .2s, filter .2s}
.hpt-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 12px 28px color-mix(in srgb,var(--hpt-accent) 45%, transparent)}
.hpt-btn:active{transform:translateY(0)}
@media (max-width:600px){.hpt-header h2{font-size:28px}.hpt-amount{font-size:38px}}

/* Modal */
.hpt-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center}
.hpt-modal.hpt-open{display:flex}
.hpt-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.hpt-modal-box{position:relative;background:#fff;border-radius:18px;max-width:480px;width:92%;max-height:90vh;overflow-y:auto;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:hpt-pop .2s ease-out}
@keyframes hpt-pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.hpt-modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:30px;color:#888;cursor:pointer;line-height:1}
.hpt-modal-close:hover{color:#111}
.hpt-modal-content h3{margin:0 0 6px;font-size:22px}
#hpt-mp-summary{color:#555;margin:0 0 18px}
#hpt-mp-form label{display:block;margin-bottom:12px;font-size:14px;color:#333;font-weight:600}
#hpt-mp-form input{display:block;width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:10px;font-size:15px;margin-top:6px;font-weight:400;box-sizing:border-box}
#hpt-mp-form input:focus{outline:none;border-color:var(--hpt-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--hpt-accent) 20%, transparent)}
.hpt-mp-note{font-size:13px;color:#777;text-align:center;margin-top:12px}
.hpt-mp-error{background:#fee;color:#b00;padding:12px;border-radius:10px;margin-top:12px;font-size:14px}
#hpt-mp-checkout{margin-top:16px}