/* Klify component styles. Every value comes from tokens.css; prefix k- keeps them clear of a host page. */
.k-pv { margin: 0; padding: var(--space-5); background: var(--cloud); color: var(--deep-ink); font: 400 15px/22px var(--font-sans); -webkit-font-smoothing: antialiased; }
.k-pv *, .k-pv *::before, .k-pv *::after { box-sizing: border-box; }
.k-pv h1, .k-pv h2, .k-pv h3, .k-pv h4, .k-pv p { margin: 0; }
.k-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.k-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.k-i { flex: none; }
.k-hint { font-size: 13px; line-height: 19px; color: var(--body); }
.k-lbl { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--body); }
.k-eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
:focus-visible { outline: 2px solid var(--deep-ink); outline-offset: 2px; }
.k-on-ink :focus-visible { outline-color: var(--white); }

/* buttons: every interactive control is a pill */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 46px; padding: 0 22px; border-radius: var(--radius-pill); border: 2px solid transparent; font: 600 15px/20px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .12s, background .15s, border-color .15s; }
.k-btn:active { transform: scale(.98); }
.k-btn .k-i { width: 18px; height: 18px; }
.k-btn-dark { background: var(--deep-ink); color: var(--white); }
.k-btn-dark:hover { background: var(--ink-hover); }
.k-btn-teal { background: var(--signal-teal); color: var(--deep-ink); }
.k-btn-teal:hover { background: var(--teal-hover); }
.k-btn-line { background: var(--white); border-color: var(--edge); color: var(--deep-ink); }
.k-btn-line:hover { border-color: var(--deep-ink); }
.k-btn-ghost { background: var(--pill); color: var(--deep-ink); }
.k-btn-ghost:hover { background: var(--pill-strong); }
.k-btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.k-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* tags */
.k-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font: 700 12px/16px var(--font-sans); letter-spacing: .02em; }
.k-tag .k-i { width: 14px; height: 14px; }
.k-tag-kode { background: var(--deep-ink); color: var(--white); } .k-tag-kode .k-i { color: var(--signal-teal); }
.k-tag-ai { background: var(--teal-tint); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal-line); }
.k-tag-wajib { background: var(--deep-ink); color: var(--white); }

/* cards */
.k-card { background: var(--white); border-radius: var(--radius-card); padding: var(--space-6); }
.k-card-t { font: 800 20px/28px var(--font-heading); letter-spacing: -.01em; }

/* stat card */
.k-stat { background: var(--white); border: 0; border-radius: var(--radius-card); padding: 20px 22px; min-height: 172px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.k-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.k-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.k-stat-top > span:first-child { font: 600 14px/20px var(--font-sans); color: var(--body); padding-top: 8px; }
.k-stat-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--pill); display: grid; place-items: center; flex: none; color: var(--deep-ink); }
.k-stat-num { font: 800 48px/1 var(--font-heading); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.k-stat-cap { font-size: 13px; line-height: 18px; color: var(--body); margin-top: 6px; min-height: 36px; display: flex; align-items: flex-start; gap: var(--space-2); }
.k-stat-cap .k-dot { margin-top: 5px; }
.k-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* loop track: 4 steps Data, Briefing, Pesan, Balasan */
.k-trk { display: flex; flex-direction: column; gap: 6px; }
.k-track { display: flex; align-items: center; }
.k-tn { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); background: var(--white); flex: none; }
.k-tn.done { background: var(--deep-ink); border-color: var(--deep-ink); }
.k-tn.now { background: var(--signal-teal); border-color: var(--deep-ink); box-shadow: var(--shadow-now); }
.k-tl { width: 16px; height: 2px; background: var(--edge); flex: none; }
.k-tl.done { background: var(--deep-ink); }
.k-trk small { font-size: 13px; line-height: 16px; color: var(--body); }

/* stepper */
.k-steps { display: inline-flex; gap: 4px; background: var(--white); border-radius: var(--radius-pill); padding: 5px; flex-wrap: wrap; }
.k-st { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 7px; border-radius: var(--radius-pill); border: 0; background: transparent; font: 600 14px/20px var(--font-sans); color: var(--body); }
.k-st .n { width: 30px; height: 30px; border-radius: 50%; background: var(--pill); display: grid; place-items: center; font: 700 13px var(--font-sans); flex: none; }
.k-st .n .k-i { width: 16px; height: 16px; }
.k-st.cur { background: var(--pill); color: var(--deep-ink); }
.k-st.cur .n { background: var(--signal-teal); color: var(--deep-ink); }
.k-st.done { color: var(--deep-ink); }
.k-st.done .n { background: var(--deep-ink); color: var(--signal-teal); }

/* finding card (briefing) */
.k-find { background: var(--white); border-radius: var(--radius-card); padding: 22px 24px; }
.k-find .tg { display: flex; align-items: center; gap: 10px; font: 700 13px/18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.k-find .tg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.k-find h3 { font: 800 19px/27px var(--font-heading); margin-top: 6px; letter-spacing: -.01em; }
.k-find p { font-size: 14.5px; line-height: 22px; margin-top: 6px; }
.k-find .src { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--body); }

/* fields and bars */
.k-inp { width: 100%; min-height: 48px; border: 1.5px solid transparent; background: var(--pill); border-radius: var(--radius-field); padding: 0 16px; font: 400 15px/22px var(--font-sans); color: var(--deep-ink); }
.k-inp::placeholder { color: var(--placeholder); }
.k-inp:hover { border-color: var(--edge); }
.k-inp:focus { background: var(--white); border-color: var(--deep-ink); outline: none; }
.k-inp.err { border-color: var(--critical); background: var(--critical-tint); }
.k-bar { height: 8px; border-radius: 4px; background: var(--pill-strong); overflow: hidden; }
.k-bar > i { display: block; height: 100%; background: var(--deep-ink); border-radius: 4px; }

/* waitlist form: email field + one teal button */
.k-wl { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; max-width: 560px; }
.k-wl .k-fld { flex: 1 1 260px; min-width: 0; }
.k-wl .k-fld > label { display: block; font: 600 14px/20px var(--font-sans); margin-bottom: 6px; }
.k-wl .k-btn { min-height: 48px; margin-top: 26px; }
.k-wl .k-msg { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--body); }
.k-wl .k-msg .k-i { width: 16px; height: 16px; margin-top: 2px; }
.k-wl .k-msg.err .k-i { color: var(--critical-ink); }
.k-wl .k-msg.err { color: var(--deep-ink); }
.k-wl .k-msg.ok .k-i { color: var(--teal-deep); }
.k-wl.done { align-items: center; padding: var(--space-4) var(--space-5); background: var(--teal-tint); border-radius: var(--radius-field); }
.k-wl.done .k-msg { margin: 0; font-size: 15px; line-height: 22px; color: var(--deep-ink); }
@media (max-width: 480px) { .k-wl .k-btn { width: 100%; margin-top: 0; } }

/* WhatsApp preview */
.k-phone { width: 340px; max-width: 100%; border-radius: var(--radius-window); overflow: hidden; background: var(--chat-ground); box-shadow: var(--shadow-card); flex: none; }
.k-ph-h { display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; background: var(--deep-ink); color: var(--white); }
.k-av { width: 38px; height: 38px; border-radius: 50%; background: var(--signal-teal); color: var(--deep-ink); display: grid; place-items: center; font: 700 14px var(--font-sans); flex: none; }
.k-ph-h b { display: block; font-size: 15px; line-height: 20px; }
.k-ph-h small { display: block; font-size: 13px; line-height: 16px; color: var(--on-ink-muted); }
.k-ph-b { padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.k-bub { max-width: 300px; padding: 12px 14px; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.k-bub p + p { margin-top: 10px; }
.k-bub .tm { font-size: 13px; line-height: 16px; color: var(--body); margin-top: 6px; }
.k-bub.out { align-self: flex-end; background: var(--bubble); border-radius: 14px 14px 4px 14px; }
.k-bub.out .tm { text-align: right; }
.k-bub.in { align-self: flex-start; background: var(--white); border-radius: 14px 14px 14px 4px; font-size: 15px; }