/* Ponjen — sistem visual situs publik.
   Token di bawah disalin persis dari mobile-apps/src/theme/colors.ts dan
   spacing.ts supaya situs dan aplikasi tidak pernah terlihat seperti dua
   produk berbeda. Kalau tema aplikasi berubah, ubah di sini juga.

   Sengaja tanpa build step, tanpa CDN, tanpa font eksternal: halaman ini
   harus tetap terbuka di perangkat lambat dan koneksi buruk, dan salah satu
   di antaranya (hapus-akun) diverifikasi Google Play. */

:root {
  /* colors.ts */
  --primary: #098FD9;
  --primary-dark: #066BA2;
  --secondary: #1F2937;
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #DC2626;
  --background: #F8FAFC;
  --white: #FFFFFF;
  --border: #E5E7EB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;

  /* Latar layar auth aplikasi (LoginScreen/OtpScreen) */
  --tint: #EAF6FD;
  --tint-strong: rgba(9, 143, 217, 0.12);
  --tint-soft: rgba(9, 143, 217, 0.08);

  /* spacing.ts */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 32px;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Bayangan Card.tsx: shadowColor #0F172A, opacity .06, radius 10, offset y 4 */
  --shadow-card: 0 4px 10px rgba(15, 23, 42, 0.06);
  --shadow-lift: 0 10px 30px rgba(15, 23, 42, 0.1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-xl); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-xl); }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  min-height: 68px;
}

.logo img { height: 26px; width: auto; }
.logo:hover { text-decoration: none; }

.site-nav { display: flex; align-items: center; gap: var(--sp-xl); }
.site-nav a {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}
.site-nav a:hover { color: var(--text-primary); text-decoration: none; }
.site-nav a.current { color: var(--primary); }

@media (max-width: 720px) {
  .site-nav { gap: var(--sp-lg); }
  .site-nav a { font-size: 13px; }
  .site-nav .hide-sm { display: none; }
}

/* ------------------------------------------------------------------ hero */

/* Lingkaran dekoratif meniru decorTop/decorBottom di LoginScreen.tsx —
   posisinya absolut, di luar alur, dan tidak boleh menangkap pointer. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--tint);
  border-bottom: 1px solid var(--border);
  padding: 72px 0 80px;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  top: -160px; right: -120px;
  width: 420px; height: 420px;
  background: var(--tint-strong);
}
.hero::after {
  bottom: -200px; left: -140px;
  width: 460px; height: 460px;
  background: var(--tint-soft);
}

.hero .wrap { position: relative; z-index: 1; }

/* Carousel hero — dua slide (ringkasan produk, lalu banner promo),
   bergantian sendiri. Track flex + translateX, bukan absolute/opacity:
   dengan ini tinggi container otomatis ikut slide TERTINGGI (perilaku default
   flex row, align-items: stretch), jadi tidak perlu JS mengukur tinggi
   manual atau container "melompat" tiap ganti slide. */
.hero-carousel { overflow: hidden; }
.hero-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}
.hero-slide > * { width: 100%; }

.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.hero-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.hero-dot.is-active { width: 24px; border-radius: 4px; background: var(--primary); }
.hero-dot:hover { background: var(--primary-dark); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero { padding: 48px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { justify-self: center; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-lg);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
}

h1 {
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 var(--sp-lg);
  color: var(--text-primary);
}

@media (max-width: 720px) { h1 { font-size: 30px; } }

.hero p.lead {
  font-size: 17px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-xl);
  max-width: 46ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); }

/* --------------------------------------------------------------- buttons */

/* Buttons.tsx: radius md, padding vertikal md, teks 15/700 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  border-radius: var(--r-md);
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); color: var(--white); }

.btn-secondary {
  background: var(--white);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--background); color: var(--text-primary); }

.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover { background: #b91c1c; color: var(--white); }

/* --------------------------------------------------- mockup layar aplikasi */

/* Rangka ponsel dibuat dengan CSS, bukan gambar: tidak ada aset yang basi
   ketika UI aplikasi berubah, dan bobotnya nol. */
.phone {
  width: 300px;
  border-radius: 38px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  padding: 12px;
}
.phone-screen {
  border-radius: 28px;
  background: var(--background);
  overflow: hidden;
}
.phone-topbar {
  background: var(--primary);
  color: var(--white);
  padding: 18px var(--sp-lg) var(--sp-xl);
}
.phone-topbar .greet { font-size: 11px; opacity: 0.85; }
.phone-topbar .name { font-size: 15px; font-weight: 700; }

.phone-body { padding: 0 var(--sp-md) var(--sp-lg); margin-top: -18px; }

.mini-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-md);
}
.mini-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.mini-amount { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.mini-meter { height: 6px; border-radius: var(--r-full); background: var(--border); margin-top: var(--sp-md); overflow: hidden; }
.mini-meter span { display: block; height: 100%; width: 62%; background: var(--primary); border-radius: var(--r-full); }
.mini-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.mini-row + .mini-row { margin-top: var(--sp-sm); }
.mini-row .k { color: var(--text-secondary); }
.mini-row .v { font-weight: 700; }
.mini-btn {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--r-md);
  text-align: center;
  padding: 11px;
  font-size: 13px;
  font-weight: 700;
}
.pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}

/* -------------------------------------------------------------- sections */

section { padding: 72px 0; }
section.tight { padding: 56px 0; }
section.alt { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { max-width: 60ch; margin-bottom: var(--sp-xxl); }
.section-head h2 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 var(--sp-sm);
}
.section-head p { color: var(--text-secondary); margin: 0; font-size: 16px; }

/* ------------------------------------------------------------------ card */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl); }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; gap: var(--sp-lg); } }

.card h3 { font-size: 17px; font-weight: 700; margin: 0 0 var(--sp-sm); letter-spacing: -0.01em; }
.card p { color: var(--text-secondary); margin: 0; font-size: 15px; }

/* Bungkus ikon meniru iconWrap/iconWrapInner di OtpScreen.tsx:
   lingkaran bertint di luar, kotak putih dengan bayangan di dalam. */
.icon-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tint-strong);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-lg);
}
.icon-wrap .inner {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(6, 107, 162, 0.15);
}

/* ----------------------------------------------------------------- steps */

.steps { counter-reset: step; display: grid; gap: var(--sp-lg); }
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-lg);
  align-items: start;
}
.step .num {
  counter-increment: step;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--primary);
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
}
.step .num::before { content: counter(step); }
.step h3 { margin: 6px 0 2px; font-size: 16px; font-weight: 700; }
.step p { margin: 0; color: var(--text-secondary); font-size: 15px; }

/* -------------------------------------------------------------- callouts */

.callout {
  border-left: 3px solid var(--primary);
  background: var(--white);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-lg) var(--sp-xl);
  box-shadow: var(--shadow-card);
}
.callout p { margin: 0; color: var(--text-secondary); font-size: 15px; }
.callout strong { color: var(--text-primary); }
.callout.warn { border-left-color: var(--danger); }
.callout.warn strong { color: var(--danger); }

/* ------------------------------------------------------- halaman dokumen */

.doc-hero {
  position: relative;
  overflow: hidden;
  background: var(--tint);
  border-bottom: 1px solid var(--border);
  padding: 56px 0 44px;
}
.doc-hero::before {
  content: "";
  position: absolute;
  top: -180px; right: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--tint-strong);
  pointer-events: none;
}
.doc-hero .wrap-narrow { position: relative; z-index: 1; }
.doc-hero h1 { font-size: 34px; margin-bottom: var(--sp-sm); }
.doc-hero p { color: var(--text-secondary); margin: 0; font-size: 16px; }
.doc-hero .updated {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--sp-md);
}
@media (max-width: 720px) { .doc-hero h1 { font-size: 26px; } }

.doc { padding: 48px 0 72px; }
.doc h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--sp-xxl) 0 var(--sp-md);
  padding-top: var(--sp-sm);
}
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--text-secondary); font-size: 15.5px; }
.doc p { margin: 0 0 var(--sp-md); }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 var(--sp-md); }
.doc li { margin-bottom: var(--sp-sm); }
.doc strong { color: var(--text-primary); }
.doc .card { margin: var(--sp-xl) 0; }
.doc .card h2 { margin-top: 0; padding-top: 0; }
.doc .callout { margin: var(--sp-xl) 0; }

.doc ol.steps-doc { counter-reset: none; padding-left: 22px; }
.doc ol.steps-doc > li { color: var(--text-primary); font-weight: 600; margin-bottom: var(--sp-md); }
.doc ol.steps-doc > li span { display: block; font-weight: 400; color: var(--text-secondary); }

.list-check, .list-keep { list-style: none; padding: 0; margin: 0; }
.list-check li, .list-keep li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--sp-sm);
  color: var(--text-primary);
  font-size: 15px;
}
.list-check li::before,
.list-keep li::before {
  content: "";
  position: absolute;
  left: 6px; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.list-check li::before { background: var(--danger); }
.list-keep li::before { background: var(--text-muted); }

.footnote { font-size: 13px; color: var(--text-muted); margin: var(--sp-md) 0 0; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--secondary);
  color: #D1D5DB;
  padding: 48px 0 40px;
}
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-xxl); }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr; gap: var(--sp-xl); } }

/* Wordmark-nya berteks navy gelap, jadi di latar footer yang juga gelap ia
   praktis tidak terbaca. Difilter jadi putih solid daripada menambah satu
   berkas logo lagi yang harus ikut diperbarui setiap kali brand berubah. */
.site-footer img {
  height: 24px;
  width: auto;
  margin-bottom: var(--sp-md);
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.site-footer p { font-size: 14px; color: #9CA3AF; margin: 0 0 var(--sp-sm); max-width: 42ch; }
.site-footer h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  margin: 0 0 var(--sp-md);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-sm); }
.site-footer a { color: #D1D5DB; font-size: 14px; }
.site-footer a:hover { color: var(--white); }

.footer-legal {
  border-top: 1px solid #374151;
  margin-top: var(--sp-xxl);
  padding-top: var(--sp-lg);
  font-size: 13px;
  color: #9CA3AF;
}

/* Daftar tanpa bullet default di dalam card — dipakai di blok "Yang perlu
   Anda siapkan" pada beranda. Titik dibuat manual agar warnanya ikut token. */
.list-plain { list-style: none; padding: 0; margin: 0 0 var(--sp-md); }
.list-plain li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--sp-sm);
  color: var(--text-secondary);
  font-size: 15px;
}
.list-plain li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.card .footnote { margin-top: var(--sp-md); }

/* ---------------------------------------------- tambahan positioning baru */

/* Chip kategori di hero — BBM / oli / servis. */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-xl); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}
.chip svg { flex: none; }

/* Blok penegasan "Bukan Pinjaman Tunai" — sengaja diberi bobot visual
   paling besar setelah hero. Ini bukan sekadar pemasaran: pembatasan
   penggunaan limit adalah inti produknya, dan reviewer store membacanya. */
.emphasis {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xxl);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-xl);
  align-items: start;
}
@media (max-width: 720px) {
  .emphasis { grid-template-columns: 1fr; gap: var(--sp-lg); padding: var(--sp-xl); }
}
.emphasis h2 { font-size: 24px; margin: 0 0 var(--sp-md); letter-spacing: -0.02em; }
.emphasis p { color: var(--text-secondary); margin: 0 0 var(--sp-md); font-size: 15.5px; }
.emphasis p:last-child { margin-bottom: 0; }

/* Banner promo — slide kedua carousel hero. Headline, CTA, dan QR sudah
   "dipanggang" ke dalam gambarnya sendiri (gaya foto, bukan ilustrasi flat
   seperti sisa situs). Dibingkai sebagai KARTU (padding + border + shadow,
   sama seperti .card di tempat lain) alih-alih ditempel mentah edge-to-edge
   — foto landscape apa adanya, tanpa bingkai, terbaca gepeng dan seperti
   iklan banner generik; bingkai kartu ini yang membuatnya terasa dirancang,
   bukan ditempel. Tidak di-crop (object-fit) karena kontennya sendiri
   (headline di kiri, QR di kanan) akan terpotong kalau rasio-nya dipaksa
   lebih tinggi. Lebar mengikuti slide (sama seperti .hero-grid di
   sebelahnya), bukan dibatasi sendiri, supaya kedua slide terasa setara.
   Seluruh kartu jadi satu tautan (href-nya diperiksa manual ke
   app.ponjens.com, bukan disimpulkan dari teks di dalam gambar — QR di
   gambar masih menunjuk domain dev). */
.promo-banner {
  display: block;
  width: 100%;
  padding: var(--sp-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.promo-banner:hover { box-shadow: var(--shadow-lift); }
.promo-banner:active { transform: scale(0.995); }
.promo-banner picture { display: block; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; }
.promo-banner img { width: 100%; height: auto; }
@media (max-width: 720px) {
  .promo-banner { padding: var(--sp-sm); }
}

/* Kartu untuk dua audiens non-konsumen: merchant dan mitra pembiayaan. */
.audience { background: var(--tint); border-color: transparent; }
.audience .kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--sp-sm);
}
.audience h3 { font-size: 19px; margin-bottom: var(--sp-md); }
.audience p + p { margin-top: var(--sp-md); }

/* Pita penutup sebelum footer. */
.band {
  background: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 64px 0;
}
.band h2 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 var(--sp-md); font-weight: 800; }
.band p { color: rgba(255, 255, 255, 0.9); margin: 0; font-size: 17px; }
.band p + p { margin-top: var(--sp-xs); }
@media (max-width: 720px) { .band h2 { font-size: 24px; } .band p { font-size: 15px; } }

/* Blok "Informasi Penting" — disclaimer, jadi dibuat terbaca tapi jelas
   sekunder terhadap konten di atasnya. */
.notice {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-xl);
}
.notice h2 { font-size: 16px; font-weight: 700; margin: 0 0 var(--sp-md); }
.notice p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--sp-sm); }
.notice p:last-child { margin-bottom: 0; }

/* Grid 6 alasan — dua baris tiga kolom di desktop. */
.reason h3 { font-size: 15px; margin-bottom: 6px; }
.reason p { font-size: 14px; }

/* Grid 4 kolom — kartu layanan (BBM/Oli/Servis/Ban & Suku Cadang). Kolom
   sendiri, bukan grid-3, supaya 4 kartu tidak menyisakan satu kartu
   nyempil sendirian di baris kedua grid 3 kolom. */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }

/* Label kecil di atas judul section untuk audiens non-konsumen (Member/
   Merchant/Mitra Pembiayaan) — eyebrow tanpa dot status (dot-nya berarti
   "aktif sekarang", tidak relevan di sini). */
.eyebrow.plain { color: var(--primary-dark); }

/* Baris kategori merchant ("SPBU • Bengkel • ...") — bukan daftar kartu,
   cukup satu baris penegasan supaya tidak makan tempat di section yang
   sudah punya grid kartu keuntungan di bawahnya. */
.tag-line {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--tint);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  margin: 0 0 var(--sp-xl);
}

/* Alur ekosistem di section Visi (Masyarakat → Kendaraan → ... → Teknologi). */
.flow-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-sm);
  margin: var(--sp-xl) 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--primary-dark);
}
.flow-row .arrow { color: var(--text-muted); font-weight: 400; }

/* Kalimat penutup section "Cara Kerja" — strip kecil terpusat, bukan kartu,
   supaya tidak bersaing dengan enam langkah di atasnya. */
.mini-tagline {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-top: var(--sp-xxl);
}

/* CTA di dalam kartu audiens (Member/Merchant/Mitra Pembiayaan). */
.audience .btn, .cta-row { margin-top: var(--sp-lg); }

/* FAQ — <details>/<summary> native, bukan JS: situs ini sengaja tanpa
   dependency/build step (lihat README), dan accordion adalah kandidat
   sempurna untuk elemen native yang sudah bisa expand/collapse sendiri. */
.faq { display: grid; gap: var(--sp-md); }
.faq details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-lg) var(--sp-xl);
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: var(--sp-md) 0 0; color: var(--text-secondary); font-size: 15px; }