/* Tarjum website v2: one look for every page. Colours come from the logo. Motion follows Hairline: 700ms on (.32,.72,0,1), a 0.9px stroke. */
:root {
  --navy:#024872; --ink:#06283D; --deep:#052238; --teal:#0A7A68; --logo-teal:#0E9A83;
  --tint:#E4F0F6; --tint2:#DCEFEA; --sky:#B9E6F8; --line:#D3DFE6; --page:#F6F8F9;
  --text:#16303F; --muted:#4A6170; --err:#FBE4D3; --errline:#A84B08; --ph:#A84B08;
  --amber:#FFE2A0; --lilac:#D9D3FA; --mint:#C4EEDF; --rose:#F8D5CC; --ice:#CDEBFA;
  --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.23,1,.32,1);
}
body { margin:0; background:#fff; }
a { color:var(--navy); text-decoration:none; }
a:hover { color:var(--ink); text-decoration:underline; }

body.root { font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif; color:var(--text); font-size:17px; line-height:1.75; background:#fff;
  --hairline-plate:#fff; --hairline-hi:#024872; --hairline-edge:#7E9BAB; --hairline-mid:#AFC3CE; --hairline-lo:#D5E1E7; --hairline-stroke:.9; }
.tint,.on-tint { --hairline-plate:#E4F0F6; --hairline-edge:#6B8EA1; --hairline-mid:#9DB9C7; --hairline-lo:#C4D8E2; }
.sky { --hairline-plate:#B9E6F8; --hairline-hi:#06283D; --hairline-edge:#4C7F98; --hairline-mid:#7FB0C6; --hairline-lo:#9CCBDF; }
.pagebg { --hairline-plate:#F6F8F9; }
.navy { --hairline-plate:#06283D; --hairline-hi:#7FE3CF; --hairline-edge:#6D94A9; --hairline-mid:#42687E; --hairline-lo:#274C62; }
.on-white { --hairline-plate:#fff; --hairline-hi:#024872; --hairline-edge:#7E9BAB; --hairline-mid:#AFC3CE; --hairline-lo:#D5E1E7; }

.wrap { max-width:1240px; margin:0 auto; padding:0 28px; box-sizing:border-box; width:100%; }
.narrow { max-width:860px; }
h1,h2,h3 { font-weight:300; margin:0; color:var(--ink); text-wrap:balance; }
h1 { font-size:clamp(34px,4.6vw,60px); line-height:1.22; }
h2 { font-size:clamp(28px,3.4vw,44px); line-height:1.25; }
h3 { font-size:24px; line-height:1.35; font-weight:400; }
h1.c { text-align:center; }
p { margin:0; text-wrap:pretty; }
.band { padding:96px 0; }
.tint { background:var(--tint); }
.sky { background:var(--sky); }
.pagebg { background:var(--page); }
.navy { background:var(--ink); color:#E9F2F7; }
.navy h2,.navy h3 { color:#fff; }
.lead { font-size:19px; color:var(--muted); max-width:760px; }
.sky .lead { color:#123C52; }
.navy .lead { color:#C9DBE5; }
.small { font-size:14px; color:var(--muted); }
.navy .small { color:#C9DBE5; }
.sky .small { color:#143F55; }
.stack { display:flex; flex-direction:column; gap:14px; }
.stack-l { display:flex; flex-direction:column; gap:26px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.between { justify-content:space-between; }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr)); gap:48px; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:18px; }
.book { font-family:"Noto Naskh Arabic","Traditional Arabic",serif; }
.en { font-family:"Source Serif 4",Georgia,serif; direction:ltr; text-align:left; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:8px; font:600 16px "IBM Plex Sans Arabic",Tahoma,sans-serif; border:1px solid transparent; cursor:pointer; transition:transform .12s var(--ease-out); }
.btn:active { transform:scale(.98); }
.btn-p { background:var(--navy); color:#fff; } .btn-p:hover { background:var(--ink); color:#fff; text-decoration:none; }
.btn-s { background:#fff; color:var(--navy); border-color:var(--line); } .btn-s:hover { border-color:var(--navy); text-decoration:none; }
.btn-w { background:#fff; color:var(--ink); } .btn-w:hover { background:var(--tint); color:var(--ink); text-decoration:none; }
.btn-g { background:transparent; color:#fff; border-color:#6C8DA1; } .btn-g:hover { color:#fff; border-color:#fff; text-decoration:none; }

/* Nav */
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:12px 28px; border-bottom:1px solid var(--line); background:#fff; position:relative; }
.nav-links { display:flex; gap:6px; flex-wrap:wrap; font-size:16px; align-items:center; }
.nav-links a,.nav-b { color:var(--text); display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 10px; border:0; background:transparent; font:400 16px "IBM Plex Sans Arabic",Tahoma,sans-serif; cursor:pointer; border-radius:6px; }
.nav-b:hover,.nav-links a:hover { background:var(--page); text-decoration:none; }
.mega { position:absolute; inset-inline:28px; top:calc(100% + 1px); z-index:20; background:#fff; border:1px solid var(--line); border-radius:0 0 14px 14px; box-shadow:0 22px 48px rgba(5,34,56,.14); padding:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:8px; animation:rise .25s var(--ease-out) both; }
.mega a { display:flex; gap:12px; padding:10px 12px; border-radius:10px; color:var(--text); align-items:flex-start; }
.mega a:hover { background:var(--page); text-decoration:none; }
.mega b { display:block; font-weight:500; color:var(--ink); }
.mega span.small { display:block; }

/* Pill tabs */
.tabs { display:inline-flex; gap:4px; padding:5px; background:var(--tint); border-radius:999px; flex-wrap:wrap; justify-content:center; }
.tab { border:0; background:transparent; min-height:44px; padding:0 20px; border-radius:999px; font:500 16px "IBM Plex Sans Arabic",Tahoma,sans-serif; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.tab.on { background:#fff; color:var(--navy); font-weight:600; box-shadow:0 1px 3px rgba(5,34,56,.14); }
.pagebg .tabs,.tint .tabs { background:#fff; border:1px solid var(--line); }
.pagebg .tab.on,.tint .tab.on { background:var(--navy); color:#fff; box-shadow:none; }

/* Coloured icon tile, one for each product */
.tile { width:48px; height:48px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); flex:none; background:var(--ice); }
.tile.s { width:38px; height:38px; border-radius:8px; }
.tile.amber { background:var(--amber); } .tile.lilac { background:var(--lilac); } .tile.mint { background:var(--mint); } .tile.rose { background:var(--rose); } .tile.ice { background:var(--ice); } .tile.dark { background:var(--deep); color:#fff; }

/* Cards */
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:8px; }
.bcard { background:var(--tint); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.bcard p { font-size:16px; }
.inner { background:#fff; border-radius:10px; padding:14px; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 12px; border-radius:999px; background:var(--tint); color:var(--navy); font-size:14px; font-weight:500; }
.navy .chip { background:#123F5C; color:#D8E8F0; }
.chip.dark { background:var(--navy); color:#fff; }
.frame { border:1px solid #2C556E; border-radius:14px; padding:26px; }
.frame h3.fh { font-size:34px; font-weight:300; color:#fff; padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid #2C556E; }
.cards5 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:16px; }
.pcard { background:var(--tint); color:var(--text); border-radius:12px; padding:20px 18px 0; display:flex; flex-direction:column; gap:8px; overflow:hidden; --hairline-plate:#fff; --hairline-hi:#024872; --hairline-edge:#7E9BAB; --hairline-mid:#AFC3CE; --hairline-lo:#D5E1E7; }
.pcard h3 { color:var(--ink); font-size:24px; font-weight:300; }
.pcard p { font-size:15px; line-height:1.7; }
.mini { margin-top:auto; background:#fff; border-radius:8px 8px 0 0; padding:12px; min-height:124px; font-size:13px; display:flex; flex-direction:column; gap:6px; }
.mini .r,.r { display:flex; justify-content:space-between; gap:8px; }

/* Hero */
.hero { padding-top:64px; padding-bottom:84px; display:flex; flex-direction:column; gap:22px; align-items:center; }
.hero-card { background:var(--tint); border-radius:20px; padding:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:22px; width:100%; box-sizing:border-box; }
.hero-copy { padding:22px 22px 14px; display:flex; flex-direction:column; gap:14px; }
.hero-copy h2 { font-size:clamp(26px,2.8vw,36px); }
.hero-demo { background:#fff; border-radius:12px; padding:14px; min-height:420px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; --hairline-plate:#fff; }
.float { position:absolute; inset-inline-start:16px; bottom:16px; width:min(280px,62%); background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:0 12px 28px rgba(5,34,56,.12); font-size:13px; line-height:1.6; display:flex; flex-direction:column; gap:4px; animation:rise .7s var(--ease) both; }
.chap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:3px 0; border-bottom:1px solid #EAF0F3; }

/* Logos */
.logos { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:14px; }
.lgroup { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.lgroup .lg { display:flex; flex-wrap:wrap; gap:10px; }
.lgt { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; color:var(--ink); background:#fff; }
.lgt img { width:22px; height:22px; display:block; }
.lgt .w { font-family:"Source Serif 4",Georgia,serif; font-size:15px; }

.pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.pair > div { padding:22px 24px; }
.pair .en { font-size:17px; line-height:1.75; background:#F7FAFB; }
.pair .book { font-size:20px; line-height:2.05; color:#1B2730; }
.col { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.colh { padding:12px 18px; font-weight:600; font-size:15px; background:#EEF3F6; color:var(--text); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.colh.us { background:var(--navy); color:#fff; }
.colb { padding:18px; font-family:"Noto Naskh Arabic",serif; font-size:19px; line-height:2.05; color:#1B2730; }
.pairs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:16px; }
.fn { font-size:.72em; vertical-align:super; line-height:0; }
/* Tables */
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table.t { width:100%; border-collapse:collapse; font-size:16px; background:#fff; }
table.t th,table.t td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:right; font-weight:400; vertical-align:top; }
table.t th { font-weight:600; background:#EEF3F6; }
.wide { min-width:640px; }

/* Stages */
.stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:32px; align-items:start; }
.stages > :last-child { grid-column:span 2; }
.st { display:flex; gap:12px; align-items:center; width:100%; min-height:48px; padding:0 14px; border:0; background:transparent; border-radius:8px; font:400 17px "IBM Plex Sans Arabic",Tahoma,sans-serif; color:#BFD3DF; cursor:pointer; text-align:right; }
.st.on { background:#123F5C; color:#fff; }
.stview { background:#fff; color:var(--text); border-radius:14px; padding:22px 26px; min-height:400px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px; align-items:center; animation:rise .25s var(--ease-out) both; --hairline-plate:#fff; --hairline-hi:#024872; --hairline-edge:#7E9BAB; --hairline-mid:#AFC3CE; --hairline-lo:#D5E1E7; }
.was { color:#5E7380; text-decoration:line-through; text-decoration-color:#A84B08; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Pictures with a source */
.art { margin:0; display:flex; flex-direction:column; gap:8px; }
.art img { width:100%; display:block; border-radius:10px; object-fit:cover; background:#EFE9DC; }
.art figcaption { font-size:13px; line-height:1.55; color:var(--muted); }
.sky .art figcaption { color:#143F55; }
.navy .art figcaption { color:#C9DBE5; }
.shelf-scroll { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); gap:16px; overflow-x:auto; padding-bottom:6px; }
.hcard { background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; color:var(--text); }
.hcard img { width:100%; height:190px; object-fit:cover; display:block; background:#EFE9DC; }
.hcard .b { padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; }
.hcard b { font-weight:500; font-size:18px; color:var(--ink); }
.hcard p { font-size:15px; line-height:1.65; }

/* Book kinds */
.covers { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:16px; }
.cover { display:grid; grid-template-columns:120px minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; color:var(--text); }
.cover:hover { border-color:var(--navy); text-decoration:none; color:var(--text); }
.cover img { width:120px; height:100%; min-height:140px; object-fit:cover; display:block; background:#EFE9DC; }
.cover .b { padding:16px; display:flex; flex-direction:column; gap:6px; }
.cover b { font-size:20px; font-weight:500; color:var(--ink); }

/* Scan page with real boxes */
.scanpage { position:relative; border-radius:6px; overflow:hidden; box-shadow:0 12px 30px rgba(5,34,56,.16); background:#fff; }
.scanpage img { width:100%; display:block; }
.scanpage svg { position:absolute; inset:0; width:100%; height:100%; }
.scanline { position:absolute; inset:0; pointer-events:none; animation:scanmove 6s var(--ease) infinite alternate; }
.scanline::after { content:""; position:absolute; inset-inline:0; top:0; height:2px; background:var(--logo-teal); opacity:.9; }
@keyframes scanmove { from { transform:translateY(4%); } to { transform:translateY(96%); } }
.blk { border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:#fff; }
.blk b { display:block; font-size:12px; font-weight:600; color:var(--teal); }

/* Hairline drawn by us: never a fill, the stroke is the only highlight */
.hl { fill:none; stroke:var(--navy); stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; }
.hl.mid { stroke:#9DB9C7; }
.hl.lo { stroke:#D5E1E7; }
.hl.hi { stroke:var(--teal); stroke-width:1.2; }
.navy .hl { stroke:#6D94A9; }
.draw { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 7s var(--ease) infinite; }
.draw.d1 { animation-delay:.12s; } .draw.d2 { animation-delay:.24s; } .draw.d3 { animation-delay:.36s; } .draw.d4 { animation-delay:.48s; } .draw.d5 { animation-delay:.6s; } .draw.d6 { animation-delay:.72s; }
@keyframes draw { 0% { stroke-dashoffset:1; opacity:1; } 24% { stroke-dashoffset:0; } 90% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
.pulse { stroke-dasharray:.08 1; stroke-dashoffset:1.08; animation:pulse 3.6s var(--ease) infinite; }
@keyframes pulse { to { stroke-dashoffset:0; } }

/* Verse */
.verse { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); gap:24px; animation:rise .25s var(--ease-out) both; }
.vs-src { background:#F7FAFB; border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:17px; line-height:1.7; }
.vs-q { background:var(--tint2); padding:1px 3px; border-radius:3px; }
.vs-trace { width:100%; height:44px; display:block; }
.vs-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; font-size:13px; color:var(--muted); text-align:center; }
.vs-steps span { display:flex; gap:4px; align-items:center; justify-content:center; }
.vs-t { font-size:30px; line-height:2; color:var(--ink); text-align:center; font-family:"Noto Naskh Arabic",serif; }
.vs-t.qr { font-family:"Amiri Quran","Noto Naskh Arabic",serif; font-size:32px; line-height:2.5; }
.vs-t.bk { font-size:27px; }
.vs-lit { font-size:15px; color:var(--muted); display:flex; flex-direction:column; gap:2px; }

/* Figure slider */
.fig { position:relative; background:#fff; border-radius:10px; overflow:hidden; }
.fig svg { display:block; width:100%; height:auto; }
.fig .top { position:absolute; inset:0; background:#fff; }
.fig .handle { position:absolute; top:0; bottom:0; width:1px; background:var(--teal); pointer-events:none; }
.figr { width:100%; min-height:44px; margin:0; accent-color:var(--teal); }

/* Workbench */
.wb { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 18px 44px rgba(5,34,56,.10); }
.wbbar { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 18px; border-bottom:1px solid var(--line); font-size:14px; background:#F7FAFB; }
.wbgrid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); }
.seg { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:14px; padding:14px 18px; border-bottom:1px solid #EAF0F3; font-size:15px; line-height:1.7; }
.seg.cur { background:#F0F7F5; }
.side { border-inline-start:1px solid var(--line); padding:14px 18px; display:flex; flex-direction:column; gap:12px; background:#FBFCFD; }
.tool { border:0; background:transparent; min-height:44px; padding:0 10px; border-radius:6px; font:500 14px "IBM Plex Sans Arabic",Tahoma,sans-serif; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tool.on { background:var(--tint); color:var(--navy); }

/* Review */
.page { background:#fff; border:1px solid var(--line); border-radius:3px; padding:22px 26px 16px; box-shadow:0 8px 22px rgba(5,34,56,.10); font-family:"Noto Naskh Arabic",serif; font-size:17px; line-height:2; color:#1B2730; }
.runhead { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:4px; margin-bottom:10px; }
.folio { text-align:center; font-size:13px; color:var(--muted); margin-top:8px; }
.pin { background:var(--tint2); text-decoration:underline solid var(--teal) 2px; text-underline-offset:5px; }
.cmt { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; box-shadow:0 8px 20px rgba(5,34,56,.10); font-size:14px; line-height:1.65; display:flex; flex-direction:column; gap:3px; }
.sug { font-family:"Noto Naskh Arabic",serif; font-size:17px; background:var(--tint2); padding:4px 8px; border-radius:4px; }
fieldset.dec { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0; display:flex; flex-direction:column; gap:6px; background:#fff; }
fieldset.dec legend { font-weight:600; padding:0 6px; }
.list { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.list li { padding-bottom:10px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:flex-start; }
.steps { display:flex; flex-direction:column; }
.steps > div { display:grid; grid-template-columns:48px minmax(0,220px) minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center; }
.steps b { font-weight:500; color:var(--ink); }

/* Forms */
.fld { display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:500; }
.fld input,.fld select { min-height:46px; border:1px solid #8AA3B2; border-radius:8px; padding:0 12px; font:400 16px "IBM Plex Sans Arabic",Tahoma,sans-serif; background:#fff; color:var(--text); }
.formc { background:#fff; color:var(--text); border-radius:14px; padding:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:14px; }

/* Price */
.calc { background:var(--tint); border-radius:18px; padding:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:26px; }
.res { background:#fff; border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:10px; }
.big { font-size:34px; font-weight:300; color:var(--ink); line-height:1.3; }
.res .r { border-bottom:1px solid #EAF0F3; padding-bottom:6px; }
.hfig { width:80%; margin-inline-start:auto; }

/* FAQ and footer */
.q { border-bottom:1px solid var(--line); }
.qb { width:100%; min-height:60px; display:flex; justify-content:space-between; gap:16px; align-items:center; background:transparent; border:0; font:500 19px "IBM Plex Sans Arabic",Tahoma,sans-serif; color:var(--ink); cursor:pointer; text-align:right; padding:0; }
.qs { border-bottom:1px solid var(--line); padding:16px 0; display:flex; flex-direction:column; gap:6px; }
.qs h3 { font-size:19px; font-weight:500; }
.qs p { color:var(--muted); }
.foot { background:var(--deep); color:#BFD3DF; padding:64px 0 32px; font-size:15px; }
.foot a { color:#DCE9F0; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:24px; }
.fgrid b { color:#fff; font-weight:500; display:block; margin-bottom:6px; }
.fgrid a { display:block; padding:3px 0; }
/* Annotation over a real scan */
.hl.ok { stroke:#0E9A83; stroke-width:3; }
.hl.orn { stroke:#C2570A; stroke-width:3; }

/* Publishers */
.pubs { background:var(--tint); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:10px; }
.pub { background:#fff; border-radius:10px; padding:12px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.pub b { font-family:"Noto Naskh Arabic",serif; font-size:19px; font-weight:500; color:var(--ink); }
.pipe { display:flex; gap:6px; flex-wrap:wrap; grid-column:1/-1; }
.ps { min-height:28px; display:inline-flex; align-items:center; gap:4px; padding:0 10px; border-radius:999px; font-size:13px; background:#EEF3F6; color:var(--muted); }
.ps.d { background:var(--tint2); color:#075A4D; font-weight:500; }
.ps.c { background:var(--navy); color:#fff; font-weight:500; }
.fact { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.src { font-size:13px; color:var(--muted); display:block; margin-top:4px; }

@media (prefers-reduced-motion: reduce) {
  .draw,.pulse { animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
  .scanline,.float,.stview,.verse,.mega { animation:none; }
}
@media (max-width:760px) {
  .band { padding:64px 0; }
  .wbgrid { grid-template-columns:minmax(0,1fr); }
  .side { border-inline-start:0; border-top:1px solid var(--line); }
  .steps > div { grid-template-columns:48px minmax(0,1fr); }
  .steps > div span { grid-column:2; }
  .stages > :last-child { grid-column:auto; }
  .hero-demo { min-height:340px; }
  .vs-t { font-size:24px; } .vs-t.qr { font-size:25px; }
}


/* ---- the built site ---- */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
img { max-width:100%; height:auto; }
.skip { position:absolute; inset-inline-start:12px; top:-60px; z-index:50; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; }
.skip:focus { top:8px; color:#fff; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--navy); outline-offset:2px; border-radius:6px; }
.navy a:focus-visible,.navy button:focus-visible { outline-color:#fff; }
.brand { display:inline-flex; align-items:center; min-height:44px; }
.brand img { display:block; height:44px; width:auto; }
.nav-toggle { display:none; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:1px solid var(--line); background:#fff; border-radius:8px; font:500 15px "IBM Plex Sans Arabic",Tahoma,sans-serif; color:var(--ink); cursor:pointer; }
.nav-cta { gap:6px; }
.nav-cta > a:not(.btn) { color:var(--text); min-height:44px; display:inline-flex; align-items:center; padding:0 8px; }
.mega[hidden] { display:none; }
.nav-links a[aria-current="page"] { color:var(--navy); font-weight:600; }
.nav-b svg { transform:none; }
.nav-b[aria-expanded="true"] svg { transform:rotate(180deg); }
@media (max-width:980px) {
  .nav { padding:10px 20px; }
  .nav-toggle { display:inline-flex; }
  .nav-links,.nav-cta { display:none; width:100%; }
  .nav.open .nav-links { display:flex; flex-direction:column; align-items:stretch; }
  .nav.open .nav-cta { display:flex; }
  .nav.open .nav-links a,.nav.open .nav-b { justify-content:flex-start; }
  .mega { position:static; inset-inline:auto; box-shadow:none; border-radius:10px; width:100%; animation:none; }
  .wrap { padding:0 20px; }
}
html:not(.js) .nav-b,html:not(.js) .mega,html:not(.js) .nav-toggle,html:not(.js) [role="tablist"],html:not(.js) .hlf { display:none; }
.js .tp:not(.on) { display:none; }
.hlf { aspect-ratio:5 / 4; width:100%; }
/* a tab that is a pill of its own, outside the tinted bar */
[role="tab"][aria-selected="true"] { }
details.q { border-bottom:1px solid var(--line); }
details.q summary { list-style:none; min-height:60px; display:flex; justify-content:space-between; gap:16px; align-items:center; font:500 19px "IBM Plex Sans Arabic",Tahoma,sans-serif; color:var(--ink); cursor:pointer; padding:0; }
details.q summary::-webkit-details-marker { display:none; }
details.q summary::after { content:"+"; font-size:24px; font-weight:300; flex:none; }
details.q[open] summary::after { content:"−"; }
details.q > p { padding-bottom:18px; color:var(--muted); }
.fld textarea { min-height:96px; border:1px solid #8AA3B2; border-radius:8px; padding:10px 12px; font:400 16px "IBM Plex Sans Arabic",Tahoma,sans-serif; background:#fff; color:var(--text); resize:vertical; }
.formc .wide-f { grid-column:1 / -1; }
.hp { position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.fstatus { grid-column:1 / -1; min-height:1.6em; font-size:15px; }
.fstatus.ok { color:#075A4D; font-weight:500; }
.fstatus.bad { color:#A84B08; font-weight:500; }
.btn[disabled] { opacity:.6; cursor:default; }
.plan { display:flex; flex-direction:column; gap:6px; }
.plan .big { font-size:30px; }
.src-links a { text-decoration:underline; }
.credit-line { font-size:13px; color:var(--muted); }
.res .big { color:var(--ink); }
.foot .brandline img { height:44px; width:auto; display:block; }
.stview .book,.stview p { margin:0; }
@media (max-width:640px) {
  h1 { font-size:clamp(30px,8.4vw,40px); }
  .hero { padding-top:40px; padding-bottom:56px; }
  .hero-demo { padding:10px; }
  .float.kn { position:static; width:auto; margin-top:10px; }
  .cover { grid-template-columns:96px minmax(0,1fr); }
  .cover img { width:96px; }
  .frame { padding:18px; }
  .frame h3.fh { font-size:26px; }
  .band { padding:56px 0; }
  .calc,.formc { padding:18px; }
  .tabs { justify-content:flex-start; }
  .tab { padding:0 14px; }
}

/* ---- layout helpers the pages use ---- */
.pg-hero { padding-top:72px; padding-bottom:72px; }
.pg-hero.lowpb { padding-bottom:40px; }
.stack-xl { display:flex; flex-direction:column; gap:34px; }
.nopt { padding-top:0; }
.top { align-items:start; }
.lead.c { text-align:center; margin-inline:auto; max-width:840px; }
.hero-copy { position:relative; }
.hero-cta { margin-top:auto; padding-top:18px; }
.hero > .tabs { margin-top:10px; }
.hero-card.top { align-items:start; }
.small-book { font-size:14px; }
.float.kn { width:min(470px,calc(100% - 32px)); gap:6px; }
.knr { display:grid; grid-template-columns:84px 1fr; gap:8px; border-top:1px solid var(--line); padding-top:5px; }
.sidefig { max-width:420px; justify-self:center; width:100%; }
.midfig { max-width:420px; justify-self:center; width:100%; }
.narrowfig { max-width:260px; }
.endfig { max-width:340px; justify-self:center; width:100%; }
.plugfig { max-width:280px; }
.vaultfig { max-width:320px; }
.routefig { max-width:240px; }
.queryfig { padding-top:60px; max-width:340px; width:100%; justify-self:center; }
.scanfig { max-width:300px; }
.herofig { max-width:460px; justify-self:center; width:100%; }
.herofig img { max-height:460px; }
.evfig { width:180px; }
.mini-page { padding:8px 10px; font-size:11px; line-height:1.8; box-shadow:none; }
.mini-page .runhead { font-size:9px; margin-bottom:4px; }
.pulseline { width:100%; height:40px; display:block; }
.navy .pcard .small,.navy .stview .small,.navy .formc .small { color:var(--muted); }
.stview h3 { color:var(--ink); }
.stages { grid-template-columns:minmax(220px,300px) minmax(0,1fr); }
.stlist { display:flex; flex-direction:column; gap:2px; grid-column:1; grid-row:1; }
.stview { grid-column:2; grid-row:1; }
.stcol { display:flex; flex-direction:column; gap:14px; min-width:0; }
.stcol p { margin:0; }
.strows { display:flex; flex-direction:column; gap:8px; }
.strows .r { border-bottom:1px solid var(--line); padding-bottom:6px; }
.stcol .now { font-size:20px; line-height:2; color:var(--ink); }
.was-t { font-size:18px; line-height:2; }
.cap-340 { max-height:340px; }
.bsplit { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:24px; align-items:center; }
.t-sm { font-size:14px; }
.ta-r { text-align:right; }
.eq { text-align:center; font-size:19px; margin-top:10px; }
.eqn { font-size:15px; }
.folio-box { max-width:300px; align-self:center; width:100%; }
.eyefig { display:flex; flex-direction:column; gap:6px; }
.figlab { display:flex; flex-direction:column; gap:2px; }
html:not(.js) .figlab { display:none; }
.vsx { display:flex; flex-direction:column; gap:18px; font-size:17px; line-height:1.75; }
.vsx > .tabs { align-self:flex-start; }
.vgroup { display:flex; flex-direction:column; gap:18px; }
.vcol { display:flex; flex-direction:column; gap:12px; min-width:0; }
.verse .art { align-self:start; }
.verse .art img { max-height:460px; }
.vs-was { font-size:18px; line-height:1.9; }
.vs-alt { font-size:20px; line-height:2; text-align:center; background:var(--tint2); border-radius:8px; padding:6px 12px; }
.vchips { justify-content:center; }
.wbsegs { min-width:0; }
.seg.last { border-bottom:0; }
.toolrow { gap:2px; }
.side-p { display:flex; flex-direction:column; gap:10px; }
.side-p > b { font-weight:600; color:var(--ink); }
.sr { display:flex; flex-direction:column; gap:2px; border-bottom:1px solid #EAF0F3; padding-bottom:8px; }
.sr .book { font-size:17px; }
.g250 { grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); }
.bcard.navy { background:var(--ink); color:#E9F2F7; }
.route.on-white { background:#fff; border:1px solid var(--line); }
.push { margin-top:auto; }
.wl { color:#fff; }
.full { width:100%; }
.radio { min-height:34px; }
.radio input { width:18px; height:18px; }
.cmt b { font-weight:600; }
.evrows { background:var(--tint); margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.endcopy { align-items:flex-start; }
.chip-w { background:#fff; }
.scan-card { grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:16px; padding:18px; }
.blks { gap:8px; }
.grow { flex-grow:1; }
.orn-t { color:#A84B08; }
.lgwrap { display:flex; flex-wrap:wrap; gap:10px; }
.h1-em { color:var(--navy); }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; font-weight:600; direction:ltr; unicode-bidi:isolate; white-space:nowrap; }
.pubs-w { background:#fff; }
.pubs-w .pub { background:var(--tint); }
.facts { gap:16px; }
.fact2 { display:flex; gap:12px; align-items:flex-start; }
.fact2 h3 { font-size:20px; }
.lt { font-weight:400; }
.gatecol { padding-top:64px; }
.rev-demo { padding-bottom:80px; }
.calc-cta { margin-top:auto; }
.cover .ico { width:120px; height:100%; min-height:140px; border-radius:0; }
.cover .ico svg { width:40px; height:40px; }
.lowpb { }
@media (max-width:760px) {
  .stages { grid-template-columns:minmax(0,1fr); }
  .stlist,.stview { grid-column:1; grid-row:auto; }
  .stlist { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .st { width:auto; padding:0 12px; font-size:15px; }
  .stview { min-height:0; padding:18px; }
  .gatecol { padding-top:0; }
  .evfig { width:120px; }
  .queryfig { padding-top:0; max-width:240px; }
  .pg-hero { padding-top:40px; padding-bottom:40px; }
  .cover .ico { width:96px; }
}
html:not(.js) .stages { display:block; }
html:not(.js) .stview { margin-top:16px; }
.stack > .tabs,.stack-l > .tabs { align-self:flex-start; }
html:not(.js) .hero-demo { min-height:0; display:block; }
html:not(.js) .hero-demo .float { position:static; width:auto; animation:none; }
html:not(.js) .hero-card + .hero-card { margin-top:8px; }
.js .nojs-note { display:none; }

/* Read the difference: one paragraph, two renderings, the edits between them */
.pf-panel { display:flex; flex-direction:column; gap:14px; }
.pf-src { background:#F7FAFB; border:1px solid var(--line); border-radius:12px; padding:16px 20px; font-size:17px; line-height:1.75; color:var(--text); }
.pf-by { display:block; margin-top:8px; font:400 14px "IBM Plex Sans Arabic",Tahoma,sans-serif; color:var(--muted); direction:rtl; text-align:right; }
.pf-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
.pf-col { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.pf-col.us { border-color:var(--navy); }
.pf-h { display:flex; justify-content:space-between; gap:12px; padding:10px 20px; background:var(--page); font-size:15px; font-weight:600; color:var(--muted); }
.pf-col.us .pf-h { background:var(--navy); color:#fff; }
.pf-b { padding:18px 20px 22px; font-family:"Noto Naskh Arabic","Traditional Arabic",serif; font-size:20px; line-height:2.05; color:#1B2730; }
.pf-b.en { font-family:"Source Serif 4",Georgia,serif; font-size:18px; line-height:1.8; }
.pf-b mark { color:inherit; background:var(--err); box-shadow:inset 0 -2px 0 var(--errline); border-radius:2px; padding:0 2px; transition:background-color .16s ease,box-shadow .16s ease; }
.pf-col.us .pf-b mark { background:var(--mint); box-shadow:inset 0 -2px 0 var(--teal); }
.pf-b mark.hot,.pf-col.us .pf-b mark.hot { background:var(--amber); box-shadow:inset 0 -2px 0 var(--navy); }
.pf-edits { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; }
.pf-e { width:100%; height:100%; min-height:44px; display:flex; flex-direction:column; gap:4px; padding:10px 14px; text-align:start; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); font:400 15px/1.7 "IBM Plex Sans Arabic",Tahoma,sans-serif; cursor:pointer; transition:border-color .16s ease,background-color .16s ease; }
.pf-e.hot { border-color:var(--navy); background:var(--tint); }
.pf-e:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.pf-e b { font-family:"Noto Naskh Arabic",serif; font-weight:400; font-size:17px; color:var(--ink); }
.pf-e b.en { font-family:"Source Serif 4",Georgia,serif; font-size:16px; }
.pf-e s { color:var(--errline); text-decoration:none; }
.pf-e .ar { color:var(--teal); }
.pf-e .why { color:var(--muted); font-size:14px; }
@media (hover:hover) and (pointer:fine) { .pf-e:hover { border-color:#7E9BAB; } }
@media (max-width:760px) {
  .pf-cols,.pf-edits { grid-template-columns:minmax(0,1fr); }
  .pf-src { padding:14px 16px; font-size:16px; }
  .pf-b { padding:14px 16px 18px; font-size:19px; }
  .pf-h { padding:10px 16px; }
}
@media (prefers-reduced-motion:reduce) { .pf-b mark,.pf-e { transition:none; } }
.pfx { display:flex; flex-direction:column; gap:16px; min-width:0; }
.pfx > .tabs { align-self:flex-start; }
.pf-n { font-weight:400; font-size:14px; }
.pf-to { color:var(--muted); font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif; }
.pf-e b.en .pf-to { display:inline-block; transform:scaleX(-1); }
.pf-note { margin:0; }
.pf-src,.pf-b { white-space:pre-line; }
.pf-by { white-space:normal; }
.pf-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html:not(.js) .pf-hint { display:none; }
html:not(.js) .pf-e { pointer-events:none; }
@media (min-width:761px) { .pf-edits li:last-child:nth-child(odd) { grid-column:1 / -1; } }
.pf-m { display:none; }
/* On a phone the two texts stand one above the other, so the differences stay at the foot of the screen. */
@media (max-width:760px) {
  html.js .pf-m { display:inline; }
  html.js .pf-edits { position:sticky; bottom:0; z-index:2; display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin-inline:-20px; padding:8px 20px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); }
  html.js .pf-edits li { flex:0 0 min(84%,320px); scroll-snap-align:center; }
}

/* legal pages: one reading column */
.legal { max-width:800px; padding-top:56px; padding-bottom:56px; }
.legal h1 { margin-bottom:12px; }
.legal h2 { font-size:clamp(22px,2.4vw,28px); font-weight:400; margin:36px 0 10px; }
.legal h2.legal-title { font-size:clamp(28px,3.4vw,40px); font-weight:300; margin-top:0; }
.legal h3 { font-size:19px; font-weight:500; margin:24px 0 8px; }
.legal p, .legal li { line-height:1.85; }
.legal p { margin:0 0 12px; }
.legal ul, .legal ol { margin:0 0 12px; padding-inline-start:22px; }
.legal li { margin-bottom:6px; }
.legal table { width:100%; border-collapse:collapse; font-size:15px; min-width:560px; }
.legal th, .legal td { text-align:start; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--line); }
.legal tr:last-child td { border-bottom:0; }
.legal .scroll { margin:0 0 14px; background:#fff; }
#en.legal { border-top:1px solid var(--line); }
.foot-legal a { color:#E9F2F7; }
@media (max-width:640px) {
  .legal table { min-width:0; }
  .legal thead { display:none; }
  .legal tr { display:block; padding:10px 14px; border-bottom:1px solid var(--line); }
  .legal tr:last-child { border-bottom:0; }
  .legal td { display:block; padding:2px 0; border:0; }
  .legal td:first-child { font-weight:500; color:var(--ink); }
}