/* Laqtah — structural stylesheet. Colours live in theme.css. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}

/* ---------- base ---------- */
:root{
  --fs: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-ar: system-ui, -apple-system, "Segoe UI", "Noto Naskh Arabic", "Geeza Pro", Tahoma, sans-serif;
  --r:14px; --rs:10px; --rx:999px;
  --wrap:1120px;
  --gap:clamp(18px,3.4vw,34px);
  --sec-y:clamp(56px,8vw,104px);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  background:var(--page); color:var(--tx);
  font-family:var(--fs); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body[dir="rtl"]{font-family:var(--fs-ar); line-height:1.85}
a{color:var(--acc-tx); text-decoration:none}
a:hover{text-decoration:underline}

/* visible keyboard focus everywhere */
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
:focus:not(:focus-visible){outline:none}

.skip{
  position:absolute; inset-inline-start:12px; top:-64px; z-index:200;
  background:var(--acc); color:var(--on-acc); padding:12px 18px;
  border-radius:var(--rs); font-weight:700; transition:top .15s ease;
}
.skip:focus{top:12px; text-decoration:none}

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4.5vw,32px)}

/* ---------- typography ---------- */
h1,h2,h3{line-height:1.15; letter-spacing:-.022em; font-weight:800}
body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3{letter-spacing:0; line-height:1.35}
h1{font-size:clamp(34px,5.6vw,58px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:clamp(17px,1.7vw,20px); letter-spacing:-.012em}
.lead{font-size:clamp(16px,1.7vw,19px); color:var(--tx2); line-height:1.65}
body[dir="rtl"] .lead{line-height:1.9}
.small{font-size:14px; color:var(--tx2)}
.tiny{font-size:13px; color:var(--mut)}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc-tx); margin-bottom:14px;
}
body[dir="rtl"] .eyebrow{letter-spacing:0}
em.hl{font-style:normal; color:var(--acc-tx)}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--page-a); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex; align-items:center; gap:14px; min-height:66px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.03em}
.brand:hover{text-decoration:none}
.brand svg{width:26px; height:26px; flex:none}
.brand .ar{font-size:15px; font-weight:700; color:var(--mut); letter-spacing:0}
.hdr-nav{display:flex; align-items:center; gap:6px; margin-inline-start:auto}
.hdr-nav a.nl{
  padding:9px 12px; border-radius:var(--rs); font-size:14.5px;
  font-weight:600; color:var(--tx2);
}
.hdr-nav a.nl:hover{color:var(--tx); background:var(--surf2); text-decoration:none}
@media (max-width:820px){ .hdr-nav a.nl{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 20px; border-radius:var(--rx);
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--acc); color:var(--on-acc); border-color:var(--acc)}
.btn-p:hover{background:var(--acc-dk); border-color:var(--acc-dk)}
.btn-o{background:transparent; color:var(--tx); border-color:var(--line2)}
.btn-o:hover{border-color:var(--tx2); background:var(--surf2)}
.btn-lg{min-height:52px; padding:14px 26px; font-size:16px}
.btn-sm{min-height:40px; padding:8px 14px; font-size:14px}

.langbtn{
  min-height:40px; padding:8px 14px; border-radius:var(--rx);
  border:1px solid var(--line2); background:transparent; color:var(--tx2);
  font-size:14px; font-weight:700; cursor:pointer;
}
.langbtn:hover{color:var(--tx); border-color:var(--tx2)}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec-y)}
.sec-alt{background:var(--surf); border-block:1px solid var(--line)}
.sec-head{max-width:660px; margin-bottom:clamp(28px,4vw,44px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2 + .lead{margin-top:14px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(52px,7.5vw,96px) clamp(44px,6vw,80px)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,56px); align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{margin-bottom:20px}
.hero .lead{max-width:56ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.status{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  padding:7px 15px 7px 12px; border-radius:var(--rx);
  background:var(--acc-tint); border:1px solid var(--acc-line);
  font-size:13.5px; font-weight:600; color:var(--acc-tx);
}
.status .dot{width:8px; height:8px; border-radius:50%; background:var(--acc); flex:none}
.trust{display:grid; gap:11px; margin-top:30px; max-width:44ch}
.tchip{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--tx2)}
.tchip .tick{
  width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--grn-tint); color:var(--grn); display:grid; place-items:center;
  font-size:12px; font-weight:800;
}

/* decorative phone frames */
.phones{display:flex; gap:16px; justify-content:center}
@media (max-width:900px){ .phones{display:none} }
.phone{
  width:clamp(150px,14.5vw,196px); aspect-ratio:9/16; border-radius:26px; flex:none;
  background:var(--surf2); border:1px solid var(--line2);
  box-shadow:var(--sh); overflow:hidden; position:relative;
}
.phone:nth-child(2){margin-top:38px}
.phone .fill{position:absolute; inset:0; display:grid; place-items:center}
.phone .play{
  width:52px; height:52px; border-radius:50%; background:var(--acc);
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.phone .play::after{
  content:""; width:0; height:0; margin-inline-start:4px;
  border-inline-start:15px solid var(--on-acc);
  border-block:9px solid transparent;
}
/* abstract vertical-video UI — decorative only, no real content implied */
.phone .ui{position:absolute; inset-inline:14px; bottom:16px; display:grid; gap:7px}
.phone .bar{height:5px; border-radius:99px; background:var(--acc); opacity:.85}
.phone .ln{height:7px; border-radius:99px; background:var(--tx); opacity:.20}
.phone .ln.s{width:52%}
.phone .ln.m{width:76%}
.phone .tag{
  position:absolute; inset-inline-start:14px; top:14px;
  width:46px; height:14px; border-radius:99px; background:var(--tx); opacity:.16;
}
.phone .shade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.30), rgba(0,0,0,0) 46%);
}
.g1{background:linear-gradient(150deg,var(--ph1a),var(--ph1b))}
.g2{background:linear-gradient(150deg,var(--ph2a),var(--ph2b))}

/* ---------- cards ---------- */
.cards{display:grid; gap:var(--gap)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .c3,.c4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .c2,.c3,.c4{grid-template-columns:1fr} }
.card{
  background:var(--surf2); border:1px solid var(--line);
  border-radius:var(--r); padding:24px;
}
.sec-alt .card{background:var(--page)}
.card h3{margin-bottom:9px}
.card p{font-size:14.5px; color:var(--tx2); margin:0}
.stepn{
  display:grid; place-items:center; width:32px; height:32px; margin-bottom:14px;
  border-radius:9px; background:var(--acc-tint); color:var(--acc-tx);
  font-size:14px; font-weight:800; font-variant-numeric:tabular-nums;
}

/* ---------- comparison table ---------- */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:15px}
caption{text-align:start; color:var(--mut); font-size:13px; padding-bottom:10px}
th,td{padding:14px 16px; text-align:start; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut); background:var(--surf2); border-bottom:1px solid var(--line2);
}
body[dir="rtl"] thead th{letter-spacing:0}
tbody th{font-weight:700; color:var(--tx)}
td{color:var(--tx2)}
td.n,th.n{text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
tr.hi th,tr.hi td{background:var(--acc-tint); color:var(--tx)}
tr.hi td.n{font-weight:800; color:var(--tx)}
.tnote{font-size:13px; color:var(--mut); margin-top:14px}
.ptable{
  background:var(--surf2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; max-width:860px;
}
.sec-alt .ptable{background:var(--page)}
.ptable .per{font-size:12.5px; color:var(--mut); font-weight:500; margin-top:3px}

/* ---------- coverage ---------- */
.govs{display:flex; flex-wrap:wrap; gap:9px}
.gov{
  padding:8px 15px; border-radius:var(--rx); font-size:14px;
  background:var(--surf2); border:1px solid var(--line); color:var(--tx2);
}
.sec-alt .gov{background:var(--page)}

/* ---------- FAQ ---------- */
.faq{max-width:780px; display:grid; gap:12px}
.faq details{
  background:var(--surf2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.sec-alt .faq details{background:var(--page)}
.faq summary{
  cursor:pointer; padding:18px 22px; font-weight:700; font-size:16px;
  list-style:none; display:flex; align-items:center; gap:14px; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; margin-inline-start:auto; font-size:20px; font-weight:700;
  color:var(--acc-tx); line-height:1; flex:none;
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{background:var(--surf3)}
.faq .ans{padding:0 22px 20px; color:var(--tx2); font-size:15px}
.faq .ans p + p{margin-top:12px}

/* ---------- CTA band ---------- */
.band{
  background:var(--surf2); border:1px solid var(--line2);
  border-radius:var(--r); padding:clamp(28px,4.5vw,48px); text-align:center;
}
.band h2{margin-bottom:14px}
.band .lead{margin-inline:auto; max-width:52ch}
.band .hero-cta{justify-content:center; margin-top:28px}
.mailto{font-weight:700; color:var(--acc-tx); word-break:break-all}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line); padding-block:44px 40px; background:var(--surf)}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--gap)}
@media (max-width:760px){ .ftr-grid{grid-template-columns:1fr 1fr} .ftr-brand{grid-column:1/-1} }
.ftr .ftr-h{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-bottom:14px}
body[dir="rtl"] .ftr .ftr-h{letter-spacing:0}
.ftr li{margin-bottom:4px; font-size:14.5px}
.ftr li a{display:inline-block; padding-block:5px; min-height:26px}
.ftr li a{color:var(--tx2)}
.ftr-legal a{display:inline-block; padding-block:5px}
.ftr li a:hover{color:var(--tx)}
.ftr-brand p{font-size:14px; color:var(--tx2); margin-top:14px; max-width:38ch}
.ftr-legal{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  font-size:13px; color:var(--mut);
}

/* ---------- legal document pages ---------- */
.doc{padding-block:clamp(36px,5vw,64px) clamp(56px,8vw,96px)}
.doc-wrap{max-width:760px}
.doc h1{font-size:clamp(30px,4.4vw,42px); margin-bottom:14px}
.doc .updated{font-size:14px; color:var(--mut); margin-bottom:34px}
.doc h2{font-size:clamp(20px,2.4vw,25px); margin-top:44px; margin-bottom:14px; scroll-margin-top:88px}
.doc h3{font-size:17px; margin-top:26px; margin-bottom:10px}
.doc p, .doc li{font-size:16px; color:var(--tx2); line-height:1.75}
body[dir="rtl"] .doc p, body[dir="rtl"] .doc li{line-height:2}
.doc p + p{margin-top:14px}
.doc ul{margin-top:14px; display:grid; gap:10px}
.doc ul li{position:relative; padding-inline-start:20px}
.doc ul li::before{
  content:""; position:absolute; inset-inline-start:2px; top:.66em;
  width:6px; height:6px; border-radius:50%; background:var(--acc);
}
.doc strong{color:var(--tx); font-weight:700}
.doc .box{
  background:var(--surf2); border:1px solid var(--line);
  border-left:3px solid var(--acc); border-radius:var(--rs);
  padding:18px 20px; margin-top:22px;
}
body[dir="rtl"] .doc .box{border-left:1px solid var(--line); border-right:3px solid var(--acc)}
.doc .box p{font-size:15px; margin:0}
.toc{
  background:var(--surf2); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px; margin-bottom:8px;
}
.toc h2{margin:0 0 12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
body[dir="rtl"] .toc h2{letter-spacing:0}
.toc ol{counter-reset:t; display:grid; gap:8px}
.toc li{counter-increment:t; font-size:15px; padding-inline-start:32px; position:relative}
.toc li::before{
  content:counter(t) "."; position:absolute; inset-inline-start:0;
  color:var(--mut); font-variant-numeric:tabular-nums;
}
.doc-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:52px;
  padding-top:26px; border-top:1px solid var(--line);
}

/* ---------- 404 ---------- */
.nf{min-height:62vh; display:grid; place-items:center; text-align:center; padding-block:60px}
.nf .code{font-size:clamp(64px,12vw,120px); font-weight:800; color:var(--acc-tx); line-height:1; letter-spacing:-.04em}

/* ---------- print ---------- */
@media print{
  .hdr,.ftr,.doc-nav,.skip,.langbtn{display:none}
  body{background:#fff; color:#000}
  .doc p,.doc li{color:#222}
}

/* ---------- bilingual visibility (works with JS off: English is the default) ---------- */
body[data-l="en"] [data-lang="ar"]{display:none!important}
body[data-l="ar"] [data-lang="en"]{display:none!important}

/* ---------- long tokens must never widen the page ---------- */
body{overflow-wrap:break-word}
.tblwrap{max-width:100%}
.mailto{overflow-wrap:break-word}

/* ---------- small phones ---------- */
@media (max-width:460px){
  .hdr-in{min-height:60px; gap:8px}
  .brand{font-size:17px; gap:8px}
  .brand svg{width:23px; height:23px}
  .brand .ar{display:none}
  .hdr-nav{gap:6px}
  .langbtn{padding:8px 11px; font-size:13.5px; min-height:40px}
  .hdr-nav .btn-sm{padding:8px 13px; font-size:13.5px}
  .btn-lg{width:100%}
  .hero-cta .btn{width:100%}
  .doc .box, .toc{padding:16px 16px}
}
@media (max-width:360px){
  .hdr-nav .btn-sm{padding:8px 10px; font-size:13px}
  .langbtn{padding:8px 9px; font-size:13px}
}

/* table-of-contents links need a real touch target (WCAG 2.5.8) */
.toc ol{gap:2px}
.toc li a{display:inline-block; padding-block:4px; min-height:24px}