/* web.css — halaman depan produk (keputusan Ko 8 Nov 2026). Di atas token Calm Pro (token.css); satu aksen, tanpa pustaka. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--fg);font:400 17px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
.lebar{max-width:1120px;margin:0 auto;padding:0 16px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.atas{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.atas-isi{display:flex;align-items:center;gap:24px;height:60px}
.merek{font-weight:700;letter-spacing:-.01em;text-decoration:none;font-size:18px}
.atas nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.atas nav a{text-decoration:none;color:var(--fg-muted)}
.atas nav a:hover{color:var(--fg)}
.masuk{font-size:15px;font-weight:600;text-decoration:none;color:var(--accent)}

section{padding:88px 0}
section.redup{background:var(--bg)}
h1{font-size:clamp(38px,5.6vw,62px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(27px,3.4vw,38px);line-height:1.18;letter-spacing:-.02em;font-weight:700;max-width:22ch}
h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.sub{margin-top:14px;max-width:58ch;color:var(--fg-muted)}
.kecil{margin-top:28px;font-size:15px;color:var(--fg-muted)}

.hero{padding:72px 0 88px}
.hero-isi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.lead{margin-top:22px;font-size:clamp(18px,1.7vw,20px);color:var(--fg-muted);max-width:44ch}
.aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.tombol{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-fg);font-weight:600;text-decoration:none;transition:background var(--dur) var(--ease)}
.tombol:hover{background:var(--accent-hover)}
.tombol.kedua{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--border-strong)}
.tombol.kedua:hover{background:var(--surface-hover)}

.contoh{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.contoh figcaption{font-size:13px;color:var(--fg-subtle);margin-bottom:14px}
.utas{display:flex;flex-direction:column;gap:8px}
.gelembung{max-width:86%;padding:9px 13px;font-size:15px;line-height:1.45;border-radius:12px}
.gelembung.pelanggan{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.gelembung.asisten{align-self:flex-end;background:var(--accent-soft);border-bottom-right-radius:4px}
.tercatat{margin-top:12px;font-size:13px;font-weight:600;color:var(--success);text-align:right}
.lapor{display:grid;gap:2px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);font-size:15px}
.lapor b{font-size:13px;color:var(--fg-subtle);font-weight:600}

dl.pihak{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px;border-top:2px solid var(--fg)}
dl.pihak>div{padding:20px 24px 0 0}
dl.pihak>div+div{padding-left:24px;border-left:1px solid var(--border)}
dt{font-weight:700}
dl.pihak dd{margin-top:8px;font-size:16px;color:var(--fg-muted)}

.langkah{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px;counter-reset:l}
.langkah li{counter-increment:l;display:grid;gap:8px}
.langkah li::before{content:counter(l);font-size:34px;line-height:1;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.langkah b{font-size:18px}
.langkah span{font-size:16px;color:var(--fg-muted)}

.dua{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.isi{color:var(--fg-muted);max-width:60ch}
dl.baris>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;padding:16px 0;border-top:1px solid var(--border)}
dl.baris>div:first-child{border-top:0;padding-top:4px}
dl.baris dd{font-size:16px;color:var(--fg-muted)}

.cocok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:40px}
.cocok ul{margin-top:14px;display:grid;gap:12px}
.cocok li{font-size:16px;color:var(--fg-muted);padding-top:12px;border-top:1px solid var(--border)}

.paket{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.paket article{display:flex;flex-direction:column;padding:24px 20px;border:1px solid var(--border);border-radius:var(--r-lg)}
.paket article.unggul{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.paket h3 small{margin-left:6px;font-size:12px;font-weight:600;color:var(--accent)}
.nominal{display:grid;align-content:end;min-height:50px;margin-top:10px;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.nominal b{font-weight:700}
.nominal span{font-size:13px;font-weight:500;letter-spacing:0;color:var(--fg-muted)}
.nominal i{font-style:normal;font-size:14px;font-weight:500;letter-spacing:0;color:var(--fg-muted)}
.ket{margin-top:12px;font-size:15px;color:var(--fg-muted);min-height:4.8em}
.paket dl{margin-top:auto;padding-top:12px;font-size:14px}
.paket dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border)}
.paket dt{font-weight:400;color:var(--fg-muted)}
.paket dd{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.catatan{margin-top:28px;display:grid;gap:6px;font-size:15px;color:var(--fg-muted);max-width:76ch}

.gelap{background:#0f172a;color:#e2e8f0}
.gelap h2{color:#fff}
.gelap p+p{margin-top:16px}
.ajak{background:var(--accent-soft);text-align:center}
.ajak h2,.ajak .sub{margin-left:auto;margin-right:auto}
.ajak .aksi{justify-content:center}

.kaki{padding:28px 0;font-size:14px;color:var(--fg-muted);border-top:1px solid var(--border)}
.kaki-isi{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
.kaki a{margin-right:20px;text-underline-offset:3px}
.kaki a:last-child{margin-right:0}

.dok{max-width:752px;padding-top:56px;padding-bottom:88px}
.dok h1{font-size:clamp(32px,4.4vw,44px)}
.dok .berlaku{margin-top:10px;font-size:15px;color:var(--fg-subtle)}
.dok h2{margin-top:40px;font-size:21px;line-height:1.3;letter-spacing:-.01em;max-width:none}
.dok p,.dok ul{margin-top:12px;color:var(--fg-muted)}
.dok .berlaku+p{margin-top:28px}
.dok ul{list-style:disc;padding-left:22px;display:grid;gap:8px}
.dok a{color:var(--accent);text-underline-offset:3px}

@media (max-width:980px){
  .paket{grid-template-columns:repeat(2,minmax(0,1fr))}
  dl.pihak{grid-template-columns:repeat(2,minmax(0,1fr))}
  dl.pihak>div:nth-child(3){padding-left:0;border-left:0}
  dl.pihak>div{padding-bottom:20px}
}
@media (max-width:760px){
  section,.hero{padding:56px 0}
  .atas nav{display:none}
  .masuk{margin-left:auto}
  .hero-isi,.dua,.cocok,.langkah{grid-template-columns:minmax(0,1fr)}
  .hero-isi{gap:40px}
  .dua{gap:24px}
  .cocok,.langkah{gap:32px}
  .ket{min-height:0}
}
@media (max-width:520px){
  .paket,dl.pihak{grid-template-columns:minmax(0,1fr)}
  dl.pihak>div,dl.pihak>div+div{padding:18px 0;border-left:0;border-bottom:1px solid var(--border)}
  dl.baris>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .aksi .tombol{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tombol{transition:none}}