/* ============================================================
   Halaman jualan — gelap, bersih, aksen biru (sewarna aplikasi Trek).
   Ditulis mobile-first: sebagian besar pengunjung datang dari HP.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0b0e;
  --bg-2:#0e1014;
  --surface:#141619;
  --surface-2:#191c21;
  --line:#23272e;
  --line-2:#2e333b;

  --ink:#f2f4f7;
  --ink-2:#a3aab6;
  --ink-3:#737b88;
  --ink-4:#4d545e;

  --blue:#3b82ff;
  --blue-2:#6aa1ff;
  --blue-deep:#0a62f5;
  --blue-wash:rgba(59,130,255,.12);
  --blue-line:rgba(59,130,255,.26);
  --good:#34d399;
  --bad:#f87171;
  --amber:#fbbf24;

  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --wrap:1180px;
  --r:18px;
  color-scheme:dark;
}

html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:normal;font-family:var(--serif);font-weight:400}
b,strong{font-weight:700;color:var(--ink)}
i{font-style:normal}
table{border-collapse:collapse;width:100%}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px}
.center{text-align:center}

/* ── Tombol ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:13px;border:0;cursor:pointer;
  background:linear-gradient(145deg,var(--blue-2),var(--blue-deep));color:#fff;
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 6px 22px rgba(10,98,245,.32),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .16s cubic-bezier(.3,.8,.35,1),box-shadow .16s,filter .16s;
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(10,98,245,.42),inset 0 1px 0 rgba(255,255,255,.2);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-sm{padding:10px 16px;font-size:13.5px;border-radius:11px}
.btn-lg{padding:17px 30px;font-size:16.5px;border-radius:15px}
.btn-xl{padding:19px 34px;font-size:17.5px;border-radius:16px;width:100%}
/* Tombol kedua: mengajak coba aplikasinya, tidak boleh menyaingi tombol beli. */
.btn-ghost{
  background:none;color:var(--ink);
  border:1px solid var(--line-2);box-shadow:none;
}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-3);box-shadow:none;filter:none}

/* ── Bilah promo ── */
.promo{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(90deg,rgba(10,98,245,.16),rgba(59,130,255,.1));
  border-bottom:1px solid var(--blue-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.promo-in{display:flex;align-items:center;gap:9px;justify-content:center;padding:9px 16px;font-size:13.5px;color:var(--ink-2);flex-wrap:nowrap;white-space:nowrap}
.lg-only{display:none}
.promo-txt{overflow:hidden;text-overflow:ellipsis}
.promo-dot{width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 0 rgba(248,113,113,.6);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}
.promo-clock{font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink);letter-spacing:.02em;background:rgba(255,255,255,.07);padding:3px 9px;border-radius:7px}
.promo-cta{font-weight:700;color:var(--blue-2);border-bottom:1px solid transparent}
.promo-cta:hover{border-color:var(--blue-2)}

/* ── Nav ── */
.nav{position:sticky;top:var(--promo-h,41px);z-index:55;background:rgba(10,11,14,.78);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.nav.stuck{border-color:var(--line);background:rgba(10,11,14,.92)}
.nav-in{display:flex;align-items:center;gap:20px;padding-top:13px;padding-bottom:13px}
.brand{display:inline-flex;align-items:center;gap:9px}
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,var(--blue-2),var(--blue-deep));color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 2px 10px rgba(10,98,245,.4)}
.brand-name{font-weight:800;font-size:16px;letter-spacing:-.03em}
.nav-links{display:none;gap:26px;margin-left:auto;font-size:14.5px;color:var(--ink-2)}
.nav-links a{transition:color .16s}
.nav-links a:hover{color:var(--ink)}
.nav .btn{margin-left:auto}
.nav-links+.btn{margin-left:0}

/* ── Hero ── */
/* Tanpa mockup di HP, jarak atas-bawah yang tadinya mengimbangi tinggi HP
   tiruan jadi ruang kosong. Dirapatkan supaya baris angka sudah kelihatan
   sebelum orang menggulir. Di 900px ke atas kembali lega. */
.hero{position:relative;padding:34px 0 40px;overflow:hidden}
@media (min-width:900px){ .hero{padding:54px 0 64px} }
.glow{
  position:absolute;left:50%;top:-320px;transform:translateX(-50%);
  width:min(1100px,150vw);height:700px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(59,130,255,.20),rgba(59,130,255,.05) 55%,transparent 72%);
}
.glow2{top:-260px;background:radial-gradient(closest-side,rgba(59,130,255,.16),transparent 70%)}
.hero-in{position:relative;display:grid;gap:44px}
.tag{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;
  background:var(--blue-wash);border:1px solid var(--blue-line);color:var(--blue-2);
  font-size:13px;font-weight:650;margin-bottom:22px;
}
.hero h1{font-size:clamp(34px,8.2vw,60px);line-height:1.06;letter-spacing:-.04em;font-weight:800}
.hero h1 em{color:var(--blue-2);letter-spacing:-.01em}
.lede{font-size:clamp(16px,3.6vw,18.5px);color:var(--ink-2);line-height:1.62;margin-top:20px;max-width:56ch}
.hero-points{list-style:none;margin-top:26px;display:grid;gap:13px}
.hero-points li{position:relative;padding-left:30px;font-size:15px;color:var(--ink-2);line-height:1.58}
.hero-points li::before{
  content:"";position:absolute;left:0;top:7px;width:19px;height:19px;border-radius:50%;
  background:var(--blue-wash);border:1px solid var(--blue-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aa1ff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
.hero-cta{margin-top:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:560px){ .hero-btns{flex-direction:column;align-items:stretch;width:100%} .hero-btns .btn{width:100%} }
.hero-note{font-size:13px;color:var(--ink-3)}

/* Bingkai HP */
.phone{
  position:relative;border-radius:34px;padding:8px;
  background:linear-gradient(160deg,#2b3038,#14171c);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone::after{content:"";position:absolute;left:50%;top:15px;transform:translateX(-50%);width:62px;height:5px;border-radius:99px;background:rgba(0,0,0,.6);z-index:2}
.phone img{border-radius:27px;width:100%;height:auto}
.phone.sm{border-radius:28px;padding:6px}
.phone.sm img{border-radius:23px}
.phone.sm::after{width:46px;height:4px;top:12px}

/* Di HP, mockup HP + buku memakan hampir satu layar penuh dan mendorong semua
   yang menjual ke bawah lipatan. Karena tiap layar aplikasi tetap dipamerkan
   utuh di bagian Fitur, di sini dia disembunyikan dan baru muncul dari 900px
   ke atas, tempat ia punya kolom sendiri di samping teks. */
.hero-shot{display:none}
@media (min-width:900px){ .hero-shot{position:relative;display:flex;justify-content:center;padding-top:6px} }
/* Panggung berukuran sama dengan HP. Buku ditempelkan ke panggung ini, jadi
   posisinya selalu relatif terhadap HP dan tidak pernah melayang ke tengah. */
/* Panggung memuat HP DAN buku. Sebelumnya buku dipaku ke luar batas panggung,
   jadi di layar sempit ia menabrak teks hero. Sekarang keduanya di dalam satu
   kotak: apa pun lebar layarnya, komposisinya tidak pernah keluar jalur. */
.stage{position:relative;width:min(404px,92vw);margin-inline:auto}
.phone-lg{position:relative;z-index:2;width:66%;margin-left:auto}
.book{
  position:absolute;z-index:1;left:0;bottom:6%;width:35%;
  aspect-ratio:1/1.42;border-radius:4px 10px 10px 4px;padding:16px 13px;
  background:linear-gradient(140deg,#f7f8fa,#dfe4ec);color:#0e1013;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  transform:rotate(-8deg);
  box-shadow:0 26px 52px -14px rgba(0,0,0,.85),inset -9px 0 15px -10px rgba(0,0,0,.4);
}
.book::after{content:"";position:absolute;inset:0 auto 0 0;width:6px;border-radius:4px 0 0 4px;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent)}
.book-kicker{font-size:6.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-deep)}
.book-title{font-size:15px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.book-title em{color:var(--blue-deep);font-size:16.5px}
.book-sub{font-size:7px;color:#5c6069;font-weight:600;margin-top:auto}

/* ── Angka ── */
.stats{border-block:1px solid var(--line);background:var(--bg-2)}
.stats-in{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);padding:0}
.stats-in>div{background:var(--bg-2);padding:22px 16px;text-align:center}
.stats-in b{display:block;font-size:clamp(24px,6vw,32px);font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(140deg,#fff,var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-in span{display:block;font-size:12px;color:var(--ink-3);margin-top:7px;font-weight:600}

/* ── Bagian ── */
.sec{padding:68px 0;position:relative}
.sec-alt{background:var(--bg-2);border-block:1px solid var(--line)}
.kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);margin-bottom:14px}
.h2{font-size:clamp(27px,6.4vw,42px);line-height:1.12;letter-spacing:-.035em;font-weight:800}
.h2 em{color:var(--blue-2)}
.h2.big{font-size:clamp(26px,6vw,40px)}
.sub{font-size:clamp(15px,3.4vw,17px);color:var(--ink-2);margin-top:16px;max-width:64ch;line-height:1.62}
.center .sub{margin-inline:auto}

/* ── Kartu ── */
.grid2,.grid3{display:grid;gap:16px;margin-top:38px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--surface-2);font-size:23px;margin-bottom:16px}
.card h3{font-size:18px;font-weight:750;letter-spacing:-.02em;line-height:1.3;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.62}
.card-big{padding:30px 24px}
.card-big h3{font-size:21px}
.ticks{list-style:none;margin-top:18px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:14px;color:var(--ink-2);line-height:1.55}
.ticks li::before{
  content:"";position:absolute;left:2px;top:6px;width:15px;height:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.ticks.sm{margin-top:16px}
.ticks.sm li{font-size:13.5px}

/* ── Intip isi buku ──────────────────────────────────────────────────────
   Di HP keempat cuplikan ini ditumpuk ke bawah dan panjangnya lebih dari
   2.500 px, jadi orang harus menggulir lama melewati bagian yang paling
   menjual. Sekarang jadi carousel yang digeser ke samping: tinggi halaman
   tinggal setinggi SATU kartu, dan isinya tetap utuh, tidak dipotong.
   Dari 620px ke atas kembali jadi kisi dua kolom seperti semula.          */
.peek-rail{position:relative;margin-top:32px}
.peeks{
  display:flex;gap:14px;align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  /* Kartu pertama sejajar dengan teks di atasnya, tapi kartu tetap boleh
     menyentuh tepi layar saat digeser. */
  padding:2px 20px;margin-inline:-20px;scroll-padding-inline:20px;
  scrollbar-width:none;
}
.peeks::-webkit-scrollbar{display:none}
.peek{
  flex:0 0 min(91%,430px);scroll-snap-align:center;min-width:0;
  background:linear-gradient(170deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
/* align-self: tanpa ini lencana bukti ikut meregang selebar kartu, karena
   .peek sekarang kolom fleks. margin-top:auto menempelkannya ke dasar kartu
   supaya keempat kartu punya garis akhir yang sama. */
.peek-badge{margin-top:auto;align-self:flex-start}

/* Titik penunjuk: sekaligus tombol lompat, bukan sekadar hiasan. */
.peek-nav{display:flex;justify-content:center;gap:7px;margin-top:18px}
.peek-dot{
  width:7px;height:7px;padding:0;border-radius:99px;border:0;cursor:pointer;
  background:var(--line-2);transition:background .2s,width .2s;
}
.peek-dot.on{background:var(--blue-2);width:22px}
.peek-hint{margin-top:9px;text-align:center;font-size:12px;color:var(--ink-3)}
.peek::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--blue),transparent)}
.peek-no{font-size:11.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.peek h3{font-family:var(--serif);font-size:clamp(22px,5vw,27px);font-weight:400;line-height:1.2;letter-spacing:-.015em;margin:10px 0 12px}
.peek p{font-size:14.5px;color:var(--ink-2);line-height:1.65}
.peek-tail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px !important;color:var(--ink-3) !important}
.peek-badge{display:inline-block;margin-top:14px;padding:4px 11px;border-radius:99px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.28);color:var(--good);font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase}

.peek-fig{margin:16px 0 4px;display:grid;gap:9px}
.fig-row{font-size:12.5px;color:var(--ink-3);font-weight:600}
.fig-bar{position:relative;background:var(--surface-2);border-radius:9px;overflow:hidden;padding:10px 12px;font-size:12.5px;font-weight:650}
.fig-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(59,130,255,.34),rgba(59,130,255,.14));border-right:2px solid var(--blue)}
.fig-bar span{position:relative}
.fig-bar.alt i{background:linear-gradient(90deg,rgba(163,170,182,.2),rgba(163,170,182,.08));border-color:var(--ink-3)}
.fig-bar.neg i{background:linear-gradient(90deg,rgba(52,211,153,.28),rgba(52,211,153,.08));border-color:var(--good)}
.fig-bar.pos i{background:linear-gradient(90deg,rgba(248,113,113,.28),rgba(248,113,113,.08));border-color:var(--bad)}
.fig-tot{text-align:center;padding:11px;border-radius:9px;background:var(--surface-2);font-size:13.5px;color:var(--ink-2)}
.fig-tot b{font-size:16px;letter-spacing:-.02em}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.vs>div{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:15px 12px;text-align:center}
.vs .vs-k{display:block;font-size:11px;color:var(--ink-3);font-weight:650;line-height:1.35;min-height:30px}
.vs b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;margin:7px 0 2px;color:var(--ink-2)}
.vs i{font-size:11px;color:var(--ink-3)}
.vs .win{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.vs .win b{color:var(--good)}
.vs .win .vs-k{color:var(--ink-2)}

.qa{display:grid;gap:7px;margin:14px 0 4px}
.qa>div{background:var(--surface-2);border-radius:12px;padding:11px 13px;border-left:2px solid var(--blue)}
.qa b{display:block;font-size:13.5px;line-height:1.35;margin-bottom:4px}
.qa span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5}

.hands{display:grid;gap:8px;margin:16px 0 4px}
.hands>div{background:var(--surface-2);border-radius:12px;padding:12px 14px}
.hands b{display:block;font-size:14px;margin-bottom:2px}
.hands span{display:block;font-size:12.5px;color:var(--ink-2)}
.hands i{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}

.quote{background:var(--blue-wash);border:1px solid var(--blue-line);border-radius:14px;padding:16px;margin:16px 0}
.quote-k{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-2)}
.quote p{font-family:var(--serif);font-size:19px !important;color:var(--ink) !important;line-height:1.35;margin-top:7px}
.rule3{display:grid;gap:8px;margin-top:6px}
.rule-k{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rule3 label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.rule3 i{width:17px;height:17px;border-radius:5px;border:1.6px solid var(--line-2);flex-shrink:0;margin-top:2px}

.ktab{margin:16px 0 4px;font-size:13.5px}
.ktab td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.ktab td:last-child{text-align:right;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ktab tr:last-child td{border-bottom:0}
.ktab .hot{color:var(--amber)}

/* Daftar isi dilipat. Tujuh bab dengan keterangan panjang menambah sekitar
   700px di layar HP, padahal isinya untuk yang memang mau memeriksa, bukan
   untuk dibaca semua orang yang lewat. Dibuka otomatis di layar lebar. */
.toc{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0}
.toc>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:20px 22px;position:relative;
}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::after{
  content:"";width:8px;height:8px;margin-left:auto;margin-top:-3px;flex-shrink:0;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s,margin-top .2s;
}
.toc[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.toc-sum{font-size:12.5px;color:var(--ink-3);font-weight:600}
.toc ol{margin:0;padding:0 22px 24px;list-style:none;counter-reset:c;display:grid;gap:13px}
.toc li{counter-increment:c;position:relative;padding-left:40px;font-size:14px;color:var(--ink-2);line-height:1.58}
.toc li::before{
  content:"Bab " counter(c);position:absolute;left:0;top:1px;font-size:10px;font-weight:800;
  color:var(--blue-2);background:var(--blue-wash);border:1px solid var(--blue-line);
  padding:2px 5px;border-radius:6px;letter-spacing:.02em;
}

/* ── Fitur aplikasi ── */
.feat{display:grid;gap:30px;margin-top:46px;align-items:center}
.feat-no{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;
  color:var(--blue-2);background:var(--blue-wash);border:1px solid var(--blue-line);
  padding:5px 11px;border-radius:99px;line-height:1;margin-bottom:14px;
}
.feat h3{font-size:clamp(21px,5vw,29px);font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:14px}
.feat-copy p{font-size:15px;color:var(--ink-2);line-height:1.68;margin-bottom:12px}
.feat-shot{display:flex;justify-content:center}
.feat-shot .phone{max-width:264px;width:100%}
/* z-index:-1 sebelumnya melempar HP kedua ke BELAKANG latar seksi, jadi hilang
   sama sekali. Kedua HP sekarang dilapis di dalam wadahnya sendiri. */
.feat-shot.dual{gap:0;position:relative;padding-bottom:26px}
.feat-shot.dual .phone{max-width:200px;position:relative;z-index:2}
.feat-shot.dual .off{margin-left:-54px;margin-top:40px;z-index:1;opacity:.96}

/* ── Perbandingan ─────────────────────────────────────────────────────────
   DEFAULTNYA versi HP. Tiap baris jadi satu kartu bertumpuk: kepala tabel
   dimatikan dan tiap sel membawa nama kolomnya sendiri (<i class="cl">).
   Sebelumnya tabel dipaksa selebar 620px di dalam kotak yang digeser
   mendatar, jadi di HP dua kolom terakhir terpotong di luar layar dan orang
   harus menggeser untuk tahu isinya. Perbandingan yang separuhnya tidak
   kelihatan tidak meyakinkan siapa pun. Dari 620px ke atas, kembali jadi
   tabel biasa (lihat blok @media di bawah).                               */
.tabwrap{margin-top:28px}
.cmp{width:100%;font-size:14px;display:block}
.cmp thead{display:none}
.cmp tbody{display:grid;gap:12px}
.cmp tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px}
.cmp th,.cmp td{text-align:left;border:0;padding:0}
.cmp tbody th{display:block;font-size:15px;font-weight:750;color:var(--ink);letter-spacing:-.012em;line-height:1.35}

/* Baris 1 = nama kolom, baris 2 = tanda + nilainya. Teks nilainya adalah simpul
   teks telanjang di dalam td, jadi ia jadi item kisi anonim yang jatuh sendiri
   ke kotak sisa (baris 2, kolom 2). */
.cmp tbody td{
  display:grid;grid-template-columns:15px minmax(0,1fr);column-gap:7px;row-gap:3px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);line-height:1.5;
}
.cl{grid-row:1;grid-column:1/-1;font-style:normal;font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cmp tbody td::before{grid-row:2;grid-column:1;content:"•";color:var(--ink-4);font-weight:800;text-align:center}
.cmp tbody td.y::before{content:"✓";color:var(--good)}
.cmp tbody td.n::before{content:"✕";color:var(--bad)}
.cmp td.y{color:var(--ink);font-weight:650}

/* Kolom "Paket ini" selalu yang pertama: diberi garis dan label biru supaya
   mata langsung tahu mana kolom kita di antara tiga kartu yang seragam. */
.cmp tbody td:first-of-type{border-top-color:var(--blue-line)}
.cmp tbody td:first-of-type .cl{color:var(--blue-2)}

/* Kotak "jangan beli ini kalau": selama ini sama sekali tidak punya gaya, jadi
   ia menempel di bawah tabel sebagai paragraf telanjang. Padahal ini bagian
   yang membangun kepercayaan, jadi ia diberi bentuk sendiri, bukan warna
   peringatan yang menakut-nakuti. */
.honest{
  margin-top:20px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:14px;padding:18px 20px;
  font-size:14px;color:var(--ink-2);line-height:1.65;
}
.honest b{color:var(--ink);font-weight:750}

/* ── Beli ── */
.buy{overflow:hidden}
.buy-in{position:relative;text-align:center}
.price-card{
  margin:34px auto 0;max-width:560px;text-align:left;
  background:linear-gradient(170deg,var(--surface),var(--bg-2));
  border:1px solid var(--blue-line);border-radius:24px;padding:30px 24px;
  box-shadow:0 34px 80px -28px rgba(10,98,245,.4),0 0 0 1px rgba(255,255,255,.03);
}
.price-top{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
.price-was{display:block;font-size:19px;color:var(--ink-4);text-decoration:line-through;text-decoration-thickness:2px;font-weight:600}
.price-now{display:block;font-size:clamp(42px,11vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin-top:2px;background:linear-gradient(140deg,#fff,var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.price-off{display:inline-block;margin-top:10px;padding:5px 13px;border-radius:99px;background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.3);color:var(--good);font-size:12.5px;font-weight:750}

.cd{margin:22px 0;text-align:center}
.cd-k{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.cd-row{display:flex;align-items:center;justify-content:center;gap:6px}
.cd-u{display:flex;flex-direction:column;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 4px;min-width:72px}
.cd-u b{font-size:27px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.cd-u i{font-size:10.5px;color:var(--ink-3);font-weight:650;margin-top:4px;letter-spacing:.04em}
.cd-s{font-size:22px;color:var(--ink-4);font-weight:700;margin-top:-14px}

.price-list{list-style:none;display:grid;gap:11px;margin:4px 0 24px}
.price-list li{position:relative;padding-left:27px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.price-list li::before{
  content:"";position:absolute;left:2px;top:5px;width:16px;height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.price-foot{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:14px;line-height:1.5}

/* ── FAQ ── */
.faq{margin-top:34px;display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--blue-line)}
.faq summary{
  padding:17px 48px 17px 20px;font-size:15.5px;font-weight:650;cursor:pointer;position:relative;
  list-style:none;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:19px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq p{padding:0 20px 19px;font-size:14.5px;color:var(--ink-2);line-height:1.68}

/* ── Penutup ── */
.final{padding:80px 0 92px}
.final .h2{max-width:20ch;margin-inline:auto}
.final .btn{margin-top:30px;max-width:420px}
.final-note{margin-top:14px;font-size:13px;color:var(--ink-3)}
.final-note b{font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ── Footer ── */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:44px 0 108px}
.foot-in{display:grid;gap:22px}
.foot .brand{margin-bottom:12px}
.foot p{font-size:13px;color:var(--ink-3);line-height:1.65;max-width:70ch}
.disclaimer{padding:16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:12.5px !important}
.copy{font-size:12px !important;color:var(--ink-4) !important}

/* ── Bilah beli melayang (HP) ── */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(14,16,20,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .32s cubic-bezier(.3,.8,.35,1);
}
.sticky-buy.show{transform:none}
.sb-price{display:flex;flex-direction:column;line-height:1.15}
.sb-price s{font-size:11.5px;color:var(--ink-4)}
.sb-price b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.sticky-buy .btn{padding:13px 20px;font-size:14.5px}

/* ── Muncul saat digulir ── */
.rise{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.7,.28,1),transform .6s cubic-bezier(.22,.7,.28,1)}
.rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .promo-dot{animation:none}
  .btn:hover,.card:hover{transform:none}
}

/* ── Layar sedang ke atas ── */
@media (min-width:620px){
  .lg-only{display:inline}
  .promo-in{padding:9px 20px}
  .price-card .btn-xl{width:100%}
  .stats-in{grid-template-columns:repeat(4,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .peek-rail{margin-top:38px}
  .peeks{display:grid;grid-template-columns:1fr 1fr;gap:16px;overflow:visible;padding:0;margin-inline:0}
  .peek{padding:26px 22px}
  .qa{gap:9px;margin:16px 0 4px}
  .qa>div{padding:13px 15px}
  .qa b{font-size:14px;line-height:1.4;margin-bottom:5px}
  .qa span{font-size:13px;line-height:1.55}
  .peek-nav,.peek-hint{display:none}
  .toc>summary{cursor:default}
  .toc>summary::after,.toc-sum{display:none}

  .cd-u{min-width:88px}
  .cd-u b{font-size:32px}
  .price-card{padding:36px 32px}
  .hero-cta{flex-direction:row;align-items:center;gap:18px}
  .btn-xl{width:auto}
  .final .btn{width:100%}
}
@media (min-width:900px){
  .sec{padding:96px 0}
  .nav-links{display:flex}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .hero{padding:72px 0 96px}
  .hero-in{grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
  .hero-shot{justify-content:flex-end;padding-right:16px}
  .stage{width:404px;margin-inline:0}
  .feat{grid-template-columns:1fr 1fr;gap:56px;margin-top:70px}
  .feat.rev .feat-copy{order:2}
  .feat-shot .phone{max-width:290px}
  .feat-shot.dual .phone{max-width:224px}
  .sticky-buy{display:none}
  .foot{padding-bottom:52px}
  .final{padding:110px 0 120px}
}
@media (min-width:1080px){
  .stage{width:436px}
}

/* ── Perbandingan: baru jadi tabel kalau lebarnya cukup untuk semua kolom ── */
@media (min-width:720px){
  /* Perbandingan kembali jadi tabel: di sini semua kolom muat sekaligus. */
  .tabwrap{margin-top:34px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
  .cmp{display:table;min-width:620px}
  .cmp thead{display:table-header-group}
  .cmp tbody{display:table-row-group;gap:0}
  .cmp tr{display:table-row;background:none;border:0;border-radius:0;padding:0}
  .cmp th,.cmp td{display:table-cell;padding:15px 16px;border:0;border-bottom:1px solid var(--line)}
  .cmp thead th{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
  .cmp thead th:nth-child(2){color:var(--blue-2)}
  .cmp tbody th{display:table-cell;font-size:14px;font-weight:600;color:var(--ink-3)}
  .cmp tbody td{display:table-cell;margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
  .cmp tbody td.y{color:var(--ink);font-weight:650}
  .cl{display:none}
  .cmp tbody td::before{content:"• ";color:var(--ink-4);font-weight:800}
  .cmp tbody td.y::before{content:"✓ ";color:var(--good)}
  .cmp tbody td.n::before{content:"✕ ";color:var(--bad)}
  .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
  .cmp tbody td:first-of-type{background:rgba(59,130,255,.05);border-top-color:transparent}
}