/* Visus terms, privacy and cookies: the landing page's look (white, navy, royal
   blue from the logo), set for long reading. */
@font-face { font-family: "Archivo"; src: url(/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url(/fonts/vazirmatn-ar.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
:root {
  --wall: #FFFFFF;
  --card: #FFFFFF;
  --ink: #0A1A33;
  --ink-2: #38465C;
  --muted: #56637A;
  --rule: #DDE4EF;
  --brand-ink: #061A3A;
  --brand: #1F63D6;
  --brand-deep: #1A56C4;
  --panel: #F2F5FA;
  --hairline: #DDE4EF;
  --sans: "Archivo", "Vazirmatn", "Helvetica Neue", Arial, sans-serif;
  --ar: "Vazirmatn", "Archivo", Tahoma, sans-serif;
  --ar-display: "Vazirmatn", "Archivo", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--wall); }
body {
  font-family: var(--sans); background: var(--wall); color: var(--ink);
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-deep); text-underline-offset: 3px; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 clamp(16px, 4vw, 40px); height: 64px;
  background: rgba(255,255,255,.94); border-bottom: 1px solid var(--rule); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font: 700 1.15rem/1 var(--sans); letter-spacing: -.02em; }
.brand img { height: 32px; width: auto; }
.brand i { display: none; }
.switch { display: flex; gap: .35rem; }
.switch button {
  font: 600 .85rem var(--sans); color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid #CDD3DB; border-radius: 8px; padding: .45rem .8rem;
}
.switch button[lang="ar"] { font-family: var(--ar); }
.switch button[aria-pressed="true"] { color: #fff; background: var(--brand); border-color: var(--brand); }

main { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) clamp(16px, 4vw, 24px) 3rem; }
article + article { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--rule); }
/* With the script running, one language at a time; without it, both. */
body[data-show="en"] article#ar, body[data-show="ar"] article#en { display: none; }
body[data-show="en"] article + article, body[data-show="ar"] article + article { margin-top: 0; padding-top: 0; border-top: 0; }
article[dir="rtl"] { font-family: var(--ar); line-height: 1.9; }

h1 { font: 650 clamp(2.1rem, 5vw, 3rem)/1.08 var(--sans); letter-spacing: -.03em; }
article[dir="rtl"] h1 { font: 700 clamp(2.1rem, 5vw, 3rem)/1.35 var(--ar); letter-spacing: 0; }
.meta { color: var(--muted); font-size: .92rem; margin: .8rem 0 2rem; }
.lead { font-size: 1.08rem; padding: 1.1rem 1.3rem; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; }
.lead a { color: var(--brand); }
h2 { font: 650 1.3rem/1.3 var(--sans); letter-spacing: -.015em; margin: 2.4rem 0 .7rem; }
article[dir="rtl"] h2 { font: 800 1.25rem/1.5 var(--ar); }
p + p { margin-top: .8rem; }
ul { padding-inline-start: 1.3rem; display: grid; gap: .5rem; }
li::marker { color: #1F63D6; }
strong { font-weight: 700; }

.foot {
  max-width: 760px; margin: 0 auto; padding: 1.5rem clamp(16px, 4vw, 24px) 2.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; color: var(--muted); font-size: .88rem;
}
.foot a { color: var(--muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink); } }

@media print {
  html, body { background: #fff; color: #000; }
  .top, .foot { display: none; }
  .lead { background: none; box-shadow: none; }
  a { color: #000; }
}