:root{--welcome-navy:#08275f;--welcome-gold:#dc9409;--welcome-ivory:#fffdf8}
*{box-sizing:border-box}body{margin:0;background:#f7f5f0;color:var(--welcome-navy);font-family:'Cairo',sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--welcome-gold);outline-offset:5px}.welcome-shell{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:start;min-height:calc(100svh - 32px);margin:16px;border:1px solid #d9c7a6;border-radius:12px;overflow:hidden;background:var(--welcome-ivory);box-shadow:0 3px 22px #08275f0a}.welcome-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:-2}.welcome-shell:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,#fffdf83b 0%,#fffdf830 52%,transparent 78%);pointer-events:none;z-index:-1}.welcome-frame{position:absolute;inset:0;width:100%;height:100%;color:#cda455;pointer-events:none}.welcome-content{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(calc(100% - 80px),650px);padding:clamp(65px,11vh,120px) 0 220px}.welcome-brand{margin:0;width:min(100%,510px)}.welcome-brand img{display:block;width:100%;height:auto}.welcome-intro{font-size:16px;font-weight:600;color:#687183;margin:20px 0 30px}.welcome-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:560px}.welcome-categories a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:125px;padding:18px 10px;background:#fffdf3c9;border:1px solid #e5d7bc;border-radius:20px;transition:transform .2s,border-color .2s,box-shadow .2s}.welcome-categories svg{width:43px;height:43px}.welcome-categories span{font-size:15px;font-weight:800}.welcome-categories a:hover{transform:translateY(-4px);border-color:var(--welcome-gold);box-shadow:0 8px 20px #08275f0b}.welcome-start{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:56px;width:min(100%,290px);margin-top:25px;padding:12px 30px;border:1px solid #163d78;border-radius:999px;background:linear-gradient(110deg,#08275f,#173f78);color:#fff;font-size:19px;font-weight:800;box-shadow:0 8px 22px #08275f1a;transition:background .2s,transform .2s}.welcome-start svg{width:24px;height:24px;color:#f4c566}.welcome-start:hover{background:#123b75;transform:translateY(-2px)}.welcome-note{font-size:11px;color:#727a85;letter-spacing:.2px;margin:14px 0 0}
@media(min-width:1500px){.welcome-content{padding-top:13vh}.welcome-brand{width:560px}.welcome-categories{max-width:600px}}
@media(max-height:760px) and (min-width:701px){.welcome-content{padding-top:55px;padding-bottom:155px}.welcome-brand{width:400px}.welcome-intro{margin:15px 0 22px}.welcome-categories a{min-height:105px}.welcome-start{margin-top:20px}}
@media(max-width:700px){.welcome-shell{margin:10px;min-height:calc(100svh - 20px);border-radius:12px}.welcome-content{width:calc(100% - 46px);padding:100px 0 235px}.welcome-brand{width:min(100%,380px)}.welcome-intro{font-size:12px;margin:18px 0 25px}.welcome-categories{gap:9px}.welcome-categories a{min-height:108px;padding:14px 4px;gap:10px;border-radius:16px}.welcome-categories svg{width:34px;height:34px}.welcome-categories span{font-size:11px}.welcome-start{width:100%;max-width:330px;font-size:17px;margin-top:24px;min-height:52px}.welcome-frame{width:170%;left:-35%;right:auto}.welcome-backdrop{object-position:center bottom}.welcome-note{font-size:10px}}
@media(max-width:360px){.welcome-content{width:calc(100% - 34px);padding-top:80px}.welcome-categories{gap:6px}.welcome-categories span{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Proportional interlaced girih corners and layered scalloped arch. */
.welcome-arabesque{--corner-size:clamp(170px,26vw,340px);position:absolute;inset:0;pointer-events:none;overflow:hidden}
.welcome-corner{position:absolute;top:0;width:var(--corner-size);height:auto;display:block}
.welcome-corner-left{left:0}.welcome-corner-right{right:0;transform:scaleX(-1)}
.welcome-side{position:absolute;top:calc(var(--corner-size)*1.45);bottom:0;width:calc(var(--corner-size)*.04375);border-left:5px solid #d4b177b8;border-right:2px solid #ebd7b4}
.welcome-side-left{left:calc(var(--corner-size)*.05625)}.welcome-side-right{right:calc(var(--corner-size)*.05625);transform:scaleX(-1)}
@media(max-width:700px){.welcome-arabesque{--corner-size:48vw}.welcome-side{border-left-width:3px;border-right-width:1px}.welcome-content{padding-top:120px}}

/* Keep small-screen content inside the scalloped frame. */
@media(max-width:700px){
    .welcome-shell{margin:8px;min-height:calc(100svh - 16px)}
    .welcome-content{width:calc(100% - 64px);max-width:420px;padding:clamp(130px,28vw,165px) 0 clamp(175px,25svh,230px)}
    .welcome-brand{width:calc(100% - 18px);max-width:320px}
    .welcome-intro{font-size:12px;line-height:1.8;margin:20px 0 22px;text-wrap:balance}
    .welcome-categories{width:100%;gap:8px}
    .welcome-categories a{min-width:0;min-height:94px;padding:12px 5px;gap:9px;border-radius:14px;background:#fffdf6ed}
    .welcome-categories svg{width:29px;height:29px;flex-shrink:0}
    .welcome-categories span{font-size:11px;line-height:1.7;text-wrap:balance}
    .welcome-start{width:calc(100% - 24px);max-width:290px;min-height:48px;padding:10px 20px;margin-top:22px;font-size:16px;gap:18px}
    .welcome-start svg{width:21px;height:21px}
    .welcome-note{font-size:10px;line-height:1.8;margin-top:12px;color:#687183}
    .welcome-shell:after{background:linear-gradient(to bottom,#fffdf84d 0%,#fffdf87a 50%,#fffdf84d 64%,transparent 82%)}
}
@media(max-width:380px){
    .welcome-content{width:calc(100% - 52px);padding-top:125px;padding-bottom:175px}
    .welcome-intro{font-size:11px;margin:18px 0 20px}
    .welcome-categories{gap:6px}
    .welcome-categories a{min-height:88px;padding:10px 4px;gap:8px}
    .welcome-categories span{font-size:10px}
    .welcome-categories svg{width:26px;height:26px}
    .welcome-start{width:100%;font-size:15px;margin-top:20px}
}
@media(max-height:540px) and (min-width:501px) and (max-width:900px){
    .welcome-content{max-width:420px;padding-top:60px;padding-bottom:130px}
    .welcome-brand{max-width:270px}
    .welcome-intro{margin:12px 0 16px}
    .welcome-categories a{min-height:86px}
    .welcome-start{margin-top:16px}
}/* Stacked logo on the mobile welcome page. */
@media(max-width:700px){
    .welcome-content{padding-top:clamp(85px,20vw,120px);padding-bottom:175px}
    .welcome-brand{width:clamp(180px,48vw,225px);max-width:100%}
    .welcome-brand picture{display:block}
    .welcome-brand img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
    .welcome-intro{margin:14px 0 20px}
}
@media(max-width:380px){.welcome-content{padding-top:85px;padding-bottom:150px}.welcome-brand{width:180px}}
@media(max-height:540px) and (min-width:501px) and (max-width:700px){.welcome-content{padding-top:60px}.welcome-brand{width:170px}}
/* Center a max-w-5xl portal; tile the remaining screen instead of stretching. */
body{background-color:#f8f3e9;background-image:linear-gradient(#fffdf866,#fffdf866),url('../img/home/welcome-pattern.svg');background-size:auto,80px 80px;background-repeat:repeat}
.welcome-shell{width:calc(100% - 32px);max-width:64rem;margin:16px auto;box-shadow:0 8px 40px #08275f12}
.welcome-brand{width:260px;max-width:100%}
.welcome-brand img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
@media(min-width:701px){.welcome-content{padding:clamp(50px,7vh,80px) 0 160px}.welcome-arabesque{--corner-size:min(26vw,270px)}}
@media(max-height:760px) and (min-width:701px){.welcome-content{padding-top:40px;padding-bottom:140px}.welcome-brand{width:210px}}
@media(max-width:700px){.welcome-shell{width:calc(100% - 16px);margin:8px auto}.welcome-brand{width:clamp(180px,48vw,225px)}}
@media(max-width:380px){.welcome-brand{width:180px}}
@media(max-height:540px) and (min-width:501px) and (max-width:700px){.welcome-brand{width:170px}}
/* Keep the closing caption legible over the mosque image. */
.welcome-note{display:inline-flex;align-items:center;justify-content:center;align-self:center;margin:16px 0 0;padding:6px 16px;border:1px solid #dfcda4;border-radius:999px;background:rgba(255,253,248,.94);box-shadow:0 3px 12px #08275f09;color:#29436a;font-size:11px;font-weight:600;line-height:1.7;letter-spacing:0;white-space:nowrap}
@media(max-width:700px){.welcome-note{margin-top:14px;padding:5px 14px;font-size:10px}}
/* Three separate, evenly sized caption badges. */
.welcome-note{display:flex;justify-content:center;align-items:center;gap:8px;margin:16px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.welcome-note span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:5px 13px;border:1px solid #dfcda4;border-radius:999px;background:rgba(255,253,248,.96);box-shadow:0 3px 10px #08275f08;color:#29436a;font-size:11px;font-weight:600;line-height:1.7}
@media(max-width:700px){.welcome-note{gap:7px;margin-top:14px;padding:0}.welcome-note span{min-width:58px;padding:5px 11px;font-size:10px}}
/* Vivid activity badges with matching pictograms. */
.welcome-note span{gap:6px;min-width:76px;padding:6px 13px;color:#fff;border-color:transparent;font-weight:700;box-shadow:0 3px 9px #08275f18}
.welcome-note svg{display:block;width:16px;height:16px;flex-shrink:0}
.welcome-note .welcome-badge-read{background:#08275f;border-color:#08275f}
.welcome-note .welcome-badge-listen{background:#a96800;border-color:#a96800}
.welcome-note .welcome-badge-watch{background:#08776c;border-color:#08776c}
@media(max-width:700px){.welcome-note{gap:6px}.welcome-note span{min-width:70px;padding:6px 10px;font-size:10px}.welcome-note svg{width:15px;height:15px}}
/* Opening Quran verse with user-controlled recitation. */
@font-face{font-family:'Amiri Quran Local';src:url('../fonts/AmiriQuran/AmiriQuran.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.welcome-quran{width:100%;max-width:560px;margin:0 0 22px;padding:14px 18px 10px;border:1px solid #e3d4b5;border-radius:18px;background:#fffdf8ed;box-shadow:0 4px 18px #08275f06}
.welcome-quran h2{margin:0 0 6px;font-size:10px;font-weight:700;color:#9b690d}
.welcome-verse{margin:0;font-family:'Amiri Quran Local',serif;font-size:23px;font-weight:400;line-height:1.85;color:#08275f;letter-spacing:0}
.welcome-verse-source{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:8px 0 10px;font-size:10px;color:#687183}.welcome-verse-source span{color:#8c661c}
.welcome-quran audio{display:block;width:100%;height:38px;direction:ltr;border-radius:24px;color-scheme:light;accent-color:#08275f}
.welcome-audio-options{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:8px;font-size:10px;color:#29436a}
.welcome-audio-options button{padding:3px 8px;border:0;background:transparent;color:#08275f;font:inherit;font-weight:700;cursor:pointer;border-radius:6px}.welcome-audio-options button:hover{background:#f1eadc}.welcome-audio-options button:focus-visible{outline:2px solid #dc9409;outline-offset:2px}
.welcome-audio-options label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}.welcome-audio-options input{margin:0;accent-color:#08275f}
#welcomeAudioError{margin:8px 0 0;font-size:11px;color:#a13a28}
@media(min-width:701px){.welcome-content{padding-top:35px;padding-bottom:140px}.welcome-brand{width:210px}.welcome-intro{margin:12px 0 18px}}
@media(max-width:700px){.welcome-quran{padding:12px 12px 10px;margin-bottom:18px;border-radius:15px}.welcome-verse{font-size:20px;line-height:1.85}.welcome-verse-source{font-size:9px}.welcome-quran audio{height:36px}.welcome-audio-options{gap:12px;font-size:9px}}
/* Illuminated Islamic frame and quiet arabesque ground for the opening verse. */
.welcome-quran{position:relative;isolation:isolate;overflow:hidden;padding:23px 24px 17px;border:2px solid #bb944b;border-radius:20px;background-color:#fffaf0;background-image:linear-gradient(180deg,#fffdf8c9,#fffdf8ed),url('../img/home/welcome-pattern.svg');background-size:auto,64px 64px;background-repeat:repeat;box-shadow:0 0 0 3px #fffdf8,0 0 0 4px #dcc79e,0 7px 22px #08275f0b}
.welcome-quran:before{content:'';position:absolute;inset:7px;border:1px solid #d9c18e;border-radius:12px;pointer-events:none;z-index:0}
.welcome-quran:after{content:'';position:absolute;inset:0;background-image:url('../img/home/quran-frame-rosette.svg'),url('../img/home/quran-frame-rosette.svg'),url('../img/home/quran-frame-rosette.svg'),url('../img/home/quran-frame-rosette.svg');background-position:4px 4px,calc(100% - 4px) 4px,4px calc(100% - 4px),calc(100% - 4px) calc(100% - 4px);background-size:31px 31px;background-repeat:no-repeat;pointer-events:none;z-index:0}
.welcome-quran>*{position:relative;z-index:1}
.welcome-quran h2{display:inline-flex;align-items:center;gap:9px;margin:0 0 9px;padding:0 8px;color:#926015;letter-spacing:0}
.welcome-quran h2:before,.welcome-quran h2:after{content:'';width:18px;height:1px;background:#c9a35d}
.welcome-verse{color:#08275f;text-shadow:0 1px 0 #fff}
.welcome-verse-source{margin:10px 0 12px}
.welcome-quran audio{box-shadow:0 0 0 1px #e4d5b7}
.welcome-audio-options{margin-top:10px}
@media(max-width:700px){.welcome-quran{padding:21px 17px 17px;border-radius:17px}.welcome-quran:before{inset:6px;border-radius:10px}.welcome-quran:after{background-size:26px 26px}.welcome-quran h2{font-size:9px;gap:7px}.welcome-quran h2:before,.welcome-quran h2:after{width:12px}}
/* Bespoke Diwani lettering for the welcome phrase only. */
.welcome-intro-diwani{width:min(100%,380px);margin:4px 0 15px;line-height:1}
.welcome-intro-diwani img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:700px){.welcome-intro-diwani{width:min(100%,310px);margin:6px 0 15px}}
@media(max-width:380px){.welcome-intro-diwani{margin:4px 0 13px}}