/* =========================================================
   Born To Win Community — sistem desain "The Circle"
   Dipakai bersama oleh semua halaman.
   ========================================================= */

:root{
  --red:#E52B2B; --yellow:#FFDD00; --ink:#0A0A0C;
  --body:#4A4A52; --paper:#FFF6E9; --cream:#FFFCF5;
  --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%}
/* tekstur kertas */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:radial-gradient(rgba(10,10,12,.055) 1px,transparent 1px);background-size:5px 5px}

.legend{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.lg{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 13px;font-size:.7rem;font-weight:700}
.lg.foto{border-color:rgba(255,221,0,.5);color:var(--yellow)}
.lg.data{border-color:rgba(229,43,43,.6);color:#FF8A8A}
.lg.tulis{border-color:rgba(255,255,255,.35)}

/* ---------- Elemen khas ---------- */
.sticker{background:var(--cream);border:2.5px solid var(--ink);border-radius:14px;box-shadow:5px 6px 0 var(--ink);position:relative}

/* Kartu grid membesar tipis saat disentuh/diklik -- murni umpan balik
   visual "seakan dipilih", tidak ada aksi di baliknya. FAQ (.fq) sengaja
   dilewati karena itu memang beneran bisa diklik untuk buka/tutup. */
.num,.goal,.team-photo,.activity,.achievement,.pola,.tl-in,.card{
  transition:transform .16s ease;cursor:default}
.num:hover,.goal:hover,.team-photo:hover,.activity:hover,.achievement:hover,.pola:hover,.tl-in:hover,.card:hover,
.num:active,.goal:active,.team-photo:active,.activity:active,.achievement:active,.pola:active,.tl-in:active,.card:active{
  transform:scale(1.035)}
.tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2.5deg);background:rgba(255,221,0,.85);
  border:1.5px solid rgba(10,10,12,.25);width:96px;height:26px;border-radius:2px}
.scribble{font-family:'Caveat',cursive;font-weight:700;color:var(--red);display:block;transform:rotate(-2deg)}

/* ---------- Placeholder ---------- */
.ph{border:2.5px dashed rgba(10,10,12,.3);border-radius:14px;background:rgba(255,255,255,.42);padding:24px 22px;position:relative}
.ph-tag{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:800;letter-spacing:.6px;
  padding:6px 13px;border-radius:999px;border:2px solid var(--ink);background:var(--yellow);margin-bottom:13px}
.ph-tag.data{background:var(--red);color:#fff}
.ph-tag.tulis{background:#fff}
.ph h5{font-family:'Outfit';font-weight:800;font-size:1rem;margin-bottom:8px;line-height:1.3}
.ph p{font-size:.85rem;color:var(--body);line-height:1.75}
.ph ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:7px}
.ph li{font-size:.81rem;color:var(--body);display:flex;gap:9px;line-height:1.6}
.ph li::before{content:'•';color:var(--red);font-weight:900}
.ph-img{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.ph-img i{font-size:1.6rem;color:rgba(10,10,12,.28)}
.ph-img b{font-family:'Outfit';font-size:.82rem}
.ph-img span{font-size:.73rem;color:var(--body);max-width:200px;line-height:1.5}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Outfit';font-weight:800;font-size:.9rem;padding:13px 24px;
  border-radius:10px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:.14s;cursor:pointer;background:var(--cream)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-red{background:var(--red);color:#fff}
.btn-yel{background:var(--yellow);color:var(--ink)}

/* Didaftarkan supaya tepi memudar strip menu HP bisa dianimasikan halus.
   Browser yang belum dukung @property tetap jalan, cuma pindahnya patah. */
@property --fade-l{syntax:'<length>';inherits:false;initial-value:0px}
@property --fade-r{syntax:'<length>';inherits:false;initial-value:0px}

/* Foto asli (bukan placeholder .ph lagi): border solid + bayangan senada
   sticker, tapi tanpa padding supaya foto sampai ke tepi. */
/* align-self:start: dalam grid (mis. berdampingan dengan kartu lain),
   kartu foto tidak boleh ikut di-stretch menyamai tinggi tetangganya —
   nanti aspect-ratio kalah sama height:100% dan fotonya ke-crop kotak. */
.team-photo{border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:5px 6px 0 var(--ink);overflow:hidden;align-self:start}
.team-photo img{display:block;width:100%;object-fit:cover;aspect-ratio:3/2}

/* Foto kegiatan: sama seperti .team-photo, tapi ada caption kecil
   nempel di bawah foto (gradient tipis, bukan kotak solid) supaya
   captionnya kelihatan tanpa menonjol dari fotonya sendiri. */
.activity{position:relative;border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:5px 6px 0 var(--ink);overflow:hidden;align-self:start}
.activity img{display:block;width:100%;object-fit:cover;aspect-ratio:4/3}
.activity figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;
  font-size:.72rem;font-weight:700;color:#fff;
  background:linear-gradient(to top,rgba(10,10,12,.72),transparent)}

/* Foto pencapaian: sama seperti .team-photo, tapi rasio potret
   karena kebanyakan foto sertifikat/trofi diambil vertikal, dan
   tanpa caption sama sekali. */
.achievement{border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:5px 6px 0 var(--ink);overflow:hidden;align-self:start}
.achievement img{display:block;width:100%;object-fit:cover;aspect-ratio:3/4}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(255,246,233,.93);backdrop-filter:blur(10px);border-bottom:2.5px solid var(--ink)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:15px 40px;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.brand b{font-family:'Outfit';font-weight:900;font-size:.93rem;display:block;line-height:1.1}
.brand small{font-family:'Caveat';font-weight:700;font-size:.9rem;color:var(--red)}
.links{display:flex;align-items:center;gap:24px;font-size:.87rem;font-weight:700}
.links a{position:relative;padding-bottom:3px}
.links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2.5px;background:var(--red);transition:.22s}
.links a:hover::after,.links a.on::after{width:100%}
nav .btn{margin-left:auto;padding:11px 18px}

/* Foto kecil di tombol WA nav: elemen flex biasa (bukan
   posisi absolut/nongol keluar) supaya tetap ringkas -- lebar
   tombol cuma nambah seukuran lingkaran fotonya, dan teks tombol
   sengaja dipendekkan jadi "Ngobrol" saja di halaman yang pakai
   ini supaya total lebarnya malah lebih hemat dari sebelumnya.
   Disembunyikan lewat display:none sampai assets/refs.js
   menemukan foto untuk slug yang aktif. */
.nav-wa-photo{display:none;width:22px;height:22px;border-radius:50%;
  overflow:hidden;border:1.5px solid #fff;flex-shrink:0}
.nav-wa-photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.nav-wa.has-photo .nav-wa-photo{display:block}

/* Link ke landing page nasabah: dibuat beda dari link menu lain
   (pill kecil, bukan teks polos) karena tujuannya beda audiens --
   sengaja menonjol sedikit supaya jelas ini bukan bagian dari alur
   rekrutmen agent. Kalau pengunjung baru datang dari halaman nasabah
   (mis. klik logo lalu nyasar ke sini), pill-nya ikut menyala +
   berdenyut sebentar lewat class .highlight (lihat assets/nav.js)
   supaya dia langsung sadar harus klik yang mana untuk balik. */
nav .links a.nasabah-link{display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;border:2px solid var(--ink);
  background:var(--cream)}
nav .links a.nasabah-link::after{display:none}
nav .links a.nasabah-link:hover{background:var(--paper)}
nav .links a.nasabah-link.highlight{background:var(--yellow);
  animation:nasabah-pulse 1.5s ease-in-out 3}
@keyframes nasabah-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(229,43,43,.5)}
  50%{box-shadow:0 0 0 9px rgba(229,43,43,0)}
}
@media(prefers-reduced-motion:reduce){.links a.nasabah-link.highlight{animation:none}}

/* ---------- Hero halaman dalam ---------- */
.phead{max-width:var(--wrap);margin:0 auto;padding:56px 40px 40px;position:relative;z-index:2}
.crumb{font-family:'Caveat';font-weight:700;font-size:1.25rem;color:var(--red);margin-bottom:8px;display:inline-block}
.crumb a:hover{text-decoration:underline}
.phead h1{font-family:'Outfit';font-weight:900;font-size:3.2rem;line-height:1.04;letter-spacing:-1.8px;margin-bottom:16px}
.phead p{font-size:1.02rem;color:var(--body);line-height:1.8;max-width:640px}

/* ---------- Section ---------- */
section{max-width:var(--wrap);margin:0 auto;padding:0 40px 76px;position:relative;z-index:2}
.shead{margin-bottom:34px;max-width:640px}
.stag{font-family:'Caveat';font-weight:700;font-size:1.45rem;color:var(--red);margin-bottom:5px;transform:rotate(-1.2deg);display:inline-block}
h2{font-family:'Outfit';font-weight:900;font-size:2.5rem;letter-spacing:-1.4px;line-height:1.08}
.sub{color:var(--body);font-size:.98rem;margin-top:14px;line-height:1.8}
.swipe-note{display:none;align-items:center;gap:8px;font-family:'Caveat';font-weight:700;font-size:1.22rem;color:var(--red);margin-bottom:15px}

/* CTA di akhir tiap blok homepage */
.more{margin-top:26px;display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.more .hint{font-family:'Caveat';font-weight:700;font-size:1.12rem;color:var(--body)}

/* ---------- Grid ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{padding:32px 26px}
.ic{width:56px;height:56px;border-radius:50%;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:18px}
.ic.r{background:var(--red);color:#fff}
.ic.y{background:var(--yellow);color:var(--ink)}
.ic.w{background:#fff;color:var(--red)}
.card h4{font-family:'Outfit';font-weight:900;font-size:1.24rem;margin-bottom:10px}
.card p{font-size:.9rem;color:var(--body);line-height:1.8}

/* ---------- Pita ---------- */
.ribbon{background:var(--red);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);padding:14px 0;overflow:hidden;
  transform:rotate(-1.2deg) scale(1.04);margin:28px 0 76px;position:relative;z-index:2}
.rib-t{display:flex;gap:38px;white-space:nowrap;animation:sc 24s linear infinite;font-family:'Caveat';font-weight:700;font-size:1.45rem;color:#fff}
.rib-t i{color:var(--yellow);font-size:.72rem;vertical-align:middle}
@keyframes sc{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Timeline ---------- */
.tl{position:relative;padding-left:36px}
.tl::before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:2.5px;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 8px,transparent 8px 15px)}
.tl-item{position:relative;margin-bottom:20px}
.tl-item::before{content:'';position:absolute;left:-32px;top:20px;width:16px;height:16px;border-radius:50%;
  background:var(--yellow);border:2.5px solid var(--ink)}
.tl-item.now::before{background:var(--red)}
.tl-in{padding:22px 24px}
.tl-yr{font-family:'Caveat';font-weight:700;font-size:1.35rem;color:var(--red);margin-bottom:2px}
.tl-in h4,.tl-in h5{font-family:'Outfit';font-weight:800;font-size:1.1rem;margin-bottom:7px}
.tl-in p{font-size:.87rem;color:var(--body);line-height:1.75}

/* ---------- Angka ---------- */
.nums{display:flex;flex-wrap:wrap;gap:18px}
.nums>*{flex:1 1 200px}   /* ikut jumlah kartunya, tidak memaksa empat kolom */
.num{padding:26px 20px;text-align:center}
.num b{display:block;font-family:'Outfit';font-weight:900;font-size:2.4rem;line-height:1;margin-bottom:6px}
.num span{font-size:.79rem;font-weight:700;color:var(--body);line-height:1.5;display:block}
.num .hint{font-family:'Caveat';font-size:1.02rem;color:var(--red);margin-top:7px;display:block;font-weight:700}

/* ---------- Galeri ---------- */
/* auto-fit, bukan repeat(4,...): jumlah foto kegiatan akan terus
   bertambah, jadi baris ini harus tetap rapi untuk berapa pun jumlahnya. */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gal.feature>*:nth-child(1){grid-column:span 2;grid-row:span 2}

/* ---------- Minggu biasa ---------- */
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.day{padding:17px 15px}
.day .dh{font-family:'Outfit';font-weight:900;font-size:.8rem;letter-spacing:1.4px;text-transform:uppercase;
  padding-bottom:9px;margin-bottom:11px;border-bottom:2.5px dashed rgba(10,10,12,.2)}
.slot{font-size:.78rem;color:var(--body);line-height:1.5;padding:7px 0;border-bottom:1px dashed rgba(10,10,12,.13)}
.slot:last-child{border:none}
.slot b{display:block;font-family:'Outfit';font-size:.71rem;color:var(--red)}
.slot.miss{opacity:.55;font-style:italic}

/* ---------- Cerita / polaroid ---------- */
/* auto-fit, bukan repeat(3,...): jumlah kartu cerita akan terus bertambah
   seiring anggota baru menulis, jadi baris ini harus tetap rapi di 3, 4,
   5 kartu atau lebih -- bukan dipatok pas 3. */
.polas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.pola{background:#fff;border:2.5px solid var(--ink);box-shadow:5px 6px 0 var(--ink);padding:13px 13px 19px;border-radius:6px}
.pola-img{aspect-ratio:1/1;border:2.5px solid var(--ink);border-radius:3px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;margin-bottom:13px;text-align:center;padding:13px}
.pola-img i{font-size:1.45rem;color:rgba(10,10,12,.3)}
.pola-img span{font-size:.73rem;color:var(--body);line-height:1.5}
.p1{background:linear-gradient(140deg,#FFE9A8,#FFD34D)}
.p2{background:linear-gradient(140deg,#FFC2C2,#FF8B8B)}
.p3{background:linear-gradient(140deg,#CFE9FF,#9DD0FF)}
.pola .who{font-size:.81rem;font-weight:700;margin-top:11px}
.pola .who span{display:block;font-weight:400;color:var(--body);font-size:.75rem;margin-top:2px}
.worst{margin-top:11px;padding-top:11px;border-top:2.5px dashed rgba(10,10,12,.2)}
.worst b{font-family:'Caveat';font-size:1.12rem;color:var(--red);display:block;margin-bottom:4px}
.worst p{font-size:.79rem;color:var(--body);line-height:1.6}

/* ---------- Alur uang ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fl{padding:24px 20px;text-align:center}
.fl .n{font-family:'Caveat';font-weight:700;font-size:1.25rem;color:var(--red);margin-bottom:5px}
.fl h4{font-family:'Outfit';font-weight:900;font-size:1.06rem;margin-bottom:8px}
.fl p{font-size:.84rem;color:var(--body);line-height:1.7}

/* ---------- Kotak "cocok buat kamu" / cara kami menemani ---------- */
.fitbox{background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:7px 8px 0 var(--ink);padding:40px 38px;position:relative}
.fitbox .tape{width:150px;height:32px;top:-17px;background:rgba(229,43,43,.8)}
.fitbox h3{font-family:'Outfit';font-weight:900;font-size:1.9rem;letter-spacing:-1px;margin-bottom:5px}
.fitbox .sc{font-family:'Caveat';font-weight:700;font-size:1.5rem;color:var(--red);display:block;margin-bottom:22px}
.fitbox ul{list-style:none;display:flex;flex-direction:column;gap:15px}
.fitbox li{display:flex;gap:13px;font-size:.94rem;line-height:1.75;color:var(--body)}
.fitbox li i{color:var(--red);margin-top:5px;flex-shrink:0}
.fitbox li b{color:var(--ink)}

.promise{background:var(--yellow);border:2.5px solid var(--ink);border-radius:16px;box-shadow:7px 8px 0 var(--ink);padding:40px 38px}
.promise h3{font-family:'Outfit';font-weight:900;font-size:1.9rem;letter-spacing:-1px;margin-bottom:20px}
.promise ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:24px}
.promise li{display:flex;gap:12px;font-size:.94rem;font-weight:600;line-height:1.65}
.promise li i{color:var(--red);margin-top:5px}

/* ---------- FAQ ----------
   Selalu tertutup sampai diklik, di semua ukuran layar -- bukan cuma di
   HP. Ikon panah (.fq-chevron) berputar 180 derajat saat dibuka; state
   buka/tutupnya asli <details>, tidak butuh JavaScript. */
.faq{max-width:820px;display:flex;flex-direction:column;gap:15px}
.fq{padding:0}
.fq summary{list-style:none;cursor:pointer;padding:23px 26px;display:flex;gap:11px;align-items:flex-start;
  font-family:'Outfit';font-weight:800;font-size:1.05rem;line-height:1.4}
.fq summary::-webkit-details-marker{display:none}
.fq summary>i:first-child{color:var(--red);margin-top:3px;flex-shrink:0}
.fq-chevron{margin-left:auto;color:var(--red);flex-shrink:0;margin-top:5px;transition:transform .2s}
.fq[open] .fq-chevron{transform:rotate(180deg)}
.fq p{padding:0 26px 23px;font-size:.9rem;color:var(--body);line-height:1.85}

/* ---------- CTA akhir ---------- */
.final{background:var(--cream);border:2.5px solid var(--ink);box-shadow:8px 9px 0 var(--ink);border-radius:20px;padding:60px 46px;text-align:center;position:relative}
.final .tape{width:150px;height:34px;top:-18px;background:rgba(229,43,43,.8)}
.final h2{font-size:2.5rem;margin-bottom:5px}
.final .scribble{font-size:1.9rem;margin-bottom:16px}
.final p{color:var(--body);font-size:1rem;margin-bottom:28px;max-width:520px;margin-inline:auto;line-height:1.8}
.cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center;justify-content:center}
.assure{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:24px;font-size:.81rem;font-weight:600;color:var(--body)}
.assure i{color:var(--red);margin-right:6px}

/* Kartu "kenalan dulu" sebelum tombol WhatsApp di penutup homepage --
   foto bulat kecil + status online, diisi/disembunyikan lewat refs.js
   sesuai slug rujukan yang aktif (lihat assets/pe-rekrut/). */
/* Pil badge dikunci tingginya (68px, sama seperti sebelum foto
   diperbesar) supaya kartu "Kenalan Dulu, Yuk" tidak ikut membesar.
   Fotonya sendiri dibuat lebih besar dari pil-nya dan "mengintip"
   keluar atas-bawah lewat position:absolute -- tidak ikut dihitung
   sebagai tinggi konten pil. */
.recruiter{position:relative;display:inline-flex;align-items:center;height:68px;
  margin-bottom:24px;background:var(--paper);border:2px solid var(--ink);
  border-radius:999px;padding:0 20px 0 92px}
.recruiter-photo{position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:88px;height:88px;border-radius:50%;flex-shrink:0}
.recruiter-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top;
  border:2.5px solid var(--ink);display:block;position:relative;z-index:2}
.recruiter-photo::before{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--red);opacity:.55;animation:recruiter-pulse 2.2s ease-out infinite}
.recruiter-photo .dot{position:absolute;bottom:3px;right:3px;width:15px;height:15px;border-radius:50%;
  background:#2ecc71;border:2.5px solid var(--paper);z-index:3}
.recruiter-text{text-align:left}
.recruiter-text b{display:block;font-family:'Outfit';font-weight:800;font-size:.94rem;letter-spacing:-.2px}
.recruiter-text span{font-size:.76rem;color:var(--body)}
@keyframes recruiter-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
@media(prefers-reduced-motion:reduce){.recruiter-photo::before{animation:none}}

/* ---------- Footer ---------- */
footer{border-top:2.5px solid var(--ink);background:var(--ink);color:#fff;padding:46px 40px 32px;position:relative;z-index:2}
.f-in{max-width:var(--wrap);margin:0 auto;text-align:center}
footer .brand{justify-content:center;margin-bottom:16px}
footer .brand b{color:#fff}
footer .brand small{color:var(--yellow)}
.fl-links{display:flex;gap:22px;justify-content:center;margin:16px 0;font-size:.85rem;font-weight:600;flex-wrap:wrap}
.fl-links a:hover{color:var(--yellow)}
footer p{font-size:.79rem;color:#9C9CA6;line-height:1.7}

/* =========================================================
   Mobile
   ========================================================= */
@media(max-width:900px){
  /* Menu utama tidak lagi disembunyikan di HP. Dia turun ke baris kedua
     jadi strip yang digeser ke samping, senada dengan kartu-kartu di bawah.
     Padding kiri-kanan pindah ke isinya supaya strip bisa mentok ke tepi. */
  /* Grid, bukan flex-wrap: logo dan tombol dipaku di baris satu supaya
     tidak ikut turun di layar sempit, strip menu selalu di baris dua. */
  .nav-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    column-gap:10px;padding:13px 0 0}
  .brand{grid-column:1;grid-row:1;margin-left:20px;min-width:0}
  .brand>div{min-width:0}
  nav .btn{grid-column:2;grid-row:1;margin:0 20px 0 0}
  .links{
    grid-column:1/-1;grid-row:2;gap:7px;margin-top:8px;padding:7px 20px 8px;
    border-top:2px dashed rgba(10,10,12,.16);
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* Tanpa scroll-snap: pill-nya kecil, dan snap malah menarik balik strip
       ke kiri sehingga menu halaman yang sedang dibuka tidak pernah masuk
       layar. Kartu besar di dalam halaman tetap pakai snap. */
    /* tepi memudar cuma di sisi yang masih ada isinya, diatur nav.js */
    --fade-l:0px;--fade-r:0px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),transparent 100%);
    transition:--fade-l .2s,--fade-r .2s}
  .links::-webkit-scrollbar{display:none}
  .links a{
    flex:0 0 auto;white-space:nowrap;
    /* padding vertikal dijaga agar area sentuh mendekati 44px (standar
       tap target), bukan cuma mengejar tinggi teksnya saja */
    padding:11px 14px;border-radius:999px;font-size:.8rem;
    border:2px solid transparent;
    transition:background .18s,color .18s,border-color .18s,transform .12s}
  .links a::after{display:none}          /* garis bawah diganti pill */
  .links a:active{transform:scale(.94)}
  .links a.on{background:var(--ink);color:var(--cream);box-shadow:2px 2px 0 rgba(10,10,12,.2)}
  .links a:not(.on){border-color:rgba(10,10,12,.16)}
  @media(prefers-reduced-motion:reduce){
    .links a{transition:none}
  }
  .brand img{width:40px;height:40px}
  .brand b{font-size:.8rem;white-space:nowrap}
  .brand small{font-size:.84rem}
  nav .btn{padding:10px 15px;font-size:.8rem;white-space:nowrap}
  /* Di HP tombolnya sendiri jadi lebih kecil (di atas), jadi foto 22px
     yang pas di desktop malah kelihatan kurang jelas -- dibesarkan di
     sini biar wajahnya tetap kelihatan meski tombolnya ringkas.
     38px disamakan dengan ukuran logo brand (.brand img) di breakpoint
     yang sama, jadi proporsinya senada dengan elemen nav lain di HP. */
  .nav-wa-photo{width:38px;height:38px;border-width:2px}
  section{padding:0 22px 44px}
  .phead{padding:30px 22px 22px}
  .phead h1{font-size:2.2rem;letter-spacing:-1.1px}
  .phead p{font-size:.95rem}
  h2,.final h2{font-size:1.95rem}
  .shead{margin-bottom:20px}
  .sub{font-size:.93rem;margin-top:11px}
  .ribbon{margin:22px 0 44px}
  /* margin-top jaga-jaga: pita .tape nongol -17/-18px di atas kotak,
     kalau kotak ini anak pertama section (tanpa .shead di atasnya)
     dan elemen sebelumnya mepet (mis. tombol CTA di .phead), pitanya
     bisa numpuk sama elemen itu tanpa margin ini. */
  .fitbox,.promise,.final{margin-top:22px}
  .fitbox,.promise{padding:28px 22px}
  .final{padding:38px 22px}
  .more{margin-top:20px}

  /* =======================================================
     Semua kelompok kartu digeser ke samping, bukan menumpuk
     ke bawah. Kartu berikutnya sengaja mengintip di tepi
     layar sebagai penanda bahwa masih ada lanjutannya.
     ======================================================= */
  .swipe-row,
  .grid3,.grid2,.polas,.week,.nums,.gal,.flow{
    display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    gap:14px;margin-inline:-22px;padding:6px 22px 18px;scroll-padding-left:22px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe-row::-webkit-scrollbar,
  .grid3::-webkit-scrollbar,.grid2::-webkit-scrollbar,.polas::-webkit-scrollbar,
  .week::-webkit-scrollbar,.nums::-webkit-scrollbar,.gal::-webkit-scrollbar,
  .flow::-webkit-scrollbar{display:none}
  .nums{flex-wrap:nowrap}

  .swipe-row>*,.grid3>*,.grid2>*,.polas>*,.flow>*{flex:0 0 78%;max-width:320px;scroll-snap-align:start}
  .week>*{flex:0 0 62%;max-width:240px;scroll-snap-align:start}
  .nums>*{flex:0 0 44%;max-width:190px;scroll-snap-align:start}
  .gal>*{flex:0 0 66%;max-width:280px;scroll-snap-align:start}
  .gal.feature>*:nth-child(1){flex:0 0 66%;grid-column:auto;grid-row:auto}
  .card,.pola,.day,.num,.fl{transform:none !important}
  /* ...tapi efek "kepilih" saat disentuh/diklik tetap harus jalan di HP */
  .card:active,.pola:active,.num:active{transform:scale(1.035) !important}
  .swipe-note{display:flex}

  /* polaroid dipendekkan: foto 1:1 bikin kartunya sangat tinggi di HP */
  .pola-img{aspect-ratio:4/3;margin-bottom:11px;padding:10px}
  .pola{padding:11px 11px 16px}
  .worst p{font-size:.77rem}

  /* kartu angka jadi lebih rapat karena tampil berdampingan */
  .num{padding:20px 14px}
  .num b{font-size:1.9rem}
  .num span{font-size:.74rem}
  .num .hint{font-size:.92rem;margin-top:5px}

  /* ---- Timeline ikut jadi horizontal ---- */
  .tl{padding-left:0;padding-top:30px;display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;gap:14px;margin-inline:-22px;padding-inline:22px;
    padding-bottom:18px;scroll-padding-left:22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tl::-webkit-scrollbar{display:none}
  .tl::before{display:none}
  .tl-item{flex:0 0 80%;max-width:330px;scroll-snap-align:start;margin-bottom:0}
  /* garis putus-putus penghubung dipindah ke atas tiap kartu */
  .tl-item::after{content:'';position:absolute;top:-19px;left:0;right:-14px;height:2.5px;
    background:repeating-linear-gradient(to right,var(--ink) 0 8px,transparent 8px 15px)}
  .tl-item:last-child::after{right:0}
  .tl-item::before{left:16px;top:-27px}

  /* .fit-card (teaser "Cocok Buat Kamu" beranda) menumpuk ke bawah,
     sama seperti .fitbox & .promise di Cara Kerjanya -- checklist
     singkat begini perlu langsung terbaca penuh, bukan disembunyikan
     di balik geser ke samping. Ukuran font/gap dipadatkan lewat
     <style> di index.html sendiri (khusus halaman ini). */

  /* FAQ dipadatkan sedikit di HP saja; buka/tutupnya sudah seragam
     lewat aturan dasar di atas, tidak perlu ditulis ulang di sini. */
  .faq{gap:12px}
  .fq summary{padding:18px 20px;font-size:1rem}
  .fq p{padding:0 20px 20px;font-size:.89rem}
}

/* =========================================================
   Rapat di HP
   Memangkas panjang scroll tanpa membuang isi. Jarak antar bagian,
   ukuran judul, padding kartu, dan tinggi kotak placeholder
   dikecilkan; baris yang digeser ke samping tetap digeser ke
   samping. Ditulis di blok terpisah paling bawah supaya menimpa
   aturan HP di atasnya dan gampang dicabut kalau kelewat rapat.
   ========================================================= */
@media(max-width:900px){
  section{padding:0 20px 26px}
  .phead{padding:22px 20px 14px}
  .phead h1{font-size:1.85rem;letter-spacing:-1px}
  .phead p{font-size:.9rem;line-height:1.6}
  .crumb{font-size:1.08rem;margin-bottom:3px}
  h2,.final h2{font-size:1.62rem}
  .shead{margin-bottom:12px}
  .stag{font-size:1.15rem;margin-bottom:2px}
  .sub{font-size:.88rem;line-height:1.6;margin-top:7px}
  .swipe-note{font-size:1.02rem;margin-bottom:6px}
  .more{margin-top:14px}
  .ribbon{margin:16px 0 26px}

  /* Hero */
  .hero{padding:22px 20px 24px;gap:16px}
  .hero h1{font-size:1.9rem}
  .hero .scribble{font-size:1.45rem;margin:0 0 9px}
  .lead{font-size:.92rem;line-height:1.62;margin-bottom:16px}

  /* Baris geser ke samping: lebih rapat, kartu lebih ramping */
  .swipe-row,.grid3,.grid2,.polas,.week,.nums,.gal,.flow{
    gap:11px;margin-inline:-20px;padding:3px 20px 12px;scroll-padding-left:20px}
  .swipe-row>*,.grid3>*,.grid2>*,.polas>*,.flow>*{flex:0 0 73%;max-width:280px}
  .gal>*{flex:0 0 60%;max-width:240px}
  /* Kartu angka: dua kartu mengisi lebar penuh; tiga atau lebih baru digeser */
  .nums>*{flex:0 0 47%;max-width:none}
  .tl{padding-top:22px}
  .tl-item{flex:0 0 74%;max-width:290px}

  /* Kartu */
  .card{padding:20px 17px}
  .card h4{font-size:1.05rem;margin-bottom:6px}
  .card p{font-size:.85rem;line-height:1.62}
  .tl-in{padding:17px}
  .tl-in h4,.tl-in h5{font-size:1rem;margin-bottom:5px}
  .tl-in p{font-size:.83rem;line-height:1.6}
  .num{padding:18px 13px}
  .num b{font-size:1.7rem}
  .num span{font-size:.72rem}
  .num .hint{font-size:.86rem;margin-top:4px}

  /* Blok yang isinya belum ada */
  .ph{padding:17px 16px}
  .ph h5{font-size:.96rem;margin-bottom:5px}
  .ph p{font-size:.83rem;line-height:1.6}
  .ph ul{gap:5px;margin-top:8px}
  .ph li{font-size:.79rem;line-height:1.5}
  .ph-img{aspect-ratio:16/10}
  .pola-img{aspect-ratio:16/10;margin-bottom:9px;padding:8px}
  .worst{margin-top:9px;padding-top:9px}
  .worst p{font-size:.76rem;line-height:1.5}

  /* Kotak besar */
  .fitbox,.promise{padding:22px 18px}
  .fitbox h3,.promise h3{font-size:1.5rem;margin-bottom:12px}
  .fitbox .sc{font-size:1.3rem;margin-bottom:14px}
  .fitbox li,.promise li{font-size:.85rem;line-height:1.6}
  .final{padding:28px 18px}
  .final .scribble{font-size:1.45rem;margin-bottom:11px}
  .final p{font-size:.92rem;line-height:1.62;margin-bottom:18px}
  .assure{gap:12px;margin-top:16px;font-size:.78rem}

  /* Tanya jawab */
  .fq summary{padding:13px 16px;font-size:.9rem}

  /* Footer */
  footer{padding:26px 20px 20px}
  footer .brand{margin-bottom:11px}
  footer p{font-size:.75rem;line-height:1.6}
}

/* Layar sangat sempit (iPhone SE lama, 320px): header dirapatkan supaya
   logo dan tombol WhatsApp tetap muat dalam satu baris. */
@media(max-width:360px){
  .nav-in{column-gap:8px}
  .brand{margin-left:14px;gap:9px}
  .brand img{width:36px;height:36px}
  .brand b{font-size:.74rem}
  .brand small{font-size:.78rem}
  nav .btn{margin-right:14px;padding:9px 11px;font-size:.73rem}
  .links{padding-left:14px;padding-right:14px}
}