/* DANARA — identitas landing page, tanpa mengubah aplikasi utama.

   Font dan radius mengikuti aplikasi; aksen forest green mengikuti logo baru.

   Halaman ini sengaja selalu krem dan tidak punya mode gelap, meski
   aplikasinya punya. Ini halaman promosi: kesan pertamanya harus sama untuk
   semua orang, tidak berganti mengikuti setelan perangkat masing-masing.
   Jangan tambahkan kembali blok :root.dark di sini tanpa keputusan baru. */

:root {
  color-scheme: light;

  --cs-bg: #faf7f1;
  --cs-card: #ffffff;
  --cs-soft: #f2ece1;
  --cs-panel: #123d31;
  --cs-panel-ink: #faf7f1;
  --cs-panel-mut: #c9c3b8;
  --cs-ink: #211f1b;
  --cs-body: #5f594e;
  --cs-mut: #6f6a60;
  --cs-faint: #8d867a;
  --cs-line: #e7e0d3;
  --cs-chip: #f2ece1;
  --cs-track: #eee8dc;
  --cs-seg: #f1ebdf;
  --cs-dim: #ddd5c5;
  --cs-acc: #17513f;
  --cs-on-acc: #faf7f1;
  --cs-link: #25614c;
  --cs-sage: #e8eee5;
  --cs-sage-ink: #49664f;
  --cs-pos: oklch(0.5 0.14 150);
  --cs-neg: oklch(0.55 0.19 25);
  --cs-navbg: rgba(250, 247, 241, 0.88);
  --cs-shadow: 0 1px 2px rgba(33, 31, 27, 0.04), 0 8px 24px rgba(33, 31, 27, 0.05);
  --cs-shadow-lift: 0 18px 44px rgba(33, 31, 27, 0.12);

  --r-lg: 24px;
  --r-md: 20px;
  --r-sm: 14px;

  /* Hijau di atas bidang gelap perlu versinya sendiri. Nilai --cs-pos untuk
     mode terang terlalu gelap kalau ditaruh di panel tinta, jadi dipakai
     varian terang yang sama dengan panel saldo di aplikasi. */
  --cs-band-pos: oklch(0.84 0.15 155);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--cs-bg);
  color: var(--cs-ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--cs-link);
  outline-offset: 3px;
  border-radius: 8px;
}

.num {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: 40px;
  }
}

/* ---- Navbar ------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cs-navbg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.nav[data-scrolled="true"] {
  border-bottom-color: var(--cs-line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--cs-panel);
}

.brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav__links {
  display: none;
  gap: 4px;
  margin-right: 4px;
}

@media (min-width: 860px) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--cs-body);
  text-decoration: none;
}

.nav__link:hover {
  color: var(--cs-ink);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding-inline: 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--cs-acc);
  color: var(--cs-on-acc);
}
.btn--primary:hover { background: #103e30; }

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

.btn--plain {
  background: transparent;
  color: var(--cs-body);
  min-height: 40px;
  padding-inline: 12px;
  font-weight: 500;
}

.btn--lg {
  min-height: 52px;
  padding-inline: 24px;
  font-size: 15px;
  border-radius: 16px;
}

.btn--onpanel {
  background: var(--cs-panel-ink);
  color: #211f1b;
}

/* ---- Tipografi & bagian -------------------------------------------------- */

.section {
  padding-block: 64px;
  scroll-margin-top: 74px;
}

@media (min-width: 900px) {
  .section {
    padding-block: 96px;
  }
}

.section--soft {
  background: var(--cs-soft);
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-sage-ink);
}

.h1 {
  margin: 0;
  font-size: clamp(34px, 6.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: balance;
}

.h2 {
  margin: 0;
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

.h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  font-weight: 700;
}

.lead {
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.62;
  color: var(--cs-body);
  text-wrap: pretty;
}

.section__head {
  max-width: 60ch;
  margin-bottom: 28px;
}

.section__head .lead {
  font-size: 15.5px;
  margin-top: 12px;
}

@media (min-width: 900px) {
  .section__head {
    margin-bottom: 40px;
  }
}

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

.hero {
  padding-block: 40px 56px;
}

@media (min-width: 900px) {
  .hero {
    padding-block: 64px 88px;
  }
}

.hero__grid {
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 56px;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* Di layar sempit dua tombol berbeda lebar terlihat ragged saat terbungkus,
   jadi keduanya dibuat selebar kolom dan ditumpuk rapi. */
@media (max-width: 560px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .nav__inner { gap: 8px; }
  .nav .btn { padding-inline: 11px; font-size: 12px; min-height: 44px; }
  .nav .brand { gap: 5px; font-size: 15px; letter-spacing: .09em; }
}

/* Di bawah 380px, nama merek dilepas dan hanya markanya yang tinggal supaya
   dua tombol navigasi tetap muat tanpa terpotong. */
@media (max-width: 380px) {
  .brand span {
    display: none;
  }
}

.hero__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--cs-faint);
}
.hero__accent { color: var(--cs-acc); }

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

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding-inline: 12px;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  background: var(--cs-card);
  font-size: 12.5px;
  color: var(--cs-body);
}

.badge svg {
  width: 14px;
  height: 14px;
  color: var(--cs-faint);
}

/* ---- Satu komposisi, dua ukuran aplikasi --------------------------------- */
.device-showcase {
  width: 100%;
  min-width: 0;
  max-width: 650px;
  margin: 0 auto;
  container-type: inline-size;
}
.device-showcase__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.15;
  perspective: 1300px;
  isolation: isolate;
}
.device-showcase__halo {
  position: absolute;
  inset: 12% 0 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 60% 40%, #dce7d8 0%, #e9efe3 45%, transparent 72%);
  pointer-events: none;
}
.device-preview {
  appearance: none;
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  transition: transform 750ms cubic-bezier(.22,.75,.22,1), filter 750ms ease;
}
.device-preview:focus-visible { outline: 3px solid var(--cs-link); outline-offset: 9px; border-radius: 24px; }
.device-preview--laptop {
  width: 94%;
  left: 0;
  top: 23%;
  z-index: 1;
  transform: translateX(-3%) rotateY(9deg) rotateZ(-5deg) scale(.93);
  filter: drop-shadow(0 24px 18px #10352620);
}
.device-preview--phone {
  width: 35%;
  left: 61%;
  top: 0;
  z-index: 2;
  transform: rotateY(-8deg) rotateZ(6deg);
  filter: drop-shadow(0 22px 20px #10352630);
}
.device-showcase[data-active-device="laptop"] .device-preview--laptop {
  z-index: 2;
  transform: translateX(8%) rotateY(-5deg) rotateZ(3deg);
}
.device-showcase[data-active-device="laptop"] .device-preview--phone {
  z-index: 1;
  transform: translateX(-158%) translateY(-1%) rotateY(8deg) rotateZ(-7deg) scale(.9);
  filter: drop-shadow(0 14px 14px #10352620);
}
@media (hover: hover) {
  .device-preview[aria-pressed="false"]:hover { filter: drop-shadow(0 22px 22px #10352640) brightness(1.025); }
}
.device-screen { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
/* Gerakan berada pada bingkai bagian dalam, sehingga tidak menimpa rotasi
   dan perpindahan posisi perangkat ketika dipilih. */
@keyframes device-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--device-lift, -12px)); }
}
.phone-device, .laptop-device { animation: device-float 6.8s ease-in-out infinite; }
.phone-device { --device-lift: -14px; }
.laptop-device { --device-lift: -9px; animation-delay: -2.4s; }
.phone-device {
  display: block;
  padding: 2.1%;
  border: 1px solid #63695f;
  border-radius: 15% / 7%;
  background: #232923;
  box-shadow: inset 0 0 0 1px #879080;
  overflow: hidden;
}
.phone-screen { display: block; overflow: hidden; border-radius: 13% / 6%; background: #faf7f1; }
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.3cqw;
  min-height: 15px;
  padding-inline: 3cqw;
  font-size: 1.4cqw;
  font-weight: 700;
  color: #211f1b;
}
.phone-status__island { width: 10cqw; height: 2.8cqw; border-radius: 20px; background: #20251f; }
.phone-home-indicator { display: block; width: 32%; height: .6cqw; margin: 1.2cqw auto; background: #211f1b; border-radius: 9px; }
.laptop-device { display: block; }
.laptop-lid {
  position: relative;
  display: block;
  padding: 2.7% 1.3% 1.3%;
  margin-inline: 3%;
  border: 1px solid #626d60;
  border-radius: 3% 3% 1% 1% / 4% 4% 1% 1%;
  background: #232923;
  box-shadow: inset 0 0 0 1px #808b7c;
}
.laptop-camera { position: absolute; left: 50%; top: 1.25%; width: .55%; aspect-ratio: 1; border-radius: 50%; background: #82927c; }
.device-screen--desktop { border-radius: 1%; }
.laptop-base {
  position: relative;
  display: block;
  height: 1.8cqw;
  background: linear-gradient(#d8ddd4, #a8b2a1);
  border: 1px solid #a0ab99;
  border-radius: 0 0 50% 50% / 0 0 80% 80%;
}
.laptop-base > span { display: block; width: 15%; height: .65cqw; margin-inline: auto; background: #929e8b; border-radius: 0 0 10px 10px; }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 28px; }
  .hero { padding-block: 72px 64px; }
}
@media (max-width: 979px) and (min-width: 600px) {
  .device-showcase { max-width: 610px; }
}
@media (max-width: 599px) {
  .hero__grid { gap: 32px; }
  .device-showcase__stage { aspect-ratio: 1.05; }
  .device-preview--phone { width: 38%; left: 58%; }
  .device-preview--laptop { top: 26%; width: 92%; }
  .device-showcase[data-active-device="laptop"] .device-preview--phone { transform: translateX(-144%) rotateY(8deg) rotateZ(-7deg) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .device-preview { transition: none; }
  .phone-device, .laptop-device { animation: none; }
}
.trio.trio--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) {
  .trio.trio--pair { grid-template-columns: 1fr; }
}

/* ---- Kartu peraga UI ----------------------------------------------------- */

/* Semua peraga memakai kartu putih bergaris tipis, sama seperti permukaan di
   aplikasi. Bentuknya dibedakan lewat isi, bukan lewat warna latar yang
   berganti-ganti tiap bagian. */
.ui {
  border: 1px solid var(--cs-line);
  border-radius: var(--r-lg);
  background: var(--cs-card);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}

.ui--lift {
  box-shadow: var(--cs-shadow-lift);
}

.ui__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cs-line);
}

.ui__title {
  font-size: 13.5px;
  font-weight: 700;
}

.ui__hint {
  font-size: 11.5px;
  color: var(--cs-mut);
}

.ui__body {
  padding: 16px;
}

.ui__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--cs-line);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cs-mut);
  background: var(--cs-soft);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: 8px;
  border-radius: 999px;
  background: var(--cs-chip);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-body);
}

/* Baris dompet dan transaksi memakai metrik baris di aplikasi: ikon 34,
   judul 13.5, keterangan 11.5, nominal DM Mono rata kanan. */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.row + .row {
  border-top: 1px solid var(--cs-line);
}

.row__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--cs-chip);
  color: var(--cs-body);
}

.row__icon svg {
  width: 16px;
  height: 16px;
}

.row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.row__title {
  font-size: 13.5px;
  font-weight: 500;
}

.row__meta {
  font-size: 11.5px;
  color: var(--cs-mut);
}

.row__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
  text-align: right;
}

.row__value {
  font-size: 13px;
}

.row__equiv {
  font-size: 10.5px;
  color: var(--cs-mut);
}

.pos {
  color: var(--cs-pos);
}

.neg {
  color: var(--cs-neg);
}

/* ---- Hero: kartu dompet -------------------------------------------------- */

.total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--cs-line);
}

.total__label {
  font-size: 11.5px;
  color: var(--cs-mut);
}

.total__value {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.total__symbol {
  padding-bottom: 4px;
  font-size: 15px;
  color: var(--cs-mut);
}

.total__number {
  font-size: clamp(26px, 5vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Sisa dompet ditandai batang dua bagian: yang disisihkan dan yang bisa
   dipakai. Ini inti pesannya, jadi ia tidak boleh sekadar teks. */
.split {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--cs-track);
}

.split__saved {
  background: var(--cs-dim);
}

/* Hijau dipakai persis seperti di aplikasi: menandai keadaan sehat dan uang
   yang memang masih bisa dipakai. */
.split__free {
  background: var(--cs-pos);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--cs-mut);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--cs-dim);
}

.legend li:last-child i {
  background: var(--cs-pos);
}

/* ---- Demonstrasi Catat Banyak -------------------------------------------- */

.demo {
  display: grid;
  gap: 16px;
  align-items: start;
}

@media (min-width: 900px) {
  .demo {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.1fr);
    gap: 0;
  }
}

.demo__arrow {
  display: grid;
  place-items: center;
  color: var(--cs-faint);
}

.demo__arrow svg {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}

@media (min-width: 900px) {
  .demo__arrow {
    align-self: center;
    padding-block: 0;
  }
  .demo__arrow svg {
    transform: none;
  }
}

.typed {
  margin: 0;
  /* Tinggi dikunci setara empat baris supaya kotaknya tidak mengerut saat
     teksnya masih diketik dan halaman tidak ikut bergeser. */
  min-height: calc(8em + 32px);
  padding: 16px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 2;
  color: var(--cs-body);
  white-space: pre-wrap;
  word-break: break-word;
}

.typed.is-typing::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 3px;
  transform: translateY(2px);
  background: var(--cs-ink);
  animation: kedip 900ms steps(2, start) infinite;
}

@keyframes kedip {
  50% {
    opacity: 0;
  }
}

.check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--cs-line);
  background: var(--cs-soft);
  font-size: 12px;
  color: var(--cs-mut);
}

/* Dua mata uang dijaga terbaca sebagai dua angka terpisah, bukan satu untaian
   panjang, karena justru itu yang ingin ditunjukkan bagian ini. */
.check__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.check__totals span + span {
  padding-left: 10px;
  border-left: 1px solid var(--cs-line);
}

.check__totals span {
  white-space: nowrap;
}

.demo .row, .demo .check__totals {
  transition: opacity 300ms ease, transform 300ms ease;
}
.demo-row--pending { opacity: 0; visibility: hidden; transform: translateY(6px); }
.demo__savebar { padding: 14px 16px 4px; display: grid; gap: 8px; }
.demo__save {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--cs-ink);
  color: var(--cs-paper, #fff);
  font-size: 13px;
  font-weight: 600;
  transition: transform 200ms ease, background 300ms ease;
}
.demo[data-stage="typing"] .demo__save { background: var(--cs-soft); color: var(--cs-mut); }
.demo[data-stage="pressing"] .demo__save { transform: scale(.97); }
.demo[data-stage="pressing"] .demo__save::after {
  content: ""; position: absolute; right: 22%; width: 24px; height: 24px;
  border: 2px solid #fff; border-radius: 50%; background: #ffffff30;
}
.demo[data-stage="saved"] .demo__save { background: #e9f2eb; color: var(--cs-pos); }
.demo .demo-row--income .row__icon { background: #e9f2eb; color: var(--cs-pos); }
.demo .demo-row--income .row__icon svg { transform: rotate(180deg); }
.demo .demo-row--income .row__value { color: var(--cs-pos); }
.demo .check { flex-wrap: wrap; }
.demo .check__totals { display: grid; gap: 4px; }
.demo .check__totals span + span { border: 0; padding-left: 0; }
.demo .check__totals span { white-space: normal; }
.demo[data-stage="saved"] [data-demo-status] { color: var(--cs-pos); }
.demo__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px; }
.demo-motion-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid var(--cs-line); border-radius: 999px; background: var(--cs-card); color: var(--cs-body); font: inherit; font-size: 12px; cursor: pointer; }
.demo-motion-toggle:focus-visible { outline: 2px solid var(--cs-link); outline-offset: 3px; }
.demo__steps { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--cs-mut); }
.demo__steps span { padding: 6px 10px; border-radius: 999px; }
.demo__steps .is-current { background: var(--cs-ink); color: #fff; }
.demo[data-motion="paused"] .typed::after { animation-play-state: paused; }
@media (max-width: 559px) {
  .demo .check { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo .row, .demo .check__totals, .demo__save { transition: none; }
}

/* ---- Bagian hasil --------------------------------------------------------

   Satu-satunya bidang gelap selebar layar. Ia jadi puncak halaman: sebelum
   dan sesudahnya krem, jadi mata punya tempat berhenti. Bentuknya sengaja
   meniru panel saldo di aplikasi supaya langsung dikenali. */

.band {
  padding-block: 64px;
  background: var(--cs-panel);
  color: var(--cs-panel-ink);
  border-block: 1px solid transparent;
}

@media (min-width: 900px) {
  .band {
    padding-block: 96px;
  }
}

.band__head {
  max-width: 58ch;
  margin-bottom: 28px;
}

.eyebrow--on-band,
.lead--on-band {
  color: var(--cs-panel-mut);
}

.band__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px;
  border: 1px solid rgba(250, 247, 241, 0.14);
  border-radius: var(--r-lg);
  background: rgba(250, 247, 241, 0.05);
}

@media (min-width: 900px) {
  .band__panel {
    padding: 28px;
  }
}

.band__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.band__label {
  display: block;
  margin-bottom: 2px;
  font-size: 12.5px;
  color: var(--cs-panel-mut);
}

.band__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.band__value .num {
  font-size: clamp(44px, 9vw, 62px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.band__max {
  font-size: 13px;
  color: var(--cs-panel-mut);
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-inline: 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.pill--ok {
  background: color-mix(in srgb, var(--cs-band-pos) 20%, transparent);
  color: var(--cs-band-pos);
}

.band__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.band__line strong {
  font-weight: 500;
}

.stats {
  display: grid;
  gap: 12px;
}

@media (min-width: 720px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--r-sm);
  background: rgba(250, 247, 241, 0.07);
}

.stat__label {
  font-size: 11.5px;
  color: var(--cs-panel-mut);
}

.stat__value {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.stat__note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--cs-panel-mut);
}

.stat__track {
  position: relative;
  height: 6px;
  margin-top: 2px;
  border-radius: 99px;
  background: rgba(250, 247, 241, 0.16);
  overflow: hidden;
}

.stat__track span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 99px;
  background: var(--cs-band-pos);
  transition: width 900ms cubic-bezier(0.2, 0, 0, 1);
}

.ok {
  color: var(--cs-band-pos);
}

.band__foot {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--cs-panel-mut);
}

/* ---- Dua kolom bergantian ------------------------------------------------ */

.duo {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }

  .duo--flip .duo__visual {
    order: -1;
  }
}

.duo__text p {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--cs-body);
  text-wrap: pretty;
}

.list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--cs-body);
}

.list li {
  display: flex;
  gap: 10px;
}

.list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--cs-dim);
}

.quote {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--cs-dim);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cs-ink);
}

/* ---- Jatah --------------------------------------------------------------- */

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--cs-seg);
}

.seg span {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cs-body);
}

.seg span[aria-current="true"] {
  background: var(--cs-acc);
  color: var(--cs-on-acc);
}

.meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meter__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 13px;
  color: var(--cs-body);
}

.meter__line > * {
  white-space: nowrap;
}

.track {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: var(--cs-track);
  overflow: hidden;
}

.track span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 99px;
  background: var(--cs-acc);
}

.track--thin {
  height: 6px;
}

/* Kartu ini memperlihatkan kedua mode sekaligus, padahal segmennya menunjuk
   satu. Tanpa label ini, daftar kategori di bawah terbaca seperti bagian dari
   mode Simpel dan justru membingungkan. */
.mode-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-faint);
}

.cats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--cs-body);
}

/* ---- Fitur pendukung ------------------------------------------------------ */

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

@media (min-width: 820px) {
  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trio .ui__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 132px;
}

.trio h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
}

.trio p {
  margin: 0;
  font-size: 13.5px;
  color: var(--cs-body);
}

.mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-sm);
  background: var(--cs-soft);
  font-size: 12px;
  color: var(--cs-body);
}

.mini__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mini__line > span:last-child {
  white-space: nowrap;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-inline: 10px;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  background: var(--cs-card);
  font-size: 11.5px;
  color: var(--cs-body);
}

.chip[aria-current="true"] {
  background: var(--cs-acc);
  border-color: var(--cs-acc);
  color: var(--cs-on-acc);
}

/* Baris padat berisi fitur yang tidak perlu bagian sendiri. Jarak 1px di atas
   latar segaris membuat pemisahnya setipis rambut tanpa border ganda. */
.strip {
  display: grid;
  gap: 1px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-lg);
  background: var(--cs-line);
  overflow: hidden;
}

@media (min-width: 640px) {
  .strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.strip__item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--cs-card);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cs-mut);
}

.strip__item strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cs-ink);
}

.strip__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--cs-chip);
  color: var(--cs-body);
}

.strip__icon svg {
  width: 15px;
  height: 15px;
}

/* ---- Rangkuman pengalaman pengguna ---- */

.stories-section {
  background: var(--cs-bg);
}

.stories-intro {
  display: grid;
  gap: 18px;
  margin-bottom: 30px;
}

.stories-intro .h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.14;
  text-wrap: initial;
}

.stories-intro .h2 span { color: var(--cs-acc); }

.stories-intro__text {
  max-width: 42ch;
  margin: 0;
  color: var(--cs-body);
  font-size: 15px;
  line-height: 1.7;
}

.stories {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.stories::-webkit-scrollbar { display: none; }

.story-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 0 calc(100% - 24px);
  scroll-snap-align: start;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--cs-line);
  border-radius: 24px;
  background: var(--cs-card);
  color: var(--cs-panel);
}

.story-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
}

.story-card__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cs-panel);
  color: #fffdf7;
  font-size: 11px;
  font-weight: 700;
}

.story-card__avatar--sand { background: #e8e1d4; color: #5f594e; }
.story-card__avatar--sage { background: #d9e1cf; color: #40563e; }
.story-card__author > span:last-child { min-width: 0; }

.story-card__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cs-ink);
}

.story-card__role {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--cs-mut);
}

.story-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cs-ink);
  overflow-wrap: anywhere;
}

.stories-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #64715e;
}

.stories-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.stories-controls:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.stories-controls__count { margin-right: 6px; font-size: 12px; color: var(--cs-sage-ink); }
.stories-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #cbd6c4;
  border-radius: 50%;
  background: transparent;
  color: var(--cs-panel);
  cursor: pointer;
}
.stories-controls button:hover:not(:disabled) { background: #e1e9db; }
.stories-controls button:disabled { opacity: .35; cursor: default; }
.stories-controls svg { width: 18px; height: 18px; }
[data-story-prev] svg { transform: rotate(180deg); }

@media (min-width: 720px) {
  .stories-intro {
    grid-template-columns: 1.15fr 1fr;
    align-items: end;
    gap: 40px;
    margin-bottom: 36px;
  }
  .stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .stories-controls:not([hidden]) { display: none; }
  .story-card { padding: 24px; }
}

@media (min-width: 1050px) {
  .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .story-card { padding: 28px; }
}

/* ---- Langkah -------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 16px;
  counter-reset: langkah;
}

@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-lg);
  background: var(--cs-card);
  box-shadow: var(--cs-shadow);
}

.step__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--cs-acc);
  color: var(--cs-on-acc);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11.5px;
}

.step p {
  margin: 0;
  font-size: 13.5px;
  color: var(--cs-body);
}

/* ---- FAQ ------------------------------------------------------------------ */

.faq {
  border: 1px solid var(--cs-line);
  border-radius: var(--r-lg);
  background: var(--cs-card);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}

.faq details + details {
  border-top: 1px solid var(--cs-line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 17px;
  font-weight: 400;
  color: var(--cs-faint);
}

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

.faq p {
  margin: 0;
  padding: 0 20px 18px;
  max-width: 70ch;
  font-size: 13.5px;
  color: var(--cs-body);
}

/* ---- Penutup & footer ------------------------------------------------------ */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  border-radius: var(--r-lg);
  background: var(--cs-panel);
  color: var(--cs-panel-ink);
  text-align: center;
}

.closing p {
  margin: 0;
  max-width: 44ch;
  font-size: 14.5px;
  color: var(--cs-panel-mut);
}

.footer {
  padding-block: 28px 40px;
  border-top: 1px solid var(--cs-line);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  font-size: 12.5px;
  color: var(--cs-mut);
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.footer a {
  color: var(--cs-mut);
}

.footer a:hover {
  color: var(--cs-ink);
}

/* ---- Halaman dokumen: privasi, ketentuan, 404 ---------------------------- */

.doc {
  padding-block: 40px 72px;
  max-width: 760px;
}

.doc__kembali {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--cs-link);
  text-decoration: none;
}

.doc__tanggal {
  margin: 10px 0 24px;
  font-size: 12.5px;
  color: var(--cs-faint);
}

.doc h2 {
  margin: 34px 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.doc p,
.doc li {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cs-body);
}

.doc p {
  margin: 0 0 12px;
}

.doc ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.doc li {
  margin-bottom: 7px;
}

.doc strong {
  color: var(--cs-ink);
}

.doc a {
  color: var(--cs-link);
}

/* Kotak ringkasan di kepala dokumen: tiga kalimat yang paling ingin diketahui
   orang sebelum membaca sisanya. */
.ringkas {
  margin: 0 0 28px;
  padding: 18px 20px;
  border: 1px solid var(--cs-line);
  border-radius: var(--r-md);
  background: var(--cs-soft);
}

.ringkas ul {
  margin: 0;
  padding-left: 18px;
}

.ringkas li:last-child {
  margin-bottom: 0;
}

.kosong {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 72px 96px;
}

/* ---- Gerak ---------------------------------------------------------------

   Aturan mainnya: halaman ditulis dalam keadaan selesai. Skrip hanya
   menyembunyikan elemen yang memang masih di bawah lipatan saat halaman
   dibuka, lalu memunculkannya kembali ketika digulir ke sana. Tanpa
   JavaScript, atau saat pengguna meminta gerak dikurangi, semuanya tampil
   utuh sejak bingkai pertama. */

[data-reveal] {
  transition:
    opacity 520ms cubic-bezier(0.2, 0, 0, 1),
    transform 520ms cubic-bezier(0.2, 0, 0, 1);
}

[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(14px);
}

.track span,
.split > span {
  transition: width 900ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .track span,
  .split > span {
    transition: none;
  }

  [data-reveal].is-hidden {
    opacity: 1;
    transform: none;
  }

  .typed.is-typing::after {
    display: none;
  }
}