/* Home page (index.html): the web app's frame (webapp.css) around the website blocks. Colours are the web app's. */
#pgs.lp{--ink:#0a2a22;--ink2:#0f3d33;--olive:#14503f;--olive-d:#0f3d33;--gold:#c9a24b;--gold-l:#e8cf8e;--paper:#f6efdc;--stone:#e2dcc6;--lapis:#1f4e79;--tx:#16302a;--mut:#5d6f67;--n:#0a2a22;--n2:#0f3d33;--n3:#14503f;--g:#c9a24b;--g2:#e8cf8e;--iv:#f6efdc;--iv2:#fbf7ea;--ink-w:#16302a;
 font-size:16px;scroll-padding-top:12px;background:var(--paper);color:var(--tx)}
[data-off]{display:none!important}
.skip{position:absolute;inset-inline-start:.5rem;top:-3rem;background:var(--n);color:var(--g2);padding:.5rem .9rem;border-radius:8px;z-index:100}.skip:focus{top:.5rem}
.hide-s{display:inline-flex}
/* side panel groups */
.it{text-decoration:none}.it.c{min-height:38px;padding-inline-start:2.6rem;margin:0}.it.c .tx{display:none;font-size:.9rem;color:#e8dcb9}
body.open .it.c .tx{display:block}body:not(.open) .sub,body:not(.open) .it.c{display:none}
.gh .tx{display:none;flex:1;align-items:center;justify-content:space-between;gap:.4rem}body.open .gh .tx{display:flex}
.chv{width:.5rem;height:.5rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s;margin-inline-end:.3rem;flex:none}.gh.open .chv{transform:rotate(-135deg)}
.sub{padding:.1rem 0 .3rem}.it.c:hover{background:#ffffff10}
.lbrand{display:flex;align-items:center;gap:.5rem;color:var(--g2);text-decoration:none;font:700 1.15rem Amiri,serif}.lbrand img{border-radius:6px}
#bar .pillx.gold{background:var(--g);color:var(--n);border-color:var(--g);font-weight:700;height:38px;white-space:nowrap}
#scrim{display:none}
#pgs{scroll-behavior:auto}
/* blocks */
.nt:empty{display:none}
.lpb{padding:clamp(2rem,5vw,3.6rem) 0}.bw{width:min(1180px,100% - 2.4rem);margin-inline:auto}
.bh{margin-bottom:1.4rem;max-width:62ch}.bh h2,.abt h2,.apb h2,.dn h2{font:700 clamp(1.5rem,3vw,2.3rem)/1.2 Amiri,"Noto Naskh Arabic",serif;color:var(--n2);margin:0}
.bh p{margin:.4rem 0 0;color:var(--mut)}
.welc .hero{border-bottom:3px solid var(--g)}
.welc .lp-chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:1rem 0 0;padding:0}.welc .lp-chips li{border:1px solid #c9a24b88;border-radius:99px;padding:.15rem .7rem;color:var(--g2);font-size:.85rem;background:#ffffff0d}
.welc .pillx.gold{background:var(--g);color:var(--n);border-color:var(--g);font-weight:700}.welc .pillx:hover{filter:brightness(1.1)}
.welc .lp-arch{flex:0 0 min(360px,36%);position:relative;z-index:1;margin:0}
.welc h1{font:700 clamp(1.6rem,3vw,2.6rem)/1.25 Amiri,"Noto Naskh Arabic",serif;max-width:22ch}
.abt{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start}.lead{font-size:1.15rem;line-height:1.7;margin:.7rem 0 0;color:var(--tx)}
.abl{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}.abl li{background:var(--iv2);border:1px solid #c9a24b88;border-radius:16px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.15rem}.abl b{color:var(--n3)}.abl span{color:var(--mut)}
.ofg{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.of{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1.1rem 1.1rem;border:1px solid #c9a24baa;border-radius:34px 34px 14px 14px;background:linear-gradient(180deg,#fffdf4,var(--iv2));color:var(--tx);text-decoration:none!important;transition:transform .18s,box-shadow .18s}
.of:before{content:"";position:absolute;inset:5px;border:1px solid #c9a24b55;border-radius:30px 30px 9px 9px;pointer-events:none}
.of:hover{transform:translateY(-3px);box-shadow:0 10px 24px #0a2a2226}.of:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.of.w2{grid-column:span 2}.of .ic{width:44px;height:44px;display:grid;place-items:center;font-size:1.4rem;clip-path:polygon(50% 0,85% 15%,100% 50%,85% 85%,50% 100%,15% 85%,0 50%,15% 15%);background:#c9a24b33}
.of h3{font:700 1.15rem/1.3 Amiri,"Noto Naskh Arabic",serif;color:var(--n2);margin:0}.of p{margin:0;color:var(--mut);font-size:.95rem}
.of.w2:first-child{background:linear-gradient(160deg,var(--n3),var(--n));border-color:var(--g)}.of.w2:first-child h3{color:var(--g2)}.of.w2:first-child p{color:#e8dcb9}.of.w2:first-child .ic{background:var(--g)}
.tbs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin-bottom:1rem;padding-bottom:.2rem}.tbs::-webkit-scrollbar{display:none}
.tbs button{flex:none;border:1px solid #c9a24b99;background:var(--iv2);color:var(--n2);border-radius:99px;padding:.5rem 1.1rem;font:600 .95rem system-ui,sans-serif;cursor:pointer;min-height:42px}
.tbs button[aria-selected=true]{background:var(--n);color:var(--g2);border-color:var(--n)}.tbs button:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.tp{background:var(--iv2);border:1px solid #c9a24b88;border-radius:20px;padding:1.2rem 1.4rem}.tp[hidden]{display:none}.tp ul{margin:0 0 1rem;padding-inline-start:1.2rem;display:grid;gap:.45rem}
.pillx.go{display:inline-flex;background:var(--n);color:var(--g2);border-color:var(--n);text-decoration:none;min-height:42px;align-items:center}
.st3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.st3 li{background:var(--iv2);border:1px solid #c9a24b88;border-radius:20px;padding:1.2rem}.st3 b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--n);color:var(--g2);margin-bottom:.5rem}
.st3 h3{font:700 1.15rem Amiri,serif;color:var(--n2);margin:0 0 .3rem}.st3 p{margin:0;color:var(--mut)}
.apb{background:linear-gradient(135deg,var(--n3),var(--n));color:var(--iv);border:2px solid var(--g);border-radius:26px;padding:clamp(1.2rem,3vw,2.2rem);display:grid;grid-template-columns:1fr 1.3fr;gap:1.5rem;align-items:center}
.apb h2{color:var(--g2)}.apb p{color:#e8dcb9;margin:.5rem 0 0}.apg{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.apg a{display:flex;flex-direction:column;gap:.1rem;background:#ffffff12;border:1px solid #c9a24b88;border-radius:16px;padding:.8rem .9rem;color:var(--iv);text-decoration:none!important}.apg a:hover{background:#ffffff20}.apg span{font-size:1.4rem}.apg small{color:#d9ccaa}
.dn{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;border:1px dashed var(--g);border-radius:20px;padding:1.2rem 1.4rem;background:var(--iv2)}.dn p{margin:.3rem 0 0;color:var(--mut);max-width:60ch}.dnb{display:flex;gap:.5rem;flex-wrap:wrap}
#pgs .lp-sec{padding:clamp(2rem,5vw,3.6rem) 0}#pgs .lp-wrap{width:min(1180px,100% - 2.4rem)}
#pgs .lp-b{border-radius:99px}
@media(max-width:1100px){.ofg{grid-template-columns:repeat(2,1fr)}.welc .lp-arch{display:none}}
@media(max-width:820px){
 #app{grid-template-columns:1fr}
 #rail{position:fixed;inset-block:0;inset-inline-start:0;width:272px;transform:translateX(-105%);transition:transform .22s;z-index:60}
 [dir=rtl] #rail{transform:translateX(105%)}body.open #rail{transform:none}
 body.open #scrim{display:block;position:fixed;inset:0;background:#0a2a2299;z-index:55}
 body:not(.open) .it.c,body:not(.open) .sub{display:block}.sub[hidden]{display:none}
 .it .tx,.gh .tx{display:flex}.it.c .tx{display:block}.brand b{display:block}
 .hide-s{display:none}.abt,.apb{grid-template-columns:1fr}.st3{grid-template-columns:1fr}.of.w2{grid-column:auto}
}
@media(max-width:560px){.ofg{grid-template-columns:1fr}.of{flex-direction:row;flex-wrap:wrap;align-items:center;border-radius:20px}.of:before{border-radius:16px}.of h3{flex:1 1 60%}.of p{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.of,.chv,#rail{transition:none}}
#bar .sel select{background:transparent;color:var(--g2);border:0}#bar .sel select option{color:#111;background:#fff}
#welcome{background:var(--iv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 61 27 85 15 73 39 98 50 73 61 85 85 61 73 50 98 39 73 15 85 27 61 2 50 27 39 15 15 39 27Z' fill='none' stroke='%23c9a24b' stroke-opacity='.22' stroke-width='1.4'/%3E%3C/svg%3E")}
#pgs.lp{--hd:Amiri,"Noto Naskh Arabic",Georgia,serif}
.welc .hero h1{color:var(--iv);background:none;-webkit-text-fill-color:currentColor;letter-spacing:0}
.welc .pillx{color:var(--g2)!important;text-decoration:none}.welc .pillx.gold{color:var(--n)!important}
.welc .hero p{color:#e8dcb9}
.apg a{color:var(--iv)!important}.apg b{font:700 1.05rem system-ui,sans-serif}.apg small{font:.85rem system-ui,sans-serif}
#pgs .pillx.go{color:var(--g2)!important}
.of{font:inherit}
#pgs #h1,#pgs .welc .hero h1{color:var(--iv)!important;background:none!important;-webkit-text-fill-color:var(--iv)!important}
/* demos */
.dmh{font:700 clamp(1.6rem,3vw,2.4rem) Amiri,serif;color:var(--n2);margin:0}
.dp[hidden]{display:none}.dph{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:.2rem 0 1rem}.dph p{margin:0;max-width:62ch;color:var(--mut)}
.dmstart{text-align:center;margin:.5rem 0 1rem}.dmstart[hidden]{display:none}
.dfr{display:flex;justify-content:center}.dfr iframe{border:0;background:#fff;width:100%;height:100%;display:block}
.dfr.phone iframe{width:390px;height:760px;max-width:100%;border:10px solid var(--n);border-radius:38px;box-shadow:0 14px 34px #0a2a2240}
.dfr.wide iframe{height:min(76vh,780px);border:3px solid var(--n);border-radius:14px;box-shadow:0 10px 26px #0a2a2230}
.dfr.wide{display:block}