/* Laman pemasang وكيل الشاملة — sistem reka bentuk The Islamic Commons: kertas pucat, dakwat
   hijau-hitam, aksen merah anggur; Inter (Latin, sans moden seperti laman ChatGPT), Amiri (Arab).
   Susun atur: satu kolum sempit di tengah — kepala, pembuka, tiga langkah, soalan, kaki. */
:root {
  --bg: #f7f7f4;
  --ink: #202622;
  --copy: #424940;
  --muted: #565d56;
  --line: #d2d5ce;
  --accent: #202622;     /* neutral seperti Hadith Agent: tiada emas/merah anggur pada hover */
  --paper: #fff;
  --code-bg: #d9d9d2;
  --band: #d9d9d2;      /* satu kelabu untuk jalur dan semua kotak kelabu (tip, label langkah, panel, kod) */
  --tick: #059669;     /* tanda ✓ harga: hijau zamrud seperti Hadith Agent */
  --lv-off: #8a8f98; --lv-light: #16a34a; --lv-balanced: #ca8a04; --lv-rich: #7c3aed;   /* tahap IUI */
  --k-new: #2e8b57; --k-changed: #3b6fc4; --k-fixed: #b85a3c;   /* label changelog: baharu hijau, ubah biru, baiki jingga */
  --font: 'Inter', -apple-system, system-ui, 'Helvetica Neue', sans-serif;
  --font-display: var(--font);
  --font-text: var(--font);
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --column: 680px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e0e10; --ink: #f3efe7; --copy: #c9c4ba; --muted: #8f8a80; --line: #2a2a30;
  --accent: #f3efe7; --paper: #16161a; --code-bg: #1d1d22; --band: #212121; --tick: #34d399;
  --lv-off: #a1a1aa; --lv-light: #4ade80; --lv-balanced: #facc15; --lv-rich: #a78bfa;
  --k-new: #5cc08d; --k-changed: #7aa2e3; --k-fixed: #d98a72;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e10; --ink: #f3efe7; --copy: #c9c4ba; --muted: #8f8a80; --line: #2a2a30;
  --accent: #f3efe7; --paper: #16161a; --code-bg: #1d1d22; --band: #212121; --tick: #34d399;
  --lv-off: #a1a1aa; --lv-light: #4ade80; --lv-balanced: #facc15; --lv-rich: #a78bfa;
  --k-new: #5cc08d; --k-changed: #7aa2e3; --k-fixed: #d98a72;
  color-scheme: dark;
  }
}
/* Halaman Arab: huruf dan digit Latin dalam Inter (seperti halaman Inggeris), selebihnya Amiri. unicode-range
   sengaja sempit: ruang dan tanda baca kekal Amiri supaya jarak teks Arab tidak berubah. size-adjust
   menyamakan saiz Inter dengan Amiri yang lebih kecil pada saiz fon yang sama. */
@font-face {
  font-family: 'Inter Latin'; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 90%;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwYZ8UA3.woff2) format('woff2');
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00C0-00FF, U+0024, U+0025, U+0026, U+0040, U+002B, U+2019;
}
/* Halaman Arab: Amiri untuk paparan dan teks */
html[lang="ar"] { --font: 'Inter Latin', 'Amiri', 'Geeza Pro', serif; --font-display: 'Inter Latin', 'Amiri', serif; --font-text: 'Inter Latin', 'Amiri', 'Geeza Pro', serif; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--font-text); -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01'; }
html[lang="ar"] body { font-size: 19px; line-height: 1.85; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
.hero h1 { letter-spacing: -.035em; }
html[lang="ar"] :is(h1, h2, h3, h4), html[lang="ar"] .hero h1 { letter-spacing: 0; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; cursor: pointer; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: calc(var(--column) + 32px); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
[lang="ar"] { font-family: 'Inter Latin', 'Amiri', 'Geeza Pro', serif; }
/* Tiada teks condong di mana-mana */
em, i, cite, address, dfn, var, [lang="en"], [lang="ms"], code, kbd { font-style: normal; }

/* Kepala gaya xAI: lebar penuh dan lutsinar di atas; bila ditatal, latar 85% dengan kabur ringan dan garis rambut */
.top { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
.top.scrolled { background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom-color: color-mix(in srgb, var(--line) 50%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Kepala nipis (Faris 2026-11-11): bekas 1280px, tinggi 52px, logo 32px di tepi, pautan rapat di sebelahnya
   (500 13px, pudar 55%), di hujung: bahasa, tema (32px, sudut 8px) dan butang putih bersudut tajam (28px). */
:root { --top-h: 52px; }      /* tinggi kepala (Faris 2026-11-11: lebih nipis); 46px di mudah alih/tablet (≤860px) */
.top-inner { display: flex; align-items: center; width: calc(100% - 40px); max-width: 1280px; height: var(--top-h); margin: 0 auto; }
.name { display: inline-flex; flex: none; width: 32px; height: 32px; text-decoration: none; }
.name .mark { display: block; width: 32px; height: 32px; }
.name .logo-dark { display: none; }
:root[data-theme="dark"] .name .logo-light { display: none; }
:root[data-theme="dark"] .name .logo-dark { display: block; }
.sections { display: flex; gap: 4px; margin-inline-start: 44px; }
.sections a { padding: 5px 13px; border-radius: 6px; color: color-mix(in srgb, var(--ink) 55%, transparent); text-decoration: none;
  font: 500 13px/18px var(--font); transition: color .2s ease; }
/* Hover di seluruh laman: hanya teks/ikon menjadi terang, tiada kotak latar yang muncul. */
.sections a:hover { color: var(--ink); }
/* Menu atas «Core» (pages.core_menu): gaya OpenAI. Hover/klik «Core» membuka panel lebar penuh di bawah kepala, berlatar
   sama dengan laman; senarai ciri teras dalam huruf besar. Laman di bawahnya dikaburkan oleh .core-scrim (dibina site.js
   di luar kepala, kerana backdrop-filter dalam kepala yang sudah kabur tidak mengaburkan laman). */
.core { display: flex; }
.core-btn { padding: 5px 13px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: color-mix(in srgb, var(--ink) 55%, transparent); font: 500 13px/18px var(--font); transition: color .2s ease; }
html[lang="ar"] .core-btn { font: 400 16px/18px 'Inter Latin', 'Amiri', serif; }
.core-btn:hover, .core.open .core-btn { color: var(--ink); }
/* Panel dan latar kabur sentiasa dilukis (tersembunyi dengan opacity/skala, tidak visibility) supaya bingkai pertama
   tidak perlu membina lapisan baharu; panel tertutup tidak menerima tetikus (pointer-events) atau fokus (inert, site.js).
   Buka: latar panel (::before) memanjang dari atas dengan lengkung lembut, isi muncul berturutan (25 ms setiap item);
   tutup lebih pantas dan serentak. Kotak panel sendiri penuh sejak mula supaya tetikus yang terus turun ke panel semasa
   animasi kekal di dalam menu. Lapisan sendiri (contain + translateZ): hover dalam senarai tidak melukis semula latar kabur. */
.core-panel { position: fixed; top: var(--top-h); left: 0; right: 0; z-index: 51; contain: layout paint; transform: translateZ(0);
  pointer-events: none; }
.core-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); transform-origin: top; transform: scaleY(0);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1); }
.core.open .core-panel { pointer-events: auto; }
.core.open .core-panel::before { transform: none; transition: transform .38s cubic-bezier(.32, .72, 0, 1); }
.core-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 40px; width: calc(100% - 40px); max-width: 1280px; margin: 0 auto; padding: 28px 0 38px; }   /* skala sama dengan kepala nipis (~0.8) */
.core-h, .core-list li { opacity: 0; transform: translateY(6px); transition: opacity .14s ease, transform .14s ease; }
.core.open .core-h, .core.open .core-list li { opacity: 1; transform: none;
  transition: opacity .32s cubic-bezier(.2, .8, .2, 1) var(--d, 60ms), transform .32s cubic-bezier(.2, .8, .2, 1) var(--d, 60ms); }
.core-list li:nth-child(1) { --d: 85ms; } .core-list li:nth-child(2) { --d: 110ms; } .core-list li:nth-child(3) { --d: 135ms; }
.core-list li:nth-child(4) { --d: 160ms; }
.core-col + .core-col .core-h { --d: 85ms; } .core-col + .core-col li:nth-child(1) { --d: 110ms; }
.core-col + .core-col li:nth-child(2) { --d: 135ms; } .core-col + .core-col li:nth-child(3) { --d: 160ms; }
.core-h { margin: 0 0 14px; color: var(--muted); font: 500 12px/1.4 var(--font); }
.core-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* Hover ringan: warna sahaja, pantas masuk (90 ms) dan lembut keluar (180 ms). */
.sections .core-list a { display: inline-block; padding: 0; border-radius: 0; color: color-mix(in srgb, var(--ink) 66%, transparent); text-decoration: none;
  font: 400 16px/1.45 var(--font-display); letter-spacing: -.01em; transition: color .18s ease-out; }
html[lang="ar"] .sections .core-list a { font: 400 18px/1.65 'Inter Latin', 'Amiri', serif; letter-spacing: 0; }
.sections .core-list a:hover, .sections .core-list a:focus-visible, .sections .core-list a[aria-current="page"] { color: var(--ink); transition-duration: .09s; }
/* Item Capabilities tanpa halaman lagi: teks pudar + tag «Soon» kecil, tiada pautan (content.CAPS href None). */
.core-soon { display: inline-flex; align-items: baseline; gap: 10px; color: var(--muted); font: 400 20px/1.45 var(--font-display); letter-spacing: -.01em; cursor: default; }
html[lang="ar"] .core-soon { font: 400 21px/1.65 'Inter Latin', 'Amiri', serif; letter-spacing: 0; }
.core-soon small { color: var(--muted); font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; }
html[lang="ar"] .core-soon small { font: 500 13px/1 'Inter Latin', 'Amiri', serif; }
/* Menu desktop: saiz SAMA dengan pautan di sebelahnya (16px / Arab 18px), satu baris (Faris: «selaras la semua kecik»).
   Menu mudah alih kekal 20px seperti pautannya (.mnav-col a). */
.sections .core-soon { font: 400 16px/1.45 var(--font-display); white-space: nowrap; }
html[lang="ar"] .sections .core-soon { font: 400 18px/1.65 'Inter Latin', 'Amiri', serif; }
.mnav-col .core-soon { font: 400 20px/1.4 var(--font-display); }
html[lang="ar"] .mnav-col .core-soon { font: 400 21px/1.6 'Inter Latin', 'Amiri', serif; }
/* Kad «Soon» dalam «Other capabilities» (capability yang belum ada halamannya): tidak berpaut, tanda kecil di sebelah nama. */
.value.value-soon { cursor: default; }
.value.value-soon h3 { color: var(--muted); }
.value.value-soon h3 small { margin-inline-start: 10px; color: var(--muted); font: 500 12px/1 var(--font); letter-spacing: 0; }
html[lang="ar"] .value.value-soon h3 small { font: 500 13px/1 'Inter Latin', 'Amiri', serif; }
.mnav-col .core-soon { padding: 5px 0; }
html[lang="ar"] .mnav-col .core-soon { padding: 3px 0; }
.top.core-on { background: var(--bg); border-bottom-color: transparent; transition: none; }
.core-scrim { position: fixed; inset: var(--top-h) 0 0; z-index: 49; background: color-mix(in srgb, var(--bg) 40%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; will-change: opacity;
  transition: opacity .22s cubic-bezier(.4, 0, .2, 1); }
.core-scrim.on { opacity: 1; pointer-events: auto; transition: opacity .32s cubic-bezier(.32, .72, 0, 1); }
/* Bertukar Core ↔ Capabilities (site.js): panel lama hilang serta-merta, latar panel baharu sudah penuh (tiada kelip);
   hanya isi yang muncul berturutan. */
.core.instant .core-panel::before, .core.instant :is(.core-h, .core-list li), .core.swap .core-panel::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .core-panel, .core-panel::before, .core-scrim, .core-h, .core-list li { transition: none !important; } .core-h, .core-list li { transform: none; } }
.tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  color: color-mix(in srgb, var(--ink) 75%, transparent); }
.icon-button:hover { color: var(--ink); }
.top-dl { display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: 0; background: var(--ink); color: var(--bg);
  text-decoration: none; font: 500 13px/1 var(--font); }
.top-dl:hover { opacity: .88; }
.lang-menu { border-radius: 12px; }

/* Pembuka */
.hero { padding-block: 64px 56px; text-align: center; }
/* Cip di atas tajuk: label «baharu», versi, dan anak panah ke cara pemasangan */
.chip { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 5px; padding-inline-start: 6px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); background: color-mix(in srgb, var(--ink) 4%, var(--bg));
  color: var(--ink); text-decoration: none; font: 500 14px/1 var(--font);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent); transition: border-color .2s, background .2s; }
.chip:hover { border-color: color-mix(in srgb, var(--ink) 24%, transparent); background: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
.chip-tag { --orange: #ea580c; padding: 6px 11px; border-radius: 999px; background: var(--orange); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .chip-tag { --orange: #f26a3d; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-tag { --orange: #f26a3d; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); } }
/* Gelap: cip hampir sehitam halaman (bukan kelabu), dibezakan oleh bingkai halus, seperti cip Grok. */
:root[data-theme="dark"] .chip { background: color-mix(in srgb, var(--ink) 1.5%, var(--bg)); border-color: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: none; }
:root[data-theme="dark"] .chip:hover { background: color-mix(in srgb, var(--ink) 3.5%, var(--bg)); border-color: color-mix(in srgb, var(--ink) 20%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip { background: color-mix(in srgb, var(--ink) 1.5%, var(--bg)); border-color: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: none; }
  :root:not([data-theme="light"]) .chip:hover { background: color-mix(in srgb, var(--ink) 3.5%, var(--bg)); border-color: color-mix(in srgb, var(--ink) 20%, transparent); } }
.chip-sep { font-style: normal; color: var(--muted); margin-inline: -4px; }
.chip-sub { color: var(--copy); }
.chip-go { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-inline-start: 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 9%, transparent); transition: transform .2s; }
.chip:hover .chip-go { transform: translateY(2px); }
html[lang="ar"] .chip-tag { font-weight: 600; }
@media (max-width: 760px) { .chip-sep, .chip-sub { display: none; } }   /* mobile: label + versi sahaja */
.hero h1 { margin: 0 0 16px; font: 600 clamp(38px, 6vw, 55px)/1.08 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
html[lang="ar"] .hero h1 { font-weight: 700; }
.lead { max-width: 560px; margin: 0 auto; color: var(--copy); font: 400 20px/1.55 var(--font-display); text-wrap: pretty; }
html[lang="ar"] .lead { font: 400 20px/1.75 var(--font); }
@media (min-width: 760px) { .lead { max-width: none; white-space: nowrap; } }
.download { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; min-height: 48px; padding: 12px 24px;
  background: var(--ink); color: var(--bg); text-decoration: none; font: 600 15px/1 var(--font); }
.download:hover { opacity: .86; }
.needs { margin: 16px 0 0; color: var(--muted); font: 400 13px/1.6 var(--font); }
.needs span { unicode-bidi: isolate; white-space: nowrap; }

/* Tangkapan skrin: lebih lebar daripada kolum teks; versi terang/gelap ikut tema */
.shot { margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.shot.wide { max-width: 1132px; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 60px -30px rgba(20, 25, 22, .35); }
.shot-dark { display: none !important; }
:root[data-theme="dark"] .shot-light { display: none !important; }
:root[data-theme="dark"] .shot-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none !important; }
  :root:not([data-theme="light"]) .shot-dark { display: block !important; }
}
.hero + .shot { margin-bottom: 64px; }
section.feature { border-top: 1px solid var(--line); padding-block: 56px 28px; text-align: center; }
section.feature h2 { margin-bottom: 10px; }
section.feature p { max-width: 640px; margin: 0 auto; color: var(--copy); }
.feature + .shot { margin-bottom: 64px; }

/* Bahagian */
section { padding-block: 48px; border-top: 1px solid var(--line); }
h2 { margin: 0 0 24px; font: 600 27px/1.2 var(--font-display); }
html[lang="ar"] h2 { font-weight: 600; }

/* Tiga langkah: baris bergaris rambut; nombor kecil, tajuk dan penerangan dalam tiga lajur tetap
   supaya setiap baris setinggi teksnya sahaja (tiada ruang kosong antara lajur) */
.steps { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 48px 220px minmax(0, 1fr); align-items: baseline; gap: 0 24px;
  padding-block: 20px; border-top: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); color: var(--muted);
  font: 600 11px/1 var(--font); letter-spacing: .14em; }
html[lang="ar"] .steps li::before { content: counter(step, arabic-indic); letter-spacing: 0; }
.steps h3 { margin: 0; font: 600 21px/1.3 var(--font-display); }
html[lang="ar"] .steps h3 { font-weight: 600; }
.steps p { margin: 0; color: var(--copy); font-size: 16px; line-height: 1.75; }
@media (max-width: 760px) {
  .steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; }
  .steps p { grid-column: 2; }
}

/* Soalan */
main details { border-top: 1px solid var(--line); }
main details:last-of-type { border-bottom: 1px solid var(--line); }
main summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 600 19px/1.4 var(--font-display); }
html[lang="ar"] main summary { font-weight: 600; }
main summary::-webkit-details-marker { display: none; }
main summary::after { content: '+'; flex: none; color: var(--muted); font: 300 24px/1 var(--font); transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
main details[open] summary::after { transform: rotate(45deg); }
main details[data-faq-closing] summary::after { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) {
  main summary::after { transition: none; }
}
main summary:hover { color: var(--accent); }
main details > div { color: var(--copy); }
main details > div > :last-child { margin-bottom: 18px; }
main details p { margin: 0 0 10px; }
code { padding: 1px 5px; background: var(--code-bg); font: 0.82em/1.5 var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.cmd { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 8px 8px 12px; direction: ltr; background: var(--code-bg); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; padding: 0; background: none; white-space: pre; font-size: 13px; }
.copy { flex: none; padding: 3px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: 600 11px/1.6 var(--font); }
.copy:hover { border-color: var(--ink); }

/* Kaki */
.file { font: 12px/1.6 var(--font); direction: ltr; text-align: start; overflow-wrap: anywhere; }
html[lang="ar"] .file { text-align: right; }

@media (max-width: 480px) {
  .needs span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }

/* Menu bahasa (lungsur) */
.lang { position: relative; }
/* Ikon glob sahaja, sama seperti butang tema di sebelahnya */
.lang summary { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px;
  cursor: pointer; list-style: none; color: color-mix(in srgb, var(--ink) 75%, transparent); transition: color .2s ease; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--ink); }
.lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 20; min-width: 170px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 34px -14px rgba(20, 25, 22, .35);
  animation: menu-in .16s ease both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.lang-menu a { display: block; padding: 8px 10px; text-decoration: none; color: var(--copy); font: 500 14px/1.3 var(--font); }
.lang-menu a:hover { color: var(--ink); }
.lang-menu a[aria-current] { color: var(--accent); }

/* Muat turun: Mac dan Windows (akan datang) */
.downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.downloads .download { margin-top: 0; }
.dl-also { margin: 14px 0 0; text-align: center; color: var(--muted); font: 400 14px/1.6 var(--font); }
.download.soon { justify-content: center; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }

/* Pemasangan CLI */
.intro { margin: -8px 0 22px; color: var(--copy); }
.cli-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cli { min-width: 0; padding: 18px 18px 8px; background: var(--paper); border: 1px solid var(--line); }
.cli h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font: 500 20px/1.3 var(--font-display); }
html[lang="ar"] .cli h3 { font-weight: 600; }
.cli h3 span { color: var(--muted); font: 600 11px/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .cli h3 span { letter-spacing: 0; text-transform: none; }
.cli p { margin: 10px 0 4px; color: var(--copy); font-size: .92em; }
.note { margin: 18px 0 0; color: var(--muted); font-size: .92em; }
#cli a, details a { color: var(--accent); }

/* Soalan: buka/tutup licin (JS menganimasi ketinggian kandungan) */
/* Kotak potong diluaskan 4px ke atas (diimbangi margin): tanda di atas huruf Arab baris pertama (شدّة، همزة) tidak terpotong. */
main details > div { overflow: hidden; padding-top: 4px; margin-top: -4px; }

/* Logo jenama sebenar (isi, bukan garis) */
svg.brand { fill: currentColor; stroke: none; flex: none; }
svg.brand.claude { fill: #d97757; }      /* oren rasmi Claude */
.cli h3 svg.brand { align-self: center; }

/* Arahan CLI: baris dibalut ke bawah, tiada bar tatal mendatar */
.cmd { align-items: flex-start; }
.cmd code { overflow: visible; white-space: pre-wrap; word-break: break-all; line-height: 1.55; }

/* Demo interaktif: UI app sebenar dalam iframe, diskala supaya muat lebar halaman */
.demo { margin: 0 auto 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.demo.wide { max-width: 1132px; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.demo-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 600 11px/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .demo-tag { letter-spacing: 0; text-transform: none; }
.demo-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb27f; box-shadow: 0 0 0 3px rgba(63, 178, 127, .18); }
.demo-theme { display: inline-flex; border: 1px solid var(--line); }
.demo-theme button { padding: 5px 12px; border: 0; background: transparent; color: var(--muted); font: 600 12px/1.4 var(--font); }
.demo-theme button.on { background: var(--ink); color: var(--bg); }
.demo-stage, .side-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #141414;
  box-shadow: 0 24px 60px -30px rgba(20, 25, 22, .35); }
.demo-stage iframe, .side-slot iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #141414; }
.side-stage img { display: block; width: 100%; height: auto; }
/* Kamera demo sidechat: zum perlahan ke kawasan tindakan (sama seperti .layer demo utama). */
.side-cam { position: relative; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.22, .8, .24, 1); }
.hl-ripple { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: rgba(120, 120, 128, .35); animation: hlRipple .55s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes hlRipple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
/* Kawasan panel sisi dalam tangkapan skrin Shamela (2000×1169): x 0–556, y 142–1169 */
.side-slot { position: absolute; left: 0; top: 12.15%; width: 27.8%; bottom: 0; overflow: hidden; }
/* Demo highlight: sorotan pilihan teks (biru pilihan macOS) dan kursor di atas gambar pembaca */
.hl-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.hl-layer.on { opacity: 1; }
.hl-layer.gone .hl-cursor { opacity: 0; transition: opacity .4s ease; }
.hl-rect { position: absolute; width: 0; border-radius: 2px; background: rgba(66, 133, 244, .26); }   /* tanpa mix-blend-mode: mahal di atas gambar besar */
.hl-cursor { position: absolute; left: 0; top: 0; will-change: transform; }
/* left/top jelas: dalam halaman RTL, kedudukan statik svg mutlak ialah tepi kanan (ikon beralih ~15px ke kiri). */
.hl-cursor svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); transition: transform .12s ease; }
.hl-cursor .ibeam { width: 10px; height: 22px; margin: -11px 0 0 -5px; fill: none; stroke: #111; stroke-width: 1.6;
}
.hl-cursor .ibeam .o { stroke: #fff; stroke-width: 3.6; }
.hl-cursor .arrow { display: none; width: 15px; height: 22px; fill: #111; stroke: #fff; stroke-width: 1.4; }
.hl-cursor.arrow .ibeam { display: none; }
.hl-cursor.arrow .arrow { display: block; }
.hl-cursor.down svg { transform: scale(.86); }
.hl-cursor.hidden { opacity: 0; }
.hl-cursor { transition: opacity .25s ease; }
.demo-fallback, .demo-small { display: none; }
/* Pada skrin kecil animasi desktop kekal hidup; kawalan halus disorok sahaja. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .demo-bar .demo-lang, .demo-bar .iui-levels { display: none; }
}
/* Gerakan dikurangkan: gunakan rakaman video tanpa animasi interaktif. */
@media (prefers-reduced-motion: reduce) {
  .window, .demo-stage, .side-slot { display: none; }
  .demo-fallback { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px;
    background: var(--line); pointer-events: none; }
}

/* Demo dalam tetingkap Mac, ikut app sebenar. Halaman kitab dan senarai natijah: tetingkap Maktabah Shamela asli dengan bar
   alatnya (tangkapan sebenar; butang «وكيل الشاملة» dan tab carian boleh ditekan). Chat utama: tiada bar alat Shamela, hanya
   bar tajuk nipis (lampu isyarat + tajuk), seperti /space/: tetingkap Shamela Agent sendiri (lalai app, tab.main_view
   «window»), atau «المكتبة الشاملة» bila chat dalam Shamela (bar alat disorok, tab.classic_takeover). Saiz bar tajuk ikut
   tangkapan Shamela sebenar (lebar 2000: bar 38 px, lampu Ø14 px, pusat x 18/44/71), jadi diskala dengan lebar tetingkap (cqw). */
.window { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #141414;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6); container-type: inline-size; }
.window-bar { position: relative; aspect-ratio: 2000 / 147; }
.window-bar img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Bar tajuk ikut tema skrin demo. Gelap = warna sebenar tangkapan Shamela (Mac gelap: #3E3E3E, teks #C4C4C4, garis gelap di
   bawah). Di halaman kitab bar ini menindih jalur tajuk tangkapan (0..38 daripada 147; garis di baris 38), jadi bar tajuk
   tetingkap Maktabah turut ikut tema; bar alat di bawahnya kekal asli. */
.own-bar { position: absolute; inset: 0 0 auto; height: 1.9cqw; display: flex; align-items: center; justify-content: center;
  background: #ECECEC; color: #4D4D4D; box-shadow: inset 0 -1px 0 #D2D2D2;
  font: 600 .85cqw/1 'Inter Latin', 'Amiri', -apple-system, "SF Pro Text", system-ui, sans-serif; }
.demo[data-theme="dark"] .own-bar { background: #3E3E3E; color: #C4C4C4; box-shadow: inset 0 -1px 0 #181818; }
.window[data-mode="search"] .own-bar { height: 1.96cqw; }
.own-bar i { position: absolute; top: 50%; width: .7cqw; height: .7cqw; margin: -.35cqw 0 0 -.35cqw; border-radius: 50%; background: #FF5F57; }
.own-bar i:nth-child(1) { left: .9cqw; } .own-bar i:nth-child(2) { left: 2.2cqw; background: #FEBC2E; } .own-bar i:nth-child(3) { left: 3.55cqw; background: #28C840; }
.own-bar .ob-lib, .window[data-view="inside"] .own-bar .ob-ai, .window[data-mode="search"] .own-bar .ob-ai { display: none; }
.window[data-view="inside"] .own-bar .ob-lib, .window[data-mode="search"] .own-bar .ob-lib { display: inline; }
.window[data-mode="ai"] .window-bar { aspect-ratio: auto; height: 1.9cqw; }
.window[data-mode="ai"] .window-bar img, .window[data-mode="ai"] .hot { display: none; }
.hot { position: absolute; border: 0; padding: 0; background: transparent; border-radius: 6px; cursor: pointer; }
.hot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hot-ai { left: 94.4%; top: 27%; width: 5.5%; height: 45%; }
.hot-tab { left: 87.5%; top: 72%; width: 12.4%; height: 27%; }
.hot.pulse { animation: hot-pulse 1.1s ease-in-out 2; }
@keyframes hot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 50% { box-shadow: 0 0 0 6px rgba(0, 0, 0, .18); background: rgba(0, 0, 0, .06); } }
.window-body { position: relative; aspect-ratio: 2000 / 1032; }
/* Tinggi tetingkap sama dalam kedua-dua mod (tiada lompatan): bar alat Shamela (7.35cqw) + halaman kitab = bar tajuk
   (1.9cqw) + pentas chat 1500×774 (51.6cqw); bahagian bawah senarai natijah dipotong. */
.window:not(.sp-panel-window)[data-mode="search"] .window-body { aspect-ratio: auto; height: 46.15cqw; }
.window[data-mode="search"] .layer-search > img { object-fit: cover; object-position: top; }
/* transform-origin turut beranimasi: zum dari satu kawasan ke kawasan lain (tray → popover skop) tidak melompat. */
.layer { position: absolute; inset: 0; transition: opacity .35s ease, visibility .35s, transform 1.1s cubic-bezier(.22, .8, .24, 1), transform-origin 1.1s cubic-bezier(.22, .8, .24, 1); }
.window-body { overflow: hidden; }      /* zum kamera demo tidak melimpah ke bar alat */
.layer-search img { display: block; width: 100%; height: 100%; }
.window[data-mode="search"] .layer-ai, .window[data-mode="ai"] .layer-search { opacity: 0; visibility: hidden; }
.window .demo-stage { border: 0; border-radius: 0; box-shadow: none; }
.window .side-slot { top: 0; }
/* ── Kepala mudah alih/tablet (≤860px), gaya OpenAI: bar nipis 52px dengan logo dan satu butang menu sahaja. Menu skrin
   penuh (.mnav, dibina site.js daripada menu desktop halaman itu) muncul di bawah bar: pautan utama besar, garis
   halus, kemudian CTA dan bahasa. Gerak Moden: buka 220ms, tutup 160ms, satu ease. ── */
.mnav-btn { display: none; position: relative; width: 40px; height: 40px; margin-inline-end: -8px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.mnav-btn span { position: absolute; top: 50%; left: 11px; width: 18px; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: currentColor;
  transform: translateY(-3.5px); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.mnav-btn span + span { transform: translateY(3.5px); }
.mnav-btn[aria-expanded="true"] span { transform: rotate(45deg); }
.mnav-btn[aria-expanded="true"] span + span { transform: rotate(-45deg); }
@media (max-width: 860px) {
  :root { --top-h: 46px; }
  .sections, .tools > .lang, .tools > .top-dl { display: none; }
  .top-inner { width: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  html[dir="rtl"] .top-inner { padding-inline: max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .name, .name .mark { width: 28px; height: 28px; }
  .mnav-btn { display: block; }
}
.top.mnav-on { background: var(--bg); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
/* Lapisan menu meliputi seluruh skrin dari atas (di bawah bar, z 50), legap serta-merta bila dibuka; hanya isi yang
   pudar masuk, jadi tiada kandungan halaman yang kelihatan tembus. */
.mnav { position: fixed; inset: 0; padding-top: var(--top-h); z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
  opacity: 0; visibility: hidden; pointer-events: none; scrollbar-width: none;
  transition: opacity .16s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .16s; }
.mnav::-webkit-scrollbar { display: none; }
.mnav.open { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
.mnav-inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.mnav-it { width: 100%; opacity: 0; transform: translateY(-6px); transition: opacity .16s cubic-bezier(.2, .8, .2, 1), transform .16s cubic-bezier(.2, .8, .2, 1); }
.mnav.open .mnav-it { opacity: 1; transform: none; transition-duration: .22s; transition-delay: calc(30ms + var(--i, 0) * 22ms); }
.mnav-big { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 0; border: 0; background: none; color: var(--ink); text-align: start;
  text-decoration: none; font: 400 30px/1.3 var(--font-display); letter-spacing: -.02em; -webkit-tap-highlight-color: transparent; }
html[lang="ar"] .mnav-big { font: 400 30px/1.6 'Inter Latin', 'Amiri', serif; letter-spacing: 0; padding: 2px 0; }
.mnav-big .mnav-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.mnav-acc[aria-expanded="true"] .mnav-chev { transform: rotate(180deg); }
/* Kumpulan (Core, Capabilities…): tinggi + pudar dianimasi site.js (400ms, sama seperti kaki laman); satu terbuka sahaja. */
.mnav-sub { height: 0; overflow: hidden; opacity: 0; }
.mnav-acc[aria-expanded="true"] + .mnav-sub { height: auto; opacity: 1; }
.mnav-col { padding: 10px 0 6px; }
.mnav-col + .mnav-col { padding-top: 14px; }
.mnav-col:last-child { padding-bottom: 14px; }
.mnav-h { margin: 0 0 4px; color: var(--muted); font: 500 13px/1.5 var(--font); }
.mnav-col ul { list-style: none; margin: 0; padding: 0; }
.mnav-col a { display: block; padding: 5px 0; color: color-mix(in srgb, var(--ink) 66%, transparent); text-decoration: none; font: 400 20px/1.4 var(--font-display); letter-spacing: -.01em; }
html[lang="ar"] .mnav-col a { font: 400 21px/1.6 'Inter Latin', 'Amiri', serif; letter-spacing: 0; padding: 3px 0; }
.mnav-col a[aria-current="page"], .mnav-col a:hover { color: var(--ink); }
.mnav-rule { width: 100%; height: 1px; margin: 22px 0; border: 0; background: var(--line); }
.mnav-lang { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 0; color: var(--muted); text-decoration: none; font: 400 17px/1.4 var(--font); }
html[lang="ar"] .mnav-lang, .mnav-lang[lang="ar"] { font: 400 19px/1.4 'Inter Latin', 'Amiri', serif; }
.mnav-lang:hover { color: var(--ink); }
.mnav-lang svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Kunci tatal pada html sahaja: overflow pada body menjadikan body bekas tatal, dan bar atas (sticky) lari ke luar skrin
   bila halaman sudah ditatal; kandungan lalu kelihatan tembus di atas menu. */
html.mnav-lock { overflow: hidden; }
@media (min-width: 861px) { .mnav { display: none; } }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav.open, .mnav-it, .mnav-btn span, .mnav-sub, .mnav-chev { transition: none !important; } .mnav-it { transform: none; } }

/* Lenis (tatal licin): gaya yang disyorkan */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Istilah bahasa lain dalam ayat (Shamela Agent, وكيل الشاملة): satu blok, tidak dipecah ke dua baris */
bdi { white-space: nowrap; }

/* Bahasa antara muka skrin demo (ع · EN · MS), di sebelah togol tema */
.demo-bar { gap: 10px; }
.demo-lang { display: inline-flex; margin-inline-start: auto; border: 1px solid var(--line); }
.demo-lang button { min-width: 38px; padding: 5px 10px; border: 0; background: transparent; color: var(--muted);
  font: 600 12px/1.4 var(--font); }
.demo-lang button.on { background: var(--ink); color: var(--bg); }
.demo-lang + .demo-theme { margin-inline-start: 0; }
/* Meter babak demo utama (site.js buildMeter): jeda / sambung + mula semula, tajuk babak dan shot semasa di permulaan
   bar demo; bar bersegmen (satu segmen setiap shot, dikumpul ikut babak) merentas lebar penuh di bawahnya. */
.demo-bar.has-meter { flex-wrap: wrap; row-gap: 12px; }
.demo-meter { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
.dm-btns { display: flex; gap: 6px; flex: none; }
.dm-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); background: transparent;
  color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; }
.dm-btn:hover { border-color: var(--muted); }
.dm-btn svg { width: 14px; height: 14px; fill: currentColor; }
.dm-btn.dm-rs svg { fill: none; }
.dm-now { min-width: 0; flex: 1; }
.dm-l1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dm-idx { flex: none; color: var(--muted); font: 500 12px/1.4 var(--font); font-variant-numeric: tabular-nums; }
html[lang="ar"] .dm-idx { font: 400 14px/1.4 'Inter Latin', 'Amiri', serif; }
.dm-ttl { color: var(--ink); font: 600 15px/1.35 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .16s; }
.dm-sub { margin-top: 1px; color: var(--muted); font: 400 12.5px/1.4 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .16s; }
.dm-fade { opacity: 0; }
/* Ruang dakwat di atas dan bawah teks yang dipotong (…): ekor ع، ي، ق dan tanda atas huruf Arab tidak terpotong;
   padding diimbangi margin negatif, jadi susun atur tidak berubah. */
.dm-ttl, .dm-sub { padding-block: .3em; margin-block: -.3em; }
.dm-sub { margin-top: calc(1px - .3em); }
.dm-track { order: 10; flex: 1 0 100%; display: flex; gap: 8px; transition: opacity .3s; }
.dm-group { display: flex; gap: 2px; flex-basis: 0; min-width: 0; }
.dm-seg { position: relative; flex-basis: 0; min-width: 4px; height: 14px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dm-seg::before, .dm-seg i { content: ""; position: absolute; inset-inline-start: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px;
  transition: height .15s, margin-top .15s; }
.dm-seg::before { inset-inline-end: 0; background: var(--line); }
.dm-seg i { width: 0; background: var(--ink); }
.dm-seg:hover::before, .dm-seg:hover i, .dm-seg:focus-visible::before, .dm-seg:focus-visible i { height: 5px; margin-top: -2.5px; }
.dm-track[data-state="paused"] .dm-seg i { background: var(--muted); }
.demo-meter[data-state="stopped"] .dm-now { opacity: .6; }
.dm-track[data-state="stopped"] { opacity: .55; }
.dm-track[data-state="stopped"]:hover { opacity: 1; }
html[lang="ar"] .dm-ttl { font: 700 16px/1.35 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .dm-sub { font: 400 14px/1.4 'Inter Latin', 'Amiri', serif; }
/* Melompat ke shot: kamera tanpa peralihan semasa mod laju, tetingkap ditutup tirai lembut. */
.demo.ff .layer, .demo.ff .side-cam, .demo.ff .hl-layer, .demo.ff .hl-layer * { transition: none !important; }
.demo-veil { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(246, 246, 244, .96);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.demo-veil[data-theme="dark"] { background: rgba(20, 20, 20, .96); }
.demo-veil.on { opacity: 1; pointer-events: auto; }
.dv-text { display: inline-flex; align-items: center; gap: 10px; color: #3c3f3a; font: 600 13px/1.4 var(--font); }
.demo-veil[data-theme="dark"] .dv-text { color: #d6d3cc; }
html[lang="ar"] .dv-text { font: 700 15px/1.4 'Inter Latin', 'Amiri', serif; }
.dv-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .7;
  animation: dv-spin .8s linear infinite; }
@keyframes dv-spin { to { transform: rotate(360deg); } }
/* Lompat ke shot: gambar shot (klon statik tetingkap demo, site.js «Gambar shot») tepat di atas tetingkap sebenar.
   Disediakan tersembunyi; dipaparkan/diangkat tanpa peralihan (satu bingkai). */
.demo-cover { position: absolute; z-index: 41; opacity: 0; pointer-events: none; contain: layout paint; }
.demo-cover.on { opacity: 1; pointer-events: auto; }
.demo-cover > .window, .demo-cover > .mo-live-win { margin: 0 !important; width: 100%; height: 100%; }
.demo-cover, .demo-cover * { transition: none !important; }

/* Kenapa Shamela Agent: empat nilai sebaris melintang. Hover/fokus satu: yang lain pudar. */
section.values { max-width: 1132px; }        /* lebih lebar daripada lajur teks: empat nilai muat sebaris */
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
/* Kad "Why Shamela Agent" kekal sama tinggi juga apabila berubah menjadi dua atau satu lajur. */
#why .value-grid { grid-auto-rows: 1fr; }
/* Kabur fokus (seperti kedalaman medan kamera): bila satu nilai dihover, yang lain kabur dan sedikit pudar; hanya bila
   satu nilai dihover (bukan garis/sela grid, jadi tiada kelip bila kursor melintas sempadan); lengkung keluar panjang;
   will-change mengekalkan teks pada lapisan sendiri (tiada anjakan rasterisasi). */
.value { padding: 26px 22px 28px; border-inline-start: 1px solid var(--line); will-change: opacity, filter;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), filter .7s cubic-bezier(.22, 1, .36, 1); }
.value:first-child { border-inline-start: 0; padding-inline-start: 0; }
.value:last-child { padding-inline-end: 0; }
.value-grid:has(.value:hover) .value:not(:hover), .value-grid:has(.value:focus-visible) .value:not(:focus-visible) {
  opacity: .55; filter: blur(4px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1) .04s, filter .55s cubic-bezier(.22, 1, .36, 1) .04s; }
.value-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper); color: var(--ink);
  transition: background-color .6s cubic-bezier(.22, 1, .36, 1), color .6s cubic-bezier(.22, 1, .36, 1), border-color .6s cubic-bezier(.22, 1, .36, 1); }
.value:hover .value-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.value-icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.value h3 { margin: 0 0 8px; font: 600 20px/1.3 var(--font-display); color: var(--ink); white-space: nowrap; }
html[lang="ar"] .value h3 { font-weight: 600; }
.value p { margin: 0; color: var(--copy); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
@media (max-width: 900px) {
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .value, .value:first-child, .value:last-child { padding: 24px 20px; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .value:nth-child(odd) { padding-inline-start: 0; border-inline-end: 1px solid var(--line); }
  .value:nth-child(even) { padding-inline-end: 0; }
}
@media (max-width: 760px) {
  .value-grid { grid-template-columns: minmax(0, 1fr); }
  .value, .value:nth-child(odd), .value:nth-child(even) { padding-inline: 0; border-inline-end: 0; }
  .value-grid:has(.value:hover) .value:not(:hover) { opacity: 1; filter: none; }
}

/* Suara pasukan: teks tengah yang tenang antara nilai produk dan demo seterusnya. */
figure.founder-voice { max-width: 872px; margin-block: 0; padding-block: 88px 92px; text-align: center; }
.founder-voice blockquote { margin: 0; }
.founder-voice blockquote p { margin: 0; color: var(--ink); font: 400 21px/1.7 var(--font-text); text-wrap: pretty; }
.founder-voice figcaption { margin-top: 28px; color: var(--muted); font: 500 14px/1.5 var(--font); }
html[lang="ar"] .founder-voice blockquote p { font: 400 25px/1.85 var(--font-text); }
html[lang="ar"] .founder-voice figcaption { font: 400 18px/1.6 var(--font-text); }
@media (max-width: 560px) {
  figure.founder-voice { padding-block: 64px 68px; }
  .founder-voice blockquote p { font-size: 18px; line-height: 1.7; }
  .founder-voice figcaption { margin-top: 22px; font-size: 13px; }
  html[lang="ar"] .founder-voice blockquote p { font-size: 22px; line-height: 1.8; }
  html[lang="ar"] .founder-voice figcaption { font-size: 16px; }
}

/* Penyedia: jadual Claude dan ChatGPT (logo sebenar), selebar «More features» di atasnya. Lajur: dijalankan melalui,
   langganan, kunci API (pautan ke halaman kunci API penyedia). Telefon: setiap penyedia satu blok, label dari <small>. */
section.providers { max-width: 1132px; padding-block: 72px 64px; }
.providers .intro { margin: -6px 0 34px; color: var(--copy); }
.pv-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pv-row.pv-head { padding: 0 0 12px; }
.pv-name { display: flex; align-items: center; gap: 14px; }
.pv-name h3 { margin: 0; font: 600 20px/1.2 var(--font-display); color: var(--ink); }
.provider-logo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 0;
  background: var(--bg); color: var(--ink); }
.pv-row > span { color: var(--ink); font-size: 15px; }
.pv-row small { display: none; }
.pv-row.pv-head > span { color: var(--muted); font-size: 13px; }
.pv-row a svg { margin-inline-start: 5px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .pv-row a svg { transform: scaleX(-1); }      /* anak panah keluar ikut arah bacaan, seperti ← pada «كل الأسئلة» */
.providers .note { margin-top: 18px; }
section.providers + section.band { border-top: 0; }      /* garis seksyen hanya bila hitam bertemu hitam: providers → FAQ ada garis; ke band (harga) tiada */
/* FAQ laman utama (.sp-faq halaman Core): tepi kandungan sama dengan «More features» dan jadual penyedia (1100px). */
.sp-wrap.home-faq { width: min(1100px, calc(100% - 32px)); }
@media (max-width: 760px) {
  .pv-head { display: none !important; }
  .pv-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pv-row > span { display: flex; justify-content: space-between; gap: 16px; }
  .pv-row small { display: inline; color: var(--muted); font-size: 14px; }
}

/* Langkah pasang: baris Mac / Windows dalam satu langkah */
.steps p b { color: var(--ink); font-weight: 600; }

/* FAQ «ربط» tidak berjaya: label platform di atas setiap arahan */
details .os { margin: 14px 0 4px; color: var(--muted); font-size: .9em; }
details .os b { color: var(--ink); font-weight: 600; }

/* Intelligent UI: butang tahap di luar skrin demo, statistik, senarai komponen ikut bidang */
/* Tahap IUI: di kiri bar demo (kiri dalam dua bahasa; bahasa dan tema di kanan), bucu tajam seperti
   butang bahasa; ibu jari gelongsor di belakang tahap terpilih. */
/* Bar demo IUI seperti demo utama: meter di permulaan, dropdown tahap rapat di sebelah bahasa dan tema di hujung. */
.iui-demo .demo-bar .iui-levels { margin-inline-start: auto; }
.iui-demo .demo-bar .iui-levels + .demo-lang { margin-inline-start: 0; }
/* Tahap IUI: cip seperti cip effort dalam composer app («Intelligent UI · Balanced» dengan titik warna);
   klik membuka menu tahap dengan keterangan. Warna tahap: Off kelabu, Light hijau, Balanced kuning, Rich ungu. */
.iui-demo .demo-bar { position: relative; z-index: 5; }          /* menu terbuka di atas tetingkap demo */
.iui-levels { position: relative; }
.iui-levels, .iui-levels button[data-level="off"] { --lv: var(--lv-off); }
.iui-levels[data-on="light"], .iui-levels button[data-level="light"] { --lv: var(--lv-light); }
.iui-levels[data-on="balanced"], .iui-levels button[data-level="balanced"] { --lv: var(--lv-balanced); }
.iui-levels[data-on="rich"], .iui-levels button[data-level="rich"] { --lv: var(--lv-rich); }
.lv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lv); transition: background-color .3s ease; }
.lv-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: 500 13px/1 var(--font); cursor: pointer; transition: border-color .2s ease; }
.lv-chip:hover, .iui-levels.open .lv-chip { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.lv-name, .lv-sep { color: var(--muted); font-weight: 400; }
.lv-cur { font-weight: 500; }
.lv-chev, .lv-check { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-chev { color: var(--muted); transition: transform .25s ease; }
.iui-levels.open .lv-chev { transform: rotate(180deg); }
.lv-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; width: 288px; padding: 4px;
  border: 1px solid var(--line); background: var(--paper); box-shadow: 0 14px 34px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.iui-levels.open .lv-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.lv-menu button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none;
  color: var(--ink); text-align: start; cursor: pointer; }
.lv-menu button { opacity: .78; transition: opacity .15s ease; }
.lv-menu button:hover { opacity: 1; }
.lv-menu button:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: -2px; }
.lv-menu .lv-dot { margin-top: 5px; }
.lv-text { flex: 1; min-width: 0; }
.lv-text b { display: block; font: 500 13px/1.35 var(--font); }
.lv-text span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.lv-check { flex: none; margin-top: 1px; color: var(--ink); opacity: 0; }
.lv-menu button.on .lv-check { opacity: 1; }
.lv-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

section.iui-why { border-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .iui-levels, .iui-demo .demo-bar { display: none; }
}

/* Halaman Arab: saiz dan berat Amiri (fon Latin sahaja ditukar ke Inter) */
html[lang="ar"] .sections a { font: 400 16px/18px 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .top-dl { font: 700 15px/1 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .chip { font: 400 17px/1 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .chip-tag { font-weight: 700; padding-block: 5px 7px; }
html[lang="ar"] .hero h1 { font-weight: 700; letter-spacing: 0; }
/* Telefon: tajuk Arab pecah dua baris; garis pen di bawah «داخل» (-.32em di bawah ekor huruf) tidak lagi menindih baris kedua. */
@media (max-width: 760px) { html[lang="ar"] .hero h1 { line-height: 1.55; } html[dir="rtl"] .hero .pen svg { bottom: -.2em; } }
html[lang="ar"] .lead { font: 400 21px/1.7 var(--font); }
html[lang="ar"] .download { font: 700 18px/1 var(--font); }
html[lang="ar"] .needs { font-size: 16px; }
html[lang="ar"] h2 { font-weight: 700; }
html[lang="ar"] .steps li::before { content: counter(step, arabic-indic); font: 700 18px/1 'Inter Latin', 'Amiri', serif; letter-spacing: 0; }
html[lang="ar"] .steps h3 { font-weight: 700; font-size: 22px; }
html[lang="ar"] .steps p { font-size: 18px; line-height: 1.8; }
html[lang="ar"] main summary { font-size: 20px; font-weight: 700; }
.lang-menu a[lang="ar"] { font: 700 17px/1.3 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .cli h3 { font-weight: 700; }
html[lang="ar"] .cli h3 span { font: 400 15px/1.4 'Inter Latin', 'Amiri', serif; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .demo-tag { font: 400 15px/1.4 'Inter Latin', 'Amiri', serif; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .demo-theme button { font: 700 14px/1.4 'Inter Latin', 'Amiri', serif; }
.demo-lang button[data-lang="ar"] { font: 700 14px/1.4 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .value h3 { font-weight: 700; }
html[lang="ar"] .lv-chip { font: 400 16px/1 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .lv-cur { font-weight: 700; }
html[lang="ar"] .lv-text b { font: 700 16px/1.4 'Inter Latin', 'Amiri', serif; }
html[lang="ar"] .lv-text span { font-size: 15px; line-height: 1.5; }
html[lang="ar"] .lv-menu .lv-dot { margin-top: 9px; }


/* Seksyen berlatar kelabu (seperti laman ChatGPT): latar penuh lebar tanpa mengubah lebar kandungan. */
section.band { position: relative; border-top: 0; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
section.band.values, section.band.iui-why { padding-block: 72px; }
section.band + section { border-top: 0; }
section.band .value-grid { border-color: transparent; }

/* Soalan: pautan ke halaman semua soalan. */
.more { display: inline-flex; gap: 6px; margin-top: 22px; color: var(--ink); font: 500 15px/1.4 var(--font); text-decoration: none; }


/* CTA akhir: muat turun. */
section.get { padding-block: 96px 104px; text-align: center; }
section.get h2 { margin-bottom: 12px; font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.03em; text-wrap: balance; }
html[lang="ar"] section.get h2 { letter-spacing: 0; }
/* Jalur penutup halaman Core («Use … in Maktabah Shamela»): tajuk sebaris dari tablet ke atas; bekasnya dilebarkan
   (lebar lajur biasa 680px terlalu sempit untuk tajuk ini), teks lain kekal di tengah. Telefon: dibalut biasa. */
@media (min-width: 760px) {
  section.get.sp-end .wrap, .mo section.get .wrap { max-width: none; }
  section.get.sp-end h2, .mo section.get h2 { white-space: nowrap; }
}

/* Harga: kad bersudut tajam seperti halaman sokongan Hadith Agent — gambar 3:2, nama, harga besar,
   keterangan, senarai, butang penuh lebar. */
section.pricing { max-width: 1132px; text-align: center; }
section.pricing .intro { margin: -12px 0 28px; color: var(--copy); }
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: start; }
@media (max-width: 1100px) and (min-width: 861px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Researcher Pro: suis 1/2 komputer, seperti pemilih tempat duduk. */
.plan-seats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 16px 0 0; padding: 3px; border: 1px solid var(--line); }
/* Penanda meluncur di belakang butang (bukan latar setiap butang): tiada kelipan bila ditukar. */
.seat-thumb { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); background: var(--ink);
  transform: translateX(calc(var(--i, 0) * 100% * var(--flip, 1))); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
html[dir="rtl"] .seat-thumb { --flip: -1; }
.plan-seats button { position: relative; z-index: 1; min-height: 34px; border: 0; background: transparent; color: var(--muted); font: 500 13px/1 var(--font); cursor: pointer; transition: color .2s; }
.plan-seats button:hover { color: var(--ink); }
.plan-seats button.on { color: var(--bg); }
.plan-seats.static { grid-template-columns: 1fr; }
.plan-seats.static span { display: grid; place-items: center; min-height: 34px; color: var(--copy); font: 500 13px/1 var(--font); }
.price-list li.no { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.price-list li.no::before { width: 8px; height: 0; top: .8em; border-left: 0; border-bottom: 1.4px solid currentColor; transform: none; }
.plan-price b { transition: opacity .15s; }
.price-note { text-wrap: balance; }
.plan { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); background: var(--paper); }
.plan.popular { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.plan-body { display: flex; flex: 1; flex-direction: column; padding: 18px 8px 6px; }
.plan h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 17px/1.3 var(--font); letter-spacing: -.01em; }
.plan .badge { padding: 2px 8px; background: var(--ink); color: var(--bg); font: 600 11px/1.5 'Inter', sans-serif; letter-spacing: .02em; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.plan-price b { font: 600 40px/1 'Inter', sans-serif; letter-spacing: -.03em; color: var(--ink); }
.plan-price span { color: var(--muted); font-size: 14px; }
.plan-price em { margin-inline-start: auto; color: var(--tick); font: 600 13px/1.4 var(--font); font-style: normal; }
.plan-desc { margin: 10px 0 0; color: var(--copy); font-size: 15px; line-height: 1.6; min-height: 3.2em; }   /* dua baris: senarai ciri sebaris di semua kad */
.price-list { flex: 1; margin: 16px 0 22px; padding: 0; list-style: none; }
.price-list li { position: relative; padding: 4px 0; padding-inline-start: 24px; color: var(--copy); font-size: 15px; }
.price-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .75em; width: 10px; height: 5px; border-left: 1.6px solid var(--tick);
  border-bottom: 1.6px solid var(--tick); transform: rotate(-45deg); }   /* tanda ✓ tidak dicerminkan dalam RTL */
.plan .download { justify-content: center; width: 100%; margin-top: 0; border-radius: 0; }
.download.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.download.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); opacity: 1; }
.price-note { margin: 22px auto 0; max-width: none; color: var(--muted); font-size: 14px; }
@media (min-width: 900px) { .price-note { white-space: nowrap; } }     /* satu baris di skrin lebar */

/* Kaki laman gaya anthropic.com (pages.footer, site.js «Kaki laman»): logo di kiri; di kanan satu baris setiap kumpulan
   dengan garis rambut, nama kumpulan kecil; bila dibuka, halaman-halamannya satu sebaris di lajur kanan, yang pertama sebaris
   dengan nama kumpulan. Saiz teks lebih kecil daripada keterangan terkecil laman (14.5–15px), sama di semua lebar skrin. */
.site-foot { overflow: hidden; border-top: 1px solid var(--line); color: var(--muted); font: 400 13px/1.6 var(--font); }
.foot-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; width: calc(100% - 32px); max-width: 1100px; margin: 0 auto; padding: 72px 0 56px; }
.foot-logo { display: inline-block; align-self: start; line-height: 0; text-decoration: none; }
.logo { width: 32px; height: auto; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline; }
.foot-acc { border-bottom: 1px solid var(--line); }
.foot-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-top: 1px solid var(--line); }
.foot-head { grid-area: 1 / 1 / 2 / -1; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0; border: 0; background: none;
  color: var(--muted); text-align: start; cursor: pointer; font: 400 13px/1 var(--font); transition: color .12s ease-out; }
html[lang="ar"] .foot-head { font: 400 14px/1 'Inter Latin', 'Amiri', serif; }
.foot-head:hover, .foot-head[aria-expanded="true"] { color: var(--ink); }
.foot-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.foot-chev { width: 14px; height: 14px; margin-inline-start: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.foot-head[aria-expanded="true"] .foot-chev { transform: rotate(180deg); }
/* Isi: tinggi + pudar dianimasi site.js (400ms, cubic-bezier(.4, 0, .2, 1), sama buka dan tutup seperti anthropic.com). */
.foot-body { grid-area: 2 / 2 / 3 / 3; height: 0; overflow: hidden; opacity: 0; }
.foot-row.open .foot-body { height: auto; opacity: 1; }
.foot-body ul { list-style: none; margin: 0; padding: 0; }
.foot-body li { border-top: 1px solid var(--line); }
.foot-body li.foot-1 { display: none; }
.foot-body a, .foot-first { display: flex; align-items: center; width: fit-content; height: 48px; color: var(--copy); text-decoration: none;
  font: 400 13px/1 var(--font); transition: color .12s ease-out; }
html[lang="ar"] :is(.foot-body a, .foot-first) { font: 400 14px/1 'Inter Latin', 'Amiri', serif; }
.foot-body a:hover, .foot-first:hover { color: var(--ink); }
/* Halaman pertama di baris kumpulan (di atas butang): pudar serentak dengan isi. */
.foot-first { grid-area: 1 / 2 / 2 / 3; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .4s cubic-bezier(.4, 0, .2, 1), color .12s ease-out; }
.foot-row.open .foot-first { opacity: 1; pointer-events: auto; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; width: calc(100% - 32px); max-width: 1100px; margin: 0 auto; padding: 8px 0 96px; font-size: 12px; }
html[lang="ar"] .foot-bottom { font-size: 13px; }
.foot-bottom p { margin: 0; margin-inline-end: auto; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-legal a { color: var(--muted); text-decoration: none; transition: color .12s ease-out; }
.foot-legal a:hover { color: var(--ink); }
.foot-ts { display: flex; }
.foot-ts-top { display: none; }
@media (min-width: 700px) { .foot-bottom p { white-space: nowrap; } }
/* Tablet dan telefon: logo dan suis tema sebaris di atas; di bawah pautan undang-undang sebaris, kemudian hak cipta. */
@media (max-width: 860px) {
  .foot-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0 40px; }
  .foot-side { display: flex; align-items: center; justify-content: space-between; }
  .foot-ts-top { display: flex; }
  .foot-ts-end { display: none; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 56px; }
  .foot-legal { order: -1; flex-wrap: nowrap; gap: 18px; white-space: nowrap; }
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .foot-row { grid-template-columns: minmax(0, 1fr); }
  .foot-body { grid-area: 2 / 1 / 3 / 2; }
  .foot-first { display: none; }
  .foot-body li.foot-1 { display: list-item; }
  .foot-body a { width: auto; height: 44px; padding-inline-start: 28px; }     /* inden: halaman di bawah kumpulan */
}
@media (prefers-reduced-motion: reduce) { .foot-chev, .foot-first { transition: none; } }
/* Suis tema (seperti cursor.com): pil legap, tiga ikon 15px, ibu jari legap meluncur ke pilihan; ikon tidak aktif pudar. */
.theme-switch { position: relative; display: inline-flex; flex: none; padding: 2px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.theme-switch .ts-thumb { position: absolute; top: 2px; bottom: 2px; left: 0; width: 36px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, var(--bg)); transition: transform .32s cubic-bezier(.34, 1.36, .64, 1), width .32s cubic-bezier(.34, 1.36, .64, 1); }
.theme-switch button { position: relative; display: inline-grid; place-items: center; width: 36px; height: 26px; padding: 0; border: 0;
  border-radius: 999px; background: none; color: color-mix(in srgb, var(--ink) 55%, var(--bg)); cursor: pointer; transition: color .2s ease; }
.theme-switch button:hover, .theme-switch button[aria-checked="true"] { color: var(--ink); }
.theme-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.theme-switch svg { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .theme-switch .ts-thumb { transition: none; } }

/* Halaman dokumen: kepala lebar, indeks tajuk melekat di tepi (atas), kandungan satu lajur, CTA berlatar kelabu. */
.wrap-wide { width: calc(100% - 32px); max-width: 1100px; margin-inline: auto; }
.doc-head { padding: 72px 0 40px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 14px; color: var(--muted); font: 600 11px/1.4 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
html[lang="ar"] .eyebrow { font: 700 15px/1.4 var(--font); letter-spacing: 0; text-transform: none; }
.doc-head h1 { margin: 0 0 14px; max-width: 760px; font: 600 clamp(36px, 5.4vw, 56px)/1.06 var(--font-display); letter-spacing: -.035em; }
html[lang="ar"] .doc-head h1 { font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.doc-head .lede { max-width: 640px; margin: 0; color: var(--copy); font-size: 19px; line-height: 1.55; }
.doc-head .updated { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

/* ── Perbandingan (/compare/): kad tiga produk, jadual sebelah-menyebelah, ciri ruang kerja ─────────── */
.compare .cmp-block { margin-bottom: 64px; }
.compare h2 { margin: 0 0 18px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.cmp-kicker { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.cmp-kicker b { color: var(--ink); font-weight: 600; }
.cmp-card.us { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.value-icon svg.cmp-thl { fill: currentColor; stroke: none; }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.cmp-table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.cmp-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-table thead th { color: var(--copy); font-size: 14px; font-weight: 600; }
.cmp-table thead th.us { color: var(--ink); }
.cmp-table .cmp-label { width: 19%; }
.cmp-table tbody th { color: var(--ink); font-weight: 600; }
.cmp-table td { color: var(--copy); }
.cmp-table .us { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cmp-table td.us { color: var(--ink); }
.cmp-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 8px; border-radius: 50%; vertical-align: -5px; }
.cmp-mark svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cmp-mark.yes { color: var(--tick); background: color-mix(in srgb, var(--tick) 15%, transparent); }
.cmp-mark.part { color: var(--lv-balanced); background: color-mix(in srgb, var(--lv-balanced) 18%, transparent); }
.cmp-mark.no { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.compare .cmp-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare .cmp-last { margin-bottom: 0; }
.cmp-soon { align-self: flex-start; margin-top: auto; padding: 3px 10px; border-radius: 999px; background: var(--band); color: var(--copy); font-size: 12px; font-weight: 600; }
.cmp-feats .need-link, .cmp-feats .cmp-soon { margin-top: 14px; }
.cmp-fair ul { margin: 0; padding-inline-start: 20px; color: var(--copy); font-size: 16px; line-height: 1.75; }
.cmp-seen { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 980px) { .compare .cmp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Telefon: setiap baris jadual menjadi kad (tajuk, kemudian tiga produk bertindan dengan namanya). */
@media (max-width: 700px) {
  .cmp-scroll { overflow: visible; border: 0; background: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; }
  .cmp-table { min-width: 0; }
  .cmp-table colgroup, .cmp-table thead { display: none; }
  .cmp-table tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
  .cmp-table tbody th { padding: 12px 14px 4px; border: 0; }
  .cmp-table td { padding: 8px 14px; border: 0; }
  .cmp-table td:last-child { padding-bottom: 12px; }
  .cmp-table td::before { content: attr(data-p); display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; }
  .cmp-table tbody tr:last-child > * { border-bottom: 0; }
}
@media (max-width: 560px) { .compare .cmp-feats { grid-template-columns: 1fr; } .compare .cmp-block { margin-bottom: 48px; } }
/* Seperti halaman Hadith Agent: teks 720px di tengah skrin, indeks 200px melekat di tepi (45px dari sisi). */
.doc-grid { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 72px; width: calc(100% - 32px); max-width: 1100px;
  margin-inline: auto; padding: 48px 0 88px; }       /* indeks sejajar dengan tajuk halaman, teks di sebelahnya */
.doc-grid > .doc { grid-column: 2; }
.toc { grid-column: 1; grid-row: 1; position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; width: 200px; }
.toc p { margin: 0 0 10px; padding-inline-start: 10px; color: var(--muted); font: 600 11px/1.4 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .toc p { font: 700 14px/1.4 var(--font); letter-spacing: 0; text-transform: none; }
.toc a { padding: 6px 0; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); color: color-mix(in srgb, var(--ink) 70%, transparent);
  font: 400 12px/17.4px var(--font); text-decoration: none; transition: color .4s cubic-bezier(.22, 1, .36, 1), border-color .4s cubic-bezier(.22, 1, .36, 1); }
html[lang="ar"] .toc a { font-size: 15px; line-height: 1.5; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-inline-start-color: var(--ink); }
/* Changelog: reka bentuk changelog Hadith Agent. Tiada indeks (senarai terus bertambah); tajuk keluaran dan
   tarikh sebaris, setiap perubahan berlabel jenis (huruf besar kecil berwarna) di lajur kiri. */
.doc-grid.solo { grid-template-columns: minmax(0, 760px); }
.doc-grid.solo > .doc { grid-column: 1; }
.cl-rel { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 62px; }
.cl-rel.cl-first { padding-top: 0; margin-top: 0; border-top: 0; }   /* blok pertama yang kelihatan (ditanda oleh pages.py / penapis) */
.cl-rel[hidden] { display: none; }
.cl-ver { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.doc .cl-ver h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.cl-date { color: var(--muted); font-size: 13px; }
html[lang="ar"] .doc .cl-ver h2 { font-size: 21px; }
.doc ul.cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.doc .cl-list li { display: grid; gap: 2px; margin: 0; }   /* label jenis di atas, keterangan di bawahnya */
.cl-kind { color: var(--muted); font: 700 11px/1.4 var(--font); letter-spacing: .07em; text-transform: uppercase; }
.cl-kind[data-kind="new"] { color: var(--k-new); }
.cl-kind[data-kind="changed"] { color: var(--k-changed); }
.cl-kind[data-kind="fixed"] { color: var(--k-fixed); }
html[lang="ar"] .cl-kind { font-size: 13px; letter-spacing: 0; }
.cl-body { color: var(--copy); font-size: 15px; line-height: 1.6; }
html[lang="ar"] .cl-body { font-size: 17px; }
.cl-body b { color: var(--ink); font-weight: 600; }
.doc h2 { margin: 48px 0 12px; font: 600 22px/1.3 var(--font-display); letter-spacing: -.015em; scroll-margin-top: 96px; }
.doc > h2:first-child, .doc > .faq-cat:first-child h2 { margin-top: 0; }
html[lang="ar"] .doc h2 { font-weight: 700; letter-spacing: 0; }
.doc p, .doc li { color: var(--copy); }
.doc ul { padding-inline-start: 22px; }
.doc li { margin: 6px 0; }
.doc a { color: var(--ink); }
.doc code { display: inline-block; max-width: 100%; font-size: .8em; overflow-wrap: anywhere; }
.doc .file { margin: 12px 0 0; padding: 14px 16px; background: var(--code-bg); color: var(--muted); font-size: 12px; }
.faq-cat { padding: 0; border-top: 0; scroll-margin-top: 96px; }
.faq-cat + .faq-cat h2 { margin-top: 56px; }
section.page-cta { padding-block: 72px; }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-text { min-width: 0; }
section.page-cta h2 { margin-bottom: 8px; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.03em; text-wrap: balance; }
html[lang="ar"] section.page-cta h2 { letter-spacing: 0; }
section.page-cta .lead { margin: 0; max-width: none; text-align: start; }
section.page-cta .downloads { flex: none; margin-top: 0; justify-content: flex-end; }
@media (max-width: 760px) { .cta-row { flex-direction: column; align-items: flex-start; } section.page-cta .downloads { justify-content: flex-start; } }
section.page-cta .downloads .download { border-radius: 0; }
/* Semua CTA akhir di tengah, sama seperti jalur penutup halaman Core (section.get): tajuk, lead dan butang bertindan. */
section.page-cta .cta-row { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
section.page-cta .cta-text { display: flex; flex-direction: column; align-items: center; }
section.page-cta h2 { font-size: clamp(30px, 4.4vw, 44px); }
section.page-cta .lead { text-align: center; }
section.page-cta .downloads, section.page-cta .downloads[class] { justify-content: center; flex-wrap: wrap; }
@media (max-width: 1000px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); width: calc(100% - 32px); max-width: 720px; margin-inline: auto; gap: 28px; padding-top: 32px; }
  .doc-grid > .doc { grid-column: 1; }
  .toc { grid-row: auto; position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; width: auto; margin: 0; }
  .toc p { flex-basis: 100%; padding: 0; }
  .toc a { padding: 0; border: 0; }
}
/* Changelog: penapis kategori = pil bulat di atas entri (seperti pil kategori /grounding/, tab app Automations/Runs);
   aktif neutral (kelabu), bukan biru. Telefon: pil turun baris, tiada tatal mendatar. */
.cl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 44px; }
.cl-filter a { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px; color: var(--muted);
  font: 500 14px/1 var(--font); text-decoration: none; transition: background-color .15s, color .15s; }
html[lang="ar"] .cl-filter a { font: 500 15.5px/1 var(--font); }
.cl-filter a:hover { background: color-mix(in srgb, var(--ink) 7%, var(--bg)); color: var(--ink); }
.cl-filter a.on { background: color-mix(in srgb, var(--ink) 13%, var(--bg)); color: var(--ink); }
.cl-filter a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
@media (max-width: 760px) { .cl-filter { gap: 4px; margin-bottom: 32px; } .cl-filter a { height: 32px; padding: 0 12px; font-size: 13.5px; } }
/* Tanpa indeks (FAQ, Privacy, Terms…): teks sejajar dengan tajuk halaman di tablet juga, bukan lajur 720px di tengah */
@media (max-width: 1000px) { .doc-grid.solo { max-width: 1100px; } }
/* Mobile: halaman tambahan dibaca dengan menatal sahaja; tiada indeks tajuk atau penapis kategori. */
@media (max-width: 760px) {
  .toc { display: none; }
  .doc-grid { gap: 0; }
}

/* Kelabu «Why IUI» naik ke belakang skrin demo IUI (kurang separuh tingginya), demo terapung di atasnya. */
.iui-demo { position: relative; isolation: isolate; margin-bottom: 0; padding-bottom: 8px; }
.iui-demo::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 62%; bottom: 0; background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
section.band.iui-why { padding-top: 64px; }
.credits-list { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.doc .credits-list li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.credits-list b { color: var(--ink); font-weight: 600; }
.credits-list span { color: var(--muted); font-size: 14px; }

/* Butang sekunder hero berkilau, seperti «Support Us» Hadith Agent: sempadan kecerunan biru-ungu-sian yang mengalir. */
.download.shine { border: 1px solid transparent; color: var(--ink);
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, rgba(59, 130, 246, .55), rgba(139, 92, 246, .55), rgba(34, 211, 238, .55), rgba(59, 130, 246, .55), rgba(139, 92, 246, .55), rgba(34, 211, 238, .55)) border-box;
  background-size: 100% 100%, 300% 100%; background-position: 0 0, 0 0; animation: shine-flow 4s linear infinite; }
.band .download.shine { background: linear-gradient(var(--band), var(--band)) padding-box,
    linear-gradient(90deg, rgba(59, 130, 246, .55), rgba(139, 92, 246, .55), rgba(34, 211, 238, .55), rgba(59, 130, 246, .55), rgba(139, 92, 246, .55), rgba(34, 211, 238, .55)) border-box;
  background-size: 100% 100%, 300% 100%; }
.download.shine:hover { opacity: 1; }
@keyframes shine-flow { to { background-position: 0 0, -300% 0; } }
@media (prefers-reduced-motion: reduce) { .download.shine { animation: none; } }

/* Senarai menunggu: medan emel + butang sebaris; selepas berjaya, cip «apa yang paling penting». */
.downloads.wl-hero { flex-direction: column; align-items: center; gap: 14px; }
.wl-form { width: min(460px, 100%); margin-inline: auto; }
.wl-row { display: flex; gap: 0; border: 1px solid var(--line); background: var(--paper); }
.wl-row:focus-within { border-color: var(--ink); }
.wl-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 0; outline: none; background: transparent; color: var(--ink); font: 400 15px/1 var(--font); }
html[lang="ar"] .wl-row input { text-align: right; line-height: 1.6; }      /* hamzah dan titik bawah tidak terpotong dalam kotak teks */
.wl-row .download { margin: 0; flex: none; padding: 12px 20px; border: 0; cursor: pointer; }
.wl-row .download:disabled { opacity: .6; cursor: default; }
/* Perangkap bot: tersorok tanpa ditolak ke luar skrin (left: -9999px melebarkan halaman RTL hingga ~11000px
   dan Chrome memaparkan kawasan kosong). */
.wl-hp { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.wl-note { margin: 10px 0 0; color: var(--muted); font: 400 13px/1.6 var(--font); }
.wl-err { margin: 10px 0 0; color: #c2410c; font: 500 13px/1.6 var(--font); }
.wl-done { padding: 18px; border: 1px solid var(--line); background: var(--paper); text-align: start; animation: page-enter .5s cubic-bezier(.2, .8, .2, 1) both; }
.wl-head { display: flex; align-items: center; gap: 12px; }
.wl-check { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--tick) 16%, transparent); }
.wl-check::after { content: ""; position: absolute; left: 9px; top: 8px; width: 9px; height: 5px; border-left: 2px solid var(--tick); border-bottom: 2px solid var(--tick); transform: rotate(-45deg); }
.wl-ok { margin: 0; color: var(--ink); font: 600 15px/1.35 var(--font); }
.wl-sub { margin: 2px 0 0; color: var(--muted); font: 400 13px/1.4 var(--font); }
.wl-q { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.wl-ask { margin: 0 0 10px; color: var(--copy); font: 500 13px/1.4 var(--font); }
.wl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wl-opts.wl-os { grid-template-columns: repeat(3, 1fr); }
.wl-q:not([data-q="name"]):not([hidden]) { animation: page-enter .45s cubic-bezier(.2, .8, .2, 1) both; }   /* soalan seterusnya muncul lembut */
.wl-opts.wl-roles button:last-child { grid-column: 1 / -1; }   /* «Other» selebar baris */
.wl-opts [data-interest="agent"] { grid-column: 1 / -1; }   /* tujuh ciri Core: Shamela Agent selebar baris, enam lagi berpasangan */
.wl-name { display: flex; gap: 6px; }
.wl-name input { flex: 1; min-width: 0; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); outline: none; background: transparent; color: var(--ink); font: 400 14px/1.5 var(--font); }
.wl-name input:focus { border-color: var(--ink); }
.wl-name input::placeholder { color: var(--muted); font-family: var(--font); }
.wl-name button { flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 500 13px/1 var(--font); cursor: pointer; }
.wl-opts button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--copy); font: 500 13px/1 var(--font);
  text-align: start; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.wl-opts button:hover { border-color: var(--ink); color: var(--ink); }
.wl-opts button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.wl-demo { color: var(--copy); font: 500 14px/1 var(--font); text-decoration: none; }
.wl-demo:hover { color: var(--ink); }
section.get .wl-form { margin-top: 28px; }
@media (max-width: 520px) { .wl-row { flex-direction: column; } .wl-row .download { justify-content: center; } }
.wl-form [hidden] { display: none !important; }

/* ── Pertukaran halaman: View Transitions merentas dokumen (Chrome, Edge, Safari 18.2+). Halaman lama pudar
   naik sedikit, halaman baharu naik masuk dengan kabur lembut; kepala tetap di tempatnya. Pelayar tanpa sokongan:
   kandungan naik masuk semasa dibuka (html.page-enter, site.js). */
@view-transition { navigation: auto; }
header.top { view-transition-name: site-top; }
::view-transition-old(root) { animation: vt-out .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-old(site-top), ::view-transition-new(site-top) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
html.page-enter main, html.page-enter .site-foot { animation: page-enter .6s cubic-bezier(.2, .8, .2, 1) both; }
html.page-enter .site-foot { animation-delay: .08s; }
@keyframes page-enter { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.page-enter main, html.page-enter .site-foot { animation: none; }
}

/* Kiraan senarai menunggu di hero: titik hijau berdenyut + bilangan. */
.wl-count { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; max-width: 100%; margin: 2px 0 0; color: var(--copy); font: 500 13.5px/1.4 var(--font);
  animation: page-enter .6s cubic-bezier(.2, .8, .2, 1) both; }
.wl-count[hidden] { display: none; }
.wl-count .wl-aside { color: var(--muted); font-weight: 400; font-size: inherit; }
/* Skrin sempit: sasaran dan «tanpa spam» tidak dipicit jadi dua lajur sempit; yang tidak muat turun ke baris sendiri, di tengah. */
.wl-count > * { flex: 0 0 auto; max-width: 100%; }
.wl-count:not(.live) span::after { content: "."; }
.wl-count i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--tick); }
.wl-count i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tick); animation: wl-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes wl-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wl-count i::after { animation: none; } }
/* Sebelum ambang: sasaran sahaja (tiada titik «langsung», tiada bar). Selepas ambang: titik + bilangan + bar. */
.wl-count:not(.live) i, .wl-count:not(.live) .wl-bar { display: none; }
.wl-bar { flex: none; width: 64px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.wl-bar b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--tick); transition: width .6s cubic-bezier(.2, .8, .2, 1); }

/* ── Halaman Setup: kad keperluan, langkah bernombor dengan tangkapan skrin UI sebenar, kad tambahan ── */
.setup { padding: 56px 0 8px; }
.setup h2 { margin: 0 0 20px; font: 600 26px/1.2 var(--font-display); letter-spacing: -.02em; }
.need-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.need { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.need .value-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.need h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.need p { margin: 0; color: var(--copy); font-size: 14.5px; line-height: 1.5; }
.need-link { align-self: flex-start; margin-top: auto; padding-top: 14px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.need-note { margin: 16px 2px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.setup-steps { display: flex; flex-direction: column; gap: 20px; margin: 64px auto 0; padding: 0; list-style: none; }
.step-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 32px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.step-no { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px; background: var(--band); color: var(--copy);
  font-size: 12.5px; font-weight: 600; }
.step-text h3 { margin: 0 0 14px; font: 600 24px/1.2 var(--font-display); letter-spacing: -.02em; }
.step-text ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.step-text li { position: relative; padding-inline-start: 18px; color: var(--copy); font-size: 15.5px; line-height: 1.5; }
.step-text li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.step-text li b, .step-tip b { color: var(--ink); font-weight: 600; }
.step-tip { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--band); color: var(--copy); font-size: 13.5px; line-height: 1.55; }
/* Langkah Install: kad Mac dan Windows bertindan, setiap satu dengan arahan dan amaran pertama kalinya sendiri. */
.os-cards { display: grid; gap: 10px; margin-top: 16px; }
.os-card { padding: 12px 14px; border-radius: 10px; background: var(--band); }
.os-card h4 { margin: 0 0 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
.step-text .os-card ul { gap: 4px; }
.step-text .os-card li { font-size: 13.5px; line-height: 1.6; }
.step-shot { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -22px rgba(20, 25, 22, .35); }
.step-shot img { display: block; width: 100%; height: auto; }
.step-install { justify-self: center; width: 100%; max-width: 540px; }
.step-panel { padding: 28px; border-radius: 12px; background: var(--band); }
.step-panel .wl-form { width: 100%; margin: 0; }
.step-panel .download { margin-top: 0; }
/* /get/: dua butang muat turun bertindan, keperluan dan saiz fail di bawah setiap satu. */
.get-dl { display: grid; gap: 6px; }
.get-dl .download { justify-content: center; width: 100%; }
.get-dl small { margin-bottom: 12px; color: var(--muted); font-size: 12.5px; text-align: center; }
.get-dl small:last-child { margin-bottom: 0; }
.setup-more { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.more-card { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.more-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.more-card p { margin: 0; color: var(--copy); font-size: 14.5px; line-height: 1.55; }
.more-card p + p { margin-top: 10px; }
.more-card .file { padding: 12px 14px; border-radius: 10px; background: var(--code-bg); color: var(--muted); font-size: 12px; }
@media (max-width: 860px) {
  .need-grid, .setup-more { grid-template-columns: 1fr; }
  .step-card { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .setup-steps { margin-top: 48px; }
}

/* Sapuan berus emas di bawah «inside» / «داخل» dalam tajuk hero: tebal di tengah, tirus di hujung, didedahkan dari
   awal perkataan ke hujung sekali bila halaman dibuka (kanan → kiri dalam Arab). */
:root { --pen: #ea580c; }      /* oren pekat dalam mod cerah; emas dalam mod gelap */
:root[data-theme="dark"] { --pen: #e0a84a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pen: #e0a84a; } }
.pen { position: relative; display: inline-block; white-space: nowrap; }
.pen svg { position: absolute; inset-inline-start: -4%; bottom: -.16em; width: 108%; height: .26em; overflow: visible; pointer-events: none; stroke: none; }
.pen path { fill: var(--pen); stroke: none; clip-path: inset(0 100% 0 0); animation: pen-sweep .8s cubic-bezier(.65, 0, .35, 1) .45s forwards; }
html[dir="rtl"] .pen svg { bottom: -.32em; transform: scaleX(-1); }       /* di bawah ekor huruf Arab (ل، ي) */
@keyframes pen-sweep { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .pen path { animation: none; clip-path: none; } }

/* Garis bawah hover dilukis dari awal teks ke hujung (kiri → kanan; kanan → kiri dalam Arab), bukan muncul serta-merta. */
/* Standard pautan teks seluruh laman (FAQ, dasar, Setup, hero, Side agent…): garis halus sentiasa kelihatan supaya jelas
   boleh diklik; bila hover garis penuh meluncur di atasnya. Senarai pemilih ini satu-satunya tempat gaya pautan teks. */
main :is(p, li, span, small) > a:not([class]) { color: var(--ink); font-weight: 500; text-decoration: none; }
.more, .need-link, .sp-link, main :is(p, li, span, small) > a:not([class]) { padding-bottom: 2px; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;      /* pelayar tanpa color-mix */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat,
              linear-gradient(color-mix(in srgb, currentColor 28%, transparent), color-mix(in srgb, currentColor 28%, transparent)) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s cubic-bezier(.22, 1, .36, 1); }
html[dir="rtl"] :is(.more, .need-link, .sp-link, main :is(p, li, span, small) > a:not([class])) { background-position: 100% 100%; }
:is(.more, .need-link, .sp-link, main :is(p, li, span, small) > a:not([class])):is(:hover, :focus-visible) { background-size: 100% 1.5px, 100% 1px; }
@media (prefers-reduced-motion: reduce) { .more, .need-link, .sp-link, main :is(p, li, span, small) > a:not([class]) { transition: none; } }

/* Nama butang sistem (macOS/Windows) dalam teks Setup ditunjuk seperti butang sebenar; yang perlu ditekan berwarna putih. */
.ui-btn { display: inline-block; margin: 2px 1px; padding: 1px 9px; border-radius: 6px; direction: ltr; unicode-bidi: isolate;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 1px rgba(0, 0, 0, .08);
  font-size: 12.5px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.ui-btn.ico { display: inline-grid; place-items: center; width: 24px; height: 22px; padding: 0; vertical-align: middle; }
.ui-btn.ico svg { stroke-width: 2; }
.ui-btn.primary { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .12); }

/* Setup: jalur kelabu CTA akhir naik ke belakang separuh bawah kad terakhir, supaya bahagian bersambung. */
.setup { position: relative; z-index: 1; padding-bottom: 0; }
.setup + section.page-cta { margin-top: -120px; padding-top: calc(72px + 120px); }

/* ── Halaman Contact: kad seperti Setup, panel bertab untuk melapor masalah, nota tentang Shamela ── */
.contact .need-link[dir="ltr"] { unicode-bidi: isolate; }
.ct-box { margin-top: 20px; padding: 28px 32px 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); scroll-margin-top: 96px; }
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.setup .ct-head h2 { margin: 0; }
.ct-tabs { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--band); }
.ct-tabs button { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--copy); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer; transition: color .15s; }
.ct-tabs button:hover { color: var(--ink); }
.ct-tabs button.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--line); }
.ct-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Tanpa JS kedua-dua panel kelihatan; dengan JS hanya tab terpilih. */
.ct-box.js .ct-panel:not(.on) { display: none; }
.ct-panel + .ct-panel { margin-top: 18px; }
.ct-box.js .ct-panel + .ct-panel { margin-top: 0; }
.ct-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ct; }
.ct-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct-list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; background: var(--band); color: var(--copy);
  font-size: 14.5px; line-height: 1.55; }
.ct-list li i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); }
.ct-list li > span { min-width: 0; padding-top: 6px; }
.ct-steps li { flex-direction: column; gap: 10px; counter-increment: ct; }
.ct-steps li > span { padding-top: 0; }
.ct-steps li > span::before { content: counter(ct) ". "; color: var(--ink); font-weight: 600; }
.ct-list b { color: var(--ink); font-weight: 600; }
.ct-list code { display: block; margin-top: 6px; padding: 6px 9px; border-radius: 7px; background: var(--paper); color: var(--copy); font-size: 12px;
  direction: ltr; text-align: start; overflow-wrap: anywhere; }
.ct-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 4px 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ct-note i { flex: none; display: grid; margin-top: 1px; }
.ct-note b { color: var(--copy); font-weight: 600; }
@media (max-width: 860px) {
  .ct-box { padding: 22px; }
  .ct-list, .ct-steps { grid-template-columns: 1fr; }
}

/* Harga disorok (content.SHOW_PRICING = False): pautan dan teks bertanda data-price dalam templat. */
.no-pricing [data-price] { display: none !important; }

/* ── Web grounding (/grounding/) ───────────────────────────────────── */
.grounding h2 { margin: 0 0 14px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.grounding .need-grid { margin-bottom: 8px; }
.gr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 48px; }
.gr-stat { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.gr-stat b { display: block; font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.gr-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.gr-block { margin: 48px 0 0; }
.gr-p { max-width: 760px; margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.gr-p b { color: var(--ink); }
.gr-web-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 10px 12px; margin-inline: 2px;
  border-radius: 15px; background: #2563eb; color: #fff; font: 500 13px/1 var(--font); white-space: nowrap;
  vertical-align: middle; }
:root[data-theme="dark"] .gr-web-cta { background: #3b82f6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gr-web-cta { background: #3b82f6; } }
.gr-web-cta svg { width: 15px; height: 15px; }
.gr-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gr-rule { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.gr-rule h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.gr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gr-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.gr-list i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px; }
.gr-list.yes i { color: #16794c; background: color-mix(in srgb, #16794c 12%, transparent); }
.gr-list.no i { color: #b4232a; background: color-mix(in srgb, #b4232a 11%, transparent); }
.gr-demo { display: flex; flex-wrap: wrap; gap: 22px; margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.gr-demo > span { display: inline-flex; align-items: center; gap: 8px; }
.gr-cite { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 20px; padding-inline: 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; direction: ltr; }
.gr-cite.book { min-width: 20px; color: #6d3fd1; background: color-mix(in srgb, #6d3fd1 13%, transparent); }
.gr-cite.web { color: var(--muted); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.gr-dir { margin-top: 8px; padding: 0; overflow: hidden; }
.gr-dir .ct-tabs { display: flex; margin: 0; padding: 6px; border-radius: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gr-dir .ct-tabs::-webkit-scrollbar { display: none; }
.gr-dir .ct-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.gr-dir .ct-tabs em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.gr-dir .ct-panel { padding: 6px 12px 12px; }
.gr-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 16px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.gr-row:last-child { border-bottom: 0; }
.gr-row h4 { margin: 0; padding-top: 9px; font-size: 15px; font-weight: 600; }
.gr-dir .ct-panel > .gr-sites { padding: 10px 0 0; }
.gr-sites { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 8px; }
.gr-sites a { display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 8px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; transition: background .15s; }
.gr-sites a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.gr-sites b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.gr-sites span { color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) { .gr-row { grid-template-columns: 1fr; } .gr-row h4 { padding: 0 10px; } .gr-sites { grid-template-columns: 1fr; } }
.grounding .ct-note { margin-top: 40px; }
@media (max-width: 760px) { .gr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gr-rules { grid-template-columns: 1fr; } }
/* Halaman Arab: nama badan berhuruf Latin (dir=auto) tetap rapat ke kanan bersama domainnya. */
html[dir="rtl"] .gr-sites span, html[dir="rtl"] .gr-sites b { text-align: right; }
/* Grounding berakhir dengan teks (bukan kad seperti Setup): jalur CTA tidak menyelit naik di bawahnya. */
.setup.grounding { padding-bottom: 72px; }
.setup.grounding + section.page-cta { margin-top: 0; padding-top: 72px; }
html[dir="ltr"] .gr-sites span, html[dir="ltr"] .gr-sites b { text-align: left; }

/* ── Projects (/projects/): menumpang kelas gr-* halaman grounding ───────────── */
.pj-card h3 { display: flex; align-items: center; gap: 10px; }
.pj-card h3 i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; }
.pj-card > p { margin: 0; color: var(--copy); font-size: 15px; line-height: 1.6; }
.gr-list.pj i { color: var(--muted); }
.gr-list.pj svg { fill: currentColor; stroke: none; }
.pj-dir .ct-panel { padding: 16px 18px 18px; }
.pj-dir .ct-panel > p { margin: 14px 2px 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.pj-types { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pj-types li { padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 13.5px; font-weight: 500; }
.gr-cite.file { min-width: 20px; color: #0f766e; background: color-mix(in srgb, #0f766e 14%, transparent); }
:root[data-theme="dark"] .gr-cite.file { color: #2dd4bf; background: color-mix(in srgb, #2dd4bf 14%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gr-cite.file { color: #2dd4bf; background: color-mix(in srgb, #2dd4bf 14%, transparent); } }
.setup.projects { padding-bottom: 72px; }
/* Halaman ciri: langkah bernombor (feature_body «steps»). */
.ft-steps { list-style: none; counter-reset: ft; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.ft-steps li { counter-increment: ft; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 15px; line-height: 1.55; }
.ft-steps li::before { content: counter(ft); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--band); color: var(--ink); font-size: 13px; font-weight: 600; }

/* /modern/ (Modern interface for Shamela): bahasa reka bentuk laman utama — hero bercip, .values.band, section.feature
   + figura lebar, #faq, .get.band. Tangkapan ikut suis .mo-tone (data-shots pada .mo, lalai cerah), bukan tema laman. */
/* Hero /modern/: rapat ke kiri seperti /space/ (spc-hero); tepi kiri teks sejajar tepi demo .wide di bawahnya. */
.mo-hero { padding-block: 92px 40px; text-align: start; }
.mo-hero h1 { max-width: 900px; margin-bottom: 26px; font: 500 clamp(36px, 3.3vw, 46px)/1.14 var(--font-display); letter-spacing: -.04em; }
html[lang="ar"] .mo-hero h1 { font-size: clamp(38px, 3.6vw, 50px); font-weight: 500; line-height: 1.5; letter-spacing: 0; }
/* Telefon: teks badan dibalut biasa (bukan balance/pretty), supaya setiap baris penuh hingga tepi lajur dan perenggan
   tidak jadi tiga baris pendek dengan ruang kosong di kanan. Tajuk kekal seimbang. */
@media (max-width: 760px) { main :is(p, li) { text-wrap: wrap !important; } }
/* Baris pelan di bawah deskripsi hero halaman Core (corehero.plans): nama pelan sahaja, kecil dan kelabu, titik di tengah. */
.core-plans { margin: 12px 0 0; color: var(--muted); font: 400 13px/1.6 var(--font); }
html[lang="ar"] .core-plans { font-size: 14.5px; }
.core-dot { margin-inline: 7px; }
/* Pelan di jalur penutup (di bawah tajuk «Use …»): bentuk sama, di tengah. */
section.get .core-plans-end { margin: 0 0 4px; font-size: 14px; }
html[lang="ar"] section.get .core-plans-end { font-size: 15.5px; }
.mo-hero .lead { max-width: 900px; margin: 0; white-space: normal; font: 400 15px/1.7 var(--font); text-wrap: balance; }
html[lang="ar"] .mo-hero .lead { font: 400 15px/1.7 var(--font); }
.mo-hero .chip > * { white-space: nowrap; }
/* Lebar sama dengan /space/ (.sp-wrap): hero dan demo berkongsi satu lebar, jadi cip, tajuk, lede dan skrin bermula
   pada garis yang sama, dan skrin demo sama besar dengan demo Space. */
.mo-hero, .mo .mo-live, .mo .mo-live-video { box-sizing: border-box; width: min(1120px, 80%); max-width: none; margin-inline: auto; padding-inline: 0; }
@media (max-width: 1050px) { .mo-hero, .mo .mo-live, .mo .mo-live-video { width: calc(100% - 64px); } }
@media (max-width: 760px) { .mo-hero, .mo .mo-live, .mo .mo-live-video { width: calc(100% - 40px); } }
@media (max-width: 380px) { .mo-hero .chip { gap: 7px; font-size: 13px; } .mo-hero .chip-tag { padding: 5px 9px; } .mo-hero .chip-go { margin-inline-start: 0; } }
@media (max-width: 760px) { .mo-hero { padding-block: 48px 28px; } .mo-hero h1 { font-size: 36px; } html[lang="ar"] .mo-hero h1 { font-size: 40px; } }
.mo.mo[data-shots="light"] .shot-light, .mo.mo[data-shots="dark"] .shot-dark { display: block !important; }
.mo.mo[data-shots="light"] .shot-dark, .mo.mo[data-shots="dark"] .shot-light { display: none !important; }
.mo .shot video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 60px -30px rgba(20, 25, 22, .35); }
.mo .shot.wide { margin-bottom: 64px; }
.mo-empty { aspect-ratio: 1512 / 888; border: 1px solid var(--line); border-radius: 10px; background: var(--band); }

/* Demo hidup (hero): UI Moden sebenar dalam iframe 1500×774 (saiz skrin demo /space/, bar tajuk 1.9cqw sama: ikut tangkapan Shamela) diskala muat lebar; kamera dan kursor dalam satu lapisan
   (zum menskala kedua-duanya, seperti demo utama). Tanpa .on (skrin kecil, prefers-reduced-motion): rakaman video. */
.mo-live { display: none; }
.mo-live.on { display: block; }
.mo-live.on + .mo-live-video { display: none; }
.mo-live-win { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f5f5f7; box-shadow: 0 24px 60px -30px rgba(20, 25, 22, .35);
  container-type: inline-size; }
.mo-live-bar { position: relative; display: flex; align-items: center; gap: .6cqw; height: 1.9cqw; padding: 0 .55cqw; direction: ltr;
  background: #ececec; border-bottom: 1px solid #d2d2d2; color: #4d4d4d; font: 600 .85cqw/1 var(--font); }
.mo-live-bar i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #ff5f57; }
.mo-live-bar i:nth-child(2) { background: #febc2e; }
.mo-live-bar i:nth-child(3) { background: #28c840; }
.mo-live-bar span { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mo[data-shots="dark"] .mo-live-win { background: #1e1e20; }
.mo[data-shots="dark"] .mo-live-bar { background: #3e3e3e; border-color: #181818; color: #c4c4c4; }      /* = bar tajuk demo lain (.own-bar) */
.mo-live-stage { position: relative; overflow: hidden; aspect-ratio: 1500 / 774; }
/* Melompat ke babak: babak sebelumnya dimainkan laju di bawah tirai, kamera tanpa peralihan. */
.mo-live.ff .mo-cam { transition: none; }
.mo-cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.22, .8, .24, 1); }
.mo-cam iframe { position: absolute; top: 0; left: 0; width: 1500px; height: 774px; border: 0; transform-origin: 0 0; }
/* Kursor sama dengan demo utama (#demoCursor, SVG 26×26, hujung di 5,3): saiznya ikut skala iframe (--k dari site.js),
   jadi kelihatan sama besar dengan kursor demo utama pada lebar yang sama. */
.mo-cursor { position: absolute; top: 0; left: 0; z-index: 2; width: calc(26px * var(--k, .7)); height: calc(26px * var(--k, .7));
  opacity: 0; pointer-events: none; transition: opacity .35s ease; }
/* Grafik di ::before: hanya ia mengecil bila diklik. Skala pada .mo-cursor sendiri turut menskalakan translate()
   kedudukannya (kursor melompat ke penjuru setiap klik). */
.mo-cursor::before { content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M5 3v17.5l4.6-4.4 2.9 6.6 3.1-1.3-2.9-6.5h6.4z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); transform-origin: calc(5px * var(--k, .7)) calc(3px * var(--k, .7)); transition: scale .14s cubic-bezier(.3, .7, .4, 1); }
.mo-cursor.on { opacity: 1; }
.mo-cursor.on.rest { opacity: 0; }   /* peraturan kursor demo: pudar bila tiada klik (site.js moRest) */
.mo-cursor.press::before { scale: .82; }
/* Gelang klik sama dengan demo utama (.demo-ripple, 28px dalam piksel app), diskala bersama iframe. */
.mo-ripple { position: absolute; z-index: 1; width: calc(28px * var(--k, .7)); height: calc(28px * var(--k, .7)); translate: -50% -50%; border-radius: 50%;
  pointer-events: none; border: 1.5px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .08); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  animation: mo-ripple .55s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes mo-ripple { from { scale: .3; opacity: .9; } to { scale: 1.4; opacity: 0; } }
.mo-live-cap { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 14px; text-align: center; }
.mo-live-hint.turn { color: var(--ink); }
.mo-live-replay { padding: 5px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 12px/1.4 var(--font); }
.mo-live-replay:hover { border-color: var(--ink); }

/* Lawatan skrin: tab skrin | suis tangkapan di bar figura, perbandingan, keterangan skrin di bawah */
.mo-tour .demo-bar { gap: 12px; }
.mo-tabs { display: flex; min-width: 0; overflow-x: auto; border: 1px solid var(--line); scrollbar-width: none; }
.mo-tabs::-webkit-scrollbar { display: none; }
.mo-tabs button { flex: none; padding: 5px 12px; border: 0; background: transparent; color: var(--muted); font: 600 12px/1.4 var(--font); white-space: nowrap; }
.mo-tabs button.on { background: var(--ink); color: var(--bg); }
.mo-tabs button:not(.on):hover { color: var(--ink); }
html[lang="ar"] .mo-tabs button { font: 700 14px/1.4 var(--font); }
.mo-tone { flex: none; margin-inline-start: auto; }
/* Bar meter demo hidup sama dengan demo /space/ (.sp-demo .demo-bar): tiada jarak baris, 12px ke tetingkap, butang tema kecil. */
.mo-live .demo-bar { margin: 0 0 12px; row-gap: 0; }
.mo-live .demo-bar .demo-theme button { min-width: 38px; min-height: 28px; padding: 4px 10px; font-size: 11px; line-height: 1.4; }
/* Skrin bertindan dalam satu sel: bertukar dengan pudar silang (tiada bingkai kosong atau lompatan tinggi); gambar
   skrin baharu dinyahkod dahulu oleh site.js. Meter = gaya .dm-* demo utama. */
.mo-tour .demo-bar.has-meter > .dm-pp { flex: none; }
.mo-tour .dm-track { margin-top: 2px; }
.mo-shots { display: grid; }
.mo-shot { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .5s; }
.mo-shot.on { opacity: 1; visibility: visible; transition: opacity .5s cubic-bezier(.22, .8, .24, 1), visibility 0s; }
.mo-shots.instant .mo-shot { transition: none; }            /* klik meter/tab: skrin terus bertukar, tiada pudar */
@media (prefers-reduced-motion: reduce) { .mo-shot, .mo-shot.on { transition: none; } }
.mo-cap { margin: 16px 0 0; color: var(--copy); font-size: 15px; text-align: center; }

/* Grid skrin lain: perbandingan kecil, tajuk dan satu baris */
.mo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; width: calc(100% - 32px); max-width: 1132px; margin: 0 auto 64px; }
.mo-tile h3 { margin: 16px 0 6px; font: 600 18px/1.3 var(--font-display); }
html[lang="ar"] .mo-tile h3 { font-weight: 700; }
.mo-tile p { margin: 0; color: var(--copy); font-size: 15px; line-height: 1.6; }
.mo-tile .mo-cmp-tag { top: 8px; font-size: 11px; }
.mo-tile .mo-cmp-tag.old { left: 8px; }
.mo-tile .mo-cmp-tag.new { right: 8px; }

/* Nilai: tiga sebaris (terokai), nombor langkah, gambar dalam band, pautan */
.value-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Explore more on every page: match the mobile value-grid breakpoint, including this more specific variant. */
@media (max-width: 760px) {
  .value-grid.three { grid-template-columns: minmax(0, 1fr); }
  .value-grid.three .value h3 { white-space: normal; }
}
a.value { color: inherit; text-decoration: none; }
.mo-num { font: 600 17px/1 var(--font-display); }
.mo-band-shot { max-width: 720px; margin: 0 auto 48px; }     /* keratan tetapan, bukan tetingkap penuh; di atas langkah */
.mo .value h3 { white-space: normal; text-wrap: balance; }
.mo-band-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 60px -30px rgba(20, 25, 22, .35); }

/* Perbandingan Asal | Moden: seret garis pemisah; Asal di kiri, Moden di kanan dalam kedua-dua bahasa */
.mo-cmp { position: relative; --pos: 50%; touch-action: pan-y; }
.mo-solo { position: relative; width: 100%; }
.mo-cmp img, .mo-solo img { display: block; width: 100%; height: auto; }
.mo-cmp-old, .mo-cmp-new, .mo-solo img { border-radius: 10px; overflow: hidden; }
.mo-cmp-old, .mo-solo img { box-shadow: 0 0 0 1px var(--line), 0 24px 60px -30px rgba(20, 25, 22, .35); }
.mo-cmp-new { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.mo-cmp-bar { position: absolute; top: -6px; bottom: -6px; left: var(--pos); width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); pointer-events: none; }
.mo-cmp-bar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.mo-cmp-tag { position: absolute; top: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font: 600 12px/1.4 var(--font); pointer-events: none; }
.mo-cmp-tag.old { left: 10px; }
.mo-cmp-tag.new { right: 10px; }
.mo-cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.mo-cmp:has(input:focus-visible) .mo-cmp-bar::after { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 900px) {
  .mo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mo-grid { grid-template-columns: 1fr; }
  .mo-tour .demo-bar { flex-wrap: wrap; }
  .mo-tabs { order: 2; flex-basis: 100%; }
}

/* ── Setup dan /get/ (reka bentuk sama dengan halaman muat turun pembeli) ──
   Atas: «Before you start» | panel (waitlist / beli / muat turun). Bawah: langkah sentiasa terbuka, senarai bernombor,
   langkah 1 ikut tab Mac/Windows (tab garis, sama dengan tab muat turun). */
.su-tabs { display: flex; gap: 28px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.su-tabs button { padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  color: var(--muted); font: 500 14px var(--font); cursor: pointer; }
.su-tabs button:hover { color: var(--ink); }
.su-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.su-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.su-tabs { position: relative; }
.su-tabs button { transition: color 120ms cubic-bezier(.2, .8, .2, 1); }
.su-tabs.has-thumb button[aria-selected="true"] { border-color: transparent; }
.su-thumb { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ink); pointer-events: none;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), width 220ms cubic-bezier(.2, .8, .2, 1); }
.su { padding: 0 0 72px; }
.su-head h2 { margin: 0; font: 500 22px/1.3 var(--font-display); letter-spacing: -.015em; }
/* Kepala (ganti «Help / Setup»): dua lajur ringkas — kiri tajuk + dua keperluan wajib, kanan muat turun ikut OS. */
.su-hero { padding: 72px 0 64px; }
.su-simple { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: stretch; }
.su-simple h1 { margin: 0 0 16px; font: 500 36px/1.2 var(--font-display); letter-spacing: -.035em; }
.su-lede { max-width: 52ch; margin: 0 0 26px; color: var(--copy); font-size: 15px; line-height: 1.7; }
.su-req { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.su-req li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.su-n { color: var(--muted); font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.su-req b { display: block; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.5; }
.su-req span:not(.su-n) { display: block; max-width: 52ch; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.su-req a { white-space: nowrap; }
.su-note { max-width: 52ch; margin: 28px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.su-r { display: flex; flex-direction: column; justify-content: center; padding-inline-start: 48px; border-inline-start: 1px solid var(--line); }   /* garis setinggi lajur kiri, muat turun di tengah */
.su-r h2 { margin: 0 0 6px; color: var(--ink); font: 500 20px/1.3 var(--font-display); letter-spacing: -.015em; }
.su-meta { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.su-download { width: 100%; justify-content: center; margin-top: 0; border-radius: 0; }
.su-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 13px; }
.su-ok { margin: 6px 0 0; color: var(--copy); font-size: 15px; line-height: 1.7; }
.su-wl p { margin: 0 0 18px; color: var(--copy); font-size: 15px; line-height: 1.7; }
.su-wl .wl-form { width: 100%; margin: 0; }
.su-guide { padding-top: 56px; border-top: 1px solid var(--line); }
.su-head h2 { font-size: 26px; letter-spacing: -.02em; }
.su-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.su-head .su-for b { color: var(--ink); font-weight: 600; }
@keyframes su-flash { from { color: var(--ink); } to { color: var(--muted); } }
.su-head .su-for.flash { animation: su-flash .9s ease-out; }
.su-steps { margin: 36px 0 0; padding: 0; list-style: none; }
.su-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
/* Langkah selang-seli (zigzag): teks | gambar, kemudian gambar | teks; gambar lebih besar, sejajar tengah dengan teks. */
.su-step { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 72px; align-items: center; padding: 56px 0; }
.su-step:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.su-step:nth-child(even) .su-text { order: 2; }
.su-step .su-shot { align-self: center; }
.su-num { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.su-text h3 { margin: 0 0 18px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.su-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: su; }
.su-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--copy); font-size: 14.5px; line-height: 1.65; counter-increment: su; }
.su-list li::before { content: counter(su); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 11.5px; line-height: 1; }
.su-list b { color: var(--ink); font-weight: 600; }
.su-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.su-if { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.su-if h4 { margin: 0 0 12px; color: var(--ink); font-size: 13px; font-weight: 600; }
.su-if h4 span { color: var(--muted); font-weight: 400; }
.su-tip { margin: 20px 0 0; color: var(--muted); font-size: 13px; }
.su-shot { align-self: start; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.su-shot img { display: block; width: 100%; height: auto; }
.su-shot.strip { padding: 36px 24px; }
.su-shot.strip img { border-radius: 6px; }
html[lang="ar"] .su-head h2 { font-weight: 700; letter-spacing: 0; }
html[lang="ar"] .su-simple h1 { font-weight: 700; letter-spacing: 0; line-height: 1.35; }
html[lang="ar"] .su-req b, html[lang="ar"] .su-r h2, html[lang="ar"] .su-text h3 { font-weight: 700; }
html[lang="ar"] .su-req b, html[lang="ar"] .su-lede, html[lang="ar"] .su-ok, html[lang="ar"] .su-wl p, html[lang="ar"] .su-list li { font-size: 17px; }
html[lang="ar"] .su-req span:not(.su-n), html[lang="ar"] .su-meta, html[lang="ar"] .su-links { font-size: 15px; }
html[lang="ar"] .su-list small, html[lang="ar"] .su-head p, html[lang="ar"] .su-note, html[lang="ar"] .su-tip { font-size: 15px; }
html[lang="ar"] .su-if h4, html[lang="ar"] .su-tabs button { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .su-head .su-for.flash { animation: none; } .su-thumb, .su-tabs button { transition: none; } }
@media (max-width: 820px) {
  .su-hero { padding: 40px 0 48px; }
  .su-simple { grid-template-columns: 1fr; gap: 36px; }
  .su-simple h1 { font-size: 32px; }
  .su-r { padding: 32px 0 0; border-inline-start: 0; border-top: 1px solid var(--line); }
  .su-step, .su-step:nth-child(even) { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .su-step:nth-child(even) .su-text { order: 0; }
}

/* /sponsor/ (sponsorpage.py, sponsor.js): akses percuma Scholar dan Ambassador. Susun atur /get/ (su-hero); borang dan
   syarat penuh dalam popover (dialog modal), bukan terbuka di halaman; FAQ di bawah. Tiada kuota dipaparkan. */
.sp-how { margin-top: 30px; }
.sp-r { justify-content: flex-start; }
.sp-tabs { margin-bottom: 26px; }
.sp-panel h2 { margin: 0 0 6px; }
.sp-p { margin: 0 0 20px; color: var(--copy); font-size: 15px; line-height: 1.7; }
.sp-panel h3 { margin: 18px 0 10px; color: var(--muted); font: 500 12.5px/1.5 var(--font); letter-spacing: .02em; }
.sp-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-list li { position: relative; padding-inline-start: 22px; color: var(--copy); font-size: 14.5px; line-height: 1.65; }
.sp-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 9px; height: 5px; border-left: 1.6px solid var(--tick); border-bottom: 1.6px solid var(--tick); transform: rotate(-45deg); }
.sp-apply { width: 100%; justify-content: center; border: 0; border-radius: 0; cursor: pointer; }
.sp-more { margin: 14px 0 0; text-align: center; }
.sp-link { padding: 0; border: 0; background: none; color: var(--copy); font: 400 13.5px/1.6 var(--font); cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 25%, transparent), color-mix(in srgb, currentColor 25%, transparent));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0 1px, 100% 1px; transition: background-size .3s cubic-bezier(.2,.8,.2,1); }
html[dir="rtl"] .sp-link { background-position: 100% 100%, 100% 100%; }
.sp-link:hover, .sp-link:focus-visible { color: var(--ink); background-size: 100% 1px, 100% 1px; }
/* Sponsor a scholar (penderma) */
.sp-give { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: start; padding-bottom: 64px; }
.sp-give h2 { margin: 0 0 12px; font: 500 26px/1.3 var(--font-display); letter-spacing: -.02em; }
.sp-give .sp-p { max-width: 52ch; }
.sp-give-form { padding: 0; }
.sp-places { display: grid; border: 1px solid var(--line); }
.sp-places label { position: relative; display: block; cursor: pointer; }
.sp-places input { position: absolute; opacity: 0; pointer-events: none; }
.sp-places span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 6px; color: var(--copy); font: 500 14px/1.3 var(--font); text-align: center; font-variant-numeric: tabular-nums;
  transition: background .16s cubic-bezier(.2,.8,.2,1), color .16s cubic-bezier(.2,.8,.2,1); }
.sp-places label + label span { border-inline-start: 1px solid var(--line); }
.sp-places input:checked + span { background: var(--ink); color: var(--bg); }
.sp-places input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-give-form .sp-privacy { text-align: center; }
.sp-give-open { margin-top: 26px; border: 0; cursor: pointer; }
.sp-give-r { justify-content: flex-start; }
.sp-give-r h3 { margin: 0 0 14px; color: var(--muted); font: 500 12.5px/1.5 var(--font); letter-spacing: .02em; }
.sp-give-r .sp-privacy { text-align: center; }
.sp-tiers { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sp-tiers li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sp-tiers b { color: var(--ink); font: 500 22px/1.2 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sp-tiers small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; }
.sp-tiers span { color: var(--copy); font-size: 14.5px; line-height: 1.6; }
html[lang="ar"] .sp-tiers span { font-size: 16.5px; }
html[lang="ar"] .sp-tiers small, html[lang="ar"] .sp-give-r h3 { font-size: 14px; }
.sp-places { grid-template-columns: repeat(5, 1fr); }
/* Sel kelima: kotak nombor kecil sebaris («Other»), tanpa anak panah pelayar. */
.sp-cell { display: flex !important; border-inline-start: 1px solid var(--line); }
.sp-hide { position: absolute; opacity: 0; pointer-events: none; }
.sp-places .sp-custom { position: static; opacity: 1; pointer-events: auto; }
.sp-custom { width: 100%; min-height: 42px; padding: 0 6px; border: 0; outline: none; background: transparent; color: var(--ink); text-align: center;
  font: 500 14px/1.3 var(--font); -moz-appearance: textfield; appearance: textfield; }
.sp-custom::-webkit-outer-spin-button, .sp-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-custom::placeholder { color: var(--copy); opacity: 1; font-family: var(--font); }
.sp-custom:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.sp-custom:focus::placeholder { color: transparent; }
.sp-cell.on { background: var(--ink); }
.sp-cell.on .sp-custom { color: var(--bg); }
.sp-perkline { margin: 12px 0 20px; color: var(--copy); font-size: 13.5px; line-height: 1.6; }
.sp-perkline b { color: var(--ink); font-weight: 500; }
#sp-give-dlg .sp-other { margin-top: 8px; }
html[lang="ar"] .sp-perkline { font-size: 16px; }
.sp-perks { margin: 14px 0 18px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); }
.sp-perks > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.sp-perks .sp-list li { font-size: 14px; }
.sp-radio { margin: 0 0 8px; }
.sp-radio input { border-radius: 50%; }
.sp-other { margin: 2px 0 10px; }
.sp-wall { margin-top: 32px; }
.sp-wall h3 { margin: 0 0 12px; color: var(--muted); font: 500 12.5px/1.5 var(--font); letter-spacing: .02em; }
.sp-wall ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-wall li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); color: var(--copy); font-size: 14px; }
.sp-wall img { height: 22px; width: auto; max-width: 90px; object-fit: contain; }
html[lang="ar"] .sp-perks > span, html[lang="ar"] .sp-wall h3 { font-size: 15px; font-weight: 700; }
@media (max-width: 820px) { .sp-give { grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; } }
html[lang="ar"] .sp-give h2 { font-weight: 700; letter-spacing: 0; line-height: 1.5; }
/* FAQ */
.sp-faq { padding-bottom: 8px; }
.sp-faq h2 { margin: 0 0 22px; font: 500 26px/1.3 var(--font-display); letter-spacing: -.02em; }
.sp-faq summary { font: 500 17px/1.45 var(--font); padding-block: 20px; }
.sp-faq details p { font-size: 15px; line-height: 1.7; }
/* Popover */
.sp-dlg { width: min(620px, calc(100% - 32px)); max-height: min(88vh, 940px); padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); overflow: hidden; }
.sp-dlg[open] { display: flex; flex-direction: column; animation: sp-in .2s cubic-bezier(.2,.8,.2,1) both; }
.sp-dlg.sp-out { animation: sp-out .12s cubic-bezier(.2,.8,.2,1) both; }
.sp-dlg::backdrop { background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: sp-fade .2s cubic-bezier(.2,.8,.2,1) both; }
.sp-dlg.sp-out::backdrop { animation: sp-fade .12s cubic-bezier(.2,.8,.2,1) reverse both; }
@keyframes sp-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes sp-out { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes sp-fade { from { opacity: 0; } }
.sp-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 14px 26px; border-bottom: 1px solid var(--line); }
html[dir="rtl"] .sp-dlg-head { padding: 18px 26px 14px 20px; }
.sp-dlg-head h2 { margin: 0; font: 500 19px/1.35 var(--font-display); letter-spacing: -.01em; }
.sp-x { display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color .12s cubic-bezier(.2,.8,.2,1), background .12s cubic-bezier(.2,.8,.2,1); }
.sp-x:hover { color: var(--ink); background: var(--paper); }
.sp-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-dlg-body { overflow-y: auto; overscroll-behavior: contain; padding: 22px 26px 26px; }
.sp-termsview .su-list { margin-bottom: 24px; }
/* Syarat: senarai bertitik (bukan nombor dalam bulatan). */
.sp-terms-list li { grid-template-columns: 6px minmax(0, 1fr); gap: 12px; }
.sp-terms-list li::before { content: ""; width: 5px; height: 5px; margin-top: .72em; border: 0; border-radius: 50%; background: var(--muted); }
.sp-termsview .sp-apply { margin-top: 0; }
.sp-form, .sp-done { width: 100%; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sp-f { display: block; margin: 0 0 16px; }
.sp-f > span { display: block; margin-bottom: 7px; color: var(--ink); font: 500 13px/1.5 var(--font); }
.sp-f small { display: block; margin: -2px 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.sp-f input + small { margin: 7px 0 0; }
.sp-f input:not([type=radio]):not([type=checkbox]):not(.sp-custom), .sp-sel select, .sp-f textarea, .sp-acc input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; outline: none;
  background: var(--paper); color: var(--ink); font: 400 14.5px/1.5 var(--font); transition: border-color .12s cubic-bezier(.2,.8,.2,1); }
.sp-f textarea { min-height: 88px; resize: vertical; }
.sp-f input:not(.sp-custom):focus, .sp-sel select:focus, .sp-f textarea:focus, .sp-acc input:focus { border-color: var(--ink); }
.sp-f input::placeholder, .sp-f textarea::placeholder, .sp-acc input::placeholder { color: var(--muted); font-family: var(--font); }
/* Pilihan: anak panah sendiri, jauh sedikit dari tepi (anak panah bawaan pelayar terlalu hujung). */
.sp-sel { position: relative; display: block; }
.sp-sel select { -webkit-appearance: none; appearance: none; padding-inline-end: 42px; cursor: pointer; }
.sp-sel .chev { position: absolute; top: 50%; inset-inline-end: 15px; width: 12px; height: 12px; margin-top: -6px; color: var(--muted); pointer-events: none; }
.sp-acc { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.sp-terms-box { margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); }
.sp-terms-in { margin-top: 14px; }
.sp-terms-in .su-list li { font-size: 14px; }
.sp-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; color: var(--copy); font-size: 14px; line-height: 1.6; cursor: pointer; }
.sp-check input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--ink); }
.sp-send { width: 100%; justify-content: center; margin-top: 4px; border: 0; border-radius: 0; cursor: pointer; }
.sp-send:disabled { opacity: .6; cursor: default; }
.sp-form .wl-err { margin: 0 0 14px; }
.sp-privacy { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.sp-done { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0 4px; }
.sp-done h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 600; }
.sp-done p { margin: 0; color: var(--copy); font-size: 14.5px; line-height: 1.65; }
.sp [hidden] { display: none !important; }
html[lang="ar"] .sp-p, html[lang="ar"] .sp-list li, html[lang="ar"] .sp-check, html[lang="ar"] .sp-done p, html[lang="ar"] .sp-faq details p { font-size: 17px; }
html[lang="ar"] .sp-f > span { font-size: 16px; font-weight: 700; }
html[lang="ar"] .sp-f small, html[lang="ar"] .sp-privacy, html[lang="ar"] .sp-panel h3, html[lang="ar"] .sp-link { font-size: 15px; }
html[lang="ar"] .sp-f input, html[lang="ar"] .sp-sel select, html[lang="ar"] .sp-f textarea, html[lang="ar"] .sp-acc input { font-size: 17px; line-height: 1.8; padding-block: 6px 9px; }
html[lang="ar"] .sp-faq summary { font-size: 19px; font-weight: 600; }
html[lang="ar"] .sp-faq h2, html[lang="ar"] .sp-dlg-head h2, html[lang="ar"] .sp-done h3 { font-weight: 700; letter-spacing: 0; line-height: 1.5; }
html[lang="ar"] .sp-terms-in .su-list li { font-size: 16px; }
html[lang="ar"] .sp-f input[dir="ltr"], html[lang="ar"] .sp-acc input[dir="ltr"] { text-align: left; }
@media (prefers-reduced-motion: reduce) { .sp-link { transition: none; } .sp-dlg[open], .sp-dlg::backdrop, .sp-dlg.sp-out { animation: none; } }
@media (max-width: 600px) {
  .sp-dlg { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-inline: 0; border-bottom: 0; }
  .sp-dlg-body { padding: 18px 20px 24px; }
  .sp-dlg-head, html[dir="rtl"] .sp-dlg-head { padding: 14px 14px 12px 20px; }
  html[dir="rtl"] .sp-dlg-head { padding: 14px 20px 12px 14px; }
  .sp-grid, .sp-acc { grid-template-columns: 1fr; }
}

/* Laman utama «More features» (pages.more_features): tiga kad pautan dalam grid nilai yang sama, selepas «Why Intelligent UI?».
   Seluruh kad ialah pautan; «Learn more →» di bawah, garis penuh meluncur bila kad dihover (gaya pautan teks laman). */
section.more-feat { padding-block: 72px 8px; }
section.more-feat h2 { margin-bottom: 28px; }
/* Garis bawah grid sama panjang dengan garis atas; garis atas «Works with Claude and ChatGPT» dibuang (satu garis sahaja). */
section.more-feat { padding-bottom: 0; }
section.more-feat + section.providers { border-top: 0; }
.more-feat .value { display: flex; flex-direction: column; }
.more-feat .value h3 { white-space: normal; }
.more-feat .value p { flex: 1; }
.more-go { display: inline-flex; gap: 6px; align-self: flex-start; margin-top: 18px; color: var(--ink); font: 500 14px/1.5 var(--font);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px, linear-gradient(color-mix(in srgb, currentColor 25%, transparent), color-mix(in srgb, currentColor 25%, transparent)) no-repeat 0 100% / 100% 1px;
  transition: background-size .3s cubic-bezier(.2, .8, .2, 1); }
html[dir="rtl"] .more-go { background-position: 100% 100%, 100% 100%; }
.more-feat .value:hover .more-go, .more-feat .value:focus-visible .more-go { background-size: 100% 1px, 100% 1px; }
@media (max-width: 900px) {      /* satu lajur: semua kad sejajar di tepi (tiada pad atau garis lajur kedua) */
  .more-feat .value-grid.three { grid-template-columns: minmax(0, 1fr); }
  .more-feat .value, .more-feat .value:nth-child(odd), .more-feat .value:nth-child(even) { padding-inline: 0; border-inline: 0; }
}

/* Halaman harga (/pricing/, pricingpage.py): kepala di tengah, empat kad selebar 1300px (seperti halaman harga Cursor),
   Compare plans dengan kepala melekat, kalkulator naik taraf. Kad kelabu seperti kad halaman Core (--band, tanpa
   bingkai); «Most popular» berbingkai gelap dengan lencana oren seperti cip «New». Butang dan suis berbentuk pil;
   butang kedua dan suis satu ton lebih pekat daripada kad (mod gelap: lebih terang), tanpa garis. */
.pr-wrap { width: min(1100px, calc(100% - 32px)); margin-inline: auto; }
.pr-wrap.pr-plans, .pr-wrap.pr-wide { width: min(1300px, calc(100% - 40px)); }
.pr-hero { padding-block: 84px 44px; text-align: center; border-top: 0; }
.pr-hero h1 { margin: 0 0 18px; color: var(--ink); font: 500 clamp(36px, 3.3vw, 46px)/1.14 var(--font-display); letter-spacing: -.04em; }
.pr-hero p { max-width: 900px; margin: 0 auto; color: var(--copy); font-size: 15px; line-height: 1.7; text-wrap: balance; }
html[lang="ar"] .pr-hero h1 { font-size: clamp(38px, 3.6vw, 50px); line-height: 1.5; letter-spacing: 0; }
.pr-plans { padding-block: 8px 72px; border-top: 0; }
.pr-plans .price-grid { gap: 10px; }
.pr-plans .plan { --pr-tone: color-mix(in srgb, var(--ink) 7%, var(--band)); background: var(--band); border-color: transparent; }
:root[data-theme="light"] .pr-plans .plan, :root[data-theme="light"] .pr-calc { --pr-tone: color-mix(in srgb, var(--ink) 9%, var(--band)); }
.pr-plans .plan.popular { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.pr-plans .plan h3 { justify-content: space-between; }
.pr-plans .plan .badge { --orange: #ea580c; margin-block: -3px; padding: 3px 10px; border-radius: 999px; background: var(--orange); color: #fff;
  font: 500 12px/1.5 var(--font); letter-spacing: 0; }
:root[data-theme="dark"] .pr-plans .plan .badge { --orange: #f26a3d; background: color-mix(in srgb, var(--orange) 18%, var(--band)); color: var(--orange); }
.pr-plans .plan-desc { min-height: 0; }
.pr-plans .pr-seatline { display: flex; align-items: center; align-self: flex-start; height: 32px; margin: 12px 0 0; padding: 0 16px; border-radius: 999px;
  background: var(--pr-tone); color: var(--copy); font: 500 13px/1 var(--font); }
.pr-plans .pr-spacer { visibility: hidden; }
.pr-plans .plan-seats { align-self: flex-start; width: max-content; height: 32px; margin: 12px 0 0; padding: 3px; border: 0; border-radius: 999px; background: var(--pr-tone); }
.pr-plans .plan-seats button { min-height: 26px; padding: 0 14px; font-size: 13px; }
.pr-plans .plan-seats .seat-thumb { border-radius: 999px; }
.pr-plans .plan .download { margin-top: 18px; border-radius: 999px; }
.pr-plans .plan .download.ghost { background: var(--pr-tone); box-shadow: none; }
.pr-plans .plan .download.ghost:hover { background: color-mix(in srgb, var(--ink) 14%, var(--band)); }
.pr-plans .pr-inc { margin: 22px 0 0; color: var(--ink); font-size: 14px; font-weight: 500; }
.pr-plans .price-list { margin: 8px 0 0; }
.pr-plans .price-note { margin: 18px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.pr-sec { padding-block: 72px; border-top: 1px solid var(--line); }
.pr-sec h2 { margin: 0; color: var(--ink); font: 500 clamp(27px, 2.4vw, 32px)/1.25 var(--font-display); letter-spacing: -.025em; }
html[lang="ar"] .pr-sec h2 { font-weight: 600; line-height: 1.5; letter-spacing: 0; }
/* Compare plans: kepala melekat di bawah kepala laman (65px); bila sampai baris butang, garisnya hilang (site.js). */
.pr-cmp-h { margin-bottom: 12px !important; }
.pr-table .pr-r { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pr-table .pr-r:last-child { border-bottom: 0; }
.pr-table .pr-r.pr-th { position: sticky; top: var(--top-h); z-index: 1; padding: 20px 0 16px; background: var(--bg); }
.pr-table .pr-r.pr-th.pr-joined { border-bottom-color: transparent; }
.pr-th span { color: var(--ink); font: 600 15px/1.3 var(--font); text-align: center; }
.pr-th span small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 400; }
.pr-th .pr-s, .pr-seg .pr-s { display: none; }
.pr-feat b { display: block; color: var(--ink); font-size: 15px; font-weight: 500; }
.pr-feat p { max-width: 28ch; margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }     /* paling banyak 2 baris */
.pr-r > i { justify-self: center; }
.pr-val { justify-self: center; color: var(--ink); font-size: 15px; text-align: center; }
.pr-yes, .pr-no { position: relative; display: inline-block; width: 14px; height: 14px; }
.pr-yes::before { content: ""; position: absolute; inset-inline-start: 2px; top: 2px; width: 10px; height: 5px; border-left: 1.6px solid var(--tick);
  border-bottom: 1.6px solid var(--tick); transform: rotate(-45deg); }
.pr-no::before { content: ""; position: absolute; inset-inline-start: 3px; top: 7px; width: 8px; border-top: 1.4px solid color-mix(in srgb, var(--muted) 70%, transparent); }
.pr-table .pr-r.pr-foot { padding-top: 4px; border-bottom: 0; }
.pr-foot > span { text-align: center; }
.pr-foot .download.pr-mini { display: flex; justify-content: center; gap: 0; width: max-content; min-height: 38px; margin: 0 auto; padding: 0 18px;
  border-radius: 999px; font: 600 14px/1 var(--font); }
.pr-foot .download.pr-mini.ghost { background: var(--band); color: var(--ink); box-shadow: none; }
.pr-foot .download.pr-mini.ghost:hover { background: color-mix(in srgb, var(--ink) 10%, var(--band)); opacity: 1; }
html[lang="ar"] .pr-foot .download.pr-mini { font: 700 14px/1 var(--font); }
/* Kalkulator naik taraf: pilihan di kiri, satu harga (dan harga penuh dicoret) di kanan. */
.pr-up-h { margin-bottom: 28px !important; }
.pr-calc { display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; padding: 28px; background: var(--band);
  --pr-tone: color-mix(in srgb, var(--ink) 7%, var(--band)); }
.pr-calc-qs { display: grid; gap: 18px; }
.pr-calc-q { display: grid; gap: 8px; }
.pr-calc-l { color: var(--muted); font-size: 13px; }
.pr-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; width: max-content; max-width: 100%; padding: 3px; border-radius: 999px; background: var(--pr-tone); }
.pr-seg button { min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--copy); font: 500 14px/1 var(--font); cursor: pointer; }
.pr-seg button:hover:not(:disabled):not(.on) { color: var(--ink); }
.pr-seg button.on { background: var(--ink); color: var(--bg); }
.pr-seg button:disabled { color: color-mix(in srgb, var(--muted) 55%, transparent); cursor: default; }
html[lang="ar"] .pr-seg button { font: 600 15px/1 var(--font); }
.pr-calc-r { display: grid; justify-items: end; gap: 4px; min-width: 180px; text-align: end; }
.pr-calc-r b { color: var(--ink); font: 600 48px/1 'Inter', sans-serif; letter-spacing: -.03em; }
.pr-calc-was { color: var(--muted); font-size: 14px; }
.pr-calc-was s { text-decoration-thickness: 1px; }
.pr-calc-r small { max-width: 24ch; color: var(--muted); font-size: 13px; }
.pr-sec .pr-after { margin: 18px 0 0; color: var(--copy); font-size: 15px; line-height: 1.7; }
@media (max-width: 900px) {
  .pr-table .pr-r { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 10px; }
  .pr-th .pr-l { display: none; } .pr-th .pr-s { display: inline; } .pr-feat p { display: none; }
}
@media (max-width: 760px) {
  .pr-sec { padding-block: 56px; }
  .pr-table .pr-r { grid-template-columns: minmax(92px, 1.2fr) repeat(5, minmax(48px, 1fr)); gap: 4px; }
  .pr-th span { font-size: 11px; } .pr-th span small { display: none; } .pr-foot { display: none !important; } .pr-feat b { font-size: 14px; }
  .pr-calc { grid-template-columns: 1fr; padding: 20px; } .pr-calc-r { justify-items: start; text-align: start; }
  .pr-seg .pr-l { display: none; } .pr-seg .pr-s { display: inline; }
}

/* Halaman Core (body.core-page, pages.CORE_SLUGS + laman utama): ruang memisahkan seksyen, garis memisahkan item (Faris 2026-11-10).
   Tiada garis antara seksyen; seksyen hitam ↔ hitam dipisahkan ruang sama rata (~176px desktop, ~112px telefon).
   Garis komponen (FAQ, jadual, grid, langkah) kekal. */
body.core-page main section:not(main section section) { border-top: 0; border-bottom: 0; }
/* Jarak sama rata selepas garis dibuang: 88px setiap sisi seksyen (desktop), 56px (telefon). */
body.core-page main .sp-explore, body.core-page main .sp-faq + section.values { padding-top: 88px; }
/* /projects/: band #work disorok, hero terus bertemu seksyen hitam pertama. */
body.core-page .spc-scenes[hidden] + section { padding-top: 176px; }
/* /modern/: seksyen ciri bermula selepas demo/grid seksyen sebelumnya (margin 64px) — 64 + 112 = 176. */
body.core-page .mo > :is(figure, .mo-grid) + section.feature { padding-top: 112px; }
body.core-page .mo > .band + section.feature { padding-top: 88px; }      /* band → seksyen: padding seksyen (spec), bukan 56 */
/* Laman utama: petikan pasukan berakhir dengan penutup pendek di tengah (milik petikan, bukan garis seksyen);
   band → petikan = nama → penutup = penutup → Intelligent UI. */
body.core-page figure.founder-voice { padding-block: 88px 0; }
body.core-page figure.founder-voice::after { content: ""; display: block; width: 40px; height: 1px; margin: 88px auto 0; background: var(--line); }
body.core-page section#iui { padding-top: 88px; }
body.core-page section.more-feat { padding-bottom: 88px; }
body.core-page section.providers { padding-block: 88px; }
@media (max-width: 760px) {
  body.core-page main .sp-explore, body.core-page main .sp-faq + section.values { padding-top: 56px; }
  body.core-page .mo > :is(figure, .mo-grid) + section.feature { padding-top: 48px; }
  body.core-page .mo > .band + section.feature { padding-top: 56px; }
  body.core-page .spc-scenes[hidden] + section { padding-top: 112px; }
  body.core-page figure.founder-voice { padding-block: 56px 0; }
  body.core-page figure.founder-voice::after { margin-top: 56px; }
  body.core-page section#iui { padding-top: 56px; }
  body.core-page section.more-feat { padding-bottom: 56px; }
  body.core-page section.providers { padding-block: 56px; }
}

/* Scrollbar (spec app: scrollbar-token.css + scrollbar.css): lorong 6px, inset 1px, ibu jari 4px bulat, tiada trek
   («longkang»). Jangan tetapkan scrollbar-width/scrollbar-color standard pada penatal dalam: Chromium/WebKit lalu
   mengabaikan ::-webkit-scrollbar dan melukis scrollbar sistem bertrek. */
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner { background: transparent; border: 0; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { min-height: 28px; min-width: 28px; border: 1px solid transparent; border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 24%, var(--bg)) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 44%, var(--bg)); }
/* Halaman (tetikus/trackpad): scrollbar asli disorok sepenuhnya, jadi tiada lorong yang memakan lebar halaman; site.js
   «Scrollbar halaman» melukis bar terapung (.page-sb) di tepi kanan. Skrin sentuh: penunjuk asli (sudah tanpa lorong). */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
.page-sb { position: fixed; top: 0; bottom: 0; right: 0; z-index: 60; width: 6px; touch-action: none; }
.page-sb[hidden] { display: none; }
.page-sb i { position: absolute; top: 0; left: 1px; right: 1px; min-height: 28px; border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 24%, var(--bg)); transition: background-color .12s ease-out; }
.page-sb:hover i, .page-sb.drag i { background: color-mix(in srgb, var(--ink) 44%, var(--bg)); }
html.mnav-lock .page-sb { display: none; }

/* Preview: hide the meter while preserving the live demo sizing. */
figure.demo > .demo-bar.has-meter { visibility: hidden; }
.demo[data-demo-dark] .window, .demo[data-demo-dark] .own-bar {
  background: #0e0e0e;
}
/* Bar tajuk Mac skrin gelap: beza sedikit daripada kanvas (#0e0e0e) dengan garis bawah halus — sama dengan kanvas, ia
   kelihatan janggal di atas sidebar (Faris 2026-11-12, pilihan 3). Skrin terang: padanan yang sama. */
.demo[data-demo-dark] .own-bar { background: #181818; box-shadow: inset 0 -1px 0 #0a0a0a; }
.demo[data-demo-dark][data-theme="light"] .own-bar { background: #f4f4f4; box-shadow: inset 0 -1px 0 #e4e4e4; }
.demo[data-demo-dark] .own-bar > span { display: none; }

/* Balance the Projects introduction against the space reserved above the demo. */
.pj-page .spc-hero[aria-labelledby="pj-title"] { padding-block: 100px 32px; }
.pj-page .spc-hero[aria-labelledby="pj-title"] + .spc-stage { margin-block-start: 8px; }   /* meter tiada lagi: tetingkap tidak ditarik naik ke atas copy */
@media (max-width: 760px) {
  .pj-page .spc-hero[aria-labelledby="pj-title"] { padding-block: 72px 4px; }
  .pj-page .spc-hero[aria-labelledby="pj-title"] + .spc-stage { margin-block-start: 24px; }
}

/* Skrin spec (data-demo-dark, semua halaman Core): tiada meter — ruang bar demo tidak dikekalkan (jarak copy→skrin sama
   di setiap halaman); hero membesar dengan lebar sebenar (site.js heroGrow). */
.demo[data-demo-dark] > .demo-bar { display: none; }
.demo[data-demo-dark] .layer-ai,
.demo[data-demo-dark] .layer-ai iframe { background: #0e0e0e; }
/* Skrin demo gelap ditukar ke terang oleh pelawat (butang .screen-mode): bar mac dan latar tetap sewarna skrin. */
.demo[data-demo-dark][data-theme="light"] .window,
.demo[data-demo-dark][data-theme="light"] .layer-ai, .demo[data-demo-dark][data-theme="light"] .layer-ai iframe { background: #fff; }
.demo[data-demo-dark][data-theme="light"] .window { border-color: #e4e4e4; }
/* Butang tema skrin dan ▶ (demo berhenti / tamat): bulat 34px, DI LUAR skrin, bertindan di sebelah atas tepi tetingkap
   (sisi akhir: kanan LTR, kiri RTL), dalam ruang kosong sedia ada — tetingkap tidak dianjak atau dikecilkan, dan app tidak
   pernah ditutup (Faris 2026-11-12). Warna ikut halaman (bukan skrin). Butang tema hanya bila tetikus di atas demo (sembunyi
   lambat sedikit supaya sempat dicapai merentas jarak); ▶ di bawahnya, sentiasa kelihatan selagi demo berhenti.
   Tiada ruang di tepi (telefon, ≤760px): ▶ di penjuru bawah dalam skrin seperti asal. */
.demo[data-demo-dark] { position: relative; }
.demo .screen-mode, .demo .screen-replay { position: absolute; inset-inline-start: calc(100% + 12px); z-index: 6; width: 34px; height: 34px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); cursor: pointer; opacity: 0; visibility: hidden;
  transition: opacity .2s cubic-bezier(.4, 0, .2, 1) .35s, visibility 0s .55s, background-color .12s ease-out; }
.demo .screen-mode { top: 0; }
.demo .screen-replay { top: 44px; }
.demo .screen-mode svg { display: block; }
.demo .screen-replay svg { display: block; margin-inline-start: 2px; }
[dir="rtl"] .demo .screen-replay svg { margin-inline-start: 0; margin-inline-end: -2px; }
.demo .screen-mode:hover, .demo .screen-replay:hover { background: var(--band); }
@media (hover: hover) and (pointer: fine) {
  .demo:hover .screen-mode, .demo .screen-mode:focus-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (hover: none), (pointer: coarse) { .demo .screen-mode { display: none; } .demo .screen-replay { top: 0; } }
/* Ruang tepi tidak cukup untuk butang (telefon, tablet, hero penuh pada skrin sempit): site.js menanda .screen-in, butang
   masuk ke penjuru bawah dalam skrin seperti asal — halaman tidak pernah melebar. */
.demo.screen-in .screen-mode, .demo.screen-in .screen-replay { inset-inline-start: auto; top: auto; bottom: 14px; inset-inline-end: 14px; border-color: #353535; background: #1d1d1d; color: #e6e6e6; }
.demo.screen-in .screen-replay { inset-inline-end: 56px; }
.demo.screen-in[data-theme="light"] .screen-mode, .demo.screen-in[data-theme="light"] .screen-replay { border-color: #dedede; background: #fff; color: #2b2b2b; }
@media (hover: none), (pointer: coarse) { .demo.screen-in .screen-replay { inset-inline-end: 14px; } }
.demo.demo-stopped .screen-replay { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Kamera zum hero /projects/: site.js menulis translate + scale dari asal 0 0 (satu lengkung untuk zum dan anjakan).
   Lebih lembut (Faris): 1.8 s, lengkung sinus masuk-keluar — sama dengan gerakan membesar tetingkap. */
.demo[data-demo-dark] .layer, .demo[data-demo-dark] .side-cam {
  transform-origin: 0 0;
  transition: opacity .35s ease, visibility .35s, transform 1.8s cubic-bezier(.37, 0, .63, 1);
}

/* Pentas hero home: lajur yang sama dengan hero Core lain (sp-wrap: min(1120px, 80%)), supaya tetingkap demo bermula,
   membesar dan berpusat tepat seperti /projects/ (heroGrow mengukur lebar lajur ini). */
.hero-stage { width: min(1120px, 80%); margin: 0 auto 64px; }
.hero-stage > .demo { max-width: none; margin: 0; padding: 0; }
.hero:has(+ .hero-stage) { padding-bottom: 40px; }       /* copy → skrin 40px, sama dengan hero Core lain */
.screen-stage { margin-bottom: 0; }                       /* IUI home: jalur «Why IUI» bermula di belakang skrin (.iui-demo::before) */
@media (max-width: 1050px) { .hero-stage { width: calc(100% - 64px); } }
@media (max-width: 760px) { .hero-stage { width: calc(100% - 40px); } }

/* Hero Moden (skrin spec lalai terang, dalam .hero-stage): demo hidup hanya pada skrin lebar (.on); selainnya video. Bar
   tajuk Mac warna spec tanpa teks, tiada kapsyen di bawah skrin (sama dengan hero Core lain). */
.hero-stage:has(> .mo-live:not(.on)) { display: none; }
.hero-stage:has(> .mo-live.on) + .mo-live-video { display: none; }
.mo-hero:has(+ .hero-stage) { padding-bottom: 40px; }
.mo-live[data-demo-dark] .mo-live-cap { display: none; }
.mo-live[data-demo-dark] .mo-live-bar { background: #f4f4f4; box-shadow: inset 0 -1px 0 #e4e4e4; border-color: transparent; }
.mo-live[data-demo-dark] .mo-live-bar span { display: none; }
.mo-live[data-demo-dark][data-theme="dark"] .mo-live-bar { background: #181818; box-shadow: inset 0 -1px 0 #0a0a0a; }
.mo-live[data-demo-dark][data-theme="dark"] .mo-live-win { background: #0e0e0e; }
.mo-live[data-demo-dark] .mo-cam { transition: transform 1.8s cubic-bezier(.37, 0, .63, 1); }
.mo-live[data-demo-dark].ff .mo-cam { transition: none; }