/* Brighten English — gaya dasar. Sengaja satu berkas tanpa framework:
   situs cadangan tidak boleh bergantung pada CDN yang bisa mati. */

:root {
  --ungu: #6d28d9;
  --ungu-gelap: #5b21b6;
  --ungu-muda: #f5f3ff;
  --teks: #1f2430;
  --teks-lembut: #5b6478;
  --garis: #e5e7eb;
  --latar: #ffffff;
  --latar-lembut: #f9fafb;
  --hijau: #067647;
  --hijau-muda: #ecfdf3;
  --merah: #b42318;
  --merah-muda: #fef3f2;
  --kuning: #b54708;
  --kuning-muda: #fffaeb;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--teks);
  background: var(--latar);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* Jarak tepi dibuat variabel supaya bisa dilonggarkan di layar sempit.
   Di ponsel 20px terasa mepet ke bibir layar; 28px jauh lebih lega. */
:root { --tepi: 1.25rem; }
@media (max-width: 640px) { :root { --tepi: 2.25rem; } }
.wrap { width: min(1080px, 100% - (var(--tepi) * 2)); margin-inline: auto; }

a { color: var(--ungu); }

/* --- Bar atas ------------------------------------------------------------ */
.bar { border-bottom: 1px solid var(--garis); background: var(--latar); }
.bar-isi { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.logo { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--teks); }
.logo span { color: var(--ungu); }
.bar nav { display: flex; gap: 1.25rem; }
.bar nav a { text-decoration: none; color: var(--teks-lembut); font-size: .95rem; }
.bar nav a:hover { color: var(--ungu); }

/* --- Blok umum ----------------------------------------------------------- */
.blok { padding: 3rem 0; }
.blok-lembut { background: var(--latar-lembut); }

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; margin: 0 0 .75rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 1rem; }
h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

.lembut { color: var(--teks-lembut); }

/* --- Tombol -------------------------------------------------------------- */
.tombol {
  display: inline-block; padding: .8rem 1.5rem; border-radius: var(--radius);
  background: var(--ungu); color: #fff; border: 0; font-size: 1rem;
  font-weight: 600; cursor: pointer; text-decoration: none; text-align: center;
}
.tombol:hover { background: var(--ungu-gelap); }
.tombol:disabled { opacity: .5; cursor: not-allowed; }
.tombol-penuh { width: 100%; }
.tombol-garis { background: transparent; color: var(--ungu); border: 1px solid var(--ungu); }

/* --- Kartu --------------------------------------------------------------- */
.kartu {
  border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 1.5rem; background: var(--latar);
}
.kisi { display: grid; gap: 1.25rem; }
/* 3 kolom baru dipakai di >=900px: di bawah itu kartu paket jadi terlalu
   sempit dan tiap butir isinya terlipat 2-3 baris. */
@media (min-width: 900px) { .kisi-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .kisi-2 { grid-template-columns: repeat(2, 1fr); } }

/* --- Paket / produk ------------------------------------------------------ */
.paket { display: block; cursor: pointer; position: relative; }
.paket input { position: absolute; opacity: 0; }
.paket-isi {
  border: 2px solid var(--garis); border-radius: var(--radius);
  padding: 1.25rem; height: 100%; transition: border-color .15s, background .15s;
}
.paket input:checked + .paket-isi { border-color: var(--ungu); background: var(--ungu-muda); }
.paket input:focus-visible + .paket-isi { outline: 2px solid var(--ungu); outline-offset: 2px; }
.harga { font-size: 1.5rem; font-weight: 700; color: var(--ungu); }
/* <label> hanya boleh berisi phrasing content, jadi isi paket memakai <span>
   yang di-display:block, bukan <h3>/<div>. */
.paket-isi, .paket-nama, .paket-ket, .metode-nama, .metode-biaya { display: block; }
.paket-nama { font-weight: 700; font-size: 1.05rem; margin-top: .6rem; }
.paket-ket { color: var(--teks-lembut); font-size: .92rem; margin-top: .35rem; }
.harga-coret { text-decoration: line-through; color: var(--teks-lembut); font-size: .95rem; margin-left: .4rem; }

/* --- Form ---------------------------------------------------------------- */
.form-baris { margin-bottom: 1rem; }
label.judul { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--garis);
  border-radius: 10px; font-size: 1rem; font-family: inherit; color: var(--teks);
}
input:focus, textarea:focus { outline: 2px solid var(--ungu); outline-offset: 0; border-color: var(--ungu); }
.bantuan { font-size: .85rem; color: var(--teks-lembut); }

/* --- Pesan --------------------------------------------------------------- */
.pesan { padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: .95rem; }
.pesan-galat { background: var(--merah-muda); color: var(--merah); }
.pesan-info { background: var(--kuning-muda); color: var(--kuning); }
.pesan-sukses { background: var(--hijau-muda); color: var(--hijau); }

/* --- Metode bayar -------------------------------------------------------- */
.metode { display: block; cursor: pointer; position: relative; margin-bottom: .6rem; }
.metode input { position: absolute; opacity: 0; }
.metode-isi {
  display: flex; align-items: center; gap: .9rem;
  border: 2px solid var(--garis); border-radius: 10px; padding: .8rem 1rem;
}
.metode input:checked + .metode-isi { border-color: var(--ungu); background: var(--ungu-muda); }
.metode input:focus-visible + .metode-isi { outline: 2px solid var(--ungu); outline-offset: 2px; }
.metode-isi img { width: 54px; height: auto; }
.metode-nama { flex: 1; font-weight: 600; font-size: .95rem; }
.metode-biaya { font-size: .85rem; color: var(--teks-lembut); text-align: right; white-space: nowrap; }

/* --- Ringkasan ----------------------------------------------------------- */
.ringkas { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .95rem; }
.ringkas-total { border-top: 1px solid var(--garis); margin-top: .5rem; padding-top: .8rem; font-weight: 700; font-size: 1.1rem; }

.kode-bayar {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .05em;
  background: var(--latar-lembut); border: 1px dashed var(--garis);
  border-radius: 10px; padding: 1rem; text-align: center; word-break: break-all;
}

/* --- Kaki ---------------------------------------------------------------- */
.kaki { border-top: 1px solid var(--garis); margin-top: 4rem; padding: 2.5rem 0 1.5rem; background: var(--latar-lembut); }
.kaki-isi { display: grid; gap: 1.75rem; }
@media (min-width: 720px) { .kaki-isi { grid-template-columns: 2fr 1fr 1fr; } }
.kaki-isi strong { display: block; margin-bottom: .6rem; }
.kaki-isi a { display: block; color: var(--teks-lembut); text-decoration: none; font-size: .92rem; padding: .15rem 0; }
.kaki-isi a:hover { color: var(--ungu); }
.kaki-isi p { color: var(--teks-lembut); font-size: .92rem; }
.kaki-bawah {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
  border-top: 1px solid var(--garis); margin-top: 2rem; padding-top: 1.25rem;
  font-size: .85rem; color: var(--teks-lembut);
}

/* --- Isi HTML landing page yang ditulis sendiri --------------------------- */
.lp-isi img { max-width: 100%; height: auto; }
.lp-isi table { width: 100%; overflow-x: auto; display: block; }

/* ==========================================================================
   Komponen tampilan
   Ditambahkan setelah tinjauan halaman brighten.drip.id yang sudah lolos
   verifikasi merchant. Tanpa gambar dari luar: warna, tipografi, dan SVG
   sebaris saja — situs cadangan tidak boleh bergantung pada aset pihak ketiga.
   ========================================================================== */

body { font-size: 17px; }
@media (max-width: 640px) { body { font-size: 16px; } }

h1, h2, h3 { letter-spacing: -.02em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }

.ikon { flex: none; vertical-align: -.15em; }

/* --- Bar atas jadi lengket + identitas lengkap ---------------------------- */
.bar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: rgba(255,255,255,.9); }
.logo-blok { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
/* Lambang asli sudah membawa latar ungunya sendiri, jadi di sini tidak ada
   gradien buatan — hanya sudut yang dibulatkan. */
.logo-tanda { width: 40px; height: 40px; border-radius: 11px; flex: none; display: block; }
.logo-teks { line-height: 1.25; }
.logo-teks strong { display: block; font-size: 1rem; }
.logo-teks span { display: block; font-size: .78rem; color: var(--teks-lembut); }
.logo-teks strong, .logo-teks span { white-space: nowrap; }
.bar-isi .tombol { white-space: nowrap; }
/* Nav disembunyikan lebih awal: di bawah 960px, logo + 5 tautan + tombol
   saling mendesak sampai keduanya terlipat dua baris. */
@media (max-width: 960px) { .bar nav { display: none; } }
@media (max-width: 560px) {
  .logo-teks span { display: none; }
  .logo-tanda { width: 36px; height: 36px; }
  .bar-isi .tombol { padding: .5rem .9rem !important; font-size: .85rem !important; }
}

/* --- Label kecil di atas judul bagian ------------------------------------- */
.mata {
  display: inline-block; color: var(--ungu); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; font-size: .78rem;
  margin-bottom: .6rem;
}

.lead { font-size: 1.1rem; color: var(--teks-lembut); max-width: 62ch; }

/* --- Pita / badge --------------------------------------------------------- */
.pita {
  /* flex-start, bukan center: kalau teksnya terlipat dua baris di layar
     sempit, ikon harus sejajar baris pertama — bukan melayang di tengah. */
  display: inline-flex; align-items: flex-start; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--ungu-muda); color: var(--ungu-gelap); border: 1px solid #ddd6fe;
}
.pita-putih { background: #fff; border-color: var(--garis); color: var(--teks); }
.pita-hijau { background: var(--hijau-muda); border-color: #abefc6; color: var(--hijau); }
.pita-baris { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 460px at 8% -12%, #ede9fe 0%, rgba(237,233,254,0) 62%),
    radial-gradient(900px 420px at 100% 0%, #f3e8ff 0%, rgba(243,232,255,0) 58%),
    var(--latar);
  border-bottom: 1px solid var(--garis);
  padding: 3.5rem 0 3rem;
}
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); max-width: 17ch; margin-top: 1rem; }
.hero .lead { font-size: clamp(1.02rem, 2.2vw, 1.18rem); }
.hero-aksi { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.sorot { color: var(--ungu); }

/* --- Papan angka ---------------------------------------------------------- */
.papan {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--garis); border-radius: 16px; overflow: hidden;
  background: var(--latar); margin-top: 2.5rem;
}
@media (min-width: 860px) { .papan { grid-template-columns: repeat(4, 1fr); } }
.papan > div { padding: 1.4rem 1.5rem; border-top: 1px solid var(--garis); border-left: 1px solid var(--garis); }
.papan > div:nth-child(-n+2) { border-top: 0; }
@media (min-width: 860px) { .papan > div:nth-child(-n+4) { border-top: 0; } }
.papan > div:nth-child(2n+1) { border-left: 0; }
@media (min-width: 860px) { .papan > div { border-left: 1px solid var(--garis); } .papan > div:first-child { border-left: 0; } .papan > div:nth-child(2n+1) { border-left: 1px solid var(--garis); } .papan > div:first-child { border-left: 0; } }
.papan b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.papan span { font-size: .88rem; color: var(--teks-lembut); }

/* --- Kartu dengan ikon ---------------------------------------------------- */
.kartu { transition: border-color .15s, box-shadow .15s; }
.kartu-tombol:hover { border-color: #c4b5fd; box-shadow: 0 8px 24px rgba(109,40,217,.08); }
.lencana-ikon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--ungu-muda); color: var(--ungu); margin-bottom: .9rem;
}

/* --- Langkah bernomor ----------------------------------------------------- */
.langkah { display: grid; gap: 1rem; counter-reset: langkah; }
.langkah > li {
  list-style: none; display: grid; grid-template-columns: 40px 1fr; gap: 1rem;
  border: 1px solid var(--garis); border-radius: 14px; padding: 1.15rem 1.25rem;
  background: var(--latar);
}
.langkah > li::before {
  counter-increment: langkah; content: counter(langkah);
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ungu); color: #fff; font-weight: 700; font-size: .95rem;
}
.langkah strong { display: block; margin-bottom: .2rem; }
.langkah p { margin: 0; color: var(--teks-lembut); font-size: .95rem; }
.langkah .durasi {
  display: inline-block; margin-top: .5rem; font-size: .8rem; font-weight: 600;
  color: var(--ungu-gelap); background: var(--ungu-muda); padding: .2rem .6rem; border-radius: 999px;
}

/* --- Akordeon FAQ --------------------------------------------------------- */
.tanya { border: 1px solid var(--garis); border-radius: 12px; margin-bottom: .7rem; background: var(--latar); }
.tanya summary {
  cursor: pointer; padding: 1rem 1.15rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after { content: "+"; color: var(--ungu); font-size: 1.35rem; line-height: 1; font-weight: 400; }
.tanya[open] summary::after { content: "\2212"; }
.tanya summary:focus-visible { outline: 2px solid var(--ungu); outline-offset: -2px; border-radius: 12px; }
.tanya .jawab { padding: 0 1.15rem 1.15rem; color: var(--teks-lembut); font-size: .96rem; }
.tanya .jawab p:last-child { margin-bottom: 0; }

/* --- Legalitas ------------------------------------------------------------ */
.legal-kisi { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 720px) { .legal-kisi { grid-template-columns: repeat(3, 1fr); } }
.legal-kisi div { border: 1px solid var(--garis); border-radius: 14px; padding: 1.15rem 1.25rem; }
.legal-kisi span { display: block; font-size: .82rem; color: var(--teks-lembut); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.legal-kisi strong { display: block; margin-top: .3rem; font-size: 1.05rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

/* --- Ajakan penutup ------------------------------------------------------- */
.ajakan {
  border-radius: 20px; padding: 2.5rem; text-align: center;
  background: linear-gradient(150deg, var(--ungu), #7e22ce); color: #fff;
}
.ajakan h2 { color: #fff; }
.ajakan p { color: #e9d5ff; max-width: 52ch; margin-inline: auto; }
.ajakan .tombol { background: #fff; color: var(--ungu-gelap); }
.ajakan .tombol:hover { background: #f5f3ff; }
.ajakan .tombol-garis { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ajakan .tombol-garis:hover { background: rgba(255,255,255,.12); }

/* --- Daftar bercentang ---------------------------------------------------- */
.centang { list-style: none; padding: 0; margin: 0; }
.centang li { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; font-size: .95rem; }
.centang li .ikon { color: var(--ungu); margin-top: .22em; }

/* --- Paket unggulan ------------------------------------------------------- */
.paket-unggul .paket-isi { border-color: #c4b5fd; }
.paket-pita {
  position: absolute; top: -.7rem; left: 1rem; z-index: 1;
  background: var(--ungu); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px;
}

.catatan-kecil { font-size: .87rem; color: var(--teks-lembut); border-left: 3px solid var(--garis); padding-left: 1rem; margin-top: 1.5rem; }

/* Header lengket menutupi bagian atas seksi saat tautan jangkar diklik.
   scroll-margin memberi ruang setinggi header. */
[id] { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Gambar & animasi
   ========================================================================== */

/* --- Bingkai gambar ------------------------------------------------------- */
.bingkai {
  position: relative; border-radius: 20px; overflow: hidden;
  background: var(--ungu-muda); line-height: 0;
  box-shadow: 0 18px 48px rgba(76,29,149,.13);
}
.bingkai img, .bingkai svg { width: 100%; height: auto; display: block; }
.bingkai-kecil { border-radius: 16px; box-shadow: 0 10px 28px rgba(76,29,149,.10); }

/* Kartu mengambang di atas gambar. Disembunyikan di layar sempit — menumpuk
   kartu di atas gambar kecil membuat keduanya sama-sama tidak terbaca. */
.kartu-layang {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  display: flex; align-items: center; gap: .7rem;
  background: #fff; border-radius: 14px; padding: .75rem .95rem;
  box-shadow: 0 10px 30px rgba(31,36,48,.16); line-height: 1.35; max-width: 78%;
}
.kartu-layang .lencana-ikon { width: 34px; height: 34px; border-radius: 9px; margin: 0; }
.kartu-layang strong { display: block; font-size: .88rem; }
.kartu-layang span { display: block; font-size: .78rem; color: var(--teks-lembut); }
@media (max-width: 560px) { .kartu-layang { display: none; } }

.hero-kisi { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero-kisi { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }

/* --- Muncul saat masuk layar ---------------------------------------------
   Penyembunyian HANYA berlaku kalau <html> sudah punya kelas `js`, yang
   dipasang skrip sebaris di <head>. Tanpa JavaScript, isi tetap terlihat. */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.tampil { opacity: 1; transform: none; }
.js .reveal-kiri { transform: translateX(-22px); }
.js .reveal-kanan { transform: translateX(22px); }
.js .reveal-skala { transform: scale(.96); }

/* --- Masuknya hero -------------------------------------------------------- */
@keyframes naikMasuk { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .hero-masuk > * { animation: naikMasuk .6s cubic-bezier(.22,.61,.36,1) both; }
.js .hero-masuk > *:nth-child(1) { animation-delay: .04s; }
.js .hero-masuk > *:nth-child(2) { animation-delay: .12s; }
.js .hero-masuk > *:nth-child(3) { animation-delay: .20s; }
.js .hero-masuk > *:nth-child(4) { animation-delay: .28s; }
.js .hero-masuk > *:nth-child(5) { animation-delay: .36s; }

@keyframes melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.js .melayang { animation: melayang 7s ease-in-out infinite; }

/* --- Bar atas ------------------------------------------------------------- */
.bar { transition: box-shadow .25s ease, background-color .25s ease; }
.bar.bar-turun { box-shadow: 0 1px 20px rgba(31,36,48,.09); background: rgba(255,255,255,.95); }

/* --- Interaksi kecil ------------------------------------------------------ */
.tombol { transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease; }
.tombol:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(109,40,217,.22); }
.tombol:active { transform: translateY(0); box-shadow: none; }
.tombol-garis:hover { box-shadow: 0 8px 20px rgba(109,40,217,.12); }
.ajakan .tombol:hover { box-shadow: 0 8px 22px rgba(0,0,0,.18); }

.kartu-tombol { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.kartu-tombol:hover { transform: translateY(-3px); }

.paket-isi { transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.paket:hover .paket-isi { transform: translateY(-3px); }
.metode-isi { transition: border-color .15s ease, background-color .15s ease; }
.metode:hover .metode-isi { border-color: #c4b5fd; }

.langkah > li { transition: border-color .18s ease, box-shadow .18s ease; }
.langkah > li:hover { border-color: #ddd6fe; box-shadow: 0 6px 18px rgba(76,29,149,.07); }

.tanya { transition: border-color .18s ease, box-shadow .18s ease; }
.tanya[open] { border-color: #ddd6fe; box-shadow: 0 6px 18px rgba(76,29,149,.07); }
.tanya summary::after { transition: transform .2s ease; }
.tanya[open] summary::after { transform: rotate(180deg); }
@keyframes bukaJawab { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tanya[open] .jawab { animation: bukaJawab .25s ease both; }

.legal-kisi div { transition: border-color .18s ease, background-color .18s ease; }
.legal-kisi div:hover { border-color: #ddd6fe; background: var(--ungu-muda); }

.pita { transition: background-color .18s ease, border-color .18s ease; }
.pita > .ikon { margin-top: .18em; }

/* --- Hormati permintaan pengurangan gerak --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- Kelegaan di layar sempit -------------------------------------------- */
@media (max-width: 640px) {
  /* Padding dalam kartu ikut dikecilkan: kalau tidak, jarak tepi layar yang
     baru ditambah malah termakan padding kartu dan teksnya jadi sempit. */
  .kartu { padding: 1.25rem; }
  .ajakan { padding: 2rem 1.5rem; border-radius: 18px; }
  .blok { padding: 2.5rem 0; }
  .langkah > li { padding: 1rem; gap: .85rem; grid-template-columns: 34px 1fr; }
  .tanya summary { padding: .9rem 1rem; }
  .tanya .jawab { padding: 0 1rem 1rem; }
  .legal-kisi div { padding: 1rem; }
  .papan > div { padding: 1rem 1.1rem; }
  /* Angka 1.5rem membuat "100% Online" dan "Pare, Kediri" terlipat dua baris
     di kolom selebar ini, sehingga papannya jadi tinggi sekali. */
  .papan b { font-size: 1.15rem; }
  .papan span { font-size: .82rem; }
  .hero { padding: 2.5rem 0 2.25rem; }
  .kode-bayar { font-size: 1.3rem; padding: .85rem; }
}