/* Jisr landing page. No web fonts, no scripts: every request stays on this host (CSP in
   infra/caddy/Caddyfile). Logical properties (margin-inline, text-align: start) make the same
   rules work for the English (ltr) and Arabic (rtl) pages. */

:root {
  /* The app's identity (ADR-0066, the Vivid reference): the same values as its design tokens. */
  --brand: #6a27d8;
  --brand-ink: #ffffff;
  --ink: #1f1f23;
  --muted: #646369;
  --surface: #ffffff;
  --panel: #f0f0ee;
  --line: #e4e3e8;
  --note: #fff6db;
  --note-line: #e8c65a;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #bfa2fa;
    --brand-ink: #24095a;
    --ink: #eceaf1;
    --muted: #aba8b5;
    --surface: #131217;
    --panel: #1f1e26;
    --line: #34323c;
    --note: #2e2a1a;
    --note-line: #8a7430;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "IBM Plex Sans Arabic",
    "Noto Sans Arabic", Tahoma, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
}

/* Arabic first in the Arabic pages; still no downloads, only fonts already on the device. */
html:lang(ar) {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI",
    Tahoma, system-ui, sans-serif;
  line-height: 1.8;
}

body {
  margin: 0;
}

a {
  color: var(--brand);
}

.wrap {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.site-header {
  border-block-end: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

.brand img {
  inline-size: 2rem;
  block-size: 2rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.site-nav a {
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
}

.hero {
  padding-block: 3.5rem 2.5rem;
}

.hero h1 {
  margin-block: 0 1rem;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
}

.lead {
  max-width: 44rem;
  margin: 0;
  font-size: 1.15rem;
  color: var(--muted);
}

.status {
  display: inline-block;
  margin-block-start: 1.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 0.95rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  padding-block: 1rem 2.5rem;
  margin: 0;
  list-style: none;
  padding-inline: 0;
}

.features li {
  padding: 1.25rem;
  border-radius: 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
}

.features h2 {
  margin-block: 0 0.4rem;
  font-size: 1.1rem;
}

.features p {
  margin: 0;
  color: var(--muted);
}

.promise {
  padding-block: 1.5rem 2.5rem;
}

.promise ul {
  padding-inline-start: 1.25rem;
}

.contact {
  padding-block: 1.5rem 3rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border-radius: 0.6rem;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  text-decoration: none;
}

.doc {
  padding-block: 2rem 3rem;
}

.doc h1 {
  margin-block-start: 0;
  line-height: 1.25;
}

.doc h2 {
  margin-block-start: 2rem;
  font-size: 1.25rem;
}

.note {
  padding: 0.9rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--note);
  border: 1px solid var(--note-line);
}

.site-footer {
  border-block-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.25rem;
}

.pending {
  color: var(--muted);
  font-size: 0.9em;
}

/* Mixed-script fragments (an Arabic name in English text and the reverse) keep their own order. */
bdi {
  unicode-bidi: isolate;
}