/* Modul KPI marketing page (/kpi), on top of login.css */
.kl-hero{background:var(--mist)}
.kl-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center;padding:clamp(48px,7vw,92px) 0}
.kl-hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.06;font-weight:800;letter-spacing:-.035em;max-width:15ch;text-wrap:balance}
.kl-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 60px -24px #0f223640;padding:22px 22px 16px;font-variant-numeric:tabular-nums}
.kl-card-hd{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kl-card-hd b{display:block;font-size:17px}.kl-card-hd small{color:var(--muted);font-size:13px}
.kl-rt{display:grid;justify-items:center;background:var(--mint-soft);color:var(--teal-d);border-radius:14px;padding:6px 12px;font:800 26px/1.1 var(--display)}
.kl-rt small{font:600 11px 'IBM Plex Sans',sans-serif;white-space:nowrap}
.kl-score{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;margin:16px 0 12px}
.kl-score span{color:var(--muted);font-size:13px}.kl-score b{font:800 28px/1 var(--display);color:var(--ink)}
.kl-score i{grid-column:1/-1;height:8px;border-radius:9px;background:#edf2f1;overflow:hidden}.kl-score em{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--mint))}
.kl-card table{width:100%;border-collapse:collapse;font-size:13.5px}
.kl-card th{text-align:right;color:var(--muted);font-weight:600;font-size:12px;padding:8px 6px;border-bottom:1px solid var(--line)}
.kl-card th:first-child,.kl-card td:first-child{text-align:left}
.kl-card td{text-align:right;padding:10px 6px;border-bottom:1px solid #eef3f1;vertical-align:bottom}
.kl-card td b.up{color:var(--teal)}
.kl-p{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.kl-p.k{color:#0f7a63}.kl-p.c{color:#2563a8}.kl-p.o{color:#a35d00}.kl-p.g{color:#7a3fa0}
.kl-card figcaption{color:var(--muted);font-size:12.5px;margin-top:10px}
.kl-sec{padding:clamp(56px,7vw,96px) 0}.kl-alt{background:var(--mist)}
.kl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.kl-grid article{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.kl-grid p{color:var(--muted);margin:8px 0 0;font-size:15px}
.kl-ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--mint-soft);color:var(--teal-d);font-weight:800;font-size:18px;margin-bottom:14px}
.kl-steps{list-style:none;counter-reset:s;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kl-steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:8px;align-content:start}
.kl-steps li:before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center;font:800 15px var(--display)}
.kl-steps span{color:var(--muted);font-size:15px}
.kl-price,.kl-int{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.kl-ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.kl-ticks li{padding-left:28px;position:relative}.kl-ticks li:before{content:'✓';position:absolute;left:0;top:0;color:var(--teal);font-weight:800}
.kl-calc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 24px 50px -28px #0f223640;display:grid;gap:10px}
.kl-calc label{font-weight:600;font-size:14px}
.kl-n{display:grid;grid-template-columns:48px 1fr 48px;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.kl-n button{border:0;background:var(--mist);font-size:22px;color:var(--ink)}.kl-n button:hover{background:var(--mint-soft)}
.kl-n input{border:0;text-align:center;font:700 22px var(--display);padding:10px;min-width:0;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.kl-n input::-webkit-inner-spin-button{-webkit-appearance:none}
.kl-total{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 0;border-top:1px solid var(--line);padding-top:14px}
.kl-total span{color:var(--muted)}.kl-total b{font:800 30px var(--display);font-variant-numeric:tabular-nums}
.kl-per{margin:0 0 6px;color:var(--muted);font-size:14px}
.kl-faq{display:grid;gap:10px}
.kl-faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.kl-faq summary{cursor:pointer;font-weight:700}.kl-faq p{color:var(--muted);margin:8px 0 0}
.kl-final{background:var(--ink);color:#fff;padding:clamp(56px,7vw,84px) 0}
.kl-final .wrap{display:grid;gap:24px}.kl-final h2{color:#fff}
.kl-foot{margin:8px 0 0;font-size:14px}.kl-foot a{color:#b9cad8}
@media(max-width:1000px){.kl-grid{grid-template-columns:1fr 1fr}.kl-steps{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.kl-hero-in,.kl-price,.kl-int{grid-template-columns:1fr}}
@media(max-width:640px){.kl-grid,.kl-steps{grid-template-columns:1fr}.kl-card{padding:18px 14px 12px}.kl-card table{font-size:12.5px}.kl-card th:nth-child(3),.kl-card td:nth-child(3){display:none}}

.kl-asal{color:var(--muted);font-weight:500}
.kl-promo{display:inline-block;margin:0 0 10px;background:#fff4e2;color:#7a3f00;border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px}
.kl-promo s{font-weight:500}
[hidden]{display:none!important}

/* Tiered prices (2026-11) */
.kl-tier{width:100%;border-collapse:collapse;margin:18px 0 6px;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kl-tier th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);background:#f6f9f8}
.kl-tier td{padding:10px 12px;border-bottom:1px solid #eef3f2;vertical-align:top}.kl-tier tr:last-child td{border-bottom:0}.kl-tier td:first-child{font-weight:600}
.kl-tempoh{display:flex;gap:8px}.kl-tempoh label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;font-weight:600}
.kl-tempoh label:has(input:checked){border-color:#0f7a63;background:#e4f6ef;color:#0b5e4c}.kl-tempoh input{accent-color:#0f7a63}
@media(max-width:560px){.kl-tier{font-size:13px}.kl-tier th,.kl-tier td{padding:8px}}