/* Haqqi launch pack — shared document system (Haqqi + Tagnologys brands, EN/AR, light/dark, print A4)
   Made by Tagnologys */
:root{
  --tag-navy:#2D3E50;--tag-teal:#17A287;--tag-cream:#F2EFE6;--tag-dark:#0A131D;
  --hq-aub:#510449;--hq-aub2:#3D0337;--hq-gold:#C4932D;--hq-ivory:#FAF7F2;--hq-ink:#281228;
}
/* brand tokens */
body.brand-haqqi{--pri:#510449;--pri2:#3D0337;--acc:#C4932D;--acc2:#9A6F18;--accT:#FBF2DF;--priT:#F7EEF4;--bg:#FAF7F2;--card:#FFFFFF;--ink:#281228;--txt:#4A3A47;--mut:#7C6A78;--line:#EEE4E9;--cover:#3D0337;--coverInk:#FAF7F2;
  --fh:"Manrope","Noto Sans Arabic",system-ui,sans-serif;--fb:"Manrope","Noto Sans Arabic",system-ui,sans-serif}
body.brand-tag{--pri:#2D3E50;--pri2:#0A131D;--acc:#17A287;--acc2:#0F7D68;--accT:#E3F4EF;--priT:#E9EDF1;--bg:#F2EFE6;--card:#FFFFFF;--ink:#0A131D;--txt:#33414F;--mut:#6B7785;--line:#DEDAD0;--cover:#0A131D;--coverInk:#F2EFE6;
  --fh:"Space Grotesk","Noto Kufi Arabic",system-ui,sans-serif;--fb:"Space Grotesk","Noto Kufi Arabic",system-ui,sans-serif}
html[lang=ar] body.brand-tag{--fh:"Noto Kufi Arabic","Space Grotesk",sans-serif;--fb:"Noto Kufi Arabic","Space Grotesk",sans-serif}
html[lang=ar] body.brand-haqqi{--fh:"Noto Sans Arabic","Manrope",sans-serif;--fb:"Noto Sans Arabic","Manrope",sans-serif}
/* dark */
html[data-theme=dark] body.brand-haqqi{--bg:#1A0B18;--card:#24101F;--ink:#FAF2F6;--txt:#E0CEDA;--mut:#B79CB0;--line:#3A2234;--priT:#2E1429;--accT:#33260E;--pri:#C46BB8}
html[data-theme=dark] body.brand-tag{--bg:#0A131D;--card:#13202D;--ink:#F2EFE6;--txt:#CDD5DD;--mut:#94A2B0;--line:#24323F;--priT:#172634;--accT:#0E2E28;--pri:#9FB4C8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--fb);font-size:15.5px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
html[lang=ar] body{font-size:16px;line-height:1.95}
h1,h2,h3,h4{font-family:var(--fh);color:var(--ink);line-height:1.3;margin:0}
a{color:var(--pri)}
img{max-width:100%}
[hidden]{display:none!important}
html[lang=en] [data-l=ar],html[lang=ar] [data-l=en]{display:none!important}
.num{font-variant-numeric:tabular-nums}
html[lang=ar] .num{direction:ltr;unicode-bidi:isolate;text-align:right}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
.muted{color:var(--mut)}.small{font-size:13.5px}

/* ---------- cover ---------- */
.cover{position:relative;min-height:100vh;background:var(--cover);color:var(--coverInk);display:flex;flex-direction:column;overflow:hidden}
.cover .bgimg{position:absolute;inset:0;background-size:cover;background-position:center}
.cover .in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px;max-width:1100px;width:100%;margin:0 auto}
.cover .top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.cover .logo{height:86px;width:auto}
.cover .tagline{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#E3D3DE}
.cover .eyebrow{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
html[lang=ar] .cover .eyebrow{letter-spacing:0}
.cover h1{color:var(--coverInk);font-size:58px;line-height:1.12;max-width:820px}
.cover .sub{font-size:20px;color:#EFE4EC;max-width:720px;margin-top:16px}
.cover .rule{width:110px;height:6px;border-radius:9px;background:var(--acc);margin:26px 0}
.cover .meta{display:flex;flex-wrap:wrap;gap:12px 34px;font-size:14px;color:#EFE4EC}
.cover .meta b{display:block;font-size:12px;color:#C9B6C4;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.prep{display:flex;align-items:center;gap:16px;background:#FFFFFF;color:#0A131D;border-radius:16px;padding:14px 18px;max-width:420px}
.prep img{height:52px;width:auto}
.prep small{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#6B7785}
.prep b{font-family:"Space Grotesk","Noto Kufi Arabic",sans-serif;font-size:17px;color:#2D3E50;letter-spacing:.06em}
.prep span{display:block;font-size:11px;letter-spacing:.18em;color:#17A287;font-weight:700}

/* ---------- body ---------- */
main.doc{padding:56px 0 30px}
.toc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 30px;margin-bottom:56px}
.toc h2{font-size:20px;margin-bottom:12px}
.toc ol{margin:0;padding-inline-start:22px;columns:2;column-gap:40px}
.toc li{margin:4px 0;break-inside:avoid}
.toc a{color:var(--txt);text-decoration:none}.toc a:hover{color:var(--pri)}
section.s{margin:0 0 64px}
.s-h{display:flex;align-items:flex-start;gap:18px;margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.s-h .n{flex:none;width:52px;height:52px;border-radius:14px;background:var(--pri);color:#fff;display:grid;place-items:center;font-family:var(--fh);font-weight:700;font-size:19px}
html[data-theme=dark] .s-h .n{color:#0A0A0A}
.s-h h2{font-size:30px}
.s-h p{margin:4px 0 0;color:var(--mut)}
h3{font-size:20px;margin:30px 0 10px}
h4{font-size:16px;margin:18px 0 6px}
p{margin:0 0 14px}
ul,ol{padding-inline-start:22px;margin:0 0 14px}
li{margin:3px 0}
.lead{font-size:18px;color:var(--ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.kpi span{display:block;font-size:12.5px;color:var(--mut)}
.kpi b{display:block;font-family:var(--fh);font-size:28px;color:var(--ink);line-height:1.2;margin:4px 0}
.kpi small{font-size:12px;color:var(--mut)}
.kpi.pri{background:var(--pri);border-color:var(--pri)}.kpi.pri span,.kpi.pri small{color:#EADCE6}.kpi.pri b{color:#fff}
.callout{border-inline-start:5px solid var(--acc);background:var(--accT);border-radius:12px;padding:14px 18px;margin:18px 0;color:var(--ink)}
.callout.pri{border-color:var(--pri);background:var(--priT)}
.callout b:first-child{display:block;font-family:var(--fh);margin-bottom:2px}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--priT);color:var(--pri);margin:2px}
.chip.acc{background:var(--accT);color:var(--acc2)}
.chip.ok{background:#E4F3EA;color:#1F6E45}.chip.no{background:#FBE7E7;color:#9B2C2C}.chip.mid{background:#FCF1DC;color:#8A5A10}
html[data-theme=dark] .chip.ok{background:#173326;color:#8DE0B0}html[data-theme=dark] .chip.no{background:#3A1717;color:#F2A0A0}html[data-theme=dark] .chip.mid{background:#3A2A0F;color:#F0C877}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);margin:14px 0 20px}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{background:var(--pri);color:#fff;font-family:var(--fh);font-weight:600;text-align:start;padding:10px 12px;font-size:13px;white-space:nowrap}
html[data-theme=dark] table.t th{color:#0A0A0A}
table.t td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
table.t tr:nth-child(even) td{background:color-mix(in srgb,var(--priT) 45%,var(--card))}
table.t td.c{text-align:center}
.bars{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.bar{display:grid;grid-template-columns:190px minmax(0,1fr) 90px;gap:12px;align-items:center;font-size:14px}
.bar i{display:block;height:16px;border-radius:99px;background:var(--pri)}
.bar i.acc{background:var(--acc)}
.bar em{font-style:normal;font-weight:700;color:var(--ink);font-family:var(--fh)}
.swot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.swot .card h4{margin:0 0 8px}
.swot .S{border-top:5px solid #2E8B57}.swot .W{border-top:5px solid #C0392B}.swot .O{border-top:5px solid var(--acc)}.swot .T{border-top:5px solid var(--pri)}
.tl{position:relative;margin:16px 0;padding-inline-start:26px;border-inline-start:3px solid var(--line)}
.tl .it{position:relative;margin-bottom:16px}
.tl .it::before{content:"";position:absolute;inset-inline-start:-35px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--acc);border:3px solid var(--bg)}
.tl .it b{font-family:var(--fh);color:var(--ink)}
.verdict{display:flex;gap:22px;align-items:center;background:var(--pri);color:#fff;border-radius:20px;padding:26px 30px;margin:20px 0}
.verdict .big{font-family:var(--fh);font-size:44px;font-weight:700;line-height:1;color:#fff}
.verdict p{margin:0;color:#F3E9F0}
html[data-theme=dark] .verdict{color:#0A0A0A}html[data-theme=dark] .verdict .big,html[data-theme=dark] .verdict p{color:#0A0A0A}
.fig{margin:18px 0 24px}
.fig img{display:block;width:100%;border-radius:16px;border:1px solid var(--line)}
.fig figcaption{font-size:13px;color:var(--mut);margin-top:6px}
.ph-img{border:2px dashed var(--acc);border-radius:16px;background:var(--accT);padding:18px 20px;margin:18px 0;color:var(--ink);font-size:13.5px}
.ph-img b{font-family:var(--fh);display:block;font-size:15px}
.ph-img code{display:block;white-space:pre-wrap;background:var(--card);border-radius:10px;padding:10px 12px;margin-top:8px;font-size:12.5px;color:var(--txt);direction:ltr;text-align:left}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.flow span{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13.5px;color:var(--ink);font-weight:600}
.flow i{font-style:normal;color:var(--acc);font-weight:700}
html[lang=ar] .flow i{transform:scaleX(-1);display:inline-block}
.phase1{border-inline-start:4px solid #2E8B57;padding-inline-start:12px}
.phase2{border-inline-start:4px solid var(--mut);padding-inline-start:12px;color:var(--mut)}
.src{font-size:12.5px;color:var(--mut)}
.srcs ol{font-size:13px;columns:1}
.srcs li{word-break:break-word}

/* ---------- footer band ---------- */
.made{background:#0A131D;color:#F2EFE6;margin-top:40px}
.made .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;padding-top:26px;padding-bottom:26px}
.made .lock{display:flex;align-items:center;gap:14px}
.made .lock img{height:46px}
.made .lock b{display:block;font-family:"Space Grotesk",sans-serif;letter-spacing:.14em;font-size:17px}
.made .lock span{display:block;font-size:10.5px;letter-spacing:.24em;color:#17A287;font-weight:700}
.made .by{font-size:14px;color:#D9D5CC}
.made .by b{color:#17A287}

/* ---------- UI chrome (hidden in print) ---------- */
.ctl{position:fixed;top:14px;inset-inline-end:14px;z-index:60;display:flex;gap:8px}
.ctl button,.fab{font-family:var(--fb);border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px -12px #00000073}
.fab{position:fixed;bottom:18px;inset-inline-start:18px;z-index:60;background:var(--pri);color:#fff;border-color:var(--pri);padding:11px 18px}
html[data-theme=dark] .fab{color:#0A0A0A}
.sheet{position:fixed;inset:0;z-index:70;display:none}
.sheet.on{display:block}
.sheet .bd{position:absolute;inset:0;background:rgb(10 19 29 / .55)}
.sheet .pn{position:absolute;bottom:0;inset-inline:0;max-height:82vh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;padding:20px 22px 28px;max-width:640px;margin:0 auto}
.sheet h3{margin:0 0 6px;font-size:18px}
.sheet .grp{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.sheet a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:600}
.sheet a:hover,.sheet a.cur{background:var(--priT)}
.sheet a img{width:28px;height:28px;object-fit:contain}
.sheet a small{display:block;font-weight:400;color:var(--mut);font-size:12.5px}

@media (max-width:860px){
  .grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover h1{font-size:40px}.cover .in{padding:30px 22px}.cover .logo{height:64px}
  .toc ol{columns:1}.bar{grid-template-columns:120px minmax(0,1fr) 70px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}.grid2,.grid3,.grid4,.swot{grid-template-columns:minmax(0,1fr)}
  .cover h1{font-size:32px}.cover .sub{font-size:17px}.s-h h2{font-size:24px}.verdict{flex-direction:column;align-items:flex-start}
  .ctl{top:10px;inset-inline-end:10px}.ctl button{padding:7px 11px}
}

/* ---------- print ---------- */
@page{size:A4;margin:16mm 14mm 18mm}
@page cover{margin:0}
@media print{
  html{font-size:14px}
  body{background:#fff!important;font-size:12.5px}
  html[lang=ar] body{font-size:13px}
  .ctl,.fab,.sheet{display:none!important}
  .cover{page:cover;min-height:0;height:297mm;width:210mm;break-after:page}
  .cover .in{padding:22mm 18mm}
  .cover h1{font-size:40px}.cover .sub{font-size:16px}
  main.doc{padding:0}
  .wrap{max-width:none;padding:0}
  .toc{break-after:page}
  section.s{break-before:page;margin:0}
  .card,.kpi,.callout,.tw,.fig,.ph-img,.verdict,.swot .card,.bar,tr{break-inside:avoid}
  h3,h4{break-after:avoid}
  .made{break-inside:avoid;margin-top:20px}
  .s-h .n{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none!important}
}
/* explainer illustrations (Codex) */
.fig.xp{max-width:760px;margin:16px auto 26px;text-align:center}
.fig.xp img{border:0;border-radius:20px;background:var(--bg)}
.fig.xp figcaption{font-size:13.5px;margin-top:8px;text-align:center}
@media print{.fig.xp{max-width:150mm;margin:4mm auto 8mm}}