/* Renra — sistem desain baru (2026-09-10), diturunkan dari referensi yang dipilih pemilik situs.
   Kertas krem, tinta hangat, hijau sebagai satu-satunya warna; judul serif (Instrument Serif,
   frasa penekanan miring hijau), teks DM Sans, label kecil DM Mono kapital berjarak.
   Mobile-first, tanpa build step. Dipakai halaman yang mengirim theme="renra" ke site-layout;
   header/footer memakai kelas s-* yang sama dengan site.css supaya markup dan JS-nya satu. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/dm-sans-var.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-mono-500.woff2") format("woff2"); }

:root {
  --paper: #FAF7F0; --card: #FFFDF8; --ink: #181510; --mid: #6E6557; --soft: #A39A87; --line: #E7E0D1;
  --green: #0C6B3D; --green-deep: #09532F; --green-tint: #EAF3EC; --green-line: #CFE4D6; --red: #B3402F; --line-strong: #CFC8B9;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --radius: var(--radius-lg);
  --wrap: 74rem; --gutter: 1.5rem;
  --space-section: 3.5rem; --space-hero-top: 2.5rem; --space-hero-bottom: 3rem; --space-block: 1.5rem;
  --fs-display: clamp(2.6rem, 2rem + 3vw, 4rem); --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); --fs-h3: 1.5rem;
  --fs-lead: 1.1rem; --fs-body: 0.95rem; --fs-small: 0.8rem; --fs-eyebrow: 0.72rem; --fs-pill: 0.7rem;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 12px 32px rgba(24, 21, 16, 0.06);
  /* Alias nama token lama (site.css/member.css) → palet baru, supaya kelas s-* dan m-* ikut berubah. */
  --primary: var(--green); --primary-hover: var(--green-deep); --primary-soft: var(--green-tint);
  --text: var(--ink); --muted: var(--mid); --bg: var(--paper); --soft: #F3EFE6;
  --on-dark: #E7E0D1; --on-dark-muted: #B3AB9B;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; font-family: var(--sans); font-size: 1rem; line-height: 1.65; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
img { max-width: 100%; height: auto; }
[id] { scroll-margin-top: 4.5rem; }
/* Atribut hidden selalu menang atas display komponen (mis. harga coret yang baru tampil setelah kupon sah). */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: var(--radius-sm); }
.r-btn:focus-visible, .s-nav a.s-nav__cta:focus-visible { border-radius: var(--radius-pill); }
.s-sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header: bar kertas dengan garis tipis, menu teks, satu tombol pil ── */
.s-header { position: sticky; top: 0; z-index: 20; background: var(--card); border-bottom: 1px solid var(--line); }
.s-header__inner { position: relative; max-width: var(--wrap); margin: 0 auto; min-height: 4rem; padding: 0.6rem var(--gutter); display: flex; align-items: center; gap: 1rem; }
.s-brand { display: flex; align-items: center; gap: 0.65rem; padding: 0.25rem 0; text-decoration: none; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; color: var(--ink); }
.s-brand:hover .s-brand__name { color: var(--green); }
.s-brand__name { transition: color 0.15s; }
.s-brand__mark { width: 2.4rem; height: 2.4rem; border-radius: var(--radius-pill); background: var(--green); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: 1.2rem; }
.s-brand__logo { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: var(--radius-pill); border: 1px solid var(--line); }
.s-burger { display: flex; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); 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: var(--card); border-bottom: 1px solid var(--line); padding: 0.75rem var(--gutter) 1rem; gap: 0.25rem; max-height: calc(100vh - 4rem); overflow-y: auto; }
.s-header.is-open .s-nav { display: flex; }
.s-nav a, .s-nav__toggle { display: flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink); padding: 0.6rem 0.85rem; white-space: nowrap; text-decoration: none; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.5em; transition: color 0.15s, text-decoration-color 0.15s; }
.s-nav a:hover, .s-nav__toggle:hover, .s-nav__group.is-open > .s-nav__toggle { color: var(--green); text-decoration: underline; text-decoration-color: var(--green); }
.s-nav a.is-active, .s-nav__toggle.is-active { color: var(--green); text-decoration: underline; text-decoration-color: var(--green); }
.s-nav a.s-nav__cta { margin-top: 0.5rem; justify-content: center; border: 1px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; padding: 0.65rem 1.1rem; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.s-nav a.s-nav__cta:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.s-nav a.s-nav__cta:active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.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__tri { width: 0.32rem; height: 0.32rem; flex: 0 0 auto; opacity: 0.7; }
.s-nav__caret { display: flex; align-items: center; background: none; border: 0; padding: 0.75rem 0.85rem; cursor: pointer; color: var(--mid); }
.s-nav__caret:hover { color: var(--green); }
.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; }
.s-nav__grid span { display: none; }
.s-nav__panel a.s-nav__all { color: var(--green); font-weight: 600; }
.s-nav__empty { padding: 0.55rem 0.75rem; font-size: 0.85rem; color: var(--mid); }
.s-main { flex: 1; }

/* ── Kerangka ── */
.r-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.r-section { padding-top: var(--space-section); padding-bottom: var(--space-section); }

/* ── Tipografi ── */
.r-eyebrow { display: block; font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.r-eyebrow--sapaan { text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; }
.r-h1 { margin-top: 1.25rem; font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
/* Kalimat penekan hijau: baris sendiri, sedikit lebih kecil dan diberi jeda tipis
   dari kalimat utama, supaya yang dibaca duluan jelas tanpa terasa terpisah. */
.r-h1 .r-accent { display: block; margin-top: 0.15em; font-size: 0.92em; line-height: 1.08; }
.r-h1 br { display: none; }
.r-h2 { margin-top: 0.9rem; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.r-h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.005em; color: var(--ink); }
.r-accent { font-style: italic; color: var(--green); }
/* Kata ulang tidak dipenggal di tanda hubungnya: "benar-" / "benar" di ponsel terbaca patah. */
.r-nobr { white-space: nowrap; }
.r-lead { margin-top: 1.5rem; max-width: 34rem; font-size: var(--fs-lead); line-height: 1.6; color: var(--mid); text-wrap: pretty; }
.r-lead b { font-weight: 600; color: var(--ink); }
.r-meta { margin-top: 1.1rem; max-width: 34rem; font-family: var(--mono); font-size: var(--fs-small); line-height: 1.8; color: var(--mid); }
.r-meta i { font-style: normal; color: var(--soft); padding: 0 0.25rem; }
.r-p { max-width: 36rem; color: var(--mid); }
.r-p b { color: var(--ink); font-weight: 600; }

/* ── Pil dan tombol ── */
.r-pill { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.75rem; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--green-line); background: var(--green-tint); font-family: var(--mono); font-size: var(--fs-pill); line-height: 1.2; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.r-pill--solid { background: var(--green); border-color: var(--green); color: #fff; }
.r-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem 1.6rem; margin-top: 1.6rem; }
.r-btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.85rem 1.7rem; border-radius: var(--radius-pill); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: inherit; font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.r-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(24, 21, 16, 0.14); }
.r-btn:active { transform: none; box-shadow: none; }
.r-btn--green { background: var(--green); border-color: var(--green); color: #fff; }
.r-btn--green:hover { background: var(--green-deep); border-color: var(--green-deep); }
.r-btn--ghost { background: transparent; color: var(--ink); }
.r-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.r-btn__arrow { font-family: var(--mono); transition: transform 0.15s; }
.r-btn:hover .r-btn__arrow { transform: translateX(3px); }
.r-link { display: inline-flex; align-items: center; min-height: 2.75rem; gap: 0.4rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--green-line); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.r-link:hover { color: var(--green); text-decoration-color: var(--green); }
.r-link .r-btn__arrow { font-family: var(--mono); }

/* ── Pita hijau di bawah header: satu kalimat, satu tautan ── */
.r-bar { background: var(--green); color: #fff; }
.r-bar__inner { max-width: var(--wrap); margin: 0 auto; min-height: 2.375rem; padding: 0.45rem var(--gutter); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.15rem 1rem; font-size: 0.86rem; line-height: 1.45; text-align: center; color: rgba(255, 255, 255, 0.92); }
.r-bar__inner b { font-weight: 500; color: #fff; }
.r-bar__more { display: none; }
.r-bar__inner a { display: inline-flex; align-items: center; min-height: 2.375rem; color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.55); text-underline-offset: 0.3em; text-decoration-thickness: 1px; white-space: nowrap; transition: text-decoration-color 0.15s; }
.r-bar__inner a:hover { text-decoration-color: #fff; }
.r-bar__inner a:focus-visible { outline-color: #fff; }

/* ── Hero beranda: teks memimpin, kartu potret menemani ── */
.r-hero { padding-top: var(--space-hero-top); padding-bottom: var(--space-hero-bottom); display: grid; gap: 2.5rem; align-items: center; }
.r-hero__text { max-width: 38rem; }
.r-proof { max-width: 26rem; margin: 0 auto; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1rem; }
.r-proof__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 0.75rem; min-height: 1.75rem; }
.r-proof__label { font-family: var(--mono); font-size: var(--fs-pill); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); line-height: 1.5; }
.r-proof__img { display: block; width: 100%; height: auto; aspect-ratio: 494 / 618; object-fit: cover; margin-top: 0.9rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--green-tint); }
.r-proof__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 0.75rem; margin-top: 0.85rem; padding: 0 0.15rem; font-family: var(--mono); font-size: var(--fs-small); color: var(--mid); }
.r-proof__foot b { font-weight: 500; color: var(--ink); }

/* ── Strip kredibilitas: tipografi dan garis tipis, tanpa kotak ── */
.r-stats { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.r-stats li { padding: 1.1rem 1rem; border-top: 1px solid var(--line); text-align: center; }
.r-stats li:first-child { border-top: 0; }
.r-stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
.r-stats span { display: block; margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.5; color: var(--mid); }

/* ── Kisi kartu: pintu masuk ke seluruh isi situs ── */
.r-head { max-width: 40rem; }
.r-grid { display: grid; gap: 1rem; margin-top: 2.25rem; }
.r-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: inherit; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; }
/* Tautan judul direntangkan menutupi kartu: satu tautan, satu nama, seluruh kartu bisa diklik. */
.r-card__link { color: inherit; text-decoration: none; }
.r-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.r-card__link:focus-visible { outline: none; }
.r-card:has(.r-card__link:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.r-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 21, 16, 0.05); }
.r-card:active { transform: none; box-shadow: none; }
/* Kartu unggulan: permukaan hijau muda rata (tanpa gradien), garis hijau muda. */
.r-card--hi { background: var(--green-tint); border-color: var(--green-line); }
.r-card--hi:hover { border-color: #B8D6C2; }
.r-card__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.r-card__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.005em; color: var(--ink); }
.r-card__text { font-size: var(--fs-body); line-height: 1.6; color: var(--mid); text-wrap: pretty; }
.r-card__more { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--green); }
.r-card__more .r-btn__arrow { transition: transform 0.18s; }
.r-card:hover .r-card__more .r-btn__arrow { transform: translateX(3px); }
.r-card__tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
/* Chip nama tool: informasi, bukan label — huruf biasa, redup, tidak bersaing dengan ajakan kartu. */
.r-chip { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--card); font-size: 0.8rem; line-height: 1.2; color: var(--mid); white-space: nowrap; }

/* ── Pita penutup: hijau muda, teks kiri, kartu ringkas kanan ── */
.r-band { background: var(--green-tint); border-top: 1px solid var(--green-line); border-bottom: 1px solid var(--green-line); }
.r-band__inner { display: grid; gap: 2rem; padding-top: 3.5rem; padding-bottom: 3.5rem; align-items: center; }
.r-band__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.75rem 1.5rem; }
.r-band__card .r-h3 { margin-top: 0.6rem; text-wrap: balance; }
.r-band__card .r-meta { margin-top: 0.75rem; }
.r-band__card .r-btn { width: 100%; margin-top: 1.5rem; }

/* ── Penawaran produk gratis: sampul kecil + teks; form di kartu ── */
.r-free { display: grid; gap: 1.25rem; align-items: start; }
/* Di ponsel sampul kecil di atas teks; dari tablet ke atas berdampingan. */
.r-free__cover { display: block; width: 5.5rem; height: auto; aspect-ratio: 136 / 180; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); }
.r-free .r-h2 { margin-top: 0.75rem; }
.r-form { display: flex; flex-direction: column; gap: 0.85rem; }
.r-form .r-h3 { margin-top: 0.5rem; margin-bottom: 0.35rem; text-wrap: balance; }
.r-field { display: grid; gap: 0.35rem; }
.r-field > span { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.r-field em { font-style: normal; font-weight: 400; color: var(--mid); }
.r-input { width: 100%; min-height: 2.9rem; padding: 0.6rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.r-input:hover { border-color: var(--soft); }
.r-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-line); }
.r-field__error { margin-top: -0.4rem; font-size: var(--fs-small); color: var(--red); }
.r-form .r-btn { width: 100%; margin-top: 0.5rem; }
.r-form .r-band__note { margin-top: 0; }
.r-band__card .r-meta { margin-top: 0.75rem; }

/* ── Kartu harga di pita: satu kata besar, satu tombol ── */
.r-price { text-align: center; }
.r-price__value { margin-top: 0.5rem; font-family: var(--serif); font-size: 3rem; line-height: 1; letter-spacing: -0.01em; color: var(--green); }
.r-price .r-meta { margin-top: 0.85rem; }
.r-price .r-btn { width: 100%; margin-top: 1.25rem; }

/* ── Footer: satu baris hak cipta, satu baris tautan; bertumpuk di ponsel ── */
.s-footer { border-top: 1px solid var(--line); background: var(--paper); }
.s-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 2.25rem var(--gutter); display: flex; flex-direction: column; gap: 0.9rem; font-size: 0.85rem; line-height: 1.5; color: var(--mid); }
.s-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.s-footer a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--ink); text-decoration: none; }
.s-footer__inner > span:first-child { display: inline-flex; align-items: center; min-height: 2.5rem; }
.s-footer a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 0.3em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r-btn, .r-card, .r-btn__arrow { transition: none; }
}

/* ── Tablet ke atas ── */
@media (min-width: 48rem) {
  :root { --gutter: 2rem; --space-section: 5rem; --space-hero-top: 3.5rem; --space-hero-bottom: 3.5rem; }
  .r-actions { flex-direction: row; align-items: center; }
  .r-bar__inner { justify-content: center; }
  .r-bar__more { display: inline; }
  .r-bar__short { display: none; }
  .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; gap: 0.35rem; }
  .s-nav a, .s-nav__toggle { min-height: 2.5rem; padding: 0.4rem 0.75rem; font-size: 0.875rem; }
  .s-nav a.s-nav__cta { margin: 0 0 0 0.75rem; min-height: 2.5rem; padding: 0.45rem 1.1rem; font-size: 0.85rem; }
  .s-header__inner { position: static; }
  .s-nav__group { position: static; flex-direction: row; align-items: center; }
  .s-nav__group--split .s-nav__link { padding-right: 0.2rem; }
  .s-nav__caret { min-height: 2.5rem; min-width: 2rem; padding: 0.4rem 0.6rem 0.4rem 0.2rem; justify-content: center; }
  .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: var(--card); box-shadow: var(--shadow); }
  .s-nav__panel-inner { max-width: var(--wrap); margin: 0 auto; padding: 2rem; }
  .s-nav__panel-label { display: block; font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
  .s-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top: 1rem; }
  .s-nav__grid li { border-bottom: 1px solid var(--line); }
  .s-nav .s-nav__panel a { padding: 0.9rem 0; white-space: normal; display: block; }
  .s-nav .s-nav__panel a, .s-nav .s-nav__panel a:hover { text-decoration: none; }
  .s-nav__grid b { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--ink); }
  .s-nav__grid span { display: block; margin-top: 0.1rem; font-size: 0.85rem; color: var(--mid); }
  .s-nav__grid a:hover b, .s-nav__grid a.is-active b { color: var(--green); }
  .s-nav .s-nav__panel a.s-nav__all { display: inline-block; margin-top: 1.25rem; padding: 0; }
  .s-nav .s-nav__panel a.s-nav__all:hover { text-decoration: underline; text-underline-offset: 0.3em; }
  .s-nav__empty { padding: 0.9rem 0; }
  .r-stats { grid-template-columns: repeat(3, 1fr); }
  .r-stats li { padding: 1.4rem 1.5rem; border-top: 0; border-left: 1px solid var(--line); }
  .r-stats li:first-child { border-left: 0; }
  .r-stats b { font-size: 1.7rem; }
  .r-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .r-card--wide, .r-grid .r-card:last-child { grid-column: span 2; }
  .r-band__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .r-band__card { padding: 2rem 1.9rem; }
  .r-free { gap: 1.75rem; }
  .r-free--cover { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .r-free__cover { width: 100%; }
  .s-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── Desktop ── */
@media (min-width: 64rem) {
  :root { --space-section: 5.5rem; --space-hero-top: 4.5rem; --space-hero-bottom: 4rem; }
  .r-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; }
  .r-proof { margin: 0 0 0 auto; }
  .r-grid { grid-template-columns: repeat(3, 1fr); }
  .r-grid .r-card:last-child { grid-column: span 1; }
  .r-card { padding: 1.75rem 1.6rem 1.5rem; }
  .r-card--wide .r-card__title { font-size: 1.7rem; }
  .r-card--wide .r-card__text { max-width: 40rem; font-size: 1.02rem; }
}

/* ── Desktop lebar ── */
@media (min-width: 80rem) {
  :root { --gutter: 2.5rem; }
}

/* ── Komponen halaman: port dari site.css (kelas s-*) ── */
/* Kerangka & tipografi */
.s-main { flex: 1; }

/* Member area memakai header yang sama; tambahan kecilnya di sini supaya
   kedua kerangka dibaca dari satu berkas. */
.s-brand__tag { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); background: var(--primary-soft); padding: 0.15rem 0.5rem; border-radius: 999px; }
button.s-nav__cta { font: inherit; cursor: pointer; }
.s-bell { position: relative; margin-left: auto; }
.s-bell + .s-burger { margin-left: 0; }
.s-bell summary { list-style: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; color: var(--ink); position: relative; }
.s-bell summary::-webkit-details-marker { display: none; }
.s-bell summary:hover, .s-bell[open] summary { border-color: var(--line-strong); }
.s-bell svg { width: 1.2rem; height: 1.2rem; }
.s-bell__badge { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--primary); color: var(--ink); font-size: 0.7rem; font-weight: 600; display: grid; place-items: center; }
.s-bell__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(22rem, calc(100vw - 2 * var(--gutter))); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08); z-index: 40; overflow: hidden; }
.s-bell__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.s-bell__head form { margin: 0; }
.s-bell__head button { background: none; border: 0; padding: 0; font: inherit; font-size: 0.78rem; font-weight: 500; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.s-bell__head button:hover { color: var(--ink); }
.s-bell__list { max-height: 22rem; overflow-y: auto; }
.s-bell__item { display: block; padding: 0.7rem 1rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.s-bell__item:last-child { border-bottom: 0; }
.s-bell__item:hover { background: var(--soft); }
.s-bell__item.is-unread { background: var(--primary-soft); }
.s-bell__item b { display: block; font-size: 0.85rem; color: var(--ink); }
.s-bell__item span { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--muted); }
.s-bell__item small { display: block; margin-top: 0.2rem; font-size: 0.7rem; color: var(--muted); }
.s-bell__empty { margin: 0; padding: 1rem; font-size: 0.85rem; color: var(--muted); }
.s-bell__all { display: block; padding: 0.7rem 1rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.s-bell__all:hover { background: var(--soft); }
.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: 600; 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: 600; letter-spacing: -0.01em; line-height: 1.05; }
.s-h2 { margin-top: 0.85rem; max-width: 22ch; font-size: 1.85rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.s-h2--big { max-width: 16ch; font-size: 2.15rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }
.s-h3 { font-size: 1.1rem; font-weight: 600; 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: 2px solid var(--green-line); font-size: 1.05rem; color: var(--text); }
.s-small { font-size: 0.85rem; 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: var(--radius-md); border: 1px solid var(--primary); background: var(--primary); color: var(--ink); font: inherit; font-weight: 600; 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: var(--card); border-color: var(--line-strong); }
.s-btn--ghost:hover { background: var(--soft); border-color: var(--line-strong); }
.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: var(--radius-lg); z-index: -1; }
.s-hero__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); }
.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: 600; letter-spacing: -0.01em; 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: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); 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: 600; letter-spacing: -0.02em; color: var(--primary); font-variant-numeric: tabular-nums; }
.s-checkrows__text { font-size: 1.1rem; font-weight: 600; 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: 600; background: var(--card); border: 2px solid var(--line); color: var(--muted); }
.s-stairs li.is-dark .s-stairs__num { background: var(--ink); border-color: var(--line-strong); color: var(--primary); }
.s-stairs h3 { padding-top: 0.3rem; font-size: 1.15rem; font-weight: 600; }
.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: 1px solid var(--line-strong); background: var(--card); }
.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: 600; 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-lg); 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: 600; 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: 600; 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: 600; 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: 600; 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: var(--radius-lg); z-index: -1; }
.s-portrait img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); }
.s-quote, .s-intro .s-quote { margin-top: 1.5rem; font-size: 1.85rem; font-weight: 600; letter-spacing: -0.01em; 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-lg); background: var(--card); }
.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: 600; 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-lg); }

/* 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: 600; letter-spacing: -0.01em; line-height: 1; color: var(--primary); }
.s-timeline h3 { margin-top: 0.4rem; font-size: 1.15rem; }

/* 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-lg); background: var(--ink); color: #fff; overflow: hidden; border: 1px solid var(--line-strong); }
.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: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); }
.s-mock__body { padding: 0.9rem; }
.s-mock__screen { background: var(--card); color: var(--text); border-radius: var(--radius-md); 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: 600; }
.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: 600; padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); }
.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: var(--radius-sm); 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: var(--radius-sm); 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: 2px solid var(--green-line); }
.s-insight__ask li { font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.5; }


/* 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-lg); 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-lg); overflow: hidden; background: var(--card); }
.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: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; font: inherit; }
.s-strip-btn:hover { border-color: var(--line-strong); }
.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: 600; 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: 600; letter-spacing: -0.01em; line-height: 1; }
.s-plan__sessions { margin-top: 0.4rem; font-weight: 600; }
.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: 600; 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: 600; 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: 600; 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: 600; letter-spacing: -0.01em; 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: 1px solid var(--line-strong); }
.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: 600; letter-spacing: 0.04em; }
.s-chip i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary); }
.s-chip--light { background: var(--card); 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-lg); overflow: hidden; }
.s-tiles li { background: var(--card); padding: 1.25rem 1.25rem 1.35rem; }
.s-tiles__label { display: block; font-size: 0.7rem; font-weight: 600; 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: 600; letter-spacing: -0.01em; 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-lg); }
.s-chain li + li::before { content: "↓"; position: absolute; top: -1.45rem; left: 50%; transform: translateX(-50%); padding: 0 0.35rem; background: var(--card); font-size: 1.25rem; font-weight: 600; 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(--line-strong); }
.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: 600; line-height: 1.4; color: var(--ink); background: var(--card); }
.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: 600; 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: 1px solid var(--line-strong); }
.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: 600; letter-spacing: -0.01em; 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: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.s-stack__rank { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.s-stack__label { display: block; font-size: 0.7rem; font-weight: 600; 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: 1px dashed var(--line-strong); 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: var(--radius-lg); 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: 600; letter-spacing: -0.01em; 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-lg); background: var(--card); }

/* ── 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: var(--radius-md); }
.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: 600; letter-spacing: -0.01em; line-height: 1.15; color: var(--muted); }
.s-litany__ask { margin-top: 1.5rem; max-width: 20ch; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; 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: var(--radius-sm); background: var(--primary); color: var(--ink); font-size: 0.68rem; font-weight: 600; 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: 1px solid var(--line-strong); }
.s-index__num { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--radius-sm); background: var(--primary); color: var(--ink); font-size: 0.75rem; font-weight: 600; }
.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: 600; 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: 600; 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: 1px solid var(--line-strong); 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: var(--radius-lg); background: var(--card); 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: var(--radius-lg); background: var(--card); 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: var(--radius-sm); 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: var(--radius-sm); text-align: center; font-size: 0.62rem; font-weight: 600; 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: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
.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: 1px solid var(--line-strong); }
.s-pair__label { font-size: 0.72rem; font-weight: 600; 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: 600; letter-spacing: -0.01em; 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: 600; 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: 600; 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: 600; 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: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.s-hero__figure--stack::after { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border: 2px solid var(--line); border-radius: var(--radius-lg); 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: 600; 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: 600; 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: 1px solid var(--line-strong); 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: 600; 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: var(--radius-md); 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; }


/* ── 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: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); }
.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: 600; letter-spacing: -0.05em; line-height: 0.85; color: var(--ink); }
.s-ticket__month { padding-bottom: 0.2rem; font-size: 1.05rem; font-weight: 600; 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: 600; line-height: 1.3; color: var(--ink); }
.s-ticket__meta { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px dashed var(--line-strong); 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: 600; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
.s-agenda__month { display: block; margin-top: 0.3rem; font-size: 0.7rem; font-weight: 600; 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: var(--radius-sm); 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: 600; 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: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); }
.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: 600; color: var(--ink); }
.s-input, .s-select { width: 100%; min-height: 3.1rem; padding: 0.75rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--card); 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: var(--radius-md); 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: var(--radius-md); 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: 600; text-decoration: underline; text-underline-offset: 0.15em; }

/* ── 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: 600; letter-spacing: -0.01em; 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: 600; }
.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: var(--radius-md); 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: var(--radius-lg); background: var(--card); }
.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: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.s-card__count { font-size: 0.72rem; font-weight: 600; 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: 600; 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: var(--radius-md); background: var(--card); 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(--line-strong); 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: var(--radius-md); background: var(--soft); font-size: 0.95rem; color: var(--text); }
.s-callout b { color: var(--ink); }
.s-callout--line { background: var(--card); border: 1px solid var(--line); }
.s-callout--warn { background: var(--primary-soft); border-left: 2px solid var(--green-line); 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: 600; 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: var(--radius-sm); }
.s-btn--block { width: 100%; }
.s-btn--dark { background: var(--ink); border-color: var(--line-strong); 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: 600; 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: var(--radius-lg); 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: var(--radius-lg); overflow: hidden; background: var(--card); }
.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: 600; 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: var(--mono); font-size: 0.78rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); background: var(--card); }
.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: var(--radius-md); background: var(--soft); }
.s-recap { margin-top: 2rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--soft); }
.s-recap summary { list-style: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; 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: var(--radius-lg); background: var(--card); transition: border-color 0.15s, opacity 0.15s; }
.s-angle:has(input:checked) { border-color: var(--line-strong); 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: 600; 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: 2px solid var(--green-line); }
.s-angle__hook small { display: block; font-size: 0.7rem; font-weight: 600; 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: var(--radius-md); 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: var(--radius-md); 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: 600; }
.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: var(--radius-lg); 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: 600; 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: var(--radius-sm); background: var(--soft); font-family: var(--mono); 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: var(--radius-lg); }
.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: 600; }
.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: var(--radius-sm); 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: 600; }
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: var(--radius-md); 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: 600; color: var(--ink); }
.s-service .s-fields { margin-top: 1rem; gap: 1rem; }
.s-service .s-input { background: var(--card); }
.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: var(--card); transition: opacity 0.2s; }
.s-process > div { width: 100%; max-width: 20rem; }
.s-process p { font-size: 1.15rem; font-weight: 600; 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: var(--radius-lg); background: var(--card); transition: border-color 0.15s; }
.s-toolcard:hover { border-color: var(--line-strong); }
.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: 600; 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: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ── 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; }
/* Isi tulisan admin bisa memuat tabel dan blok kode yang lebih lebar dari layar
   ponsel; keduanya digulir sendiri, bukan meluberkan seluruh halaman. */
.s-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.s-prose pre { max-width: 100%; overflow-x: auto; }
.s-prose img { max-width: 100%; height: auto; }
.s-prose h2 { margin-top: 2rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.s-prose h3 { margin-top: 1.5rem; font-size: 1.1rem; font-weight: 600; 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: 600; }
.s-prose a { color: var(--ink); font-weight: 600; 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: 2px solid var(--green-line); color: var(--text); }
.s-prose img { border-radius: var(--radius-md); }
.s-prose code { padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); 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-page .s-h1 + .s-landing__block { margin-top: 2rem; }
.s-product__cover { margin: 1.75rem 0 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--soft); }
.s-product__cover img { display: block; width: 100%; height: auto; }
.s-product__box { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.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: var(--radius-md); }
.s-bundle a { color: var(--ink); font-weight: 600; 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: 600; 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: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); }
.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: 600; letter-spacing: -0.01em; 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: 1px dashed var(--line-strong); 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: 1px dashed var(--line-strong); 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: 600; 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; }

/* Landing page produk: satu kolom, badan dari blok, form di paling bawah */
.s-landing__hero { padding-top: 2rem; padding-bottom: 0; } /* hanya atas-bawah: jarak samping dari .s-wrap */
.s-landing__hero .s-crumbs { margin-bottom: 1.5rem; }
.s-landing__hero .s-h1 { max-width: 20ch; font-size: 2.25rem; }
.s-landing__hero .s-lead { max-width: 38rem; }
.s-landing__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.s-landing__buy b { font-size: 1.85rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
.s-landing__buy small { font-size: 0.85rem; color: var(--muted); }
.s-landing__buy .s-btn--ghost { margin-top: 0; }
.s-landing__buy .s-small { flex-basis: 100%; margin: 0; }
.s-landing__hero .s-product__cover { margin-top: 2rem; }
.s-landing__body { padding-top: 0.5rem; }
.s-landing__block { margin-top: 3rem; }
.s-landing__block.s-intro, .s-landing__block.s-prose { max-width: 40rem; }
.s-landing__block > .s-h2 { margin-top: 0; }
.s-landing__figure, .s-landing__video { margin: 3rem 0 0; max-width: 46rem; }
.s-landing__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.s-landing__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink); }
.s-landing__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s-landing__cta .s-small { margin-top: 0.75rem; }
.s-landing__block.s-note, .s-landing__block.s-callout { max-width: 40rem; }
.s-voices--all .s-voices__label { color: var(--ink); }
.s-voices--all blockquote { font-weight: 600; color: var(--ink); }
.s-landing__order { margin-top: 4rem; padding: 3rem 0 5rem; border-top: 1px solid var(--line-strong); background: var(--soft); }
.s-landing__order-grid { display: grid; gap: 2.5rem; }
.s-landing__details > .s-product__box:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.s-order .s-small { text-align: center; }
.s-sticky--order span b { color: var(--ink); }
.s-catalog { padding-top: 2.5rem; padding-bottom: 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: 1px solid var(--line-strong); }
.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: var(--radius-lg); overflow: hidden; background: var(--card); transition: border-color 0.15s; }
.s-productcard:hover { border-color: var(--line-strong); }
.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: 600; 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: 600; letter-spacing: -0.02em; color: var(--ink); }
.s-productcard__price small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.s-status { max-width: 30rem; margin: 0 auto; padding: 2rem 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); 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: 600; letter-spacing: -0.02em; }
.s-status__mark.is-wait { background: var(--soft); }
.s-status h1 { margin-top: 1rem; font-size: 1.6rem; font-weight: 600; 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: 1px dashed var(--line-strong); font-size: 0.8rem; color: var(--muted); }
.s-status__warn { margin-top: 1rem; font-size: 0.9rem; color: var(--ink); }
.s-status-wrap { padding-top: 3rem; padding-bottom: 5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .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) {
  /* Lonceng member area di ujung kanan, setelah menu. */
  .s-bell { order: 3; margin-left: 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. */
  /* Daftarnya melebar ke samping, bukan memanjang dalam satu kolom sempit —
     itu gunanya panel selebar layar. */
  .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-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: 2px solid var(--green-line); 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-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: 11rem 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; }
  /* Landing page produk: batang lengketnya tetap ada di desktop, sebagai pil
     mengambang; sembunyi saat tombol hero, bagian pesanan, atau footer terlihat. */
  .s-sticky--order { display: flex; left: 50%; right: auto; bottom: 1.25rem; width: min(30rem, calc(100% - 2rem)); padding: 0.6rem 0.6rem 0.6rem 1.25rem; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12); transform: translate(-50%, 150%); }
  .s-sticky--order.is-visible { transform: translate(-50%, 0); }
  .s-landing__hero .s-h1 { font-size: 2.75rem; }
  .s-landing__block { margin-top: 3.5rem; }
  .s-landing__order { padding: 4rem 0 6rem; }
  .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-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; }
}

/* Desktop */
@media (min-width: 64rem) {
  .s-section { padding: 7rem 0; }
  .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: 1px solid var(--line-strong); }
  .s-stairs::before { display: none; }
  .s-stairs li { padding: 1.25rem 0.75rem 1.5rem 0; min-height: calc(9rem + var(--rise)); border-top: 1px solid var(--line-strong); }
  .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(--line-strong); 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 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; }
  /* 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-order { position: sticky; top: 5.5rem; padding: 1.75rem; }
  .s-products { grid-template-columns: repeat(3, 1fr); }
  .s-landing__hero { padding-top: 3rem; }
  .s-landing__hero .s-h1 { font-size: 3rem; }
  .s-landing__order-grid { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; }
  /* Tanpa isi paket/modul: slip sendirian di tengah, bukan menempel di kanan kolom kosong. */
  .s-landing__order-grid--slip { grid-template-columns: minmax(0, 32rem); justify-content: center; }
}

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

/* Halaman pembayaran Core API: pilihan metode dan instruksi bayar. */
.s-status.s-pay { max-width: 34rem; text-align: left; }
.s-pay__head { text-align: center; }
.s-pay__eyebrow { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.s-pay__head h1 { margin-top: 0.35rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.s-pay__amount { margin: 0.5rem 0 0; color: var(--muted); }
.s-pay__amount b { color: var(--ink); font-size: 1.15rem; }
.s-pay__group { margin: 1.5rem 0 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.s-pay__methods { display: grid; gap: 0.6rem; }
.s-pay__method { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.85rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s; }
.s-pay__method:hover, .s-pay__method:focus-visible { border-color: var(--line-strong); outline: none; }
.s-pay__mark { flex: 0 0 2.4rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--ink); font-weight: 600; }
.s-pay__text { display: block; min-width: 0; }
.s-pay__text b { display: block; color: var(--ink); }
.s-pay__text span { display: block; margin-top: 0.1rem; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.s-pay__number { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.s-pay__number span { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.05em; color: var(--ink); word-break: break-all; }
.s-pay__number small { display: block; margin-bottom: 0.15rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.s-pay__copy { flex: 0 0 auto; padding: 0.45rem 0.8rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.s-pay__copy:hover { background: var(--ink); color: var(--bg); }
.s-pay__qr { display: block; width: 14rem; max-width: 100%; height: auto; margin: 1rem auto 0; padding: 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--card); }
.s-pay__deeplink { margin-top: 1rem; }
.s-pay__steps { margin: 1.1rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.s-pay__steps li + li { margin-top: 0.35rem; }
.s-pay__steps b { color: var(--ink); }
.s-pay__meta { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); }
.s-pay__meta b { color: var(--ink); }
.s-pay__switch { margin: 0.75rem 0 0; font-size: 0.9rem; }
.s-pay .s-status__meta { text-align: center; }
.s-pay .s-errors { margin: 1rem 0 0; }
.s-pay__notice { margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--ink); font-size: 0.9rem; }

/* ── Wujud baru untuk kelas s-* (menimpa hasil port di atas) ──────────────
   Judul besar serif 400; label mono; hijau untuk aksen; kartu bergaris tipis. */
.s-eyebrow, .s-intro .s-eyebrow { display: block; gap: 0; font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.s-eyebrow::before { display: none; }
.s-h1 { margin-top: 1.1rem; font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.s-h2 { margin-top: 0.9rem; max-width: 24ch; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }
.s-h2--big { max-width: 18ch; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); letter-spacing: -0.01em; line-height: 1.06; }
.s-h3, .s-outcomes h3, .s-kurikulum h3, .s-block--dark h3, .s-band h3, .s-chain h3, .s-stairs h3, .s-timeline h3, .s-index h3, .s-stepper h3, .s-agenda h3, .s-angle h3, .s-result__top h3, .s-ledger__steps h3, .s-stack__head h3, .s-toolcard h2, .s-card h2, .s-alloc__head h2, .s-alloc__top h3, .s-results > h2, .s-angles__more h2, .s-productcard h3, .s-product__box h2, .s-catalog__section h2, .s-prose h2, .s-prose h3, .s-panel .s-h2, .s-ticket__title, .s-tiles__value, .s-checkrows__text, .s-reveal blockquote, .s-voices blockquote, .s-insight__ask li, .s-prompt__head h3, .s-trio b { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.s-outcomes h3, .s-kurikulum h3, .s-block--dark h3, .s-band h3, .s-toolcard h2, .s-results > h2, .s-catalog__section h2, .s-prose h2 { font-size: 1.6rem; line-height: 1.15; }
.s-chain h3, .s-stairs h3, .s-timeline h3, .s-index h3, .s-stepper h3, .s-agenda h3, .s-angle h3, .s-result__top h3, .s-ledger__steps h3, .s-stack__head h3, .s-card h2, .s-alloc__head h2, .s-alloc__top h3, .s-angles__more h2, .s-productcard h3, .s-product__box h2, .s-prose h3, .s-ticket__title, .s-checkrows__text, .s-reveal blockquote, .s-voices blockquote, .s-insight__ask li, .s-prompt__head h3, .s-trio b { font-size: 1.35rem; line-height: 1.2; }
.s-quote, .s-intro .s-quote, .s-plan__name, .s-litany li, .s-litany__ask, .s-pair blockquote, .s-climax h2, .s-tool h1, .s-status h1, .s-pay__head h1, .s-landing__hero .s-h1, .s-page .s-h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; }
.s-quote, .s-intro .s-quote { font-size: 2.2rem; }
.s-plan__name { font-size: 2.1rem; }
.s-litany li, .s-litany__ask { font-size: 1.75rem; }
.s-pair blockquote { font-size: 1.75rem; }
.s-tool h1, .s-page .s-h1, .s-landing__hero .s-h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); }
.s-status h1, .s-pay__head h1 { font-size: 1.85rem; }
.s-stats strong, .s-evidence__figures strong, .s-timeline__num, .s-ledger__num, .s-stack__rank, .s-ticket__day, .s-agenda__day, .s-order__price b, .s-landing__buy b, .s-productcard__price, .s-tiles__value, .s-pay__number span { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.s-timeline__num, .s-ledger__num, .s-stack__rank { color: var(--green); }
.s-checkrows__num { font-family: var(--mono); font-weight: 500; color: var(--green); }
.s-mark { background: none; font-style: italic; color: var(--green); }
.s-lead { color: var(--mid); text-wrap: pretty; }
.s-lead b { color: var(--ink); font-weight: 600; }
.s-intro p, .s-story p, .s-bio, .s-stairs p, .s-profiles p, .s-chain p, .s-index p, .s-stepper p, .s-card > p, .s-toolcard > p { text-wrap: pretty; }
.s-strong { font-weight: 500; }
.s-note { border-left: 2px solid var(--green-line); color: var(--ink); }
.s-small, .s-figcaption, .s-help { color: var(--mid); }
.s-figcaption { font-family: var(--mono); font-size: var(--fs-small); }
.s-plan__label, .s-pair__label, .s-voices__label, .s-stepper__num, .s-tiles__label, .s-stack__label, .s-vs thead th, .s-vs tbody th.s-vs__mid, .s-agenda__month, .s-prompt__step, .s-card__count, .s-names small, .s-angle__hook small, .s-pay__eyebrow, .s-pay__group, .s-productcard__price small, .s-toolcard__soon, .s-paper__sessions b, .s-fit h3, .s-quadrant__tag, .s-paper__tag, .s-mock__tag, .s-mock th { font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em; }
.s-fit h3 { font-size: 0.72rem; color: var(--green); }
/* Label testimoni bisa panjang (nama · peran); sans lebih hemat lebar daripada mono. */
.s-voices__label { font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; }
.s-fit h3.is-muted { color: var(--mid); }

/* Tombol: pil. Utama tinta, ghost bergaris, gelap = utama, soft = tint hijau. */
.s-btn { min-height: 3rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-pill); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.95rem; gap: 0.6rem; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; }
.s-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(24, 21, 16, 0.14); }
.s-btn:active { transform: none; box-shadow: none; }
.s-btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.s-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.s-btn--dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.s-btn--soft { background: var(--green-tint); border-color: var(--green-line); color: var(--green); }
.s-btn--soft:hover { background: var(--green-line); border-color: var(--green-line); color: var(--green-deep); box-shadow: none; }
.s-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.s-btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; box-shadow: none; }
.s-btn--text { background: transparent; border-color: transparent; color: var(--mid); box-shadow: none; }
.s-btn--text:hover { background: transparent; border-color: transparent; color: var(--green); transform: none; box-shadow: none; }
.s-btn--sm { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.85rem; border-radius: var(--radius-pill); }
.s-btn.is-disabled, .s-btn:disabled, .s-btn[aria-disabled="true"] { transform: none; box-shadow: none; }
.s-link { color: var(--ink); font-weight: 600; text-decoration-color: var(--green-line); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.s-link:hover { color: var(--green); text-decoration-color: var(--green); }

/* Centang, chip, nomor: hijau di atas tint, bukan kuning di atas hitam. */
.s-check { background: var(--green-tint); color: var(--green); border: 1px solid var(--green-line); }
.s-check--off { background: var(--soft); color: var(--mid); border-color: var(--line); }
/* Aturan lama yang lebih spesifik ikut disamakan: centang di slip pesanan dan lencana lonceng. */
.s-order__gets .s-check { background: var(--green-tint); color: var(--green); border: 1px solid var(--green-line); }
.s-bell__badge { background: var(--green); color: #fff; }
.s-chip { background: var(--ink); color: var(--paper); font-family: var(--mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.s-chip i { background: var(--green-line); }
.s-chip--light { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.s-chip--primary { background: var(--green); color: #fff; }
.s-chip--primary i { background: rgba(255, 255, 255, 0.7); }
.s-quadrant__tag, .s-index__num, .s-result__num, .s-status__mark, .s-mock__tag, .s-mock__pill, .s-paper__tag.is-mid, .s-angle__tags span.is-hit, .s-agenda li.is-next .s-agenda__day { background: var(--green); color: #fff; }
.s-status__mark.is-wait { background: var(--soft); color: var(--mid); }
.s-paper__tag.is-ok { background: var(--card); color: var(--green); border: 1px solid var(--green-line); }
.s-checkrows__box { border: 1px solid var(--line-strong); background: var(--card); }
.s-checkrows input:checked + .s-checkrows__box { background: var(--green); border-color: var(--green); }
.s-checkrows__box::after { border-color: #fff; }
.s-checkrows input:focus-visible + .s-checkrows__box { outline-color: var(--green); }
.s-stairs li.is-dark .s-stairs__num { color: var(--green-line); }
.s-vs__badge { color: var(--green-line); border-color: var(--card); }
.s-vs .s-vs__privat { background: var(--green-tint); }
.s-mock__person.is-talking b { color: #fff; }
.s-mock tr.is-focus { background: var(--green-tint); }
.s-choice:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.s-choice input, .s-angle__pick input, .s-checkrows input { accent-color: var(--green); }
.s-angle:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.s-progress li.is-done { background: var(--green); }
.s-progress li.is-now { background: var(--green-line); }
.s-alloc__fill { background: var(--green); }
.s-lp-list li i.is-off { background: var(--green-line); }
.s-paper__track i::after { background: var(--green); border-color: var(--green-deep); }
.s-paper__track i::before { background: var(--ink); }
.s-map__legend i.is-warn { background: var(--green); border-color: var(--green); }
.s-map__legend i.is-leak { border-color: var(--green); }
.s-voices li.is-current .s-voices__label::before { color: var(--green); }
.s-flash { border-color: var(--green-line); background: var(--green-tint); }
.s-callout--warn { background: var(--green-tint); border-left: 2px solid var(--green); }
.s-errors { border-radius: var(--radius-md); border-left: 2px solid var(--red); background: #FBF1EE; color: var(--red); }
.s-errors b { color: var(--red); }
.s-error { color: var(--red); }
.s-timeline li::before { background: var(--green-line); }
.s-timeline li:last-child::after { border-left-color: var(--green); }
.s-timeline__dot { background: var(--green); }
.s-stepper li { border-top: 4px solid var(--green-line); }
.s-stepper li:last-child { border-top-color: var(--green); }
.s-plan--popular { border-left-color: var(--green); }
.s-insight__ask { border-left: 2px solid var(--green-line); }
.s-angle__hook { border-left: 2px solid var(--green-line); }
.s-prose blockquote { border-left: 2px solid var(--green-line); }
.s-prose a, .s-garansi a, .s-note a, .s-bundle a { color: var(--green); font-weight: 600; }

/* Hero: blok di belakang foto jadi kartu tint bergaris, bukan kotak kuning. */
.s-hero__figure::before { background: var(--green-tint); border: 1px solid var(--green-line); border-radius: var(--radius-lg); }
.s-hero__figure--outline::before { background: transparent; border: 1px solid var(--line-strong); }
.s-hero__figure--brackets i { border-color: var(--green); border-width: 3px; }
.s-hero__figure--stack::before { border: 1px solid var(--line-strong); }
.s-hero__figure--stack::after { border: 1px solid var(--line); }
.s-hero__img, .s-portrait img, .s-case img, .s-kurikulum img, .s-evidence img, .s-strip figure, .s-landing__figure img { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); }
.s-interview__person img { border: 1px solid var(--line-strong); }

/* Blok tinta dan pita: tinta tetap, tapi bersudut 16px dan aksennya hijau muda. */
.s-block--dark, .s-band, .s-save, .s-chain li:last-child, .s-stack li:nth-child(1) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.s-block--dark h3, .s-band h3, .s-save b, .s-chain li:last-child h3 { color: var(--paper); }
.s-stack li:nth-child(1) .s-stack__rank, .s-stack li:nth-child(1) .s-stack__label, .s-stairs li.is-dark .s-stairs__num { color: var(--green-line); }
.s-stack li { border: 1px solid var(--line-strong); }
.s-stack li:nth-child(3) { border: 1px dashed var(--line-strong); }
.s-bar > div { border-radius: var(--radius-lg); }
.s-mock { border-radius: var(--radius-lg); }

/* Klimaks: pita hijau muda selebar layar, bukan hitam. */
.s-climax { background: var(--green-tint); color: var(--ink); border-top: 1px solid var(--green-line); border-bottom: 1px solid var(--green-line); padding-top: 5rem; padding-bottom: 5rem; }
.s-climax h2 { max-width: 20ch; color: var(--ink); }
.s-climax p { color: var(--mid); }
.s-climax .s-small { color: var(--mid); }
.s-climax .s-btn { background: var(--green); border-color: var(--green); color: #fff; }
.s-climax .s-btn:hover { background: var(--green-deep); border-color: var(--green-deep); }
.s-climax .s-btn--outline-light { background: transparent; border-color: var(--ink); color: var(--ink); }
.s-climax .s-btn--outline-light:hover { background: var(--ink); color: var(--paper); }

/* Kartu, panel, form: garis tipis di atas kartu krem. */
.s-card, .s-panel, .s-order, .s-ticket, .s-toolcard, .s-productcard, .s-status, .s-angle, .s-result, .s-prompt, .s-alloc, .s-choice, .s-bundle li, .s-tiles, .s-vs, .s-chain li, .s-reveal blockquote, .s-paper__sheet, .s-paper::before, .s-paper::after, .s-resource { border-color: var(--line); background: var(--card); }
.s-tiles { background: var(--line); }
.s-tiles li { background: var(--card); }
.s-order, .s-ticket, .s-panel, .s-status { box-shadow: var(--shadow); }
.s-input, .s-select { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); min-height: 2.9rem; padding: 0.6rem 0.9rem; }
.s-input:hover, .s-select:hover { border-color: var(--soft); }
.s-input:focus-visible, .s-select:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-line); }
.s-field label, .s-field legend { font-size: var(--fs-small); font-weight: 600; }
.s-form__session, .s-callout, .s-recap, .s-locked li, .s-names li, .s-picked li, .s-service, .s-paper__head, .s-paper__sum div, .s-prompt__head, .s-alloc__head, .s-alloc__foot, .s-fold .s-prompt__body, .s-angle__tags span, .s-toolcard.is-soon { background: var(--soft); }
.s-callout--line { background: var(--card); }
.s-landing__order { background: var(--green-tint); border-top: 1px solid var(--green-line); }
.s-sticky { background: rgba(250, 247, 240, 0.96); }
.s-sticky--order { border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.s-pay__method { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-md); }
.s-pay__method:hover, .s-pay__method:focus-visible { border-color: var(--green); }
.s-pay__mark { background: var(--green-tint); color: var(--green); }
.s-pay__number { border: 1px solid var(--line-strong); background: var(--card); }
.s-pay__copy { border: 1px solid var(--ink); background: var(--card); }
.s-pay__copy:hover { background: var(--ink); color: var(--paper); }
.s-pay__qr { border: 1px solid var(--line); background: #fff; }
.s-pay__notice { background: var(--green-tint); }
.s-process { background: var(--paper); }
.s-process li.is-on i { background: var(--green); }

/* Kupon di slip pesanan: harga lama dicoret, baris kode + tombol Terapkan, status di bawahnya. */
.s-order__was { display: block; flex-basis: 100%; font-family: var(--mono); font-size: 0.9rem; color: var(--mid); text-decoration-color: var(--red); }
/* Di hero dan batang lengket harga coret sebaris di depan harga baru. */
.s-order__was--inline { display: inline; flex-basis: auto; font-size: 0.95rem; }
.s-sticky--order .s-order__was--inline { font-size: 0.8rem; }
.s-input--coupon { text-transform: uppercase; }
.s-input--coupon::placeholder { text-transform: none; }
.s-coupon-status.is-ok { color: var(--green); font-weight: 600; }
.s-coupon-status.is-error { color: var(--red); }

/* ── Pop-up kupon di halaman produk: voucher di tengah layar, turun dari atas ──
   Kartu bertakik di kiri-kanan (mask) pada garis sobek, kode di kotak bergaris
   putus-putus. Lapisan gelap tipis di belakang; halaman tidak digulir saat terbuka. */
.r-promo-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(24, 21, 16, 0.45); animation: r-promo-fade 0.25s ease-out both; }
.r-promo { position: fixed; left: 50%; top: 50%; z-index: 60; width: min(26rem, calc(100% - 2rem)); padding: 1.75rem 1.5rem 1.5rem; background: var(--card); border: 1px solid var(--green-line); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(24, 21, 16, 0.22); transform: translate(-50%, -50%); animation: r-promo-drop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  -webkit-mask: radial-gradient(circle at 0 var(--notch, 55%), transparent 0.7rem, #000 0.75rem), radial-gradient(circle at 100% var(--notch, 55%), transparent 0.7rem, #000 0.75rem); -webkit-mask-composite: source-in; mask: radial-gradient(circle at 0 var(--notch, 55%), transparent 0.7rem, #000 0.75rem), radial-gradient(circle at 100% var(--notch, 55%), transparent 0.7rem, #000 0.75rem); mask-composite: intersect; }
.has-promo { overflow: hidden; }
@keyframes r-promo-drop { from { transform: translate(-50%, -160%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes r-promo-fade { from { opacity: 0; } to { opacity: 1; } }
/* Setelah mendarat, animasi turun dilepas supaya denyut (klik di luar / Escape) tidak mengulang jatuhnya. */
.r-promo.is-settled { animation: none; }
.r-promo.is-settled.is-static { animation: r-promo-pulse 0.3s ease; }
@keyframes r-promo-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.03); } }
.r-promo__top { padding-right: 2rem; }
.r-promo .r-h3 { margin-top: 0.5rem; text-wrap: balance; }
.r-promo__text { margin-top: 0.6rem; font-size: 0.95rem; color: var(--mid); }
.r-promo__text b { color: var(--ink); font-weight: 600; }
/* Garis sobek: garis putus-putus selebar kartu tepat di tinggi takik. */
.r-promo__ticket { margin: 1.25rem -1.5rem 1.25rem; border-top: 2px dashed var(--green-line); }
.r-promo__code { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.9rem 1rem; border: 2px dashed var(--green); border-radius: var(--radius-md); background: var(--green-tint); text-align: center; }
.r-promo__code-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.r-promo__code-value { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; letter-spacing: 0.12em; color: var(--ink); word-break: break-all; }
.r-promo__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; margin-top: 0.85rem; text-align: center; }
.r-promo__meta b { font-weight: 500; color: var(--green); font-variant-numeric: tabular-nums; }
.r-promo .r-btn { width: 100%; margin-top: 1rem; }
.r-promo__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--mid); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.r-promo__close:hover { color: var(--ink); border-color: var(--line-strong); }
@media (min-width: 48rem) {
  .r-promo { padding: 2rem 1.9rem 1.75rem; }
  .r-promo__ticket { margin-left: -1.9rem; margin-right: -1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .r-promo, .r-promo-backdrop, .r-promo.is-settled.is-static { animation: none; }
}

/* Fokus keyboard mengikuti sistem baru (hijau). */
.s-btn:focus-visible, .s-faq summary:focus-visible, .s-garansi a:focus-visible, .s-strip:focus-visible, .s-strip-btn:focus-visible, .s-choice:focus-within, .s-pay__method:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }