/* ==========================================================================
   JagoCS — Design System
   Arah desain: "Ruang Kontrol".
   Lawan dari CS amatir bukan CS yang ramah, tapi CS yang TERLIHAT dan TERUKUR.
   Karena itu halaman ini memakai bahasa visual panel monitoring:
   label mono, meter, chip KPI, dan garis ukur — bukan dekorasi.
   ========================================================================== */

:root {
  /* Palet */
  --ink: #0a1626;
  --ink-2: #16293f;
  --paper: #fbfaf7;
  --tint: #f2f0ea;
  --blue: #0b5fff;
  --blue-deep: #06369c;
  --gold: #e0a106;
  /* Emas yang cukup gelap untuk teks kecil di atas latar emas tipis.
     --gold sendiri cuma 2.03:1 di sana — nyaris tak terbaca. */
  --gold-deep: #8d6504;
  --alarm: #c4443c;
  --jade: #0f8f6c;
  /* Jade yang cukup gelap untuk teks kecil di atas latar jade tipis.
     --jade sendiri cuma 3.37:1 di sana, di bawah ambang AA. */
  --jade-deep: #0b6b51;
  --muted: #5a6b7e;
  --line: rgba(10, 22, 38, 0.12);
  --line-soft: rgba(10, 22, 38, 0.07);

  /* Bentuk */
  --r-chip: 999px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Layout */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 44px);

  /* Huruf */
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Bayangan */
  --lift: 0 1px 2px rgba(10, 22, 38, 0.05), 0 12px 28px -14px rgba(10, 22, 38, 0.28);
  --lift-lg: 0 2px 4px rgba(10, 22, 38, 0.05), 0 40px 80px -40px rgba(10, 22, 38, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- Tipografi */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.022em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 {
  font-size: clamp(36px, 4.7vw, 62px);
  line-height: 0.98;
  font-variation-settings: "wdth" 108;
}

h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.04;
  font-variation-settings: "wdth" 106;
}

h2 s {
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--alarm);
  text-underline-offset: 0;
}

h3 {
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.012em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lead {
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.68;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold);
}

/* ------------------------------------------------------------- Kerangka */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section {
  padding-block: clamp(62px, 8vw, 114px);
}

.section--tint {
  background: var(--tint);
}

.section--dark {
  color: #fff;
  background: var(--ink);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(11, 95, 255, 0.28), transparent 58%),
    radial-gradient(80% 70% at 96% 100%, rgba(224, 161, 6, 0.16), transparent 60%);
}

.section-head {
  max-width: min(58ch, 100%);
  margin-bottom: clamp(34px, 4vw, 54px);
}

.section-head .lead {
  margin-top: 18px;
}

/* --------------------------------------------------------------- Tombol */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn--primary {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 10px 24px -10px rgba(11, 95, 255, 0.9);
}

.btn--primary:hover {
  background: var(--blue-deep);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
}

.btn--ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn--light {
  color: var(--ink);
  background: #fff;
}

.btn--light:hover {
  transform: translateY(-2px);
}

.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

/* --------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  background: rgba(251, 250, 247, 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(10, 22, 38, 0.5);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
  padding-block: 12px;
}

.brand img {
  display: block;
  width: 146px;
  height: auto;
}

/* Wordmark JagoReview jauh lebih memanjang daripada wordmark JagoCS: satu
   baris tanpa "by JagoCS" di bawahnya. Lebarnya disetel lebih besar supaya
   TINGGI HURUFNYA sepadan dengan wordmark JagoCS di halaman lain, bukan supaya
   lebar kotaknya sama — yang dilihat mata adalah hurufnya. */
.brand--jagoreview img {
  width: 196px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}

.main-nav > a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--r-chip);
  color: var(--ink-2);
  background: none;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.main-nav > a:hover,
.nav-trigger:hover,
.has-sub:hover .nav-trigger {
  color: var(--blue-deep);
  background: rgba(11, 95, 255, 0.08);
}

.main-nav a[aria-current="page"] {
  color: var(--blue-deep);
  background: rgba(11, 95, 255, 0.1);
}

.nav-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.has-sub {
  position: relative;
}

.nav-sub {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  width: 320px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--lift-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.has-sub:hover .nav-sub,
.has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-sub:hover .nav-trigger::after,
.has-sub:focus-within .nav-trigger::after {
  transform: rotate(-135deg);
}

.nav-sub a {
  display: grid;
  gap: 2px;
  padding: 11px 13px;
  border-radius: 12px;
  transition: background 0.14s ease;
}

.nav-sub a:hover {
  background: var(--tint);
}

.nav-sub strong {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}

.nav-sub span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  color: var(--ink);
  background: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle i {
  display: grid;
  gap: 4px;
  width: 16px;
}

.nav-toggle i::before,
.nav-toggle i::after {
  content: "";
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.nav-toggle[aria-expanded="true"] i::before {
  transform: translateY(3px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] i::after {
  transform: translateY(-3px) rotate(-45deg);
}

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative;
  padding-block: clamp(42px, 5vw, 72px) clamp(48px, 6vw, 84px);
  background-image:
    radial-gradient(70% 46% at 8% 0%, rgba(11, 95, 255, 0.1), transparent 62%),
    radial-gradient(50% 40% at 100% 8%, rgba(224, 161, 6, 0.12), transparent 60%);
}

.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
}

/* Penegas kata di judul utama: biru, bukan miring. Berlaku untuk kedua
   bentuk hero — beranda memakai .hero, halaman produk memakai .produk-hero.
   Sebelumnya hanya .hero yang tercakup, sehingga <em> di halaman produk
   jatuh ke miring bawaan peramban dan terbaca seperti sisipan, bukan
   penegasan. */
/* Judul dua baris berisi hasil, bukan kalimat. Tiap baris berdiri sendiri,
   jadi disusun grid agar jaraknya diatur di satu tempat — bukan lewat <br>
   yang jaraknya ikut line-height dan tidak bisa disetel. */
.judul-hasil {
  display: grid;
  justify-items: start;
  gap: 2px;
}

.judul-hasil > span {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
}

/* Ikon mengekor kata "naik", jadi harus terbaca sebagai bagian dari kalimat,
   bukan penanda yang berdiri sendiri.

   align-items: center memusatkannya pada kotak baris — yang ikut menghitung
   ruang bawah huruf berekor. Kata "naik" tidak punya ekor, jadi ikonnya
   terlihat melorot. Angkatan kecil ini menyetel titik pusatnya ke tinggi
   huruf yang benar-benar ada di sebelahnya. */
.ikon-naik {
  flex: none;
  width: 0.72em;
  height: 0.72em;
  color: var(--jade);
  transform: translateY(-0.06em);
}

/* Ikon penanda kartu, menggantikan label teks.

   Tingginya dipatok dan lebarnya mengikuti. Ikon dua toko dua kali lebih
   lebar daripada yang lain; kalau lebarnya yang dipatok, ia akan menyusut
   sampai setengah tinggi tetangganya. */
.ikon-kartu {
  display: block;
  justify-self: start;
  width: auto;
  height: 18px;
  margin-bottom: 2px;
}

/* --gold apa adanya cuma 2.27:1 di atas kartu putih — di bawah ambang 3:1
   untuk objek grafis. Nada ini menahan rona emasnya sambil lolos. */
.ikon-kartu--jam {
  color: #bd8805;
}

/* Ikon tunggal dibuat lebih tinggi daripada barisan bintang. Bobot tampak
   sebuah ikon datang dari luasnya, bukan tingginya — pada tinggi yang sama,
   satu ikon 24x24 terlihat kerdil di sebelah lima bintang selebar 93px. */
.ikon-kartu--jam,
.ikon-kartu--toko,
.ikon-kartu--hemat {
  height: 23px;
}

.ikon-kartu--hemat {
  color: var(--jade);
}

.hero h1 em,
.section-head h2 em {
  color: var(--blue);
  font-style: normal;
}

/* Penegas di judul halaman produk: blok berwarna, bukan sekadar teks biru.

   box-decoration-break: clone wajib di sini. Tanpanya, frasa yang terpotong
   ke baris berikutnya mendapat satu kotak memanjang yang sudutnya membulat
   hanya di ujung terluar — potongan tengahnya terlihat seperti blok rusak.
   Dengan clone, tiap potongan membawa bantalan dan sudutnya sendiri. */
/* Judul dengan blok penegas butuh jarak baris lebih longgar. h1 global
   memakai line-height 0.98 — blok setinggi ~1.35em tidak akan pernah muat di
   situ, dan akan menutupi bagian bawah baris di atasnya. */
.produk-hero h1 {
  line-height: 1.34;
}

.produk-hero h1 em {
  padding: 0 0.18em;
  border-radius: 8px;
  color: #fff;
  background: var(--blue);
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-side {
  display: grid;
  gap: 22px;
  padding-bottom: 4px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-chips li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 0 3px rgba(15, 143, 108, 0.16);
}

/* ------------------------------------------- Signature: panel perbandingan */

.verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(38px, 5vw, 62px);
}

.verdict-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  grid-column: 1 / -1;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-cs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 2.6vw, 30px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--lift);
}

.card-cs::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
}

.card-cs--bad {
  background: linear-gradient(180deg, #fff8f7, #fff 42%);
  border-color: rgba(196, 68, 60, 0.24);
}

.card-cs--bad::before {
  background: repeating-linear-gradient(
    135deg,
    var(--alarm) 0 10px,
    rgba(196, 68, 60, 0.28) 10px 20px
  );
}

.card-cs--good {
  border-color: rgba(11, 95, 255, 0.26);
  box-shadow: var(--lift-lg);
}

.card-cs--good::before {
  background: linear-gradient(90deg, var(--blue), var(--jade));
}

.card-cs header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.card-cs h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-variation-settings: "wdth" 104;
}

.card-cs .kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status--off {
  color: #a03129;
  background: rgba(196, 68, 60, 0.1);
}

.status--live {
  color: #0a6448;
  background: rgba(15, 143, 108, 0.12);
}

.status--live::before {
  animation: pulse 1.9s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
    transform: scale(0.8);
  }
}

.meter {
  display: grid;
  gap: 9px;
}

.meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meter-row b {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.card-cs--bad .meter-row b {
  color: var(--alarm);
}

.card-cs--good .meter-row b {
  color: var(--jade);
}

.meter-track {
  position: relative;
  height: 10px;
  border-radius: var(--r-chip);
  background: rgba(10, 22, 38, 0.08);
  overflow: hidden;
}

.meter-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 20%);
  border-radius: var(--r-chip);
  background: var(--alarm);
  transform-origin: left;
  animation: grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.card-cs--good .meter-track i {
  background: linear-gradient(90deg, var(--blue), var(--jade));
  animation-delay: 0.18s;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
}

/* Mockup percakapan — inti perbandingannya ada di isi chat, bukan di hiasan */

.chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(10, 22, 38, 0.1);
  border-radius: 16px;
  background: #e9e5dd;
}

.chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(10, 22, 38, 0.1);
  background: #f7f5f1;
}

.chat-bar .ava {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
}

.chat-bar strong {
  display: block;
  font-size: 14px;
}

.chat-bar small {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.chat-net {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 268px;
  padding: 14px 12px;
  background-image: radial-gradient(rgba(10, 22, 38, 0.055) 1px, transparent 1px);
  background-size: 16px 16px;
}

.bubble {
  max-width: 80%;
  padding: 9px 12px 7px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(10, 22, 38, 0.09);
  font-size: 14.5px;
  line-height: 1.5;
}

.bubble.in {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.bubble.out {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.bubble time {
  display: block;
  margin-top: 3px;
  color: #4a5a6b;
  font-family: var(--mono);
  font-size: 10.5px;
  text-align: right;
}

.card-cs--bad .bubble.out {
  background: #e4e1db;
}

.card-cs--good .bubble.out {
  background: #d9e7ff;
}

.card-cs--good .bubble time .tick {
  color: var(--blue);
}

.chat-note {
  align-self: center;
  max-width: 90%;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--r-chip);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.chat-note--bad {
  color: #8f2f28;
  background: rgba(196, 68, 60, 0.14);
}

.chat-note--good {
  color: #085740;
  background: rgba(15, 143, 108, 0.16);
}

/* Jeda balasan yang dibiarkan kosong — diamnya CS ikut terlihat */
.chat-note--wait {
  margin-block: auto;
}

.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}

.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.checks li::before {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}

.card-cs--bad .checks li {
  color: var(--muted);
}

.card-cs--bad .checks li::before {
  content: "✕";
  color: var(--alarm);
  background: rgba(196, 68, 60, 0.12);
}

.card-cs--good .checks li::before {
  content: "✓";
  color: #fff;
  background: var(--jade);
}

.verdict-vs {
  display: grid;
  place-items: center;
  align-self: center;
}

.verdict-vs span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------- Pilar CS */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pillar {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pillar:hover {
  border-color: rgba(11, 95, 255, 0.3);
  box-shadow: var(--lift);
  transform: translateY(-4px);
}

.pillar-tag {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  padding: 5px 11px;
  border-radius: var(--r-chip);
  color: var(--blue-deep);
  background: rgba(11, 95, 255, 0.1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pillar p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.62;
}

/* CTA di dalam kartu pilar: rapat kiri, tidak melebar penuh */
.pillar .btn {
  justify-self: start;
  margin-top: 6px;
}

/* ------------------------------------------------------------- Manifesto */

.manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  align-items: end;
  gap: clamp(26px, 4vw, 56px);
}

.manifesto h2 {
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1;
}

.manifesto .lead {
  color: rgba(255, 255, 255, 0.82);
}

/* Kalimat inti manifesto: kotak putih di atas latar gelap */
.kotak-sorot {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--lift-lg);
}

.kotak-sorot p {
  color: var(--ink);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.6;
}

/* Penegas biru. Cakupannya dilepas dari .kotak-sorot supaya bisa dipakai di
   judul juga. Tambahan tebalnya tetap khusus .kotak-sorot — di dalam h2 yang
   memang sudah tebal, menambah bobot tidak mengubah apa pun. */
.biru {
  color: var(--blue);
}

.kotak-sorot .biru {
  font-weight: 700;
}

.manifesto-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.56);
  font-size: 15px;
}

/* --------------------------------------------------------------- Akademi */

.academy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

.academy-head {
  position: sticky;
  top: 108px;
}

.ladder {
  counter-reset: step;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ladder li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 500;
}

.ladder li:first-child {
  border-top: 1px solid var(--line);
}

.ladder li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ladder li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ladder li:hover::after {
  width: 100%;
}

.academy-out {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  padding: 24px 26px;
  border-radius: var(--r-md);
  color: #fff;
  background: var(--ink);
}

.academy-out span {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.academy-out strong {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.018em;
}

/* ----------------------------------------------------------------- Bukti */

/* Dulu dua kolom: kartu free trial di kiri, statistik di kanan. Kartunya
   sudah dibuang dari halaman, jadi tinggal statistiknya yang mengisi penuh. */
.proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* TIDAK TERPAKAI di halaman mana pun sejak kartu free trial dibuang dari
   index.html. Sengaja disimpan karena kartunya kemungkinan dibangun lagi di
   tempat lain. Kalau ternyata tidak jadi, blok .trial* ini boleh dihapus. */
.trial {
  display: grid;
  align-content: space-between;
  gap: 26px;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(150deg, var(--blue-deep), var(--blue) 58%, #2b7bff);
  box-shadow: var(--lift-lg);
}

.trial-badge {
  display: inline-flex;
  align-self: start;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-chip);
  color: var(--ink);
  background: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.trial h3 {
  margin-top: 18px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.02;
  font-variation-settings: "wdth" 104;
}

.trial p {
  margin-top: 14px;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: 16px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.stat {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

.stat::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: var(--r-chip);
  background: var(--gold);
}

.stat strong {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* --------------------------------------------------------------- Proses */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: flow;
}

.step {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

.step::before {
  counter-increment: flow;
  content: "Tahap " counter(flow, decimal-leading-zero);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.step p {
  color: var(--muted);
  font-size: 15.5px;
}

.step--kpi {
  border-color: rgba(224, 161, 6, 0.45);
  background: linear-gradient(180deg, #fffaef, #fff 46%);
}

.step--kpi::before {
  color: #8a6300;
}

.kpi-list {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.kpi-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.kpi-list li::before {
  content: "\25B8";
  color: var(--gold);
}

/* -------------------------------------------------------------- Nilai */

.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.values div {
  padding: 26px 22px 4px;
  border-right: 1px solid var(--line);
}

.values div:last-child {
  border-right: 0;
}

.values strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.values p {
  color: var(--muted);
  font-size: 15px;
}

/* -------------------------------------------------------------- Kontak */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(34px, 4vw, 52px);
  border-radius: var(--r-lg);
  color: #fff;
  background: var(--ink);
  background-image: radial-gradient(90% 120% at 100% 0%, rgba(11, 95, 255, 0.4), transparent 60%);
}

.contact p {
  margin-top: 16px;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
}

.contact address {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--mono);
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
}

/* -------------------------------------------------------------- Footer */

.site-footer {
  padding-block: clamp(46px, 6vw, 72px) 26px;
  border-top: 1px solid var(--line);
  background: var(--tint);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.8fr));
  gap: clamp(24px, 4vw, 48px);
}

.site-footer img {
  width: 132px;
}

.site-footer .about {
  max-width: 40ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
}

/* Alamat lengkap di footer. Bukan hiasan: penyedia pembayaran memeriksa
   keberadaannya saat meninjau merchant, dan pembeli memakainya untuk
   memastikan yang mereka bayar itu usaha yang benar-benar ada. Karena itu
   dipasang di setiap halaman, bukan cuma di halaman Kontak. */
.footer-alamat {
  max-width: 40ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.7;
}

.footer-alamat a {
  color: var(--blue-deep);
  font-weight: 600;
}

.footer-alamat a:hover {
  text-decoration: underline;
}

.footer-col h4 {
  margin-bottom: 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  padding: 5px 0;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
}

.footer-col a:hover {
  color: var(--blue-deep);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

/* ------------------------------------------------------------ Subhalaman */

.subhero {
  padding-block: clamp(48px, 6vw, 88px) clamp(30px, 4vw, 48px);
  background-image:
    radial-gradient(64% 50% at 6% 0%, rgba(11, 95, 255, 0.1), transparent 62%),
    radial-gradient(46% 44% at 100% 0%, rgba(224, 161, 6, 0.12), transparent 60%);
}

.subhero h1 {
  max-width: 20ch;
}

.subhero .lead {
  margin-top: 22px;
}

.subhero .btn {
  margin-top: 26px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Pita gratis di atas daftar paket.

   Sengaja BUKAN kartu kelima di dalam grid. Kartu kelima membuat pembaca
   membandingkan "gratis 3 hari" dengan "Rp999.000 Kartap" seolah keduanya
   pilihan setara, padahal yang gratis bukan paket yang dipilih — itu keadaan
   awal semua orang sebelum membayar. Lima kartu juga pecah jadi 3+2 di layar
   sedang, dan barisan yang timpang terbaca seperti ada yang tertinggal. */
.kartu-lebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: 18px;
  padding: 26px 28px;
  border: 1px solid rgba(11, 95, 255, 0.28);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #f3f8ff, #fff 60%);
}

.kartu-lebar h3 {
  margin: 12px 0 10px;
  font-size: 21px;
}

.kartu-lebar p {
  max-width: 62ch;
  margin: 0;
}

.kartu-lebar .ket-lebar {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.kartu-lebar .btn {
  white-space: nowrap;
}

/* Angka pembuka Enterprise, dipisahkan dari paragrafnya supaya sebobot harga
   di kartu-kartu lain — pita selebar ini gampang menenggelamkan harga kalau
   ditulis menyatu dengan kalimat.

   Dibungkus flex meski isinya satu, karena harga Enterprise memang bisa
   bertambah bagian saat dirundingkan. */
.harga-enterprise {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  margin: 14px 0 12px;
}

.harga-enterprise p {
  margin: 0;
}

.harga-enterprise b {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.harga-enterprise span {
  color: var(--muted);
  font-size: 13px;
}

/* Tabel data di halaman kebijakan privasi.

   Dibungkus .tabel-bungkus yang menggeser dirinya sendiri, bukan badan
   halaman. Halaman ini banyak dibuka dari ponsel — kalau badan halaman ikut
   bergeser, header dan menu lari ke kiri dan halamannya terasa rusak. */
.tabel-bungkus {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

.tabel-data {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
}

.tabel-data th,
.tabel-data td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
}

.tabel-data th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tabel-data tbody tr + tr td {
  border-top: 1px solid var(--line-soft);
}

.tabel-data td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .tabel-data td:first-child {
    white-space: normal;
  }
}

.card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

.card h2,
.card h3 {
  font-size: 22px;
}

.card p {
  color: var(--muted);
  font-size: 15.5px;
}

.card ul {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 15px;
}

.faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--blue);
  font-family: var(--mono);
  font-size: 20px;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 15.5px;
}

/* ---------------------------------------------------------------- Motion */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------ Responsif */

@media (max-width: 1080px) {
  .pillars,
  .values,
  .grid--3,
  .grid--4,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .values div:nth-child(2) {
    border-right: 0;
  }

  .values div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .hero-top,
  .academy,
  .proof,
  .manifesto,
  .contact,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .academy-head {
    position: static;
  }

  .footer-grid {
    gap: 30px;
  }

  .contact .btn {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    margin-inline: 0;
    padding: 12px var(--gut) 24px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--lift-lg);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a,
  .nav-trigger {
    justify-content: space-between;
    padding: 13px 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 17px;
  }

  .nav-trigger {
    width: 100%;
  }

  .nav-sub {
    position: static;
    width: auto;
    padding: 4px 0 12px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .header-inner > .btn {
    display: none;
  }

  .verdict {
    grid-template-columns: 1fr;
  }

  .verdict-vs span {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 640px) {
  .kartu-lebar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .kartu-lebar .btn {
    width: 100%;
    text-align: center;
  }

  body {
    font-size: 16px;
  }

  .pillars,
  .steps,
  .stats,
  .values,
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid--harga {
    grid-template-columns: 1fr;
  }

  .kartu-harga--fokus {
    margin: 0;
    padding: 16px 16px 24px;
  }

  .kartu-harga--kedua {
    margin: 0;
    padding: 15px 15px 23px;
  }

  .values div {
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .values div:last-child {
    border-bottom: 0;
  }

  .brand img {
    width: 124px;
  }

  .brand--jagoreview img {
    width: 168px;
  }

  .card-cs header {
    flex-direction: column;
  }

  .footer-base {
    flex-direction: column;
    align-items: flex-start;
  }

  /* target sentuh minimal ~42px */
  .footer-col a {
    padding: 9px 0;
  }

  .verdict-label span:last-child {
    display: none;
  }

  .checks {
    grid-template-columns: 1fr;
  }

  .bubble {
    max-width: 88%;
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* Layar 320-360px: turunkan display agar kata panjang tetap muat */
@media (max-width: 360px) {
  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 26px;
  }

  .manifesto h2 {
    font-size: 30px;
  }

  .trial h3 {
    font-size: 27px;
  }
}

/* ---------------------------------------------- Faktor penentu biaya */

.faktor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin: 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  list-style: none;
}

.faktor li {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: start;
  gap: 14px;
}

.faktor li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--gold);
}

.faktor strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.faktor span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Komponen di bawah blok responsif harus bawa media query sendiri,
   kalau tidak aturan dasarnya menimpa override yang ada di atas. */
@media (max-width: 640px) {
  .faktor {
    grid-template-columns: 1fr;
  }
}

/* Tautan harga di tiap kartu layanan */

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--blue-deep);
  font-size: 15px;
  font-weight: 700;
}

.card-link::after {
  content: "→";
  transition: transform 0.18s ease;
}

.card-link:hover {
  text-decoration: underline;
}

.card-link:hover::after {
  transform: translateX(3px);
}

/* ------------------------------------------------- Halaman panduan langkah

   Nomor langkah digambar sendiri lewat penghitung, bukan memakai angka bawaan
   <ol>. Angka bawaan tidak bisa diberi lingkaran dan warna, dan menggantinya
   dengan teks biasa berarti nomornya ikut hilang saat dibaca pembaca layar. */
.langkah-panduan {
  counter-reset: langkah;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 26px;
  max-width: 72ch;
}

.langkah-panduan > li {
  counter-increment: langkah;
  position: relative;
  padding-left: 52px;
}

.langkah-panduan > li::before {
  content: counter(langkah);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
}

.langkah-panduan h2 {
  margin: 3px 0 8px;
  font-size: 19px;
}

.langkah-panduan p {
  margin: 0 0 8px;
}

/* Penanda "sudah benar atau belum". Dibedakan warnanya supaya pembaca bisa
   memeriksa hasilnya tanpa membaca ulang seluruh langkahnya. */
.langkah-panduan .tanda {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(15, 143, 108, 0.35);
  color: var(--jade-deep);
  font-size: 14px;
}

.catatan-panduan {
  max-width: 72ch;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.antar-panduan {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------------------------------------- Gambar */

.gambar {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--lift);
}

.gambar img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dua bukti percakapan berdampingan */
.bukti-gambar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

/* Metode TCC: penjelasan teks di kiri, gambar di kanan */
.tcc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.tcc-langkah {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tcc-langkah li {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.tcc-langkah li:last-child {
  border-bottom: 0;
}

.tcc-langkah li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--gold);
}

.tcc-langkah strong {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.tcc-langkah span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .tcc,
  .bukti-gambar {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------- Halaman produk JagoReview */

/* Yang di bawah ini khusus halaman produk. Sisanya memakai kelas yang
   sudah ada di landing-mockup.css supaya halaman ini tidak jadi pulau
   sendiri yang harus dirawat terpisah. */

/* Satu kolom. Sebelumnya dua, dengan logo JagoReview di kolom kanan — tapi
   logo tidak memberi tahu apa pun yang belum dikatakan judul di sebelahnya,
   dan menaruh benda pendek di samping kolom yang panjang menyisakan ruang
   kosong besar. Kalau nanti ada tangkapan layar ekstensinya sedang bekerja,
   itu yang layak menempati kolom kedua, bukan logo. */
.produk-hero {
  max-width: 60ch;
}

/* Tanggal berlaku di halaman kebijakan. */
.berlaku {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

/* Harga: angka rupiah harus sejajar antar kartu, jadi tabular-nums. */
.harga {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.harga small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
/* Harga sebelum potongan, dan berapa persen hematnya.

   Angka coretnya harga normal yang sungguhan, bukan angka karangan supaya
   potongannya terlihat besar. Persennya dibulatkan KE BAWAH — melebihkan
   potongan itu janji yang tidak ditepati, dan yang menghitung ulang akan
   menemukannya. */
.harga-lama {
  display: flex;
  /* "Hemat Rp300.000" jauh lebih panjang daripada "Hemat 37%", dan lencananya
     nowrap. Di kolom sempit (empat kartu pada layar sedang) keduanya tidak
     muat sebaris — tanpa ini, lencananya menembus keluar kartu. */
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 3px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.harga-lama s {
  color: var(--muted);
  text-decoration-thickness: 1.5px;
}

.hemat {
  padding: 2px 8px;
  border-radius: var(--r-chip);
  color: var(--jade-deep);
  background: rgba(15, 143, 108, 0.12);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------------------------------------------------- Kartu harga paket

   Bagian harga sengaja gelap sendirian di halaman yang terang. Ini bagian
   tempat orang memutuskan mengeluarkan uang; memisahkannya dari warna
   sekitarnya membuatnya berhenti terbaca sebagai lanjutan bacaan.

   Seluruh warna di sini dihitung ulang, bukan dipakai ulang dari palet
   terang. --blue hanya 2.44:1 di atas latar ini dan --jade 3.63:1 — keduanya
   jatuh di bawah ambang begitu dipindah ke gelap. */
.harga-gelap {
  color: #fff;
  background: var(--ink);
}

.harga-gelap .eyebrow {
  color: #7aa2ff;
}

.harga-gelap .section-head {
  max-width: min(62ch, 100%);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.harga-gelap .lead {
  color: #98a6b6;
}

.kartu-harga {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  background: #101f33;
}

/* Panel dalam memisahkan penawaran dari daftar isinya. Harga dan tombol
   duduk di bidangnya sendiri; yang di bawah panel adalah rinciannya. */
.kh-panel {
  position: relative;
  display: flex;
  /* Panel meregang mengisi sisa kartu supaya tombol keempat kartu sejajar.
     Tanpa ini, kartu yang deskripsinya dua baris mendorong tombolnya turun
     21px sendirian — dan barisan tombol yang naik-turun terbaca seperti ada
     kartu yang isinya kurang, padahal cuma kalimatnya lebih panjang. */
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 22px 15px;
  /* Wadah ukur untuk harga di dalamnya: besar angkanya mengikuti lebar
     panel ini, bukan lebar layar. Itu yang membuat "Rp999.000 /3 bulan"
     tetap satu baris di kolom sempit tanpa harus menebak ukurannya. */
  container-type: inline-size;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--r-md);
  background: #16293f;
}

.kartu-harga--sorot {
  border-color: rgba(122, 162, 255, 0.35);
}

.kartu-harga--sorot .kh-panel {
  background: #1e3550;
  border-color: rgba(122, 162, 255, 0.28);
}

/* Lencana berdiri di barisnya sendiri di atas nama paket, BUKAN mengambang
   di pojok kanan atas. Yang mengambang menimpa nama paketnya sendiri begitu
   tulisannya lebih panjang dari "Hemat terbesar" — dan nama paket yang
   tertutup membuat kartunya tidak bisa disebut orang saat bertanya. */
.kh-lencana {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 4px 10px;
  border-radius: var(--r-chip);
  color: var(--ink);
  background: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kh-nama {
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kh-lama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0 0;
  font-size: 13px;
}

.kh-lama s {
  color: #8e9dae;
  text-decoration-thickness: 1.5px;
}

.harga-gelap .hemat {
  padding: 2px 8px;
  border-radius: var(--r-chip);
  color: #16d09d;
  background: rgba(22, 208, 157, 0.12);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Angka dan labelnya SELALU satu baris, di semua kartu. Label yang jatuh ke
   baris bawah terbaca seperti keterangan lepas, bukan bagian dari harganya —
   dan pembaca yang cuma melihat sekilas jadi tidak tahu Rp999.000 itu untuk
   sebulan atau untuk tiga bulan.
   Ukurannya diturunkan dari 30px supaya "Rp999.000 /3 bulan" muat di kolom
   yang paling sempit. Kartu yang disorot punya ukurannya sendiri di bawah. */
.kh-angka {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  color: #fff;
  font-family: var(--display);
  /* Sebesar mungkin sampai 26px, tapi menyusut sendiri kalau kolomnya
     sempit. 13cqi kira-kira lebar yang dibutuhkan "Rp999.000 /3 bulan". */
  font-size: clamp(15px, 11.4cqi, 26px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kh-per {
  color: #98a6b6;
  font-family: var(--body);
  font-size: 11.5px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0;
}

.kh-tiga {
  margin: 0;
  color: #98a6b6;
  font-size: 13px;
}

/* Harga tiga bulan sebelum potongan. Dibuat lebih redup daripada angka yang
   benar-benar dibayar — coretan saja tidak cukup di ukuran sekecil ini, dan
   dua angka sederajat berdampingan membuat pembaca ragu mana yang berlaku.

   Ini nada paling redup yang masih lolos 4.5:1 di kedua panel. Harga coret
   tetap dibaca orang untuk dibandingkan; meredupkannya lebih jauh menghemat
   sedikit penekanan dengan ongkos keterbacaan. */
.kh-tiga s {
  margin-right: 3px;
  color: #8e9daf;
  text-decoration-thickness: 1.5px;
}


/* Harga tiga bulan ditulis sebesar harga bulanan, bukan dikecilkan jadi satu
   baris keterangan. Dua angka sederajat memang berisiko membuat pembaca ragu
   mana yang berlaku — yang menjawabnya label "/bulan" dan "/3 bulan" di
   sebelah masing-masing, bukan ukuran hurufnya. Angka yang dikecilkan hampir
   tidak pernah dibaca, dan justru paket 3 bulan inilah yang ingin dijual. */
.kh-angka--tiga {
  margin-top: 4px;
}

/* Penawaran 3 bulan dikotaki sendiri: chip, angka, dan keterangan hematnya
   jadi satu blok yang terbaca sekali lihat sebagai "yang ini yang dianjurkan",
   bukan tiga baris lepas yang kebetulan berurutan. */
.kh-kotak-tiga {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  padding: 12px 14px 13px;
  border: 1px solid rgba(122, 162, 255, 0.45);
  border-radius: var(--r-md, 14px);
  background: rgba(122, 162, 255, 0.08);
}

.kh-kotak-tiga .kh-angka--tiga {
  margin-top: 0;
}

/* Chip "Rekomendasi" berdiri di atas angkanya, seperti judul kecil untuk
   penawaran di bawahnya. Di dalam baris angka ia ikut menambah lebar yang
   harus dimuat satu baris; di atasnya, ia tidak menekan apa pun. */
.kh-rekom {
  align-self: flex-start;
  margin: 6px 0 -4px;
  padding: 3px 9px;
  border-radius: var(--r-chip);
  background: rgba(122, 162, 255, 0.22);
  color: #cfe0ff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Kolom kartu yang ingin dijual lebih dulu dibuat lebih lebar lewat GRID,
   bukan lewat margin negatif. Margin negatif membuat kartunya menumpuk di
   atas tetangganya; melebarkan kolomnya memberi ruang yang benar-benar ada,
   dan itulah yang membuat "Rp199.000 /bulan" muat dalam satu baris. */
/* Tiga tingkat, sengaja: Intern paling lebar, Magang di tengah, UMKM dan
   Kartap paling ramping. Urutan lebar inilah yang membaca sendiri sebagai
   urutan anjuran, sebelum satu kata pun dibaca. */
/* Rata atas-bawah, BUKAN rata tengah. Rata tengah membuat keempat kartu
   mulai dan berakhir di ketinggian yang berbeda-beda, dan barisan yang
   bertangga terbaca sebagai berantakan, bukan sebagai urutan anjuran. */
.grid--harga {
  /* minmax(0, …), bukan sekadar fr. Kolom fr biasa tidak boleh menyempit
     di bawah lebar isi terlebarnya, dan karena baris harga dibuat tidak
     boleh patah, keempat kolomnya melar sampai barisannya menjorok keluar
     dari lebar halaman — persis 99px ke kanan sebelum ini diperbaiki. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.34fr) minmax(0, 1.17fr) minmax(0, 1fr);
  align-items: stretch;
}

/* Kartu yang ingin dijual lebih dulu: lebih besar dari tetangganya, dengan
   bayangan supaya terbaca sebagai yang paling depan.

   Dibesarkan lewat ukuran sungguhan, BUKAN transform: scale. scale ikut
   membesarkan hurufnya sehingga ukurannya tidak lagi sama dengan kartu lain,
   dan teks yang diperbesar melalui transform terlihat kabur di layar biasa. */
.kartu-harga--fokus {
  position: relative;
  z-index: 1;
  /* Meregang setinggi baris, lalu ditambah 18px ke atas dan ke bawah lewat
     margin negatif. Hasilnya kartu ini selalu lebih tinggi daripada kartu
     tertinggi di sebelahnya, berapa pun panjang tulisan di kartu itu —
     tidak perlu tinggi tetap yang harus disetel ulang tiap kali kalimatnya
     berubah. */
  /* Naik ke ATAS saja: dasarnya tetap sejajar dengan kartu lain. Kalau
     menjorok ke atas DAN ke bawah, tepi bawah barisan jadi bertangga tiga
     tingkat — dan tepi bawah yang tidak rata itulah yang paling terbaca
     sebagai berantakan. */
  align-self: stretch;
  margin: -26px 0 0;
  padding: 26px 22px 30px;
  border-color: rgba(122, 162, 255, 0.55);
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.75);
}

/* Kartu anjuran kedua: lebih besar dari UMKM dan Kartap, tapi tetap di bawah
   Intern. Beda tingkatnya dibuat terlihat dari ukuran DAN warna lencananya,
   bukan cuma satu di antaranya — pembaca yang buta warna tetap melihat
   urutannya dari ukuran kartunya. */
/* Bedanya dengan UMKM dan Kartap harus terlihat tanpa membandingkan
   berdampingan, jadi tingginya ikut ditambah — 9px ke atas dan ke bawah,
   separuh dari tambahan kartu Intern. Lebar kolom saja terlalu halus untuk
   terbaca sebagai tingkatan. */
.kartu-harga--kedua {
  align-self: stretch;
  margin: -13px 0 0;
  padding: 20px 18px 26px;
  border-color: rgba(22, 208, 157, 0.32);
}

.kartu-harga--kedua .kh-angka {
  font-size: clamp(16px, 12.4cqi, 30px);
}

.kartu-harga--kedua .kh-per {
  font-size: 13.5px;
}

/* Hijau yang sama dengan chip "Hemat" di panel gelap ini, yang sudah
   diperiksa kontrasnya. */
.kh-lencana--hijau {
  color: #052e23;
  background: #16d09d;
}

/* Hitam beremas untuk Kartap. Emas penuh (#e0a106) di atas hitam pekat
   terbaca 7,6:1 — jauh di atas ambang, dan itu yang membuatnya tetap jelas
   di ukuran sekecil lencana. Garis tipis emas memberi bentuk pada kotak
   hitamnya, yang kalau polos hampir lenyap di panel yang juga gelap. */
.kh-lencana--emas {
  border: 1px solid rgba(224, 161, 6, 0.55);
  color: var(--gold);
  background: #07101d;
}

/* Kartu fokus tidak punya baris penjelasan. Jarak sebelum tombolnya dijaga
   di sini, tanpa garis: tombol putih selebar panel yang diberi garis atas
   terbaca seperti palang, bukan tombol. */
.kartu-harga--fokus .kh-tiga {
  margin-bottom: 4px;
}

/* Angkanya ikut lebih besar, dan label "/bulan" tetap di baris yang sama
   dengan angkanya. Kolomnya memang dibuat cukup lebar untuk itu. */
.kartu-harga--fokus .kh-angka {
  font-size: clamp(18px, 13.2cqi, 36px);
}

.kartu-harga--fokus .kh-per {
  font-size: 14px;
  white-space: nowrap;
}

.kartu-harga--fokus .kh-nama {
  font-size: 13px;
}

.kartu-harga--fokus .kh-tombol {
  padding: 15px 18px;
  font-size: 15px;
}

/* Garis pemisah antara penawaran dan penjelasannya dipasang di sini, bukan
   di .kh-tiga. Paket yang tidak dijual per 3 bulan tidak punya .kh-tiga sama
   sekali; kalau garisnya menempel di situ, kartu itu kehilangan pemisahnya
   sendirian dan terlihat seperti belum selesai. */
.kh-untuk {
  margin: 10px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #98a6b6;
  font-size: 14px;
  line-height: 1.5;
}

/* Tombol digariskan, bukan diisi biru. Biru --blue cuma 2.44:1 di atas latar
   ini, jadi tombolnya sendiri nyaris tak terpisah dari kartunya. */
.kh-tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 13px 18px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--r-chip);
  color: #fff;
  background: transparent;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.kh-tombol:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.kartu-harga--sorot .kh-tombol {
  border-color: #fff;
  color: var(--ink);
  background: #fff;
}

.kartu-harga--sorot .kh-tombol:hover {
  background: #e8eef8;
}

.kh-fitur {
  margin: 0;
  padding: 0 6px;
  list-style: none;
  display: grid;
  gap: 11px;
}

.kh-fitur li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: #d6dee8;
  font-size: 14px;
  line-height: 1.45;
}

.kh-fitur li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  color: var(--ink);
  background: #16d09d;
  font-size: 11px;
  font-weight: 700;
}

/* Pita Enterprise ikut dipindah ke gelap. Latar terangnya yang lama akan
   tampak seperti lempeng putih di tengah bagian ini. */
.harga-gelap .kartu-lebar {
  border-color: rgba(255, 255, 255, 0.1);
  background: #101f33;
}

.harga-gelap .kartu-lebar h3 {
  color: #fff;
}

.harga-gelap .kartu-lebar p {
  color: #98a6b6;
}

.harga-gelap .kartu-lebar .ket-lebar {
  color: #8e9dae;
}

.harga-gelap .kartu-lebar b {
  color: #fff;
}

.harga-gelap .pillar-tag {
  color: #7aa2ff;
  background: rgba(122, 162, 255, 0.14);
}

.harga-gelap .harga-enterprise b {
  color: #fff;
}

.harga-gelap .harga-enterprise span {
  color: #98a6b6;
}

/* Tombol pita memakai gaya bergaris yang sama dengan kartu, tapi tidak
   selebar penuh — di pita selebar ini tombol penuh akan terbaca seperti
   pembatas, bukan ajakan. */
.harga-gelap .kartu-lebar .btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.harga-gelap .kartu-lebar .btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.kuota {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
/* Dua lencana berdampingan di satu kartu. Tanpa pembungkus ini keduanya jadi
   dua baris grid terpisah, karena .card memang grid satu kolom. */
.tag-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Penanda layanan yang belum bisa dipakai. Warnanya sengaja beda dari lencana
   kategori supaya tidak terbaca sebagai kategori kelima. */
.pillar-tag--segera {
  color: var(--gold-deep);
  background: rgba(224, 161, 6, 0.14);
}

/* Status ketersediaan layanan, dipasang di pojok kanan atas kartu — terpisah dari
   lencana kategori di kiri supaya "apa layanannya" dan "sudah bisa dipakai atau
   belum" terbaca sebagai dua hal berbeda. */
.card {
  position: relative;
}

.status-tag {
  position: absolute;
  top: 22px;
  right: 22px;
}

.pillar-tag--tersedia {
  color: #0f7a3d;
  background: rgba(22, 163, 74, 0.12);
}

.card--sorot {
  border-color: rgba(11, 95, 255, 0.45);
  box-shadow: var(--lift);
}

/* Langkah dinomori karena memang urutan yang harus dijalani, bukan
   hiasan: kode tidak berguna sebelum ekstensinya terpasang. */
.langkah {
  counter-reset: langkah;
  list-style: none;
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.langkah li {
  counter-increment: langkah;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.langkah li::before {
  content: counter(langkah);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-chip);
  background: rgba(11, 95, 255, 0.1);
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
}
.langkah b {
  display: block;
  margin-bottom: 2px;
}
.langkah span {
  color: var(--muted);
}

.jujur li {
  margin-bottom: 8px;
}

@media (max-width: 860px) {
}

/* ------------------------------------------------- CTA melayang (mobile) */

.cta-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: var(--r-chip);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 10px 30px -8px rgba(11, 95, 255, 0.75);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.cta-float svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.cta-float:active {
  transform: translateY(1px);
}

/* Baru muncul setelah hero lewat, supaya tidak menabrak CTA di hero */
.cta-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 900px) {
  .cta-float {
    display: inline-flex;
  }

  body {
    padding-bottom: 84px;
  }
}