/* Article pages (cara-hitung-laba, tabel-biaya-marketplace): extends .legal in site.v2.css. Change the file name when this changes (assets are immutable). */
.article { max-width: 760px; }
.article h1 { font-size: clamp(28px, 3vw + 14px, 42px); line-height: 1.12; }
.article h2 { font-size: clamp(22px, 1.6vw + 14px, 28px); font-weight: 800; margin: 40px 0 8px; }
.article h3 { margin: 18px 0 4px; color: var(--navy-950); }
.article .lead { font-size: var(--fs-lede); }
.article .formula { background: var(--ground); border: 1px solid var(--slate-200); border-left: 4px solid var(--blue-600); border-radius: 12px; padding: 14px 18px; font-weight: 700; color: var(--navy-950); }
.article .src, .article caption { font-size: var(--fs-small); color: var(--slate-500); }
.article .cta { margin-top: 20px; padding: 20px; background: var(--ground); border: 1px solid var(--slate-200); border-radius: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tbl-scroll { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--slate-200); border-radius: 12px; }
.article table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.45; }
.article caption { text-align: left; padding: 10px 12px 6px; font-weight: 600; caption-side: top; }
.article th, .article td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--slate-200); color: var(--slate-600); }
.article thead th { background: var(--ground); color: var(--navy-950); font-weight: 700; border-top: 0; }
.article tbody th { color: var(--navy-950); font-weight: 600; }
.article .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.article tr.total th, .article tr.total td { font-weight: 800; color: var(--navy-950); background: var(--ground); }
.article .cats { min-width: 560px; }
@media (min-width: 1100px) { .article .tbl-scroll.wide { margin-inline: -80px; } }
@media (max-width: 759px) {
  .article .cats tbody th, .article .cats thead th:first-child { position: sticky; left: 0; background: var(--paper); }
  .article .cats thead th:first-child { background: var(--ground); }
  .article .cta .btn { width: 100%; }
}