/* Zahif web tokens (landing + app). Colours follow the owner's colour system v3 (brand navy #0f3460,
   ink #12161c, muted #54606f, line #d8dee7) with a derived dark theme. */
:root{
  --font:'Noto Naskh Arabic','Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono",ui-monospace,monospace;
  --paper:#ffffff; --panel:#f6f8fb; --panel2:#eef2f7; --ink:#12161c; --muted:#54606f; --line:#d8dee7;
  --brand:#0f3460; --brand-ink:#ffffff; --accent:#0b4f8a; --link:#0b4f8a;
  --ok:#1d854a; --warn:#8f5d0a; --bad:#a93226; --code-bg:#16213e; --code-ink:#e3ebf5;
  --shadow:0 1px 2px rgba(18,22,28,.06),0 6px 24px rgba(18,22,28,.06);
  --radius:14px; --gutter:max(16px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e131a; --panel:#151c26; --panel2:#1b2431; --ink:#e6edf5; --muted:#a3b0c0; --line:#2a3646;
    --brand:#8fb8ea; --brand-ink:#0b1626; --accent:#8fb8ea; --link:#9cc4f2;
    --ok:#5fd394; --warn:#e9b45a; --bad:#f08a7e; --code-bg:#0a0f16; --code-ink:#dbe6f3;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0e131a; --panel:#151c26; --panel2:#1b2431; --ink:#e6edf5; --muted:#a3b0c0; --line:#2a3646;
  --brand:#8fb8ea; --brand-ink:#0b1626; --accent:#8fb8ea; --link:#9cc4f2;
  --ok:#5fd394; --warn:#e9b45a; --bad:#f08a7e; --code-bg:#0a0f16; --code-ink:#dbe6f3;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
pre:empty{display:none}
html{font-size:clamp(15px,0.3vw + 11px,22px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.75;overflow-x:hidden}
a{color:var(--link)}
img,svg{max-width:100%}
code,kbd,pre,.mono{font-family:var(--mono)}
code{font-size:.9em;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:0 .3em;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
pre{direction:ltr;text-align:left;background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:12px 14px;overflow:auto;font-size:.85em;line-height:1.6;margin:0;max-width:100%}
pre code{background:none;border:0;padding:0;color:inherit}
h1,h2,h3{line-height:1.3;text-wrap:balance;margin:0}
p{margin:0}
.wrap{width:100%;max-width:1800px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:16px;top:8px;z-index:9;background:var(--paper);padding:6px 10px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* language switching: both languages are rendered, the html[lang] decides which is shown */
html[lang="ar"] [data-l="en"],html[lang="en"] [data-l="ar"]{display:none!important}
[data-l="en"]{font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:58px;flex-wrap:wrap;padding-block:6px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--brand);font-weight:bold;font-size:1.2em;white-space:nowrap}
.logo svg,.logo img{width:30px;height:30px;flex:none}
.nav{display:flex;gap:4px 14px;flex-wrap:wrap;align-items:center;margin-inline-start:auto}
.nav a{text-decoration:none;color:var(--ink);padding:4px 2px}
.nav a:hover{color:var(--accent)}
.tool{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:99px;padding:3px 12px;font:inherit;font-size:.9em;cursor:pointer;min-height:34px}
.tool:hover{border-color:var(--accent)}

/* buttons, cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;padding:8px 18px;font:inherit;font-weight:bold;text-decoration:none;border:1px solid transparent;cursor:pointer;min-height:42px}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn:hover{filter:brightness(1.08)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,1.4vw,26px);min-width:0}
.grid{display:grid;gap:clamp(12px,1.2vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.muted{color:var(--muted)}
.pill{display:inline-block;border-radius:99px;padding:0 10px;font-size:.82em;font-weight:bold;background:var(--panel2);border:1px solid var(--line);color:var(--brand)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted);margin-inline-end:6px;vertical-align:middle}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}.dot.warn{background:var(--warn)}

/* landing */
.hero{padding-block:clamp(32px,6vw,110px) clamp(24px,4vw,70px)}
.hero h1{font-size:clamp(32px,4.6vw,92px);color:var(--brand)}
.hero .lead{font-size:clamp(17px,1.5vw,30px);max-width:60ch;margin-top:14px;color:var(--ink)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.pillars{margin-top:clamp(20px,3vw,48px)}
.pillars h3{color:var(--brand);font-size:1.15em;margin-bottom:6px}
section.block{padding-block:clamp(24px,3.5vw,64px);border-top:1px solid var(--line)}
section.block > .wrap > h2{font-size:clamp(22px,2.2vw,44px);color:var(--brand);margin-bottom:clamp(12px,1.4vw,24px)}
.vs{width:100%;border-collapse:collapse;table-layout:fixed}
.vs th,.vs td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:start;vertical-align:top;overflow-wrap:anywhere}
.vs th{color:var(--brand)}
.tw{overflow-x:auto;max-width:100%}
.status{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
.plan .price{font-size:clamp(22px,2vw,40px);font-weight:bold;color:var(--brand)}
.plan.hl{border-color:var(--brand);box-shadow:var(--shadow)}
.plan ul{margin:8px 0 0;padding-inline-start:1.2em}
.copyrow{display:flex;gap:8px;align-items:stretch}
.copyrow pre{flex:1 1 auto;min-width:0}

/* footer: two centred lines (owner rule) */
footer.site{margin-top:clamp(30px,4vw,64px);padding:18px var(--gutter) 28px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.92em}
footer.site .line{display:block;line-height:1.8}
footer.site .line b{color:var(--brand)}
footer.site .build{font-family:var(--mono);font-size:.78em;opacity:.8;direction:ltr;unicode-bidi:isolate}

/* runtime capability chips (from GET /health) */
.caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cap{display:inline-block;border-radius:99px;padding:1px 10px;font-family:var(--mono);font-size:.8em;border:1px solid var(--line);direction:ltr}
.cap.on{color:var(--ok);background:var(--panel)}
.cap.off{color:var(--muted);background:var(--panel2);text-decoration:line-through;text-decoration-thickness:1px}