/* mus7af.com landing + privacy (site/landing). One stylesheet for Arabic (RTL) and English (LTR): logical properties only. */
:root{
  --green:#0A4F3E;--green-d:#05291F;--gold:#E6B94A;--gold-d:#B8861B;--gold-t:#8A6414;--cream:#F5EEDC;--paper:#FBF7EC;--card:#FFFDF6;
  --line:#E8DDC2;--ink:#1D2420;--muted:#4F5A54;--soft:#3F4A44;--on-dark:#D9D1BC;
  --body:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;--display:'Tajawal',system-ui,sans-serif;--ruqaa:'Aref Ruqaa',serif;
}
html[lang="en"]{--body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--display:'Fraunces',Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:clip;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px}
img{max-width:100%;height:auto}
a{color:var(--green)}a:hover{color:var(--green-d)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:16px;top:-60px;background:var(--gold);color:var(--green-d);padding:10px 16px;border-radius:10px;z-index:10;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.ruqaa{font-family:var(--ruqaa);font-weight:700}
.dark{background-color:var(--green-d);background-image:radial-gradient(ellipse at 70% 0%,rgba(17,128,106,.45),rgba(5,41,31,0) 60%);color:var(--cream)}
html[dir="ltr"] .dark{background-image:radial-gradient(ellipse at 30% 0%,rgba(17,128,106,.45),rgba(5,41,31,0) 60%)}
.paper{background-color:var(--cream)}
.sec{padding:110px 0}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:52px}
.center .lead{margin-inline:auto}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:48px;height:48px;border-radius:12px}
.brand span{font-size:34px;color:var(--cream);line-height:1}
html[lang="en"] .brand span.lat{font-family:var(--display);font-size:26px;font-weight:600}
.navlinks{display:flex;gap:26px;align-items:center}
.navlink{color:var(--cream);text-decoration:none;font-weight:500;font-size:16px;padding:10px 4px}
.navlink:hover{color:var(--gold)}
.navend{display:flex;gap:12px;align-items:center}
.lang{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(245,238,220,.35);border-radius:999px;padding:8px 16px;min-height:44px;color:var(--cream);text-decoration:none;font-weight:600;font-size:15px}
.lang:hover{color:var(--gold);border-color:var(--gold)}
.lang[lang="ar"]{font-family:'Tajawal',system-ui,sans-serif;font-size:16px}
.menu{position:relative;display:none}
.menu summary{list-style:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(245,238,220,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cream)}
.menu summary::-webkit-details-marker{display:none}
.menu .drop{position:absolute;inset-inline-end:0;top:52px;z-index:5;background:var(--green-d);border:1px solid rgba(230,185,74,.4);border-radius:16px;padding:8px;min-width:220px;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.menu .drop a{color:var(--cream);text-decoration:none;padding:12px 14px;border-radius:10px;min-height:44px}
.menu .drop a:hover{background:rgba(230,185,74,.12);color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:800;font-size:18px;text-decoration:none;font-family:inherit;border:0;cursor:pointer}
.btn-gold{background:linear-gradient(180deg,#F0CB6A,#E6B94A 55%,#C99A2E);color:var(--green-d);box-shadow:0 6px 20px rgba(230,185,74,.25)}
.btn-gold:hover{color:var(--green-d);filter:brightness(1.05)}
.btn-ghost{border:1.5px solid rgba(230,185,74,.7);color:var(--cream);background:transparent;font-weight:700}
.btn-ghost:hover{color:var(--gold);background:rgba(230,185,74,.08)}
.btn-green{background:var(--green);color:var(--cream)}
.btn-green:hover{background:var(--green-d);color:var(--cream)}
.btn-sm{min-height:46px;font-size:16px;padding:0 22px}
html[dir="ltr"] .flip{transform:scaleX(-1)}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--gold-t)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold-d)}
html[lang="en"] .eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dark .eyebrow{color:var(--gold)}.dark .eyebrow::before{background:var(--gold)}
.h2{font-family:var(--display);font-size:44px;line-height:1.25;font-weight:800;margin:14px 0;color:var(--green-d)}
html[lang="en"] .h2{font-weight:600;line-height:1.15;font-size:46px}
.dark .h2{color:var(--cream)}
.lead{font-size:19px;color:var(--soft);max-width:660px;margin:0}
.dark .lead{color:var(--on-dark)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-top:48px;padding-bottom:110px}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero-icon{width:104px;height:104px;border-radius:26px;box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 0 1px rgba(230,185,74,.4)}
.wordmark{margin:0;font-size:112px;line-height:1;color:var(--cream)}
.en-mark{margin:0;font-family:var(--display);font-size:84px;line-height:1;font-weight:600;color:var(--cream)}
.tagline{margin:0;font-size:30px;line-height:1.45;font-weight:700}
.tagline span{color:var(--gold)}
.hero-sub{margin:0;font-size:19px;color:var(--on-dark);max-width:520px}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
/* [PLATFORMS] six pills in a 2 x 3 grid: no orphan at any width */
.pills{display:grid;grid-template-columns:repeat(2,max-content);gap:10px;font-size:15px;color:var(--on-dark);margin:8px 0 0;padding:0;list-style:none}
.pills li{border:1px solid rgba(245,238,220,.25);border-radius:999px;padding:6px 14px;text-align:center;white-space:nowrap}
.pills li.soon{border-style:dashed;border-color:rgba(230,185,74,.55)}
.pills .sn,.plat .sn{font-size:12px;font-weight:800;color:var(--gold);margin-inline-start:8px}
.stage{position:relative;padding-bottom:40px}
.glow{position:absolute;inset:-60px -40px -20px;background:radial-gradient(closest-side,rgba(230,185,74,.22),rgba(230,185,74,0));pointer-events:none}
.tv{position:relative;background:#0b0d0c;border-radius:18px;padding:12px;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(230,185,74,.25)}
.tv img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.tv-stand{width:28%;height:14px;margin:0 auto;background:linear-gradient(#1a1d1b,#0b0d0c);border-radius:0 0 12px 12px}
.phone{background:#0b0d0c;border-radius:34px;padding:9px;box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(230,185,74,.3)}
.phone img{display:block;width:100%;border-radius:26px}
.stage .phone{position:absolute;inset-inline-end:-26px;bottom:-10px;width:168px}

/* features */
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.ficon{width:52px;height:52px;border-radius:14px;background:var(--green);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.fcard h3{margin:4px 0 0;font-size:20px;color:var(--green-d);font-weight:800;line-height:1.35}
.fcard p{margin:0;font-size:16px;color:var(--muted);line-height:1.6}

/* tv */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.tv-shot{position:relative;padding-block-end:30px;padding-inline-end:60px}
.tv-shot .phone{position:absolute;inset-inline-end:0;bottom:0;width:150px}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:18px}
.tick{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(230,185,74,.18);color:var(--gold-d);display:flex;align-items:center;justify-content:center;margin-top:2px}
.dark .tick{color:var(--gold)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:72px 0 0;padding:0;list-style:none}
.plat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:8px}
.plat .nm{font-size:22px;font-weight:800;color:var(--green-d)}
.plat .os{font-size:15px;color:var(--muted)}
.plat p{margin:0;font-size:16px;color:var(--muted)}
.plat .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--green-d)}
.plat .sn{margin:0;color:var(--gold-t);border:1px dashed var(--gold-d);border-radius:999px;padding:3px 12px;font-size:13px}
.plat.soon{border-style:dashed}
.plans-note{margin:28px auto 0;text-align:center;font-size:15px;color:var(--muted);max-width:760px}

/* masjid */
.mpoints{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:64px 0 0;padding:0;list-style:none}
.mpoints b{display:block;color:var(--gold);font-weight:800;font-size:20px;margin-bottom:6px}
.mpoints span{color:var(--on-dark);font-size:16px}
.row-c{display:flex;justify-content:center;gap:14px;margin-top:56px;flex-wrap:wrap}


/* languages + offline */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:20px;font-weight:700;color:var(--green-d)}
.box{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:40px}
.box h3{font-size:28px;margin:18px 0 8px;color:var(--green-d);font-weight:800}
.box p{margin:0;font-size:17px;color:var(--soft)}
.box .ticks li{font-size:17px}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px 30px;display:flex;flex-direction:column;gap:18px;position:relative}
.plan.feat{background:var(--green-d);background-image:radial-gradient(ellipse at 50% 0%,rgba(17,128,106,.5),rgba(5,41,31,0) 70%);color:var(--cream);border:1.5px solid var(--gold);box-shadow:0 24px 60px rgba(5,41,31,.3)}
.plan .tag{position:absolute;top:-14px;inset-inline-start:30px;background:var(--gold);color:var(--green-d);font-size:13px;font-weight:800;border-radius:999px;padding:4px 14px}
.plan h3{margin:0;font-size:26px;font-weight:800;color:var(--green-d);line-height:1.3}
.plan.feat h3{color:var(--cream)}
.plan .for{font-size:15px;color:var(--muted);margin:2px 0 0}
.plan.feat .for{color:var(--on-dark)}
.price{display:flex;align-items:baseline;gap:10px;font-size:34px;font-weight:800;color:var(--green-d);font-family:var(--display)}
.plan.feat .price{color:var(--gold)}
.price small{font-size:15px;font-weight:500;color:var(--muted);font-family:var(--body)}
.plan.feat .price small{color:var(--on-dark)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.55}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{flex:none;margin-top:4px;color:var(--gold-d)}
.plan.feat li svg{color:var(--gold)}
.plan .btn{margin-top:auto;width:100%}
.plan .btn[aria-disabled="true"]{opacity:.85;cursor:default}
.plan .inc{font-size:14px;font-weight:700;color:var(--gold-t);margin:0}
.plan.feat .inc{color:var(--gold)}

/* get the app */
.badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:32px 0 0;padding:0;list-style:none}
.badges li{display:flex}
.badge{flex:1;display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 16px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(230,185,74,.45);color:var(--cream)}
.badge svg{flex:none}
.badge .s{display:block;font-size:13px;color:var(--gold);font-weight:700}
.badge .n{display:block;font-size:17px;font-weight:800}
a.badge.web{text-decoration:none;background:rgba(230,185,74,.16);border:1.5px solid var(--gold)}
a.badge.web .s{color:var(--cream)}
a.badge.web:hover{background:rgba(230,185,74,.26)}
a.badge.web:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.form{background:var(--paper);color:var(--ink);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);scroll-margin-top:24px}
.form h3{margin:0;font-size:26px;font-weight:800;color:var(--green-d)}
.form .sub{margin:6px 0 0;font-size:16px;color:var(--muted)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:var(--green-d)}
.form input,.form select,.form textarea{font:inherit;font-weight:400;font-size:16px;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid #B9AC8A;background:var(--card);color:var(--ink);width:100%}
.form textarea{min-height:110px;resize:vertical}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fend{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fend a{font-size:16px;font-weight:700}
.note{font-size:14px;color:var(--muted);margin:0}
/* [CONTACT] the form's honeypot (off-screen, skipped by keyboard and screen readers) and its inline answer */
.form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fout:empty{display:none}
.fout{font-size:16px;font-weight:700;color:var(--green-d)}
.fout.bad{color:#9B2C1F}
.fout a{font-weight:700}

/* faq */
.faq{display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0 26px}
.faq summary{list-style:none;cursor:pointer;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:19px;font-weight:800;color:var(--green-d)}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:0 0 22px;font-size:17px;color:var(--soft)}
.plus{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gold-d);color:var(--gold-t);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.faq details[open] .plus{transform:rotate(45deg)}

/* footer */
.foot{padding:56px 0 40px}
.foot .wrap{display:flex;flex-direction:column;gap:28px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{width:56px;height:56px;border-radius:14px}
.foot-brand b{display:block;font-family:var(--ruqaa);font-size:34px;line-height:1.1;color:var(--cream);font-weight:700}
.foot-brand span{font-size:14px;color:var(--on-dark)}
.foot nav{display:flex;gap:28px;flex-wrap:wrap;font-size:16px}
.foot a{color:var(--gold);text-decoration:none}.foot a:hover{color:#F0CB6A;text-decoration:underline}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--on-dark)}
.divider{height:1px;background:linear-gradient(90deg,rgba(230,185,74,0),rgba(230,185,74,.6),rgba(230,185,74,0))}

/* privacy */
.doc-head{padding:24px 0 64px}
.doc-head h1{font-family:var(--display);font-size:46px;line-height:1.2;margin:18px 0 8px;color:var(--cream);font-weight:800}
html[lang="en"] .doc-head h1{font-weight:600}
.doc-head p{margin:0;color:var(--on-dark)}
.doc{max-width:820px;margin:0 auto;padding:64px 40px 96px}
.doc h2{font-family:var(--display);font-size:28px;color:var(--green-d);margin:44px 0 12px;font-weight:800;line-height:1.3}
html[lang="en"] .doc h2{font-weight:600}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{font-size:17.5px;color:var(--ink)}
.doc ul{padding-inline-start:24px;margin:8px 0 16px}
.doc li{margin:6px 0}
.doc li::marker{color:var(--gold-d)}
.doc code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:#EFE6CF;border-radius:6px;padding:1px 6px;direction:ltr;unicode-bidi:isolate}
.doc strong{color:var(--green-d)}

/* responsive */
@media (max-width:1100px){
  .fgrid,.mpoints{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero,.two,.plans{grid-template-columns:minmax(0,1fr)}
  .hero{gap:48px}
  .three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navlinks{display:none}
  .menu{display:block}
  .plans{max-width:620px;margin:0 auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .sec{padding:64px 0}
  .nav{min-height:68px}
  .brand img{width:40px;height:40px}.brand span{font-size:28px}
  .navend .btn{display:none}
  .lang{padding:8px 12px}
  .hero{padding-top:24px;padding-bottom:64px;text-align:center}
  .hero-copy{align-items:center}
  .hero-icon{width:88px;height:88px;border-radius:22px}
  .wordmark{font-size:80px}.en-mark{font-size:60px}
  .tagline{font-size:22px}.hero-sub{font-size:16px}
  .ctas{flex-direction:column;width:100%}.ctas .btn{width:100%}
  .pills{justify-content:center;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:400px;font-size:14px;gap:8px}
  .pills li{padding:6px 8px;white-space:normal}
  .badges{grid-template-columns:minmax(0,1fr)}
  .stage .phone{display:none}
  .glow{inset:-30px 0 -10px}
  .tv{padding:6px;border-radius:12px}.tv img{border-radius:6px}
  .h2,html[lang="en"] .h2{font-size:30px}
  .lead{font-size:17px}
  .center{margin-bottom:32px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fcard{padding:16px 14px;gap:8px;border-radius:16px}
  .ficon{width:40px;height:40px;border-radius:11px}.ficon svg{width:22px;height:22px}
  .fcard h3{font-size:16px}.fcard p{font-size:13.5px;line-height:1.5}
  .tv-shot{padding-inline-end:0;padding-block-end:0}
  .tv-shot .phone{display:none}
  .ticks li{font-size:16px}
  .three{margin-top:36px;gap:10px}
  .plat{padding:16px 14px;border-radius:16px}
  .plat .nm{font-size:17px;line-height:1.3}.plat .os{font-size:13px}.plat p{font-size:13.5px;line-height:1.5}
  .plat .ph svg{width:28px;height:28px}.plat .sn{font-size:11.5px;padding:2px 8px}
  .mpoints{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:36px}
  .row-c{margin-top:32px}.row-c .btn{width:100%}
  .chip{min-height:44px;font-size:17px;padding:0 18px}
  .box{padding:24px 20px;border-radius:22px}
  .plan{padding:28px 20px}
  .form{padding:22px 18px}
  .frow{grid-template-columns:minmax(0,1fr)}
  .fend .btn{width:100%}
  .faq details{padding:0 18px}.faq summary{font-size:17px;min-height:60px}
  .foot nav{flex-direction:column;gap:4px}.foot nav a{min-height:44px;display:flex;align-items:center}
  .doc{padding:40px 16px 64px}.doc-head h1{font-size:34px}
}
/* [PRIVACY] /delete-data/ (tools/build_landing.py delete_data, assets/delete-data.js) */
.doc .form.dd{margin:12px 0 28px;box-shadow:0 10px 30px rgba(5,41,31,.12)}
.form .dd-chk span{display:flex;align-items:flex-start;gap:10px;font-weight:600}
.form .dd-chk input{width:auto;min-height:0;margin:4px 0 0;flex:none}
.dd-out:empty{display:none}
.dd-out{font-weight:700;color:var(--green-d)}
.dd-out.dd-bad{color:#9B2C1F}

/* [LOGO] «المصحف الرقمي» wordmark images (tightened Ruqaa, tools/brand/wordmark.py) */
.brand .wm{width:auto;height:40px;border-radius:0}
.wordmark img{display:block;height:116px;width:auto;max-width:100%}
.wm-en{height:62px;width:auto;max-width:100%}
.wm-foot{height:34px;width:auto;vertical-align:middle}
@media (max-width:640px){.brand .wm{height:30px}.wordmark img{height:78px}.wm-en{height:48px}}

/* [DEMOS] «تركيز الكلمة» (word-by-word focus, a Raqami Plus feature) and «نجوم الحفظ» (a star earned): assets/demos.js.
   Only transform and opacity animate; prefers-reduced-motion shows one still frame. */
.demo-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.plus-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:999px;font-size:14px;font-weight:800;
  background:linear-gradient(180deg,#F0CB6A,#E6B94A 55%,#C99A2E);color:var(--green-d);box-shadow:0 4px 16px rgba(230,185,74,.25)}
.plus-badge .pb-star{color:var(--green-d)}
.fd{margin:0}
.fd figcaption{margin-top:14px;text-align:center;font-size:14px;color:var(--on-dark)}
.fd-screen{aspect-ratio:16/9;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:4%;padding:4% 6%;
  background:radial-gradient(ellipse at 50% 35%,#0F4536,#062A20 60%,#031A13);color:#F5EEDC;position:relative}
.fd-head{position:absolute;top:5%;inset-inline:6%;display:flex;justify-content:space-between;font-size:clamp(11px,1.1vw,14px);color:rgba(245,238,220,.6);font-family:'Tajawal',system-ui,sans-serif}
.fd-ayah{margin:0;text-align:center;font-size:clamp(26px,3.3vw,48px);line-height:2.15;word-spacing:.08em}
.fd-ayah .fw,.fd-ayah .fm{display:inline-block;transition:opacity .45s ease,transform .35s cubic-bezier(.2,.8,.3,1);transform-origin:50% 60%}
.fd-ayah .fw{text-shadow:0 0 .35em rgba(230,185,74,.0)}
.fd-ayah .fm{color:#E6B94A;font-size:.9em}
.fd.live .fd-ayah .fw,.fd.live .fd-ayah .fm{opacity:.45}
.fd.live .fd-ayah .fw.cur{opacity:1;transform:translateY(-.07em) scale(1.06);text-shadow:0 0 .25em rgba(230,185,74,.55),0 0 .6em rgba(230,185,74,.25)}
.fd-prog{position:absolute;bottom:7%;inset-inline:18%;height:3px;border-radius:2px;background:rgba(230,185,74,.16);overflow:hidden}
.fd-prog span{display:block;height:100%;background:linear-gradient(90deg,#B8861B,#F0CB6A);transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s linear}
.fd.reset .fd-prog span{transition:none}

.stars-sec{background-color:#141C4A;background-image:radial-gradient(ellipse at 30% 0%,rgba(80,100,200,.35),rgba(20,28,74,0) 60%);color:var(--cream)}
.stars-sec .h2{color:var(--cream)}.stars-sec .lead{color:#D6D3E6}
.stars-sec .eyebrow{color:var(--gold)}.stars-sec .eyebrow::before{background:var(--gold)}
.sd{margin:0;max-width:520px;justify-self:center;width:100%;border-radius:28px;padding:22px;background:linear-gradient(180deg,#1E2A63,#121A44);
  border:1px solid rgba(230,185,74,.35);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.sd-top{display:flex;justify-content:space-between;align-items:center}
.sd-title{font-weight:800;color:var(--cream);font-size:18px}
.sd-count{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(230,185,74,.45);font-size:22px;font-weight:800;color:#FFE7A0}
.sd-stage{position:relative;height:280px;overflow:hidden}
.sd-glow{position:absolute;left:50%;top:44%;width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,215,120,.55),rgba(230,185,74,.18) 55%,rgba(230,185,74,0));opacity:0;transform:scale(.6);transition:opacity .6s ease,transform .9s ease}
.sd-fly{position:absolute;left:50%;top:44%;width:150px;height:150px;margin:-75px 0 0 -75px;transition:transform .75s cubic-bezier(.55,0,.25,1),opacity .25s ease .55s}
.sd-star{position:relative;width:100%;height:100%;opacity:0;transform:scale(0);
  clip-path:polygon(50% 2.8%,65% 33.9%,98.9% 38.9%,74.4% 62.8%,80% 96.7%,50% 80.6%,20% 96.7%,25.6% 62.8%,1.1% 38.9%,35% 33.9%)}
.sd-star svg{display:block;width:100%;height:100%}
.sd-sweep{position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 65%);transform:translateX(-130%)}
.sd-sp{position:absolute;left:50%;top:44%;width:14px;height:14px;margin:-7px 0 0 -7px;color:#FFE08A;opacity:0}
.sd-sp svg{display:block}
.sp1{--tx:0px;--ty:-118px;--s:1}.sp2{--tx:104px;--ty:-58px;--s:.7}.sp3{--tx:110px;--ty:50px;--s:1.1}
.sp4{--tx:-6px;--ty:112px;--s:.6}.sp5{--tx:-108px;--ty:52px;--s:.9}.sp6{--tx:-102px;--ty:-62px;--s:1.2}
.sd-msg{position:absolute;bottom:6px;inset-inline:0;margin:0;text-align:center;font-weight:800;font-size:18px;color:#FFE7A0;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.sd-card{display:flex;align-items:center;gap:14px;margin-top:8px;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(230,185,74,.55)}
.sd-card b{font-size:20px;color:var(--cream);flex:1}
.sd-n{font-size:13px;color:#C9C3E0;min-width:28px}
.sd-stars{display:inline-flex;gap:4px;align-items:center}
.sd-s{display:block}.sd-s.on{color:#E6B94A}.sd-s.off{color:rgba(230,185,74,.55)}
.sd-s3{position:relative;display:inline-block;width:22px;height:22px}
.sd-s3 .lit{position:absolute;inset:0;opacity:0;transform:scale(.3);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes sd-spring{0%{opacity:0;transform:scale(0) rotate(-30deg)}55%{opacity:1;transform:scale(1.14) rotate(5deg)}75%{transform:scale(.96) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sd-sweep{to{transform:translateX(130%)}}
@keyframes sd-spark{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(var(--s)) rotate(72deg)}}
@keyframes sd-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.18)}}
.sd.p-in .sd-star{animation:sd-spring .9s cubic-bezier(.2,.8,.2,1) forwards}
.sd.p-in .sd-sweep{animation:sd-sweep .9s ease .8s forwards}
.sd.p-in .sd-sp{animation:sd-spark 1.1s ease-out .5s forwards}
.sd.p-in .sd-glow{opacity:.9;transform:scale(1)}
.sd.p-in .sd-msg{opacity:1;transform:none;transition-delay:.55s}
.sd.p-fly .sd-fly{transform:translate(var(--fx,0),var(--fy,-180px)) scale(.15);opacity:0}
.sd.p-fly .sd-glow,.sd.p-fly .sd-msg{opacity:0;transition-delay:0s}
.sd.p-land .sd-count{animation:sd-pop .5s ease}
.sd.p-land .sd-s3 .lit{opacity:1;transform:scale(1)}
.sd.p-reset *{transition:none !important}
.sd.p-static .sd-star{opacity:1;transform:none}
.sd.p-static .sd-glow{opacity:.6;transform:none}
.sd.p-static .sd-msg{opacity:1;transform:none}
.sd.p-static .sd-s3 .lit{opacity:1;transform:none}
@media (max-width:1100px){.demo-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .fd-ayah{font-size:clamp(20px,6.2vw,30px);line-height:2}
  .fd-screen{padding:6% 5% 4%}
  .fd-head{font-size:10px}
  .sd{padding:16px;border-radius:22px}
  .sd-stage{height:230px}
  .sd-fly{width:120px;height:120px;margin:-60px 0 0 -60px}
  .sd-glow{width:220px;height:220px;margin:-110px 0 0 -110px}
  .sp1{--ty:-96px}.sp2{--tx:84px;--ty:-48px}.sp3{--tx:88px;--ty:40px}.sp4{--ty:92px}.sp5{--tx:-86px;--ty:42px}.sp6{--tx:-82px;--ty:-50px}
  .sd-msg{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.fd-ayah .fw,.fd-ayah .fm,.fd-prog span{transition:none}}
.sd-fly{z-index:2}.sd-msg{z-index:3}

/* [BOARD] the animated mosque board (tools/build_landing.py board_section; assets/demos.js): a replica of the app's
   masjid board (mushaf/masjid.js, the green theme). Sizes in cqw, the screen's width; only transform and opacity animate. */
.mbd{margin:0}
.mbd figcaption{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}
.mb-screen{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;container-type:inline-size;background:#062A20;color:#F5EEDC;font-family:'Tajawal',system-ui,sans-serif;line-height:1.25}
html[lang="en"] .mb-screen{font-family:'Manrope',system-ui,sans-serif}
.mb-layer{position:absolute;inset:0;display:flex;opacity:0;transition:opacity .9s ease}
.mb-layer.on{opacity:1}
.mb-board{background:radial-gradient(ellipse at 50% 30%,#0E4434,#06291F 70%)}
.mb-frame{position:relative;flex:1;margin:1.4cqw;border:1px solid rgba(230,185,74,.22);border-radius:1.2cqw;padding:2cqw 2.4cqw 1.3cqw;display:flex;flex-direction:column}
.mb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2cqw}
.mb-name{font-size:3.6cqw;font-weight:800;color:#F0CB6A;line-height:1.1}
.mb-dates{display:flex;flex-direction:column;align-items:flex-start;gap:.3cqw;font-size:1.45cqw;color:#E9DFC6}
html[dir="ltr"] .mb-dates{align-items:flex-end}
.mb-hj{color:#E6B94A}
.mb-mid{flex:1;display:flex;align-items:center;justify-content:space-around;gap:3cqw}
.mb-clock{display:flex;align-items:flex-end;gap:1.2cqw;color:#F7F0DE}
.mb-hm{display:flex;align-items:baseline}
.mb-hhmm{font-size:12.5cqw;font-weight:800;line-height:1}
.mb-ss{display:inline-block;font-size:4.6cqw;font-weight:700;color:#E9DFC6;margin-left:.5cqw;font-variant-numeric:tabular-nums}
.mb-ap{font-size:3cqw;font-weight:700;color:#E6B94A;padding-bottom:1cqw}
.mb-cdbox{display:flex;flex-direction:column;align-items:center;gap:.7cqw;padding:1.6cqw 3cqw;border-radius:1.4cqw;background:rgba(230,185,74,.13);border:1px solid rgba(230,185,74,.45)}
.mb-cdl{font-size:2.1cqw;font-weight:700;color:#F0CB6A}
.mb-cd{display:inline-block;font-size:6cqw;font-weight:800;line-height:1;color:#FFF6E0;font-variant-numeric:tabular-nums}
.mb-cells{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9cqw}
.mb-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2cqw;padding:1cqw .4cqw 1.1cqw;border-radius:.9cqw;background:rgba(255,255,255,.035);border:1px solid rgba(230,185,74,.2)}
.mb-pn{font-size:2.4cqw;font-weight:800;color:#F0CB6A}
.mb-l{font-size:1.05cqw;color:#BFB59B}
.mb-t{font-size:2.6cqw;font-weight:800;color:#F7F0DE}
.mb-t2{font-size:2cqw;font-weight:700;color:#E9DFC6}
.mb-t small,.mb-t2 small{font-size:.55em;font-weight:700;color:#E6B94A;margin-inline-start:.25em}
.mb-cell.nx{background:rgba(230,185,74,.14);border-color:#E6B94A}
.mb-cell.nx::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 2.2cqw rgba(230,185,74,.5);opacity:.35;animation:mb-glow 2.4s ease-in-out infinite alternate;animation-play-state:paused}
.mbd.run .mb-cell.nx::after{animation-play-state:running}
@keyframes mb-glow{to{opacity:1}}
.mb-ann{display:flex;align-items:center;gap:1.4cqw;margin-top:1.2cqw;padding-top:1.1cqw;border-top:1px solid rgba(230,185,74,.22);font-size:1.9cqw;color:#F5EEDC}
.mb-pill{flex:none;padding:.35cqw 1.2cqw;border-radius:99px;background:#E6B94A;color:#05291F;font-weight:800;font-size:1.5cqw}
.mb-adhan,.mb-iqama{background:radial-gradient(ellipse at 50% 45%,#0C3A2B,#06261C 75%)}
.mb-salah{background:#060706}
.mb-c{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7cqw;transform:scale(.96);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.mb-layer.on .mb-c{transform:none}
.mb-k{font-size:3cqw;color:#D8CDB0}
.mb-big{font-size:13cqw;font-weight:800;color:#F2D58A;line-height:1.2}
.mb-k2{font-size:2.4cqw;color:#D8CDB0}
.mb-pr{font-size:6.5cqw;font-weight:800;color:#F2D58A;line-height:1.15}
.mb-icd{display:inline-block;font-size:10cqw;font-weight:800;color:#F2D58A;line-height:1;font-variant-numeric:tabular-nums}
.mb-str{font-size:3cqw;font-weight:800;color:#F2D58A;margin-top:.8cqw}
.mb-ph{display:inline-flex;align-items:center;gap:.8cqw;font-size:2.2cqw;color:#E9DFC6}
.mb-ph svg{width:2.4cqw;height:2.4cqw;color:#E8836B}
.mb-sl{font-size:5cqw;font-weight:800;color:#8C806A}
.mb-st{font-size:1.7cqw;color:#5E5648}
.mb-tick{animation:mb-tick .5s ease}
@keyframes mb-tick{from{opacity:.3;transform:translateY(-.08em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mb-layer,.mb-c{transition:none}.mb-cell.nx::after{animation:none;opacity:.8}.mb-tick{animation:none}}

/* [PLUS] «الرقمي بلس» / Raqami Plus: the family plan's features (tools/build_landing.py plus_section) */
.plus-sec .center .plus-badge{margin-bottom:4px}
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pgrid li{display:flex}
.pcard{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 20px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(230,185,74,.28);color:var(--cream);text-decoration:none}
a.pcard:hover{border-color:var(--gold);background:rgba(230,185,74,.08);color:var(--cream)}
.picon{width:46px;height:46px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#F0CB6A,#E6B94A 55%,#C99A2E);color:var(--green-d)}
.ptxt{display:flex;flex-direction:column;gap:6px}
.ptxt b{font-size:17.5px;font-weight:800;line-height:1.35;color:var(--cream)}
.ptxt>span:not(.pdemo){font-size:15px;line-height:1.55;color:var(--on-dark)}
.pdemo{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:800;color:var(--gold)}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .pgrid{grid-template-columns:minmax(0,1fr);gap:10px}
  .pcard{flex-direction:row;align-items:flex-start;gap:14px;padding:16px;border-radius:16px}
  .picon{width:40px;height:40px;border-radius:11px}
  .ptxt b{font-size:16px}.ptxt>span:not(.pdemo){font-size:14px}
}

/* [NIGHT] «قراءة ليلية هادئة» (tools/build_landing.py night_section; assets/demos.js): a replica of the app's «ليل هادئ»
   (mushaf_tv_night.js, sand on deep indigo) under the night profile's sky (a gold crescent, five-point stars). Sizes in cqw,
   the screen's width; only transform and opacity animate; prefers-reduced-motion shows one still frame. */
.ndm{margin:0}
.ndm .tv{background:#05070d;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(191,175,146,.18)}
.ndm figcaption{margin-top:14px;text-align:center;font-size:14px;color:#B9B09A}
.nd-screen{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;container-type:inline-size;background:#000;color:#bfaf92;font-family:'Tajawal',system-ui,sans-serif;line-height:1.3}
html[lang="en"] .nd-screen{font-family:'Manrope',system-ui,sans-serif}
.nd-layer{position:absolute;inset:0;display:flex;opacity:0;transition:opacity .8s ease}
.nd-layer.on{opacity:1}
.nd-sky{background:radial-gradient(ellipse at 50% 35%,#0d1430,#070b1a 62%,#03050c)}
.nd-svg{position:absolute;inset:0;width:100%;height:100%}
.nd-dots{opacity:.4}
.nd-tw,.nd-mglow{transform-box:fill-box;transform-origin:center}
.nd-tw{opacity:.6;animation:nd-tw 3s ease-in-out infinite alternate;animation-play-state:paused}
.nd-mglow{opacity:.35;animation:nd-mg 4s ease-in-out infinite alternate;animation-play-state:paused}
.ndm.run .nd-tw,.ndm.run .nd-mglow{animation-play-state:running}
@keyframes nd-tw{from{opacity:.2;transform:scale(.72)}to{opacity:.95;transform:scale(1)}}
@keyframes nd-mg{from{opacity:.2;transform:scale(.92)}to{opacity:.5;transform:scale(1.06)}}
/* the calm screen: the ayah in soft sand, the recited word clear and the rest dimmed (.38); «⏾ …» and «الملك · ١» tiny and dim */
.nd-calm{align-items:center;justify-content:center;padding:0 9cqw;transition:opacity 1.4s ease}
.nd-ayah{margin:0;text-align:center;font-size:3.7cqw;line-height:2.15;color:#e6d9b8;transform:translateY(-1.5cqw)}
.nd-ayah .nw,.nd-ayah .nm{display:inline-block;transition:opacity .45s ease}
.nd-ayah .nm{color:#a8956a;font-size:.9em}
.ndm.live .nd-ayah .nw,.ndm.live .nd-ayah .nm{opacity:.5}
.ndm.live .nd-ayah .nw.cur{opacity:1}
.nd-cd,.nd-ref{position:absolute;left:3cqw;display:inline-flex;align-items:center;gap:.6cqw;color:#b9ad8c;opacity:.55;font-size:1.6cqw;white-space:nowrap;font-variant-numeric:tabular-nums}
.nd-cd{bottom:6cqw}.nd-ref{bottom:3cqw}
.nd-cd svg{width:1.7cqw;height:1.7cqw}
.nd-cdt,.nd-refn{font-weight:400}
.nd-ask{position:absolute;left:50%;bottom:8.5cqw;padding:.6cqw 2cqw;border-radius:2cqw;background:rgba(6,10,24,.7);border:1px solid rgba(191,175,146,.14);color:#bfaf92;font-size:1.9cqw;white-space:nowrap;
  opacity:0;transform:translate(-50%,.8cqw);transition:opacity .5s ease,transform .5s ease}
.ndm.ask .nd-ask{opacity:.85;transform:translate(-50%,0)}
/* the start card (#tvNight .nr-card) */
.nd-start{align-items:center;justify-content:center;background:rgba(3,5,12,.72)}
.nd-card{width:66cqw;padding:2.2cqw 2.8cqw 2cqw;border-radius:1.8cqw;background:rgba(7,11,26,.94);border:1px solid rgba(191,175,146,.16);box-shadow:0 2cqw 5cqw rgba(0,0,0,.45);
  font-size:1.85cqw;transform:translateY(1.2cqw) scale(.97);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.nd-start.on .nd-card{transform:none}
.nd-h{display:flex;align-items:center;justify-content:center;gap:.8cqw;margin-bottom:1.2cqw;font-size:2.3cqw;font-weight:600;color:#cbbf9f}
.nd-h svg,.nd-b svg{width:1.15em;height:1.15em}
.nd-f{display:flex;align-items:center;gap:1cqw;padding:.85cqw 0;border-top:1px solid rgba(191,175,146,.08)}
.nd-l{flex:0 0 14cqw;color:#8f8670;font-size:.92em}
.nd-v{flex:1;display:flex;align-items:center;gap:.8cqw;min-width:0}
.nd-name{color:#d2c4a4;font-weight:500;margin-inline-end:.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-b{position:relative;display:inline-flex;align-items:center;gap:.5cqw;padding:.45cqw 1.3cqw;border-radius:1.1cqw;border:1px solid rgba(191,175,146,.22);white-space:nowrap;transition:transform .15s ease}
.nd-b.on{background:rgba(191,175,146,.13);border-color:rgba(191,175,146,.5);color:#d8caa9}
.nd-spd{min-width:5cqw;text-align:center;color:#d8caa9;font-weight:600;font-variant-numeric:tabular-nums}
.nd-acts{display:flex;justify-content:center;gap:1.2cqw;margin-top:.4cqw;padding-top:1.4cqw;border-top:1px solid rgba(191,175,146,.08)}
.nd-go{font-size:1.12em;padding:.55cqw 4.2cqw;border-color:rgba(191,175,146,.55);color:#d8caa9}
.nd-go::before,.nd-go::after{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;transition:opacity .3s ease}
.nd-go::before{background:rgba(191,175,146,.2)}
.nd-go::after{inset:-.45cqw;border:2px solid rgba(203,191,159,.7);border-radius:1.5cqw}
.nd-go.kf::after{opacity:1}
.nd-go.press{transform:scale(.93)}
.nd-go.press::before{opacity:1}
/* the end: the screen fades to black, a calm line */
.nd-off{align-items:center;justify-content:center;background:#000;transition:opacity 1.4s ease}
.nd-offc{display:flex;flex-direction:column;align-items:center;gap:1cqw;text-align:center;opacity:0;transform:translateY(.6cqw);transition:opacity 1.2s ease,transform 1.2s ease}
.ndm.bye .nd-offc{opacity:.75;transform:none}
.nd-o1{font-size:1.9cqw;color:#8f8670}
.nd-o2{font-size:3cqw;color:#bfaf92}
.ndm.reset *{transition:none !important}
@media (max-width:640px){
  .nd-card{width:86cqw;padding:2.4cqw 3.4cqw;font-size:2.9cqw}
  .nd-h{font-size:3.3cqw;margin-bottom:1cqw}
  .nd-f{padding:.9cqw 0}
  .nd-l{flex-basis:23cqw}
  .nd-x{display:none}
  .nd-calm{padding:0 5cqw}
  .nd-ayah{font-size:4.5cqw;line-height:2}
  .nd-cd,.nd-ref{font-size:2.5cqw}.nd-cd svg{width:2.6cqw;height:2.6cqw}.nd-cd{bottom:7.5cqw}
  .nd-ask{font-size:2.9cqw;bottom:10cqw}
  .nd-o1{font-size:3cqw}.nd-o2{font-size:4.4cqw}
}
@media (prefers-reduced-motion:reduce){.nd-layer,.nd-card,.nd-ayah .nw,.nd-ayah .nm,.nd-ask,.nd-offc,.nd-b{transition:none}.nd-tw,.nd-mglow{animation:none}}

/* [KIDS-SOON] «قريبًا للأطفال» (tools/build_landing.py kids_soon_section; assets/demos.js): kids features designed but not
   built yet, inside the kids chapter under one «قريبًا» label. The demo: named juz 30 stars light while they circle, then the juz crown
   rises; blue (boys) then pink (girls). Only transform and opacity animate; prefers-reduced-motion: one still frame. */
.plus-badge.sm{font-size:12.5px;padding:4px 10px 4px 9px;gap:6px;box-shadow:none}
.ks-soon{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;border:1px dashed var(--gold);color:var(--gold);font-size:12.5px;font-weight:800;line-height:1.4}
.ks-card{background:rgba(255,255,255,.05)}
.ksd{margin:0;max-width:520px;justify-self:center;width:100%;border-radius:28px;padding:22px;background:linear-gradient(180deg,#1E2A63,#121A44);
  border:1px solid rgba(230,185,74,.35);box-shadow:0 30px 70px rgba(0,0,0,.4);--ks:#6FA8FF;--ks-l:#D3E4FF}
.ksd.pink{--ks:#FF8FC0;--ks-l:#FFDCEB}
.ksd figcaption{margin-top:10px;text-align:center;font-size:14px;color:#C9C3E0}
.ks-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ks-title{display:inline-flex;gap:8px;align-items:center;font-weight:800;color:var(--cream);font-size:17px}
.ks-title svg{color:var(--gold)}
.ks-g{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(230,185,74,.3);font-size:13px;font-weight:800}
.ks-g span{padding:3px 12px;border-radius:999px;color:#C9C3E0}
.ksd:not(.pink) .ks-gb,.ksd.pink .ks-gg{background:var(--ks);color:#121A44}
.ks-stage{position:relative;height:340px;overflow:hidden;--r:112px;margin-top:6px}
.ks-glow,.ks-ring,.ks-cw{position:absolute;left:50%;top:45%}
.ks-glow{width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;background:radial-gradient(circle,rgba(230,185,74,.42),rgba(230,185,74,0) 65%);
  opacity:0;transform:scale(.6);transition:opacity .6s ease,transform .8s ease}
.ks-ring{width:0;height:0}
.ks-ring::before{content:"";position:absolute;width:calc(var(--r) * 2);height:calc(var(--r) * 2);left:calc(var(--r) * -1);top:calc(var(--r) * -1);
  border-radius:50%;border:1px dashed rgba(230,185,74,.22)}
.ks-o{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))}
.ks-up{position:absolute;left:-44px;top:-24px;width:88px;display:flex;justify-content:center}
.ksd.run .ks-ring{animation:ks-spin 40s linear infinite}
.ksd.run .ks-up{animation:ks-spin 40s linear infinite reverse}
@keyframes ks-spin{to{transform:rotate(360deg)}}
.ks-s{display:flex;flex-direction:column;align-items:center;gap:1px;opacity:.3;transform:scale(.78);transition:opacity .45s ease,transform .55s cubic-bezier(.3,1.7,.5,1)}
.ks-s.on{opacity:1;transform:none}
.ks-st{display:block;color:var(--ks)}
.ks-s b{font-size:12.5px;font-weight:800;line-height:1.3;color:var(--ks-l);white-space:nowrap}
.ks-cw{width:120px;height:96px;margin:-52px 0 0 -60px;opacity:.14;transform:scale(.82);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.9,.3,1.35)}
.ks-crown{display:block;width:100%;height:100%}
.ks-cs{fill:var(--ks)}
.ks-msg{position:absolute;bottom:4px;inset-inline:0;margin:0;text-align:center;font-weight:800;font-size:17px;color:#FFE7A0;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.ksd.crown .ks-cw{opacity:1;transform:translateY(-4px) scale(1.06)}
.ksd.crown .ks-glow{opacity:.9;transform:scale(1)}
.ksd.crown .ks-msg{opacity:1;transform:none;transition-delay:.5s}
@media (max-width:640px){
  .ksd{padding:16px;border-radius:22px}
  .ks-stage{height:310px;--r:98px}
  .ks-up{left:-40px;width:80px}
  .ks-s b{font-size:11.5px}
  .ks-msg{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){.ksd.run .ks-ring,.ksd.run .ks-up{animation:none}.ks-s,.ks-cw,.ks-glow,.ks-msg{transition:none}}

/* [RIVALS] «المتنافسون» (tools/build_landing.py rivals_section; assets/demos.js): within the family = free, with friends =
   Raqami Plus, both «قريبًا». The heading is Al-Mutaffifin 83:26 in the Quran font. The demo: letter avatars (no faces)
   hop along the juz 30 stepping stones while the shared family bar fills. Only transform and opacity animate. */

.rv-ayah{font-size:46px;line-height:2;margin:6px 0 0}
.rv-ref{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--gold-t)}
.rv-wrap{margin-top:40px;align-items:start}
.rv-cards{display:flex;flex-direction:column;gap:16px}
.rv-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px}
.rv-card.fr{border:1.5px dashed var(--gold-d)}
.rv-card h4{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:22px;font-weight:800;color:var(--green-d)}
.rv-card h4 svg{color:var(--gold-d)}
.rv-card .ticks{margin-top:16px;gap:10px}.rv-card .ticks li{font-size:16.5px}
.free-badge{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;background:var(--green);color:var(--cream);font-size:12.5px;font-weight:800;line-height:1.5}
.rv-safe{display:flex;gap:10px;align-items:flex-start;margin:0;padding:14px 18px;border-radius:16px;background:rgba(10,79,62,.08);border:1px solid rgba(10,79,62,.25);font-weight:700;color:var(--green-d)}
.rv-safe svg{flex:none;margin-top:3px;color:var(--green)}
.rvd{margin:0;width:100%;max-width:560px;justify-self:center;border-radius:28px;padding:22px;background:linear-gradient(180deg,#0F4536,#062A20);
  border:1px solid rgba(230,185,74,.4);box-shadow:0 30px 70px rgba(5,41,31,.3);color:var(--cream)}
.rvd figcaption{margin-top:10px;text-align:center;font-size:14px;color:var(--on-dark)}
.rv-title{display:inline-flex;gap:8px;align-items:center;font-weight:800;font-size:17px}
.rv-title svg{color:var(--gold)}
.rv-stage{position:relative;height:240px;margin-top:6px}
.rv-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rv-line polyline{fill:none;stroke:rgba(230,185,74,.35);stroke-width:2;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.rv-st{position:absolute;width:70px;margin-inline-start:-35px;display:flex;flex-direction:column;align-items:center;gap:4px}
.rv-st i{display:block;width:40px;height:16px;border-radius:50%;background:linear-gradient(180deg,#E9DFC4,#B9AC8A);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.rv-st b{font-size:12px;font-weight:700;color:#E8E0C8;white-space:nowrap}
.rv-av{position:absolute;left:0;top:0;width:30px;height:30px;opacity:0;transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .4s ease}
.rvd.live .rv-av{opacity:1}
.rvd.reset .rv-av{transition:none}
.rv-hop,.rv-dot{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c);color:#fff;font-weight:800;border:2px solid #F5EEDC}
.rv-hop{width:30px;height:30px;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.rv-hop.hop{animation:rv-hop .55s ease}
@keyframes rv-hop{0%,100%{transform:none}45%{transform:translateY(-14px) scale(1.08)}}
.rv-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;margin-top:8px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(230,185,74,.3)}
.rv-bl{font-size:14px;font-weight:700;color:var(--on-dark)}
.rv-track{grid-column:1/-1;grid-row:2;height:10px;border-radius:6px;background:rgba(230,185,74,.16);overflow:hidden}
.rv-fill{display:block;height:100%;background:linear-gradient(90deg,#B8861B,#F0CB6A);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s ease}
[dir="ltr"] .rv-fill{transform-origin:0 50%}
.rvd.reset .rv-fill{transition:none}
.rv-medal{display:inline-flex;gap:6px;align-items:center;padding:3px 12px;border-radius:999px;background:linear-gradient(180deg,#F0CB6A,#E6B94A 55%,#C99A2E);color:var(--green-d);font-size:13px;font-weight:800;opacity:0;transform:scale(.6);transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.7,.5,1)}
.rvd.medal .rv-medal{opacity:1;transform:none}
.rv-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;font-size:14.5px;font-weight:700}
.rv-legend li{display:inline-flex;align-items:center;gap:8px}
.rv-dot{width:24px;height:24px;font-size:12px;border-width:1.5px}
.rv-n{color:#FFE7A0;min-width:1em}
@media (max-width:640px){
  .rv-ayah{font-size:30px}
  .rv-card{padding:18px;border-radius:18px}.rv-card h4{font-size:19px}.rv-card .ticks li{font-size:15px}
  .rvd{padding:16px;border-radius:22px}
  .rv-stage{height:220px}
  .rv-st{width:56px;margin-inline-start:-28px}.rv-st i{width:30px;height:13px}.rv-st b{font-size:10.5px}
  .rv-av,.rv-hop{width:26px;height:26px}.rv-hop{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.rv-av,.rv-fill,.rv-medal{transition:none}.rv-hop.hop{animation:none}}

/* [IA] the page's chapters (tools/build_landing.py): each section is one topic, headed by eyebrow + h2 + lead (.center), then
   its sub-blocks (.sub: a badge row .tags, an h3, a lead, its demo). One badge vocabulary: .plus-badge (a Raqami Plus feature),
   .now-tag (available now), .ks-soon (coming soon: once per «قريبًا» block, never on each card), .free-badge; .plan-note: the
   topic's free / paid split, once per topic. «قريبًا» items sit in their own block (.soon-panel, .px-soon, .soon-ul). */
.hero-free{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:700;color:var(--cream)}
.hero-free .tick{color:var(--gold);margin:0}
.h3{font-family:var(--display);font-size:34px;line-height:1.3;font-weight:800;margin:10px 0 14px;color:var(--green-d)}
html[lang="en"] .h3{font-weight:600;line-height:1.2;font-size:36px}
.dark .h3,.stars-sec .h3{color:var(--cream)}
.h3.rv-ayah{font-size:46px;line-height:2;margin:6px 0 0}
.sub{scroll-margin-top:24px}
.sub+.sub,.three+.sub{margin-top:96px}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.now-tag{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:800;line-height:1.5;background:rgba(111,207,151,.14);border:1px solid rgba(111,207,151,.55);color:#C4EED6}
.now-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#6FCF97}
.kicker{display:block;font-size:15px;font-weight:800;color:var(--gold)}
html[lang="en"] .kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.plan-note{display:flex;gap:10px;align-items:flex-start;margin:24px 0 0;padding:14px 18px;border-radius:16px;font-size:16px;background:rgba(230,185,74,.1);border:1px solid rgba(230,185,74,.35);color:var(--cream)}
.plan-note svg{flex:none;margin-top:4px;color:var(--gold)}
.paper .plan-note{background:rgba(10,79,62,.07);border-color:rgba(10,79,62,.22);color:var(--green-d)}
.paper .plan-note svg{color:var(--gold-d)}
/* the masjid chapter, on paper */
.paper .mpoints b{color:var(--green-d)}.paper .mpoints span{color:var(--muted)}
.paper .btn-ghost{color:var(--green-d);border-color:var(--gold-d)}.paper .btn-ghost:hover{color:var(--green-d);background:rgba(230,185,74,.14)}
/* the kids chapter: the «قريبًا» panel (the five coming features + the juz crown demo, then «المتنافسون») */
.soon-panel{margin-top:96px;padding:56px 48px;border-radius:32px;border:1.5px dashed rgba(230,185,74,.55);background:rgba(5,8,30,.28);scroll-margin-top:24px}
.sub-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:40px}
.sub-head .lead{margin-inline:auto}
.soon-panel .sub-head .ks-soon{font-size:14px;padding:4px 16px}
.ks-plus{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15.5px;font-weight:800;color:var(--gold)}
.ks-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ks-list li{display:flex}
.ks-list .pcard{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 18px}
.ks-list .picon{width:40px;height:40px;border-radius:11px}
.rv-sub{margin-top:72px;padding-top:64px;border-top:1px solid rgba(230,185,74,.25);scroll-margin-top:24px}
.rv-sub .sub-head{margin-bottom:0}
.stars-sec .rv-ref{color:var(--gold)}
.stars-sec .tick{color:var(--gold)}
.stars-sec .rv-card{background:rgba(255,255,255,.05);border-color:rgba(230,185,74,.3);color:var(--cream)}
.stars-sec .rv-card.fr{border:1.5px dashed rgba(230,185,74,.6)}
.stars-sec .rv-card h4{color:var(--cream)}
.stars-sec .rv-card h4 svg{color:var(--gold)}
.rv-card h4{flex-wrap:wrap}
.rv-card h4 .free-badge,.rv-card h4 .plus-badge{margin-inline-start:auto}
.stars-sec .free-badge{background:#256B4D;color:#fff}
.stars-sec .rv-safe{background:rgba(230,185,74,.08);border-color:rgba(230,185,74,.3);color:var(--cream)}
.stars-sec .rv-safe svg{color:var(--gold)}
/* [KIDS-NEW] the new kids features (built): a «مجاني» list then a «الرقمي بلس» list, beside the juz crown demo */
.kn-h{display:flex;margin:0 0 12px}
.kn-h+.ks-list{margin-bottom:26px}
.ks-list+.kn-h{margin-top:4px}
.kn-sub .ks-row{align-items:start}
.kn-sub .ksd{position:sticky;top:24px}
/* [HOW-STARS] «كيف يحصل الطفل على النجوم؟»: one row per kind of star, the icon in its app colour (five-point stars only) */
.hs-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.hs-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(230,185,74,.25)}
.hs-ic{position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:2px;width:64px;height:48px}
.hs-ic svg{display:block}
.hs-n{position:absolute;inset-inline-end:6px;bottom:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#0E1538;border:2px solid #FFD23F;color:#fff;font-size:12.5px;font-weight:800;line-height:1}
.hs-row .ptxt{display:flex;flex-direction:column;gap:3px}
.hs-row b{font-size:18px;font-weight:800;color:var(--cream)}
.hs-row .ptxt>span{font-size:15.5px;color:#C9C3E0;line-height:1.55}
@media (max-width:900px){.hs-grid{grid-template-columns:minmax(0,1fr)}.kn-sub .ksd{position:static}}
@media (max-width:640px){.hs-row{padding:14px;gap:12px}.hs-ic{width:54px}.hs-row b{font-size:16.5px}.hs-row .ptxt>span{font-size:14.5px}}
/* [PARENTS] «وصول الوالدين» (coming soon, Raqami Plus): its points, and a phone mock of one child's card in parent mode
   (example data, a letter avatar, five-point stars). Only the toast moves (transform, opacity); reduced motion: still. */
.pa-sub{margin-top:72px;padding-top:64px;border-top:1px solid rgba(230,185,74,.25)}
.pa-sub .sub-head .tags{justify-content:center;margin-top:8px}
.pa-wrap{align-items:start}
.pa-safe{margin-top:14px}
.pam{margin:0;justify-self:center;width:100%;max-width:340px}
.pam figcaption{margin-top:12px;text-align:center;font-size:14px;color:#C9C3E0}
.pa-phone{border-radius:40px;padding:12px;background:#0B0F26;border:1px solid rgba(230,185,74,.4);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.pa-scr{position:relative;overflow:hidden;border-radius:30px;padding:18px 16px 70px;background:linear-gradient(180deg,#FBF7EC,#F3EBD6);color:#1D2420;min-height:520px}
.pa-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px 14px;font-size:14px}
.pa-bar b{font-size:16px;color:#0A4F3E}.pa-bar span{color:#5C665F;font-weight:700}
.pa-kid{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:22px;background:#fff;border:1px solid #E8DDC2;box-shadow:0 8px 22px rgba(10,79,62,.08)}
.pa-who{display:flex;align-items:center;gap:12px}
.pa-who b{display:block;font-size:19px;color:#05291F}.pa-who small{color:#5C665F;font-size:13px}
.pa-av{width:42px;height:42px;font-size:18px}
.pa-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pa-stats li{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:14px;background:#F7F1E1;color:#0A4F3E}
.pa-stats li svg{color:#B8861B}.pa-stats b{font-size:18px;line-height:1.2;color:#05291F}.pa-stats small{font-size:11.5px;color:#5C665F;text-align:center}
.pa-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;font-size:14.5px}
.pa-l{font-size:13px;font-weight:700;color:#5C665F}
.pa-pray{display:inline-flex;align-items:center;gap:2px;color:#3D8BFF}
.pa-ps{color:#C9D6EA}.pa-ps.on{color:#3D8BFF}
.pa-pray b{margin-inline-start:6px;font-size:13.5px;color:#05291F}
.pa-now b{color:#05291F}
.pa-track{flex-basis:100%;height:8px;border-radius:5px;background:#EFE6CF;overflow:hidden}
.pa-track span{display:block;width:60%;height:100%;border-radius:5px;background:linear-gradient(90deg,#0A4F3E,#2F7D5B)}
[dir="rtl"] .pa-track span{margin-inline-start:0}
.pa-hwt{flex-basis:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#EDF6F0;color:#0A4F3E;font-weight:700;font-size:14px}
.pa-hwt i{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#2F7D5B;color:#fff;flex:none}
.pa-acts{display:flex;gap:8px}
.pa-btn{flex:1;text-align:center;padding:9px 8px;border-radius:999px;border:1px solid #0A4F3E;color:#0A4F3E;font-size:13.5px;font-weight:800}
.pa-btn.pri{background:#0A4F3E;color:#FBF7EC}
.pa-toast{position:absolute;inset-inline:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:#0E1538;color:#FFF8E6;font-size:14px;font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.25);animation:pa-toast 7s ease-in-out infinite}
@keyframes pa-toast{0%,12%{opacity:0;transform:translateY(16px)}20%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(16px)}}
@media (max-width:640px){.pa-sub{margin-top:44px;padding-top:40px}.pa-scr{min-height:0}}
@media (prefers-reduced-motion:reduce){.pa-toast{animation:none}}
/* «الرقمي بلس»: the «قريبًا» row under the grid of available features */
.px-soon{display:flex;align-items:center;gap:18px;margin-top:16px;padding:20px 22px;border-radius:20px;border:1.5px dashed rgba(230,185,74,.55);background:rgba(230,185,74,.06);color:var(--cream);text-decoration:none}
.px-soon:hover{border-color:var(--gold);background:rgba(230,185,74,.1);color:var(--cream)}
.px-soon .ptxt{flex:1}
.plus-sec .row-c{margin-top:36px}
/* plans: the «قريبًا» items grouped after the available ones */
.plan .soon-h{margin:-2px 0 -8px}
.plan .soon-h .ks-soon{color:var(--gold-t);border-color:var(--gold-d)}
.plan.feat .soon-h .ks-soon{color:var(--gold);border-color:var(--gold)}
.plan .soon-ul li{color:var(--muted)}
.plan.feat .soon-ul li{color:var(--on-dark)}
.plan .soon-ul li svg,.plan.feat .soon-ul li svg{color:var(--muted)}
.plan.feat .soon-ul li svg{color:rgba(230,185,74,.6)}
@media (max-width:640px){
  .hero-free{font-size:15px;justify-content:center}
  .h3,html[lang="en"] .h3{font-size:25px}
  .h3.rv-ayah{font-size:30px}
  .sub+.sub,.three+.sub{margin-top:56px}
  .soon-panel{margin-top:56px;padding:32px 14px;border-radius:22px}
  .sub-head{margin-bottom:28px}
  .rv-sub{margin-top:44px;padding-top:40px}
  .ks-list .pcard{padding:14px}
  .px-soon{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .plus-sec .row-c .btn{width:100%}
}
.rv-sub .kicker{margin-bottom:8px}.rv-sub .rv-ref{margin-top:6px}
/* the nav: seven chapter links on one line down to the 1100px menu switch */
.navlink{white-space:nowrap}
@media (max-width:1240px){.navlinks{gap:14px}.navlink{font-size:15px}}

/* [ZELLIGE] backgrounds from tools/brand/make_zellige.py (our own star-and-octagon tiling, in the app's colours).
   Only a few sections (hero, kids, masjid; plus the footer frieze) get one corner of a fade panel on a ::before under its content: a box of at most 42% x 60% of the
   section, masked by a radial gradient so the pattern is full only in the very corner and fully transparent long
   before the content; one low opacity for all. No other background texture anywhere. The corner alternates: .zl-be (bottom-end) and .zl-ts (top-start), mirrored in RTL.
   The panel's own colour corner is its bottom-right, so the box is flipped toward its corner (the mask flips with it). */
.zl,.foot{position:relative}
.zl>*,.foot>.wrap{position:relative;z-index:1}
.zl>.nav{z-index:5}
.zl::before,.foot::before{content:"";position:absolute;pointer-events:none;z-index:0}
.zl::before{width:min(36%,560px);height:min(60%,520px);background:url(patterns/zellige-app-light-fade.svg?v=045d61ef) right bottom/1100px auto no-repeat;opacity:.4;
  -webkit-mask-image:radial-gradient(farthest-corner at 100% 100%,#000 0,rgba(0,0,0,.45) 24%,rgba(0,0,0,.1) 44%,transparent 62%);
  mask-image:radial-gradient(farthest-corner at 100% 100%,#000 0,rgba(0,0,0,.45) 24%,rgba(0,0,0,.1) 44%,transparent 62%)}
.zl.dark::before{background-image:url(patterns/zellige-app-dark-fade.svg?v=2a93ec66)}
.zl.stars-sec::before{background-image:url(patterns/zellige-app-kids-navy-fade.svg?v=5493910c)}
.zl-be::before{inset-block-end:0;inset-inline-end:0}
.zl-ts::before{inset-block-start:0;inset-inline-start:0;transform:scale(-1,-1)}
html[dir="rtl"] .zl-be::before{transform:scaleX(-1)}
html[dir="rtl"] .zl-ts::before{transform:scaleY(-1)}
html .dark.foot{background-image:radial-gradient(ellipse at 50% 0%,rgba(17,128,106,.3),rgba(5,41,31,0) 60%);padding-top:80px}
.foot::before{inset:0 0 auto 0;height:28px;background:url(patterns/zellige-app-dark-tile.svg?v=42481300) 0 -14px/224px 224px repeat-x;opacity:.9;border-bottom:1.5px solid rgba(230,185,74,.55);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
@media (max-width:640px){
  .zl::before{width:64%;height:min(30%,120px);background-size:760px auto;opacity:.3}
  .foot{padding-top:64px}
}

/* [DEVICES] the devices portal in #tv (tools/build_landing.py devices_block; assets/demos.js): style A of the landing canvas
   P-Devices-3D. CSS 3D only: each device is a box (front with the app screen, back, four edges) on a turntable (.dv-swv:
   rotateY ±25° with a little tilt), the phone turns on its Z axis, a device spins away (rotateY 90°) as the next spins in
   (from −90°), a floor shadow and a glare that moves with the swivel. Every .dv-dev is its own stacking context with its own
   perspective (1200 px; no shared 3D space, so no layer intersection between devices), and an inactive one is visibility:
   hidden. Sizes in container units of the stage. Phones: a 2D cross-fade with a ±10° swivel; reduced motion: the TV, still. */
.dvc{margin-top:96px}
.dv-fig{margin:0;padding:28px 24px 18px;border-radius:28px;background:#F5EEDC;border:1px solid var(--line);overflow:hidden}
.dv-stage{position:relative;width:100%;max-width:860px;margin:0 auto;aspect-ratio:16/10;container-type:inline-size}
.dv-shadow{position:absolute;left:18%;right:18%;bottom:3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(5,41,31,.3),rgba(5,41,31,0))}
.dv-dev{position:absolute;inset:0;display:grid;place-items:center;isolation:isolate;perspective:1200px;perspective-origin:50% 40%;visibility:hidden}
.dv-dev.on,.dv-dev.out{visibility:visible}
.dv-dev.on{z-index:2}
.dv-spin,.dv-swv,.dv-obj,.dv-boxw,.dv-phz,.dv-tvw,.dv-atvw,.dv-atvbox{transform-style:preserve-3d}
.dv-spin{opacity:0;transform:rotateY(-90deg);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.dv-dev.on .dv-spin{opacity:1;transform:none}
.dv-dev.out .dv-spin{opacity:0;transform:rotateY(90deg)}
.dvc.reset .dv-spin,.dvc.reset .dv-phz,.dvc.reset .dv-pp,.dvc.reset .dv-pl{transition:none!important}
.dv-swv{animation:dv-swv 3.2s ease-in-out infinite alternate;animation-play-state:paused}
.dvc.run .dv-swv,.dvc.run .dv-gl{animation-play-state:running}
@keyframes dv-swv{from{transform:rotateX(9deg) rotateY(-25deg)}to{transform:rotateX(4deg) rotateY(25deg)}}
.dv-obj{position:relative}
.dv-boxw{position:relative}
.dv-face{position:absolute;backface-visibility:hidden}
.dv-front{overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dv-gl{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%);pointer-events:none;
  animation:dv-glr 3.2s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes dv-glr{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
.dv-scr{position:absolute;overflow:hidden;background:#0b1512}
.dv-scr img,.dv-body img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* the phone: it turns on its Z axis; its screen stays upright (the landscape layer is turned +90° in the frame) */
.dv-phz{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dv-phone.land .dv-phz{transform:rotate(-90deg) scale(1.12)}
.dv-pp{position:absolute;inset:0;transition:opacity .25s ease .3s}
.dv-pl{position:absolute;left:-12cqw;top:12cqw;width:44cqw;height:20cqw;transform:rotate(90deg);opacity:0;transition:opacity .35s ease .4s}
.dv-phone.land .dv-pp{opacity:0}
.dv-phone.land .dv-pl{opacity:1}
/* TV stand, the browser window, the Apple TV box */
.dv-tvw,.dv-atvw{position:relative}
.dv-neck{position:absolute;left:calc(50% - .7cqw);width:1.4cqw;height:4.4cqw;background:#2a2e36;transform:translateZ(-.6cqw)}
.dv-foot{position:absolute;height:6cqw;border-radius:.8cqw;background:#262a32;transform:rotateX(90deg) translateZ(-3cqw)}
.dv-atvbox{position:absolute;left:calc(50% - 7.5cqw);top:calc(100% + 6.6cqw);transform:translateZ(6cqw)}
.dv-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.8cqw;height:3.6cqw;padding:0 1.2cqw;background:#e9e5da;font-size:1.3cqw;color:#3F4A44}
.dv-bar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#e46a5e;flex:none}.dv-bar i+i{background:#e6b94a}.dv-bar i+i+i{background:#5bb46b}
.dv-tabt{margin-inline-start:1.2cqw;padding:.4cqw 1.6cqw;border-radius:.8cqw .8cqw 0 0;background:#fff;align-self:flex-end;font-family:Tajawal,sans-serif;font-weight:700;white-space:nowrap}
.dv-url{flex:1;height:2.1cqw;display:flex;align-items:center;padding:0 1.2cqw;border-radius:1.1cqw;background:#fff;color:#5C665F;white-space:nowrap;overflow:hidden}
.dv-body{position:absolute;left:0;right:0;top:3.6cqw;bottom:0;display:flex}
.dv-page{flex:1;min-width:0}
.dv-side{width:19cqw;border-inline-start:1px solid #d8d2c2}
.dv-atv .dv-obj{margin-top:-8cqw}
.dv-cap{min-height:3.2em;margin:16px auto 0;max-width:640px;text-align:center;font-size:16px;line-height:1.6;color:var(--muted)}
.dv-strip{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.dv-strip li{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:132px;padding:10px 16px;border-radius:16px;background:#fff;border:2px solid #E8DDC2}
.dv-hl{position:absolute;inset:-2px;border-radius:16px;border:2px solid #0A4F3E;background:#E3F0E8;opacity:0;transition:opacity .35s ease}
.dv-strip li.on .dv-hl{opacity:1}
.dv-strip b,.dv-chip{position:relative}
.dv-strip b{font-size:16px;font-weight:800;color:#1D2420}
.dv-chip{font-size:12.5px;font-weight:800;padding:2px 10px;border-radius:999px;background:#DCEBE2;color:#0A4F3E}
.dv-chip.sn{background:#FFF3D6;color:#7A4F05}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* phones: the 2D fallback: no back or edges, a cross-fade instead of the spin, a ±10° swivel */
@media (max-width:640px){
  .dvc{margin-top:56px}
  .dv-fig{padding:14px 8px 10px;border-radius:20px}
  .dv-back,.dv-edge,.dv-foot{display:none}
  .dv-spin,.dv-dev.on .dv-spin,.dv-dev.out .dv-spin{transform:none}
  .dv-swv{animation-name:dv-swv2}
  .dv-cap{font-size:14.5px}
  .dv-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dv-strip li{min-width:0;padding:8px 8px}
  .dv-strip b{font-size:13.5px;text-align:center}
}
@keyframes dv-swv2{from{transform:rotateY(-10deg)}to{transform:rotateY(10deg)}}
@media (prefers-reduced-motion:reduce){
  .dv-swv,.dv-gl{animation:none}
  .dv-spin,.dv-phz,.dv-pp,.dv-pl,.dv-hl{transition:none}
}

/* [MIHRAB] the mosque board in a mihrab frame (#mihrab, «قريبًا»): the style chips, and the rotation: the TV turns +90° to
   portrait (its screen counter-rotated, the boards cross-fade) and back (assets/demos.js .mhr.port). Transform / opacity only. */
#mihrab{margin-top:96px}
.biz-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--green);color:var(--cream);font-size:12.5px;font-weight:800;line-height:1.5}
.mh-row{align-items:start}
.mh-l{margin:22px 0 10px;font-size:15px;font-weight:800;color:var(--green-d)}
.mh-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.mh-chip{display:flex;flex-direction:column;align-items:center;gap:6px;width:112px;padding:8px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center}
.mh-chip img,.mh-noimg{display:block;width:96px;height:54px;border-radius:8px;object-fit:cover}
.mh-noimg{background:repeating-linear-gradient(45deg,rgba(10,79,62,.1) 0 6px,rgba(10,79,62,.03) 6px 12px);border:1px dashed rgba(10,79,62,.3)}
.mh-chip b{font-size:13.5px;line-height:1.35;color:var(--green-d)}
.mh-chip .ks-soon{color:var(--gold-t);border-color:var(--gold-d);font-size:11.5px;padding:1px 8px}
.mhr{margin:0;width:100%;max-width:560px;justify-self:center}
.mhr figcaption,.mh-md figcaption{margin-top:12px;text-align:center;font-size:14px;color:var(--muted)}
.mh-stage{position:relative;width:100%;aspect-ratio:1/.7;container-type:inline-size;display:grid;place-items:center}
.mh-tv{position:relative;width:80cqw;aspect-ratio:16/9;border-radius:1.4cqw;background:#0b0d0c;box-shadow:0 3cqw 7cqw rgba(0,0,0,.35),0 0 0 1px rgba(230,185,74,.3);
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mh-scr{position:absolute;inset:1.1cqw;overflow:hidden;border-radius:.4cqw;background:#031e13}
.mh-scr img{display:block;width:100%;height:100%;object-fit:cover}
.mh-l1{position:absolute;inset:0;transition:opacity .3s ease .2s}
.mh-p1{position:absolute;left:17.5cqw;top:-17.5cqw;width:42.8cqw;height:77.8cqw;transform:rotate(-90deg);opacity:0;transition:opacity .45s ease .3s}
.mhr.port .mh-tv{transform:rotate(90deg) scale(.8)}
.mhr.port .mh-l1{opacity:0}
.mhr.port .mh-p1{opacity:1}
.mh-md{margin:56px auto 0;max-width:720px}
@media (max-width:640px){#mihrab{margin-top:56px}.mh-chip{width:96px}.mh-chip img,.mh-noimg{width:80px;height:45px}.mh-md{margin-top:36px}}
@media (prefers-reduced-motion:reduce){.mh-tv,.mh-l1,.mh-p1{transition:none}}

/* [KIDS-HOME] the kids home screenshot */
.khd{margin:0}
.khd figcaption{margin-top:10px;text-align:center;font-size:14px;color:#C9C3E0}

/* [OPENING] the hero logo draws itself once (build_landing.py hero_svg): the rehal stroked then filled, the mushaf settles, the
   arcs pulse in, the wordmark wipes in right to left. Only under no-preference; fixed boxes, so nothing shifts. */
.hero-icon.op{display:block;overflow:hidden}
.hero-icon.op>svg{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
  .op .op-rh{stroke:#e6b94a;stroke-width:18;stroke-dasharray:1;animation:op-rh 1.1s ease-out .15s both}
  .op .op-pg{animation:op-pg .55s cubic-bezier(.2,.8,.2,1) .9s both}
  .op .op-a{transform-origin:512px 400px;animation:op-a .8s ease-out 1.25s both}
  .op .op-a2{animation-delay:1.4s}.op .op-a3{animation-delay:1.55s}
  .op-wm{animation:op-wm .75s cubic-bezier(.3,.6,.3,1) 1.5s both}
}
@keyframes op-rh{0%{stroke-dashoffset:1;fill-opacity:0;stroke-opacity:1}70%{stroke-dashoffset:0;fill-opacity:0;stroke-opacity:1}100%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}}
@keyframes op-pg{0%{opacity:0;transform:translateY(-40px)}100%{opacity:1;transform:none}}
@keyframes op-a{0%{opacity:0;transform:scale(.9)}55%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes op-wm{0%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}

/* [BETA] «تجريبي» corner ribbon */
.beta-ribbon{position:fixed;top:0;left:0;width:150px;height:150px;overflow:hidden;z-index:2147483000;pointer-events:none}
.beta-ribbon span{position:absolute;top:34px;left:-46px;width:200px;transform:rotate(-45deg);background:#c0392b;color:#fff;text-align:center;font:700 15px/2.1 Tajawal,system-ui,sans-serif;letter-spacing:.5px;box-shadow:0 2px 8px rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(0,0,0,.25)}
@media (max-width:640px){.beta-ribbon{width:110px;height:110px}.beta-ribbon span{top:24px;left:-42px;width:160px;font-size:12px}}
/* the ribbon's corner (top left) is kept free: the nav starts after it on narrower screens (the AR menu button, the EN logo) */
@media (max-width:1400px){.nav.wrap{padding-left:max(104px,var(--gut,24px))}}
@media (min-width:1001px) and (max-width:1400px){.navlinks{gap:12px}.navlink{font-size:14.5px}.navend{gap:8px}.navend .btn-sm{padding:0 16px;font-size:15px}}
@media (max-width:640px){.nav.wrap{padding-left:70px}}
@media (max-width:400px){.nav{gap:8px}.brand{gap:8px;min-width:0}.lang{padding:6px 10px;font-size:14px}.lang svg{display:none}.brand img{width:40px;height:40px}.brand .lat{font-size:24px}}
.ferr{display:block;margin-top:6px;font-size:14px;font-weight:700;color:#B3261E}.ferr[hidden]{display:none}
/* [QFONT] the demos' ayat in the app's KFGQPC V4 tajweed page fonts (the original files, only the pages used; build_landing.py
   v4_tokens): one glyph span per word, a font only once a demo is near (html.qf-on, assets/demos.js), the fonts' own palettes:
   base-palette 1 (light ink) on the demos' dark screens, «normal» on a light page (the FAQ) (and the app's calm-night filter on the night demo). */
@font-face{font-family:'v4p1';src:url(fonts/v4-p1.woff2?v=3ced9c0f) format('woff2');font-display:block}
@font-face{font-family:'v4p562';src:url(fonts/v4-p562.woff2?v=4ad06785) format('woff2');font-display:block}
@font-face{font-family:'v4p588';src:url(fonts/v4-p588.woff2?v=c02e732c) format('woff2');font-display:block}
@font-palette-values --qv4d{font-family:v4p1,v4p562,v4p588;base-palette:1}
.qv4{font-weight:400;font-style:normal}
/* a glyph shows only once its page font is confirmed loaded (.qok); never in a fallback font. On a failure (.qfail) the Uthmani text from quran.db (.qfb) shows in its place. */
.qv4 .qg{visibility:hidden;font-palette:normal}
.qv4 .qfb:not(.sr){display:none}
.qv4.qok .qg{visibility:visible}
.qv4.qld .qg[data-qp="1"]{font-family:v4p1}.qv4.qld .qg[data-qp="562"]{font-family:v4p562}.qv4.qld .qg[data-qp="588"]{font-family:v4p588}
.qv4.qfail .qg{display:none}
.qv4.qfail .qfb{display:inline;position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-family:'Noto Naskh Arabic','Traditional Arabic','Arabic Typesetting',serif}
.nd-ayah.qv4 .qg,.qv4.qd .qg{font-palette:--qv4d}
.nd-ayah.qv4{filter:brightness(.68) sepia(.6)}
.fd-ayah.qv4 .fm,.nd-ayah.qv4 .nm{font-size:1em}
.rv-ayah .qv4{display:inline-block;min-height:2em}
p .qv4{white-space:nowrap}

/* [RIVALS-PATH] «طريق جزء عمّ», refined: a smooth road (a wide soft band and a fine gold dotted line) through seven round
   milestones (the surah's number on a cream disc with a gold ring, its name from quran.db in clean type, alternately below and
   staggered by the wave so they never collide at 390 px); a milestone turns gold when someone reaches it (.on, assets/demos.js). The family's
   markers are an initial on a coloured disc (no faces). The shared bar and «وسام الأسرة» in the same gold. Reduced motion: the
   finished state, still. Only transform and opacity animate. */
.rvd{background:radial-gradient(120% 90% at 50% 0%,#11563F 0%,#0A3F2F 55%,#062A20 100%);border:1px solid rgba(230,185,74,.45)}
.rv-stage{height:210px}
.rv-line{overflow:visible}
.rv-line .rv-road{fill:none;stroke:rgba(245,238,220,.1);stroke-width:12px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rv-line .rv-dash{fill:none;stroke:rgba(230,185,74,.75);stroke-width:2px;stroke-dasharray:1 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rv-line polyline{display:none}
.rv-st{width:84px;margin-inline-start:-42px;margin-top:-20px;display:flex;flex-direction:column;align-items:center;gap:6px}
.rv-st.up{flex-direction:column-reverse;margin-top:-46px}
.rv-st i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-style:normal;font-size:13px;font-weight:800;color:#0A4F3E;
  background:radial-gradient(circle at 35% 30%,#FFFDF6,#EFE4C8 70%);border:2px solid #C99A2E;box-shadow:0 4px 10px rgba(0,0,0,.28),inset 0 0 0 3px rgba(255,255,255,.5);transition:transform .4s ease}
.rv-st i::after{content:"";position:absolute;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#E6B94A 60%,#B8861B);
  opacity:0;transition:opacity .45s ease;z-index:-1}
.rv-st i{position:relative;z-index:0;isolation:isolate}
.rv-st.on i{color:#05291F;border-color:#FFE7A0;background:radial-gradient(circle at 35% 30%,#FFF1C4,#E6B94A 65%,#C99A2E)}
.rv-st b{font-size:13.5px;font-weight:800;line-height:1.25;color:#F5EEDC;white-space:nowrap;letter-spacing:0}
html[lang="en"] .rv-st b{font-size:12.5px;font-weight:700}
.rv-av{width:30px;height:30px}
.rv-hop{width:30px;height:30px;font-size:14px;font-weight:800;border:2px solid #FFF8E6;box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 3px rgba(255,248,230,.12)}
.rv-bar{background:rgba(5,25,19,.45);border:1px solid rgba(230,185,74,.35);border-radius:18px;padding:14px 16px}
.rv-bl{font-size:14.5px;color:#F5EEDC}
.rv-track{height:12px;border-radius:7px;background:rgba(245,238,220,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.rv-fill{border-radius:7px;background:linear-gradient(90deg,#B8861B,#E6B94A 55%,#FFE7A0)}
.rv-medal{background:linear-gradient(180deg,#FFE7A0,#E6B94A 55%,#C99A2E);color:#05291F;box-shadow:0 4px 12px rgba(230,185,74,.35)}
.rv-legend{color:#F5EEDC}
@media (max-width:640px){
  .rv-stage{height:190px}
  .rv-st{width:60px;margin-inline-start:-30px;margin-top:-16px}.rv-st.up{margin-top:-40px}
  .rv-st i,.rv-st i::after{width:32px;height:32px}.rv-st i{font-size:11.5px}
  .rv-st b{font-size:11.5px}html[lang="en"] .rv-st b{font-size:10.5px}
  .rv-line .rv-road{stroke-width:10px}
}
@media (prefers-reduced-motion:reduce){.rv-st i,.rv-st i::after{transition:none}}

/* [DEVICES] the profile shown on each device: its name under it (the phone: parent access, then the masjid board) */
.dv-pf{position:absolute;left:0;right:0;bottom:1.5%;margin:0;text-align:center;font-size:15px;font-weight:800;color:#0A4F3E}
.dv-pf span{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid #E8DDC2}
.dv-pf .dv-sn{font-style:normal;font-size:12px;font-weight:800;color:#7A4F05;background:#FFF3D6;border-radius:999px;padding:1px 8px}
.dv-phone .dv-pf-l{display:none}
.dv-phone.land .dv-pf-p{display:none}.dv-phone.land .dv-pf-l{display:inline-flex}
.dv-scr img.dv-fit{object-fit:contain;background:#000}
.dv-dev img:not([src]){visibility:hidden}
@media (max-width:640px){.dv-pf{font-size:12.5px;bottom:0}.dv-pf span{padding:3px 10px}}

/* [RIVALS-PATH] the names under the road, in two staggered rows (r0 / r1), centred under their milestones */
.rv-lb{position:absolute;top:72%;width:96px;margin-inline-start:-48px;text-align:center;font-size:13.5px;font-weight:800;line-height:1.25;color:#F5EEDC;white-space:nowrap}
.rv-lb.r1{top:86%}
html[lang="en"] .rv-lb{font-size:12.5px;font-weight:700}
.rv-st b{display:none}
.rv-stage{height:230px}
@media (max-width:640px){.rv-stage{height:210px}.rv-lb{width:72px;margin-inline-start:-36px;font-size:11.5px}html[lang="en"] .rv-lb{font-size:10.5px}}
/* [PARENTS-A] «وصول الوالدين»: the animated phone, option A (tools/landing_parents.py CSS; every rule under .pa) */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.pa .ph,.pa .ph *{box-sizing:border-box}
.pa .ph{position:relative;width:320px;height:660px;flex:none;border-radius:42px;padding:10px;background:#0B0F26;border:1px solid rgba(230,185,74,.45);box-shadow:0 30px 70px rgba(0,0,0,.45);font-family:Tajawal,sans-serif}
.pa .scrn{position:relative;height:100%;overflow:hidden;border-radius:32px;background:linear-gradient(180deg,#FBF7EC,#F3EBD6);color:#1D2420}
.pa .bar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 8px;font-size:13px}
.pa .bar b{font-size:15px;color:#0A4F3E}.pa .bar span{color:#5C665F;font-weight:700}
.pa .stack{position:absolute;inset:44px 0 0 0;overflow:hidden}
.pa .scr{position:absolute;inset:0;padding:4px 14px 14px;display:flex;flex-direction:column;gap:8px;visibility:hidden;font-size:13px;line-height:1.45}
.pa .scr.on,.pa .scr.out{visibility:visible}
.pa .sh{display:flex;flex-direction:column;gap:1px}.pa .sh>b{font-size:17px;color:#05291F}.pa .sh small{color:#5C665F;font-size:12px}
.pa .sh.row{flex-direction:row;align-items:center;justify-content:space-between}
.pa .seg{display:inline-flex;padding:2px;border-radius:999px;background:#EFE6CF;font-size:12px;font-weight:700}.pa .seg span{padding:3px 10px;border-radius:999px;color:#4F5A54}.pa .seg .on{background:#0A4F3E;color:#FBF7EC}
.pa .av{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:var(--c);color:#fff;font-weight:800;line-height:1}
.pa .mut{color:#5C665F;font-size:12px}.pa .note{color:#0A4F3E;font-size:12px;font-weight:700}
.pa .lbl,.pa .lbl2{margin:2px 0 0;font-size:12px;font-weight:800;color:#4F5A54}.pa .lbl2 small{font-weight:700;margin-inline-start:6px}
.pa .btn{position:relative;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;padding:9px 12px;border-radius:999px;border:1px solid #0A4F3E;color:#0A4F3E;font-weight:800;font-size:13.5px;min-height:0;box-shadow:none}
.pa .btn.pri{background:#0A4F3E;color:#FBF7EC}.pa .btn.wide{width:100%}
.pa .rp{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(230,185,74,.75);opacity:0;pointer-events:none}
.pa .rp.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(10,79,62,.35)}
.pa .gold{color:#B8861B}.pa .blue{color:#3a6ea5}.pa .grn{color:#2F7D5B}.pa em{font-style:normal;display:inline-flex}
.pa .cnt{counter-reset:c var(--n)}.pa .cnt::after{content:counter(c,arabic-indic)}html[lang="en"] .pa .cnt::after{content:counter(c,decimal)}
.pa .cam{position:relative;height:92px;border-radius:16px;background:#1D2420;color:#D9D1BC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;font-size:12px}
.pa .cn{position:absolute;width:18px;height:18px;border:3px solid #E6B94A}.pa .c1{top:10px;right:70px;border-width:3px 3px 0 0}.pa .c2{top:10px;left:70px;border-width:3px 0 0 3px}.pa .c3{bottom:10px;right:70px;border-width:0 3px 3px 0}.pa .c4{bottom:10px;left:70px;border-width:0 0 3px 3px}
.pa .scan{position:absolute;left:78px;right:78px;top:50%;height:2px;background:#E6B94A;opacity:.8}
.pa .or{margin:0;text-align:center;color:#5C665F;font-size:12px}
.pa .code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.pa .dg{height:40px;border-radius:10px;background:#fff;border:1.5px solid #E8DDC2;display:grid;place-items:center;font-size:20px;color:#05291F}
.pa .pchips{display:flex;gap:6px}.pa .pchip{padding:5px 12px;border-radius:999px;border:1px solid #E8DDC2;background:#fff;font-weight:700;font-size:12.5px;color:#3F4A44}.pa .pchip.sel{border-color:#0A4F3E;background:#EDF6F0;color:#0A4F3E}
.pa .sheet{position:absolute;inset-inline:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border-radius:22px 22px 0 0;background:#FFFDF6;box-shadow:0 -12px 30px rgba(5,41,31,.18);border-top:1px solid #E8DDC2}
.pa .ok{display:flex;align-items:center;gap:8px;color:#0A4F3E;font-size:14px}.pa .ok svg{flex:none;width:26px;height:26px;padding:4px;border-radius:50%;background:#2F7D5B;color:#fff}
.pa .lockh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#05291F;font-size:14.5px}
.pa .pins{display:flex;gap:14px;justify-content:center;padding:4px 0}.pa .pd{width:16px;height:16px;border-radius:50%;border:2px solid #0A4F3E;background:#0A4F3E}
.pa .kcw{position:relative;display:flex;border-radius:18px;overflow:hidden}.pa .kcw>.kc{flex:1}
.pa .kc{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:18px;background:#fff;border:1px solid #E8DDC2;box-shadow:0 6px 16px rgba(10,79,62,.06)}
.pa .kh{display:flex;align-items:center;gap:10px}.pa .kn{display:flex;flex-direction:column;flex:1}.pa .kn b{font-size:15px;color:#05291F}.pa .kn small{font-size:11.5px;color:#5C665F}
.pa .today{font-size:11px;font-weight:800;color:#0A4F3E;background:#EDF6F0;padding:2px 8px;border-radius:999px}
.pa .ks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.pa .ks>span{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;padding:5px 2px;border-radius:10px;background:#F7F1E1}.pa .ks b{font-size:14px;color:#05291F}.pa .ks small{flex-basis:100%;text-align:center;font-size:10.5px;color:#4F5A54;line-height:1.2}
.pa .kw{font-size:12.5px;color:#3F4A44}.pa .kw b{color:#05291F}
.pa .nudge p{margin:0;font-size:12.5px;color:#3F4A44}.pa .nudge p b{color:#0A4F3E}
.pa .who{display:flex;align-items:center;gap:8px}.pa .who b{display:block;font-size:15px;color:#05291F}.pa .who small{font-size:11px;color:#5C665F}
.pa .stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pa .stats li{display:flex;flex-direction:column;align-items:center;padding:6px 2px;border-radius:12px;background:#fff;border:1px solid #E8DDC2}.pa .stats b{font-size:17px;color:#05291F;line-height:1.2}.pa .stats small{font-size:11px;color:#4F5A54}
.pa .juz{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:14px;background:#fff;border:1px solid #E8DDC2}.pa .juz .lbl2{margin:0}
.pa .jr{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:8px;font-size:12px}.pa .jn{font-weight:700;color:#3F4A44}
.pa .trk{height:8px;border-radius:5px;background:#EFE6CF;overflow:hidden}.pa .fill{display:block;height:100%;width:var(--w);border-radius:5px;background:linear-gradient(90deg,#2F7D5B,#0A4F3E)}
.pa .jv{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:#05291F}.pa .jv.crowned{color:#8A6414}
.pa .sl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}.pa .sl li{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;border-radius:9px;background:#fff;font-size:12.5px;font-weight:700;color:#1D2420}
.pa .sl .now{display:block;font-size:10px;color:#0A4F3E}.pa .s3{display:inline-flex;gap:1px}.pa .sp{color:#E2D8BD}.pa .sp.on{color:#C99A2E}
.pa .pg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding:6px;border-radius:12px;background:#fff;border:1px solid #E8DDC2}.pa .pc{display:flex;flex-direction:column;align-items:center;gap:2px}.pa .pcs{display:flex;flex-direction:column;gap:1px}.pa .pc small{font-size:10px;color:#4F5A54}.pa .pp{color:#DCE3EE}.pa .pp.on{color:#3a6ea5}
.pa .form{display:flex;flex-direction:column;gap:7px}.pa .pa2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pa .fld{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid #E8DDC2}.pa .fld small{color:#4F5A54;font-size:12px}.pa .fld b{font-size:15px;color:#05291F}
.pa .added{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:#EDF6F0;color:#0A4F3E;font-weight:700;font-size:12.5px}
.pa .hw{padding:8px 12px;border-radius:12px;background:#EDF6F0;color:#05291F;font-weight:800;font-size:15px}
.pa .sw{display:grid;font-weight:800;font-size:13px}.pa .sw>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px}
.pa .s1{background:#F7F1E1;color:#4F5A54;opacity:0}.pa .s2{background:#2F7D5B;color:#fff}.pa .dot0{width:10px;height:10px;border-radius:50%;border:2px solid #4F5A54}
.pa .tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}.pa .tl li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#fff;border:1px solid #E8DDC2}.pa .tl li>span:nth-child(2){flex:1;display:flex;flex-direction:column}.pa .tl b{font-size:13.5px;color:#05291F}.pa .tl small{font-size:11px;color:#5C665F}
.pa .appr{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:#0A4F3E}
.pa .mx{display:flex;flex-direction:column;gap:3px;padding:6px 8px;border-radius:12px;background:#fff;border:1px solid #E8DDC2}.pa .mr{display:grid;grid-template-columns:52px repeat(3,minmax(0,1fr));gap:4px;align-items:center}.pa .mh span{text-align:center;font-size:11.5px;font-weight:800;color:#4F5A54}.pa .mk{font-weight:800;font-size:12.5px;color:#05291F}
.pa .cell{position:relative;overflow:hidden;height:24px;border-radius:7px;border:1.5px solid #E8DDC2;display:grid;place-items:center}.pa .cell.on{background:#0A4F3E;border-color:#0A4F3E;color:#fff}.pa .cell.deny{border-color:#B23A2E}
.pa .limit{align-self:center;padding:4px 12px;border-radius:999px;background:#FBE9E6;color:#8A1F14;font-weight:800;font-size:12px}
.pa .tg{display:flex;justify-content:space-between;align-items:center;gap:8px}.pa .tg>span:first-child{display:flex;flex-direction:column}.pa .tg b{font-size:13px;color:#05291F}.pa .tg small{font-size:11px;color:#5C665F}
.pa .sws{flex:none;width:36px;height:20px;border-radius:999px;background:#C9C3B0;position:relative}.pa .sws i{position:absolute;top:2px;inset-inline-end:2px;width:16px;height:16px;border-radius:50%;background:#fff}.pa .sws.on{background:#0A4F3E}.pa .sws.on i{inset-inline-end:18px}
.pa .pushes{position:absolute;inset:0 8px auto;display:flex;flex-direction:column;gap:6px;z-index:2;padding-top:2px}
.pa .push{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:18px;background:#0E1538;color:#FFF8E6;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.pa .pi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#0A4F3E;color:#E6B94A}.pa .pt{display:flex;flex-direction:column;gap:1px}.pa .pt small{font-size:11px;color:#C9C3E0}.pa .pt b{font-size:13.5px}.pa .pt span{font-size:12.5px;color:#D9D1BC}
.pa .dim{display:flex;flex-direction:column;gap:6px;padding-top:140px}
.pa .nl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.pa .nl li{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:11px;background:#fff;border:1px solid #E8DDC2}.pa .nl li>span:first-child{display:flex;flex-direction:column}.pa .nl b{font-size:13px;color:#05291F}.pa .nl small{font-size:11px;color:#5C665F}
.pa .patv{position:absolute;z-index:3;width:270px;padding:8px;border-radius:12px;background:#0B0F26;border:1px solid rgba(230,185,74,.45);box-shadow:0 20px 50px rgba(0,0,0,.45);visibility:hidden;opacity:0;font-family:Tajawal,sans-serif;top:150px;left:max(0px,calc(50% - 330px))}
.pa .patv.on{visibility:visible;opacity:1}
.pa .tvs{border-radius:6px;padding:10px 12px;background:radial-gradient(120% 120% at 50% 0%,#1d2a63,#0d1436);color:#FFF8E6}.pa .tvs>b{display:block;font-size:13px;margin-bottom:6px}
.pa .tvr{display:flex;gap:10px;align-items:center}.pa .qr{flex:none;display:grid;grid-template-columns:repeat(9,7px);gap:1px;padding:5px;background:#fff;border-radius:4px}.pa .qr i{width:7px;height:7px}.pa .qr i.on{background:#0B0F26}
.pa .tvc{display:flex;flex-direction:column;gap:2px}.pa .tvc small{font-size:10.5px;color:#C9C3E0}.pa .tvc strong{font-size:24px;letter-spacing:.06em;color:#E6B94A}
.pa .tvl{display:block;width:70px;height:6px;margin:6px auto 0;border-radius:3px;background:#1a2040}
/* motion: only on the active screen; the base styles are the end state */
.pa .on .ap{animation:pa-ap .45s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
.pa .on .cnt{animation:pa-cnt 1.1s cubic-bezier(.2,.7,.3,1) var(--d,0s) backwards}
.pa .on .fill{animation:pa-fill 1.2s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
.pa .on .sp.on,.pa .on .pp.on{animation:pa-pop .35s cubic-bezier(.3,1.6,.5,1) var(--d,0s) backwards}
.pa .on .rp{animation:pa-rp .7s ease-out var(--d,0s) both}
.pa .on .tapb{animation:pa-press .28s ease-in-out var(--d,0s)}
.pa .on .sheet{animation:pa-up .55s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
.pa .on .pd{animation:pa-pdf .2s ease-out var(--d,0s) backwards}
.pa .on .scan{animation:pa-scan 1.1s ease-in-out .2s 2 alternate}
.pa .on .s1{animation:pa-sw1 .3s ease var(--d,0s) backwards}.pa .on .s2{animation:pa-ap .35s ease var(--d,0s) backwards}
.pa .on .limit{animation:pa-limit 1.8s ease var(--d,0s) backwards}.pa .on .cell.deny{animation:pa-shake .4s ease var(--d,0s)}
.pa .on .push{animation:pa-down .5s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
.pa .on .dim{animation:pa-ap .5s ease .2s backwards}
.pa .patv.on{animation:pa-tvin .6s cubic-bezier(.2,.8,.2,1) .2s backwards}
@keyframes pa-ap{from{opacity:0;transform:translateY(10px)}}
@keyframes pa-cnt{from{--n:0}}
@keyframes pa-fill{from{width:0}}
@keyframes pa-pop{from{transform:scale(.2);opacity:0}}
@keyframes pa-rp{0%{opacity:.9;transform:scale(.1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes pa-press{50%{transform:scale(.95)}}
@keyframes pa-up{from{transform:translateY(110%)}}
@keyframes pa-pdf{from{background:transparent;transform:scale(.6)}}
@keyframes pa-scan{from{transform:translateY(-30px)}to{transform:translateY(30px)}}
@keyframes pa-sw1{from{opacity:1}to{opacity:0}}
@keyframes pa-limit{0%{opacity:0;transform:translateY(6px)}15%,100%{opacity:1;transform:none}}
@keyframes pa-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes pa-down{from{transform:translateY(-140%);opacity:0}}
@keyframes pa-tvin{from{opacity:0;transform:translateY(16px) scale(.94)}}
/* option A: the screens slide in the reading direction (RTL: from the left; EN mirrored) */
.pa .scr.on{animation:pa-in .6s cubic-bezier(.2,.8,.2,1) both}.pa .scr.out{animation:pa-out .6s cubic-bezier(.2,.8,.2,1) both}
.pa .scr.on.bk{animation-name:pa-inb}.pa .scr.out.bk{animation-name:pa-outb}
@keyframes pa-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes pa-out{from{transform:none;opacity:1}to{transform:translateX(30%);opacity:0;visibility:hidden}}
@keyframes pa-inb{from{transform:translateX(100%)}to{transform:none}}
@keyframes pa-outb{from{transform:none;opacity:1}to{transform:translateX(-30%);opacity:0;visibility:hidden}}
html[dir="ltr"] .pa .scr.on{animation-name:pa-inb}html[dir="ltr"] .pa .scr.out{animation-name:pa-outb}
html[dir="ltr"] .pa .scr.on.bk{animation-name:pa-in}html[dir="ltr"] .pa .scr.out.bk{animation-name:pa-out}
.pa.still .ph *,.pa.still .patv,.pa.still .fi *,.pa.still .chp *{animation:none!important}
.pa.still .scr.out{visibility:hidden}
@media (prefers-reduced-motion:reduce){.pa .ph *,.pa .patv,.pa .fi *,.pa .chp *{animation:none!important}.pa .scr.out{visibility:hidden}}
/* the section: the synced list beside the phone (wide), the chips and the caption (phones) */
.pa .agrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.pa .fl6{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pa .fi{position:relative;overflow:hidden;width:100%;display:flex;gap:14px;align-items:flex-start;text-align:start;padding:14px 18px;border-radius:18px;border:1px solid rgba(230,185,74,.22);background:rgba(255,255,255,.03);color:#FFF8E6;font-family:inherit;font-size:inherit;cursor:pointer}
.pa .fi:hover{border-color:rgba(230,185,74,.5)}
.pa .fi .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(230,185,74,.12);color:#E6B94A}
.pa .fi .tx{display:flex;flex-direction:column;gap:2px}.pa .fi b{font-size:17px;color:#F5EEDC}.pa .fi .ds{display:none;font-size:14.5px;line-height:1.6;color:#C9C3E0}
.pa .fi.on{background:rgba(230,185,74,.1);border-color:#E6B94A}.pa .fi.on .ic{background:#E6B94A;color:#05291F}.pa .fi.on .ds{display:block}
.pa .pb{position:absolute;inset-inline:0;bottom:0;height:3px}.pa .fi.on .pb i,.pa .chp.on .pb i{display:block;height:100%;background:#E6B94A;transform-origin:right center;animation:pa-prog var(--dur) linear both}
html[dir="ltr"] .pa .fi.on .pb i,html[dir="ltr"] .pa .chp.on .pb i{transform-origin:left center}
.pa.still .pb i,.pa.paused .pb i{animation-play-state:paused}
@keyframes pa-prog{from{transform:scaleX(0)}}
.pa .pastage{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.pa .ctl{width:320px;display:flex;justify-content:center;margin-top:18px}
.pa .pz{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(230,185,74,.55);background:rgba(255,255,255,.04);color:#FFF8E6;font:700 14px Tajawal,sans-serif;cursor:pointer}
.pa .pz:hover{background:rgba(230,185,74,.12)}.pa .pz svg:nth-of-type(2){display:none}.pa.still .pz svg:nth-of-type(1){display:none}.pa.still .pz svg:nth-of-type(2){display:inline}
.pa .pz:focus-visible,.pa .fi:focus-visible,.pa .chp:focus-visible{outline:3px solid #E6B94A;outline-offset:3px}
.pa .fcap{margin:12px 0 0;width:320px;text-align:center;font-size:14px;color:#C9C3E0}
.pa .pchips6,.pa .mcap,.pa .msafe{display:none}
.pa .chp{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(230,185,74,.35);background:rgba(255,255,255,.04);color:#F5EEDC;font:700 14px Tajawal,sans-serif;cursor:pointer;white-space:nowrap}
.pa .chp.on{background:#E6B94A;border-color:#E6B94A;color:#05291F}.pa .chp .pb{inset-inline:10px;bottom:4px;height:2px}.pa .chp.on .pb i{background:#05291F}
.pa .cap{display:none;margin:0}.pa .cap.on{display:block}.pa .cap b{display:block;font-size:17px;color:#F5EEDC;margin-bottom:4px}.pa .cap span{font-size:15px;line-height:1.6;color:#C9C3E0}
@media (max-width:900px){
  .pa .agrid{grid-template-columns:minmax(0,1fr);gap:0}
  .pa .alist{display:none}
  .pa .pchips6{display:flex;gap:8px;overflow-x:auto;width:calc(100% + 32px);margin:18px -16px 0;padding:4px 16px 8px;scrollbar-width:none}
  .pa .mcap{display:block;min-height:128px;margin-top:10px;width:100%}
  .pa .msafe{display:block}
  .pa .patv{transform:scale(.66);transform-origin:top left;top:-18px;inset-inline-end:auto;left:-8px}
  html[dir="rtl"] .pa .patv{left:auto;right:-8px;transform-origin:top right}
  .pa .patv.on{animation:none}
}

/* [HEADER] a sticky, compact header (the nav sits before the hero's <header>, so it sticks for the whole page); anchors land
   below it; the mobile menu is an opaque panel with the language link and the call to action */
.stick{position:sticky;top:0;z-index:60;background:rgba(5,41,31,.96);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(230,185,74,.18)}
.stick .nav{min-height:64px}
.stick .brand img{width:40px;height:40px}.stick .brand .wm{height:32px;width:auto}
[id]{scroll-margin-top:84px}
.menu .drop{background:#05291F;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.menu .drop .drop-lang{display:flex;align-items:center;gap:8px;margin-top:4px;border-top:1px solid rgba(230,185,74,.25);border-radius:0 0 10px 10px}
.navend .menu .drop a.drop-cta{display:flex;margin-top:6px;justify-content:center;color:#05291F}
.menu .drop a.drop-cta:hover{color:#05291F}
@media (min-width:1001px){.menu .drop .drop-lang,.menu .drop .drop-cta{display:none}}
@media (max-width:640px){.stick .nav{min-height:56px}}
/* [CTA] what happens after the hero's call to action; [STATUS] the badge rule, stated once */
.cta-next{margin:-10px 0 0;font-size:14.5px;color:var(--on-dark,#C9D6CE)}
.status-rule{margin:16px auto 0;max-width:780px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.kn-h.kn-free{font-size:14px;font-weight:800;color:#C4EED6}
h1.tagline{font-family:inherit}

/* [FOCUS-READ] the focus demo on the app's cream mushaf page: the V4 tajweed glyphs keep their normal (day) palette, which is
   designed for paper; dark ink on dark green was unreadable (user, 17 Oct 2026). Dimmed words stay readable (≥ 3:1). */
.fd-screen{background:radial-gradient(ellipse at 50% 35%,#FFFBF0,#F6EDD6 60%,#EADFC2);color:#1F2A24}
.fd-head{color:rgba(31,42,36,.62)}
.fd-ayah.qv4 .qg{font-palette:normal}
.fd.live .fd-ayah .fw,.fd.live .fd-ayah .fm{opacity:.66}
.fd.live .fd-ayah .fw.cur{opacity:1;text-shadow:none;background:rgba(230,185,74,.32);border-radius:.25em;box-shadow:0 0 0 .08em rgba(201,154,46,.35)}

/* [MIHRAB-SWAP] three mihrabs, one per turn: the Nabawi (Rawdah) -> the golden -> the lattice (.mhr[data-i], assets/demos.js);
   img.m0 always under, m1 / m2 fade in over it; one caption each */
.mh-l1 img,.mh-p1 img{position:absolute;inset:0}
.mh-scr img.m1,.mh-scr img.m2{opacity:0;transition:opacity .6s ease}
.mhr[data-i="1"] .mh-scr img.m1,.mhr[data-i="2"] .mh-scr img.m2{opacity:1}
.mhr .mh-c1,.mhr .mh-c2,.mhr[data-i="1"] .mh-c0,.mhr[data-i="2"] .mh-c0{display:none}
.mhr[data-i="1"] .mh-c1,.mhr[data-i="2"] .mh-c2{display:inline}

/* [SCHOOLS] «للمدارس» (tools/landing_schools.py; the landing canvas P-Schools-A, its generator's CSS scoped under .sc, keyframes sc-*; the device mocks keep their fixed design sizes and are scaled to fit by assets/demos.js [SCHOOLS]) */
.sc .h3s{font-size:26px;font-weight:800;color:#05291F;margin:0 0 20px;text-align:center}
.sc .fgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sc .fcard{background:#FFFDF6;border:1px solid #E8DDC2;border-radius:20px;padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.sc .ficon{width:52px;height:52px;border-radius:14px;background:#0A4F3E;color:#E6B94A;display:flex;align-items:center;justify-content:center;flex:none}
.sc .fcard h3{margin:0;font-size:19px;line-height:1.35;font-weight:800;color:#05291F}
.sc .fcard p{margin:0;font-size:15.5px;line-height:1.65;color:#3F4A44}
.sc .how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:h}
.sc .how li{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 22px 22px;border-radius:18px;background:#F5EEDC;border:1px solid #E8DDC2}
.sc .how .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#E6B94A;color:#05291F;font-weight:800;font-size:19px}
.sc .how b{font-size:18px;color:#05291F;margin-top:6px}
.sc .how span{font-size:15.5px;line-height:1.6;color:#3F4A44}
.sc .how .ar{position:absolute;top:40px;inset-inline-end:-17px;width:14px;height:14px;color:#B8861B;z-index:1}
.sc .pc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:stretch}
.sc .priv{border-radius:22px;background:#05291F;color:#F5EEDC;padding:30px 32px}
.sc .priv h3{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:22px;font-weight:800;color:#F5EEDC}
.sc .priv h3 svg{color:#E6B94A}
.sc .priv ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sc .priv li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.6;color:#E9E2CE}
.sc .priv li svg{flex:none;margin-top:4px;color:#E6B94A}
.sc .cta{border-radius:22px;background:#F5EEDC;border:1.5px solid #E6B94A;padding:30px 32px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.sc .cta h3{margin:0;font-family:'Aref Ruqaa',serif;font-size:34px;line-height:1.3;color:#05291F;font-weight:700}
.sc .cta p{margin:0;font-size:16px;line-height:1.7;color:#3F4A44}
.sc .btn:focus-visible,.sc .stp:focus-visible,.sc .chp:focus-visible,.sc .pz:focus-visible,.sc .rl:focus-visible{outline:3px solid #B8861B;outline-offset:3px}
.sc .cta .btn{align-self:flex-start;margin-top:6px}
.sc .cta small{font-size:14px;color:#4F5A54}
.sc .blk{margin-top:64px}
.sc .pz{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #CDBB8C;background:#FFFDF6;color:#05291F;font:700 14px Tajawal,sans-serif;cursor:pointer}
.sc .pz:hover{background:#F5EEDC}
.sc .dev{position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,filter .5s}
.sc .scaled{position:absolute;top:0;left:0;transform-origin:0 0}
.sc .lap .lid{position:relative;border-radius:14px 14px 4px 4px;background:#141A17;padding:9px;box-shadow:0 24px 50px rgba(5,41,31,.28)}
.sc .lap .scr{position:relative;overflow:hidden;border-radius:6px;background:#F6F1E3}
.sc .lap .base{height:14px;margin:0 -26px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#CFC6AE,#A89E85)}
.sc .ld{width:760px;height:476px;display:flex;font-family:Tajawal,sans-serif;color:#1D2420;direction:rtl}
.sc .ld .side{width:150px;flex:none;background:#0A4F3E;color:#F5EEDC;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.sc .ld .brand{font-family:'Aref Ruqaa',serif;font-size:19px;color:#E6B94A;padding:0 8px 2px}
.sc .ld .sch{font-size:11.5px;color:#CFE3DA;padding:0 8px 12px}
.sc .ld .mi{padding:7px 10px;border-radius:8px;font-size:13px;font-weight:600}
.sc .ld .mi.on{background:rgba(255,255,255,.14);font-weight:800}
.sc .ld .main{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.sc .ld .hd{display:flex;justify-content:space-between;align-items:center}
.sc .ld .hd b{font-size:19px;color:#05291F}
.sc .ld .pill{padding:3px 10px;border-radius:999px;background:#0A4F3E;color:#FBF7EC;font-size:11.5px;font-weight:800}
.sc .lpl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sc .pi{padding:7px 9px;border-radius:10px;background:#fff;border:1px solid #E8DDC2;font-size:11.5px;line-height:1.35;color:#4F5A54}
.sc .pi b{display:block;font-size:13px;color:#05291F}
.sc .pi.cur{border:2px solid #E6B94A;background:#FFF8E3}
.sc .pi.done b::after{content:" ✓";color:#2F7D5B}
.sc .kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sc .kp div{padding:7px 10px;border-radius:10px;background:#fff;border:1px solid #E8DDC2}
.sc .kp small{display:block;font-size:11px;color:#4F5A54}
.sc .kp b{font-size:20px;color:#0A4F3E}
.sc .ros{display:flex;flex-direction:column;background:#fff;border:1px solid #E8DDC2;border-radius:12px;padding:4px 10px}
.sc .rw{display:grid;grid-template-columns:28px 64px minmax(0,1fr) 52px 86px;align-items:center;gap:8px;padding:5px 0;border-top:1px solid #F0E8D4;font-size:12.5px}
.sc .rw:first-child{border-top:0}
.sc .rw.h{font-size:10.5px;color:#4F5A54;font-weight:700}
.sc .dc{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;background:var(--c)}
.sc .bar{height:8px;border-radius:8px;background:#ECE5D2;overflow:hidden}
.sc .bar i{display:block;height:100%;border-radius:8px;background:#0A4F3E;transform-origin:right center}
.sc .st{display:inline-flex;gap:1px;direction:ltr}
.sc .mk{justify-self:start;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.sc .mk.ex{background:#E3F1E8;color:#1F5E43}
.sc .mk.gd{background:#E5EEF8;color:#1E4E86}
.sc .mk.rv{background:#FBEFD9;color:#7A5410}
.sc .mk.no{background:#F1ECE0;color:#4F5A54}
.sc .ph .body{position:relative;border-radius:34px;background:#141A17;padding:8px;box-shadow:0 24px 50px rgba(5,41,31,.3)}
.sc .ph .scr{position:relative;overflow:hidden;border-radius:27px;background:#FBF7EC}
.sc .pd{width:300px;height:616px;font-family:Tajawal,sans-serif;color:#1D2420;direction:rtl;display:flex;flex-direction:column}
.sc .pd .tb{background:#0A4F3E;color:#F5EEDC;padding:34px 18px 12px;display:flex;justify-content:space-between;align-items:center}
.sc .pd .tb b{font-size:17px}
.sc .pd .tb span{font-size:13px;color:#CFE3DA}
.sc .pd .cnt{padding:14px 16px;display:flex;flex-direction:column;gap:12px;position:relative;flex:1}
.sc .pd .who{display:flex;align-items:center;gap:10px}
.sc .pd .who .dc{width:44px;height:44px;font-size:20px}
.sc .pd .who b{display:block;font-size:18px;color:#05291F}
.sc .pd .who small{font-size:13px;color:#4F5A54}
.sc .pd .lbl{font-size:13px;font-weight:800;color:#4F5A54}
.sc .ay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sc .ay span{height:40px;border-radius:10px;background:#fff;border:1.5px solid #E8DDC2;display:grid;place-items:center;font-size:17px;font-weight:800;color:#05291F}
.sc .gr{display:flex;flex-direction:column;gap:8px}
.sc .gb{position:relative;overflow:hidden;height:48px;border-radius:14px;border:1.5px solid #CDBB8C;background:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#05291F}
.sc .gb.sel{background:#0A4F3E;border-color:#0A4F3E;color:#FBF7EC}
.sc .rp{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(230,185,74,.7);opacity:0;pointer-events:none}
.sc .nt{font-size:13px;color:#4F5A54;background:#F5EEDC;border-radius:12px;padding:8px 10px}
.sc .toast{position:absolute;inset-inline:14px;bottom:14px;padding:12px 14px;border-radius:14px;background:#05291F;color:#F5EEDC;font-size:14px;display:flex;align-items:center;gap:8px}
.sc .toast svg{color:#E6B94A;flex:none}
.sc .tvx .bez{position:relative;border-radius:12px;background:#0B0D0C;padding:7px;box-shadow:0 24px 50px rgba(0,0,0,.35),0 0 0 1px rgba(230,185,74,.25)}
.sc .tvx .scr{position:relative;overflow:hidden;border-radius:6px}
.sc .tvx .stand{width:34%;height:22px;margin:0 auto;background:linear-gradient(180deg,#2B302D,#141A17);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.sc .td{width:1280px;height:720px;direction:rtl;background:radial-gradient(ellipse at 50% 35%,#FFFBF0,#F6EDD6 60%,#EADFC2);color:#1F2A24;font-family:Tajawal,sans-serif;position:relative}
.sc .td .th{position:absolute;top:40px;inset-inline:64px;display:flex;justify-content:space-between;align-items:center;font-size:30px;color:#3F4A44}
.sc .td .th b{font-size:34px;color:#05291F}
.sc .td .tpill{padding:6px 20px;border-radius:999px;background:#E6B94A;color:#05291F;font-weight:800;font-size:28px}
.sc .td .q{position:absolute;top:150px;inset-inline:70px;margin:0;text-align:center;font-size:84px;line-height:2.05;word-spacing:.06em;font-palette:normal}
.sc .td .q span{display:inline-block;transition:opacity .4s ease,background-color .3s,box-shadow .3s}
.sc .td .q .w{opacity:1}
.sc .td.live .q .w{opacity:.66}
.sc .td.live .q .w.cur{opacity:1;background:rgba(230,185,74,.32);border-radius:.25em;box-shadow:0 0 0 .08em rgba(201,154,46,.35)}
.sc .td .qm{opacity:1}
.sc .td .tf{position:absolute;bottom:40px;inset-inline:64px;display:flex;justify-content:space-between;align-items:center;font-size:28px;color:#3F4A44}
.sc .td .prog{width:420px;height:8px;border-radius:8px;background:rgba(184,134,27,.18);overflow:hidden}
.sc .td .prog i{display:block;height:100%;background:linear-gradient(90deg,#B8861B,#F0CB6A);transform-origin:right center;transition:transform .5s linear}
.sc.run .a0 .pi{animation:sc-pop .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.sc.run .a0 .pi.cur{animation:sc-pop .5s cubic-bezier(.2,.8,.2,1) both,sc-ring 1s ease 1.6s both}
.sc.run .a1 .bar i{animation:sc-fill 1.6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.sc.run .a1 .kp b{animation:sc-cnt .8s ease both .3s}
.sc.run .a2 .rp{animation:sc-rp .8s ease-out 1.4s both}
.sc.run .a2 .gb.sel{animation:sc-sel .2s ease 1.6s both}
.sc.run .a2 .toast{animation:sc-up .5s cubic-bezier(.2,.8,.2,1) 2.3s both}
.sc.run .a2 .ay .rvw{animation:sc-sel .2s ease .7s both}
.sc .ay .rvw{background:#FBEFD9;border-color:#B8861B;color:#7A5410}
.sc .dev.act{transform:translateY(-8px)}
.sc .dev.act .lid,.sc .dev.act .body,.sc .dev.act .bez{box-shadow:0 30px 60px rgba(5,41,31,.32),0 0 0 3px #E6B94A}
.sc.still .dev{transition:none}
.sc.still *{animation:none !important}
.sc .stg{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;padding:26px 0 0}
.sc .steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sc .stp{position:relative;overflow:hidden;width:100%;height:100%;display:flex;gap:12px;align-items:flex-start;text-align:start;padding:16px 16px 18px;border-radius:16px;border:1px solid #E8DDC2;background:#FFFDF6;color:#1D2420;font-family:Tajawal,sans-serif;cursor:pointer}
.sc .stp:hover{border-color:#CDBB8C}
.sc .stp .n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#F5EEDC;color:#05291F;font-weight:800;font-size:16px}
.sc .stp b{display:block;font-size:17px;color:#05291F}
.sc .stp .ds{display:block;font-size:15px;line-height:1.55;color:#3F4A44;margin-top:2px}
.sc .stp.on{border-color:#E6B94A;background:#FFF8E3}
.sc .stp.on .n{background:#E6B94A}
.sc .stp .pb{position:absolute;inset-inline:0;bottom:0;height:3px}
.sc.run .stp.on .pb i{display:block;height:100%;background:#B8861B;transform-origin:right center;animation:sc-fill var(--dur) linear both}
.sc .ctl{display:flex;justify-content:center;margin-top:16px}
.sc .mstage{position:relative;height:300px;margin-top:22px;display:flex;align-items:flex-end;justify-content:center}
.sc .mstage .dev{position:absolute;bottom:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.sc .mstage .dev.act{opacity:1;visibility:visible;transform:none}
.sc .mstage .lap{left:24px}
.sc .mstage .tvx{left:5px}
.sc .mstage .ph{left:102px}
.sc .chips{display:flex;gap:8px;overflow-x:auto;margin:20px -16px 0;padding:4px 16px 8px;scrollbar-width:none}
.sc .chp{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #CDBB8C;background:#FFFDF6;color:#05291F;font:700 14px Tajawal,sans-serif;cursor:pointer;white-space:nowrap}
.sc .chp.on{background:#0A4F3E;border-color:#0A4F3E;color:#FBF7EC}
.sc .chp .pb{position:absolute;inset-inline:12px;bottom:5px;height:2px}
.sc.run .chp.on .pb i{display:block;height:100%;background:#E6B94A;transform-origin:right center;animation:sc-fill var(--dur) linear both}
.sc .cap{display:none;margin:14px 0 0;min-height:76px}
.sc .cap.on{display:block}
.sc .cap b{display:block;font-size:17px;color:#05291F;margin-bottom:2px}
.sc .cap span{font-size:15px;line-height:1.6;color:#3F4A44}
@keyframes sc-fill{from{transform:scaleX(0)}}
@keyframes sc-pop{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes sc-ring{0%{box-shadow:0 0 0 0 rgba(230,185,74,.0)}40%{box-shadow:0 0 0 4px rgba(230,185,74,.9)}100%{box-shadow:0 0 0 2px rgba(230,185,74,.9)}}
@keyframes sc-rp{0%{opacity:.9;transform:scale(.1)}100%{opacity:0;transform:scale(3)}}
@keyframes sc-sel{from{background:#fff;border-color:#CDBB8C;color:#05291F}}
@keyframes sc-up{from{transform:translateY(140%);opacity:0}}
@keyframes sc-cnt{from{opacity:0}}
@media (max-width:900px){
.sc .h3s{font-size:21px;margin-bottom:14px}
.sc .fgrid{grid-template-columns:minmax(0,1fr);gap:10px}
.sc .fcard{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 16px;border-radius:16px}
.sc .ficon{width:42px;height:42px;border-radius:12px}
.sc .fcard h3{font-size:17px}
.sc .fcard p{font-size:15px;line-height:1.6;margin-top:2px}
.sc .how{grid-template-columns:minmax(0,1fr);gap:0}
.sc .how li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:2px;padding:14px 14px;border-radius:0;background:transparent;border:0;border-inline-start:2px dashed #D9C79A;margin-inline-start:20px;padding-inline-start:0}
.sc .how .n{margin-inline-start:-21px;width:40px;height:40px;font-size:17px}
.sc .how b{margin:0;font-size:17px}
.sc .how span{flex-basis:100%;padding-inline-start:31px;font-size:15px}
.sc .how .ar{display:none}
.sc .pc{grid-template-columns:minmax(0,1fr);gap:14px}
.sc .priv,.sc .cta{padding:22px 18px;border-radius:18px}
.sc .priv h3{font-size:19px}
.sc .priv li{font-size:15px}
.sc .cta h3{font-size:28px}
.sc .cta .btn{align-self:stretch}
.sc .blk{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){.sc *{animation:none!important;transition:none!important}}

/* [SCHOOLS] the site around the generator's look: the desktop stage and the phone stage scale to fit (assets/demos.js sets --s),
   the step buttons (wide) or the chips + one device + the live caption (phones); the V4 glyphs of p604 with the font-safe loading */
@font-face{font-family:'v4p604';src:url(fonts/v4-p604.woff2?v=33ba8151) format('woff2');font-display:block}
.qv4.qld .qg[data-qp="604"]{font-family:v4p604}
.sc .tags{justify-content:center;margin-top:10px}
.paper .ks-soon{color:#7A5410;border-color:#8A6414}
.sc .eyebrow{color:#7A5410}
.sc .scfig{margin:0}
.sc .stgw{position:relative;width:100%;overflow:hidden;height:420px}
.sc .stg{position:absolute;top:0;right:0;width:1242px;transform:scale(var(--s,1));transform-origin:top right}
html[dir="ltr"] .sc .stg{right:auto;left:0;transform-origin:top left}
.sc .chips,.sc .mstw,.sc .caps{display:none}
.sc .mstw{position:relative;width:100%;height:300px}
.sc .mstage{width:358px;margin:0;transform:scale(var(--s,1));transform-origin:top right;position:absolute;top:0;right:0}
html[dir="ltr"] .sc .mstage{right:auto;left:0;transform-origin:top left}
.sc .pz svg:nth-of-type(2){display:none}.sc.still .pz svg:nth-of-type(1){display:none}.sc.still .pz svg:nth-of-type(2){display:inline}
.sc .stp{font-family:inherit}
.sc .fcard{align-items:flex-start}
html[dir="ltr"] .sc .how .ar{transform:scaleX(-1)}
.sc .cta .btn{text-decoration:none}
@media (max-width:1100px){.sc .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.sc .how{grid-template-columns:repeat(2,minmax(0,1fr))}.sc .how .ar{display:none}.sc .pc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .sc .stgw,.sc .steps{display:none}
  .sc .chips{display:flex}.sc .mstw{display:block}.sc .caps{display:block}
}
@media (max-width:640px){.sc .fgrid,.sc .how{grid-template-columns:minmax(0,1fr)}.sc .blk{margin-top:44px}}
/* [PLANS] four cards: 4 columns from 1100 px, 2 x 2 below, one column on phones */
.plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.plans .plan{padding:28px 22px}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
@media (max-width:640px){.plans{grid-template-columns:minmax(0,1fr)}}

/* [SCHOOLS] ten feature cards: five columns on wide screens */
@media (min-width:1101px){.sc .fgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.sc .fcard{flex-direction:column;padding:22px 18px}}
/* [BRAND] the school identity demo: the UI chrome takes the theme's colours (custom properties, a smooth colour transition);
   the mushaf page keeps its own fixed cream and the fonts' own palette */
.sc .br{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.sc .br-txt .h3s{text-align:start}
.sc .br-txt p{margin:0 0 14px;font-size:16.5px;line-height:1.7;color:#3F4A44}
.sc .br-note{font-size:14.5px!important;font-weight:700;color:#0A4F3E!important}
.sc .br-sws{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sc .br-sw{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #CDBB8C;background:#FFFDF6;color:#05291F;font:700 14px Tajawal,Manrope,sans-serif;cursor:pointer}
.sc .br-sw i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.sc .br-sw.on{border:2px solid #05291F;background:#F5EEDC}
.sc .br-sw:focus-visible,.sc .br-pz:focus-visible{outline:3px solid #B8861B;outline-offset:3px}
.sc .br-pz svg:nth-of-type(2){display:none}.sc .br.still .br-pz svg:nth-of-type(1){display:none}.sc .br.still .br-pz svg:nth-of-type(2){display:inline}
.sc .br-fig{margin:0}
.sc .br-tv{border-radius:16px;background:#0B0D0C;padding:10px;box-shadow:0 24px 50px rgba(0,0,0,.3),0 0 0 1px rgba(230,185,74,.25)}
.sc .br-stand{width:30%;height:16px;margin:0 auto;background:linear-gradient(180deg,#2B302D,#141A17);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.sc .br-scr{--bh:#0A4F3E;--bt:#FBF7EC;--ba:#E6B94A;--bb:#0A4F3E;--bbt:#FBF7EC;--bk:#F1F5F2;border-radius:8px;overflow:hidden;background:var(--bk);transition:background-color .8s ease}
.sc .br-scr.t1{--bh:#14274E;--bt:#FFF8E6;--ba:#E6B94A;--bb:#E6B94A;--bbt:#14274E;--bk:#EEF1F7}
.sc .br-scr.t2{--bh:#6B1F2A;--bt:#FBF3E4;--ba:#F0D9B5;--bb:#6B1F2A;--bbt:#FBF3E4;--bk:#F8F1EA}
.sc .br-scr.t3{--bh:#0E5E63;--bt:#FFFFFF;--ba:#7FD3C7;--bb:#0E5E63;--bbt:#FFFFFF;--bk:#ECF5F4}
.sc .br-head{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;background:var(--bh);color:var(--bt);transition:background-color .8s ease,color .8s ease}
.sc .br-emb{position:relative;width:40px;height:40px;flex:none;color:var(--ba);transition:color .8s ease}
.sc .br-e,.sc .br-n{position:absolute;opacity:0;transition:opacity .6s ease}
.sc .br-e{inset:0}.sc .br-e svg{display:block}
.sc .br-e.on,.sc .br-n.on{opacity:1}
.sc .br-names{position:relative;flex:1;min-width:0;height:28px}
.sc .br-n{inset-inline-start:0;top:0;font-size:18px;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sc .br-pill{flex:none;padding:3px 12px;border-radius:999px;border:1px solid var(--ba);color:var(--bt);font-size:12.5px;font-weight:800;transition:border-color .8s ease,color .8s ease}
.sc .br-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;padding:16px}
.sc .br-page{border-radius:10px;background:radial-gradient(ellipse at 50% 35%,#FFFBF0,#F6EDD6 60%,#EADFC2);border:1px solid #E2D3AE;padding:14px 12px;display:flex;align-items:center;justify-content:center;min-height:140px}
.sc .br-q{margin:0;text-align:center;font-size:30px;line-height:2;color:#1F2A24}
.sc .br-card{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:#fff;border:2px solid var(--bh);color:#1D2420;transition:border-color .8s ease}
.sc .br-card b{font-size:15px;color:var(--bh);transition:color .8s ease}
.sc .br-card span{font-size:13.5px;line-height:1.5;color:#3F4A44}
.sc .br-card .br-btn{align-self:flex-start;margin-top:auto;padding:6px 16px;border-radius:999px;background:var(--bb);color:var(--bbt);font-weight:800;font-size:13.5px;transition:background-color .8s ease,color .8s ease}
@media (max-width:900px){.sc .br{grid-template-columns:minmax(0,1fr);gap:20px}}
@media (max-width:480px){.sc .br-body{grid-template-columns:minmax(0,1fr)}.sc .br-q{font-size:26px}.sc .br-n{font-size:15.5px}}
@media (prefers-reduced-motion:reduce){.sc .br-scr,.sc .br-head,.sc .br-emb,.sc .br-e,.sc .br-n,.sc .br-pill,.sc .br-card,.sc .br-card b,.sc .br-btn{transition:none}}
/* [CONTACT] the syllabus-help choice, for a school or Quran centre */
.fhelp,.form .fhelp{display:flex;flex-direction:row;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.fhelp[hidden]{display:none}
.fhelp input{width:20px;height:20px;accent-color:#0A4F3E}
/* [NAV] eight links: one row, never wrapped; the menu button below 1240 px */
.navlink{white-space:nowrap}
@media (max-width:1240px){.navlinks{display:none}.menu{display:block}.menu .drop .drop-lang,.menu .drop .drop-cta{display:flex}}
/* [HEADER] with the schools link the links need ~1240 px on one row: below that the menu button takes them */
@media (max-width:1240px){.navlinks{display:none}.menu{display:block}}
.nav .brand{flex:none}.navend .btn{white-space:nowrap}.navlink{white-space:nowrap}

/* [B8] batch 8: the family page, the Ramadan intro, the phone remote, the tajweed «قريبًا» cards; the complete al-Fatiha focus */
.b8-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
#family-web{margin-top:88px}
#remote{margin-top:96px}
.b8 .ks-soon{color:#7A5410;border-color:#8A6414}
.b8-k{margin-bottom:2px}
.paper .b8-k,.b8 .b8-k{color:var(--gold-t)}
.b8-ctas{margin:24px 0 0}
.b8-ctas .btn{gap:10px}
.b8-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.b8-steps li{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.b8-steps .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);color:var(--cream);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.b8-steps b{display:block;color:var(--green-d);font-size:18px;line-height:1.4}
.b8-steps li>span>span{display:block;color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:2px}
.b8-steps+.plan-note{margin-top:16px}
.b8-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.b8-col{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px}
.b8-col.b8-plus{border-style:dashed;border-color:var(--gold-d)}
.b8-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:800;font-size:17px;color:var(--green-d)}
.b8-h svg{color:var(--gold-d)}
.b8-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.b8-col li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--ink)}
.b8-col li svg{flex:none;margin-top:4px;color:var(--green)}
.b8-plus li{color:var(--muted)}
.b8-plus li svg{color:var(--gold-t)}
.b8-sm{margin:12px 0 0;font-size:14px;color:var(--muted)}
.b8-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:980px;margin-inline:auto}
.b8-kid{margin:24px 0 0;max-width:340px}
.b8-kid img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;box-shadow:0 0 0 1px rgba(230,185,74,.3)}
.b8-kid figcaption,.b8-ri figcaption{margin-top:10px;font-size:14px;color:var(--on-dark)}
.b8-ri{margin:0}
.b8-ri figcaption{text-align:center;margin-top:14px}
@media (max-width:1100px){.b8-two{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:640px){.b8-split,.b8-cards{grid-template-columns:minmax(0,1fr)}#family-web{margin-top:64px}#remote{margin-top:72px}.b8-kid{max-width:none}}
/* the complete al-Fatiha (7 ayat) in the TV frame: sized to the screen's width (container units) */
.fd-full .fd-screen{container-type:inline-size;padding:9% 5% 8%;gap:0}
.fd-full .fd-ayah{font-size:4.5cqw;line-height:2.05;word-spacing:.04em;text-wrap:balance}
.fd-full .fd-head{top:4%}
.fd-full .fd-prog{bottom:4.5%}
@media (max-width:640px){
  .fd-full .fd-screen{aspect-ratio:4/3;padding:11% 4% 8%}
  .fd-full .fd-ayah{font-size:5.3cqw;line-height:2}
}
/* [B8] school progress: the level chip with its review-freshness dot (never stars at school) */
.frd{display:inline-block;width:.62em;height:.62em;border-radius:50%;margin-inline-end:4px;vertical-align:.02em}
.frd.g{background:#2E9B5F}.frd.a{background:#E0A526}.frd.r{background:#D0473A}
.sc .rw{grid-template-columns:28px 60px minmax(0,1fr) 78px 92px}
.sc .lv{justify-self:start;display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:10.5px;font-weight:800;white-space:nowrap;background:#F1ECE0;color:#3E4943}
.sc .lv.l3{background:#E3F1E8;color:#1F5E43}.sc .lv.l2{background:#E5EEF8;color:#1E4E86}.sc .lv.l1{background:#FBEFD9;color:#6E4B0E}
.sc .mk{border-radius:10px;line-height:1.3;text-align:center}
.sc .mk small{display:block;font-size:9.5px;font-weight:600;opacity:.9}
.frp{white-space:nowrap}

/* [B9] «تعلّم التجويد» and the TV settings */
#tv-settings{margin-top:96px}
.tj9 .b8-two{align-items:center}
.tj9-main{margin:0}
.tj9-main figcaption{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}
.tj9-gal{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tj9-gal figure{margin:0}
.tj9-gal img,.tj9-gal video{display:block;width:100%;height:auto;border-radius:14px;background:#0b0d0c;box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(0,0,0,.18)}
.tj9-gal img{aspect-ratio:16/9;object-fit:cover}
.tj9-gal video{aspect-ratio:16/9;object-fit:cover}
.tj9-gal figcaption{margin-top:10px;font-size:14.5px;color:var(--muted);text-align:center;line-height:1.5}
.tj9-cap{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.tj9 .b8-cards{margin-top:40px}
.ts9-sm{display:flex;align-items:center;gap:14px;margin-top:18px}
.ts9-sm img{width:min(46%,280px);height:auto;aspect-ratio:16/9;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.ts9-sm span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.tj9-gal{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){#tv-settings{margin-top:72px}.ts9-sm{flex-direction:column;align-items:stretch}.ts9-sm img{width:100%}}

/* [COLOR-AUDIT 2026-10-18] the section-colour audit's fixes (contrast AA, one palette, clear section edges) */
/* the «تجريبي» ribbon: brand gold, not the only red on the page; its corner kept free on wide screens too */
.beta-ribbon span{background:#E6B94A;color:#05291F;border-top-color:rgba(255,255,255,.45);border-bottom-color:rgba(5,41,31,.25)}
/* (at 1401–1560 px the full menu was wider than its box and ran under the ribbon: the compact menu there too, the corner kept) */
@media (min-width:1401px) and (max-width:1560px){.nav.wrap{padding-left:max(104px,var(--gut,24px))}.navlinks{gap:12px}.navlink{font-size:14.5px}.navend{gap:8px}.navend .btn-sm{padding:0 16px;font-size:15px}}
/* form fields: their border 3:1 against the field and the card (was #B9AC8A, 2.1:1) */
.form input,.form select,.form textarea{border-color:#8F8670}
/* the «English» pill and the menu button on the dark nav: border 4.2:1 (was .35, 2.78:1) */
.lang,.menu summary{border-color:rgba(245,238,220,.5)}
/* the support@ ghost button on cream: gold text tone for its border (was 2.81:1) */
.paper .btn-ghost{border-color:var(--gold-t,#8A6414)}
/* the plan note on cream: a warm gold tint instead of the muddy green-grey */
.paper .plan-note{background:rgba(230,185,74,.18);border-color:rgba(184,134,27,.4)}
/* «قريبًا»: one look per background — a dashed outline (gold-t on light, gold on dark), never a filled pill */
.paper .ks-soon,.dv-chip.sn,.dv-pf .dv-sn{background:transparent;color:var(--gold-t,#8A6414);border:1px dashed var(--gold-t,#8A6414)}
/* section edges: features → tv (1.08:1 apart) gets a hairline; get → the footer (the same dark green) a gold hairline */
#tv{border-top:1px solid var(--line,rgba(5,41,31,.12))}
footer{border-top:1px solid rgba(230,185,74,.28)}
/* the footer wordmark was forced into the 56×56 icon box */
.foot-brand img.wm-foot{width:auto;height:34px;border-radius:0}