/* ============================================================
   Emblem role (owner 2026-11-02: "Badge animasi mewah … role tertinggi paling mewah role solar").
   Pelat heksagon logam per tingkat roleCosmetics: graphite (Member) → perak (Community) → zamrud (Community Pro)
   → aurora biru-ungu (Trader) → Solar ungu pekat + aksen emas (bingkai, ikon, mahkota) + aura berputar.
   Gerak (skill animate): hanya transform/opacity. Kilau sekali saat tampil (bukan Solar), cahaya hover = transisi
   opacity 200 ms bergerbang pointer halus, Solar = aura linear 9 s + kilau berkala 5,5 s. Baris papan di luar layar
   dijeda (.kf-tier-idle dari utils/tierRowMotion.js); reduce-motion & html.perf-lite = tanpa animasi.
   ============================================================ */
.kf-emblem {
  --kf-emblem-size: 24px;
  --kf-emblem-ease: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--kf-emblem-size);
  height: var(--kf-emblem-size);
  flex: none;
  vertical-align: middle;
  line-height: 0;
  isolation: isolate;
}
.kf-emblem--xs { --kf-emblem-size: 20px; }
.kf-emblem--sm { --kf-emblem-size: 24px; }
.kf-emblem--md { --kf-emblem-size: 32px; }
.kf-emblem--lg { --kf-emblem-size: 56px; }
.kf-emblem--xl { --kf-emblem-size: 72px; }

.kf-emblem-plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--kf-emblem-rim);
}
.kf-emblem-plate::before {
  content: '';
  position: absolute;
  inset: 9%;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--kf-emblem-face);
}
.kf-emblem-icon {
  position: relative;
  width: 50%;
  height: 50%;
  color: var(--kf-emblem-ink);
}
.kf-emblem-shine {
  position: absolute;
  inset: -20% -70%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.58) 50%, transparent 60%);
  opacity: 0;
  transform: translateX(-130%);
  pointer-events: none;
  animation: kf-emblem-shine 1.1s var(--kf-emblem-ease) 0.2s 1 both;
}
.kf-emblem::after {
  content: '';
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--kf-emblem-glow), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .kf-emblem:hover::after { opacity: 0.7; }
}
.kf-emblem-aura { display: none; }

/* Tangga warna (sejalan styles/colorName.css). */
.kf-emblem--member {
  --kf-emblem-rim: linear-gradient(145deg, #9aa3ad, #4b535c 55%, #2a3036);
  --kf-emblem-face: linear-gradient(160deg, #3a4148, #1f2429);
  --kf-emblem-ink: #d6dbe0;
  --kf-emblem-glow: rgba(160, 170, 180, 0.45);
}
.kf-emblem--community {
  --kf-emblem-rim: linear-gradient(145deg, #f4f7fb, #aeb8c6 45%, #6d7785);
  --kf-emblem-face: linear-gradient(160deg, #dfe5ee, #8f9aa8);
  --kf-emblem-ink: #2f3742;
  --kf-emblem-glow: rgba(195, 204, 217, 0.5);
}
.kf-emblem--community_pro {
  --kf-emblem-rim: linear-gradient(145deg, #b8ffe6, #19c99a 45%, #077a5b);
  --kf-emblem-face: linear-gradient(160deg, #0fbf8f, #05593f);
  --kf-emblem-ink: #eafff7;
  --kf-emblem-glow: rgba(15, 191, 143, 0.5);
}
.kf-emblem--trader {
  --kf-emblem-rim: linear-gradient(145deg, #cfe4ff, #5aa9ff 35%, #7c6cff 65%, #b07bff);
  --kf-emblem-face: linear-gradient(150deg, #3b6fd6, #5b3fd8 55%, #7c3aed);
  --kf-emblem-ink: #f3f0ff;
  --kf-emblem-glow: rgba(124, 108, 255, 0.55);
}
.kf-emblem--solar {
  --kf-emblem-rim: linear-gradient(145deg, #ffe7a3, #ffc74d 30%, #b8860b 60%, #ffd977);
  --kf-emblem-face: linear-gradient(155deg, #7b2ff7, #a855f7 45%, #c026d3 75%, #5b1a9e);
  --kf-emblem-ink: #ffe8a6;
  --kf-emblem-glow: rgba(240, 168, 255, 0.6);
}

/* Solar: aura conic ungu-emas berputar, kilau berkala, mahkota emas. */
.kf-emblem--solar .kf-emblem-aura {
  display: block;
  position: absolute;
  inset: -26%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(240, 168, 255, 0.55) 40deg, transparent 95deg,
    rgba(255, 199, 77, 0.5) 180deg, transparent 235deg, rgba(168, 85, 247, 0.5) 300deg, transparent 360deg);
  opacity: 0.8;
  will-change: transform;
  animation: kf-emblem-aura 9s linear infinite;
}
.kf-emblem--solar .kf-emblem-shine {
  animation: kf-emblem-shine-loop 5.5s var(--kf-emblem-ease) 0.4s infinite;
}
.kf-emblem-crown {
  position: absolute;
  top: -16%;
  left: 50%;
  z-index: 1;
  width: 42%;
  height: 42%;
  color: #ffc74d;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}
.kf-emblem-crown-icon { display: block; width: 100%; height: 100%; }

@keyframes kf-emblem-shine {
  0% { transform: translateX(-130%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}
@keyframes kf-emblem-shine-loop {
  0% { transform: translateX(-130%); opacity: 0; }
  4% { opacity: 1; }
  22% { transform: translateX(130%); opacity: 0; }
  100% { transform: translateX(130%); opacity: 0; }
}
@keyframes kf-emblem-aura {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Emblem diam (kepala tabel, legenda): gerak hanya untuk emblem yang menjadi fokus kartu. */
.kf-emblem--still, .kf-emblem--still *, .kf-emblem--still *::before, .kf-emblem--still *::after { animation: none !important; }
.kf-emblem--still .kf-emblem-aura { display: none; }

/* Baris papan di luar layar: animasi dijeda (penjeda IntersectionObserver yang sudah ada). */
.kf-tier-idle .kf-emblem, .kf-tier-idle .kf-emblem *, .kf-tier-idle .kf-emblem *::before, .kf-tier-idle .kf-emblem *::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .kf-emblem, .kf-emblem *, .kf-emblem *::before, .kf-emblem *::after { animation: none !important; }
}
html.perf-lite .kf-emblem, html.perf-lite .kf-emblem *, html.perf-lite .kf-emblem *::before, html.perf-lite .kf-emblem *::after { animation: none !important; }

/* ============================================================
   /pricing NEW STYLE — bagian "Roles & benefits" (owner 2026-11-02: "Jelaskan Benefits semua role … secara detail").
   Pita gelap di antara konfigurator (paper) dan assurances (white): tangga lima role (Member → Solar) lalu tabel lengkap
   di dalam <details>. Hanya token NEW STYLE (:root index-*.css) dan kosakata halaman (hairline kolom seperti
   assurances, kepala h2 + lead seperti assurances). Gerak = reveal halaman yang sudah ada (data-reveal) + emblem.
   Sumber berkas ini digabung dengan roleEmblem.css oleh scripts/renderRoleBenefitsSection.mjs.
   ============================================================ */
.pricing-roles {
  /* Token bagian (tinta & bidang di atas pita night) — nilai tidak diulang di aturan. */
  --roles-ink-2: oklch(84% .015 260);
  --roles-ink-row: oklch(90% .01 260);
  --roles-mark-off: oklch(52% .02 260);
  --roles-fill-hover: oklch(20% .03 265);
  --roles-fill-active: oklch(24% .035 265);
  color: var(--color-white);
  background: var(--color-night);
  padding-block: var(--space-section);
  scroll-margin-top: 7rem;
}
.pricing-roles__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .45fr);
  align-items: end;
  gap: clamp(2rem, 8vw, 8rem);
}
.pricing-roles__heading h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 570;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.pricing-roles__heading p {
  margin: 0;
  color: var(--color-slate);
  font-size: 1.05rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ── Tangga lima role ── */
.pricing-roles__ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--color-line-dark);
}
.pricing-roles__role {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 2rem clamp(1rem, 1.6vw, 1.75rem) 2.25rem;
  border-left: 1px solid var(--color-line-dark);
}
.pricing-roles__role:first-child { border-left: 0; padding-left: 0; }
.pricing-roles__ident { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pricing-roles__ident h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 570;
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.pricing-roles__access {
  margin: .25rem 0 0;
  color: var(--color-slate);
  font: 500 var(--text-data)/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.pricing-roles__role--solar .pricing-roles__access { color: var(--color-gold); }
.pricing-roles__how {
  margin: 0;
  color: var(--roles-ink-2);
  font-size: .95rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.pricing-roles__highlights {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--color-line-dark);
  font-size: .9rem;
  line-height: 1.45;
}
.pricing-roles__highlights li { display: flex; flex-wrap: wrap; column-gap: .5rem; }
.pricing-roles__detail {
  color: var(--color-slate);
  font: 500 var(--text-data)/1.45 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Tabel lengkap (terlipat; satu klik) ── */
.pricing-roles__compare {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.pricing-roles__compare > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--control-height);
  padding: 1rem 1.25rem;
  list-style: none;
  cursor: pointer;
  font-weight: 560;
  transition: background-color var(--motion-hover) var(--ease-out);
}
.pricing-roles__compare > summary::-webkit-details-marker { display: none; }
.pricing-roles__compare > summary > span:first-child { flex: 1; min-width: 0; }
.pricing-roles__count { color: var(--color-slate); font: 500 var(--text-data)/1.4 var(--font-mono); }
.pricing-roles__compare > summary::after {
  content: '';
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--motion-hover) var(--ease-out);
}
.pricing-roles__compare[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.pricing-roles__compare > summary:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .pricing-roles__compare > summary:hover { background-color: var(--roles-fill-hover); }
}
.pricing-roles__compare > summary:active { background-color: var(--roles-fill-active); }
.pricing-roles-scroll { overflow-x: auto; border-top: 1px solid var(--color-line-dark); }
.pricing-roles-scroll:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: -2px; }
.pricing-roles__table {
  width: 100%;
  min-width: 60rem;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.45;
}
.pricing-roles__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pricing-roles__table th,
.pricing-roles__table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-line-dark);
  text-align: left;
  vertical-align: top;
}
.pricing-roles__table thead th {
  color: var(--color-slate);
  font: 600 var(--text-label)/1.3 var(--font-sans);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  vertical-align: bottom;
}
.pricing-roles__table thead small {
  display: block;
  margin-top: .25rem;
  color: var(--color-slate);
  font: 500 .75rem/1.3 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}
.pricing-roles__col { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-white); }
.pricing-roles__table th[scope="rowgroup"] {
  padding-top: 1.5rem;
  color: var(--color-slate);
  font: 600 var(--text-label)/1.3 var(--font-sans);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.pricing-roles__table thead th:first-child,
.pricing-roles__table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 15rem;
  background: var(--color-night);
  box-shadow: 1px 0 0 var(--color-line-dark);
}
.pricing-roles__table tbody th[scope="row"] { font-weight: 500; color: var(--roles-ink-row); }
/* Tanda sel: satu elemen per sel; ikon = masker (data URI dibangkitkan generator dari ikon Iconify). */
.pricing-roles__mark { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; }
.pricing-roles__mark::before,
.pricing-roles__mark.is-energy::after {
  content: '';
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.pricing-roles__mark.is-yes { color: var(--color-positive); }
.pricing-roles__mark.is-no { color: var(--roles-mark-off); }
.pricing-roles__mark.is-energy::after { background: var(--color-gold); }
.pricing-roles__mark.is-energy-only { color: var(--color-gold); }
.pricing-roles__cell-detail {
  display: block;
  margin-top: .25rem;
  color: var(--color-slate);
  font: 500 .8rem/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pricing-roles__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--color-slate);
  font-size: .85rem;
  list-style: none;
}
.pricing-roles__legend li { display: inline-flex; align-items: center; gap: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .pricing-roles__compare > summary,
  .pricing-roles__compare > summary::after { transition: none; }
}

/* Lebar sedang: lima kolom terlalu sempit → satu role per baris (identitas kiri, sorotan kanan). */
@media (max-width: 1100px) {
  .pricing-roles__ladder { grid-template-columns: 1fr; }
  .pricing-roles__role {
    display: grid;
    grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 1rem 2.5rem;
    padding: 1.75rem 0;
    border-left: 0;
    border-top: 1px solid var(--color-line-dark);
  }
  .pricing-roles__role:first-child { border-top: 0; }
  .pricing-roles__ident, .pricing-roles__how { grid-column: 1; }
  .pricing-roles__highlights { grid-column: 2; grid-row: 1 / span 2; padding-top: 0; border-top: 0; }
}
/* Label summary satu baris di HP: jumlah fitur disembunyikan di layar sempit (gate klik dua baris). */
@media (max-width: 480px) {
  .pricing-roles__count { display: none; }
}
@media (max-width: 760px) {
  .pricing-roles__heading { grid-template-columns: 1fr; }
  .pricing-roles__role { grid-template-columns: 1fr; }
  .pricing-roles__highlights { grid-column: 1; grid-row: auto; padding-top: 1rem; border-top: 1px solid var(--color-line-dark); }
  .pricing-roles__table thead th:first-child,
  .pricing-roles__table tbody th[scope="row"] { min-width: 10.5rem; }
}

/* Masker tanda sel (dibangkitkan dari ikon Iconify tervendor di scripts/renderRoleBenefitsSection.mjs). */
.pricing-roles__mark.is-yes::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m232.49%2080.49l-128%20128a12%2012%200%200%201-17%200l-56-56a12%2012%200%201%201%2017-17L96%20183L215.51%2063.51a12%2012%200%200%201%2017%2017Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m232.49%2080.49l-128%20128a12%2012%200%200%201-17%200l-56-56a12%2012%200%201%201%2017-17L96%20183L215.51%2063.51a12%2012%200%200%201%2017%2017Z%22%2F%3E%3C%2Fsvg%3E"); }
.pricing-roles__mark.is-no::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M228%20128a12%2012%200%200%201-12%2012H40a12%2012%200%200%201%200-24h176a12%2012%200%200%201%2012%2012%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M228%20128a12%2012%200%200%201-12%2012H40a12%2012%200%200%201%200-24h176a12%2012%200%200%201%2012%2012%22%2F%3E%3C%2Fsvg%3E"); }
.pricing-roles__mark.is-energy::after, .pricing-roles__mark.is-energy-only::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m213.85%20125.46l-112%20120a8%208%200%200%201-13.69-7l14.66-73.33l-57.63-21.64a8%208%200%200%201-3-13l112-120a8%208%200%200%201%2013.69%207l-14.7%2073.41l57.63%2021.61a8%208%200%200%201%203%2012.95Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m213.85%20125.46l-112%20120a8%208%200%200%201-13.69-7l14.66-73.33l-57.63-21.64a8%208%200%200%201-3-13l112-120a8%208%200%200%201%2013.69%207l-14.7%2073.41l57.63%2021.61a8%208%200%200%201%203%2012.95Z%22%2F%3E%3C%2Fsvg%3E"); }