/* Situs publik Renra — mobile-first. Palet: kuning #F5C518, hitam, putih, abu lembut; font Roboto. Tanpa build step.
   Aturan dasar berlaku untuk ponsel; @media (min-width: …) memperluasnya ke tablet dan desktop.
   Tata bahasa visualnya: progresi + gerak + asimetri (angka besar berundak, kolom tak setara, visual yang menjorok keluar kolom). */
:root {
  --primary: #F5C518; --primary-hover: #E3B40F; --primary-soft: #FFF6D1;
  --ink: #000000; --text: #1A1A1A; --muted: #5F5F5F; --line: #E5E5E5; --soft: #F5F5F5; --bg: #FFFFFF;
  --on-dark: #D6D6D6; --on-dark-muted: #A3A3A3;
  --radius: 16px; --wrap: 72rem; --gutter: 1.25rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
h1, h2, h3 { color: var(--ink); }
img { max-width: 100%; height: auto; }
[id] { scroll-margin-top: 4.5rem; }

/* Header */
.s-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.s-header__inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0.75rem var(--gutter); display: flex; align-items: center; gap: 1rem; }
.s-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 900; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.s-brand__mark { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: var(--primary); color: var(--ink); display: grid; place-items: center; font-size: 1rem; }
.s-brand__logo { width: 2.25rem; height: 2.25rem; object-fit: contain; border-radius: 0.5rem; }
.s-burger { display: flex; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 0.6rem; background: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.s-burger span { display: block; width: 1.1rem; height: 2px; background: var(--ink); position: relative; transition: transform 0.2s, background 0.2s; }
.s-burger span::before, .s-burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: transform 0.2s, top 0.2s; }
.s-burger span::before { top: -6px; } .s-burger span::after { top: 6px; }
.s-header.is-open .s-burger span { background: transparent; }
.s-header.is-open .s-burger span::before { top: 0; transform: rotate(45deg); }
.s-header.is-open .s-burger span::after { top: 0; transform: rotate(-45deg); }
.s-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 0.75rem var(--gutter) 1rem; gap: 0.25rem; }
.s-header.is-open .s-nav { display: flex; }
/* Menu: penanda aktif dan hover berupa garis kuning di bawah teks, bukan
   latar tombol; yang berbentuk tombol cuma ajakan Member Area. */
.s-nav a { text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--muted); padding: 0.75rem 0.85rem; white-space: nowrap; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.45em; transition: color 0.15s, text-decoration-color 0.15s; }
.s-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.s-nav a.is-active { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.s-nav a.s-nav__cta { margin-top: 0.5rem; border: 1px solid var(--ink); border-radius: 0.6rem; color: var(--ink); font-weight: 700; text-align: center; }
.s-nav a.s-nav__cta:hover { background: var(--ink); color: #fff; text-decoration: none; }
/* Dropdown menu: tiga kelompok (Layanan, Produk, Toolkit). Di ponsel jadi
   akordeon di dalam menu hamburger; di layar lebar jadi panel melayang. */
.s-nav { max-height: calc(100vh - 4rem); overflow-y: auto; }
.s-nav__group { display: flex; flex-direction: column; }
.s-nav__group--split { flex-direction: row; flex-wrap: wrap; align-items: center; }
.s-nav__group--split .s-nav__link { flex: 1; }
.s-nav__toggle { display: flex; align-items: center; gap: 0.3rem; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--muted); padding: 0.75rem 0.85rem; white-space: nowrap; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.45em; transition: color 0.15s, text-decoration-color 0.15s; }
.s-nav__toggle:hover, .s-nav__group.is-open > .s-nav__toggle { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.s-nav__toggle.is-active { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
/* Segitiga kecil, bukan chevron: tintanya ikut warna label yang ditemaninya.
   Bentuknya tidak pernah berubah — panel yang terbuka sudah jadi jawabannya
   sendiri, dan penanda yang ikut berputar tiap kursor lewat cuma bikin bar
   terasa gelisah. */
.s-nav__tri { width: 0.3rem; height: 0.3rem; flex: 0 0 auto; }
.s-nav__caret { display: flex; align-items: center; background: none; border: 0; padding: 0.75rem 0.85rem; cursor: pointer; color: var(--muted); }
.s-nav__caret:hover { color: var(--ink); }
.s-nav__panel { display: none; margin: 0 0 0.35rem 0.85rem; padding: 0.15rem 0 0.35rem 0.75rem; border-left: 2px solid var(--line); }
.s-nav__group.is-open > .s-nav__panel { display: block; }
.s-nav__group--split .s-nav__panel { flex-basis: 100%; }
.s-nav__panel-label { display: none; }
.s-nav__grid { list-style: none; margin: 0; padding: 0; }
.s-nav__panel a { display: block; padding: 0.55rem 0.75rem; font-size: 0.92rem; }
.s-nav__grid b { font-weight: 500; }
/* Keterangannya cuma dipakai panel melayang; di laci ponsel ia bikin sesak. */
.s-nav__grid span { display: none; }
.s-nav__panel a.s-nav__all { color: var(--ink); font-weight: 700; }
.s-nav__empty { padding: 0.55rem 0.75rem; font-size: 0.85rem; color: var(--muted); }

/* Kerangka & tipografi */
.s-main { flex: 1; }
.s-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.s-section { padding: 4rem 0; }
.s-eyebrow, .s-intro .s-eyebrow { display: inline-flex; align-items: flex-start; gap: 0.6rem; margin-top: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.s-eyebrow::before { content: ""; flex: 0 0 auto; margin-top: 0.55em; width: 1.25rem; height: 3px; border-radius: 2px; background: var(--primary); }
.s-h1 { margin-top: 1rem; font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.s-h2 { margin-top: 0.85rem; max-width: 22ch; font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.s-h2--big { max-width: 16ch; font-size: 2.15rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.s-h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.s-mark { background: linear-gradient(transparent 58%, var(--primary) 58%); }
.s-lead { margin-top: 1.25rem; max-width: 34rem; font-size: 1.1rem; color: var(--muted); }
.s-lead b { color: var(--ink); }
.s-hero .s-btn { min-height: 3.25rem; padding: 0.9rem 1.9rem; font-size: 1rem; }
.s-hero__trust { margin-top: 1.25rem; font-size: 0.9rem; }
.s-intro { max-width: 38rem; }
.s-intro p { margin-top: 1rem; font-size: 1.05rem; color: var(--muted); }
.s-intro .s-strong { font-size: 1.2rem; font-weight: 500; color: var(--ink); }
.s-note { max-width: 42rem; margin-top: 2.5rem; padding-left: 1.1rem; border-left: 3px solid var(--primary); font-size: 1.05rem; color: var(--text); }
.s-small { font-size: 0.85rem; color: var(--muted); }
.s-muted { color: var(--muted); }
.s-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.s-btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.4rem; min-height: 3rem; padding: 0.8rem 1.6rem; border-radius: 0.75rem; border: 1px solid var(--primary); background: var(--primary); color: var(--ink); font: inherit; font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.s-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.s-btn--ghost { background: #fff; border-color: var(--ink); }
.s-btn--ghost:hover { background: var(--soft); border-color: var(--ink); }
.s-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.s-btn--outline-light:hover { background: transparent; border-color: #fff; }

/* Kontras editorial: satu sisi mendominasi, sisi lain mengikuti lebih rendah */
.s-contrast { display: grid; gap: 2.5rem; }
.s-contrast__aside { max-width: 34rem; }

/* Hero: tersusun vertikal di ponsel, dua kolom tak simetris di desktop */
.s-hero { padding: 2.5rem 0 0; }
.s-hero__figure { position: relative; isolation: isolate; max-width: 20rem; margin: 2.5rem auto 0; }
.s-hero__figure::before { content: ""; position: absolute; inset: 1.25rem -1rem -1rem 1.25rem; background: var(--primary); border-radius: 1.5rem; z-index: -1; }
.s-hero__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.5rem; border: 1px solid var(--line); background: #fff; }
.s-stats { list-style: none; margin: 3.5rem 0 0; padding: 2rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.s-stats strong { display: block; font-size: 1.85rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.s-stats span { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.s-stats--flush { margin-top: 1.5rem; padding-top: 0; border-top: 0; }

/* Cek diri: baris centang yang bisa diklik, sejajar, dipisah garis tipis */
.s-checkrows { list-style: none; max-width: 44rem; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.s-checkrows li { border-bottom: 1px solid var(--line); }
.s-checkrows label { display: grid; grid-template-columns: 1.6rem 2.25rem 1fr; gap: 0.85rem; align-items: start; padding: 1rem 0; cursor: pointer; }
.s-checkrows__box { position: relative; width: 1.6rem; height: 1.6rem; margin-top: 0.1rem; border: 2px solid var(--ink); border-radius: 0.4rem; background: #fff; transition: background 0.15s; }
.s-checkrows__box::after { content: ""; position: absolute; left: 0.45rem; top: 0.15rem; width: 0.45rem; height: 0.85rem; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; }
.s-checkrows input:checked + .s-checkrows__box { background: var(--primary); }
.s-checkrows input:checked + .s-checkrows__box::after { opacity: 1; }
.s-checkrows input:focus-visible + .s-checkrows__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.s-checkrows__num { padding-top: 0.2rem; font-size: 1rem; font-weight: 900; letter-spacing: -0.02em; color: var(--primary); font-variant-numeric: tabular-nums; }
.s-checkrows__text { font-size: 1.1rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.s-checkrows__tally { margin-top: 0.85rem; }
.s-checkrows__tally b { color: var(--ink); }

/* Tangga: rel vertikal di ponsel, anak tangga menanjak makin tinggi di layar lebar */
.s-stairs { list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative; }
.s-stairs::before { content: ""; position: absolute; left: 1.05rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--line); }
.s-stairs li { position: relative; padding: 0 0 1.75rem 3.25rem; }
.s-stairs li:last-child { padding-bottom: 0; }
.s-stairs__num { position: absolute; left: 0; top: 0; width: 2.15rem; height: 2.15rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; background: #fff; border: 2px solid var(--line); color: var(--muted); }
.s-stairs li.is-dark .s-stairs__num { background: var(--ink); border-color: var(--ink); color: var(--primary); }
.s-stairs h3 { padding-top: 0.3rem; font-size: 1.15rem; font-weight: 700; }
.s-stairs p { margin-top: 0.25rem; color: var(--muted); }
.s-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted); }
.s-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.s-legend i { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; border: 2px solid var(--ink); background: #fff; }
.s-legend i.is-dark { background: var(--ink); }

/* Profil titik awal: daftar ringkas */
.s-profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.s-profiles li { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.s-profiles b { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.s-profiles p { margin-top: 0.3rem; font-size: 0.95rem; color: var(--muted); }

/* Kenapa privat: kotak perbandingan group vs privat */
.s-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; }
.s-vs { width: 100%; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.s-vs, .s-vs thead, .s-vs tbody { display: block; }
.s-vs tr { display: grid; grid-template-columns: 1fr 1fr; }
.s-vs thead tr { position: relative; }
.s-vs th, .s-vs td { padding: 0.9rem 1rem; text-align: left; }
.s-vs thead th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.s-vs thead .s-vs__group { color: var(--muted); }
.s-vs thead .s-vs__privat { color: var(--ink); text-align: right; }
.s-vs thead .s-vs__mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0; }
.s-vs__badge { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--ink); color: var(--primary); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.s-vs tbody tr { border-top: 1px solid var(--line); }
.s-vs tbody th.s-vs__mid { order: -1; grid-column: 1 / -1; padding: 0.85rem 1rem 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-vs tbody td { display: flex; gap: 0.6rem; align-items: flex-start; padding-top: 0.5rem; font-size: 0.92rem; line-height: 1.45; }
.s-vs tbody td.s-vs__group { justify-content: flex-end; text-align: right; color: var(--muted); }
.s-vs tbody td.s-vs__privat { font-weight: 700; color: var(--ink); }
.s-vs .s-vs__privat { background: var(--primary-soft); }
.s-vs .s-check { margin-top: 0.1rem; }

/* Daftar bertanda centang */
.s-check { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: 0.15rem; padding: 0.22rem; border-radius: 999px; background: var(--primary); color: var(--ink); }
.s-check--off { background: var(--line); color: var(--muted); }
.s-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.s-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text); }
.s-list--muted li { color: var(--muted); }

/* Mentor: orangnya jadi cerita — potret besar, satu kalimat besar, cerita ringkas, bukti terpilih */
.s-mentor { display: grid; gap: 2.5rem; margin-top: 2rem; }
.s-portrait { position: relative; isolation: isolate; max-width: 20rem; }
.s-portrait::before { content: ""; position: absolute; inset: -0.75rem; transform: rotate(3deg); background: var(--primary-soft); border-radius: 1.75rem; z-index: -1; }
.s-portrait img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1.25rem; border: 1px solid var(--line); background: #fff; }
.s-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.s-role { margin-top: 0.25rem; font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.s-quote, .s-intro .s-quote { margin-top: 1.5rem; font-size: 1.85rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.s-story p { max-width: 36rem; font-size: 1.05rem; color: var(--text); }
.s-story p + p { margin-top: 1rem; }
.s-story b { color: var(--ink); }
.s-bio { margin-top: 0.75rem; max-width: 36rem; color: var(--muted); }
.s-claims { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.s-claims li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.95rem; font-weight: 500; }

/* Bukti besar: satu tangkapan layar yang diberi ruang penuh */
.s-case { margin-top: 2.5rem; }
.s-case img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.s-figcaption { margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted); }
.s-kurikulum { margin-top: 4rem; display: grid; gap: 1.5rem; }
.s-kurikulum h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.s-kurikulum p { margin-top: 0.85rem; color: var(--muted); }
.s-kurikulum img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }

/* Alur: garis waktu — berdiri di ponsel, mendatar empat kolom di desktop */
.s-timeline { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.s-timeline li { position: relative; padding: 0 0 2.25rem 2.5rem; }
.s-timeline li:last-child { padding-bottom: 0; }
.s-timeline li::before { content: ""; position: absolute; left: 0.6rem; top: 0.8rem; bottom: -0.8rem; width: 3px; border-radius: 2px; background: var(--primary); }
.s-timeline li:last-child::before { display: none; }
.s-timeline__dot { position: absolute; left: 0.15rem; top: 0.25rem; width: 1.2rem; height: 1.2rem; border-radius: 999px; background: var(--ink); }
.s-timeline__num { display: block; font-size: 1.75rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--primary); }
.s-timeline h3 { margin-top: 0.4rem; font-size: 1.15rem; }
.s-timeline .s-tagline { margin-top: 0.15rem; font-size: 0.92rem; font-weight: 500; color: var(--text); }
.s-timeline .s-tagline + p { margin-top: 0.6rem; color: var(--muted); }

/* Di dalam sesi: peraga jadi fokus, daftar mengiringi */
.s-session { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.s-session .s-profiles { margin-top: 0; }
.s-session .s-note { margin-top: 2rem; }
.s-mock { border-radius: var(--radius); background: var(--ink); color: #fff; overflow: hidden; border: 1px solid var(--ink); }
.s-mock__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.75rem; color: var(--on-dark); }
.s-mock__dots { display: flex; gap: 0.35rem; }
.s-mock__dots i { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.s-mock__time { margin-left: auto; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.s-mock__tag { background: var(--primary); color: var(--ink); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 0.3rem; }
.s-mock__body { padding: 0.9rem; }
.s-mock__screen { background: #fff; color: var(--text); border-radius: 0.8rem; overflow: hidden; }
.s-mock__screen-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.7rem; }
.s-mock__screen-head b { font-weight: 700; }
.s-mock__screen-head span { color: var(--muted); }
.s-mock table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.s-mock th { text-align: left; padding: 0.5rem 1rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }
.s-mock td { padding: 0.6rem 1rem; border-top: 1px solid var(--line); }
.s-mock td.num, .s-mock th.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.s-mock tr.is-focus { background: var(--primary-soft); }
.s-mock__pill { display: inline-block; margin-top: 0.25rem; background: var(--primary); color: var(--ink); font-size: 0.58rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 0.3rem; }
.s-mock__people { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }
.s-mock__person { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.7rem 0.3rem 0.3rem; border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.72rem; color: var(--on-dark); }
.s-mock__person.is-talking { border-color: var(--primary); }
.s-mock__person b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.15); font-size: 0.7rem; }
.s-mock__person.is-talking b { background: var(--primary); color: var(--ink); }

/* Satu wawasan gratis: paragraf pendek dan urutan berpikir */
.s-insight p { color: var(--muted); }
.s-insight p + p { margin-top: 1rem; }
.s-insight b { color: var(--ink); }
.s-insight__ask { list-style: none; margin: 0.75rem 0 1.25rem; padding: 0 0 0 1rem; border-left: 3px solid var(--primary); }
.s-insight__ask li { font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.5; }

/* Peraga dokumen prioritas: daftar berlabel di dalam "layar" peraga */
.s-mock__doc { list-style: none; margin: 0; padding: 0.25rem 0; }
.s-mock__doc li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; padding: 0.6rem 1rem; border-top: 1px solid var(--line); font-size: 0.72rem; line-height: 1.45; }
.s-mock__doc li:first-child { border-top: 0; }
.s-mock__doc b { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0.1rem; }
.s-mock__doc li.is-focus { background: var(--primary-soft); }
.s-mock__doc li.is-focus b { color: var(--ink); }
.s-mock__doc li.is-muted span { color: var(--muted); }

/* Yang didapat: blok hitam mendominasi, daftar berkas mengiringi */
.s-outcomes { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.s-outcomes h3 { font-size: 1.2rem; }
.s-block--dark { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.75rem; }
.s-block--dark h3 { color: #fff; }
.s-block--dark .s-small { color: var(--on-dark-muted); }
.s-block--dark .s-list li { color: var(--on-dark); }

/* Bukti peserta: satu tangkapan layar utama, tetangganya mengintip */
.s-strip { display: flex; align-items: flex-start; gap: 1rem; margin: 2.5rem calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.s-strip::-webkit-scrollbar { display: none; }
.s-strip figure { flex: 0 0 85%; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.s-strip img { display: block; width: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .s-strip { cursor: grab; scroll-behavior: smooth; }
  .s-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
}
.s-strip-bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.s-strip-count { margin-right: auto; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-strip-btn { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; font: inherit; }
.s-strip-btn:hover { border-color: var(--ink); }
.s-strip-btn svg { width: 1.1rem; height: 1.1rem; }

/* Cocok / tidak: sisi "cocok" mendominasi, sisi lain mundur */
.s-fit { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.s-fit h3 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.s-fit h3.is-muted { color: var(--muted); }
.s-fit__yes .s-list { font-size: 1.1rem; gap: 0.9rem; }
.s-fit__yes .s-list li { font-weight: 500; }
.s-fit__no .s-list { font-size: 0.95rem; }

/* Paket: perbandingan editorial berpembatas garis tipis, tanpa kartu */
.s-plans { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.s-plan { display: grid; gap: 1.5rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.s-plan__name { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.s-plan__sessions { margin-top: 0.4rem; font-weight: 700; }
.s-plan__blurb { margin-top: 0.85rem; color: var(--muted); }
.s-plan .s-list { margin-top: 0; font-size: 0.95rem; gap: 0.5rem; }
.s-plan .s-btn { margin-top: 1.5rem; }
.s-plan__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-plan .s-plan__label + .s-list { margin-top: 0.75rem; }
.s-plans__all { margin-top: 1.5rem; max-width: 46rem; font-size: 0.95rem; color: var(--muted); }
.s-plans__all b { color: var(--ink); }
.s-plan--popular .s-eyebrow { margin-bottom: 0.75rem; }

/* Garansi: tenang, jelas, tanpa hiasan */
.s-garansi { max-width: 40rem; margin-top: 2rem; }
.s-garansi svg { width: 5rem; height: 5rem; color: var(--ink); }
.s-garansi h2 { margin-top: 1rem; }
.s-garansi p { margin-top: 0.75rem; color: var(--muted); }
.s-garansi a { font-weight: 700; color: var(--ink); }

/* Tanya jawab: ringkas */
.s-faq { max-width: 42rem; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.s-faq details { border-bottom: 1px solid var(--line); }
.s-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 1rem 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: 0.2rem; color: var(--muted); transition: transform 0.2s; }
.s-faq details[open] summary svg { transform: rotate(45deg); color: var(--ink); }
.s-faq details p { padding: 0 0 1.1rem; font-size: 0.95rem; color: var(--muted); }

/* Klimaks: pita hitam selebar layar, satu pernyataan, satu tombol */
.s-climax { background: var(--ink); color: #fff; padding: 6rem 0; text-align: center; }
.s-climax h2 { max-width: 16ch; margin: 0 auto; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; color: #fff; }
.s-climax p { max-width: 32rem; margin: 1.5rem auto 0; font-size: 1.05rem; color: var(--on-dark); }
.s-climax .s-actions { margin-top: 2.5rem; align-items: stretch; }
.s-climax .s-small { margin-top: 1.5rem; font-size: 0.85rem; color: var(--on-dark-muted); }

/* ── Komponen tanda tangan /konsultan: membaca angka, menentukan prioritas ── */

/* Hero berbingkai garis (bukan blok kuning), dengan chip keterangan di bawah foto */
.s-hero__figure--outline::before { background: transparent; border: 2px solid var(--ink); }
.s-hero__figure--outline figcaption { text-align: center; }
.s-chip { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }
.s-chip i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary); }
.s-chip--light { background: #fff; color: var(--ink); border: 1px solid var(--line); }

/* Ubin metrik: cek diri bergaya dasbor, dipisah garis tipis */
.s-tiles { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.s-tiles li { background: #fff; padding: 1.25rem 1.25rem 1.35rem; }
.s-tiles__label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-tiles__value { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.5rem; font-size: 1.85rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.s-tiles__value i { font-style: normal; font-size: 1.4rem; color: var(--primary); }
.s-tiles p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--muted); }

/* Teks di tengah, untuk bagian yang bentuknya simetris */
.s-center { text-align: center; margin-left: auto; margin-right: auto; }
.s-center .s-h2 { margin-left: auto; margin-right: auto; }
.s-note--center { border-left: 0; padding-left: 0; text-align: center; margin-left: auto; margin-right: auto; font-size: 1.15rem; }

/* Rantai gejala → penyebab → keputusan: diagram tiga kotak, yang terakhir hitam */
.s-chain { list-style: none; margin: 2.5rem auto 0; padding: 0; display: grid; gap: 1.5rem; max-width: 60rem; }
.s-chain li { position: relative; text-align: center; padding: 1.5rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
.s-chain li + li::before { content: "↓"; position: absolute; top: -1.45rem; left: 50%; transform: translateX(-50%); padding: 0 0.35rem; background: #fff; font-size: 1.25rem; font-weight: 900; line-height: 1; color: var(--primary); }
.s-chain h3 { font-size: 1.15rem; }
.s-chain p { margin-top: 0.35rem; color: var(--muted); }
.s-chain li:last-child { background: var(--ink); border-color: var(--ink); }
.s-chain li:last-child h3 { color: #fff; }
.s-chain li:last-child p { color: var(--on-dark); }

/* Kata laporan vs yang di baliknya: gelembung kutipan, lalu kenyataannya */
.s-reveal { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem; }
.s-reveal blockquote { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 1.25rem 1.25rem 1.25rem 0.25rem; font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: var(--ink); background: #fff; }
.s-reveal p { position: relative; margin: 0.85rem 0 0 1.25rem; padding-left: 1.5rem; color: var(--muted); }
.s-reveal p::before { content: "↳"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--primary); }

/* Wawancara: pernyataan besar, avatar bulat, cerita dua kolom, lalu profil singkat */
.s-interview__person { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.s-interview__person img { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; border: 2px solid var(--ink); }
.s-interview__person b { display: block; font-size: 1.05rem; color: var(--ink); }
.s-interview__person span { display: block; font-size: 0.85rem; color: var(--muted); }
.s-interview__story { margin-top: 2rem; }
.s-interview__story p { font-size: 1.02rem; color: var(--text); }
.s-interview__story p + p { margin-top: 1rem; }
.s-interview__story b { color: var(--ink); }
.s-interview__about { display: grid; gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.s-interview__about .s-bio { margin-top: 0.5rem; }
.s-interview__about .s-claims { margin-top: 0; }

/* Buku besar langkah: angka besar sejajar di kiri, panel lengket di kanan */
.s-ledger { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.s-ledger__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.s-ledger__steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.s-ledger__num { font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--primary); }
.s-ledger__steps h3 { font-size: 1.15rem; }
.s-ledger__steps p { margin-top: 0.35rem; color: var(--muted); }
.s-ledger__aside .s-profiles { margin-top: 0; }
.s-ledger__aside .s-note { margin-top: 2rem; }

/* Tumpukan prioritas: tiga tingkat dengan penekanan menurun */
.s-stack__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 3.5rem; }
.s-stack__head h3 { font-size: 1.2rem; }
.s-stack__head .s-chip { margin-top: 0; }
.s-stack { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.s-stack li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; padding: 1.25rem; border: 2px solid var(--ink); border-radius: var(--radius); }
.s-stack__rank { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.s-stack__label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.s-stack p { margin-top: 0.3rem; font-size: 1.02rem; }
.s-stack li:nth-child(1) { background: var(--ink); color: #fff; }
.s-stack li:nth-child(1) .s-stack__rank, .s-stack li:nth-child(1) .s-stack__label { color: var(--primary); }
.s-stack li:nth-child(1) p { color: var(--on-dark); }
.s-stack li:nth-child(2) .s-stack__rank { color: var(--ink); }
.s-stack li:nth-child(2) .s-stack__label { color: var(--muted); }
.s-stack li:nth-child(3) { border: 2px dashed var(--line); color: var(--muted); }
.s-stack li:nth-child(3) .s-stack__rank, .s-stack li:nth-child(3) .s-stack__label { color: var(--muted); }

/* Trio hasil: tiga hal berjajar dengan lingkaran centang besar */
.s-trio { list-style: none; margin: 2.5rem auto 0; padding: 0; display: grid; gap: 1.5rem; max-width: 56rem; }
.s-trio li { text-align: center; }
.s-trio .s-check { display: block; width: 2.75rem; height: 2.75rem; margin: 0 auto 0.75rem; padding: 0.6rem; }
.s-trio b { display: block; font-size: 1.1rem; color: var(--ink); }
.s-trio span { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: var(--muted); }

/* Pita hitam di dalam wrap */
.s-band { margin-top: 3rem; padding: 2rem 1.5rem; border-radius: 1.5rem; background: var(--ink); color: #fff; }
.s-band h3 { font-size: 1.35rem; color: #fff; }
.s-band .s-list { margin-top: 1.25rem; }
.s-band .s-list li { color: var(--on-dark); }

/* Bukti berdampingan: angka bertumpuk di kiri, dasbor di kanan */
.s-evidence { display: grid; gap: 2rem; margin-top: 2.5rem; }
.s-evidence__figures { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.s-evidence__figures li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.s-evidence__figures strong { display: block; font-size: 1.75rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.s-evidence__figures span { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.s-evidence img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* ── Komponen tanda tangan /audit: pemeriksaan yang objektif ── */

/* Hero berbingkai sudut (jendela bidik): empat siku kuning, tanpa blok di belakang */
.s-hero__figure--brackets { padding: 0.9rem; }
.s-hero__figure--brackets::before { display: none; }
.s-hero__figure--brackets .s-hero__img { border-radius: 0.75rem; }
.s-hero__figure--brackets i { position: absolute; width: 2.25rem; height: 2.25rem; border: 4px solid var(--primary); }
.s-hero__figure--brackets i:nth-of-type(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 0.6rem; }
.s-hero__figure--brackets i:nth-of-type(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 0.6rem; }
.s-hero__figure--brackets i:nth-of-type(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 0.6rem; }
.s-hero__figure--brackets i:nth-of-type(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 0.6rem; }

/* Litani: baris-baris pendek bertumpuk, redup, ditutup satu pertanyaan hitam */
.s-litany { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.s-litany li { padding: 0.3rem 0; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; color: var(--muted); }
.s-litany__ask { margin-top: 1.5rem; max-width: 20ch; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }

/* Kuadran: empat titik buta dalam kisi 2×2 yang bersilang garis */
.s-quadrant { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; }
.s-quadrant li { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.s-quadrant__tag { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 0.35rem; background: var(--primary); color: var(--ink); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.s-quadrant p { margin-top: 0.85rem; font-size: 1.05rem; color: var(--text); }

/* Indeks pemeriksaan: enam area bernomor, garis atas tebal */
.s-index { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.s-index li { padding-top: 1rem; border-top: 2px solid var(--ink); }
.s-index__num { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 0.35rem; background: var(--primary); color: var(--ink); font-size: 0.75rem; font-weight: 900; }
.s-index h3 { margin-top: 0.75rem; font-size: 1.05rem; }
.s-index p { margin-top: 0.35rem; font-size: 0.95rem; color: var(--muted); }

/* Stepper: langkah bersegmen dengan batang kuning, segmen terakhir hitam */
.s-stepper { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.s-stepper li { padding-top: 1rem; border-top: 6px solid var(--primary); }
.s-stepper li:last-child { border-top-color: var(--ink); }
.s-stepper__num { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-stepper h3 { margin-top: 0.25rem; font-size: 1.15rem; }
.s-stepper p { margin-top: 0.4rem; color: var(--muted); }
.s-stepper__meta { display: inline-block; margin-top: 0.75rem; font-size: 0.8rem; font-weight: 700; color: var(--ink); }

/* Peta masalah: pernyataan besar + legenda dengan penanda berbeda */
.s-map { display: grid; gap: 2rem; margin-top: 2.5rem; }
.s-map__legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.s-map__legend li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.s-map__legend i { width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); }
.s-map__legend i.is-warn { background: var(--primary); border-color: var(--primary); }
.s-map__legend i.is-leak { background: transparent; border-color: var(--primary); }
.s-map__legend i.is-priority { background: transparent; }
.s-map__legend i.is-hold { background: transparent; border: 2px dashed var(--muted); }

/* Peraga dokumen temuan: lembar kertas bertumpuk, label tingkat temuan */
.s-deliver { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.s-deliver__aside .s-profiles { margin-top: 0; }
.s-deliver__aside .s-list { margin-top: 1.5rem; }
.s-paper { position: relative; isolation: isolate; }
.s-paper::before, .s-paper::after { content: ""; position: absolute; inset: -0.4rem 0.75rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; transform: rotate(-1deg); z-index: -1; }
.s-paper::after { inset: -0.2rem 0.35rem; transform: rotate(1deg); }
.s-paper__sheet { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.s-paper__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--soft); }
.s-paper__head b { display: block; font-size: 0.9rem; color: var(--ink); }
.s-paper__head span { display: block; font-size: 0.72rem; color: var(--muted); }
.s-paper__head .s-chip { margin-top: 0; }
.s-paper__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1rem 1.25rem 0; }
.s-paper__sum div { padding: 0.6rem 0.75rem; border-radius: 0.5rem; background: var(--soft); }
.s-paper__sum small { display: block; font-size: 0.65rem; line-height: 1.2; color: var(--muted); }
.s-paper__sum b { display: block; margin-top: 0.25rem; font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.s-paper__list { list-style: none; margin: 0; padding: 1rem 1.25rem 1.25rem; }
.s-paper__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.s-paper__list li:first-child { padding-top: 0.25rem; border-top: 0; }
.s-paper__tag { display: inline-block; min-width: 5.5rem; margin-top: 0.15rem; padding: 0.2rem 0.5rem; border-radius: 0.3rem; text-align: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: #fff; }
.s-paper__tag.is-mid { background: var(--primary); color: var(--ink); }
.s-paper__tag.is-ok { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.s-paper__list b { display: block; font-size: 0.85rem; color: var(--ink); }
.s-paper__list span { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--muted); }
.s-paper__list em { display: block; margin-top: 0.3rem; font-size: 0.74rem; font-style: normal; color: var(--ink); }

/* Pasangan pertanyaan: audit vs optimasi */
.s-pair { display: grid; gap: 2rem; margin-top: 2.5rem; }
.s-pair > div { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.s-pair__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-pair > div:first-child .s-pair__label { color: var(--ink); }
.s-pair blockquote { margin: 0.75rem 0 0; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.s-pair p { margin-top: 0.75rem; color: var(--muted); }

/* Tiga suara: audit, konsultan, mentor — baris yang sedang dibuka disorot */
.s-voices { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.s-voices li { display: grid; gap: 0.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.s-voices__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-voices li.is-current .s-voices__label { color: var(--ink); }
.s-voices li.is-current .s-voices__label::before { content: "●"; margin-right: 0.4rem; color: var(--primary); }
.s-voices blockquote { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.s-voices li:not(.is-current) blockquote { font-weight: 500; color: var(--muted); }
.s-voices a { font-size: 0.9rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Cocok/belum perlu bertumpuk: daftar cocok dua kolom, yang belum perlu di bawah garis */
.s-fit--stacked .s-fit__no { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* ── Komponen tanda tangan /corporate-training: satu tim, satu cara berpikir ── */

/* Hero bertumpuk: dua bingkai garis bertingkat di belakang foto, seperti tumpukan halaman tim */
.s-hero__figure--stack::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; background: transparent; border: 2px solid var(--ink); border-radius: 1.5rem; }
.s-hero__figure--stack::after { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border: 2px solid var(--line); border-radius: 1.5rem; z-index: -2; }

/* Diagram penyelarasan: banyak suara mengerucut ke satu cara berpikir */
.s-align { margin: 2.5rem auto 0; max-width: 40rem; }
.s-align svg { display: block; width: 100%; height: auto; }
.s-align__label { font-size: 13px; font-weight: 700; fill: var(--ink); }
.s-align__line { stroke: var(--line); stroke-width: 2; fill: none; }
.s-align__line--last { stroke: var(--primary); }
.s-align__dot { fill: var(--ink); }
.s-align__hub { fill: var(--ink); }
.s-align__hub-text { font-size: 12px; font-weight: 700; fill: #fff; text-anchor: middle; }
.s-align__hub-ring { fill: none; stroke: var(--primary); stroke-width: 3; }

/* Peraga silabus: rentang kondisi tim sekarang → dituju di dalam lembar */
.s-paper__range { list-style: none; margin: 0; padding: 0.75rem 1.25rem 0; }
.s-paper__range li { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; gap: 0.75rem; align-items: center; padding: 0.4rem 0; font-size: 0.72rem; }
.s-paper__range span:first-child { color: var(--text); }
.s-paper__range span:last-child { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-paper__track { position: relative; height: 0.4rem; border-radius: 999px; background: var(--soft); }
.s-paper__track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--primary); }
.s-paper__track i::before, .s-paper__track i::after { content: ""; position: absolute; top: 50%; width: 0.6rem; height: 0.6rem; border-radius: 999px; transform: translateY(-50%); background: var(--ink); }
.s-paper__track i::before { left: -0.1rem; }
.s-paper__track i::after { right: -0.1rem; background: var(--primary); border: 2px solid var(--ink); box-sizing: border-box; }
.s-paper__sessions { list-style: none; margin: 0; padding: 0.75rem 1.25rem 1.25rem; }
.s-paper__sessions li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 0.78rem; }
.s-paper__sessions b { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }

/* Kolase kelas: satu foto besar, sisanya mengikuti dengan posisi berbeda-beda */
.s-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2.5rem; }
.s-collage figure { overflow: hidden; border-radius: 0.75rem; aspect-ratio: 4 / 3; background: var(--soft); }
.s-collage figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.s-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Tombol lengket di ponsel: muncul setelah hero terlewat, sembunyi di ajakan akhir */
.s-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.25s; }
.s-sticky.is-visible { transform: none; }
.s-sticky span { flex: 1; font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.s-sticky .s-btn { min-height: 2.75rem; padding: 0.6rem 1rem; font-size: 0.85rem; white-space: nowrap; }
.has-sticky .s-main { padding-bottom: 4.5rem; }

/* Footer */
.s-footer { border-top: 1px solid var(--line); }
.s-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 1.5rem var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; font-size: 0.8rem; color: var(--muted); }
.s-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.s-footer a { text-decoration: none; }
.s-footer a:hover { text-decoration: underline; color: var(--ink); }

/* Muncul perlahan saat digulir; tanpa JS atau bila gerak dikurangi, semua langsung tampil */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* ── Webinar: tiket sesi, agenda bertanggal, panel form ───────────────────
   Halaman tangkap-pendaftar; komponen lain dipinjam dari audit/konsultan. */
.s-chip--primary { background: var(--primary); color: var(--ink); }
.s-chip--primary i { background: var(--ink); }
.s-ticket { position: relative; max-width: 24rem; margin: 2.5rem auto 0; padding: 1.5rem; border: 2px solid var(--ink); border-radius: 1.25rem; background: #fff; }
.s-ticket .s-chip { position: absolute; top: -0.9rem; right: 1.25rem; margin: 0; }
.s-ticket__date { display: flex; align-items: flex-end; gap: 0.75rem; margin-top: 1rem; }
.s-ticket__day { font-size: 4.25rem; font-weight: 900; letter-spacing: -0.05em; line-height: 0.85; color: var(--ink); }
.s-ticket__month { padding-bottom: 0.2rem; font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.s-ticket__month small { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.s-ticket__title { margin-top: 1rem; font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.s-ticket__meta { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 2px dashed var(--line); display: grid; gap: 0.45rem; font-size: 0.9rem; }
.s-ticket__meta li { display: flex; justify-content: space-between; gap: 1rem; }
.s-ticket__meta li span { color: var(--muted); }
.s-ticket__meta li b { color: var(--ink); text-align: right; }
.s-ticket .s-btn { width: 100%; margin-top: 1.25rem; }
.s-ticket--empty { border-style: dashed; }
.s-ticket--empty .s-ticket__title { margin-top: 0.75rem; }
.s-ticket--empty .s-small { margin-top: 0.75rem; }
.s-profiles--row { margin-top: 2.5rem; }
.s-index li > p:first-of-type { margin-top: 0.75rem; font-size: 1.05rem; color: var(--text); }
.s-index li h3 + p { margin-top: 0.35rem; font-size: 0.95rem; color: var(--muted); }
.s-agenda { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.s-agenda li { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.s-agenda__date { text-align: center; }
.s-agenda__day { display: block; font-size: 2.35rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.s-agenda__month { display: block; margin-top: 0.3rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.s-agenda li.is-next .s-agenda__day { color: var(--ink); background: var(--primary); border-radius: 0.5rem; padding: 0.35rem 0; }
.s-agenda h3 { font-size: 1.15rem; }
.s-agenda h3 + p { margin-top: 0.35rem; font-size: 0.95rem; color: var(--muted); }
.s-agenda__meta { display: block; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.s-agenda__meta em { font-style: normal; color: var(--muted); }
.s-agenda .s-btn { grid-column: 2; justify-self: start; }
.s-btn.is-disabled { cursor: not-allowed; opacity: 0.55; }
.s-panel { max-width: 40rem; padding: 1.75rem 1.5rem; border: 2px solid var(--ink); border-radius: 1.25rem; background: #fff; }
.s-panel .s-h2 { margin-top: 0.75rem; font-size: 1.6rem; }
.s-form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.s-field label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.s-input, .s-select { width: 100%; min-height: 3.1rem; padding: 0.75rem 1rem; border: 1px solid var(--ink); border-radius: 0.75rem; background: #fff; color: var(--text); font: inherit; font-size: 1rem; }
.s-input:focus-visible, .s-select:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.s-form__session { padding: 0.9rem 1rem; border-radius: 0.75rem; background: var(--soft); }
.s-form__session b { display: block; color: var(--ink); }
.s-form__session span { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.s-form__submit { min-height: 3.25rem; font-size: 1rem; }
.s-form .s-small { margin-top: -0.25rem; }
.s-error { font-size: 0.85rem; font-weight: 500; color: #b42318; }
.s-field .s-error { margin-top: 0.4rem; }
.s-flash { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 0.75rem; border: 1px solid var(--primary); background: var(--primary-soft); }
.s-flash b { display: block; color: var(--ink); }
.s-flash p { margin-top: 0.35rem; font-size: 0.92rem; color: var(--text); }
.s-flash--muted { border-color: var(--line); background: var(--soft); }
.s-note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }

/* ── Halaman depan: potret pemilik situs + tautan ke seluruh isi situs ──────
   Di ponsel bertumpuk (pengantar, foto, daftar); di layar lebar teksnya
   memegang kolom kiri karena itu yang dibaca duluan, dan potretnya menemani
   dari kolom kanan, rata tengah terhadapnya. */
.s-home { padding-bottom: 4rem; }
/* Sapaan, bukan label: satu-satunya eyebrow yang tidak dikapitalkan, karena
   "Hai, saya Renra." dalam huruf besar semua terbaca sebagai papan nama,
   bukan sebagai orang yang sedang menyapa. */
.s-eyebrow--sapaan { font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
/* Judul beranda dua kalimat, bukan satu frasa pendek seperti halaman lain —
   dan teks sepanjang kalimat minta perlakuan berbeda dari teks sepanjang
   frasa. Ukurannya turun (pada ukuran penuh ia jadi enam baris dan mendorong
   daftar isi situs keluar layar), jaraknya dilonggarkan ke 1.15 mengikuti
   .s-litany yang sudah memakai angka itu di ukuran serupa, dan tebalnya turun
   ke 700: Roboto Black dibuat untuk ledakan pendek, bukan untuk dibaca lima
   baris berturut-turut. */
.s-home .s-h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.s-home__figure { max-width: 20rem; margin: 2.5rem auto 0; }
.s-home__figure img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 1.25rem; }
.s-home__figure .s-figcaption { text-align: center; }
.s-links { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.s-links li { border-bottom: 1px solid var(--line); }
.s-links a { display: grid; gap: 0.2rem; padding: 1.1rem 2rem 1.1rem 0; position: relative; color: inherit; text-decoration: none; }
.s-links a::after { content: "→"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--ink); transition: transform 0.15s; }
.s-links a:hover::after, .s-links a:focus-visible::after { transform: translate(0.25rem, -50%); }
.s-links b { font-size: 1.05rem; color: var(--ink); }
.s-links span { font-size: 0.95rem; color: var(--muted); }
/* Sisa daftar disembunyikan hanya bila JavaScript hidup, jadi tanpa skrip
   semuanya tetap terbaca dan tombolnya tidak pernah muncul. */
.s-links__more { display: none; }
.js .s-links li.is-extra { display: none; }
.js .s-links.is-open li.is-extra { display: list-item; }
.js .s-links__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding: 0.65rem 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.s-links__more:hover { text-decoration-color: var(--ink); }
.s-links__more svg { width: 1rem; height: 1rem; transition: transform 0.2s; }
.s-links__more.is-open svg { transform: rotate(180deg); }

/* ── Tools: formulir panjang, kartu bagian, pilihan, prompt, hasil ────────
   Empat alat bantu gratis (Creative Planner, Campaign Planner, Landing Page
   Analyzer, Keyword Grouper). Halaman kerja, bukan halaman jualan: satu
   kolom sempit, kartu per bagian, tipografi yang sama dengan halaman lain. */
.s-tool { width: 100%; max-width: 46rem; margin: 0 auto; padding: 2.5rem var(--gutter) 5rem; }
.s-tool--wide { max-width: 52rem; }
.s-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.s-crumbs a { color: var(--muted); text-decoration: none; }
.s-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
.s-crumbs .s-chip { margin: 0 0 0 0.25rem; }
.s-tool__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.5rem; }
.s-tool__head .s-chip { margin: 0; }
.s-tool h1 { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.s-tool h1 + p, .s-tool__intro { margin-top: 1rem; max-width: 40rem; font-size: 1.05rem; color: var(--muted); }
.s-tool__intro + .s-tool__intro { margin-top: 0.75rem; }
.s-tool__intro b { color: var(--ink); font-weight: 700; }
.s-aside { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.82rem; font-style: italic; color: var(--muted); }
.s-aside svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; margin-top: 0.15rem; }
.s-errors { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 0.75rem; border-left: 3px solid #b42318; background: #fff5f4; color: #7a271a; font-size: 0.92rem; }
.s-errors b { display: block; color: #7a271a; }
.s-errors ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
.s-errors > p { margin: 0; }
.s-contoh { margin-top: 2rem; }
.s-card { margin-top: 1.5rem; padding: 1.5rem 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.s-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.s-card h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.s-card__count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-card > p { margin-top: 0.5rem; font-size: 0.95rem; color: var(--muted); }
.s-card > p b { color: var(--ink); }
.s-fields { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.s-fields--2 { gap: 1.25rem; }
.s-fields--3 { gap: 1.25rem; }
fieldset.s-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.s-field legend { display: block; padding: 0; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.s-field label em, .s-field legend em { font-style: normal; font-weight: 400; color: var(--muted); }
.s-field .s-help + .s-choices, .s-field legend + .s-choices { margin-top: 0.6rem; }
.s-input--compact { min-height: 2.75rem; padding: 0.6rem 0.85rem; }
textarea.s-input { min-height: 0; line-height: 1.5; resize: vertical; }
.s-help { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.s-help em { font-style: italic; }
.s-choices { display: grid; gap: 0.5rem; }
.s-choice { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.s-choice input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; accent-color: var(--ink); }
.s-choice > span { min-width: 0; font-size: 0.95rem; color: var(--text); }
.s-choice b { display: block; font-size: 0.95rem; color: var(--ink); }
.s-choice small { display: block; margin-top: 0.15rem; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.s-choice:has(input:checked) { border-color: var(--ink); background: var(--primary-soft); }
.s-choice:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.s-choice--bare { padding: 0; border: 0; background: transparent; }
.s-choice--bare:has(input:checked) { background: transparent; }
.s-callout { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 0.75rem; background: var(--soft); font-size: 0.95rem; color: var(--text); }
.s-callout b { color: var(--ink); }
.s-callout--line { background: #fff; border: 1px solid var(--line); }
.s-callout--warn { background: var(--primary-soft); border-left: 3px solid var(--primary); border-radius: 0 0.75rem 0.75rem 0; }
.s-callout--warn + .s-callout--warn { margin-top: 0.6rem; }
.s-callout p + p { margin-top: 0.6rem; }
.s-callout .s-link { margin-top: 0.75rem; display: inline-block; }
.s-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
.s-link--muted { color: var(--muted); font-weight: 500; }
.s-link--muted:hover { color: var(--ink); }
.s-btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 0.6rem; }
.s-btn--block { width: 100%; }
.s-btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.s-btn--dark:hover { background: #222; border-color: #222; }
.s-btn--soft { background: var(--soft); border-color: var(--soft); color: var(--ink); }
.s-btn--soft:hover { background: #eaeaea; border-color: #eaeaea; }
.s-btn:disabled, .s-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
/* Tombol berbentuk teks tetap butuh kotak sentuh yang layak: tanpa padding
   tingginya cuma setinggi satu baris huruf, jauh di bawah 44px yang nyaman
   ditekan jempol. */
.s-btn--text { background: transparent; border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 0.18em; min-height: 0; padding: 0.65rem 0; }
.s-btn--text:hover { background: transparent; border-color: transparent; color: var(--ink); }
.s-tool__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.s-tool__submit { margin-top: 1.5rem; }
.s-tool__submit .s-small { margin-top: 0.75rem; text-align: center; }
.s-progress { margin-top: 2rem; }
.s-progress__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.s-progress ol { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; gap: 0.35rem; }
.s-progress li { flex: 1; height: 0.35rem; border-radius: 999px; background: var(--line); }
.s-progress li.is-done { background: var(--ink); }
.s-progress li.is-now { background: var(--primary); }
.s-save { margin-top: 2rem; padding: 1.5rem; border-radius: 1rem; background: var(--ink); color: #fff; }
.s-save b { display: block; font-size: 1.05rem; color: #fff; }
.s-save p { margin-top: 0.35rem; font-size: 0.9rem; color: var(--on-dark); }
.s-save .s-actions { margin-top: 1rem; }
.s-save .s-btn--outline-light { color: #fff; }
.s-prompt { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: #fff; }
.s-prompt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--soft); }
.s-prompt__head > div { min-width: 0; }
.s-prompt__step { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.s-prompt__head h3 { font-size: 1.05rem; color: var(--ink); }
.s-prompt__head p { margin-top: 0.25rem; font-size: 0.88rem; color: var(--muted); }
.s-prompt__body { margin: 0; max-height: 24rem; overflow: auto; padding: 1rem 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); background: #fff; }
.s-fold { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.s-fold details { width: 100%; }
.s-fold summary { list-style: none; cursor: pointer; font-size: 0.88rem; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 0.18em; }
.s-fold summary::-webkit-details-marker { display: none; }
.s-fold summary:hover { color: var(--ink); }
.s-fold .s-prompt__body { margin-top: 0.75rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--soft); }
.s-recap { margin-top: 2rem; padding: 1rem 1.25rem; border-radius: 0.75rem; background: var(--soft); }
.s-recap summary { list-style: none; cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.s-recap summary::-webkit-details-marker { display: none; }
.s-recap dl { margin: 1rem 0 0; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.s-recap dt { color: var(--muted); }
.s-recap dd { margin: 0; color: var(--text); }
.s-recap .s-link { display: inline-block; margin-top: 1rem; font-size: 0.9rem; }
.s-angles { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.s-angles__more { padding-top: 1.5rem; }
.s-angles__more h2 { font-size: 1.25rem; }
.s-angles__more p { margin-top: 0.4rem; color: var(--muted); }
.s-angle { padding: 1.5rem 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; transition: border-color 0.15s, opacity 0.15s; }
.s-angle:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.s-angle.is-off { opacity: 0.5; }
.s-angle__pick { display: flex; align-items: flex-start; gap: 1rem; cursor: pointer; }
.s-angle__pick input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; accent-color: var(--ink); }
.s-angle h3 { font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.s-angle h3 span { color: var(--muted); font-variant-numeric: tabular-nums; }
.s-angle__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.s-angle__tags span { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--soft); font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.s-angle__tags span.is-hit { background: var(--primary); color: var(--ink); }
.s-angle > p { margin-top: 1rem; font-size: 0.95rem; color: var(--muted); }
.s-angle__hook { margin-top: 1.25rem; padding-left: 1rem; border-left: 3px solid var(--primary); }
.s-angle__hook small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-angle__hook p { margin-top: 0.3rem; font-size: 1rem; font-weight: 500; color: var(--ink); }
.s-locked { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.s-locked li { padding: 0.9rem 1.1rem; border-radius: 0.75rem; background: var(--soft); }
.s-locked b { color: var(--muted); }
.s-locked small { margin-left: 0.5rem; font-size: 0.75rem; color: var(--muted); }
.s-locked p { margin-top: 0.3rem; font-size: 0.88rem; color: var(--muted); }
.s-bar { position: sticky; bottom: 1rem; z-index: 30; margin-top: 1.25rem; }
.s-bar > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.9rem 1.25rem; border-radius: 0.9rem; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.s-bar p { font-size: 0.9rem; color: var(--on-dark); }
.s-bar p b { color: #fff; font-variant-numeric: tabular-nums; }
.has-sticky-bar .s-sticky { display: none; }
.s-numbered { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.s-numbered li { display: flex; gap: 0.9rem; }
.s-numbered li > span:first-child { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 700; }
.s-numbered b { display: block; color: var(--ink); }
.s-numbered p { margin-top: 0.25rem; font-size: 0.92rem; color: var(--muted); }
.s-alloc { margin-top: 2rem; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.s-alloc__head, .s-alloc__foot { padding: 1rem 1.25rem; background: var(--soft); }
.s-alloc__head h2 { font-size: 1.1rem; color: var(--ink); }
.s-alloc__head p, .s-alloc__foot p { margin-top: 0.25rem; font-size: 0.88rem; color: var(--muted); }
.s-alloc__foot { border-top: 1px solid var(--line); }
.s-alloc__row { padding: 1.25rem; border-top: 1px solid var(--line); }
.s-alloc__row:first-of-type { border-top: 0; }
.s-alloc__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.s-alloc__top h3 { font-size: 1.05rem; color: var(--ink); }
.s-alloc__top p { font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-alloc__top p b { color: var(--ink); }
.s-alloc__track { margin-top: 0.6rem; height: 0.4rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.s-alloc__fill { height: 100%; border-radius: 999px; background: var(--primary); }
.s-alloc__row > p { margin-top: 0.75rem; font-size: 0.92rem; color: var(--muted); }
.s-alloc__row .s-callout--warn { margin-top: 0.6rem; font-size: 0.88rem; padding: 0.6rem 0.9rem; }
.s-names { margin-top: 1rem; display: grid; gap: 1rem; }
.s-names small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-names ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.s-names li { padding: 0.5rem 0.8rem; border-radius: 0.5rem; background: var(--soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--text); word-break: break-word; }
.s-results { margin-top: 2.5rem; }
.s-results > h2 { font-size: 1.35rem; }
.s-results > p { margin-top: 0.4rem; color: var(--muted); }
.s-result { margin-top: 1.25rem; padding: 1.5rem 1.25rem; border: 1px solid var(--line); border-radius: 1rem; }
.s-result__top { display: flex; align-items: flex-start; gap: 0.9rem; }
.s-result__num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--primary); color: var(--ink); font-size: 0.85rem; font-weight: 900; }
.s-result__top h3 { font-size: 1.15rem; color: var(--ink); }
.s-result__top p { margin-top: 0.2rem; font-size: 0.88rem; color: var(--muted); }
.s-picked { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.s-picked li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.7rem 1rem; border-radius: 0.6rem; background: var(--soft); }
.s-picked b { color: var(--ink); }
.s-picked b span { color: var(--muted); }
.s-picked small { font-size: 0.78rem; color: var(--muted); }
.s-lp-list { list-style: none; margin: 0; padding: 0 1.25rem 1.1rem; display: grid; gap: 0.5rem; }
.s-lp-list li { display: flex; gap: 0.6rem; font-size: 0.9rem; color: var(--muted); }
.s-lp-list li i { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; margin-top: 0.45rem; border-radius: 999px; background: var(--ink); }
.s-lp-list li i.is-off { background: var(--primary); }
.s-lp-list b { color: var(--ink); font-weight: 700; }
.s-recap--plain summary { padding: 0; }
details.s-recap > summary { padding: 0; }
.s-recap--list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.s-recap--list summary svg { width: 1rem; height: 1rem; color: var(--muted); transition: transform 0.2s; }
.s-recap--list[open] summary svg { transform: rotate(180deg); }
.s-recap--list .s-lp-list { padding: 1rem 0 0; }
.s-service { padding: 1.1rem 1rem; border-radius: 0.85rem; background: var(--soft); }
.s-service + .s-service { margin-top: 0.85rem; }
.s-service__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.s-service__top p { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.s-service .s-fields { margin-top: 1rem; gap: 1rem; }
.s-service .s-input { background: #fff; }
.s-service .hapus-layanan[hidden] { display: none; }
.s-add { margin-top: 1rem; width: 100%; border-style: dashed; }
.s-process { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: #fff; transition: opacity 0.2s; }
.s-process > div { width: 100%; max-width: 20rem; }
.s-process p { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.s-process ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.s-process li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); transition: color 0.3s; }
.s-process li i { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin-top: 0.45rem; border-radius: 999px; background: var(--line); transition: background 0.3s; }
.s-process li.is-on { color: var(--ink); }
.s-process li.is-on i { background: var(--primary); }
.s-tools { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.s-toolcard { display: flex; flex-direction: column; padding: 1.75rem 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: #fff; transition: border-color 0.15s; }
.s-toolcard:hover { border-color: var(--ink); }
.s-toolcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.s-toolcard h2 { font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); }
.s-toolcard .s-chip { margin: 0; }
.s-toolcard__tag { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.s-toolcard > p { margin-top: 0.9rem; font-size: 0.95rem; color: var(--muted); }
.s-toolcard .s-btn { margin-top: auto; align-self: flex-start; padding-top: 0; }
.s-toolcard__cta { margin-top: 1.5rem; }
.s-toolcard.is-soon { background: var(--soft); border-color: transparent; }
.s-toolcard.is-soon h2, .s-toolcard.is-soon .s-toolcard__tag { color: var(--muted); }
.s-toolcard__soon { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-hidden { display: none !important; }

/* ── Produk digital: etalase + slip pesanan ─────────────────────────────────
   Halaman detail produk dengan form checkout langsung (tanpa keranjang),
   katalog, halaman status pembayaran, dan halaman statis (kebijakan). */
.s-prose { max-width: 40rem; font-size: 1.05rem; color: var(--text); }
.s-prose > * + * { margin-top: 1rem; }
.s-prose h2 { margin-top: 2rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.s-prose h3 { margin-top: 1.5rem; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.s-prose h2 + *, .s-prose h3 + * { margin-top: 0.6rem; }
.s-prose ul, .s-prose ol { padding-left: 1.3rem; display: grid; gap: 0.4rem; }
.s-prose li::marker { color: var(--ink); font-weight: 700; }
.s-prose a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
.s-prose strong { color: var(--ink); }
.s-prose blockquote { margin: 1.25rem 0; padding-left: 1rem; border-left: 3px solid var(--primary); color: var(--text); }
.s-prose img { border-radius: 0.75rem; }
.s-prose code { padding: 0.1rem 0.35rem; border-radius: 0.3rem; background: var(--soft); font-size: 0.9em; }
.s-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.s-page { max-width: 44rem; margin: 0 auto; padding: 2.5rem var(--gutter) 5rem; }
.s-page .s-h1 { font-size: 2.25rem; }
.s-page .s-prose { margin-top: 2rem; }
.s-product { display: grid; gap: 2.5rem; padding: 2rem 0 5rem; }
.s-product__main .s-crumbs { margin-bottom: 1.5rem; }
.s-product__main .s-h1 { font-size: 2.25rem; }
.s-product__cover { margin: 1.75rem 0 0; border: 2px solid var(--ink); border-radius: 1rem; overflow: hidden; background: var(--soft); }
.s-product__cover img { display: block; width: 100%; height: auto; }
.s-product__main .s-prose { margin-top: 1.75rem; }
.s-product__main .s-btn--ghost { margin-top: 1.5rem; }
.s-product__box { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.s-product__box h2 { font-size: 1.2rem; color: var(--ink); }
.s-product__box > p { margin-top: 0.4rem; font-size: 0.95rem; color: var(--muted); }
.s-bundle { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.s-bundle li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 0.75rem; }
.s-bundle a { color: var(--ink); font-weight: 700; text-decoration: none; }
.s-bundle a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.s-bundle .s-chip { margin: 0; }
.s-outline { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: modul; }
.s-outline li { counter-increment: modul; display: flex; gap: 0.9rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
.s-outline li::before { content: counter(modul, decimal-leading-zero); flex: 0 0 2rem; font-size: 0.8rem; font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.s-outline b { display: block; color: var(--ink); }
.s-outline small { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); }
.s-order { position: relative; padding: 1.5rem 1.25rem; border: 2px solid var(--ink); border-radius: 1.25rem; background: #fff; }
.s-order .s-eyebrow { margin: 0; }
.s-order__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-top: 1rem; }
.s-order__price b { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.s-order__price small { font-size: 0.85rem; color: var(--muted); }
.s-order__gets { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 2px dashed var(--line); display: grid; gap: 0.5rem; }
.s-order__gets li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--text); }
.s-order__gets .s-check { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.05rem; padding: 0.15rem; border-radius: 999px; background: var(--primary); color: var(--ink); }
.s-order .s-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 2px dashed var(--line); gap: 1rem; }
.s-order .s-errors { margin-top: 1.25rem; }
.s-order__coupon summary { list-style: none; cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.s-order__coupon summary::-webkit-details-marker { display: none; }
.s-order__coupon .s-field { margin-top: 0.75rem; }
.s-order__coupon input { text-transform: uppercase; }
.s-order .s-form__submit { min-height: 3.25rem; font-size: 1rem; }
.s-order .s-small { text-align: center; }
.s-order__note { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); text-align: center; }
.s-sticky--order span b { color: var(--ink); }
.s-catalog { padding: 2.5rem 0 5rem; }
.s-catalog__section { margin-top: 3rem; }
.s-catalog__section:first-of-type { margin-top: 2.5rem; }
.s-catalog__section h2 { font-size: 1.35rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink); }
.s-products { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.s-productcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; background: #fff; transition: border-color 0.15s; }
.s-productcard:hover { border-color: var(--ink); }
.s-productcard__cover { display: block; aspect-ratio: 16 / 10; background: var(--soft); overflow: hidden; }
.s-productcard__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-productcard__cover span { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.5rem; font-weight: 900; color: var(--line); }
.s-productcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.25rem 1.5rem; }
.s-productcard .s-chip { margin: 0; align-self: flex-start; }
.s-productcard h3 { margin-top: 0.75rem; font-size: 1.15rem; line-height: 1.3; }
.s-productcard h3 a { color: var(--ink); text-decoration: none; }
.s-productcard h3 a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.s-productcard > .s-productcard__body > p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--muted); }
.s-productcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; }
.s-productcard__price { font-size: 1.15rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.s-productcard__price small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.s-leadbox { margin-top: 4rem; }
.s-status { max-width: 30rem; margin: 0 auto; padding: 2rem 1.5rem; border: 2px solid var(--ink); border-radius: 1.25rem; text-align: center; }
.s-status__mark { display: inline-grid; place-items: center; min-width: 3.5rem; height: 3.5rem; padding: 0 0.9rem; border-radius: 999px; background: var(--primary); color: var(--ink); font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; }
.s-status__mark.is-wait { background: var(--soft); }
.s-status h1 { margin-top: 1rem; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.s-status > p { margin-top: 0.75rem; color: var(--muted); }
.s-status > p b { color: var(--ink); }
.s-status .s-btn { margin-top: 1.5rem; }
.s-status__meta { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px dashed var(--line); font-size: 0.8rem; color: var(--muted); }
.s-status__warn { margin-top: 1rem; font-size: 0.9rem; color: var(--ink); }
.s-status-wrap { padding: 3rem 0 5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .s-sticky { transition: none; }
  .s-strip { scroll-behavior: auto; }
}

/* Fokus keyboard */
.s-btn:focus-visible, .s-nav a:focus-visible, .s-burger:focus-visible, .s-faq summary:focus-visible, .s-footer a:focus-visible, .s-garansi a:focus-visible, .s-strip:focus-visible, .s-strip-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Tablet ke atas */
@media (min-width: 48rem) {
  .s-wrap, .s-header__inner, .s-footer__inner { padding-left: 2rem; padding-right: 2rem; }
  .s-burger { display: none; }
  .s-nav { display: flex; position: static; flex-direction: row; align-items: center; margin-left: auto; padding: 0; border: 0; max-height: none; overflow: visible; }
  .s-nav a { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
  .s-nav a.s-nav__cta { margin: 0 0 0 0.5rem; }
  /* Panel bersandar pada bar, bukan pada tombolnya — itu yang membuatnya bisa
     selebar layar dan menempel persis di bawah bar tanpa celah yang memutus
     hover di tengah jalan. */
  .s-header__inner { position: static; }
  .s-nav__group { position: static; flex-direction: row; align-items: center; }
  .s-nav__toggle { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
  .s-nav__group--split .s-nav__link { padding-right: 0.2rem; }
  .s-nav__caret { padding: 0.45rem 0.6rem 0.45rem 0.1rem; }
  .s-nav__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.06); }
  .s-nav__panel-inner { max-width: var(--wrap); margin: 0 auto; padding: 2rem; }
  .s-nav__panel-label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  /* Daftarnya melebar ke samping, bukan memanjang dalam satu kolom sempit —
     itu gunanya panel selebar layar. */
  .s-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top: 1.25rem; }
  .s-nav__grid li { border-bottom: 1px solid var(--line); }
  .s-nav .s-nav__panel a { padding: 0.9rem 0; white-space: normal; }
  .s-nav .s-nav__panel a, .s-nav .s-nav__panel a:hover { text-decoration: none; }
  .s-nav__grid b { display: block; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
  .s-nav__grid span { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); }
  .s-nav__grid a:hover b, .s-nav__grid a.is-active b { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
  .s-nav .s-nav__panel a.s-nav__all { display: inline-block; margin-top: 1.5rem; padding: 0; }
  .s-nav .s-nav__panel a.s-nav__all:hover { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
  .s-nav__empty { padding: 0.9rem 0; }
  .s-section { padding: 6rem 0; }
  .s-eyebrow, .s-intro .s-eyebrow { font-size: 0.8rem; }
  .s-h1 { font-size: 3.5rem; }
  .s-h2 { font-size: 2.35rem; }
  .s-h2--big { font-size: 3rem; }
  .s-actions { flex-direction: row; flex-wrap: wrap; }
  .s-hero { padding-top: 4rem; }
  .s-lead { font-size: 1.2rem; max-width: 36rem; }
  .s-stats { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; margin-top: 3.5rem; padding-top: 2.25rem; }
  .s-stats strong { font-size: 2.25rem; }
  .s-stats--flush { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1.5rem; padding-top: 0; }
  .s-checkrows label { grid-template-columns: 1.75rem 2.75rem 1fr; gap: 1rem; padding: 1.15rem 0; }
  .s-checkrows__box { width: 1.75rem; height: 1.75rem; }
  .s-checkrows__box::after { left: 0.5rem; top: 0.18rem; width: 0.5rem; height: 0.95rem; }
  .s-checkrows__num { font-size: 1.1rem; }
  .s-checkrows__text { font-size: 1.25rem; }
  .s-vs { display: table; margin-top: 2rem; }
  .s-vs thead { display: table-header-group; }
  .s-vs tbody { display: table-row-group; }
  .s-vs tr { display: table-row; }
  .s-vs th, .s-vs td { display: table-cell; vertical-align: middle; padding: 1.1rem 1.5rem; }
  .s-vs thead th { font-size: 0.78rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .s-vs thead .s-vs__group { text-align: right; }
  .s-vs thead .s-vs__privat { text-align: left; }
  .s-vs thead .s-vs__mid { position: static; transform: none; width: 8rem; padding: 0.5rem; text-align: center; }
  .s-vs__badge { width: 3rem; height: 3rem; font-size: 0.8rem; }
  .s-vs tbody th, .s-vs tbody td { border-top: 1px solid var(--line); }
  .s-vs tbody th.s-vs__mid { padding: 1.1rem 0.5rem; text-align: center; }
  .s-vs tbody td { display: table-cell; font-size: 1rem; }
  .s-vs tbody td.s-vs__group { text-align: right; }
  .s-vs tbody td.s-vs__privat { font-size: 1.1rem; }
  .s-vs tbody td .s-check { display: inline-block; vertical-align: -0.2rem; margin: 0 0 0 0.5rem; }
  .s-vs tbody td.s-vs__privat .s-check { margin: 0 0.5rem 0 0; }
  .s-portrait { max-width: 24rem; }
  .s-name { font-size: 1.75rem; }
  .s-quote, .s-intro .s-quote { font-size: 2.5rem; }
  .s-claims { grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
  .s-outcomes h3 { font-size: 1.4rem; }
  .s-block--dark { padding: 2.5rem; }
  .s-strip { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; scroll-padding-left: 0; }
  .s-strip figure { flex-basis: 24rem; }
  .s-plan { grid-template-columns: 5fr 7fr; gap: 3rem; padding: 3rem 0; }
  .s-plan .s-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .s-plan--popular { border-left: 3px solid var(--primary); padding-left: 1.75rem; }
  .s-tiles { grid-template-columns: repeat(2, 1fr); }
  .s-litany li, .s-litany__ask { font-size: 2.25rem; }
  .s-collage { grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
  .s-collage figure:first-child { grid-column: 1 / 9; grid-row: 1 / 3; aspect-ratio: auto; }
  .s-collage figure:nth-child(2) { grid-column: 9 / 13; grid-row: 1; margin-top: 3rem; }
  .s-collage figure:nth-child(3) { grid-column: 9 / 13; grid-row: 2; }
  .s-collage figure:nth-child(4) { grid-column: 1 / 5; grid-row: 3; }
  .s-collage figure:nth-child(5) { grid-column: 5 / 9; grid-row: 3; margin-top: 2.5rem; }
  .s-collage figure:nth-child(6) { grid-column: 9 / 13; grid-row: 3; }
  .s-nav a { padding: 0.4rem 0.65rem; font-size: 0.85rem; }
  .s-quadrant { grid-template-columns: 1fr 1fr; }
  .s-quadrant li { padding: 2rem; border-top: 0; }
  .s-quadrant li:nth-child(odd) { padding-left: 0; }
  .s-quadrant li:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line); }
  .s-quadrant li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .s-index { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
  .s-stepper { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .s-pair { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .s-voices li { grid-template-columns: 8rem 1fr auto; align-items: center; gap: 1.5rem; }
  .s-fit--stacked { grid-template-columns: 1fr; }
  .s-fit--stacked .s-fit__yes .s-list, .s-fit--stacked .s-fit__no .s-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .s-chain { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .s-chain li + li::before { content: "→"; top: 50%; left: -2.2rem; transform: translateY(-50%); font-size: 1.5rem; }
  .s-reveal { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; margin-top: 3rem; }
  .s-trio { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .s-band { padding: 3rem; }
  .s-band .s-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .s-fit--even { grid-template-columns: 1fr 1fr; gap: 0; }
  .s-fit--even > div + div { margin: 0 0 0 3rem; padding-left: 3rem; border-left: 1px solid var(--line); }
  .s-climax { padding: 9rem 0; }
  .s-climax h2 { font-size: 3.5rem; }
  .s-climax .s-actions { justify-content: center; }
  .s-sticky { display: none; }
  .has-sticky .s-main { padding-bottom: 0; }
  .s-profiles--row { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .s-agenda li { grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 2rem; padding: 1.75rem 0; }
  .s-agenda .s-btn { grid-column: auto; white-space: nowrap; }
  .s-stepper--4 { grid-template-columns: 1fr 1fr; }
  .s-panel { padding: 2.5rem; }
  .s-panel .s-h2 { font-size: 2rem; }
  .s-form__submit { justify-self: start; min-width: 14rem; }
  .s-home .s-h1 { font-size: 2rem; }
  .s-home { padding-bottom: 6rem; }
  .s-home__figure { max-width: 22rem; }
  .s-tool { padding-top: 3.5rem; padding-bottom: 6rem; }
  .s-tool h1 { font-size: 2.5rem; }
  .s-card { padding: 2rem; }
  .s-fields--2 { grid-template-columns: 1fr 1fr; }
  .s-fields--3 { grid-template-columns: repeat(3, 1fr); }
  .s-fields--3 .s-field--full { grid-column: 1 / -1; }
  .s-fields--3 .s-field--2 { grid-column: span 2; }
  .s-choices--2 { grid-template-columns: 1fr 1fr; }
  .s-recap dl { grid-template-columns: 10rem 1fr; gap: 0.5rem 1rem; }
  .s-angle { padding: 1.75rem; }
  .s-tools { grid-template-columns: 1fr 1fr; }
  .s-save { padding: 1.75rem 2rem; }
  .s-products { grid-template-columns: 1fr 1fr; }
  .s-status { padding: 2.5rem 2.5rem; }
  .s-page { padding-top: 3.5rem; }
  .s-product__main .s-h1 { font-size: 2.75rem; }
}

/* Desktop */
@media (min-width: 64rem) {
  .s-section { padding: 7rem 0; }
  .s-nav a { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
  .s-h1 { font-size: 4rem; }
  .s-h2--big { font-size: 3.4rem; }
  .s-stairs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; align-items: end; margin-top: 3.5rem; border-bottom: 2px solid var(--ink); }
  .s-stairs::before { display: none; }
  .s-stairs li { padding: 1.25rem 0.75rem 1.5rem 0; min-height: calc(9rem + var(--rise)); border-top: 2px solid var(--ink); }
  .s-stairs li:nth-child(1) { --rise: 0rem; }
  .s-stairs li:nth-child(2) { --rise: 2rem; }
  .s-stairs li:nth-child(3) { --rise: 4.5rem; }
  .s-stairs li:nth-child(4) { --rise: 7.5rem; }
  .s-stairs li:nth-child(5) { --rise: 11rem; }
  .s-stairs li:nth-child(6) { --rise: 15rem; }
  .s-stairs li.is-dark { padding-left: 1rem; padding-right: 1rem; background: var(--ink); border-top-color: var(--ink); border-radius: 0.75rem 0.75rem 0 0; }
  .s-stairs li.is-dark h3 { color: #fff; }
  .s-stairs li.is-dark p { color: var(--on-dark); }
  .s-stairs__num { position: static; margin-bottom: 0.9rem; border-color: var(--ink); color: var(--ink); }
  .s-stairs li.is-dark .s-stairs__num { background: transparent; border-color: var(--primary); color: var(--primary); }
  .s-stairs h3 { padding-top: 0; font-size: 1.05rem; }
  .s-stairs p { font-size: 0.88rem; }
  .s-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; }
  .s-hero__figure { max-width: 28rem; margin: 2rem 0 0 auto; }
  .s-contrast { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: start; }
  .s-contrast__aside { margin-top: 4.5rem; }
  .s-checkrows { margin-top: 2.5rem; }
  .s-mentor { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .s-portrait { max-width: none; margin-left: min(0px, calc(38rem - 50vw)); }
  .s-mentor__text { padding-top: 2rem; }
  .s-case { margin-left: calc(50% - 50vw + 2rem); margin-right: calc(50% - 50vw + 2rem); }
  .s-kurikulum { grid-template-columns: 6fr 5fr; gap: 5rem; align-items: start; }
  .s-kurikulum figure { margin-top: 3rem; }
  .s-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin-top: 3.5rem; }
  .s-timeline--3 { grid-template-columns: repeat(3, 1fr); }
  .s-timeline li { padding: 2.5rem 0 0; }
  .s-timeline li::before { left: 0; right: -2.5rem; top: 0.45rem; bottom: auto; height: 3px; width: auto; }
  .s-timeline li:last-child::before { display: block; right: 0; }
  .s-timeline li:last-child::after { content: ""; position: absolute; right: -0.35rem; top: 0.1rem; border-left: 0.7rem solid var(--primary); border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; }
  .s-timeline__dot { left: 0; top: 0; }
  .s-timeline__num { font-size: 2.5rem; }
  .s-timeline h3 { font-size: 1.2rem; }
  .s-session { grid-template-columns: 4fr 8fr; gap: 4rem; align-items: start; }
  .s-session { margin-top: 4rem; }
  .s-session__aside { padding-top: 0.5rem; }
  .s-session figure { margin-right: min(0px, calc(38rem - 50vw)); }
  .s-outcomes { grid-template-columns: 4fr 7fr; gap: 5rem; align-items: start; }
  .s-outcomes > :first-child { margin-top: 5rem; }
  .s-block--dark { padding: 3rem; }
  .s-block--dark h3 { font-size: 1.6rem; }
  .s-block--dark .s-list { font-size: 1.05rem; gap: 1rem; }
  .s-strip figure { flex-basis: 30rem; }
  .s-fit { grid-template-columns: 7fr 4fr; gap: 5rem; align-items: start; }
  .s-fit__yes .s-list { font-size: 1.25rem; gap: 1.1rem; }
  .s-fit__no { margin-top: 4rem; }
  .s-climax h2 { font-size: 4rem; }
  .s-tiles { grid-template-columns: repeat(4, 1fr); }
  .s-index { grid-template-columns: repeat(3, 1fr); }
  .s-map { grid-template-columns: 5fr 6fr; gap: 5rem; align-items: center; }
  .s-deliver { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; }
  .s-fit--stacked { grid-template-columns: 1fr; }
  .s-fit--stacked .s-fit__no { margin-top: 2.5rem; }
  .s-interview__story { column-count: 2; column-gap: 4rem; }
  .s-interview__story p { break-inside: avoid; }
  .s-interview__about { grid-template-columns: 7fr 5fr; gap: 4rem; }
  .s-ledger { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: start; }
  .s-ledger__steps li { grid-template-columns: 5rem 1fr; padding: 2rem 0; }
  .s-ledger__num { font-size: 2.75rem; }
  .s-ledger__aside { position: sticky; top: 5.5rem; }
  .s-stack { max-width: 52rem; }
  .s-evidence { grid-template-columns: 4fr 8fr; gap: 4rem; align-items: start; }
  .s-fit--even .s-fit__no { margin-top: 0; }
  .s-hero .s-ticket { margin: 1rem 0 0 auto; }
  .s-stepper--4 { grid-template-columns: repeat(4, 1fr); }
  .s-panel { margin: 0 auto; }
  .s-nav__grid { grid-template-columns: repeat(4, 1fr); }
  .s-home .s-h1 { font-size: 2.25rem; }
  .s-home { display: grid; grid-template-columns: 7fr 5fr; gap: 0 4rem; align-items: start; padding-top: 1rem; }
  .s-home__intro { grid-column: 1; grid-row: 1; }
  /* Foto turun sedikit dari awal judul, bukan rata tengah terhadap seluruh
     kolom: kalau ia dipusatkan, ia jatuh terlalu jauh ke bawah dan hero
     terasa berat sebelah. Jaraknya diukur dari atas grid, jadi tetap sama
     berapa pun baris judulnya. */
  .s-home__figure { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 3.5rem 0 0; }
  .s-home__list { grid-column: 1; grid-row: 2; margin-top: 2rem; }
  .s-home__list .s-links { margin-top: 0; }
  .s-product { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; padding-top: 3rem; }
  .s-order { position: sticky; top: 5.5rem; padding: 1.75rem; }
  .s-products { grid-template-columns: repeat(3, 1fr); }
  .s-product__main .s-h1 { font-size: 3rem; }
}

/* Monitor sangat lebar */
@media (min-width: 80rem) {
  .s-h1 { font-size: 4.5rem; }
  .s-home .s-h1 { font-size: 2.5rem; }
}