/* مذكور — design notes.
   Reference points: Linear, Stripe, Attio. The discipline is subtraction.
   - One accent (deep teal), used for emphasis and never for decoration.
   - Hairline 1px borders instead of shadows. Shadows only on overlays.
   - Type does the work: size and weight for hierarchy, not colour or boxes.
   - Tabular numerals everywhere a number sits in a column.
   - No gradients, no emoji, no rounded-card soup. */

:root{
  --paper:#fbfaf8;
  --surface:#ffffff;
  --raised:#f4f3ef;
  --ink:#17191c;
  --ink-2:#4a4f57;
  --ink-3:#7b8189;
  --line:#e3e1db;
  --line-strong:#cfccc4;
  --accent:#15514a;          /* deep teal — the only accent */
  --accent-soft:#e8f0ee;
  --contrast:#8a5a2b;        /* bronze — second data series only */
  --contrast-soft:#f6eee4;
  --bad:#8c2f22;
  --bad-soft:#f8ece9;
  --good:#2c5e3f;
  --r:6px;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0f1113; --surface:#16181b; --raised:#1c1f23; --ink:#eceae5;
  --ink-2:#a8adb4; --ink-3:#767c84; --line:#282c31; --line-strong:#3a3f46;
  --accent:#5fbfae; --accent-soft:#13302c; --contrast:#c8935c; --contrast-soft:#2e2317;
  --bad:#e08375; --bad-soft:#33201c; --good:#7bb894;}}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Inter","Segoe UI","Noto Sans Arabic",-apple-system,system-ui,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-0.018em;line-height:1.25}
h1{font-size:1.75rem}h2{font-size:1.2rem}h3{font-size:1rem}h4{font-size:.875rem}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- chrome ---- */
.topbar{
  display:flex;align-items:center;gap:1.5rem;
  padding:0 1.5rem;height:56px;background:var(--surface);
  border-block-end:1px solid var(--line);position:sticky;inset-block-start:0;z-index:20;
}
.mark{display:flex;align-items:baseline;gap:.6rem;font-weight:600;letter-spacing:-0.02em}
.mark .name{font-size:1.05rem}
.mark .tagline{font-size:.75rem;color:var(--ink-3);font-weight:400;letter-spacing:0}
.topnav{display:flex;gap:.15rem;margin-inline-start:auto}
.topnav button{
  font:inherit;font-size:.87rem;border:0;background:none;color:var(--ink-2);
  padding:.35rem .7rem;border-radius:var(--r);cursor:pointer;
}
.topnav button:hover{background:var(--raised);color:var(--ink)}
.topnav button[aria-current="page"]{color:var(--ink);font-weight:550;background:var(--raised)}
.langtoggle{
  border:1px solid var(--line);border-radius:var(--r);padding:.28rem .6rem;
  font:inherit;font-size:.8rem;background:var(--surface);color:var(--ink-2);cursor:pointer;
}
.langtoggle:hover{border-color:var(--line-strong);color:var(--ink)}

main{max-width:1080px;margin:0 auto;padding:2rem 1.5rem 5rem}
.view[hidden]{display:none}
.stack{display:flex;flex-direction:column;gap:1.75rem}

/* ---- notice ---- */
.notice{
  display:flex;gap:.7rem;align-items:flex-start;
  border:1px solid var(--line);border-inline-start:2px solid var(--ink-3);
  background:var(--surface);padding:.7rem .9rem;border-radius:var(--r);
  font-size:.85rem;color:var(--ink-2);
}
.notice strong{color:var(--ink);font-weight:600}

/* ---- hero ---- */
.hero{padding:2.5rem 0 .5rem;max-width:38rem}
.hero .eyebrow{
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-block-end:.9rem;
}
.hero h1{font-size:2.2rem;line-height:1.18;margin-block-end:.9rem}
.hero p{color:var(--ink-2);font-size:1.02rem;max-width:34rem}
@media(max-width:640px){.hero h1{font-size:1.7rem}}

/* ---- panel ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.panel > header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-block-end:1px solid var(--line);flex-wrap:wrap;
}
.panel > header h2{font-size:.95rem}
.panel > header .sub{font-size:.8rem;color:var(--ink-3)}
.panel .body{padding:1.1rem}
.panel .body.flush{padding:0}

/* ---- forms ---- */
.grid2{display:grid;gap:.9rem}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}
  .grid2 .span{grid-column:1/-1}}
label{display:block;font-size:.78rem;color:var(--ink-2);margin-block-end:.3rem;font-weight:500}
input,select{
  width:100%;padding:.5rem .65rem;font:inherit;font-size:.9rem;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r);min-height:38px;
}
input::placeholder{color:var(--ink-3)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn{
  font:inherit;font-size:.88rem;font-weight:550;cursor:pointer;
  padding:.5rem 1rem;min-height:38px;border-radius:var(--r);
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
}
.btn:hover{opacity:.88}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--raised);opacity:1}
.btn.quiet{background:transparent;color:var(--ink-3);border-color:transparent}
.btn.quiet:hover{color:var(--ink);background:var(--raised)}
.btnrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---- the headline finding ---- */
.finding{display:grid;gap:1.5rem}
@media(min-width:760px){.finding{grid-template-columns:auto 1fr;align-items:center}}
.bigscore{text-align:center;min-width:9rem}
.bigscore .value{font-size:3.4rem;font-weight:600;letter-spacing:-0.04em;line-height:1}
.bigscore .of{font-size:.95rem;color:var(--ink-3);font-weight:400}
.bigscore .caption{font-size:.75rem;color:var(--ink-3);margin-block-start:.35rem;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}

.gapbars{display:flex;flex-direction:column;gap:.85rem}
.gapbar .top{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.85rem;margin-block-end:.3rem}
.gapbar .top .label{color:var(--ink-2)}
.gapbar .top .val{font-weight:600}
.gapbar .track{height:8px;background:var(--raised);border-radius:2px;overflow:hidden}
.gapbar .fill{height:100%;border-radius:2px}
.gapbar .fill.ar{background:var(--accent)}
.gapbar .fill.en{background:var(--contrast)}
.gapbar .meta{font-size:.76rem;color:var(--ink-3);margin-block-start:.25rem}
.verdict{margin-block-start:1rem;padding-block-start:1rem;border-block-start:1px solid var(--line);
  font-size:.9rem;color:var(--ink-2);line-height:1.65}
.verdict strong{color:var(--ink)}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:.87rem}
thead th{
  text-align:start;font-weight:600;font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);
  padding:.6rem 1.1rem;border-block-end:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:.62rem 1.1rem;border-block-end:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-block-end:0}
tbody tr:hover{background:var(--raised)}
th.right,td.right{text-align:end}
.tablewrap{overflow-x:auto}
.you{font-weight:600}
.muted{color:var(--ink-3)}
.small{font-size:.8rem}

.rank{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.5rem;height:1.4rem;padding:0 .35rem;border-radius:3px;
  font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.rank.top{background:var(--accent-soft);color:var(--accent)}
.rank.mid{background:var(--raised);color:var(--ink-2)}
.rank.absent{background:var(--bad-soft);color:var(--bad)}
.tag{
  display:inline-block;padding:.1rem .4rem;border:1px solid var(--line);
  border-radius:3px;font-size:.72rem;color:var(--ink-3);
}
.tag.ar{border-color:var(--accent);color:var(--accent)}
.tag.en{border-color:var(--contrast);color:var(--contrast)}

/* ---- actions ---- */
.action{padding:1rem 1.1rem;border-block-end:1px solid var(--line);display:flex;gap:.9rem}
.action:last-child{border-block-end:0}
.action .idx{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--ink-3);
  font-weight:600;min-width:1.2rem;padding-block-start:.1rem}
.action h4{margin-block-end:.3rem}
.action p{font-size:.87rem;color:var(--ink-2);line-height:1.6}
.prio{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);margin-inline-start:.5rem}
.prio.high{color:var(--bad)}

/* ---- pricing ---- */
.plans{display:grid;gap:1rem}
@media(min-width:820px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.plan.featured{border-color:var(--ink)}
.plan .pname{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.plan .price{font-size:1.9rem;font-weight:600;letter-spacing:-0.03em;line-height:1}
.plan .price small{font-size:.8rem;font-weight:400;color:var(--ink-3);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem}
.plan li{font-size:.84rem;color:var(--ink-2);padding-inline-start:.9rem;position:relative}
.plan li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  width:4px;height:4px;border-radius:50%;background:var(--line-strong)}

.econ-note{font-size:.82rem;color:var(--ink-2);line-height:1.7}
.econ-note code{font-family:var(--mono);font-size:.78rem;background:var(--raised);
  padding:.05rem .3rem;border-radius:3px}

.empty{text-align:center;padding:3rem 1rem;color:var(--ink-3);font-size:.9rem}
.toast{position:fixed;inset-block-end:1.25rem;inset-inline-start:1.25rem;
  background:var(--ink);color:var(--paper);padding:.6rem .95rem;border-radius:var(--r);
  font-size:.86rem;z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.toast.err{background:var(--bad)}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid currentColor;
  border-inline-end-color:transparent;border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-2px;margin-inline-end:.45rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* identity slot in the top bar */
.authslot { display:flex; align-items:center; gap:.6rem; margin-inline-start:auto; }
.btn.small { padding:.35rem .8rem; font-size:.85rem; }
a.btn { text-decoration:none; display:inline-block; }