/* /compare/ (site/compare.py): hero spec (cip, tajuk, lede), seksyen «server down» (kaunter), jadual berkumpulan, kad ciri, «To be fair».
   Warna neutral (tiada biru pada keadaan aktif); lajur Shamela Agent ditanda dengan latar --band, bukan warna. */
.cmp-page { --cmp-tone: color-mix(in srgb, var(--ink) 6%, var(--bg)); --cmp-us: color-mix(in srgb, var(--ink) 4.5%, var(--bg)); }
:root[data-theme="dark"] .cmp-page { --cmp-us: var(--band); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cmp-page { --cmp-us: var(--band); } }
.cmp-hero { padding-bottom: 0; }      /* tiada visual dalam hero: jarak diberi oleh padding seksyen seterusnya */

/* ── Seksyen «server down»: rajah ── */
.cmp-flow { margin: 0; }
.cmp-down .sp-section-head p { margin: 0; }
.cf-switch { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.cmp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--cmp-tone); }
.cmp-seg button { min-height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--copy);
  font: 500 13px/1 var(--font); cursor: pointer; transition: background .2s, color .2s; }
.cmp-seg button:hover:not(.on) { color: var(--ink); }
.cmp-seg button.on { background: var(--ink); color: var(--bg); }
.cmp-seg button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
html[lang="ar"] .cmp-seg button { font: 600 14.5px/1 var(--font); }

.cf-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-style: normal; }
.cf-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cf-icon svg.cmp-thl { fill: currentColor; stroke: none; }

/* ── Seksyen «server down», rekaan F: tiga kad kaunter «soalan dijawab» + bar kecil. Bila Down, dua kad pertama membeku. ── */
.vf { --vx-red: #dc2626; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
:root[data-theme="dark"] .vf { --vx-red: #f87171; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vf { --vx-red: #f87171; } }
.vf-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.vf-card.us { border-color: transparent; background: var(--cmp-us); }
.vf-card > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.vf-card.us > header { border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.vf-card > header .cf-icon { width: 28px; height: 28px; border-radius: 8px; }
.vf-num { padding: 22px 18px 4px; }
.vf-n { display: block; color: var(--ink); font: 600 44px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .2s; }
.vf-num span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.vf-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin: 14px 18px 0; }
.vf-spark i { flex: 1; height: 100%; border-radius: 2px; background: var(--tick); opacity: .8; transform: scaleY(.04); transform-origin: bottom; transition: transform .2s; }   /* transform sahaja: tiada layout */
.vf-spark i.z { background: var(--vx-red); }
.sp-page p.vf-st { display: grid; margin: 14px 0 0; padding: 12px 18px 16px; border-top: 1px solid var(--line); font-size: 13px !important; line-height: 1.5 !important; }
.vf-card.us .vf-st { border-top-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.vf-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity .2s; }
.vf-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--tick); }
.vf-on { color: var(--copy); } .vf-off { opacity: 0; color: var(--vx-red); } .vf-off i { background: var(--vx-red); }
.vf[data-ws="down"] .vf-card:not(.us) .vf-on { opacity: 0; }
.vf[data-ws="down"] .vf-card:not(.us) .vf-off { opacity: 1; }
.vf[data-ws="down"] .vf-card:not(.us) .vf-n { color: var(--muted); }
.sp-page p.vf-sim { margin: 12px 0 0; color: var(--muted) !important; font-size: 12.5px !important; text-align: end; }
html[lang="ar"] .vf-card > header, html[lang="ar"] .sp-page p.vf-st { font-size: 15px !important; }
html[lang="ar"] .vf-num span, html[lang="ar"] .sp-page p.vf-sim { font-size: 14px !important; }

/* ── Jadual: kepala melekat di bawah kepala laman; lajur Shamela Agent berlatar --band ── */
.cmp-side .sp-head-stack { margin-bottom: 18px; }
.ct-pick { display: none; }
.ct-r { display: grid; grid-template-columns: minmax(150px, 1.05fr) repeat(3, minmax(0, 1fr)); column-gap: 0; }
.ct-th { position: sticky; top: var(--top-h); z-index: 2; background: var(--bg); }
/* Kepala: ikon + nama + baris kecil (jenis produk); garis bawah terus bersambung dengan baris pertama, tiada jarak. */
.ct-th > * { border-bottom: 1px solid var(--line); }
.ct-p { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--ink); font-size: 14.5px; }
.ct-p > span { display: grid; gap: 2px; min-width: 0; }
.ct-p b { font-weight: 600; line-height: 1.3; }
.ct-p small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.ct-p .cf-icon { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.ct-p.us { border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.ct-p.us, .ct-c.us { background: var(--cmp-us); }
.ct-p.us { border-radius: 12px 12px 0 0; }
/* Nama kumpulan: label kecil di atas label baris pertama kumpulan. */
.ct-gl { display: block; margin: 0 0 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.ct-l, .ct-c { padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; }
.ct-l { padding-inline-start: 0; color: var(--ink); font-weight: 500; }
.ct-c { display: flex; align-items: flex-start; gap: 10px; color: var(--copy); }
.ct-c.us { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.ct-r:last-child .ct-c.us { border-radius: 0 0 12px 12px; border-bottom-color: transparent; }
.ct-mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; font-style: normal; }
.ct-mark svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-mark.yes { background: var(--tick); color: #fff; }
.ct-mark.part { background: color-mix(in srgb, var(--muted) 55%, var(--bg)); color: #fff; }
.ct-mark.no { background: var(--cmp-tone); color: var(--muted); }
:root[data-theme="dark"] .ct-mark.yes { color: #0e0e10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct-mark.yes { color: #0e0e10; } }
.ct-c.info { padding-inline-start: 18px; }
html[lang="ar"] .ct-l, html[lang="ar"] .ct-c { font-size: 16px; line-height: 1.7; }
html[lang="ar"] .ct-gl { font-size: 14px; }
html[lang="ar"] .ct-p { font-size: 16px; }
html[lang="ar"] .ct-p small { font-size: 14px; }

/* ── Ciri: grid 3 lajur, garis di atas setiap kad (garis memisahkan item) ── */
.cmp-work .value-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border: 0; }
.cmp-work .value { display: flex; flex-direction: column; padding: 28px 0 32px; border: 0; border-top: 1px solid var(--line); }
.cmp-work .value h3 { white-space: normal; }
.cmp-work .value p { flex: 1; }
.cw-go { margin-top: 16px; color: var(--ink); font-size: 14px; font-weight: 500; }
html[lang="ar"] .cw-go { font-size: 15px; }
.cmp-work a.value:hover .cw-go { text-decoration: underline; text-underline-offset: 4px; }

/* ── Panduan pilihan: tiga lajur sama lebar (produk di atas, syarat di bawah), garis di atas setiap lajur; nota kecil di bawah. ── */
/* Kotak kelabu (--band, satu kelabu laman); lajur dipisahkan garis menegak halus. */
.cmp-choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 8px; list-style: none; border-radius: 16px; background: var(--band); }
.cmp-choose li { display: grid; align-content: start; gap: 16px; padding: 24px 26px 28px; }
.cmp-choose li + li { border-inline-start: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.cmp-pick { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.cmp-pick .cf-icon { width: 34px; height: 34px; border-radius: 9px; }
.cmp-pick small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.cmp-pick b { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.cmp-choose .cf-icon { border-color: color-mix(in srgb, var(--ink) 14%, transparent); background: var(--bg); }
.sp-page .cmp-fair p.cmp-if { margin: 0; color: var(--copy); font-size: 15px !important; line-height: 1.65 !important; text-wrap: balance; }      /* baris seimbang */
.cmp-notes { max-width: 72ch; margin-top: 18px; }
.sp-page .cmp-fair p.cmp-note { margin: 0; color: var(--muted) !important; font-size: 13.5px !important; line-height: 1.6 !important; }
.sp-page .cmp-fair p.cmp-seen { margin: 8px 0 0; color: var(--muted) !important; font-size: 12.5px !important; line-height: 1.5 !important; }
html[lang="ar"] .sp-page .cmp-fair p.cmp-if { font-size: 16.5px !important; line-height: 1.8 !important; }
html[lang="ar"] .cmp-pick b { font-size: 17px; } html[lang="ar"] .cmp-pick small { font-size: 13px; }
html[lang="ar"] .sp-page .cmp-fair :is(p.cmp-note, p.cmp-seen) { font-size: 14px !important; line-height: 1.75 !important; }

@media (max-width: 900px) {
  .vf { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .cmp-work .value-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telefon: pilih satu pesaing; jadual jadi dua lajur (pesaing lawan Shamela Agent), label baris di atas. */
@media (max-width: 760px) {
  .cmp-hero { padding-bottom: 0; }
  .cmp-down .sp-section-head > div { margin-top: 16px; }
  .ct-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; color: var(--muted); font-size: 13px; }
  .ct-r { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-th > span:first-child { display: none; }
  .ct-l { grid-column: 1 / -1; padding: 16px 0 4px; border-bottom: 0; }
  .ct-c { padding: 6px 12px 16px; font-size: 14px; }
  .ct-p { padding: 12px; font-size: 13.5px; }
  .ct[data-c="0"] [data-c="1"], .ct[data-c="1"] [data-c="0"] { display: none; }
  .cmp-work .value-grid.three { grid-template-columns: minmax(0, 1fr); }
  .cmp-choose { grid-template-columns: minmax(0, 1fr); } .cmp-choose li { padding: 20px 18px 22px; }
  .cmp-choose li + li { border-inline-start: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cmp-seg button, .vf-spark i, .vf-st > span { transition: none; }