/* Marketing pages: /pricing, /vs, /vs/<competitor> and /status. Loaded after site.css by those pages only.
   Every colour, size and radius comes from tokens.css and follows docs/brand/identity.md: start-aligned headings with no
   eyebrow labels or gradient washes, panels with a 12px radius and a 1px line and no shadow, and feature lists drawn as
   ruled rows rather than cards. Layout uses logical properties only, so the same rules serve English and Arabic. */

.mk{--mk-radius:var(--r-md);--mk-radius-lg:var(--r-md);padding-block-end:var(--s-2)}
.mk :where(h1,h2,h3){color:var(--ink);font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
.mk :where(p,ul,ol,dl){margin:0}
.mk-icon{inline-size:18px;block-size:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mk[dir="rtl"] .mk-flip{transform:scaleX(-1)}
.mk-muted{color:var(--muted);font-size:var(--fs-13)}
.mk-block{display:block;margin-block-start:4px}
.mk-link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--brand-ink);text-decoration-thickness:1.5px;text-underline-offset:.28em}
.mk-link:hover{color:var(--brand-ink);text-decoration-thickness:2px}
.mk code{font-family:var(--font-mono);font-size:.9em;unicode-bidi:isolate}
.mk :not(pre)>code{padding:1px 5px;border-radius:5px;background:var(--surface-3);color:var(--ink)}

/* ---------- Heading ---------- */
.mk-hero{text-align:start;padding-block:clamp(40px,6vw,72px) clamp(20px,3vw,32px)}
.mk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:var(--fs-13);color:var(--muted);margin-block-end:var(--s-4)}
.mk-crumbs a{display:inline-flex;align-items:center;min-block-size:24px;color:var(--ink-2);font-weight:500;text-decoration:none}
.mk-crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mk-crumbs [aria-hidden]{color:var(--line-strong)}
.mk-hero h1{max-inline-size:22ch;font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:var(--track-display)}
.mk-lead{max-inline-size:64ch;margin-block-start:var(--s-4);font-size:var(--fs-18);line-height:1.6;color:var(--ink-2)}
.mk-stamp{display:block;margin-block-start:var(--s-3);font-size:var(--fs-13);color:var(--muted)}
.mk-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-5)}
.mk-actions .site-button .mk-icon{inline-size:16px;block-size:16px}
.mk-trust{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;margin-block-start:var(--s-5);padding-block-start:var(--s-4);border-block-start:1px solid var(--line)}
.mk-trust li{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);font-weight:500;color:var(--ink-2)}
.mk-trust .mk-icon{inline-size:16px;block-size:16px;color:var(--muted)}
.mk-hero.is-compact{padding-block:clamp(32px,5vw,56px) var(--s-4)}
.mk-hero.is-compact h1{font-size:clamp(30px,4vw,44px)}

/* ---------- Sections ---------- */
.mk-section{padding-block:clamp(32px,5vw,56px);scroll-margin-block-start:80px}
.mk-head{max-inline-size:760px;margin-block-end:var(--s-5)}
.mk-head h2{font-size:clamp(24px,2.6vw,28px);line-height:1.2;letter-spacing:var(--track-head)}
.mk-head p{margin-block-start:var(--s-2);color:var(--ink-2);font-size:var(--fs-16);line-height:1.6;max-inline-size:62ch}
.mk-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-6);align-items:start;border-block-start:1px solid var(--line)}
.mk-split .mk-head{margin:0}
.mk-list{list-style:none;padding:0;display:grid;gap:var(--s-3)}
.mk-list li{position:relative;padding-inline-start:22px;color:var(--ink-2);line-height:1.6}
.mk-list li::before{content:"";position:absolute;inset-inline-start:3px;inset-block-start:.6em;inline-size:7px;block-size:7px;background:var(--ink);transform:rotate(45deg)}
.mk-list strong{color:var(--ink)}
.mk-list.is-muted li{color:var(--muted);font-size:var(--fs-13)}
.mk-list.is-muted li::before{background:var(--line-strong)}
.mk-note{display:flex;gap:10px;align-items:flex-start;margin-block-start:var(--s-4);font-size:var(--fs-13);color:var(--muted);line-height:1.55}
.mk-note .mk-icon{margin-block-start:1px;color:var(--muted)}
.mk-links,.mk-other{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-block-start:var(--s-4)}
.mk-other{padding-block-end:var(--s-6)}

/* ---------- Plans ---------- */
.mk-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);align-items:stretch}
.mk-plan{display:flex;flex-direction:column;gap:var(--s-4);padding:clamp(22px,3vw,32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--mk-radius-lg);box-shadow:var(--shadow-1);min-inline-size:0}
.mk-plan.is-featured{border:1.5px solid var(--brand);background:linear-gradient(180deg,var(--brand-softer),var(--surface) 45%);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 10%,transparent),var(--shadow-pop)}
.mk-plan.is-planned{border-style:dashed;border-color:var(--line-strong);background:var(--surface-2)}
.mk-plan-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.mk-plan h3{font-size:var(--t-lg)}
.mk-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
.mk-price strong{font-family:var(--font-display);font-size:clamp(40px,5vw,56px);font-weight:780;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.mk-price span{color:var(--muted);font-weight:550}
.mk-price .mk-price-tba{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;color:var(--ink-2)}
.mk-plan-note{color:var(--muted);font-size:15px}
.mk-plan .mk-actions{justify-content:flex-start;margin:0}
.mk-plan .mk-actions .site-button{flex:1 1 auto}
.mk-checks{list-style:none;padding:0;display:grid;gap:12px}
.mk-checks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:15px;line-height:1.5}
.mk-checks .mk-icon{inline-size:22px;block-size:22px;padding:4px;margin-block-start:1px;border-radius:50%;background:var(--good-soft);color:var(--good);stroke-width:2.6}
.mk-checks.is-planned .mk-icon{background:var(--brand-soft);color:var(--brand-ink);stroke-width:2}
.mk-checks.is-neutral .mk-icon{background:var(--surface-3);color:var(--ink-2)}
.mk-checks strong{color:var(--ink)}
.mk-announce{display:flex;gap:10px;align-items:flex-start;margin-block-start:auto;padding:14px 16px;border-radius:var(--r-md);background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--ink);font-weight:650;line-height:1.5}
.mk-announce .mk-icon{color:var(--brand-ink);margin-block-start:2px}
.mk-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);font-size:var(--t-xs);font-weight:650;white-space:nowrap}
.mk-pill.is-good{background:var(--good-soft);color:var(--good)}

/* ---------- Comparison tables (stack into rows on phones) ---------- */
.mk-table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--mk-radius);overflow-x:auto}
.mk-table{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-15)}
.mk-table :is(th,td){text-align:start;white-space:normal;vertical-align:top;padding:14px 18px;border-block-end:1px solid var(--line);line-height:1.55;color:var(--ink-2)}
.mk-table thead th{background:var(--surface);font-size:var(--fs-13);font-weight:500;color:var(--muted);white-space:nowrap;border-block-end-color:var(--line-strong)}
.mk-table thead th.is-us{color:var(--ink);font-weight:600}
.mk-table tbody th[scope="row"]{background:none;font-size:var(--fs-15);font-weight:600;color:var(--ink);inline-size:24%;min-inline-size:150px}
.mk-table tbody tr:last-child :is(th,td){border-block-end:0}
.mk-table tbody tr:hover :is(th,td){background:none}
/* JokerPrice's own column carries a light saffron tint, the brand's secondary highlight. */
.mk-table td.is-us,.mk-table tbody tr:hover td.is-us{background:color-mix(in srgb,var(--dune-soft) 55%,var(--surface))}
.mk-table td:has(>.mk-mark){position:relative;padding-inline-start:50px}
.mk-table td>.mk-mark{position:absolute;inset-inline-start:18px;inset-block-start:14px}
.mk-table .mk-total :is(th,td){background:var(--surface-2)}
.mk-table .mk-total strong{font-size:var(--fs-16);color:var(--ink)}
.mk-table .is-us-row :is(th,td){background:color-mix(in srgb,var(--dune-soft) 55%,var(--surface))}
.mk-table .is-us-row th{color:var(--ink)}
.mk-table .mk-nowrap{white-space:nowrap}
.mk-source-list{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.mk-ref .mk-col-product{inline-size:21%}.mk-ref .mk-col-price{inline-size:41%}.mk-ref .mk-col-sar{inline-size:17%}.mk-ref .mk-col-source{inline-size:21%}
.mk-mark{display:inline-grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;background:var(--surface-3);color:var(--muted);flex:none}
.mk-mark .mk-icon{inline-size:14px;block-size:14px;stroke-width:2.6}
.mk-mark.is-yes{background:var(--good-soft);color:var(--good)}
.mk-mark.is-no{background:var(--bad-soft);color:var(--bad)}
.mk-mark.is-partial{background:var(--warn-soft);color:var(--warn)}
.mk-mark.is-unknown .mk-icon{stroke-width:2}
.mk-cites{display:inline-flex;gap:6px;margin-inline-start:6px;vertical-align:1px}
.mk-cite{display:inline-grid;place-items:center;min-inline-size:22px;block-size:22px;padding-inline:4px;border-radius:6px;background:var(--surface-3);color:var(--ink);font-size:11px;font-weight:600;line-height:1;text-decoration:none;font-variant-numeric:tabular-nums}
.mk-cite:hover{background:var(--line-strong)}
.mk-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-block-start:var(--s-3);font-size:var(--fs-13);color:var(--muted)}
.mk-legend>span{display:inline-flex;align-items:center;gap:8px}
.mk-legend .mk-mark{inline-size:18px;block-size:18px}
.mk-legend .mk-mark .mk-icon{inline-size:12px;block-size:12px}
.mk-api-map{margin-block-start:var(--s-5)}
.mk-api-map code{font-size:13px;color:var(--ink)}
.mk-api-map+.mk-muted{margin-block-start:var(--s-3)}

/* ---------- Measured benchmark (/vs/<competitor>): a ruled table grouped by topic, with a tally of results ---------- */
.mk-bench-tally{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0;margin-block-end:var(--s-4);border-block:1px solid var(--line)}
.mk-bench-tally li{display:inline-flex;align-items:center;gap:8px;padding:12px 24px 12px 0;margin-inline-end:24px;font-size:var(--fs-15);color:var(--ink-2)}
.mk-bench-tally li+li{padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.mk-bench-tally b{font-size:var(--fs-22);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mk-bench-note{max-inline-size:76ch;margin-block-end:var(--s-4);font-size:var(--fs-13);line-height:1.6;color:var(--muted)}
.mk-bench .mk-group th{padding-block:18px 8px;font-size:var(--fs-13);font-weight:600;color:var(--muted);background:var(--surface-2);border-block-end-color:var(--line-strong)}
.mk-bench tbody:first-of-type .mk-group th{padding-block-start:12px}
.mk-bench tbody th[scope="row"]{inline-size:16%;min-inline-size:132px}
.mk-bench td{font-size:var(--fs-15)}
.mk-bench td:nth-child(4){white-space:nowrap}
.mk-bench td:nth-child(5){inline-size:16%;min-inline-size:150px;font-size:var(--fs-13)}
.mk-bench tbody:last-child tr:last-child :is(th,td){border-block-end:0}
.mk-bench tbody:not(:last-child) tr:last-child :is(th,td){border-block-end:1px solid var(--line)}
.mk-outcome{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.mk-outcome.is-tie .mk-mark,.mk-bench-tally .is-tie .mk-mark{background:var(--surface-3);color:var(--ink-2)}
.mk-bench bdi{font-weight:500}

/* ---------- Strengths, verdicts and callouts: ruled lists and plain panels ---------- */
.mk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-6);border-block-start:1px solid var(--line)}
.mk-card{padding-block:var(--s-4) var(--s-5);border-block-end:1px solid var(--line);min-inline-size:0}
.mk-card-icon{display:block;inline-size:22px;block-size:22px;color:var(--ink-2);margin-block-end:var(--s-3)}
.mk-card h3{font-size:var(--fs-18);margin-block-end:6px}
.mk-card p{color:var(--ink-2);font-size:var(--fs-15);line-height:1.6}
.mk-verdict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.mk-verdict-card{padding:clamp(20px,3vw,28px);border:1px solid var(--line);border-radius:var(--mk-radius);background:var(--surface);min-inline-size:0}
.mk-verdict-card.is-us{border-color:var(--ink-2)}
.mk-verdict-card h3{font-size:var(--fs-18);margin-block-end:var(--s-4)}
.mk-callout{padding:clamp(20px,3vw,32px);background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--dune);border-radius:var(--mk-radius)}
.mk-callout .mk-head{margin-block-end:var(--s-4)}
.mk-callout.is-plain{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-inline-start-color:var(--ink);font-size:var(--fs-15);color:var(--ink-2);line-height:1.6}
.mk-callout.is-plain .mk-icon{color:var(--ink-2);margin-block-start:3px}
.mk-callout.is-plain strong{color:var(--ink)}
.mk-both{margin-block-start:var(--s-5);padding-block-start:var(--s-4);border-block-start:1px solid var(--line);color:var(--ink-2);line-height:1.6}
.mk-both strong{color:var(--ink)}

/* ---------- Steps: a numbered sequence, so the numbers stay ---------- */
.mk-steps{list-style:none;padding:0;counter-reset:mk-step;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 var(--s-5);border-block-start:1px solid var(--line)}
.mk-steps li{counter-increment:mk-step;position:relative;padding-block:var(--s-4) var(--s-5);border-block-end:1px solid var(--line);min-inline-size:0}
.mk-steps li::before{content:counter(mk-step);display:grid;place-items:center;inline-size:28px;block-size:28px;margin-block-end:var(--s-3);border-radius:50%;background:var(--ink);color:var(--surface);font-weight:600;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.mk-steps strong{display:block;color:var(--ink);font-size:var(--fs-16);font-weight:600;margin-block-end:4px}
.mk-steps p{color:var(--ink-2);font-size:var(--fs-15);line-height:1.6}

/* ---------- /vs index: the two comparisons as ruled rows ---------- */
.mk-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-7);border-block-start:1px solid var(--line)}
.mk-compare-card{display:flex;flex-direction:column;gap:var(--s-3);padding-block:var(--s-5);border-block-end:1px solid var(--line);text-decoration:none;color:inherit}
.mk-compare-card h2{font-size:var(--fs-22);letter-spacing:var(--track-head)}
.mk-compare-card p{color:var(--ink-2);line-height:1.6;max-inline-size:56ch}
.mk-compare-card .mk-link{margin-block-start:auto;align-self:flex-start}
.mk-compare-card:hover h2{color:var(--brand-ink)}
/* Names as plain text: no competitor marks or logos. */
.mk-vs{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);font-weight:500;color:var(--muted)}
.mk-vs b{font-weight:600;color:var(--ink)}
.mk-vs span{color:var(--ink-2)}
.mk-vs i{font-style:normal}

/* ---------- FAQ and sources ---------- */
.mk-faq{max-inline-size:860px;border-block-start:1px solid var(--line)}
.mk-faq details p{line-height:1.65}
.mk-sources{border-block-start:1px solid var(--line)}
.mk-sources h2{font-size:var(--fs-22);margin-block-end:var(--s-2)}
.mk-sources ol{display:grid;gap:12px;padding-inline-start:22px;margin-block:var(--s-4);font-size:var(--fs-15);color:var(--ink-2)}
.mk-sources li::marker{color:var(--muted);font-weight:600}
.mk-source{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.25em;overflow-wrap:anywhere}
.mk-source:hover{color:var(--brand-ink);text-decoration-color:currentColor}
.mk-ext{inline-size:13px;block-size:13px}
.mk-cta .mk-actions{margin:0;justify-content:flex-start}
.mk-cta .site-button:not(.primary){background:transparent;color:var(--on-ink);border-color:color-mix(in srgb,var(--on-ink) 35%,transparent)}
.mk-cta .site-button:not(.primary):hover{border-color:var(--on-ink)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .mk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-split{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .mk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mk-plans,.mk-verdict,.mk-compare-grid,.mk-src-grid{grid-template-columns:minmax(0,1fr)}
  .mk-plan.is-featured{order:-1}
  /* Tables become one block per row; each cell names its column. */
  .mk-table-wrap{overflow:visible;border:0;background:none}
  .mk-table thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mk-table,.mk-table tbody,.mk-table tr,.mk-table th,.mk-table td{display:block;inline-size:auto}
  .mk-table tbody tr{padding:14px;margin-block-end:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--mk-radius)}
  .mk-table tbody th[scope="row"]{inline-size:auto;min-inline-size:0;padding:0 0 10px;border:0;font-size:var(--fs-16)}
  .mk-table td{padding:10px 12px;margin-block-start:8px;border:1px solid var(--line);border-radius:var(--r-sm)}
  .mk-table tbody tr:last-child td{border-block-end:1px solid var(--line)}
  .mk-table td::before{content:attr(data-label);display:block;margin-block-end:2px;font-size:var(--fs-12);font-weight:600;color:var(--muted)}
  .mk-table td:has(>.mk-mark){padding-inline-start:44px}
  .mk-table td>.mk-mark{inset-inline-start:12px;inset-block-start:12px}
  .mk-table .mk-nowrap{white-space:normal}
  .mk-table .mk-total :is(th,td),.mk-table .is-us-row :is(th,td){background:var(--surface)}
  .mk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Benchmark: group names read as headings between the stacked rows. */
  .mk-bench tbody tr.mk-group{padding:0;margin-block:var(--s-5) var(--s-2);background:none;border:0;border-radius:0}
  .mk-bench tbody:first-of-type tr.mk-group{margin-block-start:0}
  .mk-bench .mk-group th{padding:0;background:none;border:0;font-size:var(--fs-15);color:var(--ink)}
  .mk-bench tbody th[scope="row"]{inline-size:auto;min-inline-size:0}
  .mk-bench td:nth-child(5){inline-size:auto}
  .mk-bench tbody:not(:last-child) tr:last-child :is(th,td){border-block-end:0}
  .mk-bench tbody tr:last-child td{border-block-end:1px solid var(--line)}
  /* The result and its source close each row as plain lines rather than two more boxes. */
  .mk-bench tbody tr td:is(:nth-child(4),:nth-child(5)){padding:0;margin-block-start:10px;border:0}
  .mk-bench tbody tr td:is(:nth-child(4),:nth-child(5))::before{display:none}
  .mk-bench tbody tr td:nth-child(5){margin-block-start:6px;font-size:var(--fs-13)}
  .mk-bench td:nth-child(5) .mk-block{display:inline;margin-inline-start:8px}
}
@media (max-width:640px){
  /* The tally as a two-by-two ruled grid, so wrapped items never leave a stray divider. */
  .mk-bench-tally{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-bench-tally li,.mk-bench-tally li+li{margin:0;padding:10px 0;border:0;min-inline-size:0}
  .mk-bench-tally li:nth-child(even){padding-inline-start:12px;border-inline-start:1px solid var(--line)}
  .mk-bench-tally li:nth-child(n+3){border-block-start:1px solid var(--line)}
  .mk-bench-tally b{margin-inline-start:auto;padding-inline-end:12px;font-size:var(--fs-18)}
}
@media (max-width:640px){
  .mk-hero .mk-actions .site-button{flex:1 1 100%}
  .mk-cards{grid-template-columns:minmax(0,1fr)}
  .mk-steps{grid-template-columns:minmax(0,1fr)}
  .mk-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--s-3);padding-block:var(--s-4)}
  .mk-steps li::before{grid-row:1 / span 2;margin:0}
  .mk-steps strong{align-self:center}
  .mk-dl.is-wide,.mk-system{grid-template-columns:minmax(0,1fr)}
  .mk-defs>div{grid-template-columns:minmax(0,1fr);gap:6px}
  .mk-banner{padding:16px 18px}
  .mk-kpi{padding:14px}
  .mk-cta .mk-actions .site-button{flex:1 1 100%}
}
@media (max-width:420px){
  .mk-kpis{grid-template-columns:minmax(0,1fr)}
  .mk-dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
}