/* ──────────────────────────────────────────────────────────────────────
   YaiGlobal — shared stylesheet for content pages
   Tokens mirror index.html. Layout is document-oriented rather than
   marketing-oriented: one readable column, data tables, source notes.
   ────────────────────────────────────────────────────────────────────── */

:root{
  color-scheme: light dark;
  --paper:#FBF3FC; --paper-2:#F3DEF7; --surface:#FFFFFF;
  --ink:#25142C; --ink-soft:#6F6373; --ink-mute:#9E93A3;
  --rule:#ECE3EE; --rule-strong:#DFCCE4;
  --accent:#A80FC9; --accent-ink:#A80FC9; --accent-deep:#7C0C97;
  --cta:#A80FC9; --cta-hover:#7C0C97;
  --cta-glow:0 10px 24px -10px rgba(168,15,201,.7);
  --cream:#F3DEF7;
  --bar-hi-grad:linear-gradient(90deg,#7C0C97,#A80FC9);
  --band:#0A0A0A; --band-2:#111113; --band-fg:#EDEDED;
  --band-mute:#A1A1A6; --band-rule:rgba(255,255,255,.12);
  --ok:#1B7F4B; --warn:#9A6B00;
  --shadow:0 1px 2px rgba(23,18,12,.05), 0 12px 28px -18px rgba(23,18,12,.35);
  --measure:68ch;
  --gutter:clamp(1.15rem, 4vw, 3.5rem);
  --page:1220px;
  --f-display:"Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-arabic:"IBM Plex Sans Arabic","Inter",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A0A0A; --paper-2:#111113; --surface:#0D0D0F;
    --ink:#EDEDED; --ink-soft:#A1A1A6; --ink-mute:#6E6E76;
    --rule:rgba(255,255,255,.12); --rule-strong:rgba(255,255,255,.22);
    --accent:#C93BE0; --accent-ink:#C93BE0; --accent-deep:#9A1FB8;
    --cta:#C93BE0; --cta-hover:#9A1FB8;
    --cta-glow:0 10px 24px -10px rgba(201,59,224,.6);
    --cream:rgba(201,59,224,.14);
    --bar-hi-grad:linear-gradient(90deg,#9A1FB8,#C93BE0);
    --ok:#4ECB8B; --warn:#E0B341;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --paper:#0A0A0A; --paper-2:#111113; --surface:#0D0D0F;
  --ink:#EDEDED; --ink-soft:#A1A1A6; --ink-mute:#6E6E76;
  --rule:rgba(255,255,255,.12); --rule-strong:rgba(255,255,255,.22);
  --accent:#C93BE0; --accent-ink:#C93BE0; --accent-deep:#9A1FB8;
  --cta:#C93BE0; --cta-hover:#9A1FB8; --cream:rgba(201,59,224,.14);
  --bar-hi-grad:linear-gradient(90deg,#9A1FB8,#C93BE0);
  --ok:#4ECB8B; --warn:#E0B341;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
a{color:var(--accent-ink);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:.6rem;z-index:99;background:var(--surface);
  padding:.6rem 1rem;border:1px solid var(--rule-strong);border-radius:8px}

/* ── Header ───────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;gap:1.25rem;min-height:62px}
.mark{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-display);
  font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none;font-size:1.02rem}
.mark small{font-weight:600;font-size:.72rem;color:var(--ink-mute);letter-spacing:.06em;
  text-transform:uppercase;padding-left:.5rem;border-left:1px solid var(--rule-strong)}
.logo{width:22px;height:22px;border-radius:6px;background:var(--bar-hi-grad)}
.nav{display:flex;gap:1.15rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:.93rem;font-weight:500;
  white-space:nowrap;padding-block:.35rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent)}
/* ── Products dropdown ────────────────────────────────────────────────
   CSS only. :hover serves pointers, :focus-within serves keyboards and
   touch (tapping the button focuses it). The content pages ship no
   JavaScript at all and this keeps it that way. */
.drop{position:relative;display:flex;align-items:center}
/* Matches .nav a box for box — same size, weight, line-height and vertical
   padding — so the trigger sits on the same line as the links beside it. A
   button inherits none of that from the UA stylesheet. */
.drop-t{font:inherit;font-size:.93rem;font-weight:500;line-height:inherit;white-space:nowrap;
  color:var(--ink-soft);background:transparent;border:0;padding:.35rem 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.34rem}
.drop-t::after{content:"";width:.4em;height:.4em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-.14em) rotate(45deg);
  transition:transform .2s var(--ease)}
.drop:hover .drop-t,.drop:focus-within .drop-t{color:var(--ink)}
.drop:hover .drop-t::after,.drop:focus-within .drop-t::after{transform:translateY(.06em) rotate(225deg)}
.drop-m{max-width:calc(100vw - 1.6rem);position:absolute;top:100%;inset-inline-start:50%;transform:translateX(-50%);
  margin-top:.55rem;min-width:254px;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;box-shadow:var(--shadow);padding:.4rem;display:grid;gap:.1rem;z-index:60;
  opacity:0;visibility:hidden;translate:0 -4px;
  transition:opacity .16s var(--ease),translate .16s var(--ease),visibility .16s}
/* inset-inline-start flips to the right edge in RTL, but translateX is
   physical and still pulls left — which pushed the panel half its own
   width away from the trigger. Mirror the transform to re-centre it. */
[dir="rtl"] .drop-m{transform:translateX(50%)}
/* bridges the gap below the trigger so hover is not lost crossing it */
.drop-m::before{content:"";position:absolute;top:-.6rem;left:0;right:0;height:.6rem}
.drop:hover .drop-m,.drop:focus-within .drop-m{opacity:1;visibility:visible;translate:0 0}
.drop-m a{display:block;padding:.55rem .65rem;border-radius:8px;text-decoration:none}
.drop-m a::after{display:none}
.drop-m a:hover,.drop-m a:focus-visible{background:var(--cream)}
.drop-m .dt{display:block;font-family:var(--f-display);font-weight:700;font-size:.93rem;color:var(--ink)}
.drop-m .dd{display:block;font-size:.79rem;color:var(--ink-soft);margin-top:.1rem;line-height:1.35}
@media (max-width:820px){
  .drop-m{inset-inline-start:0;transform:none;min-width:220px}
}

@media (max-width:820px){.hdr-in{min-height:56px;flex-wrap:wrap;padding-block:.5rem}
  .nav{margin-left:0;width:100%;gap:.9rem;font-size:.88rem}}

/* ── Article ──────────────────────────────────────────────────────── */
main{display:block}
.crumb{font-size:.86rem;color:var(--ink-mute);padding-top:1.6rem}
.crumb a{color:var(--ink-mute);text-decoration:none}
.crumb a:hover{color:var(--accent-ink);text-decoration:underline}
.art{padding-block:1rem 4rem}
.art > *{max-width:var(--measure)}
.art > .full{max-width:none}
h1{font-family:var(--f-display);font-weight:800;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(2.05rem,1.3rem + 2.6vw,3.15rem);margin:.6rem 0 .35rem}
.dek{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);color:var(--ink-soft);line-height:1.5;margin:0 0 1.6rem}
h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.018em;line-height:1.2;
  font-size:clamp(1.42rem,1.15rem + .8vw,1.95rem);margin:2.9rem 0 .8rem;scroll-margin-top:5rem}
h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.012em;
  font-size:1.16rem;margin:2rem 0 .55rem;scroll-margin-top:5rem}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.15rem;padding-left:1.3rem}
li{margin-bottom:.45rem}
strong{font-weight:600;color:var(--ink)}
code{font-family:var(--f-mono);font-size:.88em;background:var(--cream);
  padding:.12em .38em;border-radius:4px}
hr{border:0;border-top:1px solid var(--rule);margin:2.8rem 0}
.lede{font-size:1.12rem;line-height:1.6}

/* ── Data tables ──────────────────────────────────────────────────── */
.tbl-wrap{max-width:none;overflow-x:auto;margin:1.4rem 0 1.2rem;
  border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:520px}
caption{text-align:left;font-size:.86rem;color:var(--ink-mute);padding:.85rem 1rem .1rem;caption-side:top}
th,td{padding:.62rem .9rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:var(--f-display);font-weight:700;font-size:.82rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--paper-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr.win td{background:color-mix(in srgb,var(--cream) 55%,transparent)}
.best{color:var(--ok);font-weight:600}
.trail{color:var(--warn);font-weight:600}

/* ── Callouts ─────────────────────────────────────────────────────── */
.note{border-left:3px solid var(--accent);background:var(--cream);
  padding:1rem 1.15rem;border-radius:0 10px 10px 0;margin:1.5rem 0;font-size:.97rem}
.note p:last-child{margin-bottom:0}
.note.plain{border-left-color:var(--rule-strong);background:var(--paper-2)}
.scope{font-size:.88rem;color:var(--ink-soft);border-top:1px solid var(--rule);
  padding-top:.8rem;margin-top:1.6rem}

/* ── Key figures ──────────────────────────────────────────────────── */
.figs{max-width:none;display:grid;gap:.9rem;margin:1.8rem 0 2rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fig{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:1.05rem 1.1rem;box-shadow:var(--shadow)}
.fig .v{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;
  font-size:1.95rem;line-height:1;color:var(--ink)}
.fig .k{font-size:.82rem;color:var(--ink-soft);margin-top:.4rem;line-height:1.35}
.fig .s{font-size:.76rem;color:var(--ink-mute);margin-top:.45rem;line-height:1.35}

/* ── Q&A blocks (quotable units for answer engines) ───────────────── */
.qa{border-top:1px solid var(--rule);padding-top:1.3rem;margin-top:1.6rem}
.qa h3{margin-top:0}
.qa .ans{font-size:1.03rem}

/* ── CTA ──────────────────────────────────────────────────────────── */
.cta-box{max-width:none;background:var(--band);color:var(--band-fg);border-radius:16px;
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);margin:3rem 0 1rem}
.cta-box h2{margin-top:0;color:var(--band-fg)}
.cta-box p{color:var(--band-mute);max-width:60ch}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--cta);color:#fff;
  font-weight:600;font-size:.97rem;padding:.72rem 1.3rem;border-radius:10px;
  text-decoration:none;box-shadow:var(--cta-glow);transition:background .18s var(--ease)}
.btn:hover{background:var(--cta-hover);color:#fff}
.btn-ghost{background:transparent;color:var(--band-fg);box-shadow:none;
  border:1px solid var(--band-rule)}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--band-fg)}

/* ── Product pages ────────────────────────────────────────────────────
   The evidence pages are one reading column. A product page needs a card
   grid and full-width screenshots, so these three opt out of .measure. */
.feats{max-width:none;display:grid;gap:.9rem;margin:1.7rem 0 2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.feat{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:1.05rem 1.1rem;box-shadow:var(--shadow)}
.feat h3,.feat h4{margin:0 0 .3rem;font-size:1rem;font-family:var(--f-display);font-weight:700}
.feat p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.45}
/* .tight — a compact row that keeps a short service list on one line.
   The wrap is 1220px less two gutters, so five 212px columns fit. */
.feats.tight{grid-template-columns:repeat(5,1fr);gap:.7rem}
.feats.tight .feat{padding:.85rem .9rem}
.feats.tight .feat h3,.feats.tight .feat h4{font-size:.92rem;margin-bottom:.25rem}
.feats.tight .feat p{font-size:.81rem;line-height:1.4}
@media (max-width:1020px){.feats.tight{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.feats.tight{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.feats.tight{grid-template-columns:1fr}}
.shot{max-width:1120px;margin:1.4rem 0 2.4rem}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);
  border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.hl{color:var(--accent-ink)}
.shot figcaption{font-size:.85rem;color:var(--ink-mute);margin-top:.75rem;line-height:1.45}
.vid{max-width:880px;margin:1.5rem 0 2.2rem}
.vid video{display:block;width:100%;height:auto;background:#000;object-fit:contain;
  /* matches the poster so the box does not jump before metadata loads */
  aspect-ratio:880/451;
  border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow)}
.acts{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:1.5rem 0 0}
.btn-line{background:transparent;color:var(--accent-ink);box-shadow:none;
  border:1px solid var(--rule-strong)}
.btn-line:hover{background:var(--cream);color:var(--accent-deep);border-color:var(--accent)}

/* ── Related links ────────────────────────────────────────────────── */
.rel{max-width:none;display:grid;gap:.8rem;margin:2.5rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rel a{display:block;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;padding:.95rem 1.05rem;text-decoration:none;color:var(--ink);
  transition:border-color .18s var(--ease)}
.rel a:hover{border-color:var(--accent)}
.rel .t{font-family:var(--f-display);font-weight:700;font-size:.99rem;margin-bottom:.2rem}
.rel .d{font-size:.86rem;color:var(--ink-soft);line-height:1.4}

/* ── Footer ───────────────────────────────────────────────────────── */
.ft{background:var(--band);color:var(--band-mute);margin-top:4rem;
  padding:3rem 0 1.5rem;font-size:.92rem}
.ft-in{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ft h4{font-family:var(--f-display);color:var(--band-fg);font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 .7rem}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:.4rem}
.ft a{color:var(--band-mute);text-decoration:none}
.ft a:hover{color:var(--band-fg);text-decoration:underline}
.ft .mark{color:var(--band-fg)}
.ft .blurb{max-width:34ch;margin:.7rem 0 0;line-height:1.5}
.ft-btm{border-top:1px solid var(--band-rule);margin-top:2.2rem;padding-top:1.2rem;
  font-size:.85rem;color:var(--band-mute);display:flex;gap:1rem;flex-wrap:wrap}

[lang="ar"]{font-family:var(--f-arabic)}